/* ═══════════════════════════════════════════════════════════════════════════════════════════
   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.ttf") format("truetype");        font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo Black"; src: 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.ttf") format("truetype");    font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono";   src: 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 {
  -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;
  overflow-x: hidden;
  -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; }

.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 { position: relative; aspect-ratio: 700 / 1050; display: grid; place-items: center; }

/* ── The drawn pack ─────────────────────────────────────────────────────────────────────── */
/* Two copies of the same face under complementary clip paths. The two polygons 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; }
.pack-half.top {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 92% 46%, 84% 53%, 75% 47%, 67% 54%, 58% 46%,
                     50% 53%, 41% 47%, 33% 54%, 25% 46%, 16% 52%, 8% 47%, 0 51%);
  transform: translateY(calc(var(--p) * -128%)) rotate(calc(var(--p) * -7deg));
}
.pack-half.bottom {
  clip-path: polygon(0 51%, 8% 47%, 16% 52%, 25% 46%, 33% 54%, 41% 47%, 50% 53%, 58% 46%,
                     67% 54%, 75% 47%, 84% 53%, 92% 46%, 100% 50%, 100% 100%, 0 100%);
  transform: translateY(calc(var(--p) * 96%)) rotate(calc(var(--p) * 4deg));
}

.pack-face {
  position: absolute; inset: 0; border-radius: 8px; overflow: hidden;
  background:
    radial-gradient(120% 70% at 22% 12%, rgba(255,255,255,.16), transparent 58%),
    linear-gradient(168deg, #24232A 0%, #0C0C0E 44%, #17161C 72%, #08080A 100%);
  box-shadow: var(--slab-shadow);
}
.pack-spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 13%; transform: translateX(-50%); background: linear-gradient(180deg, var(--red), #8E0F0C); opacity: .92; }
.pack-mark {
  position: absolute; left: 0; right: 0; top: 27%; text-align: center;
  font-family: var(--display); font-size: clamp(18px, 2.4vw, 30px); letter-spacing: .06em; color: #fff;
  mix-blend-mode: screen;
}
.pack-sub { position: absolute; left: 0; right: 0; top: 37%; text-align: center; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .28em; color: rgba(255,255,255,.62); }
.pack-serial { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font-family: var(--mono); font-size: 9px; letter-spacing: .22em; color: rgba(255,255,255,.42); }
/* Crimped seals: the sawtooth a real foil pack is heat-sealed with. */
.pack-crimp {
  position: absolute; left: 0; right: 0; height: 5.5%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.20) 0 2px, rgba(0,0,0,.55) 2px 6px);
}
.pack-crimp.t { top: 0; }
.pack-crimp.b { bottom: 0; }

.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; }
}