:root {
  /* ---- THE PLATE. One vertical ombre carries the whole page: deep royal
     blue at the top where the engraving sits, paling to near white at the
     foot where the reading happens. Measured off the commissioned art:
     hue held at 220, saturation staying high even at low lightness, which
     is what keeps it royal rather than dead navy. Coral is the only warm
     thing anywhere, so it always means something. ---- */
  --void:      #06153f;
  --ground:    #0a2a6b;
  --raise:     #ffffff;
  --card:      #ffffff;
  --line-1:    #dfe5f0;
  --line-2:    #c4cee2;

  --ink:       #16233f;
  --ink-dim:   #56617d;
  --ink-faint: #8a93a8;

  /* on the dark upper third the ink inverts */
  --ink-hero:      #ffffff;
  --ink-hero-dim:  #b9c8e4;
  --ink-hero-faint:#7e93bd;

  --signal:    #f0937f;
  --signal-lo: #e0765d;
  --accent:    #8fb4dd;
  --warn:      #e8a34a;
  --glow:      rgba(240, 147, 127, 0.28);
  --grain:     0.8;

  --ink-rgb:    22, 35, 63;
  --signal-rgb: 240, 147, 127;
  --accent-rgb: 143, 180, 221;
}

/* ---- PALETTE B: BRASS. Obsidian, brass instrument, bone marble. Hue 40,
   the exact complement of the blue everyone else in this space uses. ---- */
:root[data-palette="brass"] {
  --void: #060505; --ground: #0a0908; --raise: #12100c; --card: #100e0b;
  --line-1: #241f16; --line-2: #38301f;
  --ink: #f1efe9; --ink-dim: #b1aca0; --ink-faint: #746f63;
  --signal: #dda73c; --signal-lo: #a87d2a; --accent: #cfd8dd; --warn: #e0563f;
  --glow: rgba(221, 167, 60, 0.16);
  --ink-rgb: 241, 239, 233; --signal-rgb: 221, 167, 60; --accent-rgb: 207, 216, 221;
}

/* ---- PALETTE C: MARBLE. Bone on obsidian, no accent hue at all. The
   engraving reference taken literally. Nothing to clash with. ---- */
:root[data-palette="marble"] {
  --void: #060606; --ground: #0a0a0a; --raise: #121211; --card: #101010;
  --line-1: #212120; --line-2: #33322f;
  --ink: #f3f1ec; --ink-dim: #a8a49c; --ink-faint: #6e6a62;
  --signal: #f3f1ec; --signal-lo: #8e8a82; --accent: #c9c3b6; --warn: #d9a05b;
  --glow: rgba(243, 241, 236, 0.13);
  --ink-rgb: 243, 241, 236; --signal-rgb: 243, 241, 236; --accent-rgb: 201, 195, 182;
}

:root {
  /* ---- type ---- */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- rhythm (8px base) ---- */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;

  --radius: 4px;
  --wrap: 1120px;
  --gutter: 24px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.16, 1, .30, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #071a4d;
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--signal); color: #ffffff; }

/* =====================================================================
   BACKGROUND LAYERS
   Four fixed planes, all pointer-events:none, all transform-only under
   scroll. Bottom to top: atmosphere, halftone, wall, aura.
   ===================================================================== */

.plane { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

/* atmosphere: the field is lit from below and off to one side, so the
   page reads as a lit room rather than a black rectangle */
.atmos {
  z-index: 0;
  background:
    linear-gradient(180deg, #f2f5fa 0%, #ffffff 100%);
}

/* halftone: our own print grain. A dot lattice that thins where the
   copy lives, so texture never fights the words. */
.halftone {
  display: none;
  z-index: 0; opacity: 0.20;
  background-image: radial-gradient(rgba(var(--ink-rgb), 0.16) 0.8px, transparent 0.9px);
  background-size: 5px 5px;
  -webkit-mask-image: radial-gradient(ellipse 66% 52% at 50% 42%, transparent 8%, #000 76%);
  mask-image: radial-gradient(ellipse 66% 52% at 50% 42%, transparent 8%, #000 76%);
  transform: translate3d(0, calc(var(--half-y, 0) * 1px), 0);
}

/* aura: one soft lime light tracking the pointer */
.aura {
  z-index: 0;
  background: radial-gradient(460px 460px at var(--sx, 50%) var(--sy, 36%),
    rgba(var(--signal-rgb), 0.07), rgba(var(--signal-rgb), 0.02) 46%, transparent 72%);
}

/* grain: an ordered dither tile, not photographic film grain. Same job as
   the reference's grain (kills banding, adds tactility) by a computational
   means rather than a photographic one. */
.grainplane {
  position: absolute; z-index: 0; opacity: var(--grain, 0.8);
  background-image: url("grain.png"); background-size: 256px 256px;
  mix-blend-mode: screen;
}

/* the wall: the thesis repeated until it is texture, with fragments that
   run real calculations and settle */
.wall {
  position: absolute;
  z-index: 0;
  inset: 0;
  /* The wall is a real layer, not a whisper. Large type, packed line on
     line, at a contrast you can actually see, then the grain sits over the
     top of it. That stack is what gives the ground its depth. */
  font-family: var(--display);
  font-family: var(--mono);
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1.28;
  letter-spacing: 0.01em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.085);
  overflow: hidden; user-select: none; word-break: break-word;
  transform: translate3d(0, calc(var(--wall-y, 0) * 1px), 0);
  text-transform: lowercase;
  /* it fades out where the copy lives and toward the foot of the page */
  /* the wall lives on the dark top and dissolves as the ground pales,
     exactly as it does on the plate */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,0.4) 56%, transparent 76%);
  mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,0.4) 56%, transparent 76%);
}
/* the rare fragment that glitches brighter, like a bad scan line */
.wall .wg { color: rgba(255, 255, 255, 0.17); }
/* fixed width computation slots, so a fragment can churn through a
   calculation without reflowing the wall around it */
/* A computation slot is not an overlay. It inherits the wall's exact font,
   size, weight and tracking, so when a phrase morphs into an identity it
   reads as the wall itself computing, not as something pasted on top of
   it. The width is pinned in ch so the surrounding text never reflows. */
.wall .wd {
  display: inline-block;
  font: inherit;
  letter-spacing: inherit;
  white-space: pre;
  overflow: hidden;
  vertical-align: bottom;
  text-align: left;
  color: inherit;
  transition: color 500ms var(--ease-out), opacity 500ms var(--ease-out);
}
.wall .wd.decoding { color: rgba(255, 255, 255, 0.30); }

/* registration marks: the viewport as an instrument */
.reg, .reg-tick { position: fixed; z-index: 40; pointer-events: none; display: none; }
.reg { width: 13px; height: 13px; border: 0 solid rgba(var(--ink-rgb), 0.34); }
.reg-tl { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.reg-tr { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.reg-bl { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.reg-br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
.reg-tick { top: 50%; width: 7px; height: 1px; background: rgba(var(--ink-rgb), 0.26); }
.reg-ml { left: 12px; } .reg-mr { right: 12px; }

/* the scroll meter: a hairline down the left edge with a lime tick that
   rides the page. The instrument reading itself. */
.meter {
  display: none;
  position: fixed; left: 12px; top: 15%; bottom: 15%; width: 1px;
  background: rgba(var(--ink-rgb), 0.12); z-index: 40; pointer-events: none;
}
.meter::after {
  content: ""; position: absolute; left: -2px; width: 5px; height: 34px;
  background: var(--signal-lo); border-radius: 3px;
  top: calc(var(--read, 0) * (100% - 34px));
}

/* =====================================================================
   SHELL
   ===================================================================== */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.hero .wrap, .sect .wrap, .foot .wrap, .nav-in { position: relative; z-index: 1; }

/* ---- nav: thin, mono, always honest about launch state ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.nav[data-stuck="true"] {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: var(--line-1);
}
.nav-in {
  max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gutter);
  display: flex; align-items: center; gap: var(--s3);
}
.nav-mark {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.nav-mark svg { width: 22px; height: 22px; flex: none; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.nav-links a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.nav-links a:hover { color: var(--signal); }

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

/* the mono eyebrow that labels every block, Harmonic-school editorial
   discipline rendered in our own palette */
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s3);
}
.eyebrow > span:first-child { color: var(--signal-lo); }
.eyebrow .rule { flex: 1; height: 1px; background: var(--line-1); max-width: 120px; }

h1 {
  font-family: var(--display);
  font-size: clamp(40px, 6.2vw, 76px);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.02;
  margin: 0 0 var(--s3);
  color: var(--ink);
}
h1 .glow { font-style: italic; color: var(--signal); }

/* headlines gain weight as they take the stage. Variable axis only, so
   the letters breathe without moving a single pixel of layout. */
h2 {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 400;
  font-variation-settings: "wght" var(--hw, 400);
  letter-spacing: -0.008em;
  line-height: 1.1;
  margin: 0 0 var(--s3);
  color: var(--ink);
}
h3 {
  font-family: var(--display); font-size: 23px; font-weight: 500;
  letter-spacing: -0.012em; margin: 0 0 var(--s1); color: var(--ink);
}

.lede { font-size: 18px; color: var(--ink-dim); max-width: 58ch; margin: 0 0 var(--s4); line-height: 1.55; }
.body { color: var(--ink-dim); max-width: 66ch; margin: 0 0 var(--s2); }
.body-lg { font-size: 17.5px; color: var(--ink-dim); max-width: 62ch; margin: 0 0 var(--s3); line-height: 1.6; }
.mono { font-family: var(--mono); }

/* word-by-word reveal */
.w {
  display: inline-block;
  opacity: 0; filter: blur(7px); transform: translateY(9px);
  transition: opacity 620ms var(--ease-out), filter 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--w-delay, 0ms);
}
[data-written="true"] .w { opacity: 1; filter: blur(0); transform: none; }

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

.hero {
  padding: var(--s8) 0 var(--s12); position: relative; margin-top: -68px; padding-top: 100px;
  /* the ombre is page anchored, not viewport anchored: it runs once, from
     the dark head where the engraving sits down to the pale ground where
     the reading happens */
  background:
    linear-gradient(180deg,
      #071a4d 0%,
      #0e3079 24%,
      #1d4794 48%,
      #3b68a9 66%,
      #7c9cc6 80%,
      #bccbe3 91%,
      #f2f5fa 100%);
}
/* the hero sits on the dark head of the ombre, so its type inverts */
.hero h1, .nav-mark { color: var(--ink-hero); }
.hero .lede, .hero .body { color: #cfdcf1; }
.hero .eyebrow, .hero .btn-reason, .plate-cap { color: #b3c4e2; }
.hero .eyebrow .rule { background: rgba(255,255,255,0.22); }
.hero .ca-row { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); }
.hero .ca-label { color: #cfdcf1; }
.hero .btn-ghost { color: var(--ink-hero); border-color: rgba(255,255,255,0.34); }
.hero .btn-ghost:hover { border-color: var(--signal); color: var(--signal); }
.nav-links a { color: var(--ink-hero-faint); }
.nav-links a:hover { color: var(--ink-hero); }
.nav[data-stuck="true"] .nav-links a { color: var(--ink-faint); }
.nav[data-stuck="true"] .nav-mark { color: var(--ink); }
.hero-grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }
}

/* the agent: a point cloud on canvas, the face carved out as absence */
.plate {
  position: relative; display: grid; place-items: center;
  min-height: 460px; isolation: isolate;
}
.plate .appa { position: absolute; inset: 0; width: 100%; height: 100%; }
#appa-back { z-index: 0; }
#appa-front { z-index: 2; pointer-events: none; }
.bust {
  position: relative; z-index: 1;
  width: 76%; max-width: 460px; height: auto; display: block;
  /* the plate is lit from behind, so the engraving carries a faint halo */
  filter: drop-shadow(0 0 44px rgba(120, 170, 255, 0.30));
}
.plate-cap {
  position: absolute; z-index: 3; bottom: -18px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint); text-align: center; max-width: 96%;
}


/* ---- contract row ---- */
.ca-row {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  border: 1px solid var(--line-1); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.66);
  padding: 13px var(--s2); margin: 0 0 var(--s3);
  font-family: var(--mono); font-size: 13px;
}
.ca-label { color: var(--ink-faint); letter-spacing: 0.1em; }
.ca { color: var(--warn); overflow-wrap: anywhere; }
.ca-row[data-state="live"] .ca { color: var(--signal); word-break: break-all; }

/* ---- buttons ---- */
.cta-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.btn {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.09em;
  padding: 11px 20px; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: transparent; color: var(--ink);
  text-decoration: none; cursor: pointer; display: inline-block;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out),
              border-color 200ms var(--ease-out), transform 200ms var(--ease-spring),
              box-shadow 200ms var(--ease-out);
}
.btn-solid { background: var(--signal-lo); color: #ffffff; border-color: var(--signal-lo); font-weight: 600; }
.btn-solid:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(224, 118, 93, 0.30); }
.btn-ghost:hover { border-color: var(--signal-lo); color: var(--signal-lo); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-reason { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }

/* =====================================================================
   SECTIONS
   ===================================================================== */

.sect { padding: var(--s12) 0; position: relative; }
.sect + .sect { border-top: 1px solid var(--line-1); }

/* ---- process cards ---- */
.grid-3 { display: grid; gap: var(--s2); margin-top: var(--s6); }
@media (min-width: 860px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: 1px solid var(--line-1); border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.76));
  padding: var(--s3);
  position: relative; overflow: hidden;
  /* focus is written per frame: the card at the center of the viewport
     is the subject, the rest recede */
  opacity: calc(0.88 + var(--focus, 0) * 0.12);
  transform: translate3d(0, calc(var(--drift, 0) * 1px), 0);
  transition: border-color 260ms var(--ease-out);
}
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--signal-rgb), calc(var(--focus, 0) * 0.07)), transparent 55%);
}
.card:hover, .card:focus-visible { border-color: var(--signal); }
.card:focus-visible { outline: 1px solid var(--signal); outline-offset: 2px; }
.card-bar {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; gap: 8px;
  padding-bottom: var(--s2); margin-bottom: var(--s2);
  border-bottom: 1px solid var(--line-1);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-lo); flex: none; }
.card p { color: var(--ink-dim); margin: 0 0 var(--s1); font-size: 15px; }
.card-foot {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint);
  border-top: 1px dashed var(--line-1); padding-top: var(--s2); margin-top: var(--s2);
}

/* ---- data panels: proof ledger + telemetry ---- */
.panel {
  margin-top: var(--s4);
  border: 1px solid var(--line-1); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.74); overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-1);
  padding: 11px var(--s2);
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
  letter-spacing: 0.06em;
}
.panel-note {
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
  padding: 11px var(--s2); margin: 0; border-top: 1px solid var(--line-1);
}
.panel[data-state="offline"] .panel-note { color: var(--warn); }

.rows { list-style: none; margin: 0; padding: 6px 0; }
.rows li {
  display: grid; grid-template-columns: 18px 1fr auto; gap: var(--s2);
  align-items: baseline; padding: 8px var(--s2);
  font-family: var(--mono); font-size: 12.5px;
}
.rows li:nth-child(odd) { background: rgba(var(--ink-rgb), 0.028); }
.rows .q { color: var(--signal-lo); }
.rows .q.bad { color: var(--warn); }
.rows .c { color: var(--ink); overflow-wrap: anywhere; }
.rows .c small { display: block; color: var(--ink-faint); font-size: 11px; margin-top: 2px; }
.rows .t { color: var(--ink-faint); font-size: 11px; white-space: nowrap; }
.panel[data-state="offline"] .rows { display: none; }

/* a lean-verified row wears the mint accent, so machine-checked and
   numerically-checked are never confused at a glance */
.rows .badge {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 2px; padding: 1px 5px;
  margin-left: 8px; white-space: nowrap;
}
.badge-lean { color: var(--accent); }
.badge-qed { color: var(--ink-faint); }

/* telemetry grid */
.tele-grid { display: grid; gap: 1px; background: var(--line-1); }
@media (min-width: 700px) { .tele-grid { grid-template-columns: repeat(3, 1fr); } }
.tele-cell { background: var(--card); padding: var(--s2); display: flex; flex-direction: column; gap: 6px; }
.tele-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); }
.tele-v { font-family: var(--mono); font-size: 17px; color: var(--ink); overflow-wrap: anywhere; }
.panel[data-state="offline"] .tele-v { color: var(--ink-faint); }

/* ---- the divergence curve ---- */
.divergence { width: 100%; max-width: 100%; margin-top: var(--s4); display: block; overflow: visible; }
.div-axis { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.dg  { stroke: var(--line-1); stroke-width: 1; }
.dg2 { stroke: var(--line-1); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.7; }
.dt  { fill: var(--ink-faint); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; }
.dm  { stroke: var(--signal); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.72; }
.dp  { fill: var(--signal); }
.dl  { fill: var(--ink); font-family: var(--mono); font-size: 11px; }
.dah { fill: var(--signal); }
.dl2 { fill: var(--signal-lo); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; }
.da  { stroke: var(--signal); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: 0.75; }
.div-curve {
  fill: none; stroke: var(--signal); stroke-width: 2.4; stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--div-len, 1400);
  stroke-dashoffset: calc(var(--div-len, 1400) * (1 - var(--div-p, 0)));
}

/* ---- theorem box ---- */
.theorem-box {
  border-left: 2px solid var(--signal);
  background: linear-gradient(90deg, rgba(var(--signal-rgb), 0.06), transparent 70%);
  padding: var(--s3); margin: var(--s4) 0;
}
.theorem-box p { margin: 0 0 var(--s1); color: var(--ink); font-size: 16px; }
.thm-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--signal-lo); text-transform: uppercase; }
.theorem-box .proof { color: var(--ink-faint); font-family: var(--mono); font-size: 13px; margin: 0; }

/* ---- the tape ---- */
.tape-stage {
  margin-top: var(--s4); border: 1px solid var(--line-1); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.7); overflow: hidden;
}
#tape-canvas { width: 100%; height: 420px; display: block; }
@media (max-width: 640px) { #tape-canvas { height: 280px; } }

/* ---- the flywheel ---- */
.wheel-stage { display: grid; place-items: center; margin: var(--s6) 0 var(--s4); }
.wheel { width: min(620px, 100%); height: auto; overflow: visible; }
.wheel text { font-family: var(--mono); text-anchor: middle; }
.w-disc-back, .w-disc-front { fill: none; stroke: var(--line-2); stroke-width: 1.4; }
.w-spin {
  fill: none; stroke: rgba(var(--signal-rgb), 0.26); stroke-width: 1.2;
  stroke-dasharray: 3 15; stroke-dashoffset: calc(var(--wheel-spin, 0) * 1px);
}
.w-node circle { fill: var(--ground); stroke: var(--signal-lo); stroke-width: 1.6; }
.w-node.back circle { stroke: var(--line-2); }
.w-node.hot circle { fill: var(--signal-lo); stroke: var(--signal-lo); }
.w-pulse, .w-pulse-tail { fill: none; stroke: var(--signal-lo); stroke-linecap: round; }
.w-pulse { stroke-width: 3.4; stroke-dasharray: 1.6 98.4; stroke-dashoffset: calc(var(--wheel-dash, 0) * -1); }
.w-pulse-tail { stroke-width: 2; opacity: 0.34; stroke-dasharray: 13 87; stroke-dashoffset: calc(var(--wheel-tail, 0) * -1); }
.w-chip rect { fill: var(--raise); stroke: var(--line-2); stroke-width: 1; }
.w-chip line { stroke: var(--line-2); stroke-width: 1; }
.w-chip text { fill: var(--ink-dim); font-size: 11.5px; letter-spacing: 0.05em; }
.w-chip.hot rect { stroke: var(--signal-lo); }
.w-chip.hot text { fill: var(--signal-lo); }
.w-chip-burn.hot rect { stroke: var(--warn); }
.w-chip-burn.hot text { fill: var(--warn); }
.w-eye-b { animation: eyeblink 3.4s steps(1) infinite; }
@keyframes eyeblink { 0%, 88%, 100% { opacity: 1; } 90%, 96% { opacity: 0.08; } }
.w-hub-cap { fill: var(--ink-faint); font-size: 11.5px; }

/* ---- the feed ---- */
.feed-col { display: grid; gap: var(--s2); margin-top: var(--s4); }
.post p { font-size: 15.5px; color: var(--ink); }

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

.foot { border-top: 1px solid var(--line-1); padding: var(--s8) 0 var(--s12); }
.foot-mark { display: flex; align-items: center; gap: 11px; margin-bottom: var(--s3); }
.foot-mark svg { width: 30px; height: 30px; }
.foot-name { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.fine { color: var(--ink-faint); font-size: 13.5px; max-width: 74ch; margin: 0 0 var(--s2); }

/* =====================================================================
   MOTION PREFERENCES
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .w { opacity: 1; filter: none; transform: none; transition: none; }
  .card { opacity: 1; transform: none; }
  .w-eye-b { animation: none; }
  .div-curve { stroke-dashoffset: 0; }
}

/* =====================================================================
   MOBILE
   Desktop section padding reads as dead air on a phone, and the
   background masks have to cover a full-width copy column.
   ===================================================================== */

@media (max-width: 760px) {
  :root { --gutter: 18px; }
  .hero { padding: var(--s4) 0 var(--s6); }
  .sect { padding: var(--s6) 0; }
  .foot { padding: var(--s6) 0 var(--s8); }
  body { font-size: 15px; }
  .lede { font-size: 17px; }
  .body-lg { font-size: 16px; }
  .plate { min-height: 380px; }
  .bust { width: 84%; max-width: 320px; }
  .meter { display: none; }
  .wall { font-size: 30px; }
  .wall, .halftone {
    -webkit-mask-image: radial-gradient(ellipse 150% 42% at 50% 40%, rgba(0,0,0,0.2), #000 86%);
    mask-image: radial-gradient(ellipse 150% 42% at 50% 40%, rgba(0,0,0,0.2), #000 86%);
  }
  .rows li { grid-template-columns: 16px 1fr; }
  .rows .t { display: none; }
}

/* ---------------- the explainer ---------------- */
/* Four live computations. Each panel is a canvas that only runs while it
   is on screen, so four simultaneous animations cost one rAF. */
.wave-grid { display: grid; gap: var(--s2); margin-top: var(--s6); }
@media (min-width: 820px) { .wave-grid { grid-template-columns: 1fr 1fr; gap: var(--s3); } }

.wave {
  margin: 0;
  border: 1px solid var(--line-1); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.55);
  padding: var(--s2) var(--s2) var(--s3);
  display: flex; flex-direction: column;
}
.wave figcaption {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-dim);
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: var(--s2); margin-bottom: var(--s2);
  border-bottom: 1px solid var(--line-1);
}
.wave-n { color: var(--signal-lo); }
.wave canvas { width: 100%; height: 250px; display: block; }
.wave-read {
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  margin: var(--s2) 0 var(--s1); min-height: 1.2em;
  /* the number changes every frame, so it must never reflow the panel */
  font-variant-numeric: tabular-nums;
}
.wave-note { font-size: 14px; color: var(--ink-dim); margin: 0; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { .wave canvas { height: 170px; } }

/* ---------------- tabbed views ---------------- */
.view[hidden] { display: none; }
.nav-links a.on { color: var(--ink-hero); }
.nav[data-stuck="true"] .nav-links a.on { color: var(--signal-lo); }
.nav-links a { position: relative; padding-bottom: 3px; }
.nav-links a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--signal);
}
.nav-links a.nav-cta.on::after { display: none; }

@media (max-width: 760px) {
  /* the tabs become the primary control on a phone, so they stay visible
     and scroll horizontally rather than collapsing into a hidden menu */
  /* the CTA leaves the scrolling tab strip and sits beside the mark, so it
     is never parked off the right edge where nobody scrolls to find it */
  .nav-in { position: relative; flex-wrap: wrap; gap: var(--s1) var(--s2); padding: 10px var(--gutter); }
  .nav-links a.nav-cta { position: absolute; top: 6px; right: var(--gutter); }
  .nav-links {
    margin-left: 0; width: 100%; gap: var(--s2);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { display: block; white-space: nowrap; font-size: 11px; }
  .nav-links a.nav-cta { padding: 7px 12px; }
  .nav-mark span { font-size: 11.5px; }
  .hero { margin-top: 0; padding-top: var(--s4); }
  .rows li { grid-template-columns: 16px 1fr; }
  .rows .t { display: none; }
  .wave canvas { height: 210px; }
  #tape-canvas { height: 260px; }
}

.fine a { color: var(--signal-lo); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.fine a:hover { border-bottom-color: var(--signal-lo); }