/* HESPAIR — the ridge at dawn, read as a book of markets.
   Two kinds of page share one sheet.

   The LANDING is the reference he sent: a top bar, a hero in the left half over the stage,
   one cream parchment band — the only light surface anywhere on the site — and a dark strip
   under it. Its grid is twelve tracks, declared once on `main.landing`, and the hero, the
   three steps and the four props are all laid on those same twelve.

   The PRODUCT pages are a HUD laid over the scene, so nothing there paints a background:
   the veil is the only scrim, and the interface is rules and columns, never boxes. One grid
   is declared in `main` and every row — the masthead, the section heads, the column heads,
   the markets, the HESPAIR figures — is laid on those same four tracks. */
:root {
  --teal-900: #032d3d;
  --teal-800: #06303f;
  --teal-700: #0b3a4a;
  --teal-500: #14495b;
  --teal-300: #3c6770;
  --rock: #101e22;
  --ivory: #f2eadf;
  --gold: #e8b37a;
  --gold-hot: #ffc98a;

  --mist: rgba(242, 234, 223, 0.76);
  --faint: rgba(242, 234, 223, 0.50);
  --ghost: rgba(242, 234, 223, 0.30);
  --soft: rgba(242, 234, 223, 0.55);
  /* every label, column head and caption. 🔴 At 11 px the old --ghost measured 2.4:1 over
     the lit side of the ridge; a caption nobody can read is not restraint. */
  --label: rgba(242, 234, 223, 0.70);
  /* the rules are warm. A cool hairline on a warm picture is what made the console read as
     a different site from the landing. */
  --line: rgba(234, 206, 170, 0.14);
  --line-mid: rgba(233, 191, 140, 0.30);
  --line-hi: rgba(232, 179, 122, 0.46);
  --wash: rgba(233, 221, 201, 0.06);
  /* the scrim is local to the data: it is laid on the rows and cells themselves, never
     over the frame, so the sky and the lit side of the ridge keep their light */
  --scrim: rgba(9, 34, 40, 0.54);

  /* the cream band, and the two inks that live on it. 🔴 Gold does not survive on cream —
     #e8b37a over #e9ddc9 is 1.6:1 — so nothing on the parchment is ever gold. The only
     gold on a light surface is inside a dark tile. */
  --parch: #e9ddc9;
  --parch-2: #dccdb3;
  --ink: #0a2b35;
  --ink-2: rgba(10, 43, 53, 0.72);
  --ink-rule: rgba(10, 43, 53, 0.20);
  --tile: #0d3341;
  --strip: #072833;

  --bar: 64px;
  --gut: 32px;
  --gap: 24px;

  /* 🔴 THE MEASURE. Without a ceiling `main` is 1920 px wide on a 1920 px screen and a
     market row spans 1856 px with 878 px of nothing between its name and its first figure.
     The content is capped and centred; it is the MARGINS that grow with the display. The
     stage stays full-bleed behind all of it. */
  --measure: 1200px;
  --pad: max(var(--gut), calc((100% - var(--measure)) / 2));
  /* one numeric column. Fixed, so the three of them stay a cluster at any width instead of
     drifting one per quarter of the screen. */
  --num: 190px;

  /* the vertical rhythm — one scale, used everywhere, instead of a gap chosen per section */
  --s1: 8px;
  --s2: 14px;
  --s3: 22px;
  --s4: 34px;
  --s5: 54px;
  --s6: 86px;

  /* the ladder — 11 / 13 / 15 / 18 / 24 / 32 / 48 / 72, and nothing in between */
  --t-caps: 11px;
  --t-meta: 13px;
  --t-body: 15px;
  --t-fig: 18px;
  --t-num: 24px;
  --t-title: clamp(24px, 2.3vw, 32px);
  --t-head: clamp(32px, 3.6vw, 48px);
  --t-hero: clamp(48px, 5.4vw, 72px);
  /* the landing's lockup. The page hangs off it, so it is allowed its own step. */
  --t-lead: clamp(36px, 4.4vw, 64px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; background: var(--teal-900); overflow-x: hidden; }
body {
  font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-body); line-height: 1.55; color: var(--ivory);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1;
  /* a short page still puts its foot on the floor, instead of leaving it halfway up the
     frame with the lit side of the ridge behind it */
  display: flex; flex-direction: column; min-height: 100vh;
}
main, .docs { flex: 1 0 auto; }
.foot { flex: 0 0 auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }
.num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}
.serif { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; }
em.u { font-style: normal; }

/* ---------- the stage ---------- */
#stage { position: fixed; inset: 0; z-index: 0; }
#stage canvas { width: 100%; height: 100%; display: block; }
/* 🔴 The veil is NOT the scrim. A wash over the whole frame buys contrast by killing the
   picture: the sun goes, the sky flattens and the ivory tree turns grey-green. All it does
   here is carry the fixed top bar and take the hard edge off the left margin, where the
   long labels run. What makes the figures readable is the scrim on the rows themselves. */
.veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(3, 29, 40, 0.80) 0, rgba(3, 29, 40, 0.22) 72px, rgba(3, 29, 40, 0) 140px),
    linear-gradient(100deg, rgba(3, 29, 40, 0.22) 0%, rgba(3, 29, 40, 0.07) 32%, rgba(3, 29, 40, 0) 54%);
}

/* ---------- the top bar, on every page ----------
   Mark and wordmark hard left, the sections centred as plain words, the wallet hard right,
   and one hairline under the whole width. */
.bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--bar); z-index: 6;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: var(--pad);
  background: linear-gradient(to bottom, rgba(7, 34, 40, 0.94), rgba(7, 34, 40, 0.70));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.bar .brand { display: flex; align-items: center; gap: 10px; justify-self: start; }
.bar .mk { width: 26px; height: 26px; display: block; }
.bar .wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: var(--t-num); letter-spacing: 0.03em; line-height: 1; color: var(--parch);
}
.sections { display: flex; align-items: center; gap: 30px; }
.sections a { font-size: var(--t-meta); color: var(--mist); transition: color 0.18s; white-space: nowrap; }
.sections a:hover { color: var(--ivory); }
.sections a.on { color: var(--gold-hot); }
.sections a i { font-style: normal; font-size: 10px; opacity: 0.75; }
.bar-end { justify-self: end; display: flex; align-items: center; gap: 12px; }
.chip {
  font-size: var(--t-caps); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
  white-space: nowrap;
}
.chip b { color: var(--ivory); font-weight: 500; letter-spacing: 0.04em; }
.chip.demo { color: var(--gold-hot); letter-spacing: 0.26em; }
.pill {
  border: 1px solid var(--line-mid); border-radius: 999px; background: none; color: var(--ivory);
  padding: 8px 18px; cursor: pointer; font-size: var(--t-meta); line-height: 1.2;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.pill:hover { background: rgba(232, 179, 122, 0.14); border-color: var(--gold); color: var(--gold-hot); }

/* ---------- buttons ---------- */
/* 🔴 An outlined button is still ink on the stage. Left transparent, "Vote to hold" sat on
   the sun at 1280 and measured 3.3:1 — it takes the same scrim every row of data takes. */
.btn {
  border: 1px solid var(--line-mid); background: rgba(7, 34, 40, 0.52);
  color: var(--ivory); padding: 8px 15px; cursor: pointer;
  font-size: var(--t-caps); letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.btn:hover:not([disabled]) { background: rgba(232, 179, 122, 0.14); border-color: var(--gold); color: var(--gold-hot); }
/* 🔴 A cream fill at 35 % opacity over the dark scene is dark ink on a grey smear — 2.3:1,
   and it reads as a rendering fault rather than as a control that is not ready yet. A
   filled button that cannot be pressed gives the fill up and keeps its words. */
.btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.btn.fill[disabled] {
  opacity: 1; background: rgba(4, 31, 41, 0.58); border-color: rgba(233, 221, 201, 0.22);
  color: var(--label); font-weight: 400;
  text-shadow: 0 0 2px rgba(3, 29, 40, 0.98), 0 0 6px rgba(3, 29, 40, 0.92);
}
/* the one filled surface the product pages share with the landing's first call to action */
/* 🔴 A filled button inherits the page's dark halo, and a dark halo under dark ink ON CREAM
   is mud. The one light surface the console carries drops the shadow. */
.btn.fill { background: var(--parch); border-color: var(--parch); color: var(--ink);
  font-weight: 500; text-shadow: none; }
.btn.fill:hover:not([disabled]) { background: #f4ead9; border-color: #f4ead9; color: var(--ink); }
.btn.wide { display: block; width: 100%; padding: 13px; margin-top: var(--s3); text-align: center; }
.btn.block { display: block; width: 100%; padding: 9px; text-align: center; }

/* ═══════════════════════════ the landing ═══════════════════════════ */
main.landing {
  position: relative; z-index: 3; padding: var(--bar) 0 0;
  /* twelve tracks, declared once. The hero takes seven, a step four, a prop three. */
  --cols: repeat(12, minmax(0, 1fr));
  --gap: 28px;
  text-shadow: 0 1px 16px rgba(3, 29, 40, 0.80), 0 0 4px rgba(3, 29, 40, 0.60);
}
/* 🔴 `span n` alone AUTO-PLACES: the headline would land in tracks 7-12, beside the eyebrow
   it is meant to sit under. The hero's blocks name the track they start on; only the steps
   and the props, which really do run across, are left to flow. */
.l-3 { grid-column: span 3; }
.l-4 { grid-column: span 4; }
.l-5 { grid-column: 1 / span 5; }
.l-6 { grid-column: 1 / span 6; }
.l-7 { grid-column: 1 / span 7; }
.l-12 { grid-column: 1 / -1; }

/* the hero keeps to the left half, so the stage has the right half to itself */
.hero { padding-inline: var(--pad); }
.hero-in { min-height: clamp(400px, 58vh, 660px); align-content: center; padding: var(--s4) 0 var(--s5); }
.eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 var(--s3);
  font-size: var(--t-caps); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.eyebrow .rule { flex: 0 0 44px; height: 1px; background: var(--line-hi); }
.hero h1 {
  margin: 0 0 var(--s3); font-size: var(--t-lead); line-height: 1.02; font-weight: 300;
  letter-spacing: -0.004em; color: var(--ivory);
}
.hero h1 em { font-style: normal; color: var(--soft); }
.hero .lede { margin: 0 0 var(--s5); font-size: var(--t-body); line-height: 1.62; color: var(--mist); }
.ctas { display: flex; align-items: center; gap: 14px; margin: 0; flex-wrap: wrap; }
/* the two calls to action are one width, so the pair ends on ONE edge and not on two
   content widths seven pixels apart */
.ctas .btn {
  padding: 13px 22px; min-width: 176px; text-align: center;
  font-size: var(--t-meta); letter-spacing: 0.012em; text-transform: none; line-height: 1.2;
}
.ctas .btn span { margin-left: 6px; }
.ctas .btn.ghost { border-color: var(--line-mid); }

/* ---------- the cream band: the only light surface on the site ---------- */
.band {
  background: var(--parch); color: var(--ink); text-shadow: none;
  padding: var(--s6) var(--pad);
  border-top: 1px solid rgba(3, 29, 40, 0.34);
}
.band .eyebrow { justify-content: center; gap: 18px; margin: 0 0 16px; color: var(--ink-2); }
.band .eyebrow .rule { flex: 0 0 62px; background: var(--ink-rule); }
.band h2 {
  margin: 0 0 42px; text-align: center; font-size: var(--t-title); line-height: 1.1;
  font-weight: 400; letter-spacing: 0.005em; color: var(--ink);
}
.step { position: relative; display: flex; align-items: flex-start; gap: 18px; }
/* 🔴 58, not 66. At 66 the third tile's right edge lands eight pixels from the third
   value prop's — two edges that mean different things, close enough to read as a wobble. */
.step .tile {
  flex: 0 0 58px; width: 58px; height: 58px; border-radius: 14px; background: var(--tile);
  display: grid; place-items: center; color: var(--gold);
}
.step .tile svg { width: 24px; height: 24px; display: block; }
.step .said { min-width: 0; }
.step .no { display: block; font-size: var(--t-caps); letter-spacing: 0.18em; color: var(--ink-2); font-weight: 500; }
.step h3 { margin: 2px 0 5px; font-size: var(--t-num); line-height: 1.05; font-weight: 400; color: var(--ink); }
.step p { margin: 0; font-size: var(--t-meta); line-height: 1.52; color: var(--ink-2); }
/* the hairline that joins one tile to the next lives in the column gutter, so it never
   moves a word and never opens a left edge of its own */
.step + .step::before {
  content: ''; position: absolute; right: 100%; top: 33px; width: var(--gap); height: 1px;
  background: var(--ink-rule);
}

/* ---------- the bottom strip, back on the dark ground ---------- */
.strip {
  background: var(--strip); border-top: 1px solid var(--line);
  padding: var(--s5) var(--pad); text-shadow: none;
}
.strip-in { row-gap: 26px; }
.prop { position: relative; }
.prop + .prop::before {
  content: ''; position: absolute; right: calc(100% + var(--gap) / 2); top: 1px; bottom: 1px;
  width: 1px; background: var(--line);
}
/* 🔴 NOT a flex row. A flex item is blockified, so each title would become a box of its
   own width — four edges that mean nothing and read as four near-misses. The icon is set
   in the line instead, and the title stays inline. */
.prop .ph { display: block; margin-bottom: 8px; color: var(--gold); line-height: 1.3; }
.prop .ph svg { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; margin-right: 9px; }
.prop .ph b {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: var(--t-fig); letter-spacing: 0.015em; color: var(--ivory);
}
.prop p { margin: 0; font-size: var(--t-meta); line-height: 1.5; color: var(--mist); }

/* ═══════════════════════════ the product pages ═══════════════════════════ */
/* ---------- the one grid ----------
   Four tracks: the name, and three numeric columns that end on the frame's right gutter.
   Every row on a product page is laid on these, and nothing else declares columns. */
main {
  position: relative; z-index: 3;
  padding: var(--bar) var(--pad) var(--s6);
  /* the name takes what is left; the three numeric columns are FIXED, so they stay a block
     the eye reads in one go however wide the display is */
  --cols: minmax(0, 1fr) repeat(3, var(--num));
  /* The scrim is not a panel: it is carried by the type itself, so a number crossing a lit
     branch stays readable without a filled box being dropped over the stage. The halo is
     three steps — wide and soft, then tight and dense — because the widest one alone adds
     almost nothing right against a glyph, which is where the sun crosses it. */
  text-shadow: 0 1px 16px rgba(3, 29, 40, 0.80), 0 0 5px rgba(3, 29, 40, 0.86),
               0 0 2px rgba(3, 29, 40, 0.92);
}
.grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); }
.r { text-align: right; }
/* placements are written against the END of the row, so the same rule holds when a phone
   drops a column: -2 is always the last track. */
.c-two { grid-column: 2; }
.c-three { grid-column: 3; }
.c-last { grid-column: -2; }
.span-main { grid-column: 1 / -2; }
.span-two { grid-column: 1 / 3; }

/* ---------- the masthead ---------- */
.masthead {
  align-items: end; padding: var(--s5) 0 var(--s3); border-bottom: 1px solid var(--line-hi);
}
.masthead.bare { align-items: start; }
.masthead .lab { display: block; }
/* 🔴 The unit is named once, by the hero's own label. Repeated in every caption it is four
   more words in a 190 px column, and a caption that wraps mid-phrase reads as a fault. */
.masthead .u { display: none; }
.masthead .big {
  display: block; margin-top: 4px; font-size: var(--t-hero); line-height: 0.96;
  letter-spacing: -0.035em; color: var(--parch);
  text-shadow: 0 0 60px rgba(3, 29, 40, 0.8);
}
.masthead .val { display: block; margin-top: 6px; font-size: var(--t-num); line-height: 1.1; }
.masthead .name {
  display: block; margin-top: 4px; font-size: var(--t-head); line-height: 1.02;
  font-weight: 300; letter-spacing: 0.01em; color: var(--parch);
}
.masthead .sub { display: block; margin-top: 10px; font-size: var(--t-meta); color: var(--faint); }
.lab {
  font-size: var(--t-caps); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--label); font-weight: 500;
  /* a caption stands on bare scene with no row under it, and the trailing ones now sit out
     where the tree and the sun are, so they carry the dense halo the figures carry */
  text-shadow: 0 0 2px rgba(3, 29, 40, 0.98), 0 0 6px rgba(3, 29, 40, 0.92),
               0 1px 18px rgba(3, 29, 40, 0.88);
}

/* ---------- a section head ---------- */
.secthead { align-items: baseline; margin-top: var(--s5); padding-bottom: var(--s2); }
/* the serif is where the warmth shows without touching a single figure */
.secthead h2 {
  margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300;
  font-size: var(--t-title); line-height: 1; letter-spacing: 0.02em; color: var(--parch);
}
/* 🔴 A caption pinned to the far right while its title sits on the far left is the same
   spreading the rows were guilty of — and out there it lands on the tree, where light ink
   on a blossom measured 1.6:1 and a scrim behind it reads as a grey brick. It belongs
   UNDER the title: one lockup, on the dark side, no box needed. */
.secthead h2 { grid-column: 1; }
.secthead .lab, .secthead .state {
  display: block; grid-column: 1; margin-top: 5px; text-align: left; background: none;
}
.secthead .btn { grid-column: -2; grid-row: 1 / -1; align-self: center; }

/* ---------- the book ---------- */
/* a cream wash and a gold rule: the console is the same site as the landing, so the warm
   surfaces run through it instead of being quarantined on the front page */
.head {
  background: rgba(233, 221, 201, 0.08); padding: var(--s1) 0;
  border-top: 1px solid var(--line-hi); border-bottom: 1px solid var(--line);
  font-size: var(--t-caps); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--label); font-weight: 500;
}
.row {
  background: var(--scrim); align-items: center; padding: 9px 0; border: 0; border-bottom: 1px solid var(--line);
  width: 100%; font: inherit; color: inherit; text-align: left;
  /* 🔴 `background: none` here used to cancel the scrim declared two lines up, and the head
     above the rows kept hers — so the table's own lines were the only thing on the page
     reading straight off the lit ridge. The rows take a lighter wash than the head: enough
     to carry 11 px of caption over the sun, not enough to become a panel. */
  background: rgba(4, 31, 41, 0.34);
  cursor: pointer; transition: background 0.14s;
}
.row:hover { background: rgba(14, 54, 68, 0.60); }
.row .who { min-width: 0; }
.row .sym { display: block; font-size: var(--t-body); font-weight: 500; letter-spacing: 0.05em; line-height: 1.3; }
.row .sym .flower { width: 11px; height: 11px; margin-left: 7px; vertical-align: 1px; opacity: 0.16; }
.row .sym .flower.on { opacity: 1; filter: drop-shadow(0 0 5px rgba(255, 201, 138, 0.6)); }
.row .meta {
  display: block; font-size: var(--t-meta); color: var(--label); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The far column is where the sun crosses the frame, and ivory on a sun core is ivory on
   ivory. The figures carry a denser halo than the rest of the page rather than a filled
   box, which is the one thing this interface does not do. */
.row .val, .row .st { text-shadow: 0 0 1px rgba(3, 29, 40, 1), 0 0 3px rgba(3, 29, 40, 1),
               0 0 7px rgba(3, 29, 40, 0.96), 0 1px 18px rgba(3, 29, 40, 0.88); }
.row .val { font-size: var(--t-body); line-height: 1.3; }
.row .val.dim { color: var(--mist); }
/* The state chip sits in that same far column, so it carries the halo too — without it the
   word lands on the sun core at 3.69:1 and only the ink-vs-no-ink measure catches it. */
.row .st { font-size: var(--t-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--label); }
.row .st.live { color: var(--gold-hot); }
.empty {
  background: var(--scrim); padding: 20px 0; border-bottom: 1px solid var(--line);
  color: var(--faint); font-size: var(--t-meta); letter-spacing: 0.04em;
}

/* ---------- a label / value list on the same tracks ---------- */
.list { border-top: 1px solid var(--line-mid); }
/* 🔴 The label holds three tracks so a long one can run, but it must not TINT three
   tracks: the sweep between the words and the figure is where the stage shows through. */
/* 🔴 The value sits in the FIRST numeric column, beside its label — not out on the far
   edge of the frame with half a screen of nothing between them. */
.list .k {
  background: var(--scrim);
  grid-column: 1; padding: 9px 0; font-size: var(--t-meta); color: var(--mist);
  border-bottom: 1px solid var(--line); position: relative;
}
/* the scrim and the rule both carry on across the gutter, so a row is one line and not
   two cells with a slit of sky between them */
.list .k::after {
  content: ''; position: absolute; left: 100%; top: 0; bottom: -1px;
  width: var(--gap); background: var(--scrim); box-shadow: inset 0 -1px 0 var(--line);
}
/* HESPAIR and a market's commitments carry a bigger figure, nothing else differs */
.list.half .v { font-size: var(--t-fig); }
.list .v {
  background: var(--scrim);
  grid-column: 2; padding: 9px 0; font-size: var(--t-body); text-align: right; color: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.list .k .sub { display: block; font-size: var(--t-caps); color: var(--ghost); letter-spacing: 0.02em; }
.list .hi { color: var(--gold-hot); }

/* ---------- three balances ---------- */
/* The colour of a balance is a rule over it, not a bar beside it: an indent of its own is
   one more left edge, and the three balances are columns of the same grid as everything. */
.bals { margin-top: var(--s4); padding: 0 0 var(--s3); border-bottom: 1px solid var(--line); }
.bals .bal { border-top: 2px solid var(--line); padding-top: 14px; }
.bals .waiting { border-top-color: var(--teal-300); }
.bals .working { border-top-color: var(--gold); }
.bals .settled { border-top-color: var(--gold-hot); }
.bals .lab { display: block; }
/* the three balances are a cluster on the numeric columns; the first track carries what
   they are, so the block is a section and not three figures floating off to one side */
.balhead { align-self: end; }
.balhead h2 {
  margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300;
  font-size: var(--t-title); line-height: 1; letter-spacing: 0.02em; color: var(--parch);
}
.balhead .lab { display: block; margin-top: 6px; text-transform: none; letter-spacing: 0.01em;
  font-size: var(--t-meta); font-weight: 400; }
/* 🔴 `display: block` above BEATS the hidden attribute, so the note would still take its
   line — 6 px of margin and a line box of nothing — on every market that is not paused.
   The modifier is prefixed because `.paused` on its own is the kind of generic class that
   collides with a state somewhere else and collapses a layout in silence. */
.balhead .bal-pause[hidden] { display: none; }
.balhead .bal-pause { color: var(--gold-hot); }
.bals .val { display: block; margin-top: 6px; font-size: var(--t-num); line-height: 1.1; }

/* ---------- the vote ---------- */
.bars { padding: 14px 0 6px; }
.bar-t { height: 2px; background: rgba(242, 234, 223, 0.12); margin: 6px 0 14px; position: relative; }
.bar-t u { position: absolute; left: 0; top: 0; bottom: 0; text-decoration: none; display: block; }
.bar-t u.for { background: var(--gold-hot); }
.bar-t u.against { background: var(--teal-300); }
.bar-t em { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--ghost); }
/* 🔴 A flex item is blockified and sized to its own content, so "16.31 %" and "4.02 %"
   opened two left edges eight pixels apart — a near-miss that is nothing but two numbers of
   different length. One width, and the pair ends on the row's edge like every other figure. */
.barlab { display: flex; justify-content: space-between; font-size: var(--t-meta); color: var(--label); }
.barlab b { color: var(--ivory); font-weight: 400; min-width: 120px; text-align: right; }
.acts { display: flex; flex-direction: column; gap: 8px; align-self: end; }
.acts .btn { margin-top: 0; padding: 11px; }
.state { font-size: var(--t-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.state.voting { color: var(--gold-hot); }

/* ---------- forms ---------- */
.form { padding: 4px 0 0; }
.field {
  /* 🔴 No inset. A 10 px pad opens a left edge ten pixels off the column's — which is not
     a second column, it is a near-miss, and that is exactly what reads as sloppiness. */
  display: flex; align-items: center; gap: 8px; margin: 6px 0 16px; padding: 0;
  border: 0; border-bottom: 1px solid var(--line-mid); background: var(--scrim);
}
.field:focus-within { border-bottom-color: var(--gold); }
.field input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 9px 0;
  font-size: var(--t-fig);
}
.field input::placeholder { color: var(--ghost); }
.lbl {
  display: block; font-size: var(--t-caps); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--label); font-weight: 500; margin-top: var(--s3);
  /* a form label stands on bare scene, with no row and no scrim under it */
  text-shadow: 0 0 2px rgba(3, 29, 40, 0.98), 0 0 6px rgba(3, 29, 40, 0.92),
               0 1px 18px rgba(3, 29, 40, 0.88);
}
.seghead .lab { white-space: nowrap; }
/* the instrument rows indent far enough from the column to be an indent and not a wobble,
   and their two figures sit on the page's own numeric columns */
.seghead { display: grid; grid-template-columns: minmax(0, 1fr) var(--num) var(--num); column-gap: var(--gap); padding-left: 20px; }
.seg { display: flex; flex-direction: column; margin-top: 8px; border-top: 1px solid var(--line); }
.seg.cols button { display: grid; grid-template-columns: minmax(0, 1fr) var(--num) var(--num); column-gap: var(--gap); align-items: baseline; }
.seg.cols button i { font-style: normal; }
.seg.cols button b { font-weight: 400; text-align: right; font-size: var(--t-meta); }
.seg button {
  background: var(--scrim); border: 0; border-bottom: 1px solid var(--line); cursor: pointer;
  padding: 11px 0 11px 20px; text-align: left; color: var(--label);
  font-size: var(--t-body); transition: color 0.16s, box-shadow 0.16s;
  box-shadow: inset 2px 0 0 transparent;
}
.seg button:hover:not([disabled]) { color: var(--mist); }
.seg button.on { color: var(--ivory); box-shadow: inset 2px 0 0 var(--gold); }
.seg button small { display: block; font-size: var(--t-meta); color: var(--label); margin-top: 2px; }
.seg button.on small { color: var(--mist); }
.note { margin: var(--s2) 0 0; font-size: var(--t-meta); color: var(--label); }

/* ---------- foot ---------- */
.foot {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: var(--s3) var(--pad) var(--s4);
  font-size: var(--t-caps); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(242, 234, 223, 0.62);
  /* 🔴 Solid, not a fade. The foot sits exactly where the sun core is and a gradient that
     still lets 20 % of a blown highlight through measured 2.6:1. It is chrome, it mirrors
     the bar at the top, and it is what ends the page. */
  background: var(--strip); border-top: 1px solid var(--line);
}
.foot .sp { flex: 1; }
.foot b { color: var(--faint); font-weight: 500; letter-spacing: 0.04em; }
.foot a:hover { color: var(--ivory); }
/* under the landing's strip the footer is part of the same dark block, with no rule
   between them */
.foot.on-dark { border-top: 0; padding-top: 4px; padding-bottom: var(--s4); }

/* ---------- narrow ---------- */
@media (max-width: 900px) {
  :root { --gut: 18px; --gap: 14px; --bar: 96px; --s5: 38px; --s6: 54px; }
  /* the bar takes two rows: the brand and the wallet on the first, the sections centred
     on the second. Four words will not fit beside a wordmark and a pill at 390. */
  .bar {
    grid-template-columns: 1fr auto; grid-template-rows: 56px minmax(0, 1fr);
    padding: 0 var(--gut);
  }
  .bar .brand { grid-row: 1; grid-column: 1; }
  .bar-end { grid-row: 1; grid-column: 2; }
  .bar .wordmark { font-size: var(--t-fig); }
  .pill { padding: 7px 14px; font-size: var(--t-caps); letter-spacing: 0.06em; }
  .sections {
    grid-row: 2; grid-column: 1 / -1; justify-content: center; gap: 15px; height: 100%;
    border-top: 1px solid var(--line);
  }
  .sections a { font-size: var(--t-caps); }

  /* On a phone the four tracks become one column of writing and one of figures; the
     masthead and the figure rows stack two across under it, and nothing is right-aligned
     against a track that is no longer there. */
  /* 🔴 NOT auto tracks: an auto track is sized by ITS OWN grid's content, so the column
     heads would size one way and the rows another, and the two would not line up. A
     percentage of the same frame gives every row on the page the same two columns. */
  main { --cols: minmax(0, 1fr) 20% 29%; }
  .drop { display: none; }
  /* the phone keeps the sun's glow at the BOTTOM of the frame, which is where the foot is,
     so its gradient is nearly solid rather than a hint */
  .foot { gap: 14px;
    background: linear-gradient(to top, rgba(3, 29, 40, 0.96), rgba(3, 29, 40, 0.86) 65%, rgba(3, 29, 40, 0.52)); }

  .masthead { grid-template-columns: 1fr 1fr; row-gap: 18px; padding: 3vh 0 18px; }
  .masthead > :first-child { grid-column: 1 / -1; }
  .masthead .r { text-align: left; }
  .masthead .val { font-size: var(--t-fig); }

  /* the phone's glow comes up into the bottom of the frame, where a section head can
     be sitting, so the heads take a scrim too */
  .secthead { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; margin-top: 32px;
    background: var(--scrim); padding: 8px 0; }
  .secthead h2 { grid-column: 1 / -1; }
  .secthead .lab, .secthead .state { grid-column: 1 / -1; text-align: left; }
  /* 🔴 `grid-row: 1 / -1` is what keeps the action beside a two-line head on a desktop; on
     a phone everything stacks, and left in place it drags the button ABOVE the title. */
  .secthead .btn { grid-column: 1 / -1; grid-row: auto; margin-top: var(--s2); }
  /* a block that held two of the four tracks takes the whole width instead */
  .span-main, .span-two, .acts.c-last { grid-column: 1 / -1; }
  /* a placement into a track the phone has not got would open an implicit one */
  .masthead .c-two, .masthead .c-three { grid-column: auto; }

  .head .u, .seghead .u { display: none; }
  .row .meta { font-size: var(--t-caps); }
  .row .val, .head { font-size: var(--t-meta); }

  .bals { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .bals .bal { grid-column: auto; }
  .bals .bal:first-child { grid-column: 1 / -1; }
  .bals .val { font-size: var(--t-fig); }

  /* a phone has no cluster to make: the label takes what it can and the figure holds the
     last track, as it does on every other row of the page */
  .list .v { font-size: var(--t-meta); }
  .list .k { grid-column: 1 / -2; }
  .list .v { grid-column: -2; }

  .acts { margin-top: 16px; }
  .seghead, .seg.cols button { grid-template-columns: minmax(0, 1fr) 72px 72px; column-gap: 10px; }
  .seghead .lab { font-size: 9px; letter-spacing: 0.08em; }

  /* the landing stacks: one column, the steps and the props one under another */
  main.landing { --cols: minmax(0, 1fr); --gap: 14px; }
  .l-3, .l-4, .l-5, .l-6, .l-7, .l-12 { grid-column: 1 / -1; }
  /* the foot of the hero is not empty space: it is the room the tree stands in, because a
     phone has no column to give it */
  .hero-in { min-height: 0; padding: 26px 0 212px; row-gap: 0; }
  .ctas { gap: 12px; }
  .ctas .btn { flex: 1 1 0; min-width: 0; padding: 13px 10px; }
  .hero h1 { font-size: clamp(32px, 8vw, 44px); }
  .band { padding: 40px var(--gut) 44px; }
  .band h2 { margin-bottom: 30px; }
  .band-in { row-gap: 26px; }
  .step + .step::before { display: none; }
  .step .tile { flex-basis: 54px; width: 54px; height: 54px; border-radius: 12px; }
  .step .tile svg { width: 22px; height: 22px; }
  .strip-in { row-gap: 22px; }
  .prop + .prop::before { display: none; }
  .prop + .prop { border-top: 1px solid var(--line); padding-top: 20px; }

  /* A phone has no column to spare, so the camera tilts past the tree and the page keeps
     the sky and the glow the sun throws over the bottom of the frame. The veil only has
     the top bar to carry; the rows carry their own scrim. */
  .veil {
    background: linear-gradient(to bottom, rgba(3, 29, 40, 0.84) 0, rgba(3, 29, 40, 0.24) 110px, rgba(3, 29, 40, 0) 190px);
  }
}
@media (max-width: 420px) {
  .sections { gap: 11px; }
  .sections a { font-size: 10px; }
}

/* ---------- the landing's own weather ---------- */
/* The hero is type over the open sky, so the left third is pulled down harder than it is
   on a product page, where the rows carry their own scrim. */
body.front .veil {
  background:
    linear-gradient(to bottom, rgba(3, 29, 40, 0.88) 0, rgba(3, 29, 40, 0.24) 96px, rgba(3, 29, 40, 0) 190px),
    linear-gradient(100deg, rgba(3, 29, 40, 0.74) 0%, rgba(3, 29, 40, 0.46) 30%, rgba(3, 29, 40, 0.10) 56%, rgba(3, 29, 40, 0) 72%);
}
@media (max-width: 900px) {
  body.front .veil {
    background:
      linear-gradient(to bottom, rgba(3, 29, 40, 0.90) 0, rgba(3, 29, 40, 0.62) 190px,
                      rgba(3, 29, 40, 0.30) 400px, rgba(3, 29, 40, 0) 520px);
  }
}

/* ---------- docs ---------- */
body.reading { overflow-y: auto; }
/* On a page made for reading the scene is weather, not subject: it moves into the right
   margin and dims, so no line of text is ever set over the lit side of the tree. */
body.reading #stage { left: 42%; opacity: 0.82; }
body.reading .veil {
  background:
    linear-gradient(100deg, rgba(3, 29, 40, 0.96) 0%, rgba(3, 29, 40, 0.90) 44%, rgba(3, 29, 40, 0.24) 66%, rgba(3, 29, 40, 0.06) 86%),
    linear-gradient(to bottom, rgba(3, 29, 40, 0.72) 0%, rgba(3, 29, 40, 0.20) 24%, rgba(3, 29, 40, 0.64) 100%);
}
@media (max-width: 900px) {
  body.reading #stage { left: 0; opacity: 0.30; }
  body.reading .veil { background: linear-gradient(to bottom, rgba(3, 29, 40, 0.90), rgba(3, 29, 40, 0.94)); }
}
.docs {
  position: relative; z-index: 3;
  padding: calc(var(--bar) + var(--s3)) var(--pad) var(--s6);
  display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: var(--s5);
}
.toc {
  position: sticky; top: calc(var(--bar) + 14px); align-self: start;
  display: flex; flex-direction: column; gap: 2px;
}
.toc a { font-size: var(--t-meta); color: var(--label); padding: 3px 0; transition: color 0.18s; }
.toc a:hover { color: var(--mist); }
.toc a.on { color: var(--gold-hot); }
.doc { max-width: 68ch; min-width: 0; }
.doc h1 {
  margin: 0 0 14px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300;
  font-size: var(--t-head); line-height: 1.02; letter-spacing: 0.01em; color: var(--parch);
}
.doc .standfirst { margin: 0 0 10px; font-size: var(--t-fig); color: var(--mist); line-height: 1.5; }
.doc h2 {
  margin: 50px 0 14px; padding-top: 18px; border-top: 1px solid var(--line-mid);
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300;
  font-size: var(--t-title); letter-spacing: 0.02em; scroll-margin-top: 90px; color: var(--parch);
}
.doc h3 {
  margin: 26px 0 6px; font-weight: 500; font-size: var(--t-caps); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
}
.doc p { margin: 0 0 14px; color: var(--mist); }
.doc b { color: var(--ivory); font-weight: 500; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 20px; color: var(--mist); }
.doc li { margin: 5px 0; }
.doc code {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-meta);
  color: var(--ivory); overflow-wrap: anywhere;
}
.doc .formula {
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--gold-hot);
  border-left: 2px solid var(--line-hi); padding: 2px 0 2px 16px; margin: 0 0 18px;
  font-size: var(--t-meta); line-height: 1.7; overflow-x: auto;
}
.doc .tw { overflow-x: auto; margin: 0 0 18px; }
.rows { width: 100%; border-collapse: collapse; }
.rows td {
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--t-meta);
  color: var(--mist); vertical-align: top;
}
.rows td:last-child {
  text-align: right; color: var(--ivory); padding-left: 24px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.rows tr:first-child td { border-top: 1px solid var(--line-mid); }
.rows tr:last-child td { border-bottom: 1px solid var(--line-mid); }
@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; row-gap: 22px; padding-top: calc(var(--bar) + 16px); padding-bottom: 60px; }
  .toc {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 12px;
    border-bottom: 1px solid var(--line); padding: 0 0 12px;
  }
}

/* A figure that could not be read. It wins over every colour a live figure can take —
   a gold dash would read as an answer. 🔴 It is recessive, not invisible: at --ghost it
   measured 1.8:1 over the lit side of the ridge, and a dash nobody can see is a figure
   that has simply gone missing. */
.dash { color: rgba(242, 234, 223, 0.70) !important;
  text-shadow: 0 0 2px rgba(3, 29, 40, 0.98), 0 0 7px rgba(3, 29, 40, 0.94),
               0 1px 18px rgba(3, 29, 40, 0.88) !important; }
/* At 72 px a monospaced em dash is a bar, and a bar reads as a thing being hidden. The
   hero's dash is set in the text face, where it is a line and not a block. */
.masthead .big.dash { font-family: 'Inter Tight', system-ui, sans-serif; letter-spacing: 0; }

/* ---------- waiting for the first read ----------
   A dash means "could not be read", so one shown before the answer arrives would be a lie
   that corrects itself. The official node answers in ~0.65 s; this is for the day it does
   not and the proxy has to fall through to the next endpoint. */
.wait { color: var(--ghost); animation: breathe 1.6s ease-in-out infinite; letter-spacing: 0.2em; }
@keyframes breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) {
  .wait { animation: none; }
  #stage { opacity: 0.9; }
}