/* ============================================================================
   Founder Intelligence home · page styles
   Grammar: stacked deck. Each chapter is a full-viewport card. A card pins at
   the top; the next slides up over it; the covered card recedes (page.js).
   Engine classes (.sc-*, [data-sc-*]) are never restyled here.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  --sc-canvas:      #2D0917;   /* oxblood, the page ground                    */
  --sc-surface:     #3B1024;
  --sc-ink:         #F4F0EE;
  --sc-ink-soft:    #D3BFC7;   /* tinted toward the ground, never flat grey   */
  --sc-accent:      #E0207A;   /* the one accent                              */
  --sc-accent-ink:  #100D0F;

  --sc-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sc-font-text:    "Inter", system-ui, sans-serif;
  --sc-font-mono:    "Courier Prime", "Courier New", monospace;

  --sc-shadow-color: 335 60% 3%;
  --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 14px;

  /* deck */
  --ink-ground:  #100D0F;
  --ox-ground:   #2D0917;
  --light-ground:#F4F0EE;
  --light-ink:   #2D0917;
  --light-soft:  #6E4B58;
  --light-accent:#A80F4C;
  --bar-h: 4.25rem;
}

html { scroll-padding-top: 0; }
body { background: var(--ox-ground); }

/* Light cards restate ink AND color (inherited computed value). */
.card--light {
  --sc-ink: var(--light-ink);
  --sc-ink-soft: var(--light-soft);
  --sc-accent: var(--light-accent);
  --sc-accent-ink: #F4F0EE;
  --sc-canvas: var(--light-ground);
  color: var(--sc-ink);
}
.card--ink { --sc-canvas: var(--ink-ground); }
.card--ox  { --sc-canvas: var(--ox-ground); }

/* ------------------------------------------------------------------- type */
.display {
  font-family: var(--sc-font-display);
  font-weight: var(--display-weight, 400);
  font-variation-settings: var(--display-opsz, "opsz" 144);
  line-height: 0.98;
  letter-spacing: var(--display-track, -0.028em);
  text-wrap: balance;
  margin: 0;
  color: var(--sc-ink);
}
.display em { font-style: italic; font-weight: 400; color: var(--sc-accent); }
.display--hero { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 6.4rem); max-width: 14ch; }
.display--lg   { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.6rem); letter-spacing: -0.024em; }
.display--md   { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.3rem); letter-spacing: -0.02em; line-height: 1.04; }
.display--sm   { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem); letter-spacing: -0.012em; line-height: 1.18; color: var(--sc-accent); }

.lede {
  font-family: var(--sc-font-text);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: var(--sc-ink);
  max-width: 44ch;
  text-wrap: pretty;
  margin: 0;
}
.lede--turn { color: var(--sc-accent); }
/* On dark grounds the accent lifts one step so a body-size line clears 4.5:1.
   Same hue, second lightness: the two-stop accent taste.md allows for pages
   that cut between light and dark grounds. */
.card--ink .lede--turn, .card--ox .lede--turn { color: #EE5C9C; }
.lede--q { font-family: var(--sc-font-display); font-style: normal; font-weight: var(--display-weight, 400); font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.9rem); line-height: 1.12; letter-spacing: -0.02em; max-width: 22ch; color: var(--sc-ink); }

.body {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  line-height: 1.6;
  color: var(--sc-ink-soft);
  max-width: 54ch;
  text-wrap: pretty;
  margin: 0;
}
.body--strong { color: var(--sc-ink); font-weight: 500; }
.body + .body, .body + .lede, .lede + .body, .lede + .lede { margin-top: var(--sc-5); }

.label {
  font-family: var(--sc-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-accent);
  margin: 0 0 var(--sc-3);
}
.script {
  font-family: var(--sc-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--sc-accent);
  letter-spacing: -0.01em;
  margin: 0;
}
.shout {
  /* The poster face: the same tall condensed grotesque as her bus-shelter
     poster and the carousel treatment ("REFUSING"). Solid, not glowing. */
  font-family: "Anton", var(--sc-font-text);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.9;
  font-size: clamp(4rem, 1rem + 11.5vw, 12.5rem);
  color: var(--sc-accent);
  margin: 0;
  text-shadow: 0.02em 0.03em 0 color-mix(in oklab, var(--sc-accent) 28%, transparent);
  text-wrap: balance;
}
.shout--sm { font-size: min(clamp(2.4rem, 1rem + 5.4vw, 6.2rem), 12.5vh); letter-spacing: 0.005em; line-height: 0.94; margin-bottom: var(--sc-5); }
.shout { font-size: min(clamp(4rem, 1rem + 11.5vw, 12.5rem), 22vh); }
.shout span { display: inline-block; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--sc-font-text);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.95em 1.35em;
  border-radius: var(--sc-r-sm);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
  will-change: transform;
}
.btn::after { content: "→"; font-family: var(--sc-font-text); font-weight: 500; translate: 0 -0.02em; transition: translate 160ms var(--sc-ease-out); }
.btn:active { transform: scale(0.97); }
.btn--solid { background: #C9126A; color: #FFF6FA; }
.btn--solid:hover { background: var(--sc-accent); }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 34%, transparent); }
.btn--ghost:hover { border-color: var(--sc-ink); }
.btn--light { color: #F4F0EE; border-color: color-mix(in oklab, #F4F0EE 44%, transparent); }
.btn--light:hover { border-color: #F4F0EE; }
.btn--big { font-size: 1.02rem; padding: 1.05em 1.5em; }
@media (hover: hover) and (pointer: fine) { .btn:hover::after { translate: 0.25em -0.02em; } }

/* ----------------------------------------------------------------- chrome */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--sc-gutter);
  color: #F4F0EE;
  pointer-events: none;
  transition: color 240ms var(--sc-ease-out);
}
.bar > * { pointer-events: auto; }
.bar__mark {
  font-family: var(--sc-font-text); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.24em; text-decoration: none; color: inherit;
}
.bar__cta {
  font-family: var(--sc-font-text); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.01em;
  color: inherit; text-decoration: none;
  padding: 0.7em 1em; border-radius: var(--sc-r-sm);
  border: 1px solid color-mix(in oklab, currentColor 40%, transparent);
  background: color-mix(in oklab, var(--ink-ground) 40%, transparent);
  backdrop-filter: blur(8px);
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.bar__cta:hover { border-color: currentColor; }
body[data-ground="light"] .bar { color: var(--light-ink); }
body[data-ground="light"] .bar__cta { background: color-mix(in oklab, #F4F0EE 60%, transparent); }

/* Deck index: eight ticks on the right edge. Current one is long and magenta. */
.deck-index {
  position: fixed; right: clamp(0.75rem, 1.6vw, 1.5rem); top: 50%; translate: 0 -50%;
  z-index: var(--sc-z-chrome);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.deck-index a {
  position: relative; display: block; width: 2.25rem; height: 1.1rem;
  text-decoration: none; color: #F4F0EE;
}
.deck-index a::before {
  content: ""; position: absolute; right: 0; top: 50%; height: 2px; width: 0.9rem;
  background: currentColor; opacity: 0.38; translate: 0 -50%;
  transform-origin: 100% 50%;
  transition: width 220ms var(--sc-ease-out), opacity 220ms var(--sc-ease-out), background-color 220ms var(--sc-ease-out);
}
.deck-index a span {
  position: absolute; right: 2.6rem; top: 50%; translate: 0.4rem -50%;
  font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; opacity: 0; color: inherit;
  transition: opacity 160ms var(--sc-ease-out), translate 160ms var(--sc-ease-out);
}
.deck-index a:hover::before, .deck-index a:focus-visible::before { opacity: 0.85; }
.deck-index a.is-current::before { width: 2.25rem; opacity: 1; background: #E0207A; }
@media (hover: hover) and (pointer: fine) {
  .deck-index:hover a span { opacity: 0.85; translate: 0 -50%; }
}
body[data-ground="light"] .deck-index a { color: var(--light-ink); }
@media (max-width: 860px) { .deck-index { display: none; } }

/* ------------------------------------------------------------------- deck */
.deck { position: relative; }
.card { position: relative; }
/* Each card after the first begins one viewport before the previous ends, so
   the previous stage is still stuck while this one slides over it. */
.card + .card { margin-top: -100vh; margin-top: -100svh; }
.card--hero { z-index: 1; }
#enemy { z-index: 2; } #moment { z-index: 3; } #work { z-index: 4; } #map { z-index: 5; }
#room { z-index: 6; } #her { z-index: 7; } #about { z-index: 8; } #close { z-index: 9; }

.stage {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  transform-origin: 50% 40%;
  will-change: transform;
  box-shadow: 0 -18px 60px -20px hsl(var(--sc-shadow-color) / 0.7), 0 -1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);
}
/* the recede veil, driven from --cover by page.js */
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: var(--ink-ground);
  opacity: var(--veil, 0);
}
.card.is-covered .stage { visibility: hidden; }

.grid {
  position: relative; z-index: var(--sc-z-copy);
  height: 100%;
  padding: calc(var(--bar-h) + var(--sc-6)) var(--sc-gutter) var(--sc-7);
  display: grid; gap: var(--sc-6);
  max-width: var(--sc-maxw); margin-inline: auto;
}

/* ------------------------------------------------------------------- hero */
.stage--hero { overflow: clip; }
.hero__plane { position: absolute; inset: -8% -4%; z-index: 0; }
.hero__plane img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 30%; max-width: none; }
.hero__plane--wash {
  z-index: 2; inset: auto -10% -12% -10%; height: 45%;
  background: linear-gradient(to top, color-mix(in oklab, var(--ox-ground) 92%, transparent), transparent);
  pointer-events: none;
}
.hero__scrim { z-index: 1; --sc-scrim-a: 88%; }
.hero__copy { max-width: min(48rem, 78vw); bottom: clamp(3.5rem, 13vh, 9rem); }
.hero__lede { margin-top: var(--sc-5); max-width: 40ch; color: var(--sc-ink-soft); font-weight: 400; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }
.hero__aside {
  position: absolute; right: var(--sc-gutter); bottom: clamp(3.5rem, 13vh, 9rem); z-index: var(--sc-z-copy);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.6rem);
}
.hero__rule {
  position: absolute; left: var(--sc-gutter); bottom: clamp(2.2rem, 8vh, 5.5rem); z-index: var(--sc-z-copy);
  width: min(30rem, 40vw); height: 2px; background: var(--sc-accent);
  transform-origin: 0 50%;
  transform: scaleX(calc(0.2 + var(--sc-p, 0) * 1.4));
}
.card--hero .hero__copy { animation: hero-in 900ms var(--sc-ease-out) both; }
@keyframes hero-in { from { translate: 0 18px; } to { translate: 0 0; } }

/* ------------------------------------------------------------------ enemy */
.marquee {
  position: absolute; left: 0; right: 0; top: calc(var(--bar-h) + 1.2rem); z-index: 1;
  overflow: hidden; padding-block: 0.6rem;
  border-block: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; gap: 2.6rem; width: max-content;
  font-family: var(--sc-font-mono); font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-ink) 46%, transparent);
  animation: marquee 46s linear infinite;
}
.marquee__track span { text-decoration: line-through; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; white-space: nowrap; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

.grid--enemy {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  padding-top: calc(var(--bar-h) + 4.4rem);
  align-content: start;
}
.enemy__head { grid-column: 1; align-self: start; }
.enemy__body { grid-column: 2; grid-row: 1 / span 2; align-self: start; padding-top: 0.6rem; }
.plate--enemy { grid-column: 1; grid-row: 2; align-self: end; margin: 0; width: min(100%, 30rem); }
.plate--enemy img { border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); }

/* ----------------------------------------------------------------- moment */
.grid--moment {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-content: start;
}
.moment__copy { grid-column: 1; grid-row: 1; }
.moments { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: var(--sc-4); }
.moments li { position: relative; padding-left: 1.6rem; max-width: 52ch; }
.moments li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.6rem; height: 0.6rem; background: var(--sc-accent); }
.stakes { margin-top: var(--sc-7); }
.plate--moment { grid-column: 2; grid-row: 1; margin: 0; align-self: start; justify-self: end; width: min(100%, 34rem); overflow: clip; border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); }
.plate__inner { position: relative; }
.plate__inner img { width: 100%; height: auto; scale: 1.12; }
.payfor {
  grid-column: 1 / -1; grid-row: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sc-6);
  padding-top: var(--sc-5);
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
  align-items: start;
}
.payfor .label { grid-column: 1 / -1; margin-bottom: 0; }

/* ------------------------------------------------------------------- peak */
.stage--her { overflow: clip; }
.her__portrait {
  position: absolute; z-index: 0; inset: 0 0 0 auto; width: min(54vw, 62rem);
  overflow: clip;
}
.her__img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; max-width: none;
  filter: grayscale(var(--avg, 0)) blur(calc(var(--avg, 0) * 16px)) contrast(calc(1 - var(--avg, 0) * 0.45)) brightness(calc(1 - var(--avg, 0) * 0.25));
  transform: scale(calc(1 + var(--avg, 0) * 0.06));
  will-change: filter, transform;
}
.her__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ink-ground) 0%, color-mix(in oklab, var(--ink-ground) 40%, transparent) 30%, transparent 60%);
}
.her__scrim { z-index: 1; --sc-scrim-a: 0%; background: linear-gradient(90deg, color-mix(in oklab, var(--ink-ground) 96%, transparent) 0%, color-mix(in oklab, var(--ink-ground) 78%, transparent) 46%, transparent 72%); }
.her__states {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); right: var(--sc-gutter);
  top: calc(var(--bar-h) + 3.5vh); bottom: clamp(2.5rem, 9vh, 6rem);
  max-width: min(50rem, 52vw);
}
.her__state .shout { max-width: 9ch; }
.her__state { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--sc-5); }
.her__state .lede { max-width: 42ch; }
.her__state--hold .lede { max-width: 46ch; }

.verdict { margin: 0; display: grid; gap: var(--sc-4); font-family: var(--sc-font-display); font-size: clamp(1.5rem, 1rem + 2.2vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--sc-ink); }
.verdict__line { display: block; }
.verdict__struck { position: relative; display: inline-block; text-transform: uppercase; font-family: "Anton", var(--sc-font-text); font-weight: 400; letter-spacing: 0.01em; font-size: 1.15em; }
.strike { position: absolute; left: -2%; right: -2%; top: 0; width: 104%; height: 100%; overflow: visible; pointer-events: none; }
.strike__path { fill: none; stroke: var(--sc-accent); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.verdict__line--her strong { color: var(--sc-accent); font-family: "Anton", var(--sc-font-text); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.15em; }
.verdict__line--diff { font-size: 0.62em; color: var(--sc-ink-soft); max-width: 30ch; line-height: 1.3; font-family: var(--sc-font-text); letter-spacing: -0.01em; font-weight: 500; }

/* -------------------------------------------------------------------- map */
.grid--map {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: start;
}
.proof { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 9rem; gap: var(--sc-6); align-items: start; padding-bottom: var(--sc-6); border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); }
.proof__photo { margin: 0; align-self: start; }
.proof__photo img { width: 100%; height: auto; border-radius: var(--sc-r-sm); box-shadow: var(--sc-e2); aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; }
.proof .body + .body { margin-top: 0; }
.map__copy { grid-column: 1; grid-row: 2; align-self: center; display: grid; gap: var(--sc-5); justify-items: start; }
.map__copy .body { margin: 0; }
.sheet { grid-column: 2; grid-row: 2; margin: 0; align-self: center; justify-self: end; width: min(100%, 26rem); perspective: 1200px; }
.sheet__paper {
  background: var(--light-ground); color: var(--light-ink);
  padding: var(--sc-6) var(--sc-6) var(--sc-5);
  border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e3), var(--sc-edge);
  rotate: -2.5deg;
  aspect-ratio: 1 / 1.25;
  display: flex; flex-direction: column;
}
.sheet__kicker { font-family: var(--sc-font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light-accent); margin: 0 0 auto; }
.sheet__list { margin: var(--sc-6) 0; padding: 0; list-style: none; display: grid; gap: var(--sc-3); font-family: var(--sc-font-display); font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1.15; letter-spacing: -0.015em; }
.sheet__list li { padding-bottom: var(--sc-3); border-bottom: 1px solid color-mix(in oklab, var(--light-ink) 14%, transparent); }
.sheet__foot { font-family: var(--sc-font-mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--light-soft); margin: 0; }

/* ------------------------------------------------------------------- room */
.stage--room { overflow: clip; }
.room__photo { position: absolute; inset: -12% -4%; z-index: 0; }
.room__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; max-width: none; }
.room__scrim { z-index: 1; }
.room__copy { max-width: min(46rem, 80vw); display: grid; gap: var(--sc-5); justify-items: start; }
.room__copy .lede { color: #F4F0EE; }
.room__copy .display { color: #F4F0EE; }

/* ------------------------------------------------------------------ about */
.grid--about { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
.plate--about { margin: 0; overflow: clip; border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); height: min(64svh, 42rem); }
.plate--about .plate__inner { height: 100%; }
.plate--about img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; scale: 1.08; }
.about__copy { display: grid; gap: var(--sc-4); justify-items: start; max-width: 40rem; }
.about__copy .body + .body { margin-top: 0; }
.about__copy .btn { margin-top: var(--sc-3); }

/* ------------------------------------------------------------------ close */
.stage--close { display: grid; grid-template-rows: 1fr auto; }
.close__inner { display: grid; place-content: center; justify-items: center; text-align: center; gap: var(--sc-6); padding: var(--sc-8) var(--sc-gutter) var(--sc-6); }
.script--big { font-size: clamp(3rem, 1rem + 8.2vw, 9rem); line-height: 1; letter-spacing: -0.02em; }
.close__inner .lede { max-width: 34ch; text-align: center; }
.nowrap { white-space: nowrap; }
.foot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1rem;
  padding: var(--sc-5) var(--sc-gutter) var(--sc-6);
  font-family: var(--sc-font-mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 12%, transparent);
}
.foot__mark { color: var(--sc-ink); letter-spacing: 0.24em; }
.foot__sep { opacity: 0.5; }

/* ----------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; gap: 0.8rem 1.6rem; }
  .marquee { mask-image: none; }
  .her__img { filter: none !important; transform: none !important; }
  .strike__path { stroke-dashoffset: 0 !important; }
  .stage { transform: none !important; }
  .stage::after { opacity: 0 !important; }
  .card--hero .hero__copy { animation: none; }
  .hero__rule { transform: none; }
}

/* ----------------------------------------------------------------- mobile */
@media (max-width: 860px) {
  :root { --bar-h: 3.6rem; }
  .bar__cta { display: none; }
  .grid { gap: var(--sc-5); padding-bottom: var(--sc-6); }
  .display--hero { font-size: clamp(2.3rem, 1rem + 8.4vw, 3.6rem); max-width: 12ch; }
  .hero__plane img { object-position: 62% 18%; }
  .hero__copy { bottom: clamp(2.5rem, 9vh, 5rem); }
  .hero__aside { display: none; }
  .hero__rule { width: 34vw; }

  .grid--enemy { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; padding-top: calc(var(--bar-h) + 5.4rem); }
  .enemy__head, .enemy__body, .plate--enemy { grid-column: 1; }
  .enemy__body { grid-row: 2; padding-top: 0; }
  .enemy__body .body { display: none; }
  .enemy__body .body:first-child { display: block; }
  .plate--enemy { grid-row: 3; width: min(100%, 22rem); justify-self: end; align-self: end; }
  .plate--enemy img { aspect-ratio: 4 / 3; object-fit: cover; }

  .grid--moment { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .plate--moment { display: none; }
  .moments { gap: var(--sc-3); }
  .stakes { margin-top: var(--sc-5); }
  .stakes .body:not(.body--strong) { display: none; }
  .payfor { grid-template-columns: 1fr; gap: var(--sc-3); }
  .payfor .lede { display: none; }

  .her__portrait { inset: 0; width: 100%; }
  .her__veil { background: linear-gradient(to top, var(--ink-ground) 0%, color-mix(in oklab, var(--ink-ground) 55%, transparent) 55%, color-mix(in oklab, var(--ink-ground) 25%, transparent) 100%); }
  .her__scrim { background: linear-gradient(to top, color-mix(in oklab, var(--ink-ground) 96%, transparent) 0%, color-mix(in oklab, var(--ink-ground) 70%, transparent) 55%, transparent 100%); }
  .her__states { max-width: none; top: auto; height: 62svh; bottom: clamp(1.5rem, 6vh, 4rem); }
  .her__state { justify-content: flex-end; }
  .verdict { font-size: clamp(1.35rem, 1rem + 2.6vw, 2rem); }

  .grid--map { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .proof { grid-template-columns: 1fr; gap: var(--sc-3); }
  .proof .body:first-child { display: none; }
  .map__copy { grid-column: 1; grid-row: 2; }
  .sheet { grid-column: 1; grid-row: 3; justify-self: start; width: min(100%, 18rem); }
  .sheet__paper { aspect-ratio: auto; padding: var(--sc-5); }
  .sheet__list { margin: var(--sc-4) 0; font-size: 1.15rem; }

  .room__photo img { object-position: 30% 40%; }

  .grid--about { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; }
  .plate--about { max-height: 32svh; }
  .plate--about img { height: 32svh; }
  .about__copy .body:nth-of-type(2) { display: none; }

  .script--big { font-size: clamp(2.6rem, 1rem + 11vw, 4.6rem); }
}

/* ------------------------------------------------- staging: font switcher --
   Remove this block and the switcher in page.js before deploy. Meganté is read
   from the local machine only (MI has it installed); it is never shipped. */
@font-face { font-family: "Megante Local"; src: local("Meganté"), local("Megante"), local("Megante Regular"); font-weight: 400; font-display: swap; }
.fontsw {
  position: fixed; left: clamp(0.75rem, 1.6vw, 1.5rem); bottom: 1rem; z-index: 70;
  font-family: "Inter", system-ui, sans-serif; font-size: 0.78rem; color: #F4F0EE;
}
.fontsw__toggle {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: rgba(16,13,15,0.72); color: #F4F0EE; border: 1px solid rgba(244,240,238,0.3);
  border-radius: 999px; padding: 0.55em 0.9em; cursor: pointer; backdrop-filter: blur(8px);
  font: inherit; font-weight: 600; letter-spacing: 0.02em;
}
.fontsw__toggle b { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.1rem; line-height: 1; }
.fontsw__panel {
  display: none; margin-bottom: 0.5rem; padding: 0.5rem;
  background: rgba(16,13,15,0.9); border: 1px solid rgba(244,240,238,0.2); border-radius: 12px; backdrop-filter: blur(10px);
  min-width: 17rem; box-shadow: 0 12px 40px -10px rgba(0,0,0,0.6);
}
.fontsw.is-open .fontsw__panel { display: block; }
.fontsw__opt {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem; width: 100%;
  background: transparent; color: #F4F0EE; border: 0; border-radius: 8px; padding: 0.55rem 0.7rem; cursor: pointer; text-align: left; font: inherit;
}
.fontsw__opt:hover { background: rgba(244,240,238,0.08); }
.fontsw__opt.is-on { background: rgba(224,32,122,0.22); outline: 1px solid rgba(224,32,122,0.6); }
.fontsw__opt .name { font-weight: 600; }
.fontsw__opt .name small { display: block; font-weight: 400; opacity: 0.7; margin-top: 0.15em; }
.fontsw__opt .sample { font-size: 1.35rem; line-height: 1; font-weight: 400; }
@media (max-width: 860px) { .fontsw { bottom: 0.75rem; } .fontsw__panel { min-width: 15rem; } }

/* ------------------------------------------------- photography layers ----
   Overlapping plates at different parallax rates: the depth comes from the
   differential movement and the overlap, not from shadow alone. */
.plates { position: relative; }
/* width/height attributes are paired hints: free the height so aspect-ratio
   governs, or a 941px attribute height survives max-width and stretches the box. */
.plate img, .map__photo img { width: 100%; height: auto; display: block; }
.plates--enemy { grid-column: 1; grid-row: 2; align-self: end; width: min(100%, 32rem); height: min(46vh, 26rem); }
.plates--enemy .plate--enemy { position: absolute; left: 0; bottom: 0; width: 78%; margin: 0; }
.plates--enemy .plate--enemy img { border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); aspect-ratio: 16 / 10; object-fit: cover; }
.plate--enemy-b { position: absolute; right: -6%; top: -12%; width: 42%; margin: 0; z-index: 2; }
.plate--enemy-b img { border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 20%; }

.plates--moment { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; width: min(100%, 36rem); height: min(56vh, 34rem); }
.plates--moment .plate--moment { position: absolute; right: 0; top: 0; width: 86%; }
.plate--moment-b { position: absolute; left: -4%; bottom: 0; width: 44%; margin: 0; z-index: 2; }
.plate--moment-b img { border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 50%; }

.map__photo { grid-column: 2; grid-row: 2; margin: 0; align-self: center; justify-self: end; width: min(100%, 34rem); translate: 6% -14%; opacity: 0.92; }
.map__photo img { border-radius: var(--sc-r-md); box-shadow: var(--sc-e2); aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 50%; }
.sheet { position: relative; z-index: 2; translate: -10% 18%; }

.plate--room { position: absolute; right: clamp(1rem, 6vw, 7rem); top: clamp(var(--bar-h), 14vh, 9rem); width: min(26vw, 22rem); margin: 0; z-index: 3; }
.plate--room img { border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }

.plates--about { height: min(64svh, 42rem); }
.plates--about .plate--about { position: absolute; left: 0; top: 0; width: 74%; height: 84%; }
.plate--about-b { position: absolute; right: -2%; bottom: 0; width: 40%; margin: 0; z-index: 2; }
.plate--about-b img { border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }

/* The neon sign is the close. It is shown whole (contain) on the sign's own
   black, above the text block, never cropped through a word. */
.close__ground { position: absolute; inset: 0 0 26% 0; z-index: 0; opacity: 1; background: #0A0809; }
.close__ground img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 40%; max-width: none; }
.stage--close { background: #0A0809; }
.close__scrim { background: linear-gradient(to top, #0A0809 0%, #0A0809 22%, color-mix(in oklab, #0A0809 70%, transparent) 34%, transparent 48%), radial-gradient(120% 90% at 50% 40%, transparent 55%, color-mix(in oklab, #0A0809 80%, transparent) 100%); }
.stage--close { grid-template-rows: 1fr auto auto; }
.stage--close .close__inner { align-content: end; padding-top: 0; padding-bottom: var(--sc-4); gap: var(--sc-4); }
.close__scrim { z-index: 1; }
.stage--close .close__inner, .stage--close .foot { position: relative; z-index: var(--sc-z-copy); }

@media (max-width: 860px) {
  .plates--enemy { grid-row: 3; width: 100%; height: 34svh; }
  .plates--enemy .plate--enemy { width: 84%; }
  .plate--enemy-b { right: 0; top: -8%; width: 38%; }
  .plates--moment { display: none; }
  .map__photo { display: none; }
  .sheet { translate: 0; }
  .plate--room { display: none; }
  .plates--about { height: 34svh; }
  .plates--about .plate--about { width: 62%; height: 100%; }
  .plate--about-b { width: 42%; bottom: 4%; }
  .proof { grid-template-columns: 1fr; }
  .proof__photo { display: none; }
  .close__ground { inset: 0 0 34% 0; }
  .close__ground img { object-position: 50% 35%; }
}


/* ------------------------------------------------------------------- work */
.grid--work {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--sc-8);
  row-gap: var(--sc-5);
  align-content: start;
}
.work__head { grid-column: 1; grid-row: 1; display: grid; gap: var(--sc-3); align-content: start; }
.grid--work .display--lg { font-size: clamp(2rem, 1.2rem + 3vw, 3.8rem); }
.work__head .lede { max-width: 40ch; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); }
.plate--work { grid-column: 2; grid-row: 2; margin: 0; width: min(100%, 18rem); justify-self: end; align-self: end; display: none; }
.plate--work img { border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 45%; }
@media (min-height: 860px) { .plate--work { display: block; } }
.moves { grid-column: 2; grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.move { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--sc-4); align-items: start; padding-top: var(--sc-3); border-top: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); }
.move__label { font-family: var(--sc-font-mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); padding-top: 0.35em; }
.move .body { max-width: 48ch; font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem); line-height: 1.5; }
.tuesday { grid-column: 1; grid-row: 2; align-self: start; padding-top: var(--sc-4); border-top: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); display: grid; gap: var(--sc-3); }
.tuesday__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.tuesday__list li { position: relative; padding-left: 1.4rem; color: var(--sc-ink); font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem); line-height: 1.45; max-width: 54ch; }
@media (max-height: 880px) and (min-width: 861px) { .tuesday__list li:nth-child(4) { display: none; } .tuesday .lede { font-size: 1.05rem; } .grid--work { row-gap: var(--sc-4); } }
.tuesday__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; background: var(--sc-accent); }
.tuesday .lede { max-width: 40ch; }
@media (max-width: 1100px) { .grid--work { column-gap: var(--sc-6); } .move { grid-template-columns: 6rem 1fr; } }
@media (max-width: 860px) {
  .grid--work { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: var(--sc-5); }
  .work__head { grid-row: 1; }
  .plate--work { display: none; }
  .moves { grid-column: 1; grid-row: 2; gap: var(--sc-3); }
  .move { grid-template-columns: 1fr; gap: var(--sc-1); }
  .move .body { font-size: 0.98rem; }
  .move:nth-child(n+3) .body { display: none; }
  .tuesday { grid-column: 1; grid-row: 3; }
  .plate--work { display: none !important; }
  .tuesday__list li:nth-child(n+3) { display: none; }
}

/* Phone: the What You Get card keeps all four moves (they are the substance);
   the cognition lede and the Tuesday list step aside to fit one screen. */
@media (max-width: 860px) {
  .work__head .lede { display: none; }
  .grid--work { row-gap: var(--sc-3); }
  .grid--work .display--lg { font-size: 2rem; }
  .moves { gap: var(--sc-2); }
  .move { grid-template-columns: 1fr; gap: 0.1rem; padding-top: var(--sc-2); }
  .move .body { display: block !important; font-size: 0.9rem; line-height: 1.4; }
  .tuesday { padding-top: var(--sc-3); gap: var(--sc-2); }
  .tuesday__list { display: none; }
  .tuesday .lede { font-size: 1rem; line-height: 1.4; }
}


/* The average line at the same size as the chapter heading, in the accent. */
.enemy__avg { color: #EE5C9C; max-width: 16ch; margin-block: var(--sc-4) var(--sc-5); }
.enemy__body { padding-top: 0; }
.enemy__body .body { max-width: 52ch; }
@media (max-width: 860px) { .enemy__avg { font-size: 1.9rem; max-width: none; margin-block: var(--sc-3) var(--sc-4); } }


/* ================================================================ AIR ====
   Spaciousness pass (MI 2026-09-03: "the text is so on top of the section…
   give the eyes room"). Content centres in the card, gutters widen, leading
   and paragraph gaps open, and nothing hugs the bar. */
:root { --sc-gutter: clamp(1.25rem, 7vw, 8.5rem); --sc-maxw: 78rem; }
.grid {
  padding: calc(var(--bar-h) + 6vh) var(--sc-gutter) 9vh;
  align-content: center;
  row-gap: var(--sc-7);
  column-gap: var(--sc-9);
}
.body { line-height: 1.72; }
.lede { line-height: 1.5; }
.body + .body, .body + .lede, .lede + .body, .lede + .lede { margin-top: var(--sc-6); }
.display { line-height: 1.02; }

/* The Enemy: ticker on the bottom edge, columns centred, plates lower-left. */
.marquee { top: auto; bottom: 0; border-bottom: 0; padding-block: 0.8rem; }
.grid--enemy { grid-template-rows: auto 1fr; padding-top: calc(var(--bar-h) + 6vh); padding-bottom: 12vh; align-content: center; }
.enemy__avg { margin-block: var(--sc-6) var(--sc-7); }
.plates--enemy { height: min(38vh, 22rem); }

/* The Moment */
.grid--moment { align-content: center; }
.moments { margin-top: var(--sc-7); gap: var(--sc-5); }
.stakes { margin-top: var(--sc-8); }

/* What you get */
.grid--work { row-gap: var(--sc-7); align-content: center; }
.moves { gap: var(--sc-5); }
.move { padding-top: var(--sc-4); }
.tuesday { padding-top: var(--sc-6); gap: var(--sc-4); }

/* The Map */
.grid--map { align-content: center; row-gap: var(--sc-8); }
.proof { padding-bottom: var(--sc-7); }
.map__copy { gap: var(--sc-6); }

/* The peak */
.her__states { top: calc(var(--bar-h) + 8vh); bottom: clamp(3rem, 12vh, 8rem); }
.her__state { gap: var(--sc-6); }

/* About, Room, Close */
.about__copy { gap: var(--sc-5); }
.room__copy { gap: var(--sc-6); bottom: clamp(4rem, 14vh, 10rem); }
.hero__copy { bottom: clamp(4rem, 15vh, 11rem); }

/* Short laptop screens: keep the air, trim the count. */
@media (max-height: 900px) and (min-width: 861px) {
  .grid { padding-top: calc(var(--bar-h) + 3vh); padding-bottom: 6vh; row-gap: var(--sc-6); }
  .enemy__body .body:nth-of-type(2) { display: none; }
  .stakes .body:not(.body--strong) { display: none; }
  .tuesday__list li:nth-child(n+3) { display: none; }
  .proof .body:first-child { display: none; }
  .proof { grid-template-columns: minmax(0, 1fr) 9rem; }
}
@media (max-width: 860px) {
  .grid { padding: calc(var(--bar-h) + 3vh) var(--sc-gutter) 6vh; row-gap: var(--sc-5); align-content: start; }
  .marquee { display: none; }
  .body + .body, .body + .lede, .lede + .body, .lede + .lede { margin-top: var(--sc-4); }
}

/* Air, second pass: keep the centring and the margins, spend less on the
   column gap and on repeats, and cap display sizes against viewport height so
   a 900px laptop never overflows a card. */
.grid { column-gap: var(--sc-8); }
.display--lg { font-size: min(clamp(2.2rem, 1.3rem + 3.6vw, 4.6rem), 7.2vh); }
.enemy__avg { max-width: 22ch; }
@media (max-height: 900px) and (min-width: 861px) {
  .enemy__body .body:nth-of-type(3) { display: none; }
  .enemy__avg { margin-block: var(--sc-4) var(--sc-5); }
  .grid--enemy { padding-bottom: 10vh; }
  .plates--enemy { height: min(32vh, 20rem); }
  .moments { gap: var(--sc-3); margin-top: var(--sc-5); }
  .stakes { margin-top: var(--sc-6); }
  .payfor .lede { display: none; }
  .moves { gap: var(--sc-3); }
  .move { padding-top: var(--sc-3); }
  .tuesday { padding-top: var(--sc-4); gap: var(--sc-3); }
  .grid--map { row-gap: var(--sc-6); }
  .sheet { width: min(100%, 21rem); }
  .proof { padding-bottom: var(--sc-5); }
}


/* Air, third pass. */
.enemy__head { display: grid; gap: var(--sc-5); align-content: start; }
.enemy__spot { max-width: 42ch; }
.grid--moment { grid-template-rows: 1fr; }
@media (max-height: 820px) and (min-width: 861px) {
  .sheet { width: min(100%, 17rem); }
  .grid--map { row-gap: var(--sc-5); }
  .enemy__spot { display: none; }
  .plates--enemy { height: min(30vh, 18rem); }
}

/* Short laptop screens: the Map card keeps its air by letting the document
   sheet size to its content instead of a fixed aspect. */
@media (max-height: 820px) and (min-width: 861px) {
  .grid--map { padding-top: calc(var(--bar-h) + 2vh); padding-bottom: 5vh; row-gap: var(--sc-5); }
  .sheet__paper { aspect-ratio: auto; padding: var(--sc-5); }
  .sheet__list { margin: var(--sc-4) 0; font-size: 1.2rem; }
  .map__copy { gap: var(--sc-4); }
  .proof { padding-bottom: var(--sc-4); }
}
@media (max-height: 820px) and (min-width: 861px) { .sheet { translate: -8% 4%; } .map__photo { translate: 6% -8%; } }


/* Research hero (2026-09-03): the H1 takes the pain; a second lede carries the diagnosis. */
.hero__third { margin-top: var(--sc-4); max-width: 34ch; color: var(--sc-ink); font-weight: 500; }
.hero__lede { max-width: 44ch; }
.enemy__pre { margin-top: var(--sc-5); margin-bottom: 0; }
.enemy__avg { margin-top: var(--sc-2); max-width: 24ch; font-size: min(clamp(1.9rem, 1.1rem + 3vw, 4rem), 6.4vh); }
.grid--work .label { margin-bottom: var(--sc-2); }
@media (max-height: 900px) and (min-width: 861px) { .enemy__spot { display: none; } .enemy__avg { font-size: min(clamp(1.8rem, 1rem + 2.6vw, 3.2rem), 5.6vh); } }
@media (max-width: 860px) { .hero__third { display: none; } .enemy__pre { display: none; } }

/* Glue hero (MI 2026-09-03): longer subline, so the block gets a wider measure and the H1 steps down one notch. */
.hero__lede { max-width: 50ch; }
.hero__third { max-width: 44ch; color: #F4F0EE; }
.display--hero { font-size: clamp(2.4rem, 1.3rem + 4.6vw, 5.6rem); max-width: 16ch; }
@media (max-width: 860px) { .display--hero { font-size: clamp(2.1rem, 1rem + 7.4vw, 3.2rem); } .hero__lede { font-size: 1rem; } }

/* MI hero (2026-09-03 13:40): short pain lede, long positive turn. */
.hero__lede { max-width: 46ch; }
.hero__third { max-width: 56ch; font-weight: 400; color: var(--sc-ink); }


/* ============================================================ HERO v3 ====
   The door. Neon sign as the back plane, MI cut out in front, copy left.
   Two planes at different rates: the depth is the differential. */
.stage--hero { background: #0A0809; }
.hero__neon {
  position: absolute; z-index: 0; top: 4%; right: -6%; width: min(66vw, 74rem); aspect-ratio: 4 / 3;
  opacity: 0.92;
}
.hero__neon img {
  width: 100%; height: 100%; object-fit: cover; max-width: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 45%, transparent 100%);
}
.hero__figure {
  position: absolute; z-index: 2; bottom: 0; right: clamp(4vw, 14vw, 20rem);
  height: 104%; width: auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 40px rgba(224,32,122,0.18));
}
.hero__figure img { height: 100%; width: auto; max-width: none; object-fit: contain; object-position: bottom; }
.hero__scrim { z-index: 3; --sc-scrim-a: 92%; }
.hero__copy { z-index: 20; max-width: min(44rem, 46vw); bottom: clamp(4rem, 14vh, 10rem); }
.display--hero { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5.4rem); max-width: 15ch; }
.hero__lede { max-width: 40ch; color: var(--sc-ink); }
@media (max-width: 1100px) { .hero__figure { right: 2vw; height: 96%; } .hero__neon { width: 78vw; right: -14%; } .hero__copy { max-width: 56vw; } }
@media (max-width: 860px) {
  .hero__neon { top: 2%; right: -30%; width: 150vw; opacity: 0.8; }
  .hero__figure { right: -18vw; height: 78%; opacity: 0.55; filter: none; }
  .hero__copy { max-width: none; bottom: clamp(2.5rem, 8vh, 5rem); }
  .display--hero { font-size: clamp(2.1rem, 1rem + 7vw, 3.1rem); max-width: 14ch; }
}


/* ======================================================= OPENING SCENE ====
   On landing the sign travels from the left edge across the frame to its
   place behind her; she rises into view; then the headline arrives. The
   outer .hero__neon carries the travel so the engine's parallax on the inner
   element keeps working afterwards. */
.hero__neon { will-change: transform, opacity; animation: neon-travel 2.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero__neon-inner { width: 100%; height: 100%; }
.hero__neon-inner img { animation: neon-flicker 2.8s steps(1, end) both; }
.hero__figure { animation: figure-rise 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both; }
.card--hero .hero__copy { animation: copy-arrive 1.1s cubic-bezier(0.22, 1, 0.36, 1) 1.9s both; }
@keyframes neon-travel {
  0%   { transform: translate3d(-92vw, 6vh, 0) scale(0.92); opacity: 0.25; }
  55%  { opacity: 0.95; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.92; }
}
@keyframes neon-flicker {
  0%, 8% { filter: brightness(0.35); } 9%, 14% { filter: brightness(1.1); } 15%, 21% { filter: brightness(0.5); }
  22%, 100% { filter: brightness(1); }
}
@keyframes figure-rise {
  from { transform: translate3d(0, 6vh, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes copy-arrive {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__neon, .hero__neon-inner img, .hero__figure, .card--hero .hero__copy { animation: none !important; }
}

/* Final hero copy (MI 2026-09-03 14:50) */
.hero__third { max-width: 40ch; color: var(--sc-ink); font-weight: 500; margin-top: var(--sc-4); }
@media (max-width: 860px) { .hero__third { display: block; } }

/* Slower opening (MI: "moves in too fast"). The sign takes ~5.5s to cross,
   eases out over a long tail; she and the copy wait for it. */
.hero__neon { animation-duration: 5.6s; animation-timing-function: cubic-bezier(0.16, 0.84, 0.24, 1); }
.hero__neon-inner img { animation-duration: 5.6s; }
.hero__figure { animation-duration: 2.2s; animation-delay: 2.4s; }
.card--hero .hero__copy { animation-duration: 1.4s; animation-delay: 4.2s; }
@keyframes neon-travel {
  0%   { transform: translate3d(-92vw, 6vh, 0) scale(0.92); opacity: 0.2; }
  35%  { opacity: 0.9; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.92; }
}
@keyframes neon-flicker {
  0%, 5% { filter: brightness(0.3); } 6%, 9% { filter: brightness(1.1); } 10%, 14% { filter: brightness(0.45); }
  15%, 100% { filter: brightness(1); }
}

/* ================================================================ AIR 2 ====
   MI 2026-09-03: "top padding more, the entire site more spacious, too crowded".
   Every card: more headroom under the bar, centred block, wider gaps. Short
   screens keep the earlier density rules; the padding scales with height. */
.grid {
  padding-top: calc(var(--bar-h) + clamp(4vh, 9vh, 12vh));
  padding-bottom: clamp(6vh, 10vh, 12vh);
  row-gap: clamp(2rem, 6vh, 4.5rem);
  column-gap: clamp(3rem, 8vw, 9rem);
  align-content: center;
}
.enemy__head { gap: var(--sc-6); }
.enemy__body > * + * { margin-top: var(--sc-6); }
.enemy__pre { margin-top: var(--sc-7); }
.moments { margin-top: var(--sc-7); gap: var(--sc-5); }
.stakes { margin-top: var(--sc-8); }
.moves { gap: var(--sc-5); }
.move { padding-top: var(--sc-4); }
.tuesday { padding-top: var(--sc-6); gap: var(--sc-4); }
.grid--map { row-gap: clamp(2.5rem, 7vh, 5rem); }
.about__copy { gap: var(--sc-5); }
.body { max-width: 50ch; }
.hero__copy { bottom: clamp(5rem, 16vh, 12rem); }
.room__copy { bottom: clamp(5rem, 16vh, 12rem); }
.her__states { top: calc(var(--bar-h) + 10vh); bottom: clamp(4rem, 14vh, 10rem); }

@media (max-height: 900px) and (min-width: 861px) {
  .grid { padding-top: calc(var(--bar-h) + 4vh); padding-bottom: 6vh; row-gap: var(--sc-6); }
  .enemy__body > * + * { margin-top: var(--sc-5); }
  .enemy__pre { margin-top: var(--sc-5); }
  .moves { gap: var(--sc-3); } .move { padding-top: var(--sc-3); }
  .tuesday { padding-top: var(--sc-4); gap: var(--sc-3); }
  .grid--map { row-gap: var(--sc-6); }
}
@media (max-width: 860px) {
  .grid { padding: calc(var(--bar-h) + 6vh) var(--sc-gutter) 8vh; row-gap: var(--sc-6); align-content: center; }
  .enemy__head { gap: var(--sc-5); }
  .enemy__body > * + * { margin-top: var(--sc-5); }
  .enemy__pre { margin-top: var(--sc-5); }
  .moments { margin-top: var(--sc-5); gap: var(--sc-4); }
  .stakes { margin-top: var(--sc-6); }
}
@media (max-height: 820px) and (min-width: 861px) {
  .grid { padding-top: calc(var(--bar-h) + 3vh); padding-bottom: 4vh; row-gap: var(--sc-5); }
  .moments { margin-top: var(--sc-5); gap: var(--sc-4); }
  .stakes { margin-top: var(--sc-6); }
  .moves { gap: var(--sc-2); } .move { padding-top: var(--sc-2); }
}
@media (max-width: 860px) {
  /* Phone: tall cards scroll within the pin, so anchor to the top with air, never centre. */
  .grid { align-content: start; padding-top: calc(var(--bar-h) + 5vh); }
}
/* Close: nothing on the last card is cued. The engine parks cues at the end of
   the page (opacity 0, pointer-events none), which made the CTA and footer
   vanish and unclickable at the bottom. Static and always live instead. */
.stage--close .lede, .stage--close .btn--big, .stage--close .foot { opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
.stage--close .foot { padding-bottom: max(var(--sc-5), env(safe-area-inset-bottom)); }

/* ================================================================ AIR 3 ====
   MI 2026-09-03: heading was running under the bar on a ~1000×660 window.
   Rule 1: a card never centres itself up under the bar. `safe center` falls
   back to start when the content is taller than the screen. */
.grid { align-content: safe center; }
.grid--enemy { align-content: safe center; }
/* Rule 2: bigger headroom everywhere. The bar has no menu yet; the space is the design. */
@media (min-height: 901px) and (min-width: 1181px) { .grid { padding-top: calc(var(--bar-h) + clamp(3rem, 11vh, 8rem)); padding-bottom: clamp(3rem, 11vh, 8rem); } }
/* Rule 3: narrow laptops and split screens (861–1180px) get smaller display
   type and a lighter card. Two columns at this width cannot carry full copy. */
@media (min-width: 861px) and (max-width: 1180px) {
  .display--lg { font-size: clamp(1.9rem, 0.9rem + 2.6vw, 3.4rem); }
  .grid--work .display--lg { font-size: clamp(1.8rem, 0.9rem + 2.2vw, 3rem); }
  .enemy__avg { font-size: min(clamp(1.7rem, 0.8rem + 2.2vw, 2.8rem), 5.4vh); }
  .enemy__spot, .enemy__pre { display: none; }
  .stakes .body:not(.body--strong) { display: none; }
  .tuesday__list li:nth-child(n+3) { display: none; }
  .proof .body:first-child { display: none; }
  .payfor .lede { display: none; }
  .plates--enemy { height: min(34vh, 20rem); }
  .plates--moment { height: min(40vh, 26rem); }
  .grid { column-gap: clamp(2.5rem, 5vw, 5rem); }
}
/* Rule 4: short windows (under 760px tall) lose the second beat of the problem card. */
@media (max-height: 760px) and (min-width: 861px) {
  .grid { padding-top: calc(var(--bar-h) + 2.5rem); padding-bottom: 2.5rem; row-gap: var(--sc-4); }
  .enemy__pre { display: none; }
  .enemy__avg { font-size: min(clamp(1.6rem, 0.8rem + 2vw, 2.6rem), 5vh); }
  .enemy__body > * + * { margin-top: var(--sc-4); }
  .lede--turn { display: none; }
}
@media (max-width: 860px) {
  .grid { align-content: start; padding-top: calc(var(--bar-h) + 5vh); }
}
/* Narrow tier, short: trim harder so the whole card sits between bar and bottom. */
@media (min-width: 861px) and (max-width: 1180px) {
  .grid { padding-top: calc(var(--bar-h) + 3vh); padding-bottom: 4vh; row-gap: var(--sc-5); }
  .moments { margin-top: var(--sc-4); gap: var(--sc-3); }
  .moments li { font-size: 0.95rem; }
  .stakes { margin-top: var(--sc-5); }
  .plates--moment { height: min(34vh, 22rem); }
  .moves { gap: var(--sc-2); } .move { padding-top: var(--sc-2); font-size: 0.95rem; }
  .tuesday { padding-top: var(--sc-4); }
  .plates--about { height: min(46vh, 30rem); }
  .about__copy .body:nth-of-type(2) { display: none; }
  .body { font-size: 0.98rem; }
}
@media (min-width: 861px) and (max-width: 1180px) and (max-height: 700px) {
  .tuesday { display: none; }
  .plates--about { height: min(40vh, 24rem); }
  .plates--moment { height: min(30vh, 18rem); }
}
/* Ladders after AIR 3, measured. */
/* Engine card was living in the padding; give it its own density at <=900 tall. */
@media (max-height: 900px) and (min-width: 861px) {
  .moves { gap: var(--sc-3); } .move { padding-top: var(--sc-3); }
  .tuesday { padding-top: var(--sc-4); gap: var(--sc-3); }
  .grid--work { row-gap: var(--sc-5); }
}
/* Any width, short window (<=760): the same trims the narrow tier gets. */
@media (max-height: 760px) and (min-width: 861px) {
  .tuesday { display: none; }
  .stakes .body:not(.body--strong) { display: none; }
  .about__copy .body:nth-of-type(2) { display: none; }
  .plates--moment { height: min(34vh, 22rem); }
  .plates--about { height: min(44vh, 28rem); }
  .moments { margin-top: var(--sc-4); gap: var(--sc-3); }
  .moves { gap: var(--sc-2); } .move { padding-top: var(--sc-2); }
}
/* Tall, wide screens: headroom scales but the card must still close above the fold. */
@media (min-height: 901px) and (min-width: 1181px) {
  .grid { padding-top: calc(var(--bar-h) + 8vh); padding-bottom: 6vh; row-gap: clamp(2rem, 5vh, 3.5rem); }
  .plates--enemy { height: min(36vh, 22rem); }
  .plates--moment { height: min(46vh, 30rem); }
  .enemy__body > * + * { margin-top: var(--sc-5); }
  .enemy__pre { margin-top: var(--sc-6); }
  .enemy__avg { font-size: min(clamp(2rem, 1rem + 2.6vw, 4rem), 5.6vh); }
  .moves { gap: var(--sc-4); } .move { padding-top: var(--sc-3); }
  .grid--map { row-gap: clamp(2rem, 5vh, 3.5rem); }
}
@media (min-height: 901px) and (max-height: 1100px) and (min-width: 1181px) {
  .enemy__spot { display: none; }
}

/* ================================================================ CALM ====
   MI 2026-09-03: "look at tonicshop, how beautifully spaced out things can
   look". One statement, one paragraph, one image per screen. The problem card
   split in two: #enemy (statement + Tuesday scene + photos) and #never (the gap).
   Wider margins, smaller display, shorter measures. */
#never { z-index: 3; } #moment { z-index: 4; } #work { z-index: 5; } #map { z-index: 6; }
#room { z-index: 7; } #her { z-index: 8; } #about { z-index: 9; } #close { z-index: 10; }
.stage--never { background: var(--sc-canvas); }
:root { --sc-gutter: clamp(1.25rem, 9vw, 11rem); }
.display--calm { font-size: clamp(2rem, 1.1rem + 2.7vw, 3.9rem); line-height: 1.04; max-width: 13ch; }
.grid--calm { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(3rem, 9vw, 10rem); align-content: safe center; row-gap: clamp(2.5rem, 7vh, 5rem); }
.grid--calm .body { max-width: 42ch; font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem); line-height: 1.65; }
.grid--calm .lede { max-width: 30ch; }
/* #enemy: statement top-left, scene top-right, photos bottom-right. */
.grid--enemy { grid-template-rows: auto auto; }
.enemy__head { grid-column: 1; grid-row: 1; align-self: start; }
.enemy__scene { grid-column: 2; grid-row: 1; align-self: start; padding-top: 0.5rem; }
.plates--enemy { grid-column: 2; grid-row: 2; align-self: end; justify-self: start; width: min(100%, 30rem); height: min(34vh, 20rem); }
/* #never: kicker + magenta statement left, two short paragraphs right, vertically centred. */
.grid--never { grid-template-rows: auto; align-items: center; }
.never__head { grid-column: 1; display: grid; gap: var(--sc-5); }
.never__pre { max-width: 34ch; }
.never__avg { color: var(--magenta, #E0207A); max-width: 15ch; }
.never__body { grid-column: 2; display: grid; gap: var(--sc-6); align-self: center; }
@media (max-height: 760px) and (min-width: 861px) { .plates--enemy { height: min(30vh, 16rem); } .never__body { gap: var(--sc-4); } }
@media (max-width: 860px) {
  .grid--enemy, .grid--never { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .enemy__head, .enemy__scene, .plates--enemy, .never__head, .never__body { grid-column: 1; }
  .enemy__head { grid-row: 1; } .enemy__scene { grid-row: 2; padding-top: 0; } .plates--enemy { grid-row: 3; width: 100%; height: 30svh; }
  .never__head { grid-row: 1; } .never__body { grid-row: 2; }
  .display--calm { max-width: none; }
}
/* CALM, continued: moment thinned; engine split into #work (statement) and #moves (the four). */
#moves { z-index: 6; } #map { z-index: 7; } #room { z-index: 8; } #her { z-index: 9; } #about { z-index: 10; } #close { z-index: 11; }
.stage--moves { background: var(--sc-canvas); }
.grid--moment .stakes { margin-top: clamp(2rem, 6vh, 4rem); display: grid; gap: var(--sc-4); }
.grid--moment .moments { margin-top: clamp(1.5rem, 5vh, 3rem); gap: var(--sc-4); }
.grid--work { grid-template-rows: auto; align-items: center; row-gap: 0; }
.work__head { grid-column: 1; grid-row: 1; display: grid; gap: var(--sc-4); align-content: center; }
.work__side { grid-column: 2; grid-row: 1; display: grid; gap: clamp(2rem, 6vh, 4rem); align-content: center; justify-items: start; }
.work__lede { max-width: 38ch; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); }
.plate--work { display: block !important; width: min(100%, 20rem); height: auto; margin: 0; justify-self: start; align-self: auto; grid-column: auto; grid-row: auto; }
.plate--work img { aspect-ratio: 16 / 10; }
@media (max-height: 760px) and (min-width: 861px) { .plate--work { width: min(100%, 14rem); } .work__side { gap: var(--sc-5); } }
.grid--moves { grid-template-rows: auto; align-items: center; }
.moves__head { grid-column: 1; grid-row: 1; display: grid; gap: var(--sc-5); align-content: center; }
.moves__head .lede--turn { max-width: 26ch; }
.grid--moves .moves { grid-column: 2; grid-row: 1; gap: clamp(1rem, 3.2vh, 2rem); }
.grid--moves .move { padding-top: clamp(0.6rem, 1.6vh, 1rem); }
.grid--moves .move .body { max-width: 40ch; font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1.08rem); line-height: 1.55; }
@media (max-height: 760px) and (min-width: 861px) { .grid--moves .move .body { font-size: 0.92rem; } .grid--moves .moves { gap: var(--sc-3); } }
@media (max-width: 860px) {
  .grid--work, .grid--moves { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .work__head, .work__side, .moves__head, .grid--moves .moves { grid-column: 1; }
  .work__head, .moves__head { grid-row: 1; } .work__side, .grid--moves .moves { grid-row: 2; }
  .plate--work { display: none !important; }
}
/* CALM, continued: stakes on its own light screen; moment = heading + three beats + photos. */
#stakes { z-index: 5; } #work { z-index: 6; } #moves { z-index: 7; } #map { z-index: 8; } #room { z-index: 9; } #her { z-index: 10; } #about { z-index: 11; } #close { z-index: 12; }
.stage--stakes { background: var(--sc-canvas); }
.grid--stakes { grid-template-columns: 1fr; align-content: center; justify-items: start; }
.stakes__copy { display: grid; gap: clamp(1.5rem, 5vh, 3rem); max-width: 60rem; }
.stakes__copy .display { max-width: 20ch; }
.stakes__copy .lede { max-width: 38ch; }
.grid--moment .moments li { font-size: clamp(0.98rem, 0.9rem + 0.25vw, 1.1rem); line-height: 1.6; max-width: 40ch; }
.grid--moment .moments { gap: clamp(1.25rem, 4vh, 2.5rem); }
.grid--moment { align-items: center; }
.moment__copy { align-self: center; }
.plates--moment { align-self: center; }
@media (min-height: 901px) { .sheet { translate: -10% 6%; } }
@media (max-width: 860px) { .grid--stakes { align-content: start; } }
@media (max-width: 860px) {
  .grid--moment .moments li { font-size: 0.95rem; line-height: 1.5; max-width: none; }
  .grid--moment .moments { gap: var(--sc-3); margin-top: var(--sc-4); }
  .moves__head .lede--turn { display: none; }
  .grid--moves .moves { gap: var(--sc-2); }
  .grid--moves .move .body { font-size: 0.9rem; line-height: 1.45; }
  .grid--moves .move { grid-template-columns: 1fr; gap: 0.25rem; }
  .sheet { width: min(100%, 16rem); } .sheet__list { font-size: 1rem; margin: var(--sc-3) 0; }
  .plates--about { height: min(46svh, 30rem); } .plate--about { max-height: 26svh; } .plate--about img { height: 26svh; }
  .about__copy .body { font-size: 0.95rem; }
}
@media (max-width: 860px) {
  .grid--moment .moments li { padding-left: 1.1rem; }
  .grid--moment .moments li:nth-child(3) { display: none; }
  .grid--moment .moments li { font-size: 0.92rem; }
  .plates--about { height: min(30svh, 18rem); } .plates--about .plate--about { height: 100%; } .plate--about { max-height: 30svh; } .plate--about img { height: 30svh; }
  .about__copy .body:nth-of-type(3) { display: none; }
  .proof { display: none; }
  .map__copy .body { font-size: 0.95rem; }
}

/* =============================================================== TONIC ====
   MI 2026-09-03: full-width centred titles, big flanking photography, one idea
   per screen, no mid-thought line breaks. Reference: Tonic sales pages. */
.stage--tonic { overflow: hidden; }
.stage--tonic .grid { position: relative; z-index: 2; }
.grid--tonic {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center; text-align: center;
  align-content: center;
  row-gap: clamp(1.25rem, 3.6vh, 2.25rem);
  padding: calc(var(--bar-h) + clamp(2rem, 7vh, 6rem)) clamp(1.25rem, 14vw, 18rem) clamp(2rem, 8vh, 6rem);
  max-width: none;
}
.grid--tonic-wide { padding-inline: clamp(1.25rem, 9vw, 12rem); }
.tonic__eyebrow { margin: 0; color: var(--sc-accent); }
.display--tonic {
  font-size: min(clamp(2.3rem, 1.2rem + 3.6vw, 5rem), 8.6vh);
  line-height: 1.02; letter-spacing: -0.024em;
  max-width: 24ch; text-wrap: balance; margin: 0;
}
.display--magenta { color: var(--sc-accent); }
.display--tonic .mag { color: var(--sc-accent); font-style: normal; white-space: nowrap; }
.tonic__lede { max-width: 46ch; text-wrap: pretty; margin: 0; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem); }
.tonic__lede--wide { max-width: 58ch; font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem); margin-top: clamp(0.5rem, 2vh, 1.5rem); }
.tonic__body { max-width: 52ch; text-wrap: pretty; margin: 0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); }
.tonic__foot { margin: 0; max-width: 46ch; text-wrap: pretty; }
.grid--tonic .btn--big { margin-top: clamp(0.25rem, 1.5vh, 1rem); }
.grid--tonic .lede + .lede, .grid--tonic .body + .lede, .grid--tonic .lede + .body, .grid--tonic .body + .body { margin-top: 0; }

/* The Tuesday scene: a stack of lines, not a paragraph. */
.scene { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.35rem, 1.2vh, 0.7rem); max-width: 44ch; }
.scene li { font-family: var(--sc-font-text); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); line-height: 1.5; color: color-mix(in oklab, var(--sc-ink) 78%, transparent); text-wrap: pretty; }
.scene li:last-child { color: var(--sc-ink); }

/* Three beats across the width. */
.beats { list-style: none; margin: clamp(0.5rem, 2vh, 1.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); width: min(100%, 68rem); text-align: left; }
.beat { display: grid; gap: 0.75rem; align-content: start; }
.beat__n { font-family: var(--sc-font-mono, "Courier Prime", monospace); font-size: 0.8rem; letter-spacing: 0.18em; color: var(--sc-accent); }
.beat p { margin: 0; font-family: var(--sc-font-text); font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.15rem); line-height: 1.6; color: color-mix(in oklab, var(--sc-ink) 85%, transparent); text-wrap: pretty; }

/* Flanking photography: big, behind the copy at the edges, moving at their own rate. */
.flank { position: absolute; z-index: 1; margin: 0; pointer-events: none; }
.flank img { display: block; width: 100%; height: auto; border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); object-fit: cover; }
.flank--l { left: clamp(0.75rem, 3vw, 4rem); }
.flank--r { right: clamp(0.75rem, 3vw, 4rem); }
.flank--lg { width: clamp(14rem, 27vw, 30rem); bottom: clamp(1rem, 8vh, 6rem); }
.flank--lg img { aspect-ratio: 4 / 3; }
.flank--md { width: clamp(11rem, 20vw, 22rem); }
.flank--md img { aspect-ratio: 4 / 3; }
.flank--sm { width: clamp(8rem, 13vw, 14rem); }
.flank--sm img { aspect-ratio: 3 / 4; }
.flank--tall { width: clamp(9rem, 15vw, 16rem); top: calc(var(--bar-h) + clamp(1rem, 6vh, 4rem)); }
.flank--tall img { aspect-ratio: 2 / 3; object-position: 50% 20%; }
.flank--high { top: calc(var(--bar-h) + clamp(1rem, 5vh, 3rem)); bottom: auto; }
.flank--low { bottom: clamp(1rem, 7vh, 5rem); top: auto; }
.flank--sheet { width: clamp(13rem, 20vw, 20rem); bottom: clamp(1rem, 8vh, 6rem); perspective: 1200px; }
.flank--sheet .sheet__paper { aspect-ratio: auto; padding: clamp(1rem, 1.6vw, 1.6rem); }
.flank--sheet .sheet__list { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem); margin: var(--sc-3) 0; }
/* On dark grounds the flank photos sit a touch back so the words lead. */
.card--ink .flank img, .card--ox .flank img { opacity: 0.92; }

/* The stepper: four labels across, the active one's text beneath. Driven from --sc-p in page.js, click also works. */
.steps { list-style: none; margin: clamp(0.5rem, 2vh, 1.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 64rem); border-top: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent); }
.step button { appearance: none; background: none; border: 0; border-top: 2px solid transparent; margin-top: -1px; width: 100%; padding: clamp(0.9rem, 2.4vh, 1.5rem) 0.5rem 0; display: grid; gap: 0.35rem; justify-items: center; color: color-mix(in oklab, var(--sc-ink) 45%, transparent); cursor: pointer; font: inherit; transition: color 0.4s, border-color 0.4s; }
.step__n { font-family: var(--sc-font-mono, "Courier Prime", monospace); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; }
.step__name { font-family: var(--sc-font-display); font-size: clamp(1.3rem, 1rem + 1.2vw, 2.2rem); line-height: 1; letter-spacing: -0.01em; }
.step.is-active button { color: var(--sc-ink); border-top-color: var(--sc-accent); }
.steps__panel { position: relative; width: min(100%, 52ch); min-height: 7.5em; display: grid; }
.steps__text { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(0.4em); transition: opacity 0.45s ease, transform 0.45s ease; text-wrap: pretty; font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem); }
.steps__text.is-active { opacity: 1; transform: none; }
.steps__rail { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0); }

.display--about { max-width: none; text-wrap: balance; }

@media (max-height: 760px) and (min-width: 861px) {
  .grid--tonic { row-gap: clamp(0.9rem, 2.4vh, 1.5rem); }
  .scene li:nth-child(2), .scene li:nth-child(5) { display: none; }
  .beat p { font-size: 0.95rem; }
  .steps__panel { min-height: 6em; }
  .flank--lg { width: clamp(12rem, 22vw, 24rem); }
}
@media (max-width: 1180px) and (min-width: 861px) {
  .grid--tonic { padding-inline: clamp(1.25rem, 11vw, 12rem); }
  .flank--lg { width: clamp(10rem, 22vw, 20rem); }
  .flank--tall { width: clamp(7rem, 12vw, 11rem); }
  .flank--md { width: clamp(8rem, 16vw, 14rem); }
  .flank--sheet { width: clamp(11rem, 17vw, 14rem); }
}
@media (max-width: 860px) {
  .grid--tonic { align-content: start; padding: calc(var(--bar-h) + 4vh) var(--sc-gutter) 6vh; row-gap: var(--sc-4); text-align: left; justify-items: start; }
  .display--tonic { max-width: none; font-size: clamp(1.9rem, 1rem + 6vw, 2.8rem); }
  .flank { display: none; }
  #enemy .flank--l { display: block; position: static; width: 100%; max-width: 22rem; order: 9; margin-top: var(--sc-4); }
  .stage--tonic { display: flex; flex-direction: column; }
  .beats { grid-template-columns: 1fr; gap: var(--sc-4); }
  .beat p { font-size: 0.95rem; }
  .scene li { font-size: 0.95rem; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps__panel { min-height: 0; }
  .steps__text { font-size: 1rem; }
  .tonic__lede { font-size: 1.05rem; }
}
/* Flanks stay clear of the copy column. */
.flank--lg { width: clamp(12rem, 22vw, 25rem); }
.flank--tall { width: clamp(8rem, 13vw, 14rem); }
.beats { width: min(100%, 56rem); }
.tonic__lede--wide { max-width: 50ch; }
.grid--tonic .scene { max-width: 40ch; }
@media (max-width: 860px) { #enemy .flank--l { display: none; } }
.steps__text { transition: opacity 0.22s ease, transform 0.22s ease; }
.steps__text.is-active { transition: opacity 0.5s ease 0.18s, transform 0.5s ease 0.18s; }
#enemy .flank--l { width: clamp(11rem, 20vw, 22rem); bottom: clamp(0.5rem, 4vh, 3rem); }
.display--tonic br { display: block; }
.grid--tonic .scene { max-width: 48ch; }
.scene li { white-space: nowrap; }
@media (max-width: 860px) { .scene li { white-space: normal; } }
/* The block sits high enough that the next card never covers the last line first. */
.grid--tonic { padding-bottom: clamp(5rem, 18vh, 12rem); padding-top: calc(var(--bar-h) + clamp(1.5rem, 5vh, 4rem)); }
@media (max-width: 860px) { .grid--tonic { padding-bottom: 8vh; } }
/* PRESENCE: flanks bigger, bleeding off the edges, staggered top/bottom so they never meet the copy column. */
.flank--l { left: clamp(-3rem, -2vw, 0rem); }
.flank--r { right: clamp(-3rem, -2vw, 0rem); }
.flank--lg { width: clamp(15rem, 30vw, 34rem); }
.flank--md { width: clamp(12rem, 24vw, 26rem); }
.flank--sm { width: clamp(9rem, 15vw, 16rem); }
.flank--tall { width: clamp(10rem, 18vw, 19rem); }
.flank--tall img { aspect-ratio: 3 / 4; }
.flank--sheet { width: clamp(13rem, 21vw, 21rem); }
.flank img { border-radius: var(--sc-r-md); }
.card--ink .flank img, .card--ox .flank img { opacity: 0.96; }
/* On a light ground the paper flat-lay reads as paper; keep a soft edge. */
#stakes .flank--r img { aspect-ratio: 3 / 4; }
#never .flank--r img { aspect-ratio: 3 / 2; }
#moves .flank--l { bottom: clamp(0.5rem, 5vh, 3rem); }
#moves .grid--tonic-wide { padding-inline: clamp(1.25rem, 15vw, 20rem); }
@media (max-width: 1180px) and (min-width: 861px) {
  .flank--lg { width: clamp(11rem, 24vw, 20rem); } .flank--md { width: clamp(9rem, 18vw, 14rem); } .flank--tall { width: clamp(8rem, 14vw, 12rem); } .flank--sm { width: clamp(7rem, 11vw, 10rem); }
}
.display--tonic { max-width: 20ch; }
.flank--l { left: clamp(-4rem, -3.5vw, 0rem); }
.flank--r { right: clamp(-4rem, -3.5vw, 0rem); }
.flank--high { top: calc(var(--bar-h) + clamp(0.5rem, 2.5vh, 2rem)); }
.flank--low { bottom: clamp(0.5rem, 3vh, 2.5rem); }
.flank--lg { bottom: clamp(0.5rem, 3vh, 2.5rem); }
#work .flank--l { width: clamp(9rem, 15vw, 16rem); }
#moment .flank--r { width: clamp(11rem, 21vw, 22rem); }
.tonic__lede--wide { max-width: 46ch; }
.tonic__body { max-width: 48ch; }
.beats { width: min(100%, 52rem); }
.tonic__lede { max-width: 42ch; }

/* ============================================================= VARIETY ====
   MI 2026-09-03: "white and white, then a bunch of burgundy". Two new grounds.
   Sequence now: black · ink · magenta · ivory · rose · oxblood · ivory · ink · photo · ink · rose · black. */
:root { --rose-ground: #E9D9D6; --rose-ink: #2A0B16; --magenta-ground: #C9126A; }
.card--rose { --sc-canvas: var(--rose-ground); --sc-ink: var(--rose-ink); --sc-accent: #A80F4C; }
.card--magenta { --sc-canvas: var(--magenta-ground); --sc-ink: #FBF3F5; --sc-accent: #FBF3F5; --sc-shadow-color: 335 80% 12%; }
.card--magenta .stage { background: var(--magenta-ground); color: var(--sc-ink); }
.card--magenta .display { color: #FBF3F5; }
.card--magenta .tonic__body { color: color-mix(in oklab, #FBF3F5 88%, transparent); }
.card--magenta .lede--turn { color: #1A0710; }
.card--magenta .flank img { opacity: 1; box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.55); }
.card--rose .flank img { box-shadow: 0 30px 80px -30px rgb(42 11 22 / 0.35); }
.card--light .steps { border-top-color: color-mix(in oklab, var(--sc-ink) 20%, transparent); }
.card--light .step button { color: color-mix(in oklab, var(--sc-ink) 45%, transparent); }
.card--light .step.is-active button { color: var(--sc-ink); border-top-color: var(--sc-accent); }
/* REORDER 2026-09-03: engine right after hero; moment + stakes screens removed. Stacking order follows DOM. */
#work { z-index: 2; } #enemy { z-index: 3; } #never { z-index: 4; } #moves { z-index: 5; } #map { z-index: 6; } #room { z-index: 7; } #her { z-index: 8; } #about { z-index: 9; } #close { z-index: 10; }
.scene li { white-space: normal; max-width: 52ch; margin-inline: auto; }
.grid--tonic .scene { max-width: 54ch; }
/* Deeper move texts need a taller panel. */
.steps__panel { min-height: 9.5em; width: min(100%, 58ch); }
.steps__text { font-size: clamp(1rem, 0.92rem + 0.4vw, 1.22rem); line-height: 1.55; }
@media (max-height: 760px) and (min-width: 861px) { .steps__panel { min-height: 8em; } .steps__text { font-size: 0.98rem; } }
/* THE WORK: three ways in, click tabs. */
#offers { z-index: 6; } #her { z-index: 7; } #about { z-index: 8; } #close { z-index: 9; }
.steps--offers { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 60rem); }
.steps--offers .step__name { font-size: clamp(1.15rem, 0.9rem + 1vw, 1.9rem); }
.steps--offers .step button { border-top-width: 2px; }
.steps__panel--offers { min-height: 11em; width: min(100%, 56ch); }
.offer { grid-area: 1 / 1; display: grid; gap: clamp(1rem, 3vh, 1.75rem); justify-items: center; opacity: 0; transform: translateY(0.4em); transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: none; }
.offer.is-active { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.5s ease 0.18s, transform 0.5s ease 0.18s; }
.offer .lede { margin: 0; max-width: 52ch; text-wrap: pretty; font-size: clamp(1.02rem, 0.92rem + 0.42vw, 1.28rem); }
.step button { pointer-events: auto; }
.stage--tonic .grid { pointer-events: auto; }
@media (max-height: 760px) and (min-width: 861px) { .steps__panel--offers { min-height: 9.5em; } .offer .lede { font-size: 0.98rem; } }
@media (max-width: 860px) { .steps--offers { grid-template-columns: 1fr; } .steps--offers .step button { justify-items: start; text-align: left; border-top: 0; border-left: 2px solid transparent; padding: 0.5rem 0 0.5rem 0.8rem; } .steps--offers .step.is-active button { border-left-color: var(--sc-accent); } .steps__panel--offers { min-height: 0; } }
/* THE WORK v2: two full screens as they were, folder tabs on top. */
.stage--work { background: var(--ink-ground); }
.stage--work .panel { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; overflow: hidden; }
.stage--work .panel.is-active { opacity: 1; pointer-events: auto; }
.stage--work .panel .grid, .stage--work .panel .flank, .stage--work .panel .room__copy, .stage--work .panel .plate--room, .stage--work .panel .room__photo, .stage--work .panel .room__scrim { position: absolute; }
.stage--work .panel--map .grid { position: relative; z-index: 2; height: 100%; }
.stage--work .panel .grid > *, .stage--work .panel .room__copy > * { opacity: 1 !important; transform: none !important; }
.panel--room { background: var(--ink-ground); }
.folder { position: absolute; left: 50%; top: calc(var(--bar-h) + clamp(0.5rem, 2vh, 1.25rem)); transform: translateX(-50%); z-index: 5; display: flex; gap: 0.5rem; padding: 0 var(--sc-gutter); max-width: 100%; }
.folder__tab { appearance: none; font: inherit; cursor: pointer; border: 1px solid color-mix(in oklab, #F4F0EE 22%, transparent); border-bottom: 0; background: color-mix(in oklab, #F4F0EE 6%, transparent); color: color-mix(in oklab, #F4F0EE 70%, transparent); padding: 0.7rem 1.3rem 0.85rem; border-radius: 0.9rem 0.9rem 0 0; font-family: var(--sc-font-display); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem); letter-spacing: -0.01em; display: grid; gap: 0.15rem; justify-items: start; text-align: left; transition: background 0.3s, color 0.3s; backdrop-filter: blur(6px); }
.folder__n { font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-accent); }
.folder__tab.is-active { background: color-mix(in oklab, #F4F0EE 14%, transparent); color: #F4F0EE; border-color: color-mix(in oklab, #F4F0EE 40%, transparent); }
.folder__tab:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.stage--work .panel--map .grid--tonic { padding-top: calc(var(--bar-h) + clamp(5rem, 14vh, 9rem)); }
.stage--work .panel--map .flank--high { top: calc(var(--bar-h) + clamp(5rem, 14vh, 9rem)); }
.stage--work .panel--room .room__copy { bottom: clamp(4rem, 14vh, 10rem); }
@media (max-width: 860px) { .folder { left: var(--sc-gutter); transform: none; padding: 0; } .folder__tab { padding: 0.5rem 0.8rem 0.6rem; font-size: 0.95rem; } .stage--work .panel--map .grid--tonic { padding-top: calc(var(--bar-h) + 5.5rem); } }
.folder__tab { white-space: nowrap; }
@media (max-width: 860px) { .folder__tab { white-space: normal; } }