/* ============================================================================
   BACKED — style.css

   One stylesheet. Two type families, both VENDORED as variable WebFonts (no
   runtime CDN, no third-party request from this page at all):

     · Cormorant Garamond — the display face. A high-contrast old-style serif:
       the letterforms have the same relationship between a thick and a thin that
       a struck coin has between its field and its relief. Used at 300–500 and
       never below 20px, because a face this fine closes up at label sizes.
     · Jost — everything else. A geometric grotesk in the Futura line: the
       reading face at 16–18px, and the same face tracked out in caps for labels,
       chips, buttons and every number. Not Inter, not Space Grotesk.

   THE COLOUR SET IS THE ARTWORK'S OWN, and it is not picked by eye: every value
   below with a render name beside it was measured by tools/build-data.mjs out of
   the corners of the actual 1080px renders and is sitting in public/data.json.
       Void        #0a0b12   the near-black field the coins are shot against
       Velvet Tray #883047   the wine backdrop
       Wood Desk   #b68a5b   warm oak
       Felt        #60a579   billiard green
       Marble      #d1d3d2   the one light backdrop
   The golds are lifted off the coins themselves.

   MOTION: pointer parallax on the hero (five layers, five rates), one slow light
   sweep across the coin's face, a scroll-driven diagram, and scroll reveals.
   Every one of them is switched off under prefers-reduced-motion — including the
   grain, whose animation is the only thing on this page that would keep moving
   with nobody touching it.
   ========================================================================= */

@font-face {
  font-family: "Cormorant";
  src: url("vendor/cormorant-var.woff2") format("woff2-variations");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("vendor/cormorant-var-italic.woff2") format("woff2-variations");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("vendor/jost-var.woff2") format("woff2-variations");
  font-weight: 300 600; font-style: normal; font-display: swap;
}

:root {
  /* the field */
  --void: #08090f;
  --void-2: #0b0c14;
  --void-3: #101119;
  --panel: rgba(17, 18, 26, .84);
  --panel-solid: #14151e;
  --line: #22232f;
  --line-2: #32333f;

  /* the ink */
  --ivory: #f4efe4;
  --ink: #cec8ba;
  --muted: #8b8577;
  --muted-2: #6b665c;

  /* the metal */
  --gold: #e0b972;
  --gold-hi: #f6e3b6;
  --gold-dim: #a97d3c;
  --gold-deep: #6d4f22;

  /* the backdrops, measured off the renders */
  --wine: #883047;
  --wine-deep: #39121d;
  --oak: #b68a5b;
  --felt: #60a579;

  --ok: #7fc79a;
  --warn: #d9a84e;
  --bad: #c96a5e;

  --display: "Cormorant", "Iowan Old Style", Georgia, serif;
  --ui: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --wrap: 1280px;
  --pad: 28px;
  --r: 2px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--void);
  color: var(--ink);
  font: 300 17px/1.72 var(--ui);
  letter-spacing: .003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }
b, strong { font-weight: 500; color: var(--ivory); }
em { font-style: italic; }

::selection { background: var(--gold-dim); color: #0b0b0b; }

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

.skip {
  position: fixed; left: -9999px; top: 8px; z-index: 200;
  background: var(--gold); color: #10100c; padding: 10px 16px;
  font: 500 12px/1 var(--ui); letter-spacing: .16em;
}
.skip:focus { left: 8px; }

.mono { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ grain
   A single repeating SVG noise tile at very low opacity, drifting one tile's
   width over 8 s. It is what stops the big flat gradients from banding on a
   cheap panel, and it is the reason the deep backgrounds read as velvet rather
   than as #000000. */
.grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: drift 8s steps(6) infinite;
}
@keyframes drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(160px, 160px); }
}

/* ================================================================= HEADER */

.top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 28px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: linear-gradient(180deg, rgba(8, 9, 15, .94), rgba(8, 9, 15, .72) 70%, rgba(8, 9, 15, 0));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .045);
}
.wordmark { display: block; flex: none; }
.wm {
  font: 500 20px/1 var(--ui); letter-spacing: .42em; color: var(--ivory);
  padding-left: 2px;
}
.wordmark:hover .wm { color: var(--gold-hi); }

.topnav { display: flex; gap: 22px; margin-left: auto; }
.topnav a {
  font: 400 11px/1 var(--ui); letter-spacing: .2em; color: var(--muted);
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.topnav a:hover { color: var(--ivory); border-bottom-color: var(--gold-dim); }

.topchips { display: flex; gap: 10px; margin: 0; flex: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px;
  font: 400 10.5px/1 var(--ui); letter-spacing: .16em; color: var(--muted);
  white-space: nowrap;
}
.chip-go { color: var(--ink); }
.chip-go:hover { border-color: var(--gold-dim); color: var(--ivory); }
.chip-go b { color: var(--gold); font-weight: 500; }

.led { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); flex: none; }
.led.on { background: var(--ok); box-shadow: 0 0 8px rgba(127, 199, 154, .8); }
.led.blink { background: var(--gold); box-shadow: 0 0 8px rgba(224, 185, 114, .7); animation: pulse 2.4s var(--ease) infinite; }
.led.hot { background: var(--bad); box-shadow: 0 0 8px rgba(201, 106, 94, .8); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ============================================================ TYPE SCALE */

.h-display {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(40px, 6.4vw, 82px);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--ivory);
  margin: 0 0 22px;
}
.h-display em { color: var(--gold-hi); font-style: italic; }

.eyebrow {
  font: 400 10.5px/1.4 var(--ui); letter-spacing: .28em;
  color: var(--gold-dim); margin: 0 0 18px; text-transform: uppercase;
}

.lede { font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.74; color: var(--ink); margin: 0 0 18px; max-width: 46ch; }
.lede-wide { max-width: 62ch; }

/* ================================================================== HERO */

.hero {
  position: relative; z-index: 2;
  min-height: calc(100svh - 58px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(336px, .58fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(40px, 7vh, 96px) clamp(16px, 4vw, 40px) 92px;
  max-width: var(--wrap); margin: 0 auto;
  overflow: hidden;
}

/* ---- the parallax stage -------------------------------------------------
   Five layers. The pointer writes --px and --py (each −1…1) onto .hero and
   every layer moves by its own multiple of them, so the coin, the light under
   it and its shadow separate as you move — the cheapest possible illusion of an
   object sitting in a room rather than a picture pasted on a page.
   --ty is written by the scroll handler and pushes the whole stage up as the
   hero leaves, which is the other half of the parallax. */
/* 68%, not 50%: the coin belongs BEHIND the mint panel, with its left edge
   clear of the copy column. Centring it put a bright gold field straight under
   the headline's descenders — which the first screenshot pass showed and no
   amount of scrim was going to fix. */
.stage {
  position: absolute; z-index: -1;
  left: 55%; top: 50%;
  width: min(80vh, 700px); aspect-ratio: 1;
  transform: translate3d(-50%, calc(-50% + var(--ty, 0px)), 0);
  pointer-events: none;
}
.stage-field {
  position: absolute; inset: -22%;
  background:
    radial-gradient(58% 58% at 50% 44%, var(--field, #1a1c26) 0%, rgba(10, 11, 18, .55) 52%, rgba(8, 9, 15, 0) 76%);
  transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 8px), 0);
  transition: background .9s var(--ease);
}
.stage-glow {
  position: absolute; left: 50%; top: 52%;
  width: 78%; aspect-ratio: 1; margin: -39% 0 0 -39%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(224, 185, 114, .26), rgba(224, 185, 114, .06) 46%, transparent 70%);
  filter: blur(14px);
  transform: translate3d(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -12px), 0);
}
.stage-coin {
  position: absolute; inset: 6%;
  border-radius: 50%;
  overflow: hidden;
  transform: translate3d(calc(var(--px, 0) * 26px), calc(var(--py, 0) * 20px), 0)
             rotate(calc(var(--px, 0) * .6deg));
  animation: float 11s ease-in-out infinite;
  will-change: transform;
}
.stage-coin img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s var(--ease);
}
.stage-coin img.in { opacity: 1; }
@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
/* the light sweep: one soft diagonal band crossing the coin's face, clipped by
   the round .stage-coin, on a long loop */
.stage-sweep {
  position: absolute; inset: -30%;
  background: linear-gradient(104deg,
    transparent 34%, rgba(255, 248, 230, .015) 43%, rgba(255, 250, 236, .13) 50%,
    rgba(255, 248, 230, .015) 57%, transparent 66%);
  transform: translateX(-60%);
  animation: sweep 9s var(--ease) infinite;
  mix-blend-mode: screen;
}
@keyframes sweep {
  0%, 62% { transform: translateX(-72%); }
  100% { transform: translateX(72%); }
}
.stage-shadow {
  position: absolute; left: 50%; bottom: 2%;
  width: 62%; height: 8%; margin-left: -31%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .72), transparent 72%);
  filter: blur(9px);
  transform: translate3d(calc(var(--px, 0) * -34px), calc(var(--py, 0) * 6px), 0);
}

.hero-copy { position: relative; z-index: 3; max-width: 31rem; }
.hero-copy .lede { max-width: 36ch; }
.hero-copy::before {
  /* a scrim, so the copy stays readable wherever the coin happens to be */
  content: ""; position: absolute; inset: -8% -22% -8% -40%;
  background: radial-gradient(76% 66% at 24% 50%, rgba(8, 9, 15, .96), rgba(8, 9, 15, .8) 56%, rgba(8, 9, 15, .2) 84%, transparent);
  z-index: -1; pointer-events: none;
}

.hero-nums {
  list-style: none; margin: 34px 0 26px; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hero-nums li { padding: 17px 14px 15px 0; }
.hero-nums .k { display: block; font: 400 9.5px/1.4 var(--ui); letter-spacing: .2em; color: var(--muted-2); margin-bottom: 8px; }
.hero-nums .v {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(25px, 2.5vw, 33px); line-height: 1.05; color: var(--gold-hi);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  transition: color .3s var(--ease);
}
.hero-nums .v.unknown { color: var(--muted-2); }
.hero-nums .u { display: block; margin-top: 7px; font: 400 10px/1.4 var(--ui); letter-spacing: .14em; color: var(--muted); }
.hero-nums .u i { font-style: normal; color: var(--muted-2); }

.hero-foot { font-size: 13.5px; line-height: 1.66; color: var(--muted); max-width: 44ch; margin: 0; }

/* The one-line version of the lede. It exists for the PHONE order — headline,
   one line, the coin, the panel — and is never shown at a width where the full
   lede already fits beside the coin. */
.hero-one { display: none; }

.scrollhint {
  position: absolute; left: clamp(16px, 4vw, 40px); bottom: 26px;
  display: flex; align-items: center; gap: 12px; margin: 0;
  font: 400 9.5px/1 var(--ui); letter-spacing: .24em; color: var(--muted-2);
}
.scrollhint i {
  display: block; width: 46px; height: 1px; background: linear-gradient(90deg, var(--gold-dim), transparent);
  animation: reach 2.8s var(--ease) infinite;
  transform-origin: left;
}
@keyframes reach { 0%, 100% { transform: scaleX(.4); opacity: .4; } 50% { transform: scaleX(1); opacity: 1; } }

/* ================================================================ PANELS */

.panel {
  position: relative; z-index: 4;
  background: var(--panel);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 3px;
  padding: 26px 26px 22px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.panel::after {
  /* a hairline of gold along the top edge — the only "chrome" on the page */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 185, 114, .5), transparent);
}
.panel-k { margin: 0 0 18px; font: 400 10px/1 var(--ui); letter-spacing: .3em; color: var(--gold-dim); }

.mint-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.mint-price b, .mint-count b { font-family: var(--display); font-weight: 400; font-size: 27px; color: var(--ivory); font-variant-numeric: tabular-nums; }
/* nowrap on BOTH the row and the caption: the caption alone was not enough,
   because the flex item itself was being squeezed to min-content and breaking
   "6 / 60 MINTED" over four lines. */
.mint-price, .mint-count { margin: 0; white-space: nowrap; flex: none; }
.mint-count { text-align: right; }
/* width: max-content is doing the real work here. A block caption inside a
   shrink-to-fit flex item takes the ITEM's width, which is set by the big
   number above it — so "/ 60 MINTED" was being broken over three lines under a
   43px-wide "6" even with white-space: nowrap set on every box involved. */
.mint-price > span, .mint-count > span {
  display: block; width: max-content; font: 400 9.5px/1.6 var(--ui);
  letter-spacing: .17em; color: var(--muted-2); white-space: nowrap;
}
.mint-count > span { margin-left: auto; }
.mint-count b.unknown, .mint-price b.unknown { color: var(--muted-2); }

.bar { height: 2px; background: rgba(255, 255, 255, .09); overflow: hidden; margin-bottom: 20px; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .8s var(--ease); }

.mint-state {
  margin: 0 0 18px; padding: 14px 15px;
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--line-2);
  font-size: 14.5px; line-height: 1.6; color: var(--ink);
  min-height: 68px;
}
.mint-state b { color: var(--ivory); }
.mint-state.ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.mint-state.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.mint-state.bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: rgba(201, 106, 94, .06); }
.mint-state.wait { border-color: color-mix(in srgb, var(--gold-dim) 55%, transparent); }

.btn {
  display: block; width: 100%; cursor: pointer;
  border: 1px solid var(--gold-dim); border-radius: 2px;
  background: linear-gradient(180deg, rgba(224, 185, 114, .16), rgba(224, 185, 114, .05));
  color: var(--gold-hi);
  font: 500 12.5px/1 var(--ui); letter-spacing: .2em;
  padding: 16px 14px;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .12s var(--ease);
}
.btn:hover:not(:disabled) { background: var(--gold); color: #14110a; border-color: var(--gold); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: .45; }
.btn.is-dead { border-color: var(--line-2); color: var(--muted); background: none; }
.btn.is-wait { border-color: var(--gold-dim); color: var(--gold-dim); background: none; }
.btn[hidden] { display: none; }

.btn-ghost { border-color: var(--line-2); color: var(--ink); background: none; width: auto; padding: 12px 20px; }
.btn-ghost:hover:not(:disabled) { border-color: var(--gold-dim); background: rgba(224, 185, 114, .1); color: var(--gold-hi); }

.buy-row { margin-top: 12px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: stretch; }
.buy-row[hidden] { display: none; }
.stepper { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 2px; }
.stepper button {
  width: 40px; height: 100%; min-height: 48px; cursor: pointer;
  background: none; border: 0; color: var(--ink); font: 300 20px/1 var(--ui);
  transition: color .2s var(--ease);
}
.stepper button:hover:not(:disabled) { color: var(--gold-hi); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper b { min-width: 26px; text-align: center; font: 400 17px/1 var(--ui); color: var(--ivory); font-variant-numeric: tabular-nums; }
.btn-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.btn-buy small { font: 400 11px/1 var(--ui); letter-spacing: .1em; opacity: .8; }
.buy-k { grid-column: 1 / -1; margin: 2px 0 0; font: 400 10.5px/1.5 var(--ui); letter-spacing: .1em; color: var(--muted-2); }
.buy-row.is-primary .btn-buy { border-color: var(--gold); background: linear-gradient(180deg, rgba(224, 185, 114, .3), rgba(224, 185, 114, .12)); }

.mint-msg { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); min-height: 22px; }
.mint-msg.ok { color: var(--ok); }
.mint-msg.err { color: var(--bad); }
.tx { margin: 8px 0 0; font: 400 10.5px/1.5 var(--ui); letter-spacing: .1em; color: var(--muted-2); }
.tx[hidden] { display: none; }
.panel-foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font: 400 9.5px/1.6 var(--ui); letter-spacing: .16em; color: var(--muted-2); }


/* ============================================================ THE VAULT DOOR
   Every "wait" in the mint panel is this one object: a steel door with a
   combination dial, and the FREE claim button behind it. The dial turns back
   one notch per L1 block (~12 s); the door cracks open as the notches run out
   and swings clear at zero. The paid BUY row is NOT in here — a paid mint
   ignores the gate, so it must stay usable while the door is shut.

   `is-bare` is the no-wait case: the wrapper, the stage and the interior all
   become display:contents, so the button flows in the panel exactly as it did
   before this existed and the panel looks like it always did.
   ========================================================================= */

.vault.is-bare, .vault.is-bare .vault-stage, .vault.is-bare .vault-inner { display: contents; }
.vault.is-bare .vault-door, .vault.is-bare .vault-spill,
.vault.is-bare .vault-note, .vault.is-bare .vault-shut { display: none; }

.vault.is-door { display: block; margin: 0 0 2px; }

.vault-stage {
  position: relative;
  /* a long perspective on purpose: a short one magnifies the near edge of
     the swinging door enough to push the dial and the plate out through the
     stage frame, which reads as a clipping bug rather than as a door. */
  perspective: 2000px;
  perspective-origin: 50% 50%;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  /* the chamber behind the door */
  background:
    radial-gradient(120% 90% at 76% 50%, rgba(224, 185, 114, .10), transparent 62%),
    linear-gradient(180deg, #0a0b11, #06070c);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, .9);
  overflow: hidden;
}

/* the interior: the button sits in the chamber */
.vault-inner {
  position: relative; z-index: 1;
  min-height: 206px;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  gap: 8px;
  padding: 22px;
}
.vault-shut {
  margin: 0; text-align: center;
  font: 400 10px/1.6 var(--ui); letter-spacing: .26em; color: var(--gold-dim);
}

/* the warm light spilling out of the gap as the door swings */
.vault-spill {
  position: absolute; z-index: 2; inset: 0 0 0 auto;
  width: 62%; opacity: 0; pointer-events: none;
  background: linear-gradient(270deg, rgba(246, 227, 182, .42), rgba(224, 185, 114, .17) 36%, transparent 80%);
  transition: opacity .5s var(--ease);
}

/* ------------------------------------------------------------ the door --- */

.vault-door {
  position: absolute; z-index: 3; inset: 0;
  transform-origin: left center;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 16px 14px 14px;
  transition: transform .9s var(--ease), box-shadow .9s var(--ease);
  /* brushed steel, lit from the upper left */
  background:
    repeating-linear-gradient(96deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 4px),
    radial-gradient(130% 96% at 18% 8%, rgba(255, 255, 255, .10), transparent 58%),
    linear-gradient(104deg, #1b1c24 0%, #34353f 26%, #191a21 52%, #2c2d36 74%, #14151c 100%);
  border-right: 1px solid rgba(0, 0, 0, .9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -1px 0 rgba(0, 0, 0, .7),
    12px 0 28px -14px rgba(0, 0, 0, .95);
}
/* the lit edge of the crack: the light inside the vault catching the door's
   free edge as it swings. --crack is the opening fraction, written by JS. */
.vault-door::after {
  content: ""; position: absolute; right: -1px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(246, 227, 182, .7) 22%, rgba(246, 227, 182, .7) 78%, transparent);
  opacity: calc(var(--crack, 0) * .9);
}
/* the hinge stile down the left edge, with its two bolts */
.vault-edge {
  position: absolute; left: 0; top: 0; bottom: 0; width: 13px;
  background: linear-gradient(90deg, #4a4c58, #232430 62%, #14151c);
  border-right: 1px solid rgba(0, 0, 0, .8);
}
.vault-edge::before, .vault-edge::after {
  content: ""; position: absolute; left: 3px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #8d8f9c, #33343e 60%, #101119);
}
.vault-edge::before { top: 14px; }
.vault-edge::after { bottom: 14px; }

/* ------------------------------------------------------------ the dial --- */

/* the dial sits in a turned boss, proud of the door's face */
.vault-dial {
  width: 96px; height: 96px; flex: none; display: block; border-radius: 50%;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, .035),
    0 0 0 6px rgba(0, 0, 0, .55),
    0 7px 16px -4px rgba(0, 0, 0, .8);
}
.vd-ring { fill: none; stroke: var(--gold-deep); stroke-width: 2; opacity: .85; }
.vd-face { fill: url(#vdFace); stroke: rgba(0, 0, 0, .8); stroke-width: 1; }
.vd-knurl { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.vd-hub { fill: url(#vdKnob); }
.vd-hand { fill: var(--gold-hi); }
.vd-spoke { stroke: rgba(255, 255, 255, .10); stroke-width: 1.5; stroke-linecap: round; }
.vd-index { fill: var(--gold); }
.vd-notches line { stroke: #3a3b45; stroke-width: 2; stroke-linecap: butt; }
.vd-notches line.lit { stroke: var(--gold); }
.vd-spin { transform-origin: 66px 66px; transition: transform 1s linear; }

/* -------------------------------------------------------- the two labels - */

.vault-sub {
  margin: 0; min-height: 15px;
  font: 400 10.5px/1.4 var(--ui); letter-spacing: .13em; color: var(--muted);
}
.vault-plate {
  margin: 2px 0 0; max-width: 100%; text-align: center; text-wrap: balance;
  padding: 5px 11px; border-radius: 1px;
  background: linear-gradient(180deg, #d8bb84, #a97d3c 52%, #7c5a28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 3px rgba(0, 0, 0, .6);
  color: #20180a;
  font: 500 9px/1.6 var(--ui); letter-spacing: .14em;
}

/* the one line of copy that belongs to the panel, not to the door */
.vault-note {
  margin: 9px 0 0; font: 400 10.5px/1.5 var(--ui); letter-spacing: .1em; color: var(--muted-2);
}
.vault-note[hidden] { display: none; }

/* the door is out of the way: the button behind it takes the clicks */
.vault.is-open .vault-door { box-shadow: 26px 0 44px -18px rgba(0, 0, 0, .95); }

@media (max-width: 920px) {
  .vault-inner { min-height: 196px; padding: 16px 12px; }
  .vault-dial { width: 86px; height: 86px; }
  .vault-plate { letter-spacing: .1em; }
}

/* Static door at the correct opening angle, no dial motion, no light flicker. */
@media (prefers-reduced-motion: reduce) {
  .vault-door, .vd-spin, .vault-spill { transition: none !important; }
}

/* ================================================================= BANDS */

.band {
  position: relative; z-index: 2;
  padding: clamp(70px, 9vh, 118px) clamp(16px, 4vw, 40px);
  max-width: var(--wrap); margin: 0 auto;
}
.band-head { margin-bottom: clamp(38px, 5vw, 64px); max-width: 72rem; }
.band-note { margin: 34px 0 0; font-size: 13.5px; color: var(--muted); }

/* every band except the hero gets a hairline above it */
.band::before {
  content: ""; position: absolute; left: clamp(16px, 4vw, 40px); right: clamp(16px, 4vw, 40px); top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ------------------------------------------------------- reveal on scroll */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ========================================================= 2 · TWO KINDS */

.band-kinds { --tint: var(--wine); }
.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 52px); }
.kind { margin: 0; }
.kind-art {
  position: relative; border-radius: 3px; overflow: hidden;
  background: var(--void-3);
  border: 1px solid var(--line);
  aspect-ratio: 1;
}
.kind-art img { width: 100%; height: 100%; object-fit: cover; }
.kind-backed .kind-art { box-shadow: 0 0 0 1px rgba(224, 185, 114, .24), 0 30px 70px -30px rgba(224, 185, 114, .3); }

/* the loupe: the same image again, scaled 3.4× and positioned on the mint mark
   (which sits at roughly 68% / 72% of the frame), inside a circle. It is the
   difference between saying "there is a small mark" and showing it. */
.loupe {
  position: absolute; right: 6%; bottom: 11%;
  width: 34%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(244, 239, 228, .28);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .7), inset 0 0 26px rgba(0, 0, 0, .45);
  background-repeat: no-repeat;
  background-size: 340% 340%;
  background-position: 68% 74%;
  transition: transform .4s var(--ease);
}
.kind-art:hover .loupe { transform: scale(1.1); }
.loupe::after {
  content: attr(data-say);
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  font: 400 9px/1 var(--ui); letter-spacing: .18em; color: var(--muted); white-space: nowrap;
}

.kind figcaption { padding-top: 22px; }
.kind-tag {
  display: inline-block; margin: 0 0 12px; padding: 5px 12px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font: 400 9.5px/1 var(--ui); letter-spacing: .22em;
}
.tag-backed { color: var(--gold-hi); border-color: var(--gold-dim); background: rgba(224, 185, 114, .1); }
.tag-unbacked { color: var(--muted); }
.kind h3 { font-family: var(--display); font-weight: 400; font-size: clamp(21px, 2.1vw, 27px); line-height: 1.2; color: var(--ivory); margin: 0 0 12px; }
.kind h3 b { font-weight: 400; color: var(--gold-hi); }
.kind p { font-size: 15px; line-height: 1.7; color: var(--ink); margin: 0 0 18px; max-width: 40ch; }
.kind-facts { margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.kind-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--void-2); }
.kind-facts dt { font: 400 10px/1.5 var(--ui); letter-spacing: .14em; color: var(--muted-2); text-transform: uppercase; }
.kind-facts dd { margin: 0; font: 400 13px/1.5 var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.kind-facts dd b { color: var(--gold-hi); font-weight: 400; }

/* ======================================================= 3 · THE SCROLLY */

.scrolly { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 76px); align-items: start; }

.scene-wrap { position: sticky; top: 96px; order: 2; }
.scene {
  position: relative; aspect-ratio: 1; max-height: 72vh; margin: 0 auto;
  background: radial-gradient(64% 64% at 50% 44%, rgba(136, 48, 71, .18), transparent 72%);
}
.scene svg { width: 100%; height: 100%; overflow: visible; }

.s-label { font: 400 10px var(--ui); letter-spacing: .18em; fill: var(--muted); text-transform: uppercase; }
.s-hot { fill: var(--gold); }
.s-num { fill: var(--gold-hi); }
.s-big { font: 400 30px var(--display); fill: var(--ivory); letter-spacing: -.01em; }
.s-huge { font-size: 42px; }
.s-gold { fill: var(--gold-hi); }
.s-rule { stroke: var(--line-2); stroke-width: 1; }
.s-arrow {
  fill: none; stroke: var(--gold-dim); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 4 5;
  marker-end: url(#mDim);
}
.s-in { stroke: var(--gold); marker-end: url(#mGold); }
.s-out { stroke: var(--gold); stroke-width: 2; marker-end: url(#mGold); }

/* .38s, not .55s: at half a second the outgoing beat is still legible under the
   incoming one when somebody scrolls at a normal speed, and two sets of labels
   on top of each other is the one thing a diagram may not do. */
.s-beat { opacity: 0; transition: opacity .38s var(--ease), transform .38s var(--ease); transform: translateY(10px); pointer-events: none; }
.scene[data-beat="1"] .s-b1,
.scene[data-beat="2"] .s-b2,
.scene[data-beat="3"] .s-b3,
.scene[data-beat="4"] .s-b4 { opacity: 1; transform: none; }

/* the vault's gold fill grows with the beat you are on — the diagram's one
   piece of state, and the reason it reads as a machine rather than as four
   slides */
.s-fill { transform-box: fill-box; transform-origin: bottom; transform: scaleY(.12); transition: transform 1s var(--ease); }
.scene[data-beat="1"] .s-fill { transform: scaleY(.34); }
.scene[data-beat="2"] .s-fill { transform: scaleY(.62); }
.scene[data-beat="3"] .s-fill { transform: scaleY(.88); }
.scene[data-beat="4"] .s-fill { transform: scaleY(.5); }
.s-dial { transition: opacity .5s var(--ease); }
.s-vault text { transition: fill .5s var(--ease); }
/* beat 3 is pure arithmetic; the vault drawing under it was being read as part
   of the sum, and the figures landed on top of it */
.scene[data-beat="3"] .s-vault { opacity: 0; }
.scene[data-beat="4"] .s-vault { opacity: .6; }
.s-vault { transition: opacity .42s var(--ease); }

.s-burn { animation: none; }
.scene[data-beat="4"] .s-burn { animation: burn 2.6s var(--ease) infinite; }
@keyframes burn {
  0% { opacity: 1; }
  70% { opacity: .08; }
  100% { opacity: 1; }
}
.scene[data-beat="4"] .s-out { stroke-dasharray: 5 6; animation: flow 1.4s linear infinite; }
.scene[data-beat="1"] .s-in, .scene[data-beat="2"] .s-in { animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -22; } }

.beats { list-style: none; margin: 0; padding: 0; order: 1; }
.beat {
  padding: clamp(40px, 14vh, 112px) 0;
  opacity: .3; transition: opacity .6s var(--ease);
}
.beat.on { opacity: 1; }
.beat-n { margin: 0 0 14px; font: 400 11px/1 var(--ui); letter-spacing: .3em; color: var(--gold-dim); }
.beat h3 { font-family: var(--display); font-weight: 300; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.14; color: var(--ivory); margin: 0 0 18px; letter-spacing: -.01em; }
.beat p { font-size: 16px; line-height: 1.75; color: var(--ink); margin: 0 0 16px; max-width: 44ch; }
/* A full hairline box and a tint, never a coloured rail down one side. */
.beat-fact {
  font-size: 14px !important; color: var(--muted) !important;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .022);
  padding: 14px 16px; margin-top: 20px !important;
}
.beat b { color: var(--gold-hi); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ==================================================== 4 · THE VAULT, LIVE */

.band-live { --tint: var(--gold); }
.vault { display: grid; gap: clamp(28px, 4vw, 52px); }

.vault-nums {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.vault-nums li { background: var(--void-2); padding: 24px 22px 22px; }
.vault-nums .k { display: block; font: 400 9.5px/1.4 var(--ui); letter-spacing: .2em; color: var(--muted-2); margin-bottom: 12px; }
.vault-nums .v {
  font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3.2vw, 44px); line-height: 1;
  color: var(--gold-hi); font-variant-numeric: tabular-nums; letter-spacing: -.012em;
}
.vault-nums li.big .v { font-size: clamp(38px, 4.6vw, 62px); }
.vault-nums .v.unknown { color: var(--muted-2); }
.vault-nums .v-word { font-size: clamp(24px, 2.4vw, 32px) !important; text-transform: uppercase; letter-spacing: .02em; }
.vault-nums .unit { font: 400 11px/1 var(--ui); letter-spacing: .16em; color: var(--muted); margin-left: 7px; }
.vault-nums .sub { display: block; margin-top: 10px; font: 400 11px/1.5 var(--ui); letter-spacing: .06em; color: var(--muted-2); }
.vault-nums .v-word.open { color: var(--ok); }
.vault-nums .v-word.shut { color: var(--warn); }

.chart { margin: 0; }
.chart figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-bottom: 16px; }
.chart figcaption b { font: 400 10px/1 var(--ui); letter-spacing: .26em; color: var(--gold-dim); }
.chart figcaption span { font-size: 13px; color: var(--muted); }
.chart-box { position: relative; border: 1px solid var(--line); background: linear-gradient(180deg, var(--void-3), var(--void-2)); height: clamp(190px, 26vh, 260px); }
.chart-box svg { width: 100%; height: 100%; display: block; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 400 11px/1 var(--ui); letter-spacing: .16em; color: var(--muted-2); }
.chart-empty[hidden] { display: none; }
.chart-key { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin: 14px 0 0; padding: 0; font: 400 10.5px/1 var(--ui); letter-spacing: .1em; color: var(--muted-2); }
.chart-key li { display: flex; align-items: center; gap: 7px; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: block; }
.dot-mint { background: var(--gold); }
.dot-roy { background: var(--felt); }
.dot-red { background: var(--bad); }

.nudge {
  margin-top: clamp(28px, 4vw, 48px); padding: 22px 24px;
  border: 1px solid var(--gold-deep); background: rgba(224, 185, 114, .05);
  display: grid; gap: 10px;
}
.nudge[hidden] { display: none; }
.nudge-k { margin: 0; font: 400 10px/1 var(--ui); letter-spacing: .28em; color: var(--gold); }
.nudge-say { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink); max-width: 62ch; }
.nudge-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* ========================================================== 5 · THE CLAIM */

.band-claim { --tint: var(--wine); }
.band-claim::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(72% 54% at 78% 40%, rgba(136, 48, 71, .22), transparent 70%);
}
.band-claim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.band-claim .band-head { margin-bottom: 0; }

.coinlist { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); max-height: 320px; overflow-y: auto; }
.coinlist[hidden] { display: none; }
.coinlist li { background: var(--void-2); }
.coinlist label {
  display: grid; grid-template-columns: auto 44px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 14px; cursor: pointer; transition: background .2s var(--ease);
}
.coinlist label:hover { background: rgba(224, 185, 114, .06); }
.coinlist input { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; }
.coinlist img, .coin-blank { width: 44px; height: 44px; object-fit: cover; border-radius: 2px; background: var(--void-3); display: block; }
/* the stand-in when there is no bundled picture for an id: a struck blank */
.coin-blank { border: 1px solid var(--line); background: radial-gradient(60% 60% at 42% 36%, #1b1c26, #0d0e15); }
.coin-id { font: 400 14px/1.2 var(--ui); color: var(--ivory); font-variant-numeric: tabular-nums; }
.coin-sub { display: block; font: 400 10px/1.5 var(--ui); letter-spacing: .14em; color: var(--muted-2); }
.coin-val { font: 400 13px/1.2 var(--ui); color: var(--gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.coinlist li.dead label { cursor: default; opacity: .5; }
.coinlist li.dead label:hover { background: none; }

.quote { border: 1px solid var(--gold-deep); background: rgba(224, 185, 114, .06); padding: 16px 18px; margin-bottom: 16px; }
.quote[hidden] { display: none; }
.quote-k { margin: 0 0 8px; font: 400 9.5px/1 var(--ui); letter-spacing: .2em; color: var(--gold-dim); }
.quote-k b { color: var(--gold-hi); font-weight: 400; }
.quote-v { margin: 0; font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.quote-v span { font: 400 11px/1 var(--ui); letter-spacing: .16em; color: var(--muted); margin-left: 6px; }
.quote-v i { font: 400 12px/1 var(--ui); font-style: normal; color: var(--muted-2); margin-left: 8px; }
.quote-tok { margin: 8px 0 0; font: 400 12px/1.4 var(--ui); color: var(--ink); }
.quote-tok[hidden] { display: none; }
.quote-warn { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* ======================================================= 6 · THE VIEWER */

.viewer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.viewer-stage {
  position: relative; aspect-ratio: 1; border-radius: 3px; overflow: hidden;
  background: var(--void-3); border: 1px solid var(--line);
}
.viewer-stage img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.viewer-stage img.in { opacity: 1; }
.viewer-glow { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(0, 0, 0, .55); }
.viewer-badge {
  position: absolute; left: 16px; top: 16px; margin: 0; padding: 6px 13px;
  border-radius: 999px; border: 1px solid var(--gold-dim); background: rgba(12, 12, 16, .74);
  backdrop-filter: blur(8px);
  font: 400 9.5px/1 var(--ui); letter-spacing: .22em; color: var(--gold-hi);
}
.viewer-badge[hidden] { display: none; }
.viewer-id { font-family: var(--display); font-weight: 300; font-size: clamp(40px, 5vw, 68px); line-height: 1; color: var(--ivory); margin: 0 0 20px; font-variant-numeric: tabular-nums; }
.spec { margin: 0 0 26px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.spec > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 14px; background: var(--void-2); }
.spec dt { font: 400 9.5px/1.6 var(--ui); letter-spacing: .16em; color: var(--muted-2); text-transform: uppercase; }
.spec dd { margin: 0; font: 400 13px/1.6 var(--ui); color: var(--ink); }
/* The hairline between the two segments is the WRAPPER's background showing
   through a 1px gap, not a border on one side of a button. */
.viewer-switch { display: inline-flex; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 2px; overflow: hidden; margin-bottom: 12px; }
.viewer-switch button {
  padding: 9px 16px; cursor: pointer; background: var(--void-2); border: 0;
  font: 400 9.5px/1 var(--ui); letter-spacing: .2em; color: var(--muted);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.viewer-switch button:hover { color: var(--ivory); }
.viewer-switch button.on { background: linear-gradient(rgba(224, 185, 114, .14), rgba(224, 185, 114, .14)), var(--void-2); color: var(--gold-hi); }
.viewer-say { margin: 0 0 22px; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 34ch; min-height: 44px; }

.viewer-nav { display: flex; gap: 8px; }
.viewer-nav button {
  width: 46px; height: 46px; cursor: pointer;
  background: none; border: 1px solid var(--line-2); border-radius: 2px;
  color: var(--ink); font: 300 17px/1 var(--ui);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.viewer-nav button:hover { border-color: var(--gold-dim); color: var(--gold-hi); }

.rail { list-style: none; display: flex; gap: 10px; margin: 34px 0 0; padding: 4px 0 12px; overflow-x: auto; scrollbar-width: thin; }
.rail li { flex: none; }
.rail button {
  width: 74px; height: 74px; padding: 0; cursor: pointer; overflow: hidden;
  border: 1px solid var(--line); border-radius: 2px; background: var(--void-3);
  opacity: .5; transition: opacity .25s var(--ease), border-color .25s var(--ease);
}
.rail button img { width: 100%; height: 100%; object-fit: cover; }
.rail button:hover { opacity: .85; }
.rail li.on button { opacity: 1; border-color: var(--gold-dim); }

/* ======================================================= 6b · THE LEGENDS */

.leg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.leg-grid li { position: relative; }
.leg-art { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--void-3); }
.leg-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.leg-grid li:hover .leg-art img { transform: scale(1.05); }
.leg-name { margin: 12px 0 3px; font-family: var(--display); font-weight: 400; font-size: 19px; line-height: 1.2; color: var(--ivory); }
.leg-sub { margin: 0; font: 400 9.5px/1.5 var(--ui); letter-spacing: .14em; color: var(--muted-2); text-transform: uppercase; }

/* ========================================================== 6c · RARITY */

.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: clamp(18px, 2.4vw, 34px); }
.slot h3 { margin: 0 0 14px; font: 400 10px/1 var(--ui); letter-spacing: .26em; color: var(--gold-dim); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.slot ol { list-style: none; margin: 0; padding: 0; }
.slot li { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; }
.slot .v { color: var(--ink); }
.slot .p { color: var(--muted-2); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.slot .rail-bar { position: absolute; left: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--gold-deep), rgba(224, 185, 114, .12)); }

/* ========================================================= 7 · ANSWERS */

.qa { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qa details { background: var(--void); padding: 0 4px; }
.qa summary {
  list-style: none; cursor: pointer; padding: 22px 4px;
  font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.3;
  color: var(--ivory); display: flex; gap: 18px; align-items: baseline;
  transition: color .2s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--gold-hi); }
.qa summary::before { content: "+"; font: 300 20px/1 var(--ui); color: var(--gold-dim); flex: none; width: 16px; }
.qa details[open] summary::before { content: "−"; }
.qa details p { margin: 0 0 16px 34px; max-width: 66ch; font-size: 15.5px; line-height: 1.75; color: var(--ink); }
.qa details p:last-child { padding-bottom: 22px; }

/* ================================================================ FOOTER */

.foot {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line);
  padding: clamp(48px, 7vh, 80px) clamp(16px, 4vw, 40px) 60px;
  max-width: var(--wrap); margin: 0 auto;
  display: grid; gap: 18px;
}
.foot-wm { margin: 0; font: 500 30px/1 var(--ui); letter-spacing: .5em; color: var(--line-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a { font: 400 10.5px/1 var(--ui); letter-spacing: .2em; color: var(--muted); }
.foot-links a:hover { color: var(--gold-hi); }
.foot-links a.off { color: var(--muted-2); cursor: default; }
.foot-chain { margin: 0; font: 400 10px/1 var(--ui); letter-spacing: .2em; color: var(--muted-2); }
.foot-small { margin: 0; max-width: 64ch; font-size: 12.5px; line-height: 1.7; color: var(--muted-2); }

/* ============================================================ RESPONSIVE */

@media (max-width: 1080px) {
  .vault-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .topnav { display: none; }
  .topchips { margin-left: auto; }

  /* The top padding is trimmed hard here: every pixel above the headline is a
     pixel of the mint panel that falls off the bottom of the first screen. */
  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 64px;
    gap: 0;
  }
  /* THE PHONE ORDER, and the fold is the whole reason for it:
         headline · one line · THE COIN · THE MINT PANEL · the three numbers ·
         the rest of the copy.
     display: contents dissolves .hero-copy so its children order themselves
     against the stage and the panel instead of arriving as one indivisible
     block — which is what used to push the coin and the panel a full screen
     below the fold. */
  .hero-copy { display: contents; }
  .hero-copy::before { display: none; }
  .hero .eyebrow { order: 1; }
  .hero .h-display { order: 2; margin-bottom: 14px; }
  .hero-one { order: 3; display: block; margin-bottom: 4px; }
  .hero .lede { order: 7; }
  .hero-foot { order: 8; margin-top: 18px; }

  /* On a phone the coin cannot sit behind the copy — there is no room beside it
     — so it becomes its own block: a STATIC centred image. No pointer parallax
     (a finger is a scroll, not a look), no float, no sweep, and no --ty — in
     flow the scroll drift lifts the coin out of its own box and leaves a hole
     exactly as tall as the shift. */
  .stage {
    order: 4;
    position: relative; left: auto; top: auto;
    width: min(78vw, 372px); aspect-ratio: 1;
    transform: none;
    margin: 6px auto 2px;
  }
  .stage-field, .stage-glow, .stage-coin, .stage-shadow { transform: none !important; }
  .stage-coin { animation: none; }
  .stage-sweep { display: none; }

  .hero-nums { order: 6; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 24px 0 20px; }
  .hero-nums li { padding: 15px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; }
  .hero-nums li:last-child { border-bottom: 0; }
  .hero-nums .k { margin: 0; }
  .hero-nums .u { display: inline; margin: 0 0 0 8px; }
  /* Always open on a phone. There is no collapsed sheet and no disclosure — the
     panel is the second thing under the coin and it is simply there. */
  .panel-mint { order: 5; margin-top: 22px; }
  .scrollhint { display: none; }

  .kinds { grid-template-columns: minmax(0, 1fr); }
  .scrolly { grid-template-columns: minmax(0, 1fr); }
  /* the sticky scene is SQUARE and the column is not, so an opaque ground has
     to sit on the WRAPPER — on .scene it left a transparent gutter down each
     side and the beat scrolling underneath showed through it */
  .scene-wrap {
    order: 1; position: sticky; top: 58px;
    margin: 0 calc(-1 * clamp(16px, 4vw, 40px)); padding: 6px clamp(16px, 4vw, 40px) 14px;
    background: linear-gradient(180deg, var(--void) 0 82%, transparent);
  }
  .scene { max-height: 40vh; background: radial-gradient(64% 64% at 50% 44%, rgba(136, 48, 71, .2), transparent 72%); }
  .beats { order: 2; }
  .beat { padding: 26px 0 46px; opacity: 1; }
  .band-claim { grid-template-columns: minmax(0, 1fr); }
  .viewer { grid-template-columns: minmax(0, 1fr); }
  .viewer-say { max-width: none; min-height: 0; }
  .leg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .band { padding-left: 16px; padding-right: 16px; }
  .vault-nums { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 20px 18px 18px; }
  .wm { font-size: 16px; letter-spacing: .34em; }
  .chip { padding: 5px 10px; font-size: 9.5px; letter-spacing: .12em; }
  .top { gap: 12px; }
  .topchips .chip:first-child span { display: none; }
  .topchips .chip:first-child { padding: 5px 8px; }
  .foot-wm { font-size: 20px; letter-spacing: .34em; }
  .qa details p { margin-left: 0; }
  .buy-row { grid-template-columns: minmax(0, 1fr); }
  .stepper { justify-content: space-between; }
}

/* ======================================================== REDUCED MOTION
   Everything that moves on its own stops. The parallax variables are still
   written by main.js but the transforms that read them are removed here, so
   there is exactly one place to check that the page is really still. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .grain { animation: none; }
  .stage { transform: translate3d(-50%, -50%, 0); }
  .stage-field, .stage-glow, .stage-coin, .stage-shadow { transform: none !important; }
  .stage-coin { animation: none; }
  .stage-sweep { display: none; }
  .scrollhint i { animation: none; transform: scaleX(1); }
  .rv { opacity: 1; transform: none; }
  .beat { opacity: 1; }
  .stage-coin img, .viewer-stage img { opacity: 1; }
  @media (max-width: 920px) { .stage { transform: none; } }
}