/* ==========================================================================
   stemjesus.com
   The loud sister of albertgajsak.com. Same person, same facts, same photos,
   inverted ground. Paper instead of ink, eight kit colours instead of one amber.

   Every colour below was sampled out of the actual product photography and then
   tuned until it passed WCAG AA. The ratio in each comment is measured, not
   estimated. Two rules keep it honest:

     1. Orange and yellow are SURFACES, never marks. 2.76:1 and 1.67:1 as text
        on paper — they exist as fills with --ink on top, and nowhere else.
     2. Poster tier is for display sizes and fills. Ink tier is for body text.
   ========================================================================== */

:root {
  /* ---- ground ---------------------------------------------------------- */
  --paper:      #FBF5E9;   /* warmed up from the Bit silkscreen */
  --paper-2:    #F4ECDA;   /* alternating band */
  --dark:       #0D0C14;   /* the one dark section */

  /* ---- ink ------------------------------------------------------------- */
  --ink:        #14121F;   /* 17.02:1 on paper */
  --ink-2:      #3A3550;   /* 10.71:1 — subheads */
  --ink-mid:    #514B63;   /*  7.62:1 — secondary body */
  --ink-mute:   #5C5670;   /*  6.40:1 — captions */
  --ink-faint:  #6E6880;   /*  4.89:1 — the floor. Nothing lighter carries text */
  --rule:       #8C8598;   /*  3.26:1 — borders. Meets the 3:1 UI minimum */

  /* ---- POSTER TIER — raw kit colour. Fills, display type, marks --------- */
  --red:        #D40A16;   /* Bit 2.0        ·  5.02:1 on paper */
  --orange:     #DB7E05;   /* Codee 2.0      ·  2.76:1 — FILL ONLY */
  --yellow:     #F2B70A;   /* Perseverance   ·  1.67:1 — FILL ONLY */
  --pink:       #E5077F;   /* Beep Boop      ·  4.14:1 — large type only */
  --blue:       #0B63AC;   /* Wheelson 2.0   ·  5.70:1 */
  --plum:       #6B2A5E;   /* Synthia 2.0    ·  9.13:1 */
  --green:      #0A6238;   /* Chatter 2.0    ·  6.87:1 */
  --navy:       #0A1E6B;   /* Jay-D 2.0      · 13.71:1 */

  /* ---- INK TIER — the same hues, legal as body text on paper ------------ */
  --red-ink:    #B00814;   /* 6.69:1 */
  --orange-ink: #8A4E00;   /* 6.10:1 */
  --yellow-ink: #7A5700;   /* 6.06:1 */
  --pink-ink:   #A8035F;   /* 6.80:1 */
  --blue-ink:   #0B5FA3;   /* 6.08:1 */
  --plum-ink:   #6B2A5E;   /* 9.13:1 — plum needs no darkening */
  --green-ink:  #0A6238;   /* 6.87:1 — nor does green */
  --navy-ink:   #0A1E6B;   /* 13.71:1 */

  /* ---- WASHES — section grounds. All 14.74–16.49:1 with --ink ----------- */
  --wash-red:    #FBE3E1;
  --wash-orange: #FBEBD2;
  --wash-yellow: #FCF2CE;
  --wash-pink:   #FBE2EE;
  --wash-blue:   #DFEAF7;
  --wash-plum:   #F0E4EE;
  --wash-green:  #DCEDE2;
  --wash-navy:   #E2E5F4;

  /* sister-site amber, used only inside the dark band — 12.32:1 there */
  --amber:      #ffc53d;

  /* ---- type ------------------------------------------------------------ */
  /* display + mono inherited unchanged from albertgajsak.com. That shared
     stack is what makes an inverted, eight-colour, sticker-covered page still
     read as the same hand. */
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
               Inter, Roboto, system-ui, sans-serif;
  --f-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;
  /* new: industrial condensed for signage. Real faces on macOS/Win/Android/Linux */
  --f-cond:    "Avenir Next Condensed", Bahnschrift, "Roboto Condensed",
               "Liberation Sans Narrow", "Arial Narrow", var(--f-display);
  /* new: the dry-aside voice. Book serif is funnier than any novelty face */
  --f-aside:   "Iowan Old Style", "Palatino Linotype", Palatino,
               Georgia, "Times New Roman", serif;

  /* ---- metrics --------------------------------------------------------- */
  --wrap: 1180px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --sec-y: clamp(4.5rem, 10vw, 8.5rem);
  --stack: clamp(1.4rem, 2.2vw, 2.2rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------- reset-ish */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
figure { margin: 0; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* Two-tone ring: the ink half wins on paper and on the light fills, the paper
   half wins on the dark band and the saturated fills. Minimum across all
   surfaces the site actually uses is 3.39:1. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--paper);
  border-radius: 2px;
}
.origin :focus-visible { outline-color: var(--paper); box-shadow: 0 0 0 6px var(--ink); }

/* Anything inside a clipping ancestor (rounded cards, the socials block, the
   scroll rails) must draw its ring INWARD — an outset ring gets eaten by the
   overflow:hidden that rounds the corner. Still two-tone: the ink edge wins on
   pale photos, the paper edge wins on dark ones, so a near-black ring is never
   left sitting unreadable on top of a photograph. */
.gal img:focus-visible,
.recog__grid img:focus-visible,
.step__shots img:focus-visible,
.faq__q:focus-visible,
.social:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px var(--paper);
}

::selection { background: var(--yellow); color: var(--ink); }   /* 10.17:1 */

/* ------------------------------------------------------------------ layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(3.2rem, 6vw, 5.5rem); }
.section--wash { background: var(--paper-2); border-block: 2px solid var(--ink); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--yellow);
  color: var(--ink);
  padding: 0.75rem 1.15rem;
  font: 700 0.85rem/1 var(--f-mono);
  border: 2px solid var(--ink);
  border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* -------------------------------------------------------------------- halo
   An ellipse in perspective, never a circle. A circle behind a head is an
   icon of holiness; an ellipse tipped off-horizontal is the cartoon halo,
   which means "pretending to be good, and we both know it". It is drawn as
   hardware — solid near arc, dashed silkscreen far arc, a solder pad at each
   pole. Only the tilt and the position say halo. Four placements, no fifth,
   and it never appears over a photograph of a person. */

.halo { width: clamp(64px, 9vw, 128px); height: auto; overflow: visible; }
.halo__back, .halo__front { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.halo__front { stroke: currentColor; }
.halo__back  { stroke: currentColor; stroke-dasharray: 2 9; opacity: 0.55; }
.halo__pad   { fill: currentColor; }

.mark { position: relative; display: inline-block; }
.mark > .halo {
  position: absolute;
  /* the ring must overlap the cap height so the dashed back arc reads as
     passing behind the letterforms. Floating it clear turns it into a
     free-standing symbol, which is the wrong joke — and it collided with
     the line above. */
  left: 50%; top: -0.27em;
  translate: -50% 0;
  z-index: 0;
  rotate: -7deg;
  transition: rotate 0.4s var(--ease), translate 0.4s var(--ease);
}
.mark > span { position: relative; z-index: 1; }
/* the halo slips. The oldest and driest version of the joke. */
.mark:hover > .halo { rotate: -2deg; translate: -50% -3px; }

/* --------------------------------------------------------------- nav ----- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.7rem var(--gut);
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.nav.is-stuck {
  background: rgba(251, 245, 233, 0.93);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--ink);
}

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 24px;            /* standalone link — WCAG 2.5.8 normative floor */
  margin-right: auto;
  font: 700 1rem/1 var(--f-cond);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__mark .halo { width: 26px; flex: none; rotate: -8deg; }

.nav__links { display: flex; gap: 0.2rem; list-style: none; margin: 0; padding: 0; }

.nav__links a {
  display: block;
  padding: 0.45rem 0.6rem;
  font: 700 0.76rem/1.2 var(--f-cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);            /* 7.62:1 */
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--ink); }
/* the highlighter, not a colour change, so the affordance survives greyscale */
.nav__links a[aria-current="true"] {
  color: var(--ink);
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-size: 100% 0.55em;
  background-position: 0 0.78em;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.95rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);                /* 10.17:1 */
  font: 700 0.76rem/1 var(--f-cond);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ink);
  transition: translate 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.nav__cta:hover { translate: -1px -1px; box-shadow: 5px 5px 0 var(--ink); }
.nav__cta:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }

.nav__burger {
  display: none;
  width: 42px; height: 38px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--paper);
  cursor: pointer;
  position: relative;
}
.nav__burger i {
  position: absolute;
  left: 9px; right: 9px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease);
}
.nav__burger i:nth-child(1) { top: 12px; }
.nav__burger i:nth-child(2) { bottom: 12px; }
.nav.is-open .nav__burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav__burger i:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------- eyebrow -- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font: 700 0.74rem/1 var(--f-cond);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mid);            /* 7.62:1 */
  margin: 0 0 1.5rem;
}
/* the halo, at bullet size */
.eyebrow::before {
  content: "";
  flex: none;
  width: 17px; height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: rotate(-12deg);
}
.eyebrow::after {
  content: "";
  height: 2px;
  flex: 1;
  background: var(--rule);          /* 3.26:1 */
  opacity: 0.5;
}
.eyebrow em { font-style: normal; color: var(--red-ink); }   /* 6.69:1 */

/* -------------------------------------------------------------- headings -- */

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }

.h-sec {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem);
  max-width: 20ch;
}
.h-sub {
  font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.7rem);
  letter-spacing: -0.028em;
  line-height: 1.16;
}
.h-mid {
  font-size: clamp(1.6rem, 1.15rem + 1.75vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  max-width: 26ch;
}

.lede {
  font-size: clamp(1.08rem, 1.02rem + 0.4vw, 1.3rem);
  line-height: 1.58;
  color: var(--ink-mid);            /* 7.62:1 */
  letter-spacing: -0.012em;
  max-width: 58ch;
  text-wrap: pretty;
}

.prose { max-width: 46ch; color: var(--ink-mid); }
.prose p { margin: 0 0 1.2em; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--blue-ink); border-bottom: 2px solid currentColor; }  /* 6.08:1 */
.prose a:hover { color: var(--red-ink); }

.h-sec + *, .h-mid + *, .h-sub + * { margin-top: var(--stack); }
.h-sec + .lede, .h-mid + .lede { margin-top: calc(var(--stack) * 0.6); }

/* the yellow highlighter — this is where --yellow earns its place */
.hl {
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-size: 100% 0.62em;
  background-position: 0 0.7em;
  padding-inline: 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* the dry aside. A book serif does more comic work than any novelty face. */
.aside {
  font: italic 400 0.94rem/1.6 var(--f-aside);
  color: var(--ink-mid);            /* 7.62:1 */
  max-width: 56ch;
  border-left: 3px solid var(--rule);
  padding-left: 1rem;
  margin: 1.6rem 0 0;
}

.note {
  margin-top: 1.6rem;
  max-width: 68ch;
  font: 400 0.8rem/1.6 var(--f-mono);
  color: var(--ink-mute);           /* 6.40:1 */
}
.note a { color: var(--blue-ink); border-bottom: 2px solid currentColor; }
.note a:hover { color: var(--red-ink); }

/* ------------------------------------------------------------------ hero -- */

.hero { padding-top: clamp(6.5rem, 13vh, 9.5rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* the real name, small and true, above the nickname */
.hero__real {
  font: 500 0.8rem/1 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin: 0 0 1.9rem;          /* clearance for the halo overhanging the H1 */
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* One unbroken word, one colour. Broken across lines, JESUS becomes a giant
   standalone word and the page reads as a statement; locked as one string it
   reads as a URL, which is what it is. */
.hero__name {
  font-size: clamp(2.35rem, 0.4rem + 8.6vw, 6.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--navy);               /* 13.71:1 */
  margin: 0;
  text-wrap: nowrap;
}

/* a marker line that overshoots, not a neat solder trace */
.scrawl { display: block; width: min(100%, 25rem); height: auto; margin: 0.1rem 0 1.4rem; overflow: visible; }
.scrawl path {
  fill: none;
  stroke: var(--red);               /* 5.02:1 — a legible mark, not just decoration */
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 420);
  stroke-dashoffset: var(--len, 420);
  animation: draw 0.9s 0.25s var(--ease-out) forwards;
}
.scrawl path:nth-child(2) { opacity: 0.45; animation-delay: 0.45s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero__tag {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 1.2rem;
  max-width: 30ch;
  text-wrap: balance;
}

.hero__lede { margin: 0 0 2rem; max-width: 48ch; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.3rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 700 0.82rem/1 var(--f-cond);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: translate 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:hover { translate: -1px -1px; box-shadow: 6px 6px 0 var(--ink); }
.btn:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--fill  { background: var(--yellow); color: var(--ink); }  /* 10.17:1 */
.btn--ghost { background: var(--paper);  color: var(--ink); }  /* 17.02:1 */

/* hard-cut portrait: ink border, unblurred offset shadow. On paper that reads
   as registration and poster printing; on black it would read as nothing. */
.cut {
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  background: var(--paper);
  rotate: -1.4deg;
  overflow: hidden;
  position: relative;
}
.hero__figure { max-width: 30rem; margin-inline: auto; }
.hero__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 46% 24%; }

.cut figcaption {
  padding: 0.6rem 0.85rem;
  border-top: 3px solid var(--ink);
  background: var(--paper);
  font: 500 0.72rem/1.45 var(--f-mono);
  color: var(--ink-mute);           /* 6.40:1 */
}

/* ---------------------------------------------------------------- ticker -- */
/* Skew the band, never the type: skewed type looks like a filter, a skewed
   band looks like a sticker somebody slapped on. */

/* Both skews MUST share one absolute x-origin or they do not cancel. skewY
   displaces y in proportion to distance from the origin, so a 6,000px-wide
   track skewing about its own centre lifts its left end ~86px while the band
   skews about the viewport centre — the track ends up above the band and
   overflow:hidden eats every pill. 50vw pins both to the same point. */
.ticker {
  background: var(--ink);
  padding-block: 0.95rem;
  transform: skewY(-1.6deg);
  transform-origin: 50vw 50%;
  overflow: hidden;
  margin-block: clamp(1rem, 3vw, 2rem);
  position: relative;
}

/* WCAG 2.2.2 (Level A): anything that moves for more than five seconds needs a
   mechanism to stop it. `:hover` is not a mechanism — a keyboard, touch or
   switch user cannot produce one, and prefers-reduced-motion only rescues
   people who have set the OS flag. */
.ticker__pause {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(0.5rem, 2vw, 1.1rem);
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  padding: 0.3rem 0.7rem;
  border: 2px solid var(--paper);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);              /* 17.91:1 on --ink */
  font: 700 0.68rem/1 var(--f-cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.ticker__pause:hover { background: var(--paper); color: var(--ink); }
.ticker__pause svg { width: 13px; height: 13px; flex: none; fill: currentColor; }
.ticker__pause .i-play { display: none; }
.ticker__pause[aria-pressed="true"] .i-pause { display: none; }
.ticker__pause[aria-pressed="true"] .i-play { display: block; }
.ticker__pause:focus-visible { outline-color: var(--paper); box-shadow: 0 0 0 6px var(--ink); }
.ticker[data-paused="1"] .ticker__track { animation-play-state: paused; }
.ticker__track {
  display: flex;
  width: max-content;
  transform: skewY(1.6deg);
  transform-origin: 50vw 50%;
  animation: roll 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes roll { to { transform: skewY(1.6deg) translateX(-50%); } }

.ticker__set { display: flex; flex: none; }

.ticker__item {
  font: 700 0.9rem/1 var(--f-cond);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.5rem 1.05rem;
  margin-inline: 0.28rem;
  border-radius: 999px;
  color: var(--ink);
}
/* only the three ink-safe fills rotate through, so every pill clears 6:1 */
.ticker__item:nth-child(3n+1) { background: var(--yellow); }  /* 10.17:1 */
.ticker__item:nth-child(3n+2) { background: var(--orange); }  /*  6.16:1 */
.ticker__item:nth-child(3n+3) { background: var(--paper);  }  /* 17.02:1 */

/* --------------------------------------------------------- the dark band -- */
/* The site puts its jacket on for one screen, says the serious thing, points
   at the other domain, and takes the jacket off again. */

.origin {
  background: var(--dark);
  color: var(--paper);              /* 17.91:1 */
  border-block: 3px solid var(--ink);
}
.origin .eyebrow { color: #C9C2D4; }               /* 11.25:1 */
.origin .eyebrow em { color: var(--amber); }       /* 12.32:1 */
.origin .eyebrow::after { background: var(--rule); }
.origin .h-sec { color: var(--paper); }
.origin .prose { color: #C9C2D4; }                 /* 11.25:1 */
.origin .prose strong { color: var(--paper); }
.origin .prose a { color: var(--amber); }          /* 12.32:1 */
.origin .aside { color: #C9C2D4; border-left-color: var(--rule); }

.origin__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.origin__out {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.8rem;
  padding: 0.8rem 1.2rem;
  border: 2px solid var(--amber);
  border-radius: 999px;
  color: var(--amber);
  font: 700 0.8rem/1 var(--f-cond);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s;
}
.origin__out:hover { background: var(--amber); color: var(--dark); }
.origin__out svg { width: 14px; height: 14px; flex: none; }

/* exhibits A–D — the four bio fields */
.exhibits { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.exhibits li {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
}
.exhibits b {
  font: 700 0.72rem/1.5 var(--f-cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

/* ----------------------------------------------------------------- about -- */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.about__media { display: grid; gap: 1.4rem; position: sticky; top: 6.5rem; }
.about__media .cut:nth-child(even) { rotate: 1.6deg; }
.about__media img { width: 100%; object-fit: cover; }

/* backer-comment quote, instead of amber smart-quotes on a hairline */
.quote {
  margin: 2.4rem 0 0;
  padding: 1.4rem 1.5rem;
  background: var(--wash-blue);     /* --ink on it: 15.18:1 */
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--ink);
}
.quote blockquote {
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.36;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--ink);
  text-wrap: pretty;
}
.quote cite {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.9rem;
  font: 500 0.74rem/1.5 var(--f-mono);
  letter-spacing: 0.06em;
  color: var(--ink-mid);            /* 7.62:1 */
  font-style: normal;
}
.quote cite::before {
  content: "";
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--ink);
  flex: none;
}

/* ---------------------------------------------------------- circuitmess -- */

.cm__head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem);
}
.cm__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  font: 800 1.05rem/1 var(--f-display);
  letter-spacing: -0.02em;
}
.cm__logo svg { width: 34px; height: 34px; flex: none; }

.cm__banner { margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem); rotate: -0.6deg; }
.cm__banner img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
.stat {
  padding: 1.4rem 1.2rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--paper);
}
.stat:nth-child(1) { background: var(--wash-yellow); }
.stat:nth-child(2) { background: var(--wash-blue); }
.stat:nth-child(3) { background: var(--wash-green); }
.stat:nth-child(4) { background: var(--wash-pink); }
.stat b {
  display: block;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 0.5rem;
  text-wrap: balance;
}
.stat span {
  display: block;
  font: 700 0.72rem/1.45 var(--f-cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);            /* 7.62:1 on the washes, all >=14.7 with ink */
}

/* ------------------------------------------------------- kits / stickers -- */

.prod__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 3rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sheet {
  background: var(--paper-2);
  border: 2px dashed var(--rule);
  border-radius: 18px;
  padding: clamp(1rem, 2.5vw, 2rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
}

.sticker {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 0.95rem;
  transition: rotate 0.3s var(--ease), translate 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.sticker:nth-child(odd)  { rotate: -1.6deg; }
.sticker:nth-child(even) { rotate:  1.3deg; }
.sticker:hover { rotate: 0deg; translate: 0 -4px; box-shadow: 8px 8px 0 var(--ink); }

.sticker__shot { position: relative; display: grid; place-items: center; height: 140px; margin-bottom: 0.9rem; }
.sticker__shot picture { display: contents; }
.sticker__shot img { max-height: 100%; width: auto; max-width: 86%; object-fit: contain; }

.sticker__name {
  font: 700 1rem/1.2 var(--f-cond);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
}
.sticker__desc { font-size: 0.845rem; line-height: 1.5; color: var(--ink-mid); margin: 0; text-wrap: pretty; }
.sticker__meta {
  margin-top: auto;
  padding-top: 0.7rem;
  font: 700 0.68rem/1.45 var(--f-cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);           /* 6.40:1 */
}

/* the swatch strip — the palette IS the products, so say so */
/* Explicit tracks, not auto-fit: eight minmax(140px) columns need 1,120px and
   the wrap is 1,116px, so auto-fit silently gave 7 + 1 orphan at every desktop
   width. There are exactly eight kits in this strip, so state it. */
.chips { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
@media (max-width: 1000px) { .chips { grid-template-columns: repeat(4, 1fr); } }
/* grid lines come from the gap showing the ink ground through, so they stay
   uniform at 8, 4 or 2 columns instead of needing per-edge border rules */
.chips { gap: 2px; background: var(--ink); }
.chips li { background: var(--c); color: var(--paper); padding: 1.2rem 1rem; }
.chips li.on-light { color: var(--ink); }
.chips b { display: block; font: 700 0.86rem/1.25 var(--f-cond); text-transform: uppercase; letter-spacing: 0.05em; }
.chips code { display: block; margin-top: 0.35rem; font: 500 0.74rem/1 var(--f-mono); letter-spacing: 0.05em; }

/* ------------------------------------------------- timeline / build steps -- */
/* Two columns, never a row-span. A grid item spanning intrinsic tracks
   distributes its height across them, which is what tore the sister site's
   timeline entries apart from their own years. */

.tl { margin-top: clamp(1.6rem, 3vw, 2.5rem); }

.step {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  column-gap: clamp(0.9rem, 2vw, 1.4rem);
  align-items: start;
  padding-block: clamp(1.6rem, 3.5vw, 2.6rem);
  border-top: 2px solid var(--ink);
}
.step:last-child { border-bottom: 2px solid var(--ink); }

.step__n {
  grid-column: 1;
  width: 2.7rem; height: 2.7rem;
  display: grid;
  place-items: center;
  font: 800 1.15rem/1 var(--f-cond);
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);                /* 17.02:1 */
}
.step:nth-child(4n+1) .step__n { background: var(--yellow); }  /* 10.17:1 */
.step:nth-child(4n+3) .step__n { background: var(--orange); }  /*  6.16:1 */

.step__body { grid-column: 2; }

.step__year {
  font: 700 0.76rem/1 var(--f-cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-ink);            /* 6.69:1 */
  margin-bottom: 0.5rem;
}
.step__title { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem); font-weight: 800; letter-spacing: -0.026em; line-height: 1.22; margin-bottom: 0.5rem; }
.step__text { font-size: 0.945rem; line-height: 1.6; color: var(--ink-mid); max-width: 52ch; margin: 0; text-wrap: pretty; }

.step__shots { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.step__shots img {
  width: clamp(110px, 16vw, 190px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 8px;
  cursor: zoom-in;
  transition: rotate 0.3s var(--ease), translate 0.3s var(--ease);
}
.step__shots img:hover { rotate: -1.5deg; translate: 0 -3px; }

/* ----------------------------------------------------------- recognition -- */

.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.1rem); margin-top: 2.2rem; }

.award {
  padding: 1.3rem 1.2rem;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  transition: translate 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.award:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); }
.award__year { font: 700 0.7rem/1 var(--f-cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum-ink); margin-bottom: 0.7rem; }  /* 9.13:1 */
.award__title { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.28; margin-bottom: 0.4rem; }
.award__by { font-size: 0.86rem; line-height: 1.5; color: var(--ink-mid); margin: 0; }

.recog__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.9rem; margin-top: clamp(1.5rem, 3vw, 2.2rem); }
@media (min-width: 1001px) { .recog__grid { grid-template-columns: repeat(3, 1fr); } }
.recog__grid img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 10px;
  cursor: zoom-in;
  transition: rotate 0.3s var(--ease), translate 0.3s var(--ease);
}
.recog__grid img:hover { rotate: -1.2deg; translate: 0 -3px; }

/* ------------------------------------------------------------- speaking -- */

.speak__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 4.5vw, 4rem); align-items: start; }

.talklist { list-style: none; margin: var(--stack) 0 0; padding: 0; }
.talklist li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.3rem 1rem;
  padding: 0.95rem 0;
  align-items: baseline;
  border-top: 2px solid var(--ink);
}
.talklist li:last-child { border-bottom: 2px solid var(--ink); }
.talklist dfn { font: 700 0.72rem/1.7 var(--f-cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-ink); font-style: normal; }  /* 6.87:1 */
.talklist b { font-weight: 800; letter-spacing: -0.018em; }
.talklist span { grid-column: 2; font-size: 0.88rem; color: var(--ink-mid); max-width: 46ch; }

/* ------------------------------------------------------------------ faq -- */

.faq { display: grid; gap: 0.7rem; margin-top: var(--stack); max-width: 62rem; }

.faq__item {
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  overflow: hidden;
}
.faq__item[open] { background: var(--wash-yellow); }   /* --ink 16.49:1 */

.faq__q {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  list-style: none;
  min-height: 44px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 13px; height: 13px;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate 0.25s var(--ease);
}
.faq__item[open] .faq__q::after { rotate: -135deg; translate: 0 3px; }

.faq__a { padding: 0 1.15rem 1.15rem; color: var(--ink-mid); max-width: 62ch; }
.faq__a p { margin: 0 0 0.8em; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a a { color: var(--blue-ink); border-bottom: 2px solid currentColor; }

/* -------------------------------------------------------------- gallery -- */

.gal {
  --rail-inset: calc((100% - min(100%, var(--wrap))) / 2 + var(--gut));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 30vw, 330px);
  gap: 0.9rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gut);
  padding: 0.5rem var(--gut) 1.6rem var(--rail-inset);
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.gal::-webkit-scrollbar { height: 9px; }
.gal::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 99px; }
.gal::-webkit-scrollbar-track { background: transparent; }

.gal figure {
  align-self: start;
  scroll-snap-align: start;
  border: 3px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
}
.gal figure:nth-child(odd)  { rotate: -1deg; }
.gal figure:nth-child(even) { rotate: 0.8deg; }
.gal img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; cursor: zoom-in; }
/* the one portrait frame in the rail — 3:2 was cropping his head off */
.gal figure.gal--portrait img { aspect-ratio: 2 / 3; }
.gal figcaption { padding: 0.6rem 0.8rem; border-top: 2px solid var(--ink); font: 500 0.72rem/1.45 var(--f-mono); color: var(--ink-mute); }

.gal__hint { font: 700 0.72rem/1 var(--f-cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-top: var(--stack); }

/* -------------------------------------------------------------- contact -- */

.contact { background: var(--paper-2); border-top: 3px solid var(--ink); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }

.mailto {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.6rem 0 0;
  font-size: clamp(1.1rem, 0.85rem + 1.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--navy);               /* 13.71:1 */
  word-break: break-word;
}
.mailto:hover { color: var(--red-ink); }
.mailto svg { width: 0.8em; height: 0.8em; flex: none; }

.copy-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.2rem; flex-wrap: wrap; }
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  min-height: 34px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  font: 700 0.72rem/1 var(--f-cond);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--ink);
  transition: translate 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s;
}
.copy-btn:hover { translate: -1px -1px; box-shadow: 5px 5px 0 var(--ink); }
.copy-btn[data-done="1"] { background: var(--green); color: var(--paper); }  /* 6.87:1 */

.socials { display: grid; border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 5px 5px 0 var(--ink); background: var(--paper); }
.social { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1.1rem; border-top: 2px solid var(--ink); transition: background 0.2s, padding-left 0.2s var(--ease); }
.social:first-of-type { border-top: 0; }
.social:hover { background: var(--wash-yellow); padding-left: 1.4rem; }
.social svg { width: 19px; height: 19px; flex: none; }
.social__txt { min-width: 0; }
.social__txt b { display: block; font-size: 0.92rem; font-weight: 800; letter-spacing: -0.018em; }
.social__txt span { display: block; font: 500 0.72rem/1.4 var(--f-mono); color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social__arw { margin-left: auto; flex: none; transition: translate 0.2s var(--ease); }
.social:hover .social__arw { translate: 3px -3px; }

.socials__label { padding: 0.6rem 1.1rem; background: var(--ink); color: var(--paper); font: 700 0.68rem/1 var(--f-cond); letter-spacing: 0.16em; text-transform: uppercase; }

/* --------------------------------------------------------------- footer -- */

footer { background: var(--ink); color: var(--paper); }
.foot { padding-block: 2.2rem; display: grid; gap: 1rem; font: 500 0.78rem/1.7 var(--f-mono); color: #C9C2D4; }  /* 11.25:1 */
.foot a { color: var(--paper); border-bottom: 1px solid var(--rule); }
.foot a:hover { color: var(--amber); }
.foot__row { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; align-items: center; justify-content: space-between; }
/* standalone links need the 24x24 normative WCAG 2.5.8 target, so pad them */
.foot__row a, .foot__top { display: inline-flex; align-items: center; min-height: 24px; }
.foot__note { font: italic 400 0.88rem/1.6 var(--f-aside); color: #C9C2D4; max-width: 54ch; }

/* -------------------------------------------------------------- lightbox -- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(13, 12, 20, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.lb[data-open="1"] { opacity: 1; visibility: visible; }
.lb img { max-width: 100%; max-height: 84vh; width: auto; border: 3px solid var(--paper); border-radius: 6px; transform: scale(0.97); transition: transform 0.35s var(--ease-out); }
.lb[data-open="1"] img { transform: scale(1); }
.lb__cap { margin-top: 1rem; max-width: 62ch; text-align: center; font: 500 0.8rem/1.6 var(--f-mono); color: #C9C2D4; }
.lb__x {
  position: absolute;
  top: clamp(0.8rem, 2vw, 1.6rem);
  right: clamp(0.8rem, 2vw, 1.6rem);
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
}
.lb__x:hover { background: var(--paper); color: var(--ink); }
.lb :focus-visible { outline-color: var(--paper); box-shadow: 0 0 0 6px var(--ink); }

/* --------------------------------------------------------- scroll reveal -- */
/* An animation, not a transition: a `.rv.in { transform: none }` rule has the
   same specificity as `.sticker:hover` and would silently kill every lift. */
.rv { opacity: 0; }
.rv.in { animation: rise 0.55s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------- responsive -- */

/* The nav row's min-content width is well past 1000px. On the sister site the
   drawer only appeared at 720px, so from 721–1117px the links ran off-screen
   with no hamburger — and because a position:fixed element never widens
   scrollWidth, every overflow sweep missed it. Hand over at 1117px. */
@media (max-width: 1117px) {
  .nav > nav { position: static; }
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--gut) 1.1rem;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    transform: translateY(-104%);
    visibility: hidden;
    transition: transform 0.34s var(--ease), visibility 0s 0.34s;
  }
  .nav.is-open .nav__links { transform: none; visibility: visible; transition: transform 0.34s var(--ease), visibility 0s 0s; }
  .nav__links a { padding: 0.9rem 0; border-bottom: 2px solid var(--paper-2); }
  .nav__links li:last-child a { border-bottom: 0; }
  .nav__burger { display: block; }
  .nav__cta { display: none; }
}

@media (max-width: 1000px) {
  .hero__grid,
  .origin__grid,
  .about__grid,
  .cm__head,
  .speak__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .hero__figure { max-width: 24rem; margin-inline: 0; }
  .about__media { position: static; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .about__media { grid-template-columns: 1fr; }

  /* kits become a swipeable rail rather than 14 stacked cards */
  .sheet {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 62vw;
    gap: 0.8rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin-inline: calc(-1 * var(--gut));
    padding: 1rem var(--gut);
    scrollbar-width: thin;
  }
  .sticker { scroll-snap-align: start; }
  .sticker__shot { height: 115px; }

  /* recognition photos likewise */
  .recog__grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 70vw;
    gap: 0.6rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 0 var(--gut) 0.9rem;
    margin-inline: calc(-1 * var(--gut));
    scrollbar-width: thin;
  }
  .recog__grid > picture { scroll-snap-align: start; }

  .step { grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 0.8rem; }
  .step__n { width: 2.2rem; height: 2.2rem; font-size: 0.95rem; border-width: 2px; }
  /* Two columns must still fit at 320px. The budget is NOT the full content
     width — the step-number column and its gap take 51px first, leaving
     228.8px. 2x120+8=248 overflowed that and silently dropped to one column,
     stacking every thumbnail. 2x104+8=216 fits. */
  .step__shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 0.5rem; }
  .step__shots img { width: 100%; aspect-ratio: 3 / 2; }

  .talklist li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; padding: 0.85rem 0; }
  .talklist span { grid-column: 1; }

  /* Twelve award cards plus four compliance cards cost ~2,700px on a 320px
     screen — a fifth of the whole document — for content that is a list.
     Drop the card chrome and set it as one. */
  .awards { display: block; border-top: 2px solid var(--ink); margin-top: 1.6rem; }
  .award {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    column-gap: 0.85rem;
    padding: 0.85rem 0;
    border: 0;
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .award:hover { translate: none; box-shadow: none; }
  .award__year  { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; line-height: 1.5; }
  .award__title { grid-column: 2; grid-row: 1; font-size: 0.96rem; margin-bottom: 0.15rem; }
  .award__by    { grid-column: 2; grid-row: 2; font-size: 0.83rem; }

  .exhibits li { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }

  .chips { grid-template-columns: repeat(2, 1fr); }

  .foot__row { gap: 0.5rem 1.2rem; }
}

/* below 360px the 62vw rail leaves ~21 characters per line, which wraps every
   description to five lines. Widen it. */
@media (max-width: 360px) {
  .sheet { grid-auto-columns: 76vw; }
  .recog__grid { grid-auto-columns: 82vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .rv, .rv.in { opacity: 1; animation: none; }
  .scrawl path { stroke-dashoffset: 0; }
  .gal { scroll-snap-type: none; }

  /* The one people get wrong: `animation: none` on a width:max-content flex
     row leaves a clipped strip with a pill sliced in half at the edge. It has
     to actually re-lay-out into a wrapped list. */
  .ticker { transform: none; }
  .ticker__track { animation: none; transform: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 0.45rem; padding-inline: var(--gut); }
  .ticker__set[aria-hidden="true"] { display: none; }
  /* `flex: none` on the set stops it ever shrinking, so wrapping the TRACK
     achieves nothing — the set stays one 3,000px row and everything past the
     viewport edge is still clipped. The set itself has to wrap and shrink. */
  .ticker__set { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
  .ticker__item { margin-inline: 0; }
  /* nothing is moving, so the control is noise */
  .ticker__pause { display: none; }

  .mark > .halo { rotate: -7deg; }   /* rests at the tilt, never straightens */
  .sticker, .sticker:nth-child(odd), .sticker:nth-child(even),
  .gal figure:nth-child(odd), .gal figure:nth-child(even),
  .cut, .about__media .cut:nth-child(even), .cm__banner { rotate: 0deg; }
  .sticker:hover { translate: none; }
}

@media print {
  .nav, .lb, .ticker, .gal, .skip, .ticker__pause { display: none !important; }
  body { background: #fff; color: #000; }
  .cut, .sticker, .award, .stat, .faq__item, .socials { box-shadow: none; rotate: 0deg; }

  /* Anything still waiting on the IntersectionObserver is opacity:0, and print
     does not scroll — so without this, most of the document prints blank. */
  .rv, .rv.in { opacity: 1 !important; animation: none !important; transform: none !important; }

  /* the dark band and the footer are white-on-near-black; invert them or they
     print as a solid ink slab (or, worse, as invisible white text) */
  .origin, footer { background: #fff !important; color: #000 !important; }
  .origin .h-sec, .origin .prose, .origin .prose strong, .origin .aside,
  .origin .eyebrow, .origin .eyebrow em, .origin .exhibits b, .origin__out,
  .foot, .foot a, .foot__note, .socials__label {
    color: #000 !important;
    background: none !important;
  }
  .socials__label { border-bottom: 1px solid #000; }
  .origin__out { border-color: #000 !important; }

  /* details print closed by default — force every answer open */
  .faq__item { overflow: visible; }
  .faq__a { display: block !important; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
}