/* ==========================================================================
   $PURGE — The French Purge
   Blood: black night, blood red, grey smoke. Tokens live on :root.
   ========================================================================== */

:root {
  --bg: #070505;
  --bg-2: #120808;
  --ink: #efebe9;
  --ink-2: #c2b7b3;
  --blood: #c4001e;
  --blood-hi: #e8132f;
  --red-label: #ff4a5c;
  --blood-hover: #d6081f;
  --ember: 232, 19, 47;
  --blood-deep: #4a0009;
  --on-blood: #fff6f3;
  --line: rgba(243, 236, 230, 0.16);
  --panel: rgba(18, 8, 8, 0.72);
  --glow: rgba(224, 16, 46, 0.45);

  --display: "Anton", "Arial Narrow", sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}




/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* No CSS scroll-behavior: smooth, it breaks ScrollTrigger's measurements. Anchors scroll smoothly in JS. */
/* The page is already light on near-black: Windows contrast themes and the browsers'
   forced page colours would only wash the reds and oranges out, so it keeps its own. */
html { -webkit-text-size-adjust: 100%; color-scheme: dark; forced-color-adjust: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  overflow-x: hidden;
  transition: background-color 0.6s var(--ease-out), color 0.6s var(--ease-out);
}
a { color: inherit; }
img, svg { display: block; }
::selection { background: var(--blood); color: var(--on-blood); }
:focus-visible { outline: 3px solid var(--blood-hi); outline-offset: 3px; }
html { scrollbar-color: var(--blood) var(--bg); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--blood); border-radius: 0 0 6px 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Ground (theme texture) + ambient light (changes per chapter) ---------- */
.ground, .ambient { position: fixed; inset: 0; pointer-events: none; }
.ground { z-index: 0; }
.ambient { z-index: 1; transition: background 1.2s var(--ease-out), opacity 1.2s var(--ease-out); }

.ground {
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(179, 0, 27, 0.32), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 120%, rgba(0, 0, 0, 0.9), transparent 70%),
    var(--bg);
}

.ambient[data-light="night"] { background: transparent; }
.ambient[data-light="day"] { background: linear-gradient(180deg, rgba(160, 165, 172, 0.12), rgba(160, 165, 172, 0.04)); }
.ambient[data-light="fire"] { background: radial-gradient(ellipse 90% 60% at 50% 110%, rgba(255, 90, 20, 0.28), transparent 70%), radial-gradient(ellipse 60% 40% at 50% -10%, rgba(224, 16, 46, 0.22), transparent 70%); }
.ambient[data-light="dim"] { background: rgba(0, 0, 0, 0.35); }
.ambient[data-light="dark"] { background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.82)); }

/* ---------- 3D coin canvas ---------- */
#coin {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  pointer-events: none;
}
.coin-slot { aspect-ratio: 1; }

/* ---------- Nav ---------- */
.nav {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem var(--gutter);
}
.nav__brand { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; text-decoration: none; font: 400 1.5rem/1 var(--display); letter-spacing: 0.03em; }
.nav__links { display: flex; align-items: center; gap: clamp(0.8rem, 2.4vw, 2rem); }
.nav__links a { text-decoration: none; font: 600 0.9rem/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); transition: color 0.2s; }
.nav__links a:hover { color: var(--ink); }
.nav__links .nav__cta { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-blood); background: var(--blood); padding: 0 1.1rem; border-radius: 4px; }
.nav__links .nav__cta:hover { background: var(--blood-hover, var(--blood)); color: var(--on-blood); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.95rem 1.6rem;
  border-radius: 4px;
  font: 400 1.2rem/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.25s var(--ease-out), background 0.2s, box-shadow 0.25s, border-color 0.2s;
}
.btn--blood { background: var(--blood); color: var(--on-blood); box-shadow: 0 14px 34px -14px var(--glow); }
.btn--blood:hover { background: var(--blood-hover, var(--blood)); transform: translateY(-2px); box-shadow: 0 20px 44px -14px var(--glow); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: rgba(10, 6, 6, 0.55); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--small { min-height: 44px; padding: 0.7rem 1.1rem; font-size: 1rem; }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.link { color: var(--ink-2); text-underline-offset: 4px; text-decoration-color: var(--blood); font-weight: 600; }
.link:hover { color: var(--ink); }

/* ---------- Blood line: the story's progress, early October to the 17th ---------- */
/* Only on screen while the story runs. --p (0..1) is the story's progress, set from main.js */
.bloodline {
  --p: 0;
  position: fixed;
  z-index: 25;
  left: clamp(10px, 1.6vw, 26px);
  top: 50%;
  height: min(62vh, 560px);
  transform: translateY(-50%);
  width: 70px;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.bloodline.is-on { opacity: 1; }
.bloodline__rail { position: absolute; left: 13px; top: 0; bottom: 0; width: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
.bloodline__fill { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(180deg, var(--blood), var(--blood-hi)); box-shadow: 0 0 16px var(--glow); transform-origin: top; transform: scaleY(var(--p)); }
/* the drop at the tip of the blood */
.bloodline__head { position: absolute; left: 50%; top: calc(var(--p) * 100%); width: 20px; height: 22px; translate: -50% -60%; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--blood-hi); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), 0 0 18px 4px var(--glow); }
.bloodline__nodes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.bloodline__nodes li { position: absolute; left: 0; top: calc(var(--at) * 100%); display: flex; align-items: center; gap: 10px; translate: 0 -50%; }
.bloodline__nodes li::before { content: ""; box-sizing: border-box; width: 22px; height: 22px; margin-left: 6px; border-radius: 50%; background: #140909; border: 3px solid rgba(255, 255, 255, 0.5); transition: background 0.3s, border-color 0.3s, scale 0.3s var(--ease-out); }
.bloodline__nodes li.is-sub::before { width: 12px; height: 12px; margin-left: 11px; border-width: 2px; }
.bloodline__nodes li.is-hit::before { background: var(--blood-hi); border-color: #fff; scale: 1.12; }
.bloodline__nodes span { font: 400 1.15rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); text-shadow: 0 1px 2px #000, 0 0 10px #000; transition: color 0.3s; }
.bloodline__nodes li.is-hit span { color: #fff; }
@media (max-width: 900px) {
  .bloodline { top: 0; left: 0; right: 0; transform: none; width: auto; height: 6px; }
  .bloodline__rail { left: 0; right: 0; width: auto; height: 6px; border-radius: 0; box-shadow: none; }
  .bloodline__fill { border-radius: 0; transform-origin: left; transform: scaleX(var(--p)); }
  .bloodline__head, .bloodline__nodes { display: none; }
}

/* ---------- Hero ---------- */
/* Stamps waiting to slam in (scaled up) and the Limoges glow reach past the edge:
   clip them so the page never scrolls sideways or zooms out on phones. Pinned
   scenes are position: fixed while pinned, so this clip never touches them. */
main { position: relative; z-index: 10; overflow-x: hidden; overflow-x: clip; }
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: calc(100svh - 76px);
  padding: clamp(0.5rem, 1.5vw, 1.25rem) var(--gutter) clamp(3rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.title { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 0.86; }
.title__the { display: block; font-size: clamp(2.2rem, 6.4vw, 5.4rem); letter-spacing: 0.02em; color: var(--ink); }
.title__purge {
  position: relative;
  display: inline-block;
  font-size: clamp(6rem, 21vw, 13.5rem);
  letter-spacing: -0.01em;
  color: var(--blood);
  text-shadow: 0 0 60px var(--glow);
}
.title__purge .char { display: inline-block; }
.hero__sub { margin: clamp(3rem, 6vw, 5.2rem) 0 0.4rem; font: 800 clamp(1.15rem, 2vw, 1.5rem)/1.3 var(--body); }
.hero__meta { margin: 0 0 1.4rem; color: var(--ink-2); font-size: 0.98rem; }

/* Drips (generated in JS under [data-drips]) */
.drips { position: absolute; left: 0; right: 0; top: 88%; height: 0; pointer-events: none; }
.drips i { position: absolute; top: 0; display: block; background: currentColor; border-radius: 0 0 99px 99px; transform-origin: top; }
.drips b { position: absolute; left: 50%; bottom: 0; width: 165%; aspect-ratio: 0.82; transform: translate(-50%, 42%); background: currentColor; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.final__chars .char, .title__chars .char { display: inline-block; }

/* Countdown */
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; max-width: 440px; margin-bottom: 1.1rem; }
.countdown > div { padding: 0.65rem 0.4rem 0.6rem; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.countdown span { display: block; font: 400 clamp(1.9rem, 4vw, 2.8rem)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.countdown small { display: block; margin-top: 0.4rem; font: 700 0.8rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.countdown.is-live span { color: var(--blood-hi); }
.countdown--big { max-width: 620px; margin: 0 0 1.2rem; }
.countdown--big span { font-size: clamp(2.4rem, 7vw, 4.6rem); }

/* Contract address */
.ca { max-width: 560px; margin-bottom: 1.2rem; padding: 0.85rem 1rem; background: var(--panel); border: 1px dashed var(--line); border-radius: 4px; }
.ca__label { display: block; font: 700 0.8rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.ca__row { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.55rem; }
.ca__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 0.95rem/1.3 var(--mono); }
.ca__value.is-pending { color: var(--ink-2); }
.ca__copy { flex: none; min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--ink); font: 700 0.8rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s; }
.ca__copy:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.ca__copy:disabled { opacity: 0.4; cursor: not-allowed; }

.cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.hero__coin { width: 100%; max-width: 520px; justify-self: center; }

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; } /* minmax: long content (the blurred CA) never widens the column past the screen */
  .hero__coin { order: -1; max-width: 300px; margin-bottom: -1rem; }
}
@media (max-width: 480px) {
  .cta .btn { flex: 1 1 100%; }
  .countdown { gap: 0.4rem; }
}

/* ---------- Why ---------- */
.why { max-width: 1000px; margin: 0 auto; padding: clamp(5rem, 14vw, 11rem) var(--gutter); }
.why__title { margin: 0 0 3rem; font: 400 clamp(2.4rem, 6vw, 4.8rem)/0.95 var(--display); text-transform: uppercase; color: var(--blood-hi); }
.why__lines p { margin: 0 0 1.6rem; font: 800 clamp(1.5rem, 3.6vw, 2.6rem)/1.18 var(--body); letter-spacing: -0.01em; }
.why__lines em { font-style: normal; color: var(--red-label); }
.why__lines .line { overflow: hidden; padding-bottom: 0.06em; }

/* ---------- Chapters ---------- */
.ch { position: relative; padding: clamp(5rem, 12vw, 9rem) var(--gutter); }
.ch__date { margin: 0 0 0.8rem; font: 700 0.8rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-label); }
.ch__title { margin: 0 0 1.2rem; font: 400 clamp(2.8rem, 8vw, 6rem)/0.92 var(--display); text-transform: uppercase; }
.ch__body { margin: 0 0 1.6rem; max-width: 52ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-2); }
.ch__source { margin: 1.4rem 0 0; font-size: 0.8rem; color: var(--ink-2); }

.stat { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 1.6rem 0 0; }
.stat__num { font: 400 clamp(3.2rem, 8vw, 5.6rem)/0.9 var(--display); color: var(--blood-hi); font-variant-numeric: tabular-nums; }
.stat__label { max-width: 16ch; font: 800 1.05rem/1.25 var(--body); }

/* ---------- The map story: one pinned scene ---------- */
.story { position: relative; }
.story__stage {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  height: 100svh;
  padding: clamp(1rem, 3vw, 2rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.story__captions { position: relative; display: grid; }
.story__captions .cap { grid-area: 1 / 1; align-self: center; }
.cap__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin: 1.2rem 0 0; }
.story__view { position: relative; height: min(84svh, 760px); }

.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; --mix: 0; }
.map__outline, .map__corsica {
  fill: rgba(255, 255, 255, 0.03);
  stroke: color-mix(in srgb, var(--blood-hi) calc(var(--mix) * 100%), var(--ink));
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.map__city circle.dot { fill: var(--blood-hi); }
.map__city circle.halo { fill: var(--blood); opacity: 0.35; }
.map__city text { font: 700 18px/1 var(--mono); fill: var(--ink); letter-spacing: 0.06em; text-transform: uppercase; }

.stamp17 {
  position: absolute;
  left: 50%;
  top: 46%;
  translate: -50% -50%;
  padding: 0.05em 0.3em;
  border: 0.06em solid var(--blood-hi);
  border-radius: 0.05em;
  color: var(--blood-hi);
  background: rgba(7, 5, 5, 0.6);
  font: 400 clamp(4rem, 12vw, 10rem)/1 var(--display);
  letter-spacing: 0.02em;
  pointer-events: none;
}

.scene { position: absolute; inset: 0; pointer-events: none; }
.scene__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scene__fire { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__label { position: absolute; right: 0; bottom: -1.8rem; margin: 0; font: 700 0.8rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }

/* Limoges: the town hall */
.scene--limoges { --burn: 0; }
.th__body, .th__roof, .th__spire { fill: #0d0a0a; stroke: rgb(255 140 60 / calc(0.12 + var(--burn) * 0.55)); stroke-width: 1.5; }
.th__roof { fill: #151010; }
.th__win { fill: rgb(255 150 50 / calc(0.08 + var(--burn) * 0.9)); stroke: none; }
.th__clock { fill: rgb(255 214 150 / calc(0.25 + var(--burn) * 0.6)); }
.th__door { fill: rgb(255 120 30 / calc(0.1 + var(--burn) * 0.8)); }
.scene__glow { opacity: calc(var(--burn) * 0.85); }
.scene__ground { fill: #040303; }

/* Nice: the game store */
.st__wall { fill: #100c11; }
.st__upper rect { fill: #08070b; stroke: rgba(255, 255, 255, 0.08); }
.st__upper rect.is-lit { fill: #3a2a12; }
.st__band { fill: #050407; }
.st__neon { font: 400 46px/1 var(--display); fill: #ff3b55; letter-spacing: 0.06em; animation: neon 5s infinite steps(1); }
@keyframes neon { 0%, 100% { opacity: 1; } 32% { opacity: 1; } 33% { opacity: 0.3; } 34% { opacity: 1; } 71% { opacity: 1; } 72% { opacity: 0.4; } 74% { opacity: 1; } }
.st__front { fill: #060508; }
.st__window { fill: rgba(120, 150, 190, 0.08); stroke: rgba(255, 255, 255, 0.24); stroke-width: 3; }
.st__cracks polyline { fill: none; stroke: rgba(230, 240, 255, 0.7); stroke-width: 1.6; }
.st__door { fill: #1b130c; }
.st__figure { fill: #040306; }
.st__shards polygon { fill: rgba(220, 235, 255, 0.55); }

@media (max-width: 900px) {
  .story__stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; gap: 1rem; padding-top: 1.5rem; }
  .story__view { height: 46svh; }
  .story .ch__title { font-size: clamp(2.2rem, 10vw, 3rem); }
  .story .ch__body { font-size: 1rem; margin-bottom: 0.8rem; }
  .scene__label { bottom: -1.4rem; }
}

/* Without motion, the scene unrolls as a plain column */
.is-still .story__stage { height: auto; display: block; }
.is-still .story__captions { display: block; }
.is-still .story__captions .cap { margin-bottom: 3rem; }
.is-still .story__view { height: auto; }
.is-still .map__svg { position: relative; height: min(80vh, 700px); }
.is-still .scene { position: relative; inset: auto; height: min(70vh, 560px); margin-top: 3rem; }
.is-still .stamp17 { display: none; }

/* ---------- Coins board ---------- */
.coins { max-width: var(--maxw); margin: 0 auto; padding: clamp(5rem, 12vw, 9rem) var(--gutter); }
.coins__head { max-width: 900px; margin-bottom: 2.4rem; }
.board { border-top: 2px solid var(--blood); }
.board__row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 2.2fr) 0.7fr 0.9fr 0.9fr minmax(0, 1.4fr);
  grid-template-areas: "rank coin born ath now ca" ". line line line line line";
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 1.1rem 0.6rem;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s;
}
.board__row:hover { background: rgba(255, 255, 255, 0.03); }
.board__row--head { grid-template-areas: none; padding-top: 0.9rem; padding-bottom: 0.9rem; font: 700 0.78rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.board__row--head:hover { background: none; }
.board__rank { grid-area: rank; font: 400 2rem/1 var(--display); color: var(--blood-hi); }
.board__coin { grid-area: coin; display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.board__coin b { display: block; font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1 var(--display); letter-spacing: 0.02em; }
.board__coin small { display: block; margin-top: 0.3rem; color: var(--ink-2); font-size: 0.85rem; }
.board__logo { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--line); }
.board__logo--tick { display: grid; place-items: center; background: var(--blood-deep); color: var(--ink); font: 400 1.1rem/1 var(--display); }
.board__born { grid-area: born; }
.board__ath { grid-area: ath; color: var(--ink); }
.board__now { grid-area: now; color: var(--ink-2); }
.board__born, .board__ath, .board__now { font: 400 clamp(1.3rem, 2vw, 1.7rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.board em { display: none; margin-bottom: 0.35rem; font: 700 0.78rem/1 var(--mono); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.board__ca { grid-area: ca; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.8rem; }
.board__copy { min-height: 44px; padding: 0 0.8rem; border: 1px dashed var(--line); border-radius: 4px; background: transparent; color: var(--ink); font: 500 0.85rem/1 var(--mono); cursor: pointer; }
.board__copy:hover { border-style: solid; border-color: var(--ink); }
.board__line { grid-area: line; margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.tag-rip { flex: none; padding: 0.3rem 0.5rem; border: 2px solid var(--red-label); border-radius: 3px; color: var(--red-label); font: 400 0.85rem/1 var(--display); letter-spacing: 0.08em; transform: rotate(-6deg); }
.is-rip .board__now { color: var(--red-label); }
.board__row--next { grid-template-areas: "rank coin born ath now ca"; background: linear-gradient(90deg, rgba(196, 0, 30, 0.18), transparent 75%); border-bottom: 2px solid var(--blood); }
.board__row--next b, .board__row--next .board__ath, .board__row--next .board__rank { color: var(--red-label); }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-left: 0.4rem; border-radius: 50%; background: var(--ink-2); vertical-align: middle; }
.live-dot.is-on { background: #3ddc84; box-shadow: 0 0 8px #3ddc84; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.board__note { margin: 1rem 0 0; font-size: 0.8rem; color: var(--ink-2); }

@media (max-width: 900px) {
  .board__row--head { display: none; }
  .board__row, .board__row--next {
    grid-template-columns: 2.2rem repeat(3, minmax(0, 1fr));
    grid-template-areas: "rank coin coin coin" ". born ath now" ". ca ca ca" ". line line line";
    gap: 0.9rem 0.8rem;
    padding: 1.3rem 0;
  }
  .board__row--next { grid-template-areas: "rank coin coin coin" ". born ath now" ". ca ca ca"; }
  .board em { display: block; }
  .board__ca { justify-content: flex-start; }
}

/* RISE: what happened */
.rise {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin: clamp(5rem, 11vw, 9rem) 0 0;
}
.rise__copy { display: flex; flex-direction: column; }
.rise__title { order: 0; margin: 0 0 0.6rem; font: 400 clamp(2.4rem, 5.6vw, 4.4rem)/0.92 var(--display); text-transform: uppercase; }
.rise__copy .ch__date { order: 1; margin: 0 0 1.6rem; }
.rise__steps { order: 2; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.rise__steps li { display: grid; grid-template-columns: 5.2rem 1fr; gap: 1rem; align-items: baseline; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.rise__steps li:last-child { border-bottom: 1px solid var(--line); }
.rise__steps b { font: 400 1.6rem/1 var(--display); color: var(--blood-hi); font-variant-numeric: tabular-nums; }
.rise__steps span { color: var(--ink-2); font-size: 1.02rem; line-height: 1.45; }
.rise__chart { position: relative; padding-top: 5rem; }
.rise__svg { width: 100%; height: auto; overflow: visible; }
.rise__grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 6; }
.rise__line { fill: none; stroke: var(--blood-hi); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.rise__ghost { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-dasharray: 8 9; stroke-linecap: round; opacity: 0.75; }
.rise__ghostlabel { font: 700 13px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink-2); }
.rise__start { fill: var(--blood-hi); }
.rise__mark { font: 700 13px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink-2); }
.rise__peak { fill: var(--ink); }
.rise__peaklabel { font: 400 30px/1 var(--display); fill: var(--ink); }
.rise__stamp {
  position: absolute;
  right: 4%;
  top: 48%;
  padding: 0.5rem 0.9rem;
  border: 4px solid var(--blood-hi);
  border-radius: 4px;
  color: var(--blood-hi);
  background: var(--panel);
  font: 400 clamp(1.6rem, 3.4vw, 2.6rem)/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-12deg);
}
.rise__note { grid-column: 2; margin: 0; font-size: 0.84rem; color: var(--ink-2); }
@media (max-width: 900px) {
  .rise { grid-template-columns: 1fr; }
  .rise__note { grid-column: auto; }
  .rise__chart { padding-top: 3.5rem; }
}

/* This time: three lives */
.thistime { margin: clamp(5rem, 11vw, 8rem) 0 0; text-align: center; }
.thistime__title { margin: 0 auto 1rem; max-width: 16ch; font: 400 clamp(2.4rem, 6vw, 4.8rem)/0.92 var(--display); text-transform: uppercase; color: var(--ink); }
.thistime__body { margin: 0 auto 2.6rem; max-width: 52ch; color: var(--ink-2); font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.thistime__tiles { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.4rem); max-width: 980px; }
.tile {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  transition: border-color 0.4s, background 0.4s, opacity 0.4s;
}
.tile b { font: 400 clamp(1.8rem, 3.6vw, 2.8rem)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.tile__state { font: 700 0.8rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.tile__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink-2); transition: background 0.3s, box-shadow 0.3s; }
.tile.is-live { border-color: var(--blood); }
.tile.is-live .tile__dot { background: var(--blood-hi); box-shadow: 0 0 14px var(--blood-hi); animation: pulse 1.4s infinite; }
.tile.is-live .tile__state { color: var(--ink); }
.tile.is-banned > :not(.tile__stamp) { opacity: 0.45; }
.tile.is-banned .tile__dot { background: var(--ink-2); box-shadow: none; animation: none; }
.tile__stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding: 0.3rem 0.7rem;
  border: 4px solid var(--blood-hi);
  border-radius: 4px;
  color: var(--blood-hi);
  background: var(--panel);
  font: 400 clamp(1.4rem, 2.6vw, 2rem)/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
}
.tile__link { position: absolute; inset: 0; border-radius: 4px; }
.tile__link:focus-visible { outline-offset: -3px; }
@media (max-width: 640px) {
  .thistime__tiles { grid-template-columns: 1fr; }
}

/* ---------- Blood dividers ---------- */
.bleed { position: relative; z-index: 9; height: 12px; pointer-events: none; }
.bleed__band { position: absolute; inset: 0; background: var(--blood); box-shadow: 0 6px 40px var(--glow); }
.bleed__band i { position: absolute; top: 100%; margin-top: -2px; display: block; background: var(--blood); border-radius: 0 0 99px 99px; transform-origin: top; }
.bleed__band b { position: absolute; left: 50%; bottom: 0; width: 160%; aspect-ratio: 0.82; transform: translate(-50%, 42%); background: var(--blood); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }

/* October 24 */
.ch--24 { max-width: var(--maxw); margin: 0 auto; min-height: 70svh; display: flex; flex-direction: column; justify-content: center; }
.ch__title--flicker { animation: flicker 4.2s infinite steps(1); }
@keyframes flicker { 0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: 0.25; } 43% { opacity: 1; } 47% { opacity: 0.4; } 48% { opacity: 1; } 78% { opacity: 1; } 79% { opacity: 0.2; } 80% { opacity: 1; } }

/* October 31 */
.ch--31 { position: relative; padding-bottom: clamp(5rem, 10vw, 8rem); }
.big31 { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 0 var(--gutter); text-align: center; overflow: hidden; }
.big31__num {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font: 400 clamp(14rem, 48vw, 40rem)/0.8 var(--display);
  color: var(--blood);
  pointer-events: none;
  will-change: transform, opacity;
}
.is-still .big31__num { opacity: 0.14; }
.big31__copy { position: relative; z-index: 2; }
.big31__copy .ch__body { margin-left: auto; margin-right: auto; }
.final__title { margin: 0 0 2.4rem; font: 400 clamp(3.4rem, 11vw, 9rem)/0.88 var(--display); text-transform: uppercase; color: var(--blood); text-shadow: 0 0 60px var(--glow); }
.final__title > span { display: block; }
.final__title .final__purge { position: relative; display: inline-block; }
.live__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.live__list a, .live__list span { background: rgba(10, 6, 6, 0.78); display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.6rem 1rem; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; font: 600 0.95rem/1 var(--body); }
.live__list a::before, .live__list span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--blood-hi); box-shadow: 0 0 10px var(--blood-hi); }
.live__list span { color: var(--ink-2); }
.live__list span::before { background: var(--ink-2); box-shadow: none; }

/* ---------- Embers & film grain ---------- */
.embers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.grain {
  position: fixed;
  inset: -50%;
  z-index: 39;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-5%, 3%); } 40% { transform: translate(4%, -6%); } 60% { transform: translate(-3%, 5%); } 80% { transform: translate(6%, 2%); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .grain, .st__neon { animation: none; } }


/* ---------- Footer ---------- */
/* Full width, so its night band reaches both edges with no box; the text keeps the page column */


/* Clickable zone over the coin when it sits in the corner */
.coin-hit {
  position: fixed;
  z-index: 35;
  right: 18px;
  bottom: 44px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: end center;
  text-decoration: none;
  opacity: 0;
  visibility: hidden; /* out of the tab order while it is not on screen */
  pointer-events: none;
  transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.coin-hit span { transform: translateY(1.6rem); padding: 0.3rem 0.6rem; background: var(--blood); color: var(--on-blood); border-radius: 3px; font: 400 0.85rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.coin-hit.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 76px;
  transform: translate(-50%, 20px);
  opacity: 0;
  padding: 0.8rem 1.2rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: 4px;
  font: 700 0.85rem/1 var(--mono);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.35s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ch__title--flicker { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------- Layering & headline order ---------- */
/* Blood dividers hang behind the text of the next section */
.bleed { z-index: 0; }
main > section { position: relative; z-index: 1; }
/* Dates read under their heading, never as a kicker above it */
.cap, .coins__head, .ch--24, .big31__copy { display: flex; flex-direction: column; }
.big31__copy { align-items: center; }
.cap > *, .coins__head > *, .ch--24 > *, .big31__copy > * { order: 2; }
.cap > .ch__title, .coins__head > .ch__title, .ch--24 > .ch__title, .big31__copy > .final__title { order: 0; }
.cap > .ch__date, .coins__head > .ch__date, .ch--24 > .ch__date, .big31__copy > .ch__date { order: 1; margin: -0.2rem 0 1.2rem; }
.ch--24 > .ch__date { margin-top: 0.4rem; }
/* Small screens: the nav keeps only what matters */
@media (max-width: 560px) {
  .nav__links a[href="#story"], .nav__links a[href="#buy"]:not(.nav__cta) { display: none; }
}
/* The pinned story keeps its z-index while fixed, so it stays above the drips */
.story, .coins, .ch--24, .ch--31 { position: relative; z-index: 2; }

/* ---------- Language toggle ---------- */
.nav__lang { min-height: 44px; min-width: 44px; padding: 0 0.7rem; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--ink); font: 700 0.8rem/1 var(--mono); letter-spacing: 0.12em; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.nav__lang:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.05); }

/* ---------- Protest placards (background) ---------- */
.crowd { position: absolute; left: 0; top: 0; width: 100%; z-index: 3; overflow: hidden; pointer-events: none; }
.placard {
  position: absolute;
  left: var(--x);
  top: 0;
  width: calc(230px * var(--s));
  opacity: var(--o);
  filter: blur(var(--b));
  transform-origin: 50% 100%;
  rotate: var(--rot);
  animation: sway var(--sway) ease-in-out var(--delay) infinite alternate;
}
@keyframes sway { from { rotate: calc(var(--rot) - 3deg); } to { rotate: calc(var(--rot) + 3deg); } }
.placard__board {
  padding: 0.7em 0.55em;
  background: linear-gradient(160deg, #cfa66e, #a57b47);
  color: #1b120c;
  font: 400 calc(30px * var(--s))/1.02 "Permanent Marker", var(--display);
  text-align: center;
  text-wrap: balance;
  border-radius: 3px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
}
.placard.is-red .placard__board { color: #a3001a; }
.placard__stick { display: block; width: calc(12px * var(--s)); height: calc(170px * var(--s)); margin: -2px auto 0; background: linear-gradient(90deg, #4a3018, #7a5634, #4a3018); }
.is-still .placard { animation: none; }
@media (prefers-reduced-motion: reduce) { .placard { animation: none; } }

/* ---------- The 31st: the $PURGE reaper, gilet jaune on, France in his hand ---------- */
.big31 { place-items: start center; padding-top: clamp(4.5rem, 13svh, 8.5rem); }
.big31__num { z-index: 1; }
/* The robe dissolves into the night before the section ends: no box, no hard cut */
.reaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 15svh), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 15svh), transparent);
}
.reaper__svg { position: absolute; left: 50%; bottom: 0; height: min(100svh, 165vw); aspect-ratio: 1; translate: -50% 0; overflow: visible; }
/* Flat like the profile picture; a thin rim of fire light from behind */
.reaper__robe { fill: url(#robe); stroke: rgb(255 60 60 / 0.28); stroke-width: 3; }
.reaper__hood { fill: url(#hood); stroke: rgb(255 60 60 / 0.22); stroke-width: 3; }
.reaper__shine { fill: none; stroke: #6d6582; stroke-width: 8; stroke-linecap: round; }
.reaper__face { fill: #0b090e; }
.reaper__eyes ellipse { fill: #ff2b2b; animation: eyes 7s infinite steps(1); }
@keyframes eyes { 0%, 100% { opacity: 1; } 46% { opacity: 1; } 47% { opacity: 0.1; } 48% { opacity: 1; } 49% { opacity: 0.2; } 50% { opacity: 1; } }
.reaper__shaft { stroke: #8a7254; stroke-width: 15; stroke-linecap: round; }
.reaper__blade { fill: url(#blade); }
.reaper__edge { fill: none; stroke: #b2a891; stroke-width: 5; stroke-linecap: round; }
.reaper__collar { fill: #5a4936; }
.reaper__sleeve { fill: #423c4c; stroke: rgb(255 60 60 / 0.2); stroke-width: 2; }
.reaper__hand path { fill: #e9e2d3; }
.reaper__hand .hand__gap { fill: none; stroke: #b4a993; stroke-width: 2.5; stroke-linecap: round; }
.vest__body { fill: url(#vest); stroke: #6f8008; stroke-width: 3; }
.vest__band { fill: url(#band); }
.vest__shadow { fill: #000; opacity: 0.32; }
.vest__zip { fill: none; stroke: #8a9c0a; stroke-width: 4; }
.vest__text { font: 400 34px "Permanent Marker", cursive; fill: #141010; }
.reaper__france { fill: url(#francefill); stroke: #ff5a6a; stroke-width: 2.5; stroke-linejoin: round; }
.reaper__cities circle { fill: #ffd27a; }
.is-still .reaper__eyes ellipse { animation: none; }
/* Phones: the text column is full width, so the placards step further back */
@media (max-width: 700px) { .placard { opacity: calc(var(--o) * 0.55); } }

/* ---------- Contract column centred + DexScreener chart buttons ---------- */
.board__ca { justify-content: center; }
.board__row--head > span:last-child { text-align: center; }
.board__chart {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font: 600 0.88rem/1 var(--body);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.board__chart img { width: 20px; height: 20px; border-radius: 4px; }
.board__chart:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.btn--icon { gap: 0.6rem; }
.btn--icon img { width: 22px; height: 22px; border-radius: 5px; }
@media (max-width: 900px) { .board__ca { justify-content: flex-start; } }

/* ---------- Platform icons (live) ---------- */
.tile__icon { display: grid; place-items: center; width: 52px; height: 52px; color: var(--ink); }
.tile__icon svg, .tile__icon img { width: 100%; height: 100%; object-fit: contain; }
.tile__state { display: inline-flex; align-items: center; gap: 0.5rem; }
.tile__dot { width: 9px; height: 9px; }
.live__icon { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--ink); }
.live__icon svg, .live__icon img { width: 100%; height: 100%; object-fit: contain; }
.live__list .has-icon::before { display: none; }
/* The icon is a span inside the pill: it must not inherit the pill's box */
.live__list .live__icon { min-height: 0; padding: 0; border: 0; border-radius: 0; }
.live__list .live__icon::before { display: none; }

/* ==========================================================================
   v4: the march, fireworks colours, thrown placards, countdown drums, fuse
   ========================================================================== */
:root { --fw: 255,59,79|255,240,230|255,150,60; --crowd-far: #2a1112; --crowd-mid: #160909; --crowd-near: #050303; --crowd-glow: rgba(224, 16, 46, 0.18); }

/* The march: three rows of silhouettes along the bottom, drifting left */
.march { position: fixed; left: 0; right: 0; bottom: 0; height: 27vh; z-index: 4; pointer-events: none; overflow: hidden; }
.march::before { content: ""; position: absolute; inset: -40% 0 0; background: radial-gradient(ellipse 70% 80% at 50% 100%, var(--crowd-glow), transparent 70%); }
.march__row { position: absolute; left: 0; bottom: -2px; height: 100%; width: auto; overflow: visible; animation: march var(--speed) linear infinite; }
.march__row--far { --speed: 160s; height: 72%; fill: var(--crowd-far); opacity: 0.9; filter: blur(1px); }
.march__row--mid { --speed: 115s; height: 86%; fill: var(--crowd-mid); }
.march__row--near { --speed: 80s; height: 100%; fill: var(--crowd-near); }
.march__row .m-arm { stroke: currentColor; stroke-linecap: round; fill: none; }
.march__row--far { color: var(--crowd-far); }
.march__row--mid { color: var(--crowd-mid); }
.march__row--near { color: var(--crowd-near); }
.march__row .m-pumpkin { fill: #e8650a; filter: drop-shadow(0 0 6px rgba(255, 120, 20, 0.7)); }
@keyframes march { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 700px) { .march { height: 19vh; } }
.is-still .march__row { animation: none; }
@media (prefers-reduced-motion: reduce) { .march__row { animation: none; } }


/* Countdown: split-flap cells with rolling digit drums */
.countdown > div { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0 50%, rgba(0, 0, 0, 0.18) 50% 100%), var(--panel); }
.countdown > div::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 0.75rem); height: 1px; background: rgba(0, 0, 0, 0.55); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); pointer-events: none; }
.cd-num { display: flex !important; justify-content: center; }
.cd-drum { position: relative; display: inline-grid; height: 1em; overflow: hidden; line-height: 1; }
.cd-drum i { grid-area: 1 / 1; font-style: normal; }
.countdown > div.is-tick { animation: tick 0.7s ease-out; }
@keyframes tick { from { box-shadow: 0 0 0 1px var(--blood-hi), 0 0 30px -4px var(--glow); } to { box-shadow: 0 0 0 1px transparent, 0 0 0 0 transparent; } }

/* The fuse: burns from right to left until midnight on the 31st */
.fuse { --left: 1; position: relative; max-width: 440px; height: 22px; margin: 0.2rem 0 0.4rem; }
.fuse--big { max-width: 620px; }
.fuse__rope, .fuse__burnt { position: absolute; top: 50%; height: 5px; translate: 0 -50%; border-radius: 3px; }
.fuse__rope { left: 0; width: calc(var(--left) * 100%); background: repeating-linear-gradient(115deg, #c8a676 0 6px, #8c6c42 6px 10px); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
.fuse__burnt { right: 0; width: calc((1 - var(--left)) * 100%); background: repeating-linear-gradient(115deg, #2a2420 0 6px, #1a1614 6px 10px); opacity: 0.8; }
.fuse__spark { position: absolute; top: 50%; left: calc(var(--left) * 100%); width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff6d0 0 25%, #ffb02a 45%, rgba(255, 80, 20, 0) 72%); box-shadow: 0 0 16px 4px rgba(255, 150, 40, 0.8); animation: sparkle 0.18s steps(2) infinite; }
.fuse__spark i { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #ffd27a; animation: spit 0.6s linear infinite; }
.fuse__spark i:nth-child(2) { animation-delay: -0.2s; --dx: -14px; --dy: -12px; }
.fuse__spark i:nth-child(3) { animation-delay: -0.4s; --dx: 10px; --dy: -16px; }
@keyframes sparkle { 50% { scale: 1.25; } }
@keyframes spit { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx, 12px), var(--dy, -10px)); opacity: 0; } }
.fuse__label { margin: 0 0 1.2rem; font: 700 0.8rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.is-still .fuse__spark, .is-still .fuse__spark i { animation: none; }
@media (prefers-reduced-motion: reduce) { .fuse__spark, .fuse__spark i { animation: none; } }
/* v4 tuning: the drum must stack its digits; the crowd steps back behind the text */
.countdown .cd-drum { display: inline-grid; }
.march { height: 21vh; }
@media (max-width: 700px) { .march { height: 15vh; } }
.board { background: var(--panel); }
/* Phones: the nav keeps the brand, the action and the language */
@media (max-width: 560px) { .nav__links a[href="#coins"] { display: none; } .nav__links { gap: 0.6rem; } }

/* ==========================================================================
   v5: blood moon, Paris skyline, graffiti wall, flying coin slots, the reaper's vest
   ========================================================================== */
:root { --skyline: #0d0606; --skyline-far: #1a0909; --win: #ffb347; --moon-a: #ff6a4a; --moon-b: #8a0a0a; --moon-glow: rgba(255, 60, 40, 0.35); }

/* Blood moon */
.moon {
  position: fixed;
  z-index: 1;
  top: 9vh;
  right: 9vw;
  width: min(30vmin, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 34%, rgba(0, 0, 0, 0.18) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 58%, rgba(0, 0, 0, 0.16) 0 13%, transparent 14%),
    radial-gradient(circle at 46% 78%, rgba(0, 0, 0, 0.14) 0 6%, transparent 7%),
    radial-gradient(circle at 36% 32%, var(--moon-a), var(--moon-b) 75%);
  box-shadow: 0 0 80px 10px var(--moon-glow), 0 0 220px 60px var(--moon-glow);
  opacity: 0.85;
}
@media (max-width: 700px) { .moon { top: 14vh; right: -6vw; width: 34vmin; opacity: 0.6; } }

/* Paris skyline behind the march */
/* Raised so the monuments clear the march in front of them */
.skyline { position: fixed; left: 0; right: 0; bottom: 12vh; height: 40vh; z-index: 3; pointer-events: none; }
@keyframes winflick { 0%, 100% { opacity: 0.55; } 30% { opacity: 0.55; } 31% { opacity: 0.1; } 34% { opacity: 0.55; } 70% { opacity: 0.25; } 72% { opacity: 0.6; } }
@keyframes eiffel { 0%, 100% { opacity: 0; } 8% { opacity: 1; } 16% { opacity: 0; } }
.skyline::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(to top, var(--bg), transparent); opacity: 0.6; }
@media (max-width: 700px) { .skyline { height: 30vh; bottom: 8vh; } }

/* Graffiti wall: tags, stickers, doodles, sprayed on as they enter */
.graffiti { position: absolute; left: 0; top: 0; width: 100%; z-index: 3; overflow: hidden; pointer-events: none; }
.g { position: absolute; left: var(--x); top: 0; rotate: var(--rot); opacity: 0; white-space: nowrap; }
.g.is-sprayed { opacity: var(--o, 0.9); animation: spray 0.7s steps(7) both; }
@keyframes spray { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -10% 0 0); } }
.g--tag { font-size: calc(3.2rem * var(--size, 1)); line-height: 1; color: var(--c); text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.75), 0 0 18px rgba(0, 0, 0, 0.4); }
.g-sedg { font-family: "Sedgwick Ave Display", "Permanent Marker", cursive; }
.g-wet { font-family: "Rubik Wet Paint", "Permanent Marker", cursive; }
.g-mark { font-family: "Permanent Marker", cursive; }
.g--sticker {
  padding: 0.45em 0.8em;
  font: 800 calc(0.95rem * var(--size, 1))/1.1 var(--body);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #111;
  background: #f4f0ea;
  border: 3px solid #111;
  border-radius: 999px;
  box-shadow: 0 0 0 4px #f4f0ea, 0 10px 24px rgba(0, 0, 0, 0.5);
}
.g--sticker:nth-child(3n) { background: #8dff3a; box-shadow: 0 0 0 4px #8dff3a, 0 10px 24px rgba(0, 0, 0, 0.5); }
.g--sticker:nth-child(3n + 1) { background: #ffd23f; box-shadow: 0 0 0 4px #ffd23f, 0 10px 24px rgba(0, 0, 0, 0.5); }
.g--doodle { width: calc(120px * var(--size, 1)); }
.g--doodle svg { width: 100%; height: auto; fill: none; stroke: var(--c); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.6)); }
.g--on { position: absolute; z-index: 3; opacity: 0; font-size: calc(2.4rem * var(--size, 1)); pointer-events: none; }
.g--on.is-sprayed { opacity: 0.92; }
@media (max-width: 700px) { .g.g--on { display: none; } } /* .g.g--on: beats .final__title > span */
.is-still .g.is-sprayed { animation: none; }
@media (prefers-reduced-motion: reduce) { .g.is-sprayed { animation: none; } }

/* Flying coin: side slots it lands in (desktop only) */
.why, .coins, .thistime, .ch--24 { position: relative; }
.coin-slot--side { position: absolute; pointer-events: none; }
.coin-slot--why { right: max(-14vw, -220px); top: 34%; width: 200px; }
.coin-slot--coins { right: var(--gutter); top: clamp(3rem, 8vw, 6rem); width: 230px; }
.coin-slot--this { left: 4%; top: -1rem; width: 170px; }
.coin-slot--d24 { right: 8%; top: clamp(3rem, 8vw, 6rem); width: 230px; } /* beside the title, clear of the figures */
@media (max-width: 1100px) { .coin-slot--why { right: 0; top: -4rem; width: 150px; } }
@media (max-width: 900px) { .coin-slot--side { display: none; } }

/* v5 tuning */
/* The reaper sits lower so the line under the title stays clear of the gilet jaune */
.reaper__svg { bottom: -9svh; }
/* Phones: the whole reaper fits the width, France and the scythe included */
@media (max-width: 700px) { .reaper__svg { height: min(100svh, 122vw); bottom: 0; } }
.big31__copy .ch__body { text-shadow: 0 2px 14px #000, 0 0 3px #000; }
/* The city reads against a fire-lit horizon */
.skyline::before { content: ""; position: absolute; inset: -10% -5% 0; background: radial-gradient(ellipse 65% 75% at 50% 100%, rgba(255, 90, 30, 0.16), transparent 72%); }
/* Graffiti on the right edge hangs from the right, so it never gets cut off */
.g--right { left: auto; right: var(--xr); }
/* Phones: the reading column is the whole width, so the wall steps back behind it */
@media (max-width: 700px) { .graffiti .g.is-sprayed { opacity: calc(var(--o, 0.9) * 0.5); } }

/* ==========================================================================
   v6: smoke sky (WebGL), the spray can, wall tags that drip
   ========================================================================== */
:root { --smoke-tint: 1, 1, 1; --smoke-alpha: 1; }
:root {
  --can-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23e8132f' stroke='%230b0606' stroke-width='.6'%3E%3Ccircle cx='5' cy='5' r='2.4'/%3E%3Ccircle cx='10.2' cy='3.6' r='1.3'/%3E%3Ccircle cx='3.6' cy='10.2' r='1.3'/%3E%3Ccircle cx='9.6' cy='8.8' r='1.6'/%3E%3Ccircle cx='13.4' cy='6.8' r='1'/%3E%3C/g%3E%3Cg stroke='%230b0606' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M18.5 11h-3.5' fill='none' stroke='%23f4f0ea'/%3E%3Crect x='18.5' y='8.5' width='6.5' height='4.6' rx='1' fill='%23f4f0ea'/%3E%3Crect x='16' y='13.1' width='11.5' height='17' rx='2.6' fill='%23f4f0ea'/%3E%3Crect x='16' y='18' width='11.5' height='4.6' fill='%23e8132f'/%3E%3C/g%3E%3C/svg%3E") 5 5;
}

/* To the moon: a Starship orbits the blood moon (fx.js), a $PURGE flag is planted on top */
/* The moon sits low enough for its flag to stand on top, clear of the nav, on any screen */
:root { --moon-d: min(30vmin, 300px); --moon-top: max(16vh, calc(100px + var(--moon-d) * 0.18)); }
@media (max-width: 700px) { :root { --moon-d: 34vmin; --moon-top: max(15vh, calc(100px + var(--moon-d) * 0.18)); } }
.moon, .moon-peek { top: var(--moon-top); }
.starship { position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; will-change: transform; filter: drop-shadow(0 0 6px rgba(255, 90, 60, 0.4)); }
.starship svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ss-flame { transform-origin: 20px 188px; animation: ssflame 0.14s steps(2) infinite; }
@keyframes ssflame { 50% { transform: scaleY(0.75); } }
/* planted upright on top of the moon (just right of the summit; just left of it on phones,
   where the moon's right side is off screen) */
.moon__flag { position: absolute; left: 65.5%; top: 2.4%; width: 0; height: 0; }
@media (max-width: 700px) { .moon__flag { left: 41.3%; top: 0.8%; } }
.moon__pole { position: absolute; left: -1.5px; bottom: 0; width: 3px; height: calc(var(--moon-d) * 0.2); background: #ece7de; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.moon__cloth {
  position: absolute;
  left: 1px;
  bottom: calc(var(--moon-d) * 0.2);
  translate: 0 100%; /* hangs from the top of the pole */
  padding: 0.28em 0.5em 0.24em;
  background: #0b0b0c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 4px 10px rgba(0, 0, 0, 0.45);
  color: #fff;
  font: 400 max(13px, calc(var(--moon-d) * 0.08))/1 var(--display);
  letter-spacing: 0.04em;
  white-space: nowrap;
  transform-origin: 0 50%;
  animation: cloth 2.6s ease-in-out infinite;
}
@keyframes cloth { 50% { transform: skewY(-5deg) scaleX(0.92); } }
.is-still .ss-flame, .is-still .moon__cloth { animation: none; }

/* Elon pops out from behind the moon's left flank every 5 s. The box mirrors the
   moon; the arm sits on the rim and points outward; the drawing's own curved chin
   line (76% down) rests on the rim, so the head clears it and the fingers grip it. */
.moon-peek { position: fixed; z-index: 1; top: var(--moon-top); right: 9vw; width: var(--moon-d); aspect-ratio: 1; pointer-events: none; }
@media (max-width: 700px) { .moon-peek { right: -6vw; } }
.moon-peek__arm { position: absolute; left: 8%; top: 31.3%; width: 0; height: 0; rotate: -68deg; }
.moon-peek__elon {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--moon-d) * 0.55);
  height: auto;
  max-width: none;
  translate: -50% -76%;
  transform-origin: 50% 76%;
  animation: elon-pop 5s 1.2s infinite both;
}
@media (max-width: 700px) { .moon-peek__elon { width: calc(var(--moon-d) * 0.62); } }
/* 0.3 s pop with a little overshoot, a look round, ducks back at 2.8 s, rests */
@keyframes elon-pop {
  0% { transform: scale(0) rotate(-8deg); opacity: 0; }
  6% { transform: scale(1.12) rotate(4deg); opacity: 1; }
  10% { transform: scale(0.96) rotate(-2deg); }
  13% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1) rotate(-5deg); }
  42% { transform: scale(1) rotate(3deg); }
  50% { transform: scale(1) rotate(0deg); opacity: 1; }
  56%, 100% { transform: scale(0) rotate(10deg); opacity: 0; }
}
.is-still .moon-peek__elon { animation: none; }

/* The smoke sky: between the moon and the chapter light, fades in once WebGL runs */
.smoke { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.8s var(--ease-out); }
.has-smoke .smoke { opacity: 1; }
/* The shader draws the moon's glow into the smoke, so the disc keeps a short one */
.has-smoke .moon { box-shadow: 0 0 60px 6px var(--moon-glow); }

/* Wall tags spray on with a soft edge (spray.js blows the mist), then the paint runs */
.g.is-sprayed {
  animation: spray-in 0.7s linear;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
.g.is-dry { -webkit-mask-image: none; mask-image: none; }
@keyframes spray-in { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.g--sticker.is-sprayed { -webkit-mask-image: none; mask-image: none; animation: slap 0.42s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes slap { from { opacity: 0; scale: 1.7; } }
.g__drip {
  position: absolute;
  top: 74%;
  width: var(--w, 3px);
  height: var(--len, 30px);
  margin-left: calc(var(--w, 3px) / -2);
  background: var(--c);
  border-radius: 0 0 99px 99px;
  rotate: calc(var(--rot, 0deg) * -1); /* hangs straight down whatever the tag's angle */
  transform-origin: 50% 0;
  transform: scaleY(0);
  pointer-events: none;
}
.g__drip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--w, 3px) * -1);
  width: calc(var(--w, 3px) * 2.1);
  height: calc(var(--w, 3px) * 2.5);
  translate: -50% 0;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: inherit;
}
.g.is-dry .g__drip { animation: g-drip var(--dur, 2s) var(--dl, 0.3s) cubic-bezier(0.5, 0, 0.75, 0.6) forwards; }
@keyframes g-drip { to { transform: scaleY(1); } }
.is-still .g__drip { animation: none; transform: none; }

/* Paint on the wall (page coordinates) and the passing mist (viewport) */
.paint { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.paint canvas { position: absolute; left: 0; display: block; transition: opacity 8s linear; }
.mist { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* The can */
.spray { --paint: #e8132f; position: fixed; z-index: 46; left: 16px; bottom: 16px; }
.spray__can {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(10, 6, 6, 0.92);
  color: #f3ece6;
  font: 400 1rem/1 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.8);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.25s var(--ease-out);
}
.spray__can:hover { border-color: rgba(255, 255, 255, 0.42); transform: translateY(-2px); }
/* A round can by default; the name slides out on hover, on focus, and once after the first screen */
.spray__label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.4s var(--ease-out), opacity 0.25s, margin 0.4s var(--ease-out); }
@media (hover: hover) { .spray__can:hover .spray__label { max-width: 12rem; opacity: 1; margin: 0 0.55rem 0 0.4rem; } }
.spray__can:focus-visible .spray__label, .spray.is-peek .spray__label { max-width: 12rem; opacity: 1; margin: 0 0.55rem 0 0.4rem; }
.spray__can:active { transform: scale(0.97); }
.spray__can[aria-pressed="true"] { border-color: var(--paint); box-shadow: inset 0 0 0 1px var(--paint), 0 16px 40px -16px rgba(0, 0, 0, 0.8); }
.spray__icon { flex: none; width: 32px; height: 32px; overflow: visible; transition: rotate 0.35s var(--ease-out); }
.can-body, .can-head { fill: #f4f0ea; stroke: #0b0606; stroke-width: 1.4; }
.can-band { fill: var(--paint); stroke: #0b0606; stroke-width: 1.4; }
.can-nozzle { fill: none; stroke: #f4f0ea; stroke-width: 1.6; stroke-linecap: round; }
.can-mist { fill: var(--paint); opacity: 0; transition: opacity 0.2s; }
.spray__can:hover .can-mist, .spray.is-open .can-mist { opacity: 1; }
.spray.is-open .spray__icon { rotate: -16deg; }
.is-tagging .spray__icon { animation: rattle 0.16s linear infinite; }
@keyframes rattle { 25% { translate: 0 -1px; } 75% { translate: 0 1px; } }
.spray__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(300px, calc(100vw - 32px));
  padding: 6px 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(10, 6, 6, 0.94);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.8);
  visibility: hidden;
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.2s, translate 0.3s var(--ease-out), visibility 0s linear 0.3s;
}
.spray.is-open .spray__panel { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
.spray__colors { display: flex; gap: 2px; }
.spray__swatch { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.spray__swatch::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--sw); transition: transform 0.2s var(--ease-out), box-shadow 0.2s; }
.spray__swatch:hover::before { transform: scale(1.14); }
.spray__swatch[aria-pressed="true"]::before { transform: scale(1.2); box-shadow: 0 0 0 3px #0b0606, 0 0 0 5px var(--sw); }
.spray__hint { margin: 4px 6px 0; max-width: 34ch; font: 500 0.8rem/1.45 var(--mono); color: #cbbfba; }
/* Open can: a sheet over the page catches every stroke, fingers included */
.spray-catch { position: fixed; inset: 0; z-index: 44; touch-action: none; cursor: var(--can-cursor), crosshair; }
.is-tagging, .is-tagging * { -webkit-user-select: none; user-select: none; }
/* With a mouse, the empty wall wears the can; text and controls keep their own cursor */
@media (pointer: fine) {
  body { cursor: var(--can-cursor), auto; }
  :where(p, h1, h2, h3, h4, li, small, code, em, strong, label, figcaption, blockquote, dd, dt, td, th, input, textarea) { cursor: auto; }
  :where(button, [role="button"], summary) { cursor: pointer; }
}

/* ==========================================================================
   v7: the street (street.js): three Paris scenes behind the march, readable
   placards, French flags, fumigènes
   ========================================================================== */
/* Scenes swap as the story moves on: the old one sinks, the new one rises */
.sk-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; opacity: 0; translate: 0 9%; transition: opacity 0.9s var(--ease-out), translate 1.3s var(--ease-out); }
.skyline[data-scene="eiffel"] .sk-scene--eiffel,
.skyline[data-scene="arc"] .sk-scene--arc,
.skyline[data-scene="rep"] .sk-scene--rep { opacity: 1; translate: 0 0; }
.is-still .sk-scene { transition: none; }
.sk-back { fill: color-mix(in srgb, var(--skyline-far) 70%, #5a1a10); }
.sk-back--near { fill: color-mix(in srgb, var(--skyline-far) 55%, #2a0d0a); }
.sk-front { fill: color-mix(in srgb, var(--skyline) 80%, #3a1010); stroke: rgba(255, 110, 50, 0.18); stroke-width: 1.5; }
.sk-wins rect { fill: var(--win); opacity: 0.55; animation: winflick 9s infinite steps(1); }
.sk-wins--back rect { opacity: 0.3; }
/* The Eiffel Tower, lit gold, its lattice, its beacon and its sparkle */
.sk-eiffel { filter: drop-shadow(0 0 10px rgba(255, 170, 60, 0.45)); }
.sk-lattice { fill: none; stroke: rgba(255, 228, 165, 0.42); stroke-width: 1; }
.sk-lamp { fill: #fffbe8; filter: drop-shadow(0 0 6px #fff1c4); }
/* The beacon's two beams on their own layer: the sweep (scaleX through 0 = turning towards
   us and away) runs on the compositor and never repaints the city */
.sk-beam { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity 0.9s var(--ease-out); transform-origin: 0 0; animation: beacon 7s ease-in-out infinite; }
.skyline[data-scene="eiffel"] .sk-beam { opacity: 1; }
.sk-beam i { position: absolute; top: calc(var(--w) / -2); left: 0; width: var(--len); height: var(--w); background: linear-gradient(90deg, rgba(255, 246, 220, 0.5), rgba(255, 246, 220, 0)); clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%); }
.sk-beam i:last-child { left: auto; right: 0; transform: scaleX(-1); transform-origin: 100% 50%; }
@keyframes beacon { 0%, 100% { transform: scaleX(1); } 25% { transform: scaleX(0.04); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(-0.04); } }
.sk-spark { fill: #fff6d8; opacity: 0; animation: eiffel 3s infinite; }
/* The Arc de Triomphe, floodlit, the giant flag swaying under the vault */
.sk-arc { filter: drop-shadow(0 0 12px rgba(255, 160, 80, 0.32)); }
.sk-arc-dark { fill: rgba(60, 36, 18, 0.55); }
.sk-arc-lit { fill: #e2b574; }
.sk-arc-fig { fill: none; stroke: rgba(40, 24, 10, 0.45); stroke-width: 2.4; }
.sk-arc-relief { fill: #bf904f; stroke: rgba(60, 36, 18, 0.5); stroke-width: 2; }
.sk-flag-hang { transform-box: fill-box; transform-origin: 50% 0; animation: hang 5s ease-in-out infinite alternate; }
@keyframes hang { from { transform: skewX(-2.5deg); } to { transform: skewX(2.5deg) scaleY(0.98); } }
.sk-climber { fill: #120707; }
.sk-pole { fill: none; stroke: #120707; stroke-width: 2.4; stroke-linecap: round; }
/* République: stone and bronze lit from below by the flares, Marianne in her gilet jaune */
.sk-trees { fill: #0c0907; }
.sk-monument { fill: #8e7a5e; filter: drop-shadow(0 0 14px rgba(255, 90, 60, 0.35)); }
.sk-stone-lit { fill: #b8a07c; }
.sk-bronze { fill: #3c382b; }
.sk-marianne { fill: #6e6650; filter: drop-shadow(0 0 3px rgba(255, 210, 160, 0.55)) drop-shadow(0 0 14px rgba(255, 120, 80, 0.45)); }
.sk-limb { fill: none; stroke: #6e6650; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.sk-limb--thin { stroke-width: 2.4; }
.sk-vest > path { fill: #d8ff1c; }
.sk-vest-band { fill: #e8eef2; }
.sk-steps { fill: #0a0505; }
/* French flags: the same three colours wherever they fly. The march's flags keep their drawn
   wave without animating: an animation inside a drifting row would repaint the whole row */
.m-blue { fill: #1f53a6; }
.m-white { fill: #ece9e2; }
.m-red { fill: #d62a3c; }
/* The march: opaque placards, slogans set to fit, phones up, fumigènes */
.march__row .m-board { stroke: rgba(20, 12, 8, 0.85); stroke-width: 1.6; }
.march__row--far .m-board { fill: #4a3a28; stroke: none; }
.m-text { font-family: "Permanent Marker", var(--display); }
.m-stick { fill: none; stroke: #3a2a1a; stroke-linecap: round; }
.m-flare { fill: #ffe2d8; filter: drop-shadow(0 0 4px #ff3b2a) drop-shadow(0 0 10px #ff2a00); }
.m-phone { fill: #dcefff; filter: drop-shadow(0 0 5px rgba(190, 220, 255, 0.9)); }
.march__row--far .m-blue, .march__row--far .m-white, .march__row--far .m-red { opacity: 0.55; }
.march__row--mid .m-blue, .march__row--mid .m-white, .march__row--mid .m-red { opacity: 0.8; }
/* The smoke off the fumigènes: under the crowd, over the city */
.fumes { position: fixed; left: 0; bottom: 0; width: 100%; height: 62vh; z-index: 4; pointer-events: none; }
.is-still .sk-wins rect, .is-still .sk-spark, .is-still .sk-beam, .is-still .sk-flag-hang { animation: none; }
@media (prefers-reduced-motion: reduce) { .sk-wins rect, .sk-spark, .sk-beam, .sk-flag-hang { animation: none; } }

/* The $PURGE reaper at the back of the march: a dark hooded shape like the crowd, only the
   eyes give him away; the pump.fun flag up */
.m-reaper__robe { fill: var(--crowd-mid); stroke: rgba(255, 70, 60, 0.16); stroke-width: 4; }
.m-reaper__shine { display: none; }
.m-reaper__face { fill: #030202; }
.m-reaper__eyes { fill: #c4141e; filter: drop-shadow(0 0 3px #ff1a1a); }
.m-reaper__hand { fill: var(--crowd-mid); }
.m-pole { fill: none; stroke: #2a1d14; stroke-width: 3.4; stroke-linecap: round; }
.m-flagpurge { opacity: 0.85; }
.m-flagpurge__bg { fill: #0b0b0c; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; }
.m-flagpurge__ticker { font-family: var(--display); fill: #fff; }
.m-flagpurge__pump { font-family: var(--body); font-weight: 800; fill: #fff; }
.m-pill-g { fill: #5fd17b; }
.m-pill-w { fill: #f4f4f4; }
.m-pill-o { fill: none; stroke: #0d0d0d; stroke-width: 3.4; }
.m-pill-hi { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 3; stroke-linecap: round; }

/* ==========================================================================
   v8: the $PURGE pitch: two metas, three lives, market cap goals played IRL
   ========================================================================== */
/* BUY $PURGE, on a loop, like a placard band across the street */
.buyband { margin: 0 -3vw clamp(3rem, 6vw, 5rem); overflow: hidden; background: var(--blood); color: #fff6f3; rotate: -2.2deg; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7); }
.buyband__track { display: flex; width: max-content; animation: band-roll 22s linear infinite; }
@keyframes band-roll { to { transform: translateX(-50%); } }
.buyband p { display: flex; align-items: center; gap: 0.45em; margin: 0; padding: 0.28em 0.45em 0.22em 0; font: 400 clamp(2rem, 6vw, 4.2rem)/1 var(--display); letter-spacing: 0.02em; white-space: nowrap; }
.buyband i { width: 0.3em; height: 0.4em; background: currentColor; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; opacity: 0.85; }
.pitch__title { margin: 0 0 1.1rem; font: 400 clamp(2.6rem, 5.8vw, 5.2rem)/0.92 var(--display); text-transform: uppercase; color: var(--ink); }
.pitch__title span { display: block; color: var(--blood-hi); }
/* Halloween × the protests = $PURGE: one line beside the coin, two on phones */
.pitch__sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.08em 0.3em; margin: 0 0 1.4rem; font: 400 clamp(2.1rem, 3.5vw, 2.9rem)/1.02 var(--display); text-transform: uppercase; }
.pitch__term { display: inline-block; }
.pitch__term--halloween { color: #ff8a1e; font-family: "Rubik Wet Paint", var(--display); text-shadow: 0 0 34px rgba(255, 138, 30, 0.35); }
.pitch__term--street { color: #f4f0ea; box-shadow: inset 0 -0.16em 0 #d8ff1c; }
.pitch__term--purge { color: var(--blood-hi); text-shadow: 0 0 40px var(--glow); }
.pitch__op { display: inline-block; color: var(--ink-2); font-size: 0.75em; }
.pitch__lead { max-width: 60ch; margin: 0 0 clamp(1.6rem, 3vw, 2.2rem); font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--ink); }
.pitch__rise { max-width: 62ch; margin: 0; color: var(--ink-2); line-height: 1.6; }
.pitch__rise strong { color: var(--ink); }
/* The goals: five bars that climb to the right like a chart that pumps. The live market
   cap fills them with blood, the next one wears a flag, the last one is the reaper's. */
.goals__head { margin: 0 0 1.6rem; }
.goals__title { margin: 0; font: 400 clamp(1.8rem, 3.4vw, 2.8rem)/1 var(--display); text-transform: uppercase; }
/* under its title, on the left: the right side is where the moon (and Elon) pass behind */
.goals__body { max-width: 60ch; margin: 0.7rem 0 0; color: var(--ink-2); }
/* the live market cap, like a stream's goal counter */
.meter { display: inline-grid; gap: 0.4rem; min-width: min(100%, 17rem); margin: 1.4rem 0 0; padding: 0.85rem 1.1rem 0.95rem; border: 1px solid var(--line); border-left: 3px solid var(--blood-hi); border-radius: 4px 6px 6px 4px; background: rgb(13 8 8 / 0.95); }
.meter__label { display: flex; align-items: center; gap: 0.55rem; font: 700 0.74rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.meter .live-dot { margin: 0; }
.meter__value { font: 400 clamp(2.1rem, 3.2vw, 2.8rem)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.meter.is-waiting .meter__value { color: var(--ink-2); }
.meter__note { max-width: 34ch; font: 600 0.92rem/1.4 var(--body); color: var(--ink); }
.meter__note b { font-weight: 800; color: var(--red-label); }
.goals__list { --n: 5; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); align-items: end; gap: 0.6rem; height: clamp(360px, 30vw, 410px); margin: 0; padding: 0; list-style: none; }
/* --h (height share), --heat and --hot (dark ember to hot blood) and --lvl (blood level) come from main.js */
.goal { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 0.45rem; min-height: calc(var(--h, 1) * 100%); padding: 0.9rem 1rem 1rem; border: 1px solid var(--line); border-top: 3px solid var(--hot, var(--blood)); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, rgba(var(--ember), calc(0.1 + 0.18 * var(--heat, 0))), rgba(var(--ember), 0) 62%), rgb(13 8 8 / 0.96); transition: translate 0.3s var(--ease-out); }
/* the blood rises with the market cap */
.goal::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: calc(var(--lvl, 0) * 100%); border-radius: inherit; background: linear-gradient(180deg, var(--blood-hi), var(--blood) 45%, var(--blood-deep)); box-shadow: 0 -8px 22px -10px var(--glow); }
.goal__step { font: 700 0.72rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.goal__mc { font: 400 clamp(1.8rem, 2.5vw, 2.3rem)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.goal__action { font-weight: 600; font-size: 0.95rem; line-height: 1.35; color: var(--ink); }
.goal.is-locked .goal__action { font: 700 0.8rem/1.35 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.goal__state { position: absolute; top: 0.85rem; right: 0.85rem; display: grid; place-items: center; color: var(--ink-2); }
.goal__state:empty { display: none; }
.goal__state svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.goal.is-reached { border-color: rgba(255, 74, 92, 0.55); }
.goal.is-reached .goal__step, .goal.is-reached .goal__state { color: #fff6f3; }
/* the next one to hit: outlined, a NEXT flag on its roof */
.goal.is-next { z-index: 1; border-color: rgba(232, 19, 47, 0.8); box-shadow: 0 0 0 1px rgba(232, 19, 47, 0.8), 0 18px 40px -18px var(--glow); }
.goal__chip { position: absolute; left: -1px; bottom: calc(100% + 0.6rem); display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.65rem; border-radius: 3px; background: var(--blood); color: var(--on-blood); font: 700 0.72rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7); }
.goal__chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s infinite; }
/* the last one is the reaper's: the hottest bar, his hood waiting at its foot */
.goal.is-top { border-color: rgba(255, 74, 92, 0.45); background: linear-gradient(180deg, #5c0a15, #2b040a 52%, #0e0808); box-shadow: 0 0 0 1px rgba(255, 74, 92, 0.22), 0 26px 60px -26px var(--glow); }
.goal.is-top .goal__mc { font-size: clamp(2.2rem, 3.3vw, 3.1rem); }
.goal__reaper { position: absolute; left: 50%; bottom: 0; width: min(72%, 150px); translate: -50% 0; pointer-events: none; }
.goal__hood { fill: #403a4b; }
.goal__face { fill: #0b090e; }
.goal__eyes { fill: #ff2b2b; filter: drop-shadow(0 0 5px rgba(255, 43, 43, 0.9)); animation: eyes 7s infinite steps(1); }
@media (hover: hover) { .goal:hover { translate: 0 -4px; } }
.is-still .goal__chip::before, .is-still .goal__eyes { animation: none; }
@media (prefers-reduced-motion: reduce) { .goal__chip::before, .goal__eyes { animation: none; } .goal { transition: none; } }
/* BUY: the loudest button on the page */
.btn--buy { min-height: 64px; padding: 1.05rem 2.4rem; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: 0.06em; animation: buy-pulse 2.4s ease-in-out infinite; }
@keyframes buy-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 19, 47, 0.5), 0 14px 34px -14px var(--glow); } 55% { box-shadow: 0 0 0 14px rgba(232, 19, 47, 0), 0 20px 44px -14px var(--glow); } }
.pitch__when { margin: 0; font: 700 0.84rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
/* Phones and tablets: the bars lie down as rows, the last goal on top, the blood fills them from the left */
@media (max-width: 900px) {
  .goals__list { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 0.65rem; height: auto; }
  .goal { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) auto; grid-template-areas: "mc action state"; align-items: center; column-gap: 0.8rem; min-height: 4rem; padding: 0.75rem 0.9rem; border-top-width: 1px; border-left: 3px solid var(--hot, var(--blood)); border-radius: 2px 6px 6px 2px; background: linear-gradient(90deg, rgba(var(--ember), calc(0.1 + 0.2 * var(--heat, 0))), rgba(var(--ember), 0) 72%), rgb(13 8 8 / 0.96); }
  .goal::after { top: 0; right: auto; height: auto; width: calc(var(--lvl, 0) * 100%); }
  .goal__step { display: none; }
  .goal__mc { grid-area: mc; font-size: 1.5rem; }
  .goal__action { grid-area: action; }
  .goal__state { grid-area: state; position: static; }
  .goal.is-top { padding-right: 3.6rem; }
  .goal.is-top .goal__mc { font-size: 1.85rem; }
  .goal.is-top .goal__state { display: none; }
  .goal__reaper { left: auto; right: 0.6rem; width: 2.6rem; translate: none; }
  .goal__chip { left: auto; right: 0.7rem; bottom: calc(100% - 0.7rem); padding: 0.32rem 0.55rem; font-size: 0.66rem; }
}
.is-still .buyband__track, .is-still .btn--buy { animation: none; }
@media (prefers-reduced-motion: reduce) { .buyband__track, .btn--buy { animation: none; } }

/* Reading over the street: when a paragraph scrolls down across the march and its light
   placards, a soft dark halo keeps it legible (zero specificity: any own shadow wins) */
main :where(p, li) { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 0, 0, 0.6); }
/* headings too: big white letters vanish on a light placard otherwise */
main :where(h2, h3) { text-shadow: 0 2px 2px rgba(0, 0, 0, 0.85), 0 0 22px rgba(0, 0, 0, 0.7); }
.buyband p { text-shadow: none; }

/* ==========================================================================
   v10: the end, all in one block (#buy), laid wide: the two metas and the fuse
   on the left, the coin with the CA and BUY under it on the right, then the
   three lives and the goals across the whole width
   ========================================================================== */
.final { --cols: minmax(0, 1fr) minmax(300px, 0.5fr); --col-gap: clamp(2rem, 5vw, 4.5rem); padding: clamp(1.5rem, 4vw, 3rem) 0 0; }
.final .buyband { margin-bottom: clamp(2rem, 4.5vw, 3.6rem); }
.final__inner {
  display: grid;
  grid-template-columns: var(--cols);
  grid-template-areas: "main aside" "live aside" "goals goals";
  align-items: start;
  column-gap: var(--col-gap);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.final__main { grid-area: main; min-width: 0; }
.final .fuse__label { margin-bottom: 0; }
.final__aside { grid-area: aside; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.final .final__coin { width: 100%; max-width: 360px; margin: 0 auto 0.4rem; }
.final .ca { max-width: none; margin: 0; }
/* the whole address shows, on two lines if it must */
.final .ca__value { white-space: normal; overflow-wrap: anywhere; }
.final__cta { display: grid; gap: 0.6rem; }
/* the moon and its flag sit behind this column: the ghost button stays solid enough to read */
.final .btn--ghost { background: rgba(10, 6, 6, 0.86); }
.final .pitch__when { margin: 0; text-align: center; color: var(--ink); }
/* the three lives finish the left column, level with the coin's BUY */
.final .live { grid-area: live; margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; }
.final .live__list { margin-top: 0.9rem; }
.final .goals { grid-area: goals; margin: clamp(2.2rem, 4.5vw, 3.4rem) 0 0; }
/* Wide screens: the title, the blurb and the meter on the left, the bars climbing on the right */
@media (min-width: 1200px) {
  .final .goals { display: grid; grid-template-columns: minmax(250px, 0.34fr) minmax(0, 1fr); align-items: end; column-gap: clamp(2rem, 4vw, 4rem); }
  .final .goals__head { display: flex; flex-direction: column; align-self: stretch; margin: 0; }
  .final .goals__body { margin-bottom: 1.4rem; }
  .final .meter { margin-top: auto; }
}
/* Phones and tablets: the words, then the coin with BUY, then the lives and the goals */
@media (max-width: 900px) {
  .final__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "aside" "live" "goals"; }
  .final__aside { width: 100%; max-width: 560px; margin: clamp(1.4rem, 5vw, 2.4rem) auto 0; }
  .final .final__coin { width: min(70vw, 320px); }
  .final .pitch__sum { font-size: clamp(2.1rem, 8.4vw, 3.6rem); }
}

/* ==========================================================================
   v12: a quieter street. The user found the page too busy: same world, less of it.
   The crowd stands lower, its boards are dimmer, the monuments step back.
   ========================================================================== */
.march { height: 17vh; }
.march__row .m-board, .march__row .m-text { opacity: 0.78; }
.march__row .m-tricolore { opacity: 0.75; }
.skyline { opacity: 0.78; }
@media (max-width: 700px) { .march { height: 12vh; } }

/* ==========================================================================
   v13: the end of the page. A last word, the links as pills, the small print
   folded away, and $PURGE cut by the bottom edge: nothing comes after it.
   ========================================================================== */
.nav__logo { width: 40px; height: 40px; border-radius: 50%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); }
.footer { position: relative; z-index: 12; padding: clamp(3.5rem, 7vw, 6rem) 0 0; background: var(--bg); color: var(--ink-2); }
/* it rises out of the street instead of cutting it with a hard edge */
.footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 140px; background: linear-gradient(to top, var(--bg), rgba(7, 5, 5, 0)); pointer-events: none; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.footer__claim { margin: 0 0 clamp(2rem, 4vw, 3rem); font: 400 clamp(3rem, 8.5vw, 7.5rem)/0.92 var(--display); text-transform: uppercase; color: var(--ink); }
.footer__claim span { display: block; }
.footer__claim span + span { color: var(--blood-hi); }
@supports (-webkit-text-stroke: 1px) { .footer__claim span + span { color: transparent; -webkit-text-stroke: 2px var(--blood-hi); } }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.footer__tag { max-width: 44ch; margin: 0; font-size: 1rem; line-height: 1.55; }
.footer__tag b { color: var(--ink); font-weight: 700; }
.footer__links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.pill { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 1.15rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 700 0.92rem/1 var(--body); text-decoration: none; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.pill:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.pill.is-off { color: var(--ink-2); cursor: default; }
.pill.is-off:hover { border-color: var(--line); background: transparent; }
.pill__icon { display: inline-grid; place-items: center; width: 18px; height: 18px; }
.pill__icon svg, .pill__icon img { width: 100%; height: 100%; object-fit: contain; }
.pill small { font: 700 0.7rem/1 var(--mono); letter-spacing: 0.12em; color: var(--ink-2); }
.footer__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; padding: 1.3rem 0 0.4rem; border-top: 1px solid var(--line); font: 700 0.74rem/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.footer__legal { padding: 0 0 0.6rem; }
.footer__legal summary { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; cursor: pointer; list-style: none; font: 700 0.74rem/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.footer__legal summary::-webkit-details-marker { display: none; }
.footer__legal summary::after { content: "+"; font-size: 1.05rem; color: var(--blood-hi); }
.footer__legal[open] summary::after { content: "−"; }
.footer__legal summary:hover { color: var(--ink); }
.footer__legal p { max-width: 75ch; margin: 0.3rem 0 0.9rem; font-size: 0.9rem; line-height: 1.6; }
.footer__legal a { display: inline-block; padding: 0.2rem 0; color: var(--ink); text-decoration-color: var(--blood); text-underline-offset: 3px; }
/* the name, huge, cut by the bottom of the page */
/* Anton: caps start 0.06em under the top of a 1.01 line box and stand 0.87em tall; 0.8em shows
   the top 85% of them and the page ends on the cut */
.footer__mark { height: 0.8em; margin: clamp(0.5rem, 2vw, 1.5rem) 0 0; overflow: hidden; text-align: center; font: 400 clamp(7rem, 31vw, 30rem)/1.01 var(--display); letter-spacing: 0.01em; color: rgba(232, 19, 47, 0.18); user-select: none; pointer-events: none; }
@supports (-webkit-text-stroke: 1px) { .footer__mark { color: transparent; -webkit-text-stroke: 1.5px rgba(232, 19, 47, 0.6); } }
@media (max-width: 700px) {
  .footer__meta { flex-direction: column; }
  .footer__mark { -webkit-text-stroke-width: 1px; }
}

/* ==========================================================================
   v14: wherever there is reading the street goes darker, so the words come first.
   A veil over the background (under the page) fades in; off on the hero and the 31.
   ========================================================================== */
.veil { position: fixed; inset: 0; z-index: 9; pointer-events: none; background: linear-gradient(to bottom, rgba(7, 5, 5, 0.38), rgba(7, 5, 5, 0.72) 70%); opacity: 0; transition: opacity 0.9s var(--ease-out); }
html.is-reading .veil { opacity: 1; }
.is-still .veil { transition: none; }
/* The page ends on the cut $PURGE: no elastic bounce past it (Chrome on touchpads, phones) */
html, body { overscroll-behavior-y: none; }

/* The contract address before launch: blurred like a redacted line, revealed on the day */
.ca__value .ca__blur { display: block; overflow: hidden; color: var(--ink); filter: blur(5px); opacity: 0.8; user-select: none; -webkit-user-select: none; }
.ca__value.is-pending { padding: 7px 4px; margin: -7px -4px; } /* room for the blur, same layout */

/* ==========================================================================
   v16: phones. The spray can stays on desktop (on a phone it sat on the text),
   and a phone held sideways gets the side by side layouts: the screen is wide
   but short, so stacking pushed the story's pictures below it.
   ========================================================================== */
@media (max-width: 700px), (max-height: 500px) { .spray { display: none; } }
@media (orientation: landscape) and (max-height: 500px) {
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); min-height: auto; padding-top: 0.5rem; }
  .hero__coin { order: 0; max-width: min(280px, 62vh); margin: 0; }
  .title__purge { font-size: clamp(4.5rem, 30vh, 8rem); }
  .hero__sub { margin-top: 1.6rem; }
  .story__stage { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-rows: none; align-content: center; align-items: center; gap: 1.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .story__view { height: 84svh; }
  .story .ch__title { font-size: clamp(1.6rem, 9vh, 2.4rem); }
  .story .ch__body { font-size: 0.92rem; line-height: 1.5; }
  .final__title { font-size: clamp(2.4rem, 16vh, 4.6rem); }
  .why__title, .ch__title, .thistime__title, .pitch__title { font-size: clamp(1.8rem, 11vh, 3rem); }
}

/* ==========================================================================
   v17: the STO (sto.js). Alxcook's car tears through the street; the march
   drops out of its way (html.is-sto) and comes back when it has gone.
   ========================================================================== */
.march, .fumes { transition: translate 0.7s var(--ease-out), opacity 0.7s; }
html.is-sto .march, html.is-sto .fumes { transition: translate 0.35s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.3s; }
html.is-sto .march { translate: 0 115%; }
html.is-sto .fumes { opacity: 0; }
.sto { position: fixed; left: 0; bottom: 0.4vh; z-index: 31; /* over the 3D coin's canvas (30): it drives in front of it */ width: min(52vw, 560px); pointer-events: none; visibility: hidden; will-change: transform; }
.sto__car { display: block; width: 100%; height: auto; overflow: visible; }
.sto__rim { transform-box: fill-box; transform-origin: center; }
.sto__rim { animation: sto-spin 0.16s linear infinite paused; }
.sto.is-moving .sto__rim { animation-play-state: running; }
@keyframes sto-spin { to { transform: rotate(360deg); } }
.sto__tail { filter: drop-shadow(0 0 6px #ff2b2b) drop-shadow(0 0 14px rgba(255, 43, 43, 0.6)); }
.sto__head { filter: drop-shadow(0 0 6px rgba(238, 243, 255, 0.9)); }
.sto__flame { opacity: 0; }
.sto.is-launch .sto__flame { animation: sto-flame 0.08s steps(2) 5; }
@keyframes sto-flame { 50% { opacity: 1; } }
/* tyre smoke trailing off the rear wheel */
.sto__smoke { position: absolute; left: 26%; bottom: 7%; opacity: 0; transition: opacity 0.45s; }
.sto.is-smoking .sto__smoke { opacity: 1; transition-duration: 0.12s; }
.sto__smoke i { position: absolute; left: 0; bottom: 0; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: radial-gradient(circle, rgba(214, 214, 220, 0.7), rgba(214, 214, 220, 0) 70%); opacity: 0; }
.sto__smoke i { animation: sto-puff 0.8s ease-out infinite; }
.sto__smoke i:nth-child(2) { animation-delay: -0.13s; --dx: -150px; --dy: -50px; }
.sto__smoke i:nth-child(3) { animation-delay: -0.27s; --dx: -90px; --dy: -24px; }
.sto__smoke i:nth-child(4) { animation-delay: -0.4s; --dx: -170px; --dy: -64px; }
.sto__smoke i:nth-child(5) { animation-delay: -0.53s; --dx: -110px; --dy: -36px; }
.sto__smoke i:nth-child(6) { animation-delay: -0.67s; --dx: -140px; --dy: -14px; }
@keyframes sto-puff { 0% { opacity: 0.7; transform: translate(0, 0) scale(0.4); } 100% { opacity: 0; transform: translate(var(--dx, -120px), var(--dy, -40px)) scale(2.6); } }
.sto__tag { position: absolute; left: 30%; bottom: 88%; font: 400 clamp(2rem, 5vw, 3.6rem)/1 "Sedgwick Ave Display", cursive; color: #ffd23f; white-space: nowrap; opacity: 0; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6), 0 0 18px rgba(0, 0, 0, 0.6); }
@media (max-width: 700px) { .sto { width: min(88vw, 440px); } .sto__tag { left: 18%; } }

/* ==========================================================================
   v18: Act II, 24 October 2026. Two lines, the coin born that morning, the 31st.
   ========================================================================== */
.ch--24 { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.act2__crowd { max-width: 18ch; margin: 0.4rem 0 0; font: 400 clamp(2.4rem, 6vw, 4.8rem)/0.95 var(--display); text-transform: uppercase; color: var(--ink); }
.act2__media { max-width: 34ch; margin: 1.2rem 0 0; font: 600 clamp(1.15rem, 2vw, 1.5rem)/1.4 var(--body); color: var(--ink-2); }
.act2__coin { width: 100%; max-width: 980px; margin: clamp(2.2rem, 5vw, 3.4rem) 0 0; }
.act2__label { margin: 0 0 0.8rem; font: 700 0.74rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-label); }
.act2__next { margin: clamp(2rem, 4vw, 3rem) 0 0; font: 400 clamp(1.8rem, 4vw, 3rem)/1 var(--display); text-transform: uppercase; color: var(--ink); }
.act2__next span { color: var(--blood-hi); }

/* The street under the buildings, while the march is out of the STO's way: the kerb the
   buildings stand on, the pavement, the road and its dashed line */
.road { position: fixed; left: 0; right: 0; bottom: 0; height: calc(12vh + 4px); z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease-out); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 0 2px, #1b1414 2px 22%, rgba(0, 0, 0, 0.55) 22% calc(22% + 2px), #0f0b0b calc(22% + 2px) 100%); }
.road::after { content: ""; position: absolute; left: 0; right: 0; top: 60%; height: 4px; background: repeating-linear-gradient(90deg, rgba(255, 240, 220, 0.32) 0 54px, transparent 54px 110px); }
html.is-sto .road { opacity: 1; transition-duration: 0.3s; }
@media (max-width: 700px) { .road { height: calc(8vh + 4px); } }