/*
 * Laura's stamp: one look for the entrance and every navigation logo.
 * The markup is drawn by scripts/make-stamp.mjs; the behaviours (David's
 * choice, 11 October 2026) are sites/_shared/js/stamp.js: the entrance is a
 * shiny sticker whose border always turns very slowly; the navigation logo is
 * still and its border turns on hover, focus or a press. stamp.js writes the
 * custom properties below; motion is transform and opacity only.
 *
 * A context may set: --stamp-paper (the sticker's paper), --stamp-ink (lines,
 * lettering and the mark), --stamp-shadow (the lift's shadow colour),
 * --stamp-turn (seconds a ring turn takes), --stamp-tilt (largest tilt in
 * degrees) and perspective on .stamp.
 */
.stamp {
  --stamp-paper: light-dark(#FCFAF4, #2E2B27);
  --stamp-ink: light-dark(#1F1D1A, #ECE5D8);
  --stamp-shadow: light-dark(rgb(74 52 26 / .30), rgb(0 0 0 / .55));
  --stamp-edge: light-dark(rgb(74 52 26 / .14), rgb(0 0 0 / .40));
  --stamp-turn: 64;
  --stamp-tilt: 14;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  perspective: 1600px;
  color: var(--stamp-ink);
  -webkit-tap-highlight-color: transparent;
}
.stamp > *, .stamp-tilt > * { position: absolute; inset: 0; display: block; }
.stamp-ring-art, .stamp-face { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }
.stp-mono { overflow: visible; }

/* The entrance sticker takes the finger: no page pan from it (touch-action, so iOS Safari
   sends pointermove instead of pointercancel), no link callout and no selection on a long press. */
.stamp:not(.stamp--mini) { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* The sticker itself: paper, the turning bands, the printed face, the gloss. */
.stamp-tilt { border-radius: 50%; transform-origin: 50% 50%; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--lift-scale, 1)); }
.stamp-paper {
  border-radius: 50%;
  background: var(--stamp-paper);
  box-shadow: 0 0 0 .5px var(--stamp-edge), 0 1px 2px var(--stamp-edge), 0 6px 18px -10px var(--stamp-shadow);
}
.stamp-ring { transform-origin: 50% 50%; transform: rotate(var(--ring-turn, 0deg)); }
.stamp-ring-art { transform-origin: 50% 50%; }
/* The entrance's border turns all the time, very slowly (one turn in 96 s); the pause control stops it. */
@media (prefers-reduced-motion: no-preference) {
  .stamp:not(.stamp--mini) .stamp-ring-art { animation: stamp-turn 96s linear infinite; }
  html.bg-paused .stamp:not(.stamp--mini) .stamp-ring-art { animation-play-state: paused; }
}
@keyframes stamp-turn { to { transform: rotate(360deg); } }
/* On a touch screen, before anyone touches it, a slow sheen drifts across so it reads as shiny. */
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .stamp:not(.stamp--mini):not(.is-live) .stamp-gloss { opacity: .75; }
  .stamp:not(.stamp--mini):not(.is-live) .stamp-spot { animation: sheen-spot 11s ease-in-out infinite alternate; }
  .stamp:not(.stamp--mini):not(.is-live) .stamp-glint { animation: sheen-glint 11s ease-in-out infinite alternate; }
  html.bg-paused .stamp .stamp-spot, html.bg-paused .stamp .stamp-glint { animation-play-state: paused; }
}
@keyframes sheen-spot { from { transform: translate(-24%, -22%); } to { transform: translate(22%, 18%); } }
@keyframes sheen-glint { from { transform: translate(10%, 6%); } to { transform: translate(-11%, -7%); } }
.stamp-lift {
  inset: 3%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--stamp-shadow), transparent);
  opacity: var(--lift, 0);
  transform: translate(var(--shadow-x, 0%), var(--shadow-y, 2%)) scale(var(--shadow-scale, 1));
}
.stamp-gloss { border-radius: 50%; overflow: hidden; pointer-events: none; opacity: var(--lift, 0); }
.stamp-spot, .stamp-glint { position: absolute; inset: auto; left: -50%; top: -50%; width: 200%; height: 200%; }
.stamp-spot {
  transform: translate(var(--spot-x, 0%), var(--spot-y, 0%));
  background: radial-gradient(circle at 50% 50%, rgb(255 255 255 / .75) 0, rgb(255 255 255 / .32) 11%, rgb(255 255 255 / .08) 24%, rgb(255 255 255 / 0) 36%);
  mix-blend-mode: soft-light;
}
.stamp-glint {
  transform: translate(var(--glint-x, 0%), var(--glint-y, 0%));
  left: -100%; top: -100%; width: 300%; height: 300%;
  background: linear-gradient(112deg,
    rgb(255 255 255 / 0) 41%, rgb(255 255 255 / .10) 45.5%, rgb(255 250 240 / .42) 48.6%,
    rgb(255 255 255 / .62) 50%, rgb(240 248 255 / .42) 51.4%, rgb(255 255 255 / .10) 54.5%, rgb(255 255 255 / 0) 59%);
  mix-blend-mode: soft-light;
}
html[data-theme="dark"] .stamp-glint, html[data-theme="dark"] .stamp-spot { mix-blend-mode: screen; opacity: .5; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .stamp-glint, html:not([data-theme="light"]) .stamp-spot { mix-blend-mode: screen; opacity: .5; }
}

/* While a behaviour runs, the script owns these transforms. */
/* (At navigation size the tilt stays un-hinted, so the browser redraws it sharp at any angle.) */
.stamp.is-live .stamp-ring { will-change: transform; }
.stamp:not(.stamp--mini).is-live :is(.stamp-tilt, .stamp-spot, .stamp-glint, .stamp-lift) { will-change: transform, opacity; }

/* The printed face. */
.stp-line { fill: none; stroke: currentColor; }
.stp-line--outer { stroke-width: .8; }
.stp-line--band { stroke-width: 1.8; }
.stp-line--inner { stroke-width: .9; }
.stp-pip, .stp-mono { fill: currentColor; color: var(--stamp-ink); }
.stp-words {
  fill: currentColor;
  font-family: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: 11.4px;
  font-weight: 400;
}

/* The nine bands: each area's pattern in its own colour on its pale wash. */
.stp-wash, .stp-off { fill: var(--stp-wash); }
[class*="stp--"] { color: var(--stp-ink); }
.stp--organise { --stp-ink: light-dark(#ED802B, #F09A50); --stp-wash: light-dark(#F9E2CC, #594330); --stp-wash-strong: light-dark(#F5BD90, #8F633C); }
.stp--simplify { --stp-ink: light-dark(#E2B21C, #EBC23F); --stp-wash: light-dark(#F7ECC9, #584C2C); --stp-wash-strong: light-dark(#EFD688, #8D7733); }
.stp--juggle { --stp-ink: light-dark(#6AA52E, #8CC452); --stp-wash: light-dark(#DFE9CC, #434D30); --stp-wash-strong: light-dark(#B3D091, #5D783D); }
.stp--declutter { --stp-ink: light-dark(#3E9E7E, #5CC29F); --stp-wash: light-dark(#D6E8DC, #384C41); --stp-wash-strong: light-dark(#9DCCB9, #457763); }
.stp--stage { --stp-ink: light-dark(#2A93A6, #4DBACD); --stp-wash: light-dark(#D2E5E4, #354A4C); --stp-wash-strong: light-dark(#93C7CD, #3E737A); }
.stp--style { --stp-ink: light-dark(#34479A, #8698E0); --stp-wash: light-dark(#D4D6E2, #414350); --stp-wash-strong: light-dark(#98A1C7, #5A6284); }
.stp--celebrate { --stp-ink: light-dark(#7B3FA6, #B285D6); --stp-wash: light-dark(#E2D5E4, #4B3F4E); --stp-wash-strong: light-dark(#BC9DCD, #70587F); }
.stp--design { --stp-ink: light-dark(#C42A86, #E46BB2); --stp-wash: light-dark(#F1D0DE, #563946); --stp-wash-strong: light-dark(#E092BD, #894B6D); }
.stp--share { --stp-ink: light-dark(#D63447, #EE6B79); --stp-wash: light-dark(#F4D2D1, #583939); --stp-wash-strong: light-dark(#E9979E, #8E4B50); }

/* At navigation size: bolder lines, a deeper wash so each colour still reads. */
/* No perspective at this size: Chromium rasterises a small layer seen in perspective at
   one pixel per pixel, which blurs the mark; a flat tilt stays sharp and reads the same. */
.stamp--mini { --stamp-turn: 22; perspective: none; }
.stamp--mini .stamp-gloss, .stamp--mini .stamp-lift { display: none; }
.stamp--mini .stp-wash, .stamp--mini .stp-off { fill: var(--stp-wash-strong); }
.stamp--mini .stp-line--outer { stroke-width: 3; }
.stamp--mini .stp-line--band { stroke-width: 3.5; }
.stamp--mini .stamp-paper { box-shadow: 0 0 0 .5px var(--stamp-edge); }

/* Reduced motion: no tilt, no turn; the sticker keeps a still sheen. */
@media (prefers-reduced-motion: reduce) {
  .stamp-tilt, .stamp-ring { transform: none; }
  .stamp:not(.stamp--mini) .stamp-gloss { opacity: .85; }
  .stamp-spot { transform: translate(-13%, -17%); }
  .stamp-glint { transform: translate(-4%, -3%); }
}