/* ═════════════════════════════════════════════════════════════
   VISIONARY FUTURE — the live direction (claude.ai/design Brand Book).
   The stage takes over: dark-first, full-bleed, cinematic reveals.
   Ink and paper trade places; the four laws stay.
   Page layout for EVERY page of the site, and the COLOUR PALETTE — this
   file is its one source of truth. Structural tokens (skew, spacing,
   easing, hairline, --stage, --active) + primitives live in styles.css.
   Shared by all generated pages (_gen/build.py).
   ═════════════════════════════════════════════════════════════ */

/* ── themes ──────────────────────────────────────────────────────────────
   Dark is the house default — the Visionary Future stage — and stays so
   regardless of the OS, because the art and every scrim are lit for it.
   `data-theme="light"` (set by assets/theme.js before first paint, from the
   visitor's own choice) hands the page back to the Slant Cut ink-on-paper
   palette, which is defined below and nowhere else. Both palettes used to be
   repeated in styles.css, where — same specificity, earlier in the cascade —
   they were dead: a "brand-book fix" applied to --muted there had been doing
   nothing at all. Edit colour HERE.

   --accent-ink is the accent WHERE IT HAS TO READ AS TEXT: the cyan is a
   fill colour, and cyan type on cream paper is ~1.9:1. Fills keep --active.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --paper: #16171A;
  --surface: #1E1F23;
  --raised: #26272B;
  --ink: #ECEAE2;
  --ink-soft: #D8D6CE;
  --on-ink: #16171A;
  --text-2: #C6C4BA;
  --muted: #8E8C83;
  --track: #3A3B40;
  --line: #2C2D32;
  --interactive-strong: #7C96D9;
  --accent-ink: #5FB8D8;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --paper: #E9E5DB;
  --surface: #F1EDE4;
  --raised: #F7F4ED;
  --ink: #1A1A1A;
  --ink-soft: #34302A;
  --on-ink: #F1EDE4;
  --text-2: #54503F;
  --muted: #6C6658;
  --track: #CBC4B3;
  --line: #D3CDBE;
  --interactive-strong: #4B5D97;
  --accent-ink: #17607E;        /* 5.6:1 on paper — the cyan itself is 1.9:1 */
  color-scheme: light;
}

/* The stage is dark in BOTH themes (styles.css says so of --stage, and the
   art demands it): any section that sits on full-bleed key art keeps the
   dark token island, so its type never lands black-on-black. */
.stage, .on-stage {
  --paper: #16171A;
  --surface: #1E1F23;
  --raised: #26272B;
  --ink: #ECEAE2;
  --ink-soft: #D8D6CE;
  --on-ink: #16171A;
  --text-2: #C6C4BA;
  --muted: #8E8C83;
  --track: #3A3B40;
  --line: #2C2D32;
  --interactive-strong: #7C96D9;
  --accent-ink: #5FB8D8;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── one feel on every phone ─────────────────────────────────────────────
   The gaps that make a site feel "off" on one platform and not the other:
   iOS paints a grey box on every tap, iOS zooms the page when a <16px input
   takes focus, and both platforms hide content behind notches / home
   indicators. Fixed once, here, rather than per component. */
* { -webkit-tap-highlight-color: transparent; }
body { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
.nav-in { padding-left: max(var(--s6), env(safe-area-inset-left)); padding-right: max(var(--s6), env(safe-area-inset-right)); }

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: var(--hair) solid transparent;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.nav.lifted { background: var(--paper); border-bottom-color: var(--ink); }

/* In light mode the nav still floats over dark key art until it lifts — so on
   those pages (body.stage-top) it keeps light-on-dark until it has a paper
   background of its own to sit on. Elsewhere it just follows the theme. */
:root[data-theme="light"] body.stage-top .nav:not(.lifted) {
  --paper: #16171A;
  --ink: #ECEAE2;
  --on-ink: #16171A;
  --text-2: #C6C4BA;
  --accent-ink: #5FB8D8;
}
.nav-in {
  max-width: var(--max); margin: 0 auto;
  height: 64px; padding: 0 var(--s6);
  display: flex; align-items: center; gap: var(--s5);
}
.nav-links { display: flex; gap: var(--s4); margin-left: auto; }
.nav-links a {
  color: var(--text-2); text-decoration: none;
  font-size: 12px; letter-spacing: .04em;
  border-bottom: var(--hair) solid transparent; padding-bottom: 2px;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent-ink); }

/* ── hero: the premiere ──────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero-art { position: absolute; inset: 0; }
.hero-art img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  transform: scale(1.08);
  transition: transform 2400ms var(--ease);
}
.hero.lit .hero-art img { transform: scale(1); }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--paper) 8%, rgba(22,23,26,.62) 46%, rgba(22,23,26,.30) 100%);
}
.hero-in {
  position: relative; z-index: 2;
  max-width: var(--max); margin: 0 auto; width: 100%;
  padding: var(--s8) var(--s6) var(--s7);
}
.hero h1 {
  font-size: clamp(52px, 9.4vw, 132px);
  line-height: .98; letter-spacing: -.035em;
  color: var(--ink);
}
.hero h1 em { font-style: normal; color: var(--accent-ink); }
.hero .eyebrow { color: var(--ink); opacity: .7; margin-bottom: var(--s3); }
.hero .lede {
  margin-top: var(--s4);
  font-size: 15px; line-height: 1.8; color: var(--text-2);
  max-width: 56ch;
}
.hero .cta-row { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }

/* ── inner-page hero (same reveal, smaller stage) ────── */
.hero.page { min-height: 56svh; }
.hero.page h1 { font-size: clamp(38px, 6.4vw, 84px); }
.hero.page .hero-art img { object-position: center 25%; }
.hero.split .hero-in {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr);
  gap: var(--s6); align-items: end;
}
.hero-panel {
  border: var(--hair) solid var(--ink);
  background: var(--stage);
  box-shadow: 8px 8px 0 var(--active);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  max-width: 320px; justify-self: end;
}
.hero-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-art.blur img { filter: blur(28px) saturate(1.3) brightness(.42); transform: scale(1.3); }
.hero.lit .hero-art.blur img { transform: scale(1.32); }

/* ── the theme toggle ────────────────────────────────── */
.themetog { display: none; }          /* it does nothing without JS — don't offer it */
.js .themetog {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--hair) solid var(--ink); background: transparent;
  color: var(--ink);
  padding: 8px; cursor: pointer;
  transform: var(--skew);          /* hard corners + 11° — a circle would be a foreign object here */
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.themetog svg {
  width: 17px; height: 17px; display: block;
  transform: var(--unskew);
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.themetog .i-moon { fill: currentColor; stroke: none; }
.themetog:hover { background: var(--ink); color: var(--paper); }
.nav-tog { margin-left: var(--s2); }
.nav-links + .nav-tog { margin-left: auto; }   /* mobile: nav-links are gone, keep it right */
:root[data-theme="light"] .themetog .i-sun { display: none; }
.themetog .i-moon { display: none; }
:root[data-theme="light"] .themetog .i-moon { display: block; }

/* in the drawer it is a labelled row, not a lone glyph */
.menu-tog {
  width: 100%;
  transform: none; border: 0;
  border-bottom: var(--hair) solid var(--line);
  justify-content: flex-start; gap: 10px;
  padding: 15px var(--s3);
  font: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2);
}
.menu-tog svg { transform: none; width: 15px; height: 15px; }
.menu-tog:hover { background: var(--surface); color: var(--ink); }
.menu-tog:active { background: var(--surface); }

/* ── the burger + the mobile drawer ──────────────────── */
.burger {
  display: none;
  margin-left: auto;
  border: var(--hair) solid var(--ink); background: transparent;
  min-width: 44px; min-height: 44px;
  flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 11px; cursor: pointer;
  transform: var(--skew);
}
.burger span {
  display: block; width: 18px; height: 2px;
  background: var(--ink);
  transform: var(--unskew);
  transition: background 140ms var(--ease);
}
.burger span + span { margin-top: 4px; }
.burger:hover { background: var(--ink); }
.burger:hover span { background: var(--paper); }

.menu[hidden] { display: none; }
.menu { position: fixed; inset: 0; z-index: 100; }
.menu-scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  opacity: 0; transition: opacity 240ms var(--ease);
}
.menu.is-open .menu-scrim { opacity: 1; }
.menu-box {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(340px, 86vw);
  display: flex; flex-direction: column;
  background: var(--paper);
  border-left: var(--hair) solid var(--ink);
  transform: translateX(100%);
  transition: transform 260ms var(--ease);
  overscroll-behavior: contain;     /* the page behind must not scroll with it */
  overflow-y: auto;
  padding-right: env(safe-area-inset-right);   /* landscape notch */
}
.menu.is-open .menu-box { transform: none; }
.menu-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; flex: none;
  padding: 0 8px 0 var(--s3);
  border-bottom: var(--hair) solid var(--ink);
  background: var(--ink); color: var(--on-ink);
  padding-top: env(safe-area-inset-top);
  height: calc(64px + env(safe-area-inset-top));
}
.menu-bar b { font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.menu-x {
  border: 0; background: transparent; color: var(--on-ink);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  width: 44px; height: 44px;                      /* a real touch target on both platforms */
  display: flex; align-items: center; justify-content: center;
}
.menu-x:hover { color: var(--track); }
.menu-links { display: flex; flex-direction: column; }
.menu-links a {
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 13px var(--s3);
  color: var(--ink); text-decoration: none;
  font-size: 17px; letter-spacing: -.01em;
  border-bottom: var(--hair) solid var(--line);
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.menu-links a em {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
  color: var(--track); font-variant-numeric: tabular-nums;
  width: 16px; flex: none;
}
.menu-links a:hover, .menu-links a:focus-visible { background: var(--surface); color: var(--accent-ink); }
.menu-links a:active { background: var(--surface); }
.menu-links a[aria-current="page"] { color: var(--accent-ink); }
.menu-links a[aria-current="page"] em { color: var(--accent-ink); }

/* the drawer's links deal in, once, on open */
@media (prefers-reduced-motion: no-preference) {
  .js .menu-links a, .js .menu-foot > * {
    opacity: 0; transform: translateX(14px);
    transition: opacity 260ms var(--ease), transform 260ms var(--ease),
                background 120ms var(--ease), color 120ms var(--ease);
  }
  .js .menu.is-open .menu-links a, .js .menu.is-open .menu-foot > * { opacity: 1; transform: none; }
  .menu.is-open .menu-links a:nth-child(1) { transition-delay: 60ms; }
  .menu.is-open .menu-links a:nth-child(2) { transition-delay: 100ms; }
  .menu.is-open .menu-links a:nth-child(3) { transition-delay: 140ms; }
  .menu.is-open .menu-links a:nth-child(4) { transition-delay: 180ms; }
  .menu.is-open .menu-links a:nth-child(5) { transition-delay: 220ms; }
  .menu.is-open .menu-foot > * { transition-delay: 260ms; }
}

/* the space between the links and the CTA is the brand's, not a void */
.menu-mark {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s4);
}
.menu-mark svg { width: 46%; max-width: 128px; height: auto; opacity: .07; }
.menu-mark .ink { fill: var(--ink); }
.menu-mark .io { stroke: var(--ink); }

.menu-foot {
  display: flex; flex-direction: column;
  border-top: var(--hair) solid var(--ink);
  padding-bottom: env(safe-area-inset-bottom);   /* clear of the home indicator */
}
.menu-cta {
  padding: var(--s3);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.menu-alt {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none;
  min-height: 24px; display: inline-flex; align-items: center;
}
.menu-alt:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .menu-box { transition: none; }
  .menu-scrim { transition: none; }
}

/* ── the stage: one game at a time ───────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stage { position: relative; height: 100svh; overflow: hidden; }
.slide {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  opacity: 0; visibility: hidden;
  transition: opacity 600ms var(--ease), visibility 0s 600ms;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 600ms var(--ease); }
.slide-art { position: absolute; inset: 0; }
.slide-art img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%;
  transform: scale(1.06);
  transition: transform 2000ms var(--ease);
}
.slide.is-active .slide-art img { transform: scale(1); }
.slide-art.blur img { filter: blur(30px) saturate(1.25) brightness(.4); transform: scale(1.3); }
.slide.is-active .slide-art.blur img { transform: scale(1.32); }
.slide-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--paper) 6%, rgba(22,23,26,.66) 42%, rgba(22,23,26,.24) 100%);
}
.slide-in {
  position: relative; z-index: 2;
  max-width: var(--max); margin: 0 auto; width: 100%;
  padding: var(--s8) var(--s6) 118px;
}
.slide-in .eyebrow { color: var(--ink); opacity: .72; }
.slide-in h2 {
  margin-top: var(--s2);
  font-size: clamp(44px, 7.6vw, 104px);
  line-height: .98; letter-spacing: -.03em; color: var(--ink);
}
.slide-in h2 a { color: inherit; text-decoration: none; }
.slide-in h2 a:hover { color: var(--accent-ink); }
.slide-lede { margin-top: var(--s3); max-width: 52ch; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }
.slide .cta-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
.slide-go {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: var(--hair) solid var(--ink); padding-bottom: 3px;
}
.slide-go:hover { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.chips > div {
  border: var(--hair) solid var(--track);
  background: rgba(22,23,26,.55);
  padding: 8px 14px; min-width: 96px;
}
.chips b { display: block; font-size: 13.5px; color: var(--ink); }
.chips span {
  display: block; margin-top: 1px;
  font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.slide-panel {
  position: absolute; right: var(--s7); top: 50%; transform: translateY(-54%);
  width: min(300px, 23vw); z-index: 2;
  border: var(--hair) solid var(--ink);
  background: var(--stage);
  box-shadow: 8px 8px 0 var(--active);
  overflow: hidden;
}
.slide-panel.portrait { aspect-ratio: 3 / 4; }
.slide-panel.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-panel.square { aspect-ratio: 1; }
.slide-panel.square img { width: 100%; height: 100%; object-fit: contain; padding: 10%; display: block; box-sizing: border-box; }
@media (max-width: 1000px) { .slide-panel { display: none; } }
@media (min-width: 1001px) { .slide.has-panel .slide-in { padding-right: clamp(300px, 28vw, 420px); } }
.stage-ui {
  position: absolute; right: var(--s6); bottom: var(--s5); z-index: 3;
  display: flex; align-items: center; gap: var(--s3);
}
/* WCAG 2.2.2: moving content needs a real, labelled way to stop it */
.stage-play {
  transform: var(--skew);
  border: var(--hair) solid var(--ink); background: rgba(22,23,26,.55);
  min-width: 46px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; margin-right: var(--s2);
  transition: background 140ms var(--ease);
}
.stage-play i {
  display: block; transform: var(--unskew);
  width: 10px; height: 12px;
  border-left: 3px solid var(--ink); border-right: 3px solid var(--ink);   /* pause bars */
}
.stage-play.is-paused i {
  width: 0; height: 0;
  border: 6px solid transparent;
  border-left: 10px solid var(--ink); border-right: 0;                     /* play triangle */
}
.stage-play:hover { background: var(--active); }
.stage-play:hover i { border-left-color: #16171A; border-right-color: #16171A; }
.stage-play.is-paused:hover i { border-right-color: transparent; }

.stage-arrow {
  transform: var(--skew);
  border: var(--hair) solid var(--ink); background: rgba(22,23,26,.55);
  color: var(--ink); font: inherit; font-size: 14px; line-height: 1;
  min-width: 46px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.stage-arrow > i { display: block; transform: var(--unskew); font-style: normal; }
.stage-arrow:hover { background: var(--active); color: var(--on-ink); border-color: var(--active); }
.stage-arrow:active { transform: var(--skew) translate(2px, 2px); }
.stage-dots { display: flex; gap: 7px; }
.stage-dots button {
  position: relative;
  width: 26px; height: 6px; padding: 0;
  transform: var(--skew);
  border: 0; background: var(--track); cursor: pointer;
  transition: background 140ms var(--ease);
}
/* a 6px-tall dot is not a touch target — grow the hit area, not the dot */
.stage-dots button::after { content: ""; position: absolute; inset: -19px -4px; }
.stage-dots button:hover { background: var(--ink); }
.stage-dots button[aria-pressed="true"] { background: var(--active); }

/* ── section head: heading + its counter-action ──────── */
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.sec-head p { color: var(--text-2); max-width: 58ch; margin-top: var(--s3); }
.sec-head .go {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  border-bottom: var(--hair) solid var(--ink); padding-bottom: 3px; margin-bottom: 4px;
}
.sec-head .go:hover { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }

/* ── marquee: the printed strip ──────────────────────── */
.marquee {
  border-top: var(--hair) solid var(--ink);
  border-bottom: var(--hair) solid var(--ink);
  background: var(--ink); color: var(--on-ink);
  overflow: hidden; white-space: nowrap;
  padding: 12px 0;
}
.marquee > div { display: inline-block; animation: marquee 36s linear infinite; }
.marquee span {
  font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  padding: 0 28px;
}
.marquee em { font-style: normal; color: #17607E; }   /* the band is cream in BOTH themes */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee > div { animation: none; } }

/* ── flow between pages (cross-document view transitions) ── */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 180ms var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in 260ms var(--ease) both; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ── breadcrumbs ─────────────────────────────────────── */
.crumbs {
  display: flex; gap: 10px; align-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s3);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--track); }
.crumbs .here { color: var(--ink); }

/* ── proof: monoliths ────────────────────────────────── */
.band { max-width: var(--max); margin: 0 auto; padding: var(--s8) var(--s6); }
.band.tight { padding-top: var(--s7); padding-bottom: var(--s7); }
.mono-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s6); align-items: end;
  padding: var(--s6) 0;
  border-top: var(--hair) solid var(--track);
}
.mono-row.first { border-top-color: var(--ink); position: relative; }
.mono-row.first::before {
  content: ""; position: absolute;
  top: calc(var(--hair) * -1 - 1px); left: 0;
  width: 22px; height: 5px;
  background: var(--paper);
}
.mono-row:last-child { border-bottom: var(--hair) solid var(--ink); }
.mono-num {
  font-size: clamp(72px, 12vw, 176px);
  font-weight: 700; line-height: .95; letter-spacing: -.03em;
}
.mono-row.first .mono-num { color: var(--accent-ink); }
.mono-body span {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted);
}
.mono-body p { margin-top: var(--s2); font-size: 13.5px; color: var(--text-2); max-width: 44ch; }

/* ── band heads ──────────────────────────────────────── */
.band-head { margin-bottom: var(--s6); }
.band-head p { color: var(--text-2); max-width: var(--measure); margin-top: var(--s3); }

/* ── the stage: featured premieres ───────────────────── */
.play-chip {
  transform: var(--skew);
  display: inline-flex;
  background: var(--active); color: #16171A;
  border: var(--hair) solid var(--active);
  padding: 11px 26px;
  font: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms var(--ease), transform 90ms var(--ease);
}
.play-chip:hover { color: #16171A; }
.play-chip > i { display: block; transform: var(--unskew); font-style: normal; }
.play-chip:hover { background: #8FD0E6; }
.play-chip:active { transform: var(--skew) translate(2px, 2px); }
.demo-alt {
  display: inline-block; margin-left: var(--s3);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none;
}
.demo-alt:hover { color: var(--ink); }

/* ── catalog grids ───────────────────────────────────── */
.cat-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--s3);
}
.cat-grid .tile { background: var(--surface); }
.cat-grid .tile-art { border-bottom-color: var(--ink); }
.cat-grid.full { grid-template-columns: repeat(4, 1fr); }
a.tile { text-decoration: none; }
.tile-mark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.tile-mark svg { width: 40%; height: auto; opacity: .45; }
.tile-mark .ink { fill: #ECEAE2; }
.tile-mark .io { stroke: #ECEAE2; }
.grid-foot { margin-top: var(--s5); text-align: right; }

/* ── the catalog filter ──────────────────────────────── */
.filters { margin-bottom: var(--s5); }
.fsearch { position: relative; max-width: 460px; }
.fsearch input {
  width: 100%;
  border: var(--hair) solid var(--muted);   /* --track against the fill was 1.47:1 */
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 13px;
  padding: 12px var(--s3);
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.fsearch input::placeholder { color: var(--muted); }
.fsearch input:focus { border-color: var(--accent-ink); outline: 2px solid var(--interactive-strong); outline-offset: 2px; }
.fsearch input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); cursor: pointer; }
.fchips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.fchip {
  transform: var(--skew);
  border: var(--hair) solid var(--track);
  background: transparent; color: var(--text-2);
  font: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 16px; cursor: pointer;
  transition: border-color 140ms var(--ease), color 140ms var(--ease), background 140ms var(--ease);
}
.fchip em {
  font-style: normal; margin-left: 6px; opacity: .6;
  font-variant-numeric: tabular-nums;
}
.fchip:hover { border-color: var(--ink); color: var(--ink); }
.fchip[aria-pressed="true"] {
  background: var(--active); border-color: var(--active); color: #16171A;   /* --on-ink is cream in light: 1.9:1 */
}
.fchip[aria-pressed="true"] em { opacity: .8; }
.fcount {
  margin-top: var(--s3);
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.fcount.is-filtered { color: var(--accent-ink); }
.tile[hidden] { display: none; }
.tile-mech {
  font-size: 9px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  margin-top: 2px;
}
.fempty[hidden] { display: none; }
.fempty {
  border: var(--hair) dashed var(--track);
  padding: var(--s7) var(--s4);
  text-align: center;
}
.fempty p { color: var(--text-2); font-size: 14px; }
.fempty .btn { margin-top: var(--s4); }

/* ── method: the reveal wall ─────────────────────────── */
.mwall { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.mcell {
  border: var(--hair) solid var(--ink);
  background: var(--surface);
  padding: var(--s5);
  position: relative;
  min-height: 300px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4);
}
.mcell::before {
  content: ""; position: absolute;
  top: calc(var(--hair) * -1 - 1px); left: -2px;
  width: 22px; height: 5px;
  background: var(--paper);
}
.mcell .step-no {
  font-size: clamp(40px, 4.4vw, 64px); font-weight: 700; line-height: 1;
  color: var(--track); font-variant-numeric: tabular-nums;
}
.mcell h3 { font-size: 16px; letter-spacing: .14em; text-transform: uppercase; margin-top: var(--s3); }
.mcell p { margin-top: var(--s2); font-size: 13px; color: var(--text-2); max-width: 52ch; }
.mcell svg { width: 150px; height: auto; display: block; align-self: flex-end; }
.mcell .wire { stroke: var(--accent-ink); }
.mcell .wire.dash { stroke: var(--track); }

/* ── integration: the terminal ───────────────────────── */
.term {
  border: var(--hair) solid var(--ink);
  background: #101114;
  box-shadow: 8px 8px 0 var(--active);
  position: relative;
  max-width: 860px;
}
.term::before {
  content: ""; position: absolute;
  top: calc(var(--hair) * -1 - 1px); left: -2px;
  width: 22px; height: 5px;
  background: var(--paper);
}
.term-bar {
  display: flex; align-items: center; gap: var(--s2);
  padding: 10px var(--s3);
  border-bottom: var(--hair) solid var(--ink);
  background: var(--ink); color: var(--on-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.term-head {
  padding: 8px var(--s3);
  border-top: var(--hair) solid var(--line);
  border-bottom: var(--hair) solid var(--line);
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--active);
}
.term-head:nth-of-type(1) { border-top: 0; }
.term pre { margin: 0; padding: var(--s3); overflow-x: auto; font-size: 12px; line-height: 1.7; color: #ECEAE2; }
.term code { font-family: inherit; }
.int-notes { max-width: 860px; margin-top: var(--s6); }
.int-notes dl { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.int-notes dt {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding-top: var(--s2); border-top: var(--hair) solid var(--ink);
}
.int-notes dd { margin: var(--s1) 0 0; font-size: 12.5px; color: var(--text-2); }
.int-notes code { background: var(--surface); border: 1px solid var(--line); padding: 0 4px; font-size: 11.5px; }
.int-notes .btn { margin-top: var(--s5); }

/* ── prose (method / integration / about long-form) ──── */
.prose { max-width: 760px; }
.prose h2 { font-size: 22px; letter-spacing: .04em; margin-top: var(--s6); }
.prose h3 { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; margin-top: var(--s5); }
.prose p { margin-top: var(--s3); font-size: 13.5px; line-height: 1.85; color: var(--text-2); }
.prose p b, .prose li b { color: var(--ink); }
.prose ul, .prose ol { margin: var(--s3) 0 0; padding-left: 1.4em; }
.prose li { margin-top: var(--s2); font-size: 13.5px; line-height: 1.8; color: var(--text-2); }
.prose code { background: var(--surface); border: 1px solid var(--line); padding: 0 4px; font-size: 12px; }
.prose pre {
  margin: var(--s3) 0 0; padding: var(--s3);
  background: #101114; border: var(--hair) solid var(--ink);
  overflow-x: auto; font-size: 12px; line-height: 1.7;
}
.prose pre code { background: transparent; border: 0; padding: 0; }

/* ── game page: the numbers ──────────────────────────── */
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.stat {
  border: var(--hair) solid var(--ink);
  background: var(--surface);
  padding: var(--s4) var(--s3);
  position: relative;
  display: flex; flex-direction: column; gap: var(--s2);
  min-height: 132px;
}
.stat::before {
  content: ""; position: absolute;
  top: calc(var(--hair) * -1 - 1px); left: -2px;
  width: 22px; height: 5px;
  background: var(--paper);
}
.stat b {
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 700;
  line-height: 1.05; letter-spacing: -.02em; color: var(--ink);
}
.stat.wide b { font-size: 15px; line-height: 1.5; letter-spacing: 0; }
.stat:first-child b { color: var(--accent-ink); }
.stat span {
  margin-top: auto;
  font-size: 9.5px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}

/* ── game page: how it plays ─────────────────────────── */
.playgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s5); align-items: start; }
.playgrid .prose { max-width: none; }
.playgrid .prose p:first-child { margin-top: 0; }
.fcard {
  border: var(--hair) solid var(--line);
  border-left: 3px solid var(--active);
  background: var(--surface);
  padding: var(--s3) var(--s4);
}
.fcard + .fcard { margin-top: var(--s3); }
.fcard > span {
  display: block;
  font-size: 9.5px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s2);
}
.fcard p { font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.fcard ul { margin: 0; padding-left: 1.1em; }
.fcard li { font-size: 13px; line-height: 1.7; color: var(--ink-soft); }

/* ── game page: the jackpot ladder ───────────────────── */
.ladder {
  margin-top: var(--s6);
  border: var(--hair) solid var(--ink);
  background: var(--surface);
  padding: var(--s5);
  position: relative;
}
.ladder::before {
  content: ""; position: absolute;
  top: calc(var(--hair) * -1 - 1px); left: -2px;
  width: 22px; height: 5px;
  background: var(--paper);
}
.ladder-h {
  display: block;
  font-size: 9.5px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s4);
}
.rung { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.rung-l {
  width: 72px; flex: none;
  font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-2);
}
.rung-bar {
  height: 12px;
  background: var(--track);
  transform: var(--skew);
  transition: background 140ms var(--ease);
}
.rung:first-of-type .rung-bar { background: var(--active); }
.rung-x { flex: none; font-size: 12.5px; color: var(--ink); }
.ladder-n { margin-top: var(--s4); font-size: 12px; color: var(--muted); }

/* ── the demo page ───────────────────────────────────── */
.playpage {
  min-height: 100svh;
  padding: 96px var(--s4) var(--s6);
  display: flex; flex-direction: column; align-items: center; gap: var(--s4);
}
.playpage-head {
  width: 100%; max-width: 900px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  border-bottom: var(--hair) solid var(--line); padding-bottom: var(--s3);
}
.playback, .playext {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  border-bottom: var(--hair) solid transparent; padding-bottom: 3px;
}
.playback:hover, .playext:hover { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
.playext { color: var(--accent-ink); }
.playstage {
  position: relative;
  /* The embedded player picks its PHONE layout under 768px of its own
     viewport (useIsMobile.ts) — a fixed 440px portrait stage was forcing the
     mobile game UI onto every desktop. Landscape and comfortably past that
     breakpoint on desktop; phone-shaped again below ~840px page width, where
     the stage would dip under 768px anyway. */
  width: min(1200px, 100%);
  aspect-ratio: 16 / 9; max-height: 74svh;
  background: var(--stage);
  border: var(--hair) solid var(--ink);
  box-shadow: 8px 8px 0 var(--active);
}
.playstage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 840px) {
  .playstage { width: min(440px, 100%); aspect-ratio: 9 / 16; }
}
/* The stage IS the fullscreen element: drop the frame, let the player fill
   the screen and re-read its own viewport (desktop layout on a monitor). */
.playstage:fullscreen { width: 100%; max-height: none; aspect-ratio: auto; border: 0; box-shadow: none; }

/* Full screen toggle — lives INSIDE the stage: once fullscreen, nothing
   outside the stage subtree renders, so an outside button could never offer
   the exit. JS-only affordance; unsupported engines (iPhone) hide it again. */
.playfs { display: none; }
.js .playfs {
  display: block;
  position: absolute; top: 10px; right: 10px; z-index: 3;
  padding: 9px 12px;
  font: inherit; font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: rgba(22, 23, 26, .74);
  border: 1px solid rgba(255, 255, 255, .38);
  cursor: pointer; opacity: .6; transition: opacity 160ms;
}
.js .playfs:hover, .js .playfs:focus-visible { opacity: 1; }
.playfs .fs-out { display: none; }
.playfs.is-on .fs-in { display: none; }
.playfs.is-on .fs-out { display: inline; }
.playnote {
  max-width: 52ch; text-align: center;
  font-size: 12.5px; line-height: 1.7; color: var(--muted);
}
.playnote a { color: var(--accent-ink); }

/* this page exists to be sent to an operator — it must carry the ask */
.playask {
  border-top: var(--hair) solid var(--line);
  margin-top: var(--s3); padding-top: var(--s5);
  width: 100%; max-width: 900px;
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
}
.playask p { font-size: 15px; color: var(--ink); }

/* a mailto silently does nothing on a machine with no mail client — always
   leave an address they can read and copy */
.mailplain {
  font-size: 12px; letter-spacing: .06em;
  color: var(--muted); text-decoration: none;
  border-bottom: 1px dotted var(--track); padding-bottom: 1px;
}
.mailplain:hover { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
.mailplain-row { margin-top: var(--s3); text-align: center; }

/* ── game page: specs ────────────────────────────────── */

/* ── game page: prev / next pager ────────────────────── */
.pager {
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  border-top: var(--hair) solid var(--ink);
  padding-top: var(--s4); margin-top: var(--s7);
}
.pager a { text-decoration: none; color: var(--ink); }
.pager a:hover b { color: var(--accent-ink); }
.pager span {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.pager b { display: block; margin-top: 4px; font-size: 15px; }
.pager .next { text-align: right; margin-left: auto; }

/* ── cross-link strip ("engineered like the rest") ───── */
.strip {
  border: var(--hair) solid var(--ink);
  background: var(--surface);
  padding: var(--s4) var(--s5);
  position: relative;
  max-width: 760px; margin-top: var(--s7);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
}
.strip::before {
  content: ""; position: absolute;
  top: calc(var(--hair) * -1 - 1px); left: -2px;
  width: 22px; height: 5px;
  background: var(--paper);
}
.strip p { font-size: 13px; color: var(--text-2); max-width: 46ch; }
.strip nav { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* ── contact cards ───────────────────────────────────── */
.mailcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); max-width: 980px; }
.mailcard {
  border: var(--hair) solid var(--ink);
  background: var(--surface);
  padding: var(--s4);
  position: relative;
  display: flex; flex-direction: column; gap: var(--s3);
  text-decoration: none; color: var(--ink);
  transition: transform 140ms var(--ease);
}
.mailcard::before {
  content: ""; position: absolute;
  top: calc(var(--hair) * -1 - 1px); left: -2px;
  width: 22px; height: 5px;
  background: var(--paper);
}
.mailcard:hover { transform: translateY(-3px); color: var(--ink); }
.mailcard b { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.mailcard p { font-size: 12.5px; color: var(--text-2); }
.mailcard .addr { margin-top: auto; font-size: 12px; color: var(--accent-ink); word-break: break-all; }

/* ── close: the last reveal ──────────────────────────── */
.close {
  border-top: var(--hair) solid var(--ink);
  text-align: center;
  padding: var(--s8) var(--s4);
}
.close .drain-mark { width: 96px; height: auto; margin-bottom: var(--s5); }
.close h2 {
  font-size: clamp(34px, 6vw, 76px);
  line-height: 1.05; letter-spacing: -.025em;
  max-width: 18ch; margin: 0 auto;
}
.close p { margin: var(--s4) auto 0; max-width: 54ch; color: var(--text-2); font-size: 15px; }
.close .btn { margin-top: var(--s5); }

/* ── footer ──────────────────────────────────────────── */
.foot { border-top: var(--hair) solid var(--ink); padding-top: var(--s7); }
.foot-in {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--s6) var(--s6);
  display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: var(--s4);
}
.foot-brand { display: flex; align-items: flex-start; gap: 10px; }
.foot-brand svg { width: 26px; height: 26px; }
.foot-brand b { font-size: 12px; letter-spacing: .18em; line-height: 1.4; }
.foot-brand small { display: block; font-weight: 400; font-size: 8.5px; letter-spacing: .42em; opacity: .6; }
.foot nav { display: flex; flex-direction: column; gap: 6px; }
.foot nav b { font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; opacity: .5; margin-bottom: 4px; }
.foot nav a { color: var(--ink); opacity: .8; text-decoration: none; font-size: 12px; }
.foot nav a:hover { color: var(--ink); opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.foot-legal {
  max-width: var(--max); margin: 0 auto;
  padding: var(--s3) var(--s6) var(--s5);
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
}
.foot-legal p { font-size: 12px; opacity: .5; }

/* ── 404 ─────────────────────────────────────────────── */
.lost {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--s6) var(--s4);
}
.lost svg { width: 96px; height: auto; margin-bottom: var(--s5); }
.lost h1 { font-size: clamp(40px, 7vw, 96px); letter-spacing: -.03em; }
.lost p { margin-top: var(--s3); color: var(--text-2); }
.lost .cta-row { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; margin-top: var(--s5); }

/* ── demo modal (real playable demos — /embed) ───────── */
.demo[hidden] { display: none; }
.demo {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s4);
}
.demo-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.66); }
.demo-box {
  position: relative;
  width: min(440px, 100%); max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--hair) solid var(--ink);
  box-shadow: 8px 8px 0 var(--active);
}
.demo-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 10px 10px 10px var(--s2);
  border-bottom: var(--hair) solid var(--ink);
  background: var(--ink); color: var(--on-ink);
}
.demo-bar b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.demo-actions { display: flex; align-items: center; gap: var(--s2); }
.demo-ext {
  transform: var(--skew); background: var(--active); color: #16171A;
  text-decoration: none; padding: 6px 12px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.demo-ext > i { display: block; transform: var(--unskew); font-style: normal; }
.demo-x {
  border: 0; background: transparent; color: var(--on-ink);
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 6px 8px;
}
.demo-x:hover { color: var(--track); }
.demo-stage { position: relative; aspect-ratio: 9 / 16; width: 100%; background: var(--stage); overflow: hidden; }
.demo-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── motion: slow reveals ────────────────────────────── */
/* EVERY rule that starts content hidden is scoped to `html.js` — theme.js sets
   that class before first paint, and site.js drops it again if app.js (which
   adds the revealing classes) never ran. Without the guard, JS off or one bad
   deploy renders a blank page: these rules cover the whole page below the hero
   plus the hero's own headline and CTAs. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .hero-in > * { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
  .js .hero.lit .hero-in > * { opacity: 1; transform: none; }
  .js .hero.lit .hero-in > *:nth-child(2) { transition-delay: 120ms; }
  .js .hero.lit .hero-in > *:nth-child(3) { transition-delay: 240ms; }
  .js .hero.lit .hero-in > *:nth-child(4) { transition-delay: 360ms; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art img, .slide-art img { transform: none; }
}
/* app.js provably never ran (site.js verified after a frame) — let the
   hidden-until-revealed content through, but keep html.js: the toggle,
   drawer and filter are site.js's and still work. */
.js.no-anim .reveal, .js.no-anim .hero-in > * { opacity: 1 !important; transform: none !important; }

/* ── the age gate (SITE-WIDE) ────────────────────────────────────────────
   In base.html, so EVERY page carries it, and visible BY DEFAULT: the first
   thing a new visitor meets, on any URL they land on. With no JS it cannot
   be dismissed, and on demo pages the iframe (shipped as data-src) never
   loads the game. theme.js flips html.age-ok before paint when a fresh
   confirmation is stored, so returning visitors don't get a flash of it.
   Above the nav (50) and the drawer (100): nothing outranks the gate.
   While it shows, the page behind it does not scroll. */
html:not(.age-ok) body { overflow: hidden; }
.agegate {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s3);
  background: color-mix(in srgb, var(--stage) 90%, transparent);
  backdrop-filter: blur(6px);
}
.age-ok .agegate { display: none; }
.agegate-card {
  max-width: 480px; width: 100%;
  padding: var(--s5) var(--s4);
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  text-align: center;
  background: var(--paper); color: var(--ink);
  border: var(--hair) solid var(--ink);
  box-shadow: 8px 8px 0 var(--active);
}
.agegate-card h2 { font-size: 24px; letter-spacing: -0.01em; }
.agegate-card p { max-width: 40ch; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.agegate-no { font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.agegate-no:hover { color: var(--ink); }

/* ── responsive ──────────────────────────────────────── */
@media (max-width: 1000px) {
  .statgrid { grid-template-columns: repeat(2, 1fr); }
  .playgrid { grid-template-columns: 1fr; gap: var(--s4); }
  .mono-row { grid-template-columns: 1fr; align-items: start; gap: var(--s3); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid.full { grid-template-columns: repeat(3, 1fr); }
  .mwall { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .mailcards { grid-template-columns: 1fr; }
  .hero.split .hero-in { grid-template-columns: 1fr; }
  .hero-panel { justify-self: start; max-width: 260px; }
}
@media (max-width: 720px) {
  .band { padding: var(--s7) var(--s3); }
  .js .nav-tog { display: none; }    /* on a phone the toggle lives in the drawer */
  /* iOS zooms the whole page when a focused input is under 16px */
  .fsearch input { font-size: 16px; }
  .slide-in { padding: var(--s7) var(--s3) 128px; }
  .slide-lede { display: none; }
  .chips > div { min-width: 0; padding: 6px 10px; }
  .stage-ui { right: var(--s3); bottom: var(--s4); }
  .stage-dots button { width: 16px; }
  .sec-head { align-items: flex-start; flex-direction: column; }
  .nav-in { padding: 0 var(--s3); gap: var(--s3); }
  .nav-links { display: none; }
  .nav-cta { display: none; }          /* it lives in the drawer on mobile */
  .burger { display: flex; }
  .hero-in { padding: var(--s8) var(--s3) var(--s6); }
  /* An inner-page hero already ends on 64px of its own padding; another 96px of
     band on top of it read as a dead screen between the lede and the content —
     ~150px of nothing on the catalog and every game sheet. Only the band that
     FOLLOWS a hero tightens; band-to-band rhythm is untouched, and the home
     page (whose first section is .stage, not .hero) is unaffected. */
  .hero + .band { padding-top: var(--s4); }
  .cat-grid, .cat-grid.full { grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
  .int-notes dl { grid-template-columns: 1fr; }
  .foot-in, .foot-legal { padding-left: var(--s3); padding-right: var(--s3); }
  .demo-box { width: 100%; }
  .stat { min-height: 104px; padding: var(--s3) var(--s2); }
  .ladder { padding: var(--s3); }
  .rung-l { width: 54px; font-size: 9px; letter-spacing: .12em; }
  .rung-x { font-size: 11px; }
  .playpage { padding: 88px var(--s2) var(--s5); }
  .playstage { max-height: 68svh; }
}

/* ── print: the game sheet ───────────────────────────────────────────────
   Game sheets get printed and handed round a meeting in this industry, so a
   game page has to survive a printer. The load-bearing fix is the first one:
   the reveal system parks every .reveal below the fold at opacity:0 until the
   IntersectionObserver fires, so printing a page nobody scrolled emitted
   BLANK PAPER. The rest is removing what cannot be used on paper (the drawer,
   the carousel controls, the filter bar) and paying back the dark stage in
   ink. Non-active carousel slides are visibility:hidden, so only the one on
   screen prints — no six-slide pile-up. */
@media print {
  /* 1. the reveal machinery is a screen affordance; on paper it is a blank page */
  .js .reveal, .js .hero-in > * { opacity: 1 !important; transform: none !important; }

  /* 2. ink on paper, whichever theme the visitor happened to be in — including
        the .stage/.on-stage dark islands, which would otherwise print black */
  :root, :root[data-theme="light"], .stage, .on-stage {
    --paper: #fff; --surface: #fff; --raised: #fff;
    --ink: #000; --ink-soft: #000; --on-ink: #fff;
    --text-2: #222; --muted: #444; --track: #767676; --line: #767676;
    --interactive-strong: #000; --accent-ink: #000;
  }
  body { background: #fff; color: #000; }

  /* 3. furniture you cannot click on paper */
  .nav, .menu, .demo, .stage-ui, .skip, .themetog, .burger,
  .marquee, .pager, .filters, .fempty, .playask, .agegate { display: none !important; }

  /* 4. the stage is lit for a screen and measured in svh. Order matters here:
        the inactive slides are visibility:hidden, which still RESERVES space — so
        they must be display:none before .slide goes static, or the homepage prints
        five blank slide-sized holes. Static + display:none lets .stage collapse
        onto the one slide that is actually showing. */
  .slide:not(.is-active) { display: none !important; }
  .slide { position: static !important; }
  .hero, .stage { min-height: 0 !important; height: auto !important; }
  .hero-art, .slide-art, .hero-scrim, .slide-scrim { display: none !important; }

  /* 5. keep a spec block whole */
  .stat, .fcard, .rung, .mcell, .term, .ladder { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  a { text-decoration: underline; }
  img { max-width: 100% !important; }
}