/* ═══════════════════════════════════════════════════════════════════
   SÉANCE

   A dark room, one candle. The page is built on the same figure the
   ritual is built on: a table. The head of the table holds whoever is
   speaking; the queue approaches round the right side and everyone who
   has spoken recedes down the left. Nothing on that figure moves unless
   the chain moved it, so the motion here is never decoration.

   Three rules kept from the previous build (they were paid for):
     · every accent stop is pre-solved for contrast against --ink-3,
       the LIGHTEST panel any accent text sits on. Solving against the
       darkest ground was a real shipped bug.
     · explicit rgba only, NEVER color-mix(var(--x), transparent):
       that pattern collapses to invisible ink if a var fails.
     · only transform and opacity are animated.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ink:       #171009;   /* the room */
  --ink-2:     #1f1710;   /* card */
  --ink-3:     #292019;   /* the lightest panel. Nothing goes lighter. */
  --hair:      #3a2e22;
  --hair-2:    #4c3d2e;

  --paper:       #ece4d3;   /* bone   12.6:1 on --ink-3 */
  --paper-dim:   #cbbfa9;   /*         8.8:1 */
  --paper-low:   #b8ac98;   /*         7.0:1 — drives every small mono label */
  --paper-faint: #a49a86;   /*         5.7:1 — secondary only, never under 13px */

  /* THE AURA.
     Four candle stops, each solved independently against --ink-3. JS
     re-anchors all four on the hue of whoever is speaking, with a NARROW
     analogous spread, so the room takes the light of the current voice
     and re-solves each stop for contrast before it applies it. */
  --aura-1: #ffa257;   /* ember   8.0:1 */
  --aura-2: #ffbf68;   /* flame   9.6:1 */
  --aura-3: #ffd98a;   /* candle 11.4:1 */
  --aura-4: #e8b04f;   /* gold    8.9:1 */
  --aura: linear-gradient(102deg, var(--aura-1) 0%, var(--aura-2) 38%, var(--aura-3) 70%, var(--aura-4) 100%);

  --accent:      #ffa257;
  --accent-ink:  #1a0f06;
  --accent-glow: rgba(255, 162, 87, .11);
  --accent-line: rgba(255, 162, 87, .34);

  /* the lit air of the room, re-anchored from the same solved stops */
  --room-1: rgba(255, 162, 87, .10);
  --room-2: rgba(255, 191, 104, .07);
  --room-3: rgba(232, 176, 79, .06);
  --room-4: rgba(150, 84, 32, .12);

  --ok:   #9fdc8f;   /*  9.6:1 */
  --warn: #f0b24a;   /*  8.3:1 */
  --bad:  #ff8a6b;   /*  7.0:1 */

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino", Georgia, serif;
  --rit:   "Cinzel", "Iowan Old Style", Georgia, serif;
  --body:  "Newsreader", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut:  clamp(1.15rem, 4vw, 3rem);
  --rule: 1px solid var(--hair);
  --node: clamp(38px, 5.4vw, 74px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1.02rem, .96rem + .28vw, 1.09rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { text-wrap: balance; }

.wrap { width: min(1180px, 100% - calc(var(--gut) * 2)); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: .78em; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: var(--accent-ink); padding: .7rem 1.1rem; font-weight: 700;
  font-family: var(--mono);
}
.skip:focus { left: .5rem; top: .5rem; }
:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--aura-2); outline-offset: 3px; }
::selection { background: var(--aura-2); color: #1a0f06; }

/* ── the room ───────────────────────────────────────────────────────
   One light source: a candle glow high in the room, falling off fast
   into warm dark. Grain on top because near-black gradients band badly
   in 8-bit. The glow breathes very slowly; it never travels. */

body::before {
  content: "";
  position: fixed; inset: -20vh -10vw; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46vw 40vh at 50% 16%, var(--room-2), transparent 62%),
    radial-gradient(70vw 62vh at 50% 22%, var(--room-1), transparent 70%),
    radial-gradient(90vw 80vh at 50% 40%, var(--room-4), transparent 76%),
    radial-gradient(60vw 52vh at 82% 96%, var(--room-3), transparent 72%);
  animation: breathe 11s ease-in-out infinite alternate;
}
@keyframes breathe {
  from { transform: scale(1); opacity: .92; }
  to   { transform: scale(1.035); opacity: 1; }
}

body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ── candlelit ink ──────────────────────────────────────────────────── */

.aura-text {
  background-image: var(--aura);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sheen 16s ease-in-out infinite alternate;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .aura-text { color: var(--accent); -webkit-text-fill-color: var(--accent); }
}
@keyframes sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ── header ─────────────────────────────────────────────────────────── */

.bar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(23, 16, 9, .92);
  backdrop-filter: blur(10px);
}
.bar-rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--aura); background-size: 220% 100%; opacity: .45;
  animation: sheen 18s ease-in-out infinite alternate;
}
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 62px; }

.ident { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--paper); min-width: 0; }
.ident-chip {
  width: 26px; height: 26px; flex: none; border-radius: 50%; overflow: hidden;
  background: var(--ink-3); box-shadow: 0 0 0 1px var(--hair-2);
  transition: box-shadow 500ms ease;
}
.ident-chip img { width: 100%; height: 100%; object-fit: cover; }
.ident-t { font-family: var(--rit); font-weight: 600; letter-spacing: .1em; font-size: .88rem; white-space: nowrap; }
.ident-k { font-family: var(--mono); font-weight: 600; font-size: .72rem; margin-left: .1rem; }

.bar-r { display: flex; align-items: center; gap: .45rem; }
.pulse { display: inline-flex; align-items: center; gap: .42rem; font-family: var(--mono); font-size: .66rem; color: var(--paper-low); white-space: nowrap; letter-spacing: .02em; }
.pulse-d { width: 7px; height: 7px; border-radius: 50%; background: var(--paper-faint); flex: none; }
.pulse[data-state="live"] .pulse-d { background: var(--ok); animation: beat 2.6s ease-in-out infinite; }
.pulse[data-state="live"] .pulse-t { color: var(--paper-low); }
.pulse[data-state="pre"]  .pulse-d { background: var(--paper-faint); }
.pulse[data-state="stale"] .pulse-d { background: var(--warn); }
.pulse[data-state="stale"] .pulse-t { color: var(--warn); }
.pulse[data-state="down"]  .pulse-d { background: var(--bad); }
.pulse[data-state="down"]  .pulse-t { color: var(--bad); }
@keyframes beat { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.ca {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  background: var(--ink-2); border: var(--rule); color: var(--paper-dim);
  padding: .34rem .6rem; border-radius: 3px; font-size: .72rem; font-family: var(--mono);
}
.ca-l { color: var(--paper-low); letter-spacing: .08em; font-weight: 600; }
.lnk {
  color: var(--paper-dim); text-decoration: none; border: var(--rule); border-radius: 3px;
  padding: .36rem .78rem; font-size: .72rem; font-weight: 600;
  font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.ca:hover, .lnk:hover { color: var(--paper); border-color: transparent; background:
  linear-gradient(var(--ink-2), var(--ink-2)) padding-box, var(--aura) border-box; }

/* ── hero: the altar ────────────────────────────────────────────────── */

.hero { padding: clamp(2.4rem, 6vw, 4.4rem) 0 clamp(2rem, 4vw, 3rem); }
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(330px, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  row-gap: clamp(1.8rem, 3.4vw, 2.8rem);
  align-items: center;
  grid-template-areas:
    "head  head"
    "track panel";
}
.hd    { grid-area: head; min-width: 0; text-align: center; }
.panel { grid-area: panel; }
.track { grid-area: track; }

/* the hero arrives like a lit match: one stagger on load, then stillness */
.hd > * { animation: rise 700ms cubic-bezier(.2, .75, .25, 1) backwards; }
.hd > *:nth-child(2) { animation-delay: 90ms; }
.hd > *:nth-child(3) { animation-delay: 170ms; }
.hd > *:nth-child(4) { animation-delay: 250ms; }
.hd > *:nth-child(5) { animation-delay: 330ms; }
.hd > *:nth-child(6) { animation-delay: 410ms; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, .55rem, 0); } }

.eyebrow {
  margin: 0 0 .9rem; font-family: var(--rit); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .34em; text-indent: .34em;
  color: var(--paper-low); font-weight: 600;
}
.specimen {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(3rem, 1.2rem + 8.6vw, 7.4rem);
  line-height: .96; letter-spacing: -.012em; margin: 0;
  overflow-wrap: anywhere;
}
.specimen-in { display: inline; }
.specimen .ch { display: inline-block; white-space: pre; }
.specimen .ch.in { animation: chIn 640ms cubic-bezier(.18, .8, .24, 1) backwards; }
.specimen .ch.out { animation: chOut 380ms cubic-bezier(.5, 0, .82, .4) forwards; }
/* letters arrive rising, like smoke finding a shape */
@keyframes chIn  { from { opacity: 0; transform: translate3d(0, .5em, 0) rotate(1.4deg) scale(.98); } }
@keyframes chOut { to   { opacity: 0; transform: translate3d(0, -.4em, 0) rotate(-1.2deg); } }

.subline {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: .5rem .8rem; margin: 1.05rem 0 0; color: var(--paper-low); font-size: .9rem;
}
.tick { font-family: var(--mono); font-weight: 600; font-size: 1rem; letter-spacing: .01em; }
.subline .sep { color: var(--paper-faint); font-size: .82rem; }
.subline .mono { color: var(--paper-low); }

.note {
  margin: 1.5rem auto 0; color: var(--paper-dim); font-size: 1rem; max-width: 54ch;
}
.note em { color: var(--paper); font-style: italic; font-family: var(--serif); font-size: 1.12em; }

.cta { margin-top: 1.5rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; justify-content: center; }

/* ── the ledger ─────────────────────────────────────────────────────── */

.panel {
  border: var(--rule); border-radius: 3px; background: var(--ink-2);
  padding: 1rem 1.1rem 1.15rem; position: relative;
}
.panel::before {
  content: ""; position: absolute; inset: -1px; border-radius: 4px; z-index: -1;
  background: var(--aura); background-size: 240% 100%; opacity: .3;
  animation: sheen 24s ease-in-out infinite alternate;
}
.panel-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: .7rem; border-bottom: var(--rule);
}
.panel-k { font-family: var(--rit); font-size: .64rem; text-transform: uppercase; letter-spacing: .22em; color: var(--paper-low); font-weight: 600; }
.panel-r { font-size: .68rem; color: var(--paper-low); }

/* A thick coloured border on ONE side is the single most recognisable tell of
   an AI-built UI. A hairline box on all four sides plus the tinted ground says
   the same thing in this register. */
.alert {
  margin: .8rem 0 0; padding: .58rem .7rem; border-radius: 2px; font-size: .84rem;
  background: rgba(255, 138, 107, .09); border: 1px solid rgba(255, 138, 107, .34); color: var(--bad);
}
.alert[data-kind="warn"] { background: rgba(240, 178, 74, .09); border-color: rgba(240, 178, 74, .34); color: var(--warn); }
.alert[data-kind="note"] { background: rgba(184, 172, 152, .07); border-color: rgba(184, 172, 152, .26); color: var(--paper-low); }

.facts { margin: .2rem 0 0; padding: 0; }
.facts > div[hidden] { display: none; }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .58rem 0; border-bottom: var(--rule); }
.facts dt { color: var(--paper-low); font-size: .82rem; flex: none; }
.facts dd { margin: 0; color: var(--paper-dim); text-align: right; overflow-wrap: anywhere; font-size: .92rem; font-weight: 500; }
.facts dd a { color: var(--paper-dim); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.facts dd a:hover { color: var(--paper); }
.facts dd.unsure { color: var(--warn); }

/* the taper: a length of candle left to burn before the next voice */
.nextbar { margin: 1.1rem 0 0; }
.nextbar-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .45rem; }
.nextbar-k { font-family: var(--rit); font-size: .6rem; text-transform: uppercase; letter-spacing: .18em; color: var(--paper-low); font-weight: 600; }
.nextbar-p { font-size: .74rem; color: var(--paper-dim); }
.nextbar-track { height: 6px; background: var(--ink); border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); }
/* scaleX, not width: animating a layout property forces reflow every frame. */
.nextbar-track span {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center;
  background: var(--aura); background-size: 200% 100%;
  transition: transform 800ms cubic-bezier(.2, .7, .2, 1);
  animation: sheen 9s ease-in-out infinite alternate;
  will-change: transform;
}
.nextbar-t { margin: .6rem 0 0; font-size: .86rem; color: var(--paper-low); }
.nextbar-t .mono { color: var(--paper-dim); }
.nextbar-t b { color: var(--paper); font-weight: 600; }

.panel-f { margin: .85rem 0 0; font-size: .78rem; }
.panel-f a { color: var(--paper-low); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.panel-f a:hover { color: var(--paper); border-bottom-color: var(--accent-line); }

/* ── the table ──────────────────────────────────────────────────────── */

.track {
  position: relative; width: 100%; aspect-ratio: 1000 / 420;
  margin-bottom: 4.4rem; overflow: visible;
  margin-block: clamp(.4rem, 1.6vw, 1rem);
}
.thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.thread-b { fill: none; stroke: var(--hair-2); stroke-width: 1.1; }
/* one point of light forever circling the table */
.thread-c {
  fill: none; stroke: url(#ag); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 60 940; stroke-dashoffset: 0;
  animation: run 16s linear infinite;
}
@keyframes run { to { stroke-dashoffset: -1000; } }

.nodes { position: absolute; inset: 0; }
.nd {
  position: absolute; top: 0; left: 0;
  width: var(--node); height: var(--node);
  transform-origin: center center;
  transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%)) scale(var(--s, 1));
  transition: transform 900ms cubic-bezier(.22, .85, .2, 1), opacity 700ms ease, filter 900ms ease;
  will-change: transform;
}
/* Seats, not tiles: a round node reads as a place at the table, and these
   are coins. */
.nd-f {
  display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: var(--ink-3); box-shadow: 0 0 0 1px var(--hair-2);
}
.nd-f img { width: 100%; height: 100%; object-fit: cover; }
.nd-q { opacity: .74; filter: saturate(.3) brightness(.92); }
.nd-a { opacity: .4; filter: saturate(.1) brightness(.82); }
.nd-now { z-index: 3; }
.nd-now .nd-f {
  box-shadow: 0 0 0 1px rgba(255, 224, 178, .16), 0 0 0 7px var(--ink), 0 18px 46px rgba(0, 0, 0, .55);
}
/* the one lit seat: a candle-glow ring that flickers, faintly */
.nd-now::after {
  content: ""; position: absolute; inset: -38%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 72%);
  animation: flicker 4.6s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  23%      { opacity: .82; transform: scale(.985); }
  41%      { opacity: .96; transform: scale(1.01); }
  67%      { opacity: .86; transform: scale(.99); }
  82%      { opacity: 1;   transform: scale(1.02); }
}
.nd-empty .nd-f {
  background: repeating-linear-gradient(45deg, var(--ink-2) 0 5px, var(--ink) 5px 10px);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--hair);
}

/* Each side of the table says what it is for. */
.track-c {
  position: absolute; top: 100%; transform: translate(-50%, .85rem);
  width: 44%; text-align: left; display: grid; gap: .25rem;
}
.track-c-a { left: 25%; }
.track-c-b { left: 74%; }
.track-k {
  font-family: var(--rit); font-size: .56rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--paper-low); font-weight: 600;
}
.track-v {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.05rem, .7rem + 1.1vw, 1.6rem);
  line-height: 1.12; color: var(--paper-dim); overflow-wrap: anywhere;
}

body.struck .nd-now .nd-f { animation: struck 2.2s ease-out; }
@keyframes struck {
  0%   { box-shadow: 0 0 0 1px var(--accent-line), 0 0 0 7px var(--ink), 0 0 0 7px var(--accent-line); }
  14%  { box-shadow: 0 0 0 1px var(--accent-line), 0 0 0 7px var(--ink), 0 0 0 26px var(--accent-glow); }
  100% { box-shadow: 0 0 0 1px rgba(255, 224, 178, .16), 0 0 0 7px var(--ink), 0 18px 46px rgba(0, 0, 0, .55); }
}

/* ── the band that keeps the minutes ────────────────────────────────── */

.band {
  display: flex; align-items: center; gap: 1rem;
  border-block: var(--rule); background: var(--ink-2);
  padding-inline: var(--gut); height: 46px; overflow: hidden;
}
.band-k {
  flex: none; font-family: var(--rit); font-size: .58rem; text-transform: uppercase;
  letter-spacing: .24em; color: var(--paper-low); font-weight: 600;
  padding-right: 1rem; border-right: var(--rule); align-self: stretch;
  display: flex; align-items: center;
}
.band-w {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent);
}
.band-r {
  display: flex; align-items: center; gap: 1.6rem; width: max-content;
  animation: roll 76s linear infinite;
  will-change: transform;
}
.band-r i {
  font-family: var(--mono); font-style: normal; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--paper-low); white-space: nowrap;
}
/* the dagger is the typographic mark for the dead */
.band-r i::after { content: "†"; margin-left: 1.6rem; color: var(--paper-faint); letter-spacing: 0; }
@keyframes roll { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 620px) { .band-k { display: none; } }

/* ── burn it anywhere ───────────────────────────────────────────────── */

.anywhere { border-bottom: var(--rule); }
.anywhere-in {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(.9rem, 3vw, 2.4rem); align-items: center; padding: 1.5rem 0;
}
.anywhere-k {
  margin: 0; font-family: var(--rit); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-ink); font-weight: 600;
  background: var(--aura); background-size: 200% 100%;
  padding: .46rem .75rem; border-radius: 2px; white-space: nowrap;
  animation: sheen 11s ease-in-out infinite alternate;
}
.anywhere-t { margin: 0; color: var(--paper-dim); font-size: .98rem; max-width: 76ch; }
.anywhere-t b { color: var(--paper); font-weight: 600; }
.anywhere-t .mono { color: var(--accent); }
.anywhere-a {
  white-space: nowrap; font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; color: var(--paper-dim);
  text-decoration: none; border: var(--rule); border-radius: 2px; padding: .5rem .85rem;
}
.anywhere-a:hover { color: var(--paper); border-color: transparent; background:
  linear-gradient(var(--ink-2), var(--ink-2)) padding-box, var(--aura) border-box; }

/* ── the table in numbers ───────────────────────────────────────────── */

.strip { border-bottom: var(--rule); background: var(--ink-2); position: relative; }
.strip-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 1.5rem .5rem; text-align: center; border-left: var(--rule); }
.stat:first-child { border-left: 0; }
.n {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.4rem, .9rem + 2vw, 2.6rem);
  line-height: 1; overflow-wrap: anywhere;
}
.l { display: block; margin-top: .5rem; font-family: var(--rit); font-size: .58rem; text-transform: uppercase; letter-spacing: .18em; color: var(--paper-low); font-weight: 600; }

/* ── sections ───────────────────────────────────────────────────────── */

.sec { padding: clamp(3rem, 7vw, 5.5rem) 0; border-bottom: var(--rule); }
.h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.3rem);
  line-height: 1.04; letter-spacing: -.012em; margin: 0 0 1.6rem;
  display: flex; align-items: center; gap: 1rem;
}
/* the numeral wears a ring, like a place set at the table */
.h2-n {
  font-family: var(--rit); font-weight: 600; font-size: .34em; letter-spacing: .05em;
  color: var(--accent); flex: none;
  width: 2.5em; height: 2.5em; display: grid; place-items: center;
  border: 1px solid var(--hair-2); border-radius: 50%;
}
.lede { color: var(--paper-dim); margin: -1rem 0 2rem; max-width: 58ch; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: var(--rule); }
.steps li { padding: 1.5rem 1.3rem 1.7rem; border-left: var(--rule); }
.steps li:first-child { border-left: 0; }
.s-n { font-family: var(--mono); font-size: .7rem; color: var(--accent); margin: 0 0 1.4rem; letter-spacing: .1em; }
.steps h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin: 0 0 .5rem; line-height: 1.1; }
.steps p:last-child { margin: 0; color: var(--paper-dim); font-size: .92rem; }
.steps b { color: var(--paper); font-weight: 600; }

.caveat { margin: 1.6rem 0 0; color: var(--paper-low); font-size: .9rem; max-width: 70ch; border-left: 2px solid var(--hair); padding-left: 1rem; }

/* ── the burn box ───────────────────────────────────────────────────── */

.form { border: var(--rule); background: var(--ink-2); padding: clamp(1.1rem, 3vw, 2rem); border-radius: 3px; position: relative; }
.form::before {
  content: ""; position: absolute; inset: -1px; border-radius: 4px; z-index: -1;
  background: var(--aura); background-size: 240% 100%; opacity: .26;
  animation: sheen 24s ease-in-out infinite alternate;
}
.row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; }
.fld { display: block; margin-bottom: 1.1rem; }
.fld-l { display: block; font-family: var(--rit); font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--paper-low); margin-bottom: .5rem; font-weight: 600; }
.fld-l i { font-style: normal; font-family: var(--body); text-transform: none; letter-spacing: 0; color: var(--paper-faint); margin-left: .5rem; font-weight: 400; font-size: .8rem; }
.fld input[type="text"] {
  width: 100%; background: var(--ink); border: var(--rule); border-radius: 2px; color: var(--paper);
  font-family: var(--mono); font-size: 1rem; padding: .8rem .9rem;
}
.fld input:focus { border-color: var(--accent); outline: none; }
.fld input::placeholder { color: var(--paper-faint); }

.willmove { margin: 0; padding: .8rem .9rem; border: var(--rule); border-radius: 2px; background: var(--ink); color: var(--paper-low); font-size: .9rem; }
.willmove-on { color: var(--accent); border-color: var(--accent-line); }

.act { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: .4rem; }
.btn {
  border: 0; border-radius: 2px; text-decoration: none;
  font-family: var(--mono); font-weight: 600; font-size: .8rem;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .95rem 1.5rem; cursor: pointer; display: inline-block;
  transition: filter 140ms ease, transform 140ms ease;
}
.btn-a {
  background: var(--aura); background-size: 200% 100%; color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255, 236, 200, .22) inset;
  animation: sheen 12s ease-in-out infinite alternate;
}
.btn-b { background: transparent; color: var(--paper-dim); box-shadow: inset 0 0 0 1px var(--hair-2); }
.btn-b:hover { color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper-faint); }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { background: var(--ink-3); color: var(--paper-low); cursor: not-allowed; animation: none; box-shadow: none; filter: none; }
.act-n { margin: 0; font-size: .88rem; color: var(--paper-low); max-width: 46ch; }
.act-n.err { color: var(--bad); }
.act-n.ok  { color: var(--ok); }

.elsewhere { margin-top: 1.8rem; border-top: var(--rule); padding-top: 1.5rem; }
.elsewhere-h { font-family: var(--serif); font-weight: 500; font-size: 1.55rem; margin: 0 0 .6rem; }
.elsewhere p { color: var(--paper-dim); font-size: .95rem; max-width: 66ch; }
.ways { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: var(--rule); }
.ways li { background: var(--ink); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.ways b { font-size: .92rem; font-weight: 600; }
.ways span { color: var(--paper-low); font-size: .86rem; }
.ways code { font-family: var(--mono); font-size: .88em; color: var(--paper-dim); }
.cli { background: var(--ink-2); border: var(--rule); border-radius: 2px; padding: .9rem 1rem; overflow-x: auto; }
.cli code { font-family: var(--mono); font-size: .76rem; color: var(--paper-dim); white-space: pre; }
.cli span { color: var(--accent); }

/* ── waiting on the other side ──────────────────────────────────────── */

.qgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--hair); border: var(--rule); }
.q { background: var(--ink); padding: .8rem .7rem 1rem; display: flex; flex-direction: column; gap: .45rem; min-width: 0; position: relative; isolation: isolate; }
.q::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--aura); opacity: 0; transition: opacity 260ms ease; }
.q-img { aspect-ratio: 1; background: var(--ink-3); border-radius: 50%; overflow: hidden; }
.q-img img { width: 100%; height: 100%; object-fit: cover; }
.q-n { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; line-height: 1.1; overflow-wrap: anywhere; }
.q-s { color: var(--paper-low); font-size: .68rem; }
.q-b { font-size: .64rem; color: var(--paper-low); margin-top: auto; font-family: var(--mono); }
.q-next { background: var(--ink-3); box-shadow: inset 0 2px 0 var(--accent); }
.q-next::after { opacity: .05; }
.q-next .q-b { color: var(--accent); font-weight: 600; }

/* ── who has spoken ─────────────────────────────────────────────────── */

/* Hairlines come from each cell, not from a backing plate: with auto-fill the
   last row is usually part empty, and a backing plate renders that gap as a
   grey slab. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px; background: var(--ink); border: var(--rule); }
.sk { background: var(--ink); box-shadow: 0 0 0 1px var(--hair); padding: .9rem; display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: inherit; position: relative; isolation: isolate; }
.sk::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--aura); opacity: 0; transition: opacity 260ms ease; }
.sk:hover::after { opacity: .06; }
.sk:hover { background: var(--ink-2); }
.sk-img { aspect-ratio: 1; background: var(--ink-3); border-radius: 50%; overflow: hidden; }
.sk-img img { width: 100%; height: 100%; object-fit: cover; }
.sk-no { font-family: var(--mono); font-size: .66rem; color: var(--paper-low); letter-spacing: .08em; }
.sk-n { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.05; overflow-wrap: anywhere; }
.sk-m { font-family: var(--mono); font-size: .68rem; color: var(--paper-low); display: flex; justify-content: space-between; gap: .5rem; margin-top: auto; }
.sk-b { color: var(--accent); }

.sk-img.gone, .q-img.gone { background: repeating-linear-gradient(45deg, var(--ink-3) 0 6px, var(--ink-2) 6px 12px); }
.empty { padding: 2.5rem 1rem; text-align: center; color: var(--paper-low); grid-column: 1 / -1; background: var(--ink); }

/* ── the circle ─────────────────────────────────────────────────────── */

.board { list-style: none; margin: 0; padding: 0; border-top: var(--rule); max-width: 760px; }
.board li { display: flex; align-items: baseline; gap: 1rem; padding: .8rem 0; border-bottom: var(--rule); }
.board .r { font-family: var(--mono); font-size: .78rem; color: var(--accent); width: 2.4rem; flex: none; }
.board .w { font-family: var(--mono); font-size: .82rem; color: var(--paper-dim); overflow-wrap: anywhere; flex: 1; text-decoration: none; }
.board .w:hover { color: var(--paper); }
.board .c { font-size: .84rem; color: var(--paper-low); white-space: nowrap; }

/* ── footer ─────────────────────────────────────────────────────────── */

.foot { padding: 2.8rem 0 3.2rem; }
.foot-in { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.foot-m { width: 62px; height: 62px; flex: none; border-radius: 50%; }
.foot-c { flex: 1; min-width: 220px; }
.foot-c p { margin: 0; }
.foot-l { color: var(--paper-dim); font-size: .92rem; }
.foot-a { color: var(--paper-low); font-size: .74rem; margin-top: .25rem; overflow-wrap: anywhere; }
.foot-s { color: var(--paper-low); font-size: .82rem; margin-top: .25rem; }
.foot-x { color: var(--paper-dim); font-size: .84rem; font-weight: 600; font-family: var(--mono); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.foot-x:hover { color: var(--paper); }

/* ── states ─────────────────────────────────────────────────────────── */

/* PRE-LAUNCH. Every live number is blank by design and the form is inert.
   Nothing here may imply a price or a volume before the token exists. */
/* NOT with opacity: an inert control is still a control people have to read.
   Signal it with the frame and the copy, and leave every colour solved. */
body[data-prelaunch] .form::before { opacity: .1; }
body[data-prelaunch] .form { background: var(--ink); }
body[data-prelaunch] .fld input { pointer-events: none; border-style: dashed; }
body[data-prelaunch] .willmove { border-style: dashed; }
body[data-prelaunch] .nd-now .nd-f { box-shadow: 0 0 0 1px var(--hair-2), 0 18px 46px rgba(0, 0, 0, .5); }
body[data-prelaunch] .nd-now::after { animation: none; }

/* NO READ AT ALL. A progress bar implies a burn total we do not have, so it
   is removed rather than shown at zero. */
body[data-noread] .nextbar { display: none; }

/* STALE. The last good read is kept on screen and marked, because a zero
   would be a lie and a spinner would hide one. */
/* Signal staleness with COLOUR, never with opacity: opacity blends toward the
   ground and drops small text under the contrast floor. --paper-low is a
   solved 7:1 and reads as "dimmed" just as clearly. */
body[data-stale] .facts dd,
body[data-stale] .facts dd a,
body[data-stale] .nextbar-t,
body[data-stale] .nextbar-t b,
body[data-stale] .nextbar-t .mono,
body[data-stale] .nextbar-p,
body[data-stale] .stat .n { color: var(--paper-low); }
body[data-stale] .nextbar-track span { filter: saturate(.12); }
/* images, not text: opacity here costs nothing legible */
body[data-stale] .nd { filter: grayscale(1) saturate(0); opacity: .55; }
body[data-stale] .nd-now::after { animation: none; }

/* ── responsive ─────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .hero-in {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "track" "panel";
    align-items: start;
  }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps li:nth-child(3) { border-left: 0; }
  .steps li:nth-child(n+3) { border-top: var(--rule); }
  .qgrid { grid-template-columns: repeat(3, 1fr); }
  .anywhere-in { grid-template-columns: 1fr; gap: .85rem; }
  .anywhere-k, .anywhere-a { justify-self: start; }
  .ways { grid-template-columns: 1fr; }
}
/* No room inside a narrow ellipse for a caption, so below tablet the two
   halves of the mechanism drop underneath the figure as a two column strip. */
@media (max-width: 860px) {
  .track { aspect-ratio: 1000 / 460; margin-bottom: 4rem; overflow: visible; }
  .track-c { width: 47%; gap: .2rem; }
  .track-c-a { left: 24%; }
  .track-v { font-size: 1.05rem; }
}

@media (max-width: 700px) {
  .strip-in { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: var(--rule); }
  .row { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps li { border-left: 0; border-top: var(--rule); }
  .steps li:first-child { border-top: 0; }
  .qgrid { grid-template-columns: repeat(2, 1fr); }
  .ident-t { font-size: .8rem; }
  .pulse .pulse-t { display: none; }
  .foot-in { gap: 1rem; }
}
@media (max-width: 430px) {
  .ident-k { display: none; }
  .ca { padding: .3rem .45rem; }
  .cta .btn { flex: 1; text-align: center; }
}

/* ── reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body::before, .bar-rule, .aura-text, .thread-c, .band-r, .btn-a, .anywhere-k,
  .panel::before, .form::before, .nextbar-track span, .pulse-d,
  .nd-now::after, .hd > * { animation: none !important; }
  .band-r { transform: none; }
  .specimen .ch.in, .specimen .ch.out { animation: none !important; opacity: 1; }
  body.struck .nd-now .nd-f { animation: none !important; }
}

/* ── contract address bar ──────────────────────────────────────────────────
   Full address, monospace, with a real copy button. `[hidden]` is asserted
   explicitly because a bare `display:flex` on the class would otherwise beat
   it — that exact bug hid nothing and showed an empty bar pre-launch. */
.cabar { display: flex; align-items: center; gap: .7rem; margin: 1.15rem auto 0;
  padding: .6rem .7rem; border: var(--rule); border-radius: 3px;
  background: var(--ink-2); max-width: 42rem; }
.cabar[hidden] { display: none !important; }
.cabar-k { font-family: var(--rit); font-size: .58rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--paper-low); font-weight: 600; flex: none; }
.cabar-v { font-size: .78rem; color: var(--paper-dim); overflow-wrap: anywhere;
  line-height: 1.35; flex: 1 1 auto; user-select: all; text-align: left; }
.cabar-b { flex: none; cursor: pointer; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .04em; padding: .34rem .8rem; border-radius: 2px;
  color: var(--accent-ink); background: var(--paper); border: 1px solid var(--paper);
  transition: background .16s ease, color .16s ease; }
.cabar-b:hover { background: var(--paper-dim); border-color: var(--paper-dim); }
.cabar-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cabar-b[data-done="1"] { background: var(--ok); border-color: var(--ok); }
@media (max-width: 560px) {
  .cabar { flex-wrap: wrap; }
  .cabar-v { flex-basis: 100%; order: 3; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { .cabar-b { transition: none; } }