/* XEKTA — display board
   Matte polymer housings, brushed rails, perforated mesh, three LED colours.
   Silver carries the brand, money and refusal, amber the human decision and
   the clock, green the protocol path. Unlit cells are drawn, never omitted.

   Materials are real raster tiles under web/tex/, applied at working strength.
   Every container is one chamfered chassis with a lit rim; content sits in bays
   inside it. There are no floating cards on this board. */

/* ------------------------------------------------------------------ tokens */

:root {
  --black: #080808;
  --housing-hi: #121212;
  --housing: #0a0a0a;
  --rim-hi: #353535;
  --rim-lo: #1c1c1c;
  --divider: #202020;

  /* Unlit cells must read as drawn absence, not as empty space. Neutral grey:
     a drawn-but-dark cell has no emitter, so it has no business carrying an
     emitter's hue. */
  --unlit: #262626;

  --silver: #eef0f4;
  --amber: #ffb000;
  --green: #39ff14;

  --ink: #dcdcdf;
  --ink-2: #a3a3a3;
  --ink-3: #898989;
  --ink-4: #818181;
  --ink-off: #7c7c7c;

  --led: var(--silver);
  /* Silver carries the most text on this board and measures the highest of the
     three signals, so its bloom runs tighter than the others': at the red's old
     strength a lit headline blew out into the housing around it. */
  --led-soft: rgba(238, 240, 244, .34);

  --step: 4px;
  --gut: clamp(20px, 5vw, 72px);
  --sec-y: clamp(76px, 10vh, 132px);
  --rail-h: 60px;
  --ch: 14px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black) url("tex/polymer.png") repeat;
  background-size: 160px 160px;
  color: var(--ink);
  font: 400 clamp(15px, 1.05vw, 17px)/1.6 Archivo, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute;
  left: var(--gut); top: -100px;
  z-index: 90;
  background: #1c1c1c;
  color: var(--ink);
  padding: 12px 18px;
  border: 1px solid var(--rim-hi);
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 12px;
  text-decoration: none;
}
.skip:focus { top: 12px; }

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

/* ------------------------------------------------------------ silkscreen */

.silk {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: clamp(9.5px, .72vw, 11px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.5;
}
.silk--dim { color: var(--ink-4); }
/* Brushed metal is lighter than a housing interior, so its labels get their own
   value rather than inheriting the one measured against matte polymer. */
.module__bar .silk--dim, .rail .silk--dim { color: #9a9a9a; }
.silk--on { color: var(--led); }
.silk--ok { color: var(--green); }
/* The one silkscreen label that asks for an action. Amber, because a person is
   in this loop — the same reason the keys below it are amber. */
.silk--pick { color: var(--amber); }

code {
  font-family: "Martian Mono", ui-monospace, monospace;
}

.lede {
  max-width: 68ch;
  color: var(--ink-2);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  margin: calc(var(--step) * 11) 0 0;
}
.lede--center { margin-left: auto; margin-right: auto; text-align: center; }

strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------- icon system */

.ico {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.ico--lg { width: 28px; height: 28px; }

/* --------------------------------------------------------------- displays */

.dsvg, .ssvg { display: block; overflow: visible; }

/* The dot-matrix ghost grid gets its own value rather than the shared
   --unlit: a 5x7 message is a dense field of cells, and at the token's own
   value that field drowned the lit dots. Seven-segment readouts keep
   --unlit, where the drawn dark segments are the signature and there are
   only seven of them per glyph, not thirty-five. */
.dmg__d { fill: #1a1a1a; }
.dml circle { fill: var(--led); }
.dml { filter: drop-shadow(0 0 5px var(--led-soft)); }
/* The opening sentence is the one a reader meets cold, at the largest size and
   from the furthest back, so it carries a stronger bloom than the rest — but
   only slightly. Past about 6px the halo crosses the gap between cells and
   starts eating the letterforms it is supposed to be lifting. */
.dm--hero .dml { filter: drop-shadow(0 0 6px var(--led-soft)); }

.sg__s { fill: var(--unlit); transition: fill .12s linear; }
.sg__s.is-on { fill: var(--led); }
.ssvg { filter: drop-shadow(0 0 7px var(--led-soft)); }

/* Lamp test: every cell lit at once, the way a module reports it is alive. */
/* Lamp test. Every cell carries current at once, so the ghost dots take the
   lit radius as well as the lit colour — otherwise the board tests at 0.18 and
   the flash reads as the message appearing early rather than as the panel
   proving all of itself works. `r` is a CSS property on SVG geometry. */
.dsvg.is-test .dmg__d { fill: var(--led); r: 0.32; }
/* The lit layer is hidden for the duration rather than lit alongside the ghost
   one. Both are the same signal at the same radius, but only the lit layer carries
   a drop-shadow — so leaving it on let the message glow faintly through a field
   that is supposed to be undifferentiated. The pattern already covers every
   cell, so hiding the message is what makes the test read as a test. */
.dsvg.is-test .dml { opacity: 0; }
.ssvg.is-test .sg__s { fill: var(--led); }

.dm { margin: 0; position: relative; }
.dm .dsvg { width: 100%; height: auto; }

/* The write head. A real sign paints a message with a bright edge running ahead
   of the lit cells; without it the character stagger is over in a fifth of a
   second and reads as a fade. Position, size and travel are all set per line by
   main.js from the measured glyph geometry — nothing here assumes the element
   box, because the box is wider than the display inside it. */
.dm__head {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  /* A tail that fades back over the cells already written, and a bright edge
     at the front where the current actually is. */
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--led) 30%, transparent) 55%,
    color-mix(in srgb, var(--led) 78%, transparent) 88%,
    color-mix(in srgb, var(--led) 96%, transparent));
  filter: blur(5px);
}
.dm--hero .dsvg { max-width: 100%; }
.dm--head .dsvg { max-width: min(1040px, 100%); }
.dm--stmt .dsvg { max-width: min(560px, 92%); }

.dm--stmt {
  margin: calc(var(--step) * 18) auto calc(var(--step) * 5);
  display: flex;
  justify-content: center;
}
.dm--green { --led: var(--green); --led-soft: rgba(57, 255, 20, .45); }
/* A statement standing inside a chassis rather than between two of them. The
   standalone rhythm above is measured against open page; in a bay it has the
   module's own padding underneath it already. */
.dm--inset { margin: clamp(30px, 4.4vw, 58px) auto clamp(22px, 3vw, 40px); }

.ss { display: inline-flex; align-items: center; }
.ss .ssvg { height: 1em; width: auto; }
.ss--md { font-size: 22px; }
.ss--clock { font-size: clamp(60px, 10vw, 118px); }
/* The reach totem. Eight digits wide, so it rides a shorter step than the
   clock's four — at the clock's size the string ran the width of the housing
   and stopped reading as one figure. Its glow is the fixed emitter value every
   other readout gets; nothing here surges. */
.ss--totem { font-size: clamp(34px, 5.4vw, 74px); display: block; }

/* ------------------------------------------------------------- structure */

.wrap { width: min(1240px, 100% - var(--gut) * 2); margin-inline: auto; }

.sec { position: relative; padding: var(--sec-y) 0 calc(var(--sec-y) * .8); }
.sec + .sec { border-top: 1px solid #131313; }

/* A beat is lit by the signal it is about, not by the board's default emitter.
   Every headline used to be one colour regardless of subject, which is why eleven
   sections read as one long identical banner. Setting --led here is enough:
   the dot matrix, its glow, the .silk--on labels and any seven-segment without
   its own override all follow, per the Local Lamp Rule. Module internals that
   hard-code a colour (escrow money rows, core lamps) are untouched by design. */
.sec--sig-silver { --led: var(--silver); --led-soft: rgba(238, 240, 244, .34); }
.sec--sig-green { --led: var(--green); --led-soft: rgba(57, 255, 20, .45); }
.sec--sig-amber { --led: var(--amber); --led-soft: rgba(255, 176, 0, .5); }
.sec > .wrap { position: relative; z-index: 1; }
/* The headline stands well off its module: a section is a claim and the thing
   that proves it, nothing else. The body ledes that used to sit under each
   module are gone — a module now says what it means where it is. */
.sec h2.dm { margin-bottom: calc(var(--step) * 17); }

/* The ambient bounce that used to wash the panel behind the hero and the close
   is gone. Three lit layers overlapped there — this one, the section's own
   ambient, and the board's internal bloom — and their sum lifted the ground off
   black into a haze that cost the display its edge. The board emits; the room
   around it does not. */

/* ------------------------------------------------ the chassis (all of them) */

.module,
.board {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--rim-hi), var(--rim-lo) 55%, #151515);
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0,
    100% var(--ch), 100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%, var(--ch) 100%,
    0 calc(100% - var(--ch)), 0 var(--ch));
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .8));
}
.module::before,
.board::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  clip-path: polygon(
    calc(var(--ch) - 1px) 0, calc(100% - var(--ch) + 1px) 0,
    100% calc(var(--ch) - 1px), 100% calc(100% - var(--ch) + 1px),
    calc(100% - var(--ch) + 1px) 100%, calc(var(--ch) - 1px) 100%,
    0 calc(100% - var(--ch) + 1px), 0 calc(var(--ch) - 1px));
  background:
    url("tex/polymer.png") repeat,
    linear-gradient(180deg, var(--housing-hi), var(--housing) 60%, #070707);
  background-size: 160px 160px, auto;
}
.module > *, .board > * { position: relative; z-index: 1; }

/* Every chassis takes charge as it comes into view: the rim it is already made
   of brightens for a beat and settles. The system's own lamp-test rule, applied
   to the housing rather than only to the hero display. */
@keyframes rim-charge {
  0%   { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .8)) brightness(1); }
  22%  { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .8)) brightness(1.9); }
  100% { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .8)) brightness(1); }
}
.module.is-charging { animation: rim-charge .62s cubic-bezier(.16, 1, .3, 1); }

/* The board is on, and says so the way hardware does. */
@keyframes pwr-breathe {
  0%, 100% { opacity: 1;   box-shadow: 0 0 8px rgba(57, 255, 20, .85); }
  50%      { opacity: .62; box-shadow: 0 0 4px rgba(57, 255, 20, .45); }
}
.pwr { animation: pwr-breathe 3.4s ease-in-out infinite; }

/* Brushed-metal service bar, top and bottom of a chassis. */
.module__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
  flex-wrap: wrap;
  padding: 13px clamp(16px, 2vw, 26px);
  background:
    url("tex/brushed.png") repeat,
    linear-gradient(180deg, #232323, #181818);
  background-size: 256px 96px, auto;
  border-bottom: 1px solid var(--rim-hi);
  box-shadow: inset 0 1px 0 rgba(248, 248, 248, .07);
}
.module__bar--foot {
  border-bottom: 0;
  border-top: 1px solid var(--rim-hi);
  background:
    url("tex/brushed.png") repeat,
    linear-gradient(0deg, #232323, #181818);
  background-size: 256px 96px, auto;
}

/* Bays: content lives in bays inside one chassis, never in separate cards. */
.bays {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;
}
.bays--three { grid-template-columns: 1fr 1px 1.3fr 1px 1fr; }

.bay {
  padding: clamp(18px, 2.2vw, 30px);
  display: grid;
  align-content: start;
  gap: calc(var(--step) * 3);
  margin: 0;
  min-width: 0;
}
.bay__cap { display: block; }
/* A bay that carries a foot caption pins it to the floor, so paired bays line
   their captions up across the divider instead of ending wherever their own
   content happens to stop. `margin-top: auto` alone cannot do this while the
   grid packs its rows to the start. */

.split { background: var(--divider); position: relative; }
.split i {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 3px; height: 0;
  border-radius: 2px;
}
.split i.is-flow {
  height: 40px;
  background: linear-gradient(180deg, transparent, var(--green), transparent);
  box-shadow: 0 0 10px rgba(57, 255, 20, .6);
  opacity: 0;
  transition: opacity .4s;
}
.split i.is-flow.is-on { opacity: 1; }

/* ------------------------------------------------------------------ rails */

.rail {
  background:
    url("tex/brushed.png") repeat,
    linear-gradient(180deg, #202020, #141414 45%, #0c0c0c);
  background-size: 256px 96px, auto;
  border-block: 1px solid var(--rim-hi);
  position: relative;
  z-index: 2;
}
.rail--top { position: sticky; top: 0; z-index: 50; border-top: 0; }
/* How far through the argument the reader is, in the only language this board
   has for progress: current that has travelled a rail. No numerals, no chrome. */
.rail--top::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, transparent, var(--green));
  box-shadow: 0 0 6px rgba(57, 255, 20, .45);
  pointer-events: none;
}
.rail__inner {
  width: min(1240px, 100% - var(--gut) * 2);
  margin-inline: auto;
  min-height: var(--rail-h);
  display: flex;
  align-items: center;
  gap: calc(var(--step) * 6);
  justify-content: space-between;
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.pwr {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(57, 255, 20, .85);
  flex: none;
}
/* Mark and wordmark are one drawn lockup, not an image beside a set caption:
   the wordmark's tracking and its crossbar-less A are letterforms, and no
   installed face carries them. Drawn once here so the rail, the tab and the
   unfurl card can never drift apart. Sized by height — the viewBox does the
   rest — and given the bloom every lit thing on this board carries, without
   which the mark reads as a flat sticker stuck next to lit type. */
.brand__lockup {
  height: clamp(17px, 1.36vw, 19px);
  width: auto;
  display: block;
  flex: none;
  margin-left: -1px;
  color: #eef0f4;
  filter: drop-shadow(0 0 9px rgba(238, 240, 244, .3));
}

.rail__nav { display: flex; gap: calc(var(--step) * 7); }
.rail__nav a {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.rail__nav a:hover, .rail__nav a:focus-visible { color: var(--silver); border-bottom-color: var(--silver); }
.rail__nav a[aria-current] { color: var(--silver); border-bottom-color: rgba(238, 240, 244, .45); }

.rail__right { display: flex; align-items: center; gap: calc(var(--step) * 5); }
/* Amber, like the section it leads to: this is the board asking a person to
   act, and amber is the only signal that ever means a human is in the loop. */
.rail__cta { --led: var(--amber); --led-soft: rgba(255, 176, 0, .55); flex: none; padding: 9px 15px; }
.rail--bottom .rail__inner { flex-wrap: wrap; padding-block: calc(var(--step) * 6); }
.rail--bottom p { margin: 0; }

/* A module button: chamfered cell, outlined at rest, filled when pressed. */
.mbtn {
  --ch: 7px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--led);
  text-decoration: none;
  padding: 11px 18px;
  background: #0d0d0d;
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 calc(100% - var(--ch)), 0 var(--ch));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--led) 45%, transparent);
  transition: background .2s var(--ease), color .2s, box-shadow .2s;
}
.mbtn:hover, .mbtn:focus-visible {
  background: color-mix(in srgb, var(--led) 16%, transparent);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--led), 0 0 26px -6px var(--led-soft);
}
.mbtn:active {
  background: var(--led);
  color: #0a0a0a;
  box-shadow: inset 0 0 0 1px var(--led), 0 0 34px -4px var(--led);
}
.mbtn:active .mbtn__led { background: #0a0a0a; box-shadow: none; }
.mbtn--lg {
  --ch: 10px;
  font-size: clamp(12px, 1.1vw, 15px);
  padding: 18px 30px;
  margin: calc(var(--step) * 11) auto 0;
  display: flex;
  width: fit-content;
}
.mbtn__led {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 9px var(--led);
  transition: background .2s, box-shadow .2s;
}

/* ------------------------------------------------------------------- hero */

.sec--hero {
  min-height: calc(100svh - var(--rail-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}
.sec--hero .wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(30px, 5.5vh, 64px);
  padding-block: clamp(34px, 6vh, 74px);
}

/* The hero display sits in its own housing, mesh-backed and screwed down. */
.board {
  --ch: 20px;
  padding: clamp(26px, 4vw, 58px) clamp(22px, 3.4vw, 50px);
}
.board::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  /* Mesh only. The warm radial that used to sit under it tinted the perforation
     warm, so the same texture read brown inside the board and neutral grey
     outside it — one material, two colours. The board's light now comes from
     the glyphs alone. */
  background-image: url("tex/mesh.png");
  background-size: 11px 11px;
  /* Driven by the power-on sequence: 0 cold, ~1.15 at charge, .45 at rest. */
  opacity: var(--bloom, .45);
  pointer-events: none;
}
.board > * { z-index: 2; }

/* The acrylic window in front of a real display module: one soft diagonal
   highlight and a faint edge vignette, sitting ABOVE the emitters rather than
   behind them. It is a separate layer for exactly that reason — a background
   on the housing would be light the glyphs sit on top of, which is backwards. */
.glass {
  position: absolute;
  inset: 1px;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(104deg,
      transparent 26%,
      rgba(248, 248, 248, .05) 41%,
      rgba(248, 248, 248, .014) 51%,
      transparent 62%),
    radial-gradient(128% 108% at 50% -6%, transparent 52%, rgba(0, 0, 0, .38));
}
.board__screws { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.board__screws i {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #454545, #141414 62%, #0a0a0a);
  box-shadow: inset 0 -1px 1px rgba(251, 251, 251, .12), 0 1px 1px rgba(0, 0, 0, .6);
  z-index: 3;
}
.board__screws i:nth-child(1) { top: 11px; left: 11px; }
.board__screws i:nth-child(2) { top: 11px; right: 11px; }
.board__screws i:nth-child(3) { bottom: 11px; left: 11px; }
.board__screws i:nth-child(4) { bottom: 11px; right: 11px; }

.protorail { position: relative; }
.protorail__line { position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: #202020; }
/* The travelled length is one number, --fill, and each layout decides which
   axis it runs along. That is what lets the rail turn ninety degrees on a
   phone without the power-on sequence knowing anything about it. */
.protorail__line i {
  position: absolute;
  left: 0; top: 0; height: 1px;
  width: var(--fill, 0);
  background: linear-gradient(90deg, transparent, var(--green));
  box-shadow: 0 0 8px rgba(57, 255, 20, .55);
}
.protorail__stations {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(var(--step) * 4);
}
.stn { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.stn__led {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #151515;
  border: 1px solid #2b2b2b;
  transition: background .3s, box-shadow .3s, border-color .3s, transform .3s;
}
.stn.is-on .stn__led {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 13px rgba(57, 255, 20, .75);
}
.stn--core.is-on .stn__led { box-shadow: 0 0 22px rgba(57, 255, 20, .95); transform: scale(1.3); }
.stn__name {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: clamp(10px, .78vw, 12px);
  font-weight: 500;
  color: var(--ink);
  margin-top: 4px;
}
/* Ticker — the message module on the bottom rail. */
.ticker {
  position: relative;
  z-index: 1;                 /* clears the section's ambient bounce layer */
  flex: none;
  border-top: 1px solid var(--rim-hi);
  background: linear-gradient(180deg, #0c0c0c, #060606);
  padding: 15px 0;
}
.ticker__mask { overflow: hidden; width: 100%; }
.ticker__run { width: max-content; }
.ticker__run .dsvg { height: 15px; width: auto; }

/* ------------------------------------------------------------- 2 · sides */
/* The on-ramp bay: a named party, a lamp that reports when the current
   reaches it, and prose. No display glyphs here on purpose — this is the one
   module that explains rather than emits. */
.party { align-content: start; gap: calc(var(--step) * 4); }
.party__name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Martian Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.4;
  color: var(--ink-4);
  transition: color .35s;
}
.party__led {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--unlit);
  flex: none;
  transition: background .35s, box-shadow .35s;
}
.party.is-on .party__name { color: var(--ink); }
.party.is-on .party__led { background: var(--green); box-shadow: 0 0 10px rgba(57, 255, 20, .7); }
.party--core.is-on .party__led { box-shadow: 0 0 20px rgba(57, 255, 20, .9); transform: scale(1.25); }
.party--core.is-on .party__name { color: var(--green); }
.party__text {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(14px, 1.02vw, 16px);
  line-height: 1.6;
  color: var(--ink-off);
  transition: color .35s;
}
.party.is-on .party__text { color: var(--ink-2); }

/* ------------------------------------------------------------- 3 · reach */

/* The two-figure tally that used to sit here is gone. One figure remains, and
   it is centred rather than benched against a second: with nothing to compare
   against, a column of dead housing beside it would read as a missing half. */
.totemrig {
  display: grid;
  justify-items: center;
  gap: calc(var(--step) * 3);
  padding: clamp(30px, 4vw, 54px) clamp(18px, 2.2vw, 30px) 0;
  text-align: center;
}
/* The qualifier the display itself cannot set. It is dim on purpose: the
   figure is the claim, and this line is the size of the claim's own error.
   No measure is set on it: `ch` ignores the silkscreen's .1em tracking, so
   every value that looked like one line broke this one into two. The rig's
   own padding is the only limit it needs. */

/* The unreachable field runs past the measure: it does not end where the
   layout does. Every cell is drawn and wired to nothing. */
.ghostfield {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9px, 1fr));
  gap: 3px;
  max-height: 186px;
  overflow: hidden;
  padding: clamp(18px, 2.2vw, 30px);
  -webkit-mask-image: linear-gradient(180deg, #000 26%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 26%, transparent 97%);
}
.ghostfield i { display: block; aspect-ratio: 3 / 4; box-shadow: inset 0 0 0 1px var(--unlit); }

/* -------------------------------------------------------------- 4 · loop */

.loop { padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2.2vw, 30px); }
.loop__stations {
  list-style: none;
  margin: 0 0 calc(var(--step) * 5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(6px, 1vw, 18px);
}
/* One continuous track with stops on it, the way the hero rail runs. These were
   seven separate border-tops with gaps, which read as seven unrelated rules
   rather than a path a purchase travels. */
.loop__stations { position: relative; padding-top: 26px; }
.loop__stations::before,
.loop__stations::after {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  height: 1px;
}
.loop__stations::before { right: 0; background: #202020; }
.loop__stations::after {
  width: var(--travel, 0%);
  background: linear-gradient(90deg, transparent, var(--green));
  box-shadow: 0 0 8px rgba(57, 255, 20, .5);
}
.lstn { display: grid; gap: 8px; position: relative; }
.lstn__led {
  position: absolute;
  top: -26px; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #151515;
  border: 1px solid #2b2b2b;
  transition: background .25s, box-shadow .25s, border-color .25s;
}
.lstn.is-on .lstn__led { background: var(--green); border-color: var(--green); box-shadow: 0 0 9px rgba(57, 255, 20, .6); }
.lstn--hold.is-on .lstn__led { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 17px rgba(255, 176, 0, .85); }
.lstn__name {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: clamp(11px, .9vw, 14px);
  font-weight: 500;
  color: var(--ink-4);
  transition: color .25s;
}
.lstn.is-on .lstn__name { color: var(--ink); }
.lstn--hold.is-on .lstn__name { color: var(--amber); }
.readout { align-items: baseline; }

/* ----------------------------------------------------------- 5 · consent */

/* Three keys on the board. These were flat regions divided by hairlines and
   nobody could tell they were pressable; each is now its own chamfered control
   with a standing outline, a hover charge and a real press state. */
.policy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(16px, 2vw, 26px);
}
.pol {
  --ch: 8px;
  appearance: none;
  border: 0;
  text-align: left;
  background: #0d0d0d;
  color: inherit;
  font: inherit;
  padding: clamp(16px, 1.9vw, 24px);
  display: grid;
  align-content: start;
  gap: 10px;
  cursor: pointer;
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0,
    100% var(--ch), 100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%, var(--ch) 100%,
    0 calc(100% - var(--ch)), 0 var(--ch));
  box-shadow: inset 0 0 0 1px rgba(255, 176, 0, .24);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.pol:hover, .pol:focus-visible {
  background: rgba(255, 176, 0, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 0, .6), 0 0 24px -8px rgba(255, 176, 0, .65);
}
.pol:active { background: rgba(255, 176, 0, .17); }
.pol[aria-checked="true"] {
  background: rgba(255, 176, 0, .1);
  box-shadow: inset 0 0 0 1px var(--amber), 0 0 28px -9px rgba(255, 176, 0, .6);
}
.pol__led {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #151515;
  border: 1px solid #2b2b2b;
  transition: background .25s, box-shadow .25s, border-color .25s;
}
.pol[aria-checked="true"] .pol__led { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 15px rgba(255, 176, 0, .85); }
.pol__name {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: clamp(11px, .88vw, 13.5px);
  font-weight: 500;
  color: var(--ink);
}
.pol__sub { font-size: clamp(11.5px, .85vw, 13px); line-height: 1.5; color: var(--ink-3); }

.gate {
  border-top: 1px solid var(--divider);
  padding: clamp(20px, 2.4vw, 30px);
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}
.gate__rule { margin: 0; max-width: 62ch; font-size: clamp(14px, 1.25vw, 19px); line-height: 1.5; color: var(--ink); }
#gate-state { color: var(--amber); }

/* ------------------------------------------------------------- 6 · clock */

.bay--clock {
  position: relative;
  align-content: center;
  justify-items: start;
  gap: calc(var(--step) * 2);
  --led: var(--amber);
  --led-soft: rgba(255, 176, 0, .5);
}
.clockrig__cap { color: var(--ink-3); }
/* A running clock beats its colon. Starts and ends lit, so the reduced-motion
   override lands on the readable state rather than a half-drawn one. */
@keyframes colon-beat { 0%, 54% { opacity: 1; } 55%, 100% { opacity: .16; } }
.ss--clock .sg__c { animation: colon-beat 1.1s steps(1, end) infinite; }
.clockrig__state { display: block; color: var(--amber); }
.clockrig.is-void .bay--clock { --led: var(--silver); --led-soft: rgba(238, 240, 244, .38); }
.clockrig.is-void .clockrig__state { color: var(--silver); }
.clockrig.is-released .bay--clock { --led: var(--green); --led-soft: rgba(57, 255, 20, .45); }
.clockrig.is-released .clockrig__state { color: var(--green); }

.escrow { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.esc {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 14px 2px;
  border-bottom: 1px solid #191919;
}
.esc:last-child { border-bottom: 0; }
.esc__led { width: 9px; height: 9px; border-radius: 50%; background: var(--unlit); align-self: center; transition: background .3s, box-shadow .3s; }
.esc.is-on .esc__led { background: var(--green); box-shadow: 0 0 7px rgba(57, 255, 20, .6); }
.esc--money.is-on .esc__led { background: var(--silver); box-shadow: 0 0 7px rgba(238, 240, 244, .45); }
.esc__name {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: clamp(11px, .85vw, 13px);
  font-weight: 500;
  color: var(--ink-4);
  transition: color .3s;
}
.esc.is-on .esc__name { color: var(--ink); }
.esc--money.is-on .esc__name { color: var(--silver); }

/* ------------------------------------------------------------ 7 · refuse */

.refuse__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--divider); }
.ref {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  padding: clamp(13px, 1.5vw, 18px) clamp(16px, 2vw, 26px);
  background: var(--housing);
  color: #454545;
}
.ref .ico { grid-area: 1 / 1; }
.ref__name { grid-area: 1 / 2; }
.ref__cells { display: flex; gap: 3px; grid-area: 1 / 3; }
.ref__cells i {
  display: block; width: 9px; height: 15px;
  box-shadow: inset 0 0 0 1px var(--unlit);
  background: #080808;
  /* Death is the default transition and it accelerates; ignition overrides it
     with a fast linear one. A cell dies slower than it lights, and gives up
     faster the longer it has been dying. */
  transition: background .34s cubic-bezier(.55, 0, 1, .45), box-shadow .34s cubic-bezier(.55, 0, 1, .45);
}
.ref__cells i.is-trying {
  background: rgba(238, 240, 244, .4);
  box-shadow: inset 0 0 0 1px var(--silver), 0 0 12px -2px rgba(238, 240, 244, .6);
  transition: background .09s linear, box-shadow .09s linear;
}
.ref__name {
  font-size: clamp(13px, 1.05vw, 16px);
  color: var(--ink-2);
  transition: color .34s cubic-bezier(.55, 0, 1, .45);
}
.ref.is-trying .ref__name { color: var(--ink); transition: color .1s linear; }
/* ------------------------------------------------------------- 8 · close */

.sec--close { padding-bottom: clamp(64px, 9vh, 116px); }
.waves .bay { align-content: start; gap: 9px; }
.wave { position: relative; color: var(--ink-off); }
.wave__led {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #151515;
  border: 1px solid #2b2b2b;
  transition: background .3s, box-shadow .3s, border-color .3s;
}
.wave.is-on .wave__led { background: #3b3b3b; border-color: #3b3b3b; }
.wave--now.is-on .wave__led { background: var(--green); border-color: var(--green); box-shadow: 0 0 17px rgba(57, 255, 20, .85); }
.wave__name {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 500;
  color: var(--ink-3);
}
.wave--now .wave__name { color: var(--ink); }
.wave--now { color: rgba(57, 255, 20, .75); }
.wave__sub { font-size: clamp(12px, .92vw, 14px); color: var(--ink-3); }
.wave__eg {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: clamp(9.5px, .72vw, 11px);
  letter-spacing: .06em;
  color: var(--ink-4);
}
.wave--now .wave__eg { color: rgba(57, 255, 20, .8); }

/* ---------------------------------------------------------- 9 · waitlist */

/* The one form on the board. Fields are drawn cells like everything else —
   unlit at rest, amber when the person is in them — so an input reads as a
   place current can flow rather than as a browser widget dropped on top. */
.wl { padding: clamp(18px, 2.4vw, 30px); }
.wl__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 20px);
}
.field--wide { grid-column: 1 / -1; }

.field { display: grid; gap: 7px; }
.field__label { color: var(--ink-3); }
.field__input {
  --ch: 7px;
  width: 100%;
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: clamp(12px, .95vw, 14px);
  color: var(--ink);
  background: #080808;
  border: 0;
  padding: 13px 14px;
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 calc(100% - var(--ch)), 0 var(--ch));
  box-shadow: inset 0 0 0 1px var(--unlit);
  transition: box-shadow .2s var(--ease), background .2s var(--ease);
}
.field__input::placeholder { color: var(--ink-off); }
.field__input:hover { box-shadow: inset 0 0 0 1px #373737; }
.field__input:focus {
  outline: none;                       /* replaced by the lit rim below, not removed */
  background: rgba(255, 176, 0, .05);
  box-shadow: inset 0 0 0 1px var(--amber), 0 0 22px -8px rgba(255, 176, 0, .7);
}
.field__input--area { resize: vertical; min-height: 96px; line-height: 1.6; }
.field__input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--silver); }

/* Off-screen rather than display:none — some bots skip what is not rendered. */
.wl__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wl__act {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
  margin-top: calc(var(--step) * 6);
}
.wl__act .mbtn--lg { margin: 0; padding: 16px 26px; }

.wl__status {
  margin: calc(var(--step) * 4) 0 0;
  min-height: 1.4em;
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: clamp(11.5px, .88vw, 13.5px);
  color: var(--ink-3);
}
.wl__status.is-ok { color: var(--green); }
.wl__status.is-bad { color: var(--silver); }
.wl.is-sending .mbtn { opacity: .55; pointer-events: none; }

/* -------------------------------------------------------------- adaptive */

@media (max-width: 1080px) {
  .bays, .bays--three { grid-template-columns: 1fr; }
  .split { height: 1px; width: auto; }
  .split i { display: none; }
  /* The sides module deliberately does NOT promote its middle bay. In the core
     section the middle is the subject; here the order seller → XEKTA → buyer
     is the explanation itself, and reading it out of sequence destroys it. */
}

@media (max-width: 860px) {
  :root { --rail-h: 54px; --ch: 11px; }
  .rail__nav { display: none; }
  /* The rail turns ninety degrees rather than being withdrawn. Hidden, the five
     stations read as scattered dots and the one thing the module exists to say
     — that this is a single path from one agent to the other — is lost. */
  .protorail__stations { grid-template-columns: 1fr; gap: 0; }
  .protorail__line {
    left: 5px; right: auto;
    top: 6px; bottom: 26px;
    width: 1px; height: auto;
  }
  .protorail__line i {
    width: 1px;
    height: var(--fill, 0);
    background: linear-gradient(180deg, transparent, var(--green));
  }
  .stn {
    display: grid;
    grid-template-columns: 11px 1fr;
    column-gap: 16px;
    row-gap: 2px;
    align-items: center;
    text-align: left;
    padding-bottom: calc(var(--step) * 6);
  }
  .stn:last-child { padding-bottom: 0; }
  .stn__led { grid-row: 1; }
  .stn__name { grid-column: 2; }
  .stn--core { grid-column: auto; }
  /* Once the stops wrap onto more than one row the single horizontal track is a
     lie, so it is withdrawn and each stop carries its own rule again. */
  .loop__stations { grid-template-columns: repeat(2, 1fr); gap: calc(var(--step) * 7); padding-top: 0; }
  .loop__stations::before, .loop__stations::after { display: none; }
  .lstn { padding-top: 22px; border-top: 1px solid #202020; }
  .lstn__led { top: -6px; }
  .policy { grid-template-columns: 1fr; }
  .ref { grid-template-columns: 20px 1fr auto; column-gap: 14px; }
  .ref__cells i { width: 5px; height: 10px; }
  .board { --ch: 14px; padding: clamp(18px, 4vw, 30px) clamp(13px, 3vw, 22px); }
  .board__screws { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.board__screws i { width: 7px; height: 7px; }
  .rail--bottom .rail__inner { gap: calc(var(--step) * 3); }
}

@media (max-width: 560px) {
  /* A phone has one commanding object per screen, and here it is the board.
     Give it the gutter back and take the air out from around it: at the desktop
     values it shrank to a small panel adrift in an empty first screen. */
  :root { --gut: 14px; }
  /* The hero stops being forced to fill the viewport. Centred inside a full
     screen its content floated with a third of the phone empty above it; hugging
     its own height also lets the next beat's headline show, which is the only
     honest way to say there is more below. */
  .sec--hero { min-height: 0; }
  .sec--hero .wrap { gap: clamp(22px, 3.4vh, 38px); padding-block: clamp(24px, 3.5vh, 44px); }
  .protorail__stations { gap: 0; }
  .stn { padding-bottom: calc(var(--step) * 5); }

  .module__bar { flex-direction: column; align-items: flex-start; gap: 5px; }
  .wl__grid { grid-template-columns: 1fr; }
  .wl__act .mbtn--lg { width: 100%; justify-content: center; }
  .loop__stations { grid-template-columns: 1fr; }
  .dml { filter: none; }
}

/* Motion is the world's own behaviour; without it the board simply sits lit. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; }
  .ticker__run { transform: none !important; }
  .pwr { animation: none; }
  .dm__head { display: none; }
  /* litAll() never runs the power-on, so the value that sequence would have
     left behind is set here as the resting state. The board is simply
     already on. */
  .board { --bloom: .45; }
}