/* ══════════════════════════════════════════════════════════════
   CÉDULA — $APRT, a demonstration by APRONTA
   Engraved security printing. Two acts: paper, then ink.
   No radius. No shadow. No gradient. Rules and engraved line only.
   ══════════════════════════════════════════════════════════════ */

:root {
  --paper:        #F4EFE6;
  --paper-2:      #EBE4D6;
  --ink:          #111111;
  --ink-2:        #1A1A1A;
  --petrol:       #1B3A5C;
  --brick:        #B3321F;
  --grey:         #8C8378;
  /* the two brand inks lifted to carry on a black ground */
  --petrol-ink:   #5B8FC4;
  --brick-ink:    #D9583C;

  --on-paper:     #111111;
  --on-paper-mid: #4A443C;
  --on-ink:       #F4EFE6;
  --on-ink-mid:   #A9A296;

  --hair:         rgba(27, 58, 92, .34);
  --hair-ink:     rgba(244, 239, 230, .26);

  --gut:          clamp(20px, 3.2vw, 46px);
  --rule:         2px;

  color-scheme: light;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--on-paper);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Browser surfaces belong to the design too. */
::selection { background: var(--brick); color: var(--paper); }
.ink-world ::selection, .turn ::selection { background: var(--paper); color: var(--ink); }

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

@supports (scrollbar-width: thin) {
  html { scrollbar-width: thin; scrollbar-color: var(--petrol) var(--paper-2); }
}
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--petrol); border: 3px solid var(--paper-2); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.skip:focus { left: 0; }

/* ── type roles ─────────────────────────────────────────────── */
.display {
  font-weight: 900;
  font-stretch: 62%;
  text-transform: uppercase;
  line-height: .82;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.denom {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.label {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .19em;
  text-transform: uppercase;
  line-height: 1.4;
}
.label--brick { color: var(--brick); }
.label--quiet { color: var(--on-paper-mid); font-weight: 500; letter-spacing: .14em; }
.serial {
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.body {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.62;
  max-width: 62ch;
  color: var(--on-paper);
}
.body + .body { margin-top: 1.1em; }
.body--sm { font-size: 13px; line-height: 1.55; }
.body--quiet { color: var(--on-paper-mid); }

.h2 { font-size: clamp(44px, 5.4vw, 88px); }

/* ── paper grain ────────────────────────────────────────────── */
.grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 90; pointer-events: none;
  opacity: .42; mix-blend-mode: multiply;
}

/* ── the WebGL medallion, one object for the whole page ─────── */
#mark-gl {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 7; pointer-events: none;
}

/* ── nav ────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 20px var(--gut) 13px;
  background: var(--paper);
  border-bottom: var(--rule) solid var(--petrol);
  transition: background .45s linear, border-color .45s linear, color .45s linear;
}
.nav.is-ink {
  background: var(--ink);
  border-bottom-color: var(--paper);
  color: var(--on-ink);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.brand-mark { display: block; width: 25px; height: 25px; }
.brand-word {
  font-weight: 900; font-size: 20px; letter-spacing: -.045em;
  color: currentColor;
}
.nav.is-ink .brand-word { color: var(--paper); }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav-links a { color: inherit; text-decoration: none; position: relative; padding-bottom: 2px; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--brick);
  transition: right .25s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }

.lang { display: flex; align-items: center; gap: 5px; padding-left: clamp(12px, 1.6vw, 24px); border-left: 1px solid var(--hair); }
.nav.is-ink .lang { border-left-color: var(--hair-ink); }
.lang span { opacity: .38; }
.lang-btn {
  background: none; border: 0; cursor: pointer; padding: 2px 1px;
  font: inherit; font-size: 11px; letter-spacing: .19em; text-transform: uppercase; font-weight: 600;
  color: inherit; opacity: .42;
}
.lang-btn.is-on { opacity: 1; color: var(--brick); }

/* ── the action ─────────────────────────────────────────────── */
/* the action is engraved, not filled: hover cuts the hatch across it */
.action {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 20px 12px;
  border: var(--rule) solid var(--brick);
  color: inherit; text-decoration: none;
}
.action::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(-45deg, var(--brick) 0 1px, transparent 1px 7px);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .42s cubic-bezier(.2,.8,.2,1);
}
.action:hover::before, .action:focus-visible::before { transform: scaleX(1); }
.action-arrow { width: 22px; height: 11px; color: var(--brick); flex: none; }
.action--lg { padding: 17px 26px 16px; font-size: 11px; margin-top: 34px; margin-bottom: 16px; }
/* on ink the two brand inks are lifted, or the thin rules disappear into black */
.ink-world .action { color: var(--on-ink); border-color: var(--brick-ink); }
.ink-world .action::before { background-image: repeating-linear-gradient(-45deg, var(--brick-ink) 0 1px, transparent 1px 7px); }
.ink-world .action:hover, .ink-world .action:focus-visible { color: var(--ink); }
.ink-world .action-arrow { color: var(--brick-ink); }
.ink-world .label--brick { color: var(--brick-ink); }
.ink-world :focus-visible { outline-color: var(--brick-ink); }

/* ══ ACT I · THE PAPER ═══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: 66px;
  display: flex; flex-direction: column;
}
.sheet {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 372px);
  padding: 0 var(--gut);
  min-height: 0;
}
.face { display: flex; flex-direction: column; padding: clamp(18px, 3vh, 40px) clamp(22px, 3vw, 44px) 26px 0; }
.face-title { font-size: clamp(54px, 9.4vw, 138px); }
.face-denom {
  margin-top: clamp(18px, 2.6vh, 34px);
  padding-top: 15px;
  border-top: var(--rule) solid var(--brick);
  font-size: clamp(17px, 1.9vw, 28px);
  color: var(--petrol);
  display: flex; align-items: baseline; gap: .38em; flex-wrap: wrap;
}
.face-denom .ticker { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: .82em; letter-spacing: -.01em; }
/* the operator IS the claim — it never dims and it is never hidden from AT */
.face-denom .eq { color: var(--brick); }

.ledger { margin-top: auto; padding-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: clamp(24px, 4vw, 64px); }
.ledger > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-top: 1px solid var(--hair);
}
.ledger dt { color: var(--on-paper-mid); }
.ledger .val { font-family: 'Courier Prime', monospace; font-weight: 700; letter-spacing: .05em; text-align: right; }
.ledger .val--brick { color: var(--brick); }

.panel {
  position: relative;
  border-left: var(--rule) solid var(--petrol);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.panel-field { position: absolute; inset: 0; width: 100%; height: 100%; }
.vignette {
  position: relative; width: min(232px, 68%); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.vignette::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 42%; height: 42%; transform: translate(-50%, -50%);
  background: var(--paper);
  clip-path: circle(50%);
}
.vignette canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vignette-mark { position: relative; width: 38%; opacity: 1; transition: opacity .3s linear; }
.vignette.gl-live .vignette-mark { opacity: 0; }
.serial-v {
  position: absolute; right: 9px; top: 50%;
  writing-mode: vertical-rl; transform: translateY(-50%);
  color: var(--brick); font-size: 12px; white-space: nowrap;
}

.strip { padding: 0 var(--gut) 16px; }
.microtext--ink { color: var(--petrol-ink); opacity: .42; }
.foot-serial { font-size: 12px; color: var(--on-ink-mid); letter-spacing: .14em; }

.microtext {
  font-family: 'Courier Prime', monospace;
  font-size: 7px; letter-spacing: .3em; color: var(--petrol);
  opacity: .72; white-space: nowrap; overflow: hidden; user-select: none;
  padding: 8px 0 9px;
}
.notice {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-top: var(--rule) solid var(--brick); padding-top: 11px;
}
.notice .label { color: var(--petrol); }

/* ── what it is ─────────────────────────────────────────────── */
.what { position: relative; z-index: 6; padding: clamp(80px, 12vh, 150px) var(--gut) clamp(48px, 7vh, 90px); }
.what-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr); gap: clamp(34px, 5vw, 88px); align-items: start; }
.what-say .h2 { margin-bottom: 30px; }

.meter { border-top: var(--rule) solid var(--petrol); padding-top: 14px; }
.meter-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.steps { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; }
.steps .step {
  position: relative;
  aspect-ratio: 1 / 2.4;
  border: 1px solid var(--hair);
  background-image: repeating-linear-gradient(-45deg, var(--hair) 0 .5px, transparent .5px 4px);
  transition: background-color .12s linear, border-color .12s linear;
}
.steps .step.is-armed { border-color: var(--petrol); background-color: rgba(27,58,92,.14); }
.steps .step.is-hot { border-color: var(--brick); background-color: var(--brick); }
.meter-read { display: flex; gap: clamp(24px, 4vw, 56px); margin: 26px 0 16px; }
.meter-read > div { display: flex; flex-direction: column; gap: 5px; }
.meter-read .big { font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: .02em; }
.meter-read .label { color: var(--on-paper-mid); }
.meter figcaption { border-top: 1px solid var(--hair); padding-top: 11px; max-width: 52ch; }

/* ── the turn ───────────────────────────────────────────────── */
.turn { position: relative; height: 48svh; overflow: hidden; }
.turn-ink {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0;
  background: var(--ink);
  border-top: var(--rule) solid var(--brick);
  overflow: hidden;
}
/* the seam carries the plate's own devices, so the turn is engraving and not a blank band */
.turn-ribbon {
  position: absolute; left: 0; right: 0; top: 26px;
  width: 100%; height: 58px; opacity: .5;
}
.turn-ink .microtext--ink {
  position: absolute; left: 0; right: 0; top: 8px;
  padding: 0 var(--gut);
}
.turn-serial {
  position: absolute; right: var(--gut); bottom: 20px;
  font-size: 12px; color: var(--brick-ink);
}

/* an engraved rule between the ink sections: ribbon over microtext, like a note's edge */
.plate-edge { position: relative; height: 62px; border-top: 1px solid var(--hair-ink); }
.plate-edge canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .42; }
.plate-edge .microtext--ink { position: absolute; left: 0; right: 0; bottom: 6px; padding: 0 var(--gut); }
/* the stage: one viewport that stays put for the whole section, so the object
   can be held at full size long enough to be looked at rather than passed */
.turn-stage {
  position: relative; height: 100%;
  display: grid; place-items: center;
  padding: 0 var(--gut);
}
.turn-line {
  position: absolute;
  /* clear of the navigation, which is two rows tall on a phone */
  inset: clamp(96px, 13vh, 150px) var(--gut) clamp(52px, 9vh, 120px);
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: clamp(30px, 6.4vw, 104px);
  line-height: .86;
  color: var(--ink);
  pointer-events: none;
  /* the words are clipped to the stage, so they arrive from behind its edges
     rather than pushing the page sideways on the way in */
  overflow: hidden;
}
.turn-line .tl { display: block; will-change: transform; }
.turn-line .tl-b { align-self: flex-end; }

/* ══ ACT II · THE INK ════════════════════════════════════════ */
.ink-world {
  position: relative; z-index: 6;
  background: var(--ink); color: var(--on-ink);
}
.ink-world .body { color: rgba(244,239,230,.78); }
.ink-world .body--sm { color: rgba(244,239,230,.62); }
.ink-world .label--quiet { color: var(--on-ink-mid); }
.ink-world .sec-sub { color: rgba(244,239,230,.62); }

.sec-head { border-top: var(--rule) solid var(--paper); padding-top: 16px; margin-bottom: clamp(34px, 5vh, 66px); }
.sec-head .sec-sub { margin-top: 12px; font-size: clamp(16px, 1.5vw, 22px); max-width: 44ch; }

.tokenomics { padding: clamp(76px, 11vh, 140px) var(--gut) clamp(56px, 8vh, 96px); }
.tok-grid {
  display: grid;
  grid-template-columns: clamp(220px, 24vw, 340px) minmax(0, 1fr) clamp(240px, 28vw, 470px);
  gap: clamp(28px, 4vw, 68px); align-items: center;
}
.rosette-wrap { position: relative; aspect-ratio: 1; width: 100%; }
.rosette { position: absolute; inset: 0; width: 100%; height: 100%; }

.alloc { display: flex; flex-direction: column; }
.alloc-row {
  display: grid; grid-template-columns: 16px 76px minmax(0, 1fr);
  gap: 18px; align-items: baseline;
  padding: 17px 0; border-top: 1px solid var(--hair-ink);
}
.alloc-row:last-child { border-bottom: 1px solid var(--hair-ink); }
.alloc-row dd { display: flex; flex-direction: column; gap: 7px; }
.pct { font-size: clamp(20px, 2vw, 28px); color: var(--paper); }
/* state and identity encoded as engraved fill, never colour alone */
.hatch { display: block; width: 16px; height: 16px; border: 1px solid var(--hair-ink); align-self: center; }
.hatch--paper  { background-image: repeating-linear-gradient(-45deg, var(--paper) 0 1px, transparent 1px 3px); }
.hatch--petrol { background-image: repeating-linear-gradient(90deg, var(--petrol-ink) 0 1px, transparent 1px 3px); }
.hatch--brick  { background-image: repeating-linear-gradient(45deg, var(--brick-ink) 0 1px, transparent 1px 3px); }
.hatch--grey   { background-image: repeating-linear-gradient(0deg, #9C9488 0 1px, transparent 1px 3px); }

.fineprint { margin-top: clamp(34px, 5vh, 60px); padding-top: 12px; border-top: 1px solid var(--hair-ink); max-width: 74ch; }
.ink-world .fineprint { color: var(--on-ink-mid); }

/* ── roadmap ────────────────────────────────────────────────── */
.roadmap { padding: clamp(56px, 8vh, 100px) var(--gut) clamp(52px, 8vh, 96px); }
/* the tallest object on the page sits in this section, so the heading gives back
   the space it can: everything above the plate is scroll spent before it lands */
.roadmap .sec-head { margin-bottom: clamp(14px, 2vh, 26px); }
.track-wrap { overflow: visible; }
.track {
  position: relative; height: clamp(165px, 21vh, 230px);
  /* room above for the phases, which now hang upward from the line, and room
     below for the plate, which hangs out of the box under the apex. The top
     margin is also what keeps the heading on screen when the plate is docked:
     any taller and the section title is pushed off the top of the viewport at
     exactly the moment the object arrives. */
  margin: 0 0 min(34vh, 24vw);
}
/* The arc is the road, and it is deep: a shallow line is a ruler, and this one
   has to read as the limb of something round, closing over the plate's shoulder.
   y(t) = 252 - 644·t(1-t) in the 1000×260 viewBox is the same expression the
   phases place against — one curve, two consumers, so a marker can never drift
   off its own line. */
.track-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.track-arc .arc-base { stroke: var(--hair-ink); stroke-width: 1; }
.track-arc .arc-fill { stroke: var(--paper); stroke-width: 2; stroke-linecap: butt; }
/* The line is above and the plate below it, so every phase hangs upward from its
   own point on the curve: note, name, then the tick that touches the line. */
.phase {
  position: absolute; left: var(--at);
  top: calc((252 - 644 * var(--t) * (1 - var(--t))) / 260 * 100%);
  transform: translate(-50%, -100%);
  width: 168px; text-align: center;
  display: flex; flex-direction: column-reverse; align-items: center;
}
.phase .tick { display: block; width: 1px; height: 15px; background: var(--hair-ink); margin: 0 auto -7px; }
.phase .phase-name { display: block; margin-bottom: 11px; color: var(--on-ink-mid); }
.phase .phase-note { display: block; margin-bottom: 8px; }
.phase.is-now .phase-name { color: var(--paper); }
.phase.is-now .tick { background: var(--paper); height: 22px; margin-bottom: -11px; }
.phase .marker {
  position: absolute; left: 50%; bottom: -19px; transform: translateX(-50%);
  width: 14px; height: 11px; background: var(--brick-ink);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ── who builds it ──────────────────────────────────────────── */
.builders { padding: clamp(60px, 9vh, 120px) var(--gut) clamp(60px, 9vh, 110px); border-top: 1px solid var(--hair-ink); }
.who-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto clamp(200px, 22vw, 300px); gap: clamp(30px, 4vw, 64px); align-items: start; }
.services { list-style: none; }
.services li { padding: 15px 0; border-top: 1px solid var(--hair-ink); }
.services li:last-child { border-bottom: 1px solid var(--hair-ink); }
.services .label { color: var(--paper); }
#contact { scroll-margin-top: 90px; }

/* ── footer ─────────────────────────────────────────────────── */
.foot { padding: clamp(40px, 6vh, 80px) var(--gut) clamp(28px, 4vh, 48px); border-top: var(--rule) solid var(--brick-ink); }
.foot-mark {
  font-weight: 900; font-stretch: 62%;
  font-size: 36.5vw;
  line-height: .74; letter-spacing: -.05em;
  color: var(--brick);
  padding-bottom: .17em;
  user-select: none;
  white-space: nowrap;
}
.foot-mark > span { display: inline-block; }
/* the counter is where the plate goes; the glyph stays in the flow so the word
   keeps its metrics and the disc lands on the o's own centre, not near it */
.fm-o { position: relative; }
/* a zero-sized inline box on the baseline: the only way to read where the
   baseline of a laid-out line actually is, which is what the glyph's own
   metrics have to be measured against */
.fm-base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
/* and 1ex is the x-height of whatever face actually rendered — the height of the
   o, straight from the font, with no second guess about which width axis won */
.fm-ex { display: inline-block; width: 0; height: 1ex; vertical-align: baseline; }
html.gl-on .fm-o { color: transparent; }
/* room under the word, so the counter of the o can reach the middle of the
   screen and the plate can finish the journey inside it */
html.gl-on .foot { padding-bottom: clamp(48px, 14vh, 190px); }
.foot-rows { display: grid; gap: 16px; margin-top: clamp(20px, 3vh, 40px); padding-top: 18px; border-top: 1px solid var(--hair-ink); }
.foot-rows .body--sm { max-width: 78ch; }

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width: 980px) {
  .what-grid, .tok-grid, .who-grid { grid-template-columns: minmax(0, 1fr); }
  .dock--builders { margin: 8px auto 0; }
  .rosette-wrap { max-width: 340px; }
}

@media (max-width: 760px) {
  .nav { padding: 12px var(--gut) 9px; flex-wrap: wrap; gap: 8px; }
  .nav-links { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 7px 13px; }
  .nav-links a { font-size: 11px; letter-spacing: .08em; }
  /* the language switch takes its own row rather than overflowing off the edge */
  .lang {
    flex-basis: 100%; justify-content: flex-end;
    padding: 6px 0 0; margin: 2px 0 0;
    border-left: 0; border-top: 1px solid var(--hair);
  }
  .nav.is-ink .lang { border-top-color: var(--hair-ink); }

  .hero { padding-top: 112px; min-height: auto; }
  .sheet { grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }
  .face { padding-right: 0; }
  .face-title { font-size: clamp(36px, 12.4vw, 92px); }
  .face-denom { font-size: clamp(15px, 4.4vw, 22px); }
  .ledger { margin-top: 24px; }
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .notice { flex-direction: column; align-items: flex-start; gap: 16px; }

  .turn { height: 40svh; }
  .plate-edge { height: 48px; }

  /* the action must land inside the first viewport: ledger, notice, action,
     then the plate panel leading into the next act */
  .sheet { display: contents; }
  .face { order: 1; padding: clamp(16px, 2.4vh, 30px) var(--gut) 0; }
  .strip { order: 2; padding-top: 10px; }
  .panel { order: 3; margin: 16px 0 0; height: 290px; border-top: var(--rule) solid var(--petrol); border-left: 0; }

  /* the roadmap becomes a vertical spine — a horizontal track at this width
     puts two of five phases past the edge, where overflow-x:hidden eats them */
  .track-wrap { overflow: visible; }
  .track { min-width: 0; height: auto; margin: 20px 0 0; border-top: 0; }
  .track-arc { display: none; }
  .phase {
    position: relative; left: auto; top: auto; transform: none;
    display: block;
    width: 100%; text-align: left;
    padding: 15px 0 15px 22px;
    border-top: 1px solid var(--hair-ink);
  }
  .phase::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: -1px;
    width: 1px; background: var(--hair-ink);
  }
  .phase:last-child { border-bottom: 1px solid var(--hair-ink); }
  .phase .tick {
    position: absolute; left: -3px; top: 20px;
    width: 7px; height: 7px; margin: 0; background: var(--hair-ink);
  }
  .phase.is-now::before { background: var(--paper); }
  .phase.is-now .tick { left: -4px; width: 9px; height: 9px; background: var(--paper); }
  .phase .marker {
    left: -13px; top: 17px; transform: none;
    width: 9px; height: 12px; background: var(--brick-ink);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .phase .phase-name { margin-top: 0; }
  .phase .phase-note { margin-top: 6px; }
  .alloc-row { grid-template-columns: 14px 60px minmax(0, 1fr); gap: 12px; }

}

/* ── reduced motion: the orchestration is optional, never load-bearing ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .turn { height: 0; }
  .turn-ink { height: 100% !important; }
  .turn-line { display: none; }
  .track-arc .arc-fill { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  #mark-gl { display: none; }
  .vignette.gl-live .vignette-mark { opacity: 1; }
}

/* ── no JS: everything still reads ──────────────────────────── */
.no-js .turn { display: none; }
.no-js #mark-gl { display: none; }

/* ══════════════════════════════════════════════════════════════
   OVERDRIVE — the press layer
   The guilloche field moves from canvas 2D to a fragment shader and becomes
   the page's actual ground; the medal becomes a real struck object under a
   PBR environment. Everything below is scoped so that a machine that cannot
   afford it falls back to the printed version already above.
   ══════════════════════════════════════════════════════════════ */

/* ScrollSmoother transforms #smooth-content, which makes it a stacking context
   at z-index auto — anything positioned above 0 would paint over the entire
   page. The field sits at 0 and the smoothed content is lifted above it. */
#gl {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0; display: block; pointer-events: none;
}
#smooth-wrapper { position: relative; z-index: 2; }
html:not(.gl-on) #gl, html.gl-off #gl { display: none; }

/* when the shader is the ground, the DOM stops painting one */
html.gl-on, html.gl-on body { background: transparent; }
html.gl-on .hero,
html.gl-on .what,
html.gl-on .turn,
html.gl-on .ink-world { background: transparent; }
html.gl-on .turn-ink { background: transparent; border-top-color: var(--brick-ink); height: 100% !important; }
html.gl-on .panel-field { display: none; }
html.gl-on .vignette::before { display: none; }
/* The panel stays. Removing it left the plate floating and orphaned the serial,
   and the printed fallback that kept it read stronger than the flagship. */
html.gl-on .vignette { display: none; }
/* a frame, not a fill: the plate is drawn behind the DOM, so any panel
   background would veil it and invert the containment it exists to provide */
html.gl-on .panel { background: transparent; border-left: var(--rule) solid var(--petrol); }
html.gl-on .panel-field { display: none; }
html.gl-on .panel::after {
  content: ''; position: absolute; inset: 26px 22px;
  border: 1px solid var(--hair); pointer-events: none;
}
html.gl-on .grain { opacity: .16; }
/* the note's clear margin: microtext at 5.5px cannot win against the engraved
   field, and a banknote leaves its foot clear for exactly this reason */
html.gl-on .strip { background: var(--paper); border-top: 1px solid var(--hair); }
html.gl-on .strip .microtext { opacity: 1; }
html.gl-on .nav { background: var(--paper); }
html.gl-on .nav.is-ink { background: var(--ink); }

/* every section sits above the field */
.hero, .what, .turn, .ink-world { position: relative; z-index: 6; }

/* ══ DOCKS ═════════════════════════════════════════════════════
   Every section reserves a real, laid-out square for the plate to land in.
   The object is placed from these rects, so it can never overlap copy: the
   copy flows around the reservation instead of the object being nudged around
   the copy. They also scroll with their section, which is what makes the plate
   belong to the page rather than float over it.
   ══════════════════════════════════════════════════════════════ */
.dock { display: block; pointer-events: none; aspect-ratio: 1; }
/* A dock is a hole cut for an object, so it collapses when there is no object:
   otherwise the printed fallback ships with a screen-high blank square in the
   middle of four sections. It collapses on `gl-off` rather than on "not gl-on",
   because `gl-on` is set by a module script — reserving the space only once
   that runs would reflow the whole page a beat after it painted. */
html.gl-off .dock, .no-js .dock { display: none; }
html.gl-off .tok-grid { grid-template-columns: clamp(240px, 26vw, 380px) minmax(0, 1fr); }
html.gl-off .who-grid { grid-template-columns: minmax(0, 1fr) clamp(200px, 22vw, 300px); }

.dock--hero {
  position: absolute; left: 50%; top: 50%;
  width: min(248px, 66%); transform: translate(-50%, -50%);
}
/* The close-up hangs off the meter. As a full-width row under both columns it
   parked too low and too late: everything above it had to leave the screen
   before it settled, so it was still sliding out of the bottom of the viewport
   while the section was being read. Attached to the meter there is half a
   column less above it, and it comes to rest with the meter still in frame. */
.dock--what { width: min(44vh, 100%); margin: clamp(14px, 2.6vh, 36px) auto 0; }
/* the whole stage, and it holds still while the section scrolls past it */
.dock--turn { width: min(94vh, 76vw); }
.dock--tok { width: 100%; align-self: center; }
/* Under the apex, tucked into the curve, so the line closes over its shoulder.
   The arc cannot literally carry the disc's own radius — across a viewport-wide
   span that curvature would be a loop, not a horizon — so the reading is made by
   tangency instead: the apex meets the top of the disc and the two arcs continue
   each other. */
.dock--road {
  position: absolute; left: 50%; top: 46%;
  width: min(46vh, 32vw); transform: translateX(-50%);
}
.dock--builders { width: min(46vh, 34vw); justify-self: center; align-self: center; }

/* The phone's docks live here, after the desktop ones and not up in the earlier
   responsive block: these selectors carry the same specificity, so whichever is
   written last wins regardless of the media query, and for a long time the
   narrow layout was quietly being handed the wide sizes. The roadmap dock was
   the one that showed it — 94px instead of 218, because `min(34vh, 24vw)` picks
   the width axis on a phone. */
@media (max-width: 760px) {
  .dock--hero { width: min(210px, 62%); }
  .dock--turn { width: 84vw; }
  .dock--what { width: min(74vw, 42vh); margin: 24px auto 0; }
  .dock--tok { width: min(62vw, 34vh); margin: 26px auto 0; }
  /* one column here, and the arc is gone, so the plate goes back into the flow */
  .dock--road { position: static; transform: none; width: min(56vw, 30vh); margin: 4px auto 22px; }
  .dock--builders { width: min(62vw, 34vh); }
}

.sec-head-text { min-width: 0; }

/* ── running rails ───────────────────────────────────────────── */
.rail-canvas { display: block; width: 100%; height: 24px; }
.strip .rail-canvas { margin: 6px 0 8px; }
.turn-ink .rail-canvas { position: absolute; left: 0; right: 0; top: 8px; }
.plate-edge .rail-canvas { position: absolute; left: 0; right: 0; bottom: 6px; }

/* ── split-text lines arrive from behind a mask ──────────────── */
/* The mask is the line box, and at line-height .82 the caps overflow it, so the
   reveal used to clip their tops. Padding the line grows the mask that wraps it
   and the negative margin collapses the gap between lines, which keeps the .82
   poster stack; the block then pads its own two outer edges back, or it ends up
   shorter than its glyphs and the next paragraph rides over the last line. */
.split-line { display: block; will-change: transform; }

/* ── the roadmap is a horizon, not a walk ─────────────────────
   The track used to be 128vw wide and pinned, dragged sideways by the scroll.
   A pin inside a smoothed page is the one thing on this site that could not be
   made to feel fluid — it stops the page dead and hands the scroll to a tween.
   The arc fits the viewport, so the road is read without stopping the scroll. */
@media (min-width: 761px) {
  .roadmap {
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .track-wrap { overflow: visible; }
}

/* ── the turn is now the shader's job; the section only gives it room ──
   The section is a long scroll and the stage inside it is stuck to the viewport
   for the whole of it, so the object can be held at full size while the page's
   two inks change hands around it. CSS sticky, not a GSAP pin: no pin-spacer, no
   refresh cost, and nothing for the smoother to fight. */
/* Not `position: sticky`. ScrollSmoother moves the page by transforming
   #smooth-content, and a sticky element inside a transformed box computes its
   offsets against the real document scroll while the content around it is being
   translated — it simply does not stick. Measured: the stage tracked the section
   all the way to y-877 when it should have been held at 0. ScrollTrigger's pin
   moves with the smoothed content, so the hold is done there, in motion.js. */
html.gl-on .turn { height: auto; overflow: visible; }
html.gl-on .turn-stage { height: 100svh; }
/* The seam is the one place a DOM element outlives the ground beneath it, so its
   colour follows `data-act` — which is driven by the same `state.ground` as the
   shader — instead of being hard-coded for one act. Hard-coding it for ink is
   what put paper-white type on a cream ground at 1.1:1. */
html.gl-on .turn-line { color: var(--ink); opacity: .9; transition: color .35s linear; }
html.gl-on[data-act="ink"] .turn-line { color: var(--paper); }

/* ── quality tiers announce themselves for debugging ─────────── */
html[data-gl-tier="low"] #gl { display: none; }

@media (prefers-reduced-motion: reduce) {
  #gl { display: none !important; }
  /* no renderer here either, so no holes cut for it */
  .dock { display: none !important; }
  .tok-grid { grid-template-columns: clamp(240px, 26vw, 380px) minmax(0, 1fr) !important; }
  .who-grid { grid-template-columns: minmax(0, 1fr) clamp(200px, 22vw, 300px) !important; }
  .rail > .microtext { transform: none !important; }
  .roadmap { min-height: 0; }
  .track { transform: none !important; }
}