/* ═══════════════════════════════════════════════════════════════════════════════════════════
   HOLOHUNT — Streetwear Archive, on the web.

   This is a direct port of the iOS design system in
   holohunt-ios/Sources/Views/ArchiveTheme.swift. Same token table, same three faces, same
   material law: warm paper and grain, off-black Anton display type, ONE signal red, hairline
   borders instead of shadows — and shadows reserved exclusively for cards and slabs, which are
   the only dimensional objects in the world.

   If a value here disagrees with ArchiveTheme.swift, ArchiveTheme.swift is right.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Faces ──────────────────────────────────────────────────────────────────────────────── */
@font-face { font-family: "Anton";        src: url("../assets/fonts/Anton-Regular.woff2") format("woff2"), url("../assets/fonts/Anton-Regular.ttf") format("truetype");               font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo Black"; src: url("../assets/fonts/ArchivoBlack-Regular.woff2") format("woff2"), url("../assets/fonts/ArchivoBlack-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono";   src: url("../assets/fonts/SpaceMono-Regular.woff2") format("woff2"), url("../assets/fonts/SpaceMono-Regular.ttf") format("truetype");       font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono";   src: url("../assets/fonts/SpaceMono-Bold.woff2") format("woff2"), url("../assets/fonts/SpaceMono-Bold.ttf") format("truetype");             font-weight: 700; font-display: swap; }

/* ── Tokens ─────────────────────────────────────────────────────────────────────────────── */
:root {
  --paper:    #F4F2ED;
  --ink:      #111110;
  --red:      #E0201B;
  --ink-soft: #55524C;
  --hairline: #D9D6CF;
  --tray:     #EFEDE7;
  --panel:    #FFFFFF;

  --r-tray: 10px;
  --r-btn:  12px;
  --r-card: 14px;
  --r-chip: 6px;

  --display: "Anton", "Impact", sans-serif;
  --head:    "Archivo Black", system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* The one shadow spec in the system — cards and slabs only. */
  --slab-shadow: 0 6px 18px rgba(0,0,0,.18);

  --gut: clamp(20px, 5vw, 72px);
  --band-y: clamp(72px, 11vh, 148px);
  --wrap: 1240px;

  /* Height of the sticky .chrome bar: 12px padding, 40px content, 12px padding. Declared as a
     token because the bar's height and the scroll offset below have to move together — if the
     bar grows and this doesn't, every anchor silently starts landing underneath it again. */
  --chrome-h: 64px;
}

/* ── Reset ──────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top is what keeps an anchored section from landing behind the sticky chrome.
   Without it every one of the eight nav links dropped its target exactly 64px — the full height
   of the bar — under the bar, so "PROVABLY FAIR" scrolled you to a section whose heading was
   hidden. Set on html so it applies to nav clicks, deep links arriving with a hash, and
   keyboard focus scrolling alike, rather than needing scroll-margin on every section. */
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--chrome-h) + 18px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--head);
  font-size: 16px;
  line-height: 1.55;
  /* `clip`, not `hidden`: hidden turns body into a scroll container, which is why `.chrome`'s
     position: sticky never stuck. clip hides horizontal overflow without creating one. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }

.sr, .skip {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 10px 16px; background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
}

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ── The paper world ────────────────────────────────────────────────────────────────────── */
/* Same tile the app uses, same 4% on `screen`. Two fixed layers so no element carries it. */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../assets/img/kit/kit-paper.webp");
  background-repeat: repeat; background-size: 320px;
  opacity: .05; mix-blend-mode: screen;
}
.vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(17,17,16,.05) 100%);
}
header, section, footer { position: relative; z-index: 1; }

/* ══════════════════════════════════════ PRIMITIVES ══════════════════════════════════════ */

.wrap { width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto; }
.wrap.narrow { width: min(760px, 100% - var(--gut) * 2); }

/* Anton's caps fill nearly the whole em box, so anything under ~.92 collides the line above
   with the line below — the descender of a comma lands inside the next line's cap height. */
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; line-height: .93; margin: 0; }
.red { color: var(--red); }

.outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}

/* Registration marks — the archive system's signature. */
.reg { display: inline-block; width: 7px; height: 7px; background: var(--red); margin-right: 8px; vertical-align: 1px; }
.reg-sq { display: inline-block; width: .22em; height: .22em; background: var(--red); margin-left: .18em; vertical-align: .06em; }
.tick { display: inline-block; width: 3px; height: 9px; background: var(--red); margin-right: 7px; vertical-align: -1px; }

.eyebrow, .section-tick {
  font-family: var(--mono); font-size: clamp(10px, 1vw, 11px); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 18px;
}
.section-tick { position: relative; padding-left: 14px; }
.section-tick::before { content: ""; position: absolute; left: 0; top: .45em; width: 4px; height: 10px; background: var(--red); }

.h2 { font-size: clamp(38px, 7.2vw, 92px); margin: 0 0 26px; }
.h2.center { text-align: center; }

.body, .body-lg, .lede {
  font-family: var(--head); font-weight: 400; color: var(--ink-soft);
  max-width: 62ch; margin: 0 0 22px;
}
.lede    { font-size: clamp(15px, 1.35vw, 18px); line-height: 1.6; }
.body-lg { font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.65; }
.body    { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.65; }
.body b, .body-lg b, .lede strong, .body-lg strong { color: var(--ink); font-weight: 400; }
.body em, .body-lg em, .lede em { font-style: normal; color: var(--ink); border-bottom: 1.5px solid var(--red); }
.center { margin-inline: auto; text-align: center; }

/* Buttons — black block, Archivo Black caps, red corner brackets. */
.btn {
  --bk: var(--ink); --fg: var(--paper); --br: var(--red);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 30px; background: var(--bk); color: var(--fg);
  font-family: var(--head); font-size: clamp(14px, 1.15vw, 17px); letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; border: 0; border-radius: var(--r-btn);
  cursor: pointer; transition: transform .12s ease, filter .12s ease;
}
.btn.ghost { --bk: transparent; --fg: var(--ink); --br: var(--ink); box-shadow: inset 0 0 0 1.6px var(--ink); }
.btn.sm { padding: 11px 18px; font-size: 13px; }
.btn:hover { filter: brightness(1.12); }
.btn.ghost:hover { filter: none; background: rgba(17,17,16,.05); }
.btn:active { transform: scale(.975); }
.btn::before, .btn::after {
  content: ""; position: absolute; width: 11px; height: 11px; border: 2px solid var(--br); pointer-events: none;
}
.btn::before { left: 5px;  top: 5px;    border-right: 0; border-bottom: 0; }
.btn::after  { right: 5px; bottom: 5px; border-left: 0;  border-top: 0; }

/* ═══════════════════════════════════════ CHROME ═══════════════════════════════════════ */

.chrome {
  position: sticky; top: 0; z-index: 50; height: var(--chrome-h);
  display: flex; align-items: center; gap: 24px;
  padding: 12px var(--gut);
  background: rgba(244,242,237,.86);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.chrome.stuck { border-bottom-color: var(--hairline); background: rgba(244,242,237,.95); }

.wordmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.wordmark span { font-family: var(--display); font-size: 22px; letter-spacing: .01em; text-transform: uppercase; }
.wordmark.big span { font-size: clamp(34px, 5vw, 58px); }
.wordmark.big .scope { width: 26px; height: 26px; }
.scope { width: 17px; height: 17px; fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; flex: none; }
.scope.sm { width: 12px; height: 12px; }

.chrome-nav { display: flex; gap: 22px; margin-left: auto; }
.chrome-nav a {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-decoration: none; color: var(--ink-soft); padding-bottom: 2px;
  border-bottom: 1.5px solid transparent; transition: color .15s, border-color .15s;
}
.chrome-nav a:hover, .chrome-nav a.on { color: var(--ink); border-bottom-color: var(--red); }

.chrome-cta {
  font-family: var(--head); font-size: 12px; letter-spacing: .06em; text-decoration: none;
  padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: var(--r-chip);
  white-space: nowrap;
}
.chrome-cta:hover { filter: brightness(1.15); }

@media (max-width: 940px) {
  .chrome-nav { display: none; }
  .chrome-cta { margin-left: auto; }
}

/* ════════════════════════════════════════ HERO ════════════════════════════════════════ */

.hero { padding: clamp(28px, 5vh, 64px) var(--gut) 0; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 5vw, 76px); align-items: center;
  width: min(var(--wrap), 100%); margin-inline: auto;
}

.hero-h1 { font-size: clamp(52px, 9.6vw, 132px); line-height: .92; margin: 0 0 26px; }
.hero-h1 .line { display: block; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 34px; }

.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.hero-facts li { flex: 1 1 150px; padding: 14px 16px 14px 0; }
.hero-facts li + li { border-left: 1px solid var(--hairline); padding-left: 16px; }
.hero-facts b { display: block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.hero-facts span { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; margin-top: 3px; }

/* ── The hero slab ──────────────────────────────────────────────────────────────────────
   Acrylic body + printed label + the card window. Tilt and foil are driven by --mx/--my
   (pointer position, 0..1) and --tx/--ty (tilt in degrees), both set from JS. */
.hero-slab-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; perspective: 1400px; }

.slab {
  --mx: .5; --my: .35; --tx: 0deg; --ty: 0deg; --lift: 0;
  width: min(400px, 78vw); margin: 0; padding: 4.5%;
  background: linear-gradient(135deg, #FCFCFC 0%, #E5E5E5 52%, #F5F5F5 100%);
  border-radius: var(--r-card);
  box-shadow: var(--slab-shadow), inset 0 0 0 1.4px rgba(255,255,255,.92), inset 0 0 0 2.2px rgba(0,0,0,.08);
  transform: rotateX(var(--ty)) rotateY(var(--tx)) translateZ(calc(var(--lift) * 26px));
  transform-style: preserve-3d; transition: transform .18s cubic-bezier(.2,.7,.3,1);
  cursor: crosshair; position: relative;
}

.slab-label { margin: 0 0 8px; padding: 7px 9px; background: var(--paper); box-shadow: inset 0 0 0 .8px var(--hairline); }
.slab-label-top { display: flex; align-items: center; gap: 7px; }
.slab-mark { font-family: var(--display); font-size: clamp(15px, 3.4vw, 21px); letter-spacing: .01em; }
.slab-grade { margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; background: var(--ink); color: #fff; padding: 3px 8px; }
.slab-rule { height: .8px; background: var(--hairline); margin: 5px 0; }
.slab-label-bottom { display: flex; align-items: baseline; gap: 10px; }
.slab-id { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; }
.slab-detail { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; color: var(--ink-soft); }

.slab-window { position: relative; overflow: hidden; border-radius: 8px; background: #111; }
.slab-window img { width: 100%; display: block; transition: opacity .3s ease; }
.slab-window img.swap { opacity: 0; }

.slab-brackets { position: absolute; inset: 9px; pointer-events: none; }
.slab-brackets::before, .slab-brackets::after {
  content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--red);
}
.slab-brackets::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.slab-brackets::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }

.slab-note {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  line-height: 1.6; color: var(--ink-soft); max-width: 400px; margin: 0; text-align: left;
}

/* ── The foil ───────────────────────────────────────────────────────────────────────────
   Three stacked layers, exactly like the app's HoloFoil: a wide spectrum that shifts with
   the pointer, high-frequency counter-bands that move against it, and a specular glare
   that tracks the pointer directly. Composited with screen/overlay so it reads as light on
   the card rather than paint over it. */
.foil { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
.foil > * { position: absolute; inset: -20%; }

.foil-spectrum {
  background: conic-gradient(from calc(var(--mx) * 360deg) at calc(var(--mx) * 100%) calc(var(--my) * 100%),
    #ff59f2 0deg, #45c8ff 62deg, #ffe45a 128deg, #6bff9e 190deg, #ff59f2 258deg, #45c8ff 322deg, #ff59f2 360deg);
  mix-blend-mode: screen; opacity: calc(.16 + var(--lift) * .30);
  filter: blur(6px) saturate(1.5); transition: opacity .25s ease;
}
.foil-bands {
  background: repeating-linear-gradient(
    calc(76deg + var(--mx) * 26deg),
    rgba(255,255,255,.00) 0px, rgba(255,255,255,.22) 2px,
    rgba(255,255,255,.00) 5px, rgba(0,0,0,.09) 8px, rgba(255,255,255,.00) 11px);
  mix-blend-mode: overlay; opacity: calc(.30 + var(--lift) * .45);
  transform: translate3d(calc((var(--mx) - .5) * -40px), calc((var(--my) - .5) * -40px), 0);
  transition: opacity .25s ease;
}
.foil-glare {
  background: radial-gradient(38% 30% at calc(var(--mx) * 100%) calc(var(--my) * 100%),
    rgba(255,255,255,.85) 0%, rgba(255,255,255,.28) 34%, transparent 70%);
  mix-blend-mode: screen; opacity: calc(.30 + var(--lift) * .55); transition: opacity .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .slab { transition: none; }
  .foil-bands { transform: none; }
}

/* ── Marquee strip ──────────────────────────────────────────────────────────────────────── */
.hero-strip {
  margin-top: clamp(40px, 7vh, 88px);
  border-block: 1px solid var(--hairline);
  overflow: hidden; padding: 11px 0;
  /* Full-bleed out of the hero's own gutter. */
  width: 100vw; margin-inline: calc(50% - 50vw);
}
.strip-track { display: flex; gap: 44px; width: max-content; animation: strip 42s linear infinite; }
.strip-track span {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .22em; color: var(--ink-soft); white-space: nowrap;
}
.strip-track span:nth-child(even) { color: var(--red); }
@keyframes strip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; } }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Headline first, card second. Leading a narrow screen with a card and no words makes the
     first paint a pretty object nobody can identify. */
  .hero-h1 { font-size: clamp(46px, 13vw, 78px); }
  .slab { width: min(360px, 84vw); }
  .slab-note { max-width: 360px; }
}

/* ════════════════════════════════════════ BANDS ════════════════════════════════════════ */

.band { padding: var(--band-y) 0; border-top: 1px solid var(--hairline); }

/* ── The closet ledger ─────────────────────────────────────────────────────────────────── */
.ledger { margin: 34px 0 0; border: 1px solid var(--hairline); border-radius: var(--r-tray); overflow: hidden; background: var(--tray); }
.ledger-head, .ledger-row { display: grid; grid-template-columns: 190px 1fr 130px; gap: 18px; padding: 15px 20px; align-items: center; }
.ledger-head {
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .16em;
}
.ledger-head span:last-child, .ledger-row .n { text-align: right; }
.ledger-row + .ledger-row, .ledger-head + .ledger-row { border-top: 1px solid var(--hairline); }
.ledger-row .k { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.ledger-row .v { font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }
.ledger-row .n { font-family: var(--display); font-size: clamp(22px, 3vw, 34px); }
.ledger-row .n.neg { color: var(--red); }
.ledger-row.is-real { background: var(--panel); }
.ledger-row.is-real .k { color: var(--red); }

@media (max-width: 760px) {
  .ledger-head { display: none; }
  .ledger-row { grid-template-columns: 1fr auto; gap: 4px 14px; }
  .ledger-row .k { grid-column: 1; }
  .ledger-row .n { grid-column: 2; grid-row: 1 / span 2; }
  .ledger-row .v { grid-column: 1; }
}

.closet-punch { margin-top: 46px; padding-top: 30px; border-top: 3px solid var(--ink); }
.punch-line { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--ink-soft); margin: 0; }
.punch-num { font-size: clamp(56px, 12vw, 148px); line-height: .9; margin: 4px 0 14px; }
.punch-num span { color: var(--red); }
.punch-sub { max-width: 66ch; font-size: clamp(14px, 1.15vw, 16.5px); line-height: 1.62; color: var(--ink-soft); margin: 0; }
.punch-sub b { color: var(--ink); font-weight: 400; }

/* ═════════════════════════════════════════ RIP ═════════════════════════════════════════ */
/* One sticky stage read from one scalar. `--p` is 0..1 over the runway below it. */

.rip { --p: 0; position: relative; border-top: 1px solid var(--hairline); background: var(--tray); }
.rip-runway { height: 260vh; }
.rip-sticky {
  position: sticky; top: 0; height: 100vh; min-height: 620px;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; padding: 0 var(--gut);
}
.rip-stage {
  display: grid; grid-template-columns: 1fr minmax(230px, 340px) 1fr;
  gap: clamp(20px, 4vw, 60px); align-items: center;
  width: min(var(--wrap), 100%); margin-inline: auto;
}
/* Fade the intro copy out decisively. A block sitting at 45% opacity for a third of the runway
   doesn't read as "leaving" — it reads as broken grey text. */
.rip-copy.left  { opacity: calc(1 - var(--p) * 2.4); transform: translateX(calc(var(--p) * -48px)); }
.rip-copy.right { opacity: clamp(0, calc((var(--p) - .46) * 4), 1); transform: translateX(calc((1 - clamp(0, calc((var(--p) - .46) * 4), 1)) * 34px)); }

.rip-pack {
  /* THE PACK. Defaults mirror js/world.js `PACK` (image + crop) so the no-JS page tears the same
     asset; world.js overwrites these from the config when it runs. To swap the pack: change PACK
     in world.js and these four lines. */
  --pack-image: url("../assets/img/kit/pack-1-front.webp");   /* Pack 1 "Ink & Spine", Blender alpha render of the pack alone (true cutout) */
  --pack-size: 100% auto;         /* image width ÷ pack width — the render IS the pack */
  --pack-pos: 0% 0%;              /* container-relative: P = -offset / (1 - image/container) */
  --pack-aspect: 858 / 1338;
  position: relative; aspect-ratio: var(--pack-aspect); display: grid; place-items: center;
}

/* ── The pack, torn ─────────────────────────────────────────────────────────────────────
   Each half is an overflow-hidden window the size of the pack, painting the same image at the
   same offset. Two copies under complementary clip paths share their zigzag vertices exactly, so
   the halves are one object until they move apart — which is the only way a tear looks like a
   tear rather than a cut. */
.pack-half {
  position: absolute; inset: 0; z-index: 3; border-radius: 6px;
  background: var(--pack-image) no-repeat; background-size: var(--pack-size); background-position: var(--pack-pos);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.pack-half.top {
  clip-path: polygon(0 0, 100% 0, 100% 33%, 92% 29%, 84% 36%, 75% 30%, 67% 37%, 58% 29%,
                     50% 36%, 41% 30%, 33% 37%, 25% 29%, 16% 35%, 8% 30%, 0 34%);
  transform: translateY(calc(var(--p) * -128%)) rotate(calc(var(--p) * -7deg));
}
.pack-half.bottom {
  clip-path: polygon(0 34%, 8% 30%, 16% 35%, 25% 29%, 33% 37%, 41% 30%, 50% 36%, 58% 29%,
                     67% 37%, 75% 30%, 84% 36%, 92% 29%, 100% 33%, 100% 100%, 0 100%);
  transform: translateY(calc(var(--p) * 96%)) rotate(calc(var(--p) * 4deg));
}

.pulled-card {
  position: relative; z-index: 2; width: 74%; border-radius: 10px; overflow: hidden;
  box-shadow: var(--slab-shadow);
  transform: translateY(calc(30% - var(--p) * 32%)) scale(calc(.84 + var(--p) * .16));
  opacity: clamp(0, calc((var(--p) - .22) * 3.4), 1);
}
.pulled-card img { width: 100%; }
/* The glare tops out at ~.85 if it just tracks --p, which bleaches the art at exactly the
   moment the art is the point. Sweep it, then settle. */
.pulled-foil { --mx: calc(.18 + var(--p) * .64); --my: .38; --lift: calc(var(--p) * .5); }

.rip-readout { border: 1px solid var(--hairline); border-radius: var(--r-tray); background: var(--panel); padding: 18px; }
.readout-k { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--red); margin: 0; }
.readout-name { font-size: clamp(26px, 3.4vw, 44px); margin: 6px 0 8px; }
.readout-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; color: var(--ink-soft); margin: 0 0 14px; }
.readout-bar { height: 6px; background: var(--hairline); overflow: hidden; }
.readout-bar i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--red); }
.readout-foot { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-soft); margin: 10px 0 0; }

.rip-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
  color: var(--ink-soft); margin: 0; opacity: calc(1 - var(--p) * 3); white-space: nowrap;
}
.rip-hint .chev { display: inline-block; animation: nudge 1.7s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .rip-hint .chev { animation: none; } }

@media (max-width: 900px) {
  .rip-runway { height: 200vh; }
  .rip-stage { grid-template-columns: 1fr; gap: 18px; justify-items: center; }
  /* The intro copy is the one thing that can go: the pack and the readout are the section.
     Its headline is restated by the readout the moment the card lands. */
  .rip-copy.left { display: none; }
  .rip-pack { width: min(230px, 54vw); margin-inline: auto; }
  .rip-copy.right { width: min(430px, 100%); }
  .readout-name { font-size: 30px; }
}

/* ════════════════════════════════════════ DOORS ════════════════════════════════════════ */

.door-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; margin-top: 40px; border-top: 3px solid var(--ink); }
.door { padding: 26px 26px 26px 0; border-bottom: 1px solid var(--hairline); }
.door + .door { padding-left: 26px; border-left: 1px solid var(--hairline); }
.door-n { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--red); margin: 0 0 10px; }
.door-h { font-size: clamp(28px, 3.4vw, 44px); margin: 0 0 12px; }
.door-b { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; }
.door-f { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; margin: 0; }

.shot-inline { margin: 44px 0 0; max-width: 300px; }
.shot-inline img { border-radius: 22px; box-shadow: var(--slab-shadow); }
.shot-inline figcaption {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em;
  line-height: 1.6; color: var(--ink-soft); margin-top: 12px;
}

/* ══════════════════════════════════════ PROVABLY FAIR ══════════════════════════════════ */

.verifier { margin: 38px 0 46px; border: 1px solid var(--hairline); border-radius: var(--r-tray); background: var(--panel); overflow: hidden; }
.verifier-head {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 11px 18px; background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .13em;
}
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; animation: pulse 1.9s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .28; } }
@media (prefers-reduced-motion: reduce) { .live { animation: none; } }

.verifier-grid { display: grid; grid-template-columns: 1fr 1fr 110px; gap: 0; }
.vf { display: block; padding: 14px 18px; border-bottom: 1px solid var(--hairline); }
.vf + .vf { border-left: 1px solid var(--hairline); }
.vf-k { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 6px; }
.vf-k i { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: .04em; }
.vf input {
  width: 100%; padding: 9px 10px; background: var(--tray); border: 1px solid var(--hairline);
  border-radius: var(--r-chip); font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
}
.vf input:focus { background: #fff; border-color: var(--ink); outline: none; }

.verifier-out { padding: 6px 18px 14px; }
.vo-row { display: grid; grid-template-columns: 220px 1fr; gap: 14px; padding: 10px 0; align-items: baseline; border-bottom: 1px solid var(--hairline); }
.vo-row:last-child { border-bottom: 0; }
.vo-k { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-soft); }
.vo-v { font-family: var(--mono); font-size: 11.5px; word-break: break-all; line-height: 1.5; }
.vo-v.big { font-family: var(--display); font-size: clamp(24px, 3.6vw, 42px); letter-spacing: 0; color: var(--red); word-break: normal; }
.vo-row.result { padding-top: 14px; }

.verifier-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 18px 18px; }
.verifier-note { flex: 1 1 280px; font-family: var(--mono); font-size: 9.5px; line-height: 1.7; letter-spacing: .05em; color: var(--ink-soft); margin: 0; }

@media (max-width: 820px) {
  .verifier-grid { grid-template-columns: 1fr; }
  .vf + .vf { border-left: 0; }
  .vo-row { grid-template-columns: 1fr; gap: 4px; }
}

.fair-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
@media (max-width: 860px) { .fair-split { grid-template-columns: 1fr; } }

.odds-head { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 3px solid var(--ink); }
.odds-row {
  position: relative; display: grid; grid-template-columns: 1fr 60px 84px; gap: 10px;
  align-items: center; padding: 13px 0; border-bottom: 1px solid var(--hairline);
}
.o-k { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.sw { width: 4px; height: 15px; background: var(--ink); flex: none; }
.sw.secret { background: var(--red); }
.sw.ultra  { background: #C8892B; }
.sw.holo   { background: #6E8FB5; }
.o-p { font-family: var(--display); font-size: 19px; text-align: right; }
.o-n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink-soft); text-align: right; }
.o-bar { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--red); width: 0; transition: width .9s cubic-bezier(.2,.7,.3,1); }
.odds.seen .o-bar { width: calc(var(--w) * 1%); }
.odds-foot { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; line-height: 1.7; color: var(--ink-soft); margin: 14px 0 0; }

.pity-body { font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); margin: 0 0 22px; }
.pity-meter { border: 1px solid var(--hairline); border-radius: var(--r-tray); background: var(--tray); padding: 16px; }
.pity-cells { display: flex; gap: 3px; }
.pity-cells i { flex: 1; height: 16px; background: var(--hairline); }
.pity-cells i.on { background: var(--ink); }
.pity-cells i.gold { background: var(--red); }
.pity-read { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 12px 0 0; }
.pity-read b { font-family: var(--display); font-size: 22px; font-weight: 400; }
.pity-read span { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-soft); text-align: right; }

/* ═══════════════════════════════════════ PROVENANCE ═══════════════════════════════════ */

.story-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 40px; }
@media (max-width: 860px) { .story-split { grid-template-columns: 1fr; } }

.tl-slot { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 3px solid var(--ink); }
.tl { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.tl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--hairline); }
.tl li { position: relative; padding: 0 0 26px; }
.tl li::before { content: ""; position: absolute; left: -26px; top: 6px; width: 11px; height: 11px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink-soft); border-radius: 50%; }
.tl li.hot::before { box-shadow: inset 0 0 0 2px var(--red); background: var(--red); }
.tl li.cold::before { box-shadow: inset 0 0 0 2px var(--ink); background: var(--paper); }
.tl-d { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-soft); }
.tl b { display: block; font-family: var(--head); font-size: 15px; letter-spacing: .02em; margin: 3px 0 4px; }
.tl li.hot b { color: var(--red); }
.tl em { font-style: normal; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.tl-note { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; line-height: 1.7; color: var(--ink-soft); margin: 4px 0 0; }
.shot-inline.tall { margin: 0; max-width: 280px; }

/* ════════════════════════════════════════ SCREENS ════════════════════════════════════════ */

.rail {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 38px var(--gut) 14px; margin-top: 8px;
  scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--hairline); }
.phone { flex: none; width: 246px; margin: 0; scroll-snap-align: center; }
.phone img { border-radius: 22px; box-shadow: var(--slab-shadow); background: var(--paper); }
.phone figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.phone figcaption b { display: block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--ink); margin-bottom: 4px; }
.rail-hint { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--ink-soft); text-align: center; margin: 6px 0 0; }

/* ════════════════════════════════════════ CREDITS ════════════════════════════════════════ */

.pack-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin-top: 40px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--hairline); }
.pkg { padding: 26px 20px; }
.pkg + .pkg { border-left: 1px solid var(--hairline); }
.pkg.feature { background: var(--panel); }
.pkg-c { font-family: var(--display); font-size: clamp(38px, 5.2vw, 62px); line-height: .9; margin: 0; }
.pkg-k { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--ink-soft); margin: 2px 0 16px; }
.pkg-p { font-family: var(--head); font-size: 22px; margin: 0; }
.pkg-n { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--ink-soft); margin: 8px 0 0; min-height: 1.2em; }
.bonus { color: var(--red); }

.terms { margin-top: 34px; border: 1px solid var(--hairline); border-radius: var(--r-tray); background: var(--tray); padding: 20px 22px; }
.terms-h { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; margin: 0 0 14px; }
.terms ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.terms li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.terms li::before { content: ""; position: absolute; left: 0; top: .55em; width: 3px; height: 9px; background: var(--ink); }

/* ════════════════════════════════════════ THE LIST ════════════════════════════════════════ */

.list { background: var(--tray); }
.signup { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 36px 0 18px; }
.signup input[type=email] {
  flex: 1 1 320px; max-width: 420px; padding: 17px 18px; background: var(--panel);
  border: 1px solid var(--ink); border-radius: var(--r-btn);
  font-family: var(--mono); font-size: 14px; letter-spacing: .03em;
}
.signup input::placeholder { color: #A5A29B; }
.signup input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.signup.err input[type=email] { border-color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
.form-msg {
  flex: 1 0 100%; text-align: center; margin: 6px 0 0; min-height: 1.4em;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em;
}
.form-msg.ok { color: var(--ink); }
.form-msg.bad { color: var(--red); }
.list-fine { font-family: var(--mono); font-size: 10px; line-height: 1.9; letter-spacing: .06em; color: var(--ink-soft); text-align: center; margin: 0; }
.list-fine a { color: var(--ink); }

/* ════════════════════════════════════════ FOOTER ════════════════════════════════════════ */

.foot { padding: clamp(48px, 8vh, 96px) 0 28px; border-top: 1px solid var(--hairline); background: var(--ink); color: var(--paper); }
.foot .scope { stroke: var(--red); }
.foot-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px; padding-bottom: 26px; border-bottom: 1px solid rgba(244,242,237,.18); }
.foot-tag { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--red); margin: 0 0 0 auto; }

.foot-legal { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; padding: 30px 0; }
.foot-legal p { margin: 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.85; letter-spacing: .02em; color: rgba(244,242,237,.62); }
.foot-legal b { color: var(--paper); font-weight: 700; }

.foot-bar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding-top: 22px; border-top: 1px solid rgba(244,242,237,.18);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em;
  color: rgba(244,242,237,.62);
}
.foot-links { display: flex; gap: 18px; margin-inline: auto; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--red); }
.foot-id { display: inline-flex; align-items: center; gap: 8px; }
.barcode {
  width: 76px; height: 15px;
  background-image: repeating-linear-gradient(90deg,
    rgba(244,242,237,.75) 0 1.5px, transparent 1.5px 3px,
    rgba(244,242,237,.75) 3px 6px, transparent 6px 8px,
    rgba(244,242,237,.75) 8px 9px, transparent 9px 12px);
}

/* ── Reveal on scroll ───────────────────────────────────────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
[data-reveal].seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ── The film ───────────────────────────────────────────────────────────────────────────────
   The player is dressed as a slab because that is the only object in this system allowed to
   sit on top of the paper — same label plate, same shadow, same corner logic as the cards.
   A bare <video> element with default chrome would be the one un-designed rectangle on the
   page, and it sits above the fold on most screens. */

.film-frame {
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: 46px;
  align-items: start;
}

.film-slab {
  margin: 0;
  padding: 12px;
  background: linear-gradient(160deg, #ffffff 0%, #f2efe8 46%, #e7e3da 100%);
  border-radius: var(--r-btn);
  box-shadow: var(--slab-shadow), inset 0 0 0 1.4px rgba(255,255,255,.92), inset 0 0 0 2.2px rgba(0,0,0,.08);
}
.film-label { padding: 7px 9px 8px; background: var(--paper); box-shadow: inset 0 0 0 .8px var(--hairline); margin-bottom: 10px; }
.film-label-top { display: flex; align-items: center; gap: 8px; }
.film-label-bottom { display: flex; align-items: baseline; gap: 12px; }
.film-label-bottom .slab-detail { margin-left: auto; }

.film-window { position: relative; border-radius: 8px; overflow: hidden; background: #111; }
.film-window video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #111; }

/* The custom start button covers the poster until first play, then gets out of the way and
   hands control to the native player. Building a full custom transport would mean
   reimplementing keyboard access, captions and scrubbing worse than the browser does. */
.film-play {
  position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, rgba(17,17,16,.14) 0%, rgba(17,17,16,.42) 100%);
  color: var(--paper); font-family: var(--mono);
  transition: background .25s ease;
}
.film-play[hidden] { display: none; }
.film-play:hover, .film-play:focus-visible { background: linear-gradient(180deg, rgba(17,17,16,.22) 0%, rgba(17,17,16,.52) 100%); }
.film-play-tri {
  width: 74px; height: 74px; border-radius: 50%; background: var(--red);
  display: grid; place-items: center; margin-bottom: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.film-play-tri::after {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 22px solid var(--paper); border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
.film-play:hover .film-play-tri { transform: scale(1.05); }
.film-play-tri { transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.film-play-text { font-size: 15px; font-weight: 700; letter-spacing: .26em; }
.film-play-meta { font-size: 11px; letter-spacing: .2em; opacity: .78; }

.film-side .body { margin: 0 0 22px; }
.film-facts { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--hairline); }
.film-facts li { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.film-facts b {
  display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; color: var(--ink); margin-bottom: 5px;
}
.film-facts span { font-family: var(--head); font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.film-note { font-family: var(--mono); font-size: 12px; line-height: 1.7; letter-spacing: .05em; color: var(--ink-soft); margin: 0; }
.film-note a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--red); }

@media (max-width: 940px) {
  .film-frame { grid-template-columns: 1fr; gap: 30px; }
  .film-play-tri { width: 58px; height: 58px; }
  .film-play-tri::after { border-left-width: 17px; border-top-width: 11px; border-bottom-width: 11px; }
  .film-play-text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .film-play-tri { transition: none; } }

/* First-pool landing: existing paper, type, foil and slab materials. */
.pilot-hero .hero-h1 { font-size: clamp(42px, 5.5vw, 80px); line-height: 1.02; }
.pilot-hero .lede { max-width: 42ch; }
.pilot-hero .signup { justify-content: flex-start; margin: 22px 0 8px; }
.pilot-hero .signup input[type=email] { flex: 1 1 200px; min-width: 0; }
.pilot-hero .signup .btn { font-size: 11px; }
.pilot-hero .form-msg { text-align: left; }
.pilot-note { font-family: var(--mono); font-size: 10px; line-height: 1.7; color: var(--ink-soft); }
.pilot-proof { display: inline-block; margin-top: 16px; font-size: 12px; text-underline-offset: 4px; }
.pilot-lore { margin-top: 28px; color: var(--ink-soft); font-size: 15px; }
.pilot-lore strong { color: var(--ink); }
.pool-action { display: flex; justify-content: center; margin: 26px 0 18px; }
.pilot-faq { margin-top: 44px; text-align: left; border-top: 1px solid var(--hairline); }
.pilot-faq details { border-bottom: 1px solid var(--hairline); }
.pilot-faq summary { cursor: pointer; padding: 20px 0; font-size: 14px; font-family: var(--head); }
.pilot-faq details > p { font-size: 13px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 22px; }
.pilot-faq .verifier { margin-bottom: 24px; }
.pilot-legal { max-width: 80ch; font-family: var(--mono); font-size: 10px; line-height: 1.8; opacity: .65; }
@media (max-width: 600px) {
  .chrome { gap: 10px; }
  .chrome .wordmark span { font-size: 18px; }
  .chrome .scope { display: none; }
  .chrome-cta { font-size: 9px; padding: 12px 10px; letter-spacing: .02em; }
  .pilot-hero .hero-h1 { font-size: clamp(32px, 9.5vw, 56px); }
  .pilot-hero .hero-copy { min-width: 0; }
  .pilot-hero .signup .btn { width: 100%; }
  .pilot-faq .verifier-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════ THE WORLD ═══════════════════════════════════════
   js/world.js draws the vault behind the hero and the rip on this fixed canvas. Without it (no
   JS, no WebGL, `WORLD_ENABLED = false`) the canvas is invisible and the page is the paper page
   it always was. `has-world` on <html> is set only after the first frame has rendered. */
#world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: none; opacity: 1; }
html.has-world #world { display: block; }
html.has-world body { background: var(--paper); }
html.has-world .vignette { display: none; }
html.has-world .grain { opacity: .07; }

/* Hero, in the dark. Same type, same red, paper ink. */
html.has-world .pilot-hero { color: var(--paper); }
html.has-world .pilot-hero .eyebrow { color: rgba(244,242,237,.62); }
html.has-world .pilot-hero .hero-h1 { color: var(--paper); text-shadow: 0 2px 30px rgba(0,0,0,.45); }
html.has-world .pilot-hero .outline { -webkit-text-stroke: 1.5px rgba(244,242,237,.92); color: transparent; }
html.has-world .pilot-hero .lede { color: rgba(244,242,237,.78); }
html.has-world .pilot-hero .signup input[type=email] {
  background: rgba(244,242,237,.06); border-color: rgba(244,242,237,.38); color: var(--paper);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
html.has-world .pilot-hero .signup input::placeholder { color: rgba(244,242,237,.42); }
html.has-world .pilot-hero .signup input:focus { box-shadow: inset 0 0 0 1.5px var(--paper); }
html.has-world .pilot-hero .signup .btn { --bk: var(--red); --fg: var(--paper); --br: var(--paper); }
html.has-world .pilot-hero .form-msg.ok { color: var(--paper); }
html.has-world .pilot-note { color: rgba(244,242,237,.6); }
html.has-world .pilot-proof { color: var(--paper); text-decoration-color: var(--red); }
html.has-world .slab-note { color: rgba(244,242,237,.62); }
html.has-world .slab-label, html.has-world .slab-label .slab-detail { color: var(--ink); }
html.has-world .slab-label .slab-detail { color: var(--ink-soft); }
html.has-world .slab { box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1.4px rgba(255,255,255,.92), inset 0 0 0 2.2px rgba(0,0,0,.08); }

/* Text protection: the copy sits in its own pool of dark so slabs passing behind it never fight
   the type. A blurred radial scrim, inside the section's stacking context so it stays above the
   canvas and below the words. */
html.has-world .pilot-hero .hero-copy, html.has-world .rip-copy.left { position: relative; z-index: 0; }
html.has-world .pilot-hero .hero-copy::before, html.has-world .rip-copy.left::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -18% -14% -30%; pointer-events: none;
  background: radial-gradient(ellipse at 38% 48%, rgba(10,10,11,.92) 0%, rgba(10,10,11,.74) 42%, rgba(10,10,11,0) 78%);
  filter: blur(18px);
}
html.has-world .pilot-hero .signup input[type=email] { background: rgba(10,10,11,.58); }

/* Chrome over the world: a dark bar, paper type, the CTA in red so it still has contrast. */
html.has-world .chrome { background: rgba(10,10,11,.42); color: var(--paper); backdrop-filter: blur(14px) saturate(1.1); }
html.has-world .chrome.stuck { background: rgba(10,10,11,.72); border-bottom-color: rgba(244,242,237,.12); }
html.has-world .chrome-nav a { color: rgba(244,242,237,.66); }
html.has-world .chrome-nav a:hover, html.has-world .chrome-nav a.on { color: var(--paper); }
html.has-world .chrome-cta { background: var(--red); color: var(--paper); }
/* …and back to paper the moment the doors section reaches the bar. */
html.has-world .chrome.on-paper { background: rgba(244,242,237,.95); color: var(--ink); border-bottom-color: var(--hairline); }
html.has-world .chrome.on-paper .chrome-nav a { color: var(--ink-soft); }
html.has-world .chrome.on-paper .chrome-nav a:hover, html.has-world .chrome.on-paper .chrome-nav a.on { color: var(--ink); }
html.has-world .chrome.on-paper .chrome-cta { background: var(--ink); color: var(--paper); }

/* The rip stage stands in the world; its copy goes paper, the readout stays a printed card. */
html.has-world .rip { background: transparent; border-top-color: rgba(244,242,237,.1); }
html.has-world .rip-copy.left .h2 { color: var(--paper); }
html.has-world .rip-copy.left .body { color: rgba(244,242,237,.72); }
html.has-world .section-tick { color: rgba(244,242,237,.6); }
html.has-world .doors .section-tick, html.has-world .packs .section-tick, html.has-world .app .section-tick, html.has-world .list .section-tick, html.has-world .faq .section-tick { color: var(--ink-soft); }
html.has-world .rip-hint { color: rgba(244,242,237,.62); }
html.has-world .pack-half { filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)); }

/* Paper resumes here, whatever the canvas is still doing underneath. */
html.has-world .doors { background: var(--paper); }

/* ══════════════════════════════ LEGAL / DOC PAGES + 404 ══════════════════════════════ */
/* Lived as an identical <style> block on support/privacy/terms; moved here so the pages carry no
   inline CSS and the Content-Security-Policy can say style-src 'self'. */
.doc { padding: 140px 0 90px; }
.doc h1 { font-size: clamp(44px, 8vw, 96px); margin-bottom: 10px; }
.doc .updated { margin-bottom: 42px; }
.doc h2 { font-family: var(--display); text-transform: uppercase; font-weight: 400;
          font-size: clamp(22px, 3vw, 30px); letter-spacing: -.01em; margin: 44px 0 10px; }
.doc p, .doc li { margin: 0 0 14px; }
.doc ul { padding-left: 20px; }
.doc .rule { height: 1px; background: var(--hairline); border: 0; margin: 36px 0; }
.doc a { color: var(--ink); }
.doc .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ══════════════════════════════ APP STORE FLIP (JS-inserted) ══════════════════════════════ */
.store-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 30px 0 14px; }
.app-badge img { display: block; height: 53px; width: auto; }
.app-badge:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 8px; }


/* ── Hero: the typed word ─────────────────────────────────────────────────────────────── */
.typed { color: var(--red); white-space: nowrap; }
.typed::after {
  content: ""; display: inline-block; width: .07em; height: .78em; margin-left: .06em;
  background: var(--red); vertical-align: -.02em; animation: caret 1.05s steps(1, end) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .typed::after { display: none; } }
html.has-world .pilot-hero .typed { text-shadow: none; }

/* ── The packs ───────────────────────────────────────────────────────────────────────── */
.mono-inline { font-family: var(--mono); font-size: .82em; font-weight: 700; letter-spacing: .1em; color: var(--ink); white-space: nowrap; }
.pack-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: 44px; align-items: start; }
.pack-col img { display: block; width: min(210px, 58%); height: auto; margin: 0 auto 22px; filter: drop-shadow(0 22px 34px rgba(0,0,0,.32)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.pack-col:hover img { transform: translateY(-6px) rotate(-1.2deg); }
.pack-col.closed img { filter: drop-shadow(0 22px 34px rgba(0,0,0,.32)) saturate(.55) brightness(.9); }
.rung { border-top: 3px solid var(--ink); padding: 16px 0 6px; }
.rung + .rung { border-top-width: 1px; border-top-color: var(--hairline); margin-top: 18px; }
.rung-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.rung-name { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); margin: 0; letter-spacing: .01em; }
.rung-price { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--red); white-space: nowrap; }
.rung-tag { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; padding: 5px 8px; border: 1px solid var(--ink); white-space: nowrap; }
.rung-b { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 12px; }
.pack-col .odds-row { padding: 9px 0; grid-template-columns: 1fr 52px 84px; }
.pack-col .o-p { font-size: 17px; }
.pack-col .odds-foot { margin-top: 12px; }
.stamps-note { margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); max-width: 78ch; }
.stamps-note strong { color: var(--ink); }
.stamps-note a { color: var(--ink); text-underline-offset: 4px; }

/* ── The app ─────────────────────────────────────────────────────────────────────────── */
.app { background: var(--tray); }
.app .door-row { margin-top: 36px; }
@media (max-width: 720px) { .pack-col img { width: min(180px, 52%); } }

/* The typed line stands alone so a long card name never collides with the slab; the zero-width
   space in the HTML keeps the line's height while the word is being retyped. */
.hero-h1 .typed-line { color: var(--red); }


/* ── Hero fact row ────────────────────────────────────────────────────────────────────── */
.facts { list-style: none; display: grid; grid-template-columns: repeat(4, auto); gap: 6px 26px; margin: 22px 0 18px; padding: 0; }
.facts li { display: grid; gap: 2px; }
.facts b { font-family: var(--display); font-weight: 400; font-size: clamp(18px, 1.7vw, 24px); letter-spacing: .01em; }
.facts span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--ink-soft); }
html.has-world .pilot-hero .facts span { color: rgba(244,242,237,.6); }
@media (max-width: 720px) { .facts { grid-template-columns: repeat(2, auto); } }

/* ── How it works ─────────────────────────────────────────────────────────────────────── */
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 3px solid var(--ink); counter-reset: step; }
.step { padding: 24px 24px 24px 0; border-bottom: 1px solid var(--hairline); }
.step + .step { padding-left: 24px; border-left: 1px solid var(--hairline); }
.step-n { font-family: var(--display); font-size: clamp(40px, 4.6vw, 64px); line-height: 1; color: var(--red); margin: 0 0 14px; }
.step-h { font-size: clamp(22px, 2.2vw, 30px); margin: 0 0 10px; }
.step-b { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ── Packs as price cards ─────────────────────────────────────────────────────────────── */
.pk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 40px; }
.pk { border: 1px solid var(--hairline); border-radius: var(--r-tray); background: var(--tray); padding: 26px 22px 22px; display: grid; grid-template-rows: auto 1fr; }
.pk img { display: block; width: min(150px, 60%); height: auto; margin: 0 auto 18px; filter: drop-shadow(0 18px 28px rgba(0,0,0,.28)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.pk:hover img { transform: translateY(-5px) rotate(-1.2deg); }
.pk.closed img { filter: drop-shadow(0 18px 28px rgba(0,0,0,.28)) saturate(.5) brightness(.9); }
.pk-name { font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 4px; }
.pk-price { font-family: var(--display); font-size: clamp(30px, 3vw, 40px); line-height: 1; color: var(--red); margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pk-price span { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--ink-soft); }
.pk-price .rung-tag { color: var(--ink); }
.pk-tag { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 14px; }
.pk-floor { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--ink); padding: 8px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--hairline); margin: 0 0 6px; }
.pk-odds { list-style: none; margin: 0; padding: 0; }
.pk-odds li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.pk-tier { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.pk-odds b { font-family: var(--display); font-size: 20px; font-weight: 400; }
.pk-fine { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; line-height: 1.7; color: var(--ink-soft); margin: 12px 0 0; }

/* ── Trust band: ink on ink ───────────────────────────────────────────────────────────── */
.trust { background: var(--ink); color: var(--paper); border-top: 0; }
.trust .section-tick { color: rgba(244,242,237,.62); }
.trust .h2 .red { color: var(--red); }
.trust-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin-top: 40px; border-top: 3px solid var(--paper); }
.tr { padding: 24px 24px 24px 0; border-bottom: 1px solid rgba(244,242,237,.16); }
.tr + .tr { padding-left: 24px; border-left: 1px solid rgba(244,242,237,.16); }
.tr-h { font-size: clamp(20px, 2vw, 26px); margin: 0 0 10px; }
.tr-b { font-size: 14px; line-height: 1.6; color: rgba(244,242,237,.72); margin: 0; }
.tr-b a { color: var(--paper); text-underline-offset: 4px; text-decoration-color: var(--red); }
html.has-world .trust .section-tick { color: rgba(244,242,237,.62); }
html.has-world .how .section-tick { color: var(--ink-soft); }

/* ── Steps strip (inside HOW IT WORKS / YOUR PULL) ────────────────────────────────────── */
.steps-strip { list-style: none; margin: 30px 0 30px; padding: 16px 0 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--hairline); }
.steps-strip li { display: grid; gap: 4px; }
.ss-n { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .2em; color: var(--red); }
.ss-h { font-family: var(--display); font-size: clamp(20px, 2.2vw, 28px); line-height: 1; letter-spacing: .01em; }
.ss-b { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 720px) { .steps-strip { grid-template-columns: 1fr; gap: 14px; } }
.doors .door-row { margin-top: 18px; }

/* ── FAQ at the bottom ────────────────────────────────────────────────────────────────── */
.faq { background: var(--tray); }
.faq .pilot-faq { margin-top: 26px; }

.pk-price { margin-bottom: 8px; }
.pk-tag { font-size: 14.5px; color: var(--ink); margin: 0 0 12px; }
.pk-odds { border-top: 2px solid var(--ink); }

/* ── Four steps + plain doors ──────────────────────────────────────────────────────────── */
.steps-strip.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .steps-strip.four { grid-template-columns: repeat(2, 1fr); } }
.door-row.plain { border-top: 0; margin-top: 0; }
.door-row.plain .door { padding-top: 18px; }
.door-row.plain .door-h { font-size: clamp(20px, 2.2vw, 28px); }

/* ── The pack ────────────────────────────────────────────────────────────────────────── */
.pack-hero { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 36px; padding: 28px; border: 1px solid var(--hairline); border-radius: var(--r-tray); background: var(--tray); }
.pack-hero img { width: 100%; max-width: 260px; height: auto; margin: 0 auto; display: block; filter: drop-shadow(0 26px 40px rgba(0,0,0,.32)); }
.pack-hero .pk-price { font-size: clamp(40px, 4.4vw, 56px); }
.bundles { list-style: none; margin: 18px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bundles li { display: grid; gap: 2px; padding: 12px 10px; border: 1px solid var(--hairline); background: var(--paper); text-align: center; }
.bundles b { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2vw, 26px); }
.bundles span { font-family: var(--mono); font-size: 8px; letter-spacing: .14em; color: var(--ink-soft); }
.bundles em { font-style: normal; font-family: var(--display); color: var(--red); font-size: 18px; margin-top: 4px; }
.bundles i { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--ink-soft); }
@media (max-width: 720px) { .pack-hero { grid-template-columns: 1fr; } .bundles { grid-template-columns: repeat(2, 1fr); } }
.specials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 18px; }
.special { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; padding: 18px; border: 1px solid var(--hairline); border-radius: var(--r-tray); }
.special img { width: 84px; height: auto; filter: drop-shadow(0 12px 18px rgba(0,0,0,.28)) saturate(.7); }
.special h3 { grid-column: 2; margin: 0 0 4px; font-size: 20px; }
.special p { grid-column: 2; margin: 0; }
.special img { grid-row: 1 / span 2; }

/* ── TestFlight beta button + the email fallback ─────────────────────────────────────── */
.beta-row { display: grid; gap: 8px; margin: 26px 0 14px; }
.btn.tf { justify-content: center; }
.beta-note { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--ink-soft); margin: 0; }
html.has-world .pilot-hero .beta-note { color: rgba(244,242,237,.6); }
.or-line { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: var(--ink-soft); }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
html.has-world .pilot-hero .or-line { color: rgba(244,242,237,.55); }
html.has-world .pilot-hero .or-line::before, html.has-world .pilot-hero .or-line::after { background: rgba(244,242,237,.18); }
html.has-world .pilot-hero .signup .btn.ghost { --fg: var(--paper); --br: var(--paper); box-shadow: inset 0 0 0 1.6px rgba(244,242,237,.9); background: transparent; }
.pilot-hero .signup { margin-top: 10px; }
.form-msg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pool-action { gap: 10px; flex-wrap: wrap; }