/* HONEYDEW ─────────────────────────────────────────────────────────────────────────────────────
   Palette is the brand's own: black ground, melon rind green, flesh orange, machine cream.
   Structure: no top bar and no left rail. The spine of the site is the GAUGE, fixed along the
   bottom, which is where a machine keeps its readouts. Content is one column offset to the right
   so the press stays visible on the left without becoming a navigation rail. */

:root {
  --ink:      #06090A;
  --ink-2:    #0B1110;
  --ink-3:    #121A17;
  --rind:     #8FBF3F;
  --lime:     #C6F24E;
  --flesh:    #F5A63C;
  --flesh-hi: #FFC978;
  --pith:     #DFF29A;
  --paper:    #EDEFE4;
  --mute:     #79887A;
  --line:     rgba(198,242,78,.14);

  --measure: 58ch;
  --gauge-h: 60px;

  --display: "Fraunces", Georgia, serif;
  --body:    "Archivo", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  font-synthesis-weight: none;
  overflow-x: clip;
}

/* The press used to be fixed wallpaper behind the whole site. It is a panel widget now, sized in
   the app layer below, and the veil it needed is gone with it. */

/* ── the page column ─────────────────────────────────────────────────────────────────────────*/
.wrap {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px) calc(var(--gauge-h) + 72px);
}
.col {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: clamp(0px, 4vw, 90px);
}
@media (max-width: 1100px) { .col { margin-right: 0; } }

/* ── masthead: no nav in it, just the mark and the state of the thing ───────────────────────*/
.top::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 108px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6,9,10,.92) 0%, rgba(6,9,10,.62) 55%, rgba(6,9,10,0) 100%);
}
.top {
  flex-wrap: nowrap;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px clamp(20px, 5vw, 56px) 0;
  max-width: 1320px;
  margin: 0 auto;
}
.mark { width: 30px; height: 30px; flex: none; }
.wordmark {
  font-family: var(--display);
  font-variation-settings: "SOFT" 90, "WONK" 1, "opsz" 40;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: .012em;
  color: var(--paper);
  text-decoration: none;
}
.state {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}
.state b { color: var(--flesh); font-weight: 500; }

/* ── type ────────────────────────────────────────────────────────────────────────────────────*/
h1 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-weight: 800;
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: .96;
  letter-spacing: -.02em;
  margin: 0 0 22px;
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--flesh); }

h2 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  font-weight: 700;
  font-size: clamp(26px, 3.1vw, 36px);
  line-height: 1.06;
  letter-spacing: -.014em;
  margin: 0 0 14px;
}
h3 {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 26px 0 8px;
  color: var(--pith);
}
p { margin: 0 0 17px; color: #CFD8C9; }
p.lead { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.5; color: var(--paper); }
strong { color: var(--paper); font-weight: 600; }
a { color: var(--lime); text-underline-offset: 3px; }

/* ── station rule: how sections are separated. No cards, no borders, no boxes. ──────────────*/
.station {
  padding-top: 62px;
  margin-top: 62px;
  border-top: 1px solid var(--line);
  position: relative;
}
.station > .tag {
  position: absolute;
  top: -8px;
  left: 0;
  background: var(--ink);
  padding-right: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rind);
}
.hero { padding-top: clamp(52px, 11vh, 104px); }

/* ── the fill: the signature. One continuous line down the column that fills like juice. ────*/
.fillrail {
  position: fixed;
  left: max(10px, calc(50vw - 660px + 14px));
  top: 96px;
  bottom: calc(var(--gauge-h) + 26px);
  width: 2px;
  z-index: 2;
  background: rgba(198,242,78,.11);
  pointer-events: none;
}
.fillrail i {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background: linear-gradient(180deg, var(--flesh-hi), var(--flesh));
  box-shadow: 0 0 16px rgba(245,166,60,.5);
}
.fillrail i::after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--flesh-hi);
  box-shadow: 0 0 12px rgba(255,201,120,.9);
}
@media (max-width: 1100px) { .fillrail { display: none; } }

/* ── the gauge: the whole navigation, along the bottom, where a machine keeps its readouts ──*/
.gauge {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  height: var(--gauge-h);
  display: flex;
  align-items: stretch;
  background: rgba(6,9,10,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.gauge .level {
  position: absolute;
  left: 0; top: -1px;
  height: 1px;
  background: var(--flesh);
  box-shadow: 0 0 10px rgba(245,166,60,.85);
  width: 0;
}
.gauge nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(12px, 5vw, 56px);
}
.gauge nav::-webkit-scrollbar { display: none; }
.gauge::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 46px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6,9,10,0), rgba(6,9,10,.95));
}
@media (min-width: 780px) { .gauge::after { display: none; } }
.gauge a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  text-decoration: none;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  border-right: 1px solid rgba(198,242,78,.08);
  transition: color .18s ease, background .18s ease;
}
.gauge a:first-child { padding-left: 0; }
.gauge a::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(198,242,78,.2);
  flex: none;
  transition: background .18s ease, box-shadow .18s ease;
}
.gauge a:hover { color: var(--pith); }
.gauge a[aria-current="page"] { color: var(--paper); }
.gauge a[aria-current="page"]::before {
  background: var(--flesh);
  box-shadow: 0 0 10px rgba(245,166,60,.9);
}
.gauge a:focus-visible { outline: 2px solid var(--lime); outline-offset: -4px; }

/* ── data rows: figures on a line with a bar, never boxes ───────────────────────────────────*/
.rows { margin: 6px 0 4px; }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(198,242,78,.08);
}
.row .k { font-size: 14.5px; color: #C3CDBD; }
.row .k small { display: block; color: var(--mute); font-size: 12px; letter-spacing: .02em; }
.row .v {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.row .v.dim { color: var(--mute); }
.row .v.hot { color: var(--flesh); }

.bar { position: relative; height: 3px; background: rgba(198,242,78,.1); margin-top: 7px; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--rind); }
.bar i.hot { background: var(--flesh); }

/* ── the big counted fact ───────────────────────────────────────────────────────────────────*/
/* The counted fact. The number is the headline and the line under it is the caption, so they
   stack: side by side the caption collapses into a tall narrow column that fights the digits. */
.fact { margin: 34px 0 22px; }
.fact .n {
  display: block;
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-weight: 900;
  font-size: clamp(72px, 12vw, 140px);
  line-height: .8;
  color: var(--flesh);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.fact .of {
  display: block;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(245,166,60,.28);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.72;
  letter-spacing: .04em;
  text-transform: none;
  color: #A9B7A4;
  max-width: 46ch;
}
.fact .of b { color: var(--flesh-hi); font-weight: 500; }

/* ── the orchard matrix: 274 markets, one cell each ────────────────────────────────────────*/
.matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(13px, 1fr)); gap: 4px; margin: 20px 0 10px; }
.cell { aspect-ratio: 1; border-radius: 3px; background: #16211A; position: relative; cursor: default; }
.cell.ripe { background: var(--flesh); }
.cell.thin { background: #3E5B2C; }
.cell:hover { outline: 1px solid var(--lime); outline-offset: 1px; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--mute); text-transform: uppercase; margin-top: 12px; }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend b { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
#readout {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--pith);
  min-height: 1.6em;
  margin-top: 14px;
  letter-spacing: .02em;
}

/* ── console ────────────────────────────────────────────────────────────────────────────────*/
.field { display: flex; gap: 10px; margin: 18px 0 6px; flex-wrap: wrap; }
input[type=text] {
  flex: 1 1 320px;
  min-width: 0;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  padding: 13px 14px;
  border-radius: 2px;
}
input[type=text]:focus { outline: none; border-color: var(--rind); }
button {
  background: var(--lime);
  color: #0A1005;
  border: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 2px;
  cursor: pointer;
  min-height: 44px;
}
button:hover { background: var(--pith); }
button:disabled { background: #253023; color: #5E6C5C; cursor: not-allowed; }
button:focus-visible { outline: 2px solid var(--flesh); outline-offset: 2px; }

.note {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--mute);
  border-left: 2px solid var(--rind);
  padding: 2px 0 2px 15px;
  margin: 20px 0;
}
.note b { color: var(--pith); font-weight: 500; }
.note.warn { border-left-color: var(--flesh); }
.note.warn b { color: var(--flesh-hi); }

code { font-family: var(--mono); font-size: .9em; color: var(--pith); background: rgba(198,242,78,.07); padding: 1px 5px; border-radius: 2px; }

.tablewrap { overflow-x: auto; margin: 18px 0; }
table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 12.5px; }
.tablewrap table { min-width: 460px; }
th, td { text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid rgba(198,242,78,.08); white-space: nowrap; }
th { color: var(--rind); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; }
td { color: #C3CDBD; font-variant-numeric: tabular-nums; }
td.n { text-align: right; }
td b { color: var(--paper); font-weight: 500; }

ul.plain { list-style: none; padding: 0; margin: 14px 0; }
ul.plain li { padding: 9px 0 9px 22px; position: relative; border-bottom: 1px solid rgba(198,242,78,.07); color: #C3CDBD; font-size: 14.5px; }
ul.plain li::before { content: ""; position: absolute; left: 4px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--rind); }
ul.plain li.no::before { background: var(--flesh); }

footer {
  position: relative; z-index: 2;
  max-width: 1320px; margin: 0 auto;
  padding: 60px clamp(20px, 5vw, 56px) 0;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--mute);
}
footer a { color: var(--mute); text-decoration: none; }
footer a:hover { color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── narrow screens ──────────────────────────────────────────────────────────────────────────*/
@media (max-width: 620px) {
  :root { --gauge-h: 54px; }
  .top { padding-top: 16px; gap: 10px; }
  .wordmark { font-size: 18px; }
  .wordmark span { margin-left: 8px !important; }
  .mark { width: 25px; height: 25px; }
  .state { font-size: 9.5px; letter-spacing: .07em; white-space: nowrap; }
  .state .long { display: none; }
  h1 { font-size: clamp(33px, 9.2vw, 44px); }
  .fact .n { font-size: clamp(62px, 19vw, 84px); }
  .fact .of { font-size: 11.5px; line-height: 1.75; }
  .station { padding-top: 46px; margin-top: 46px; }
  .gauge a { padding: 0 14px; font-size: 11px; }
  .matrix { grid-template-columns: repeat(auto-fill, minmax(11px, 1fr)); gap: 3px; }
  .row { grid-template-columns: 1fr auto; gap: 12px; }
}

/* ═══ APP LAYER ═════════════════════════════════════════════════════════════════════════════
   The reading column above is for /docs. Everything else is a working surface: full width,
   panels, tabular figures, controls. */

.app { max-width: 1320px; margin: 0 auto; padding: 18px clamp(14px, 3vw, 34px) calc(var(--gauge-h) + 56px); position: relative; z-index: 2; }

.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .grid.split, .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid.c2, .grid.c3, .grid.c4, .grid.split { grid-template-columns: minmax(0, 1fr); } }

.panel {
  /* Opaque enough to sit ON the netting rather than let it run through the text. Texture belongs
     in the gutters; behind a paragraph it is just noise. */
  background: linear-gradient(rgba(11, 16, 13, .82), rgba(11, 16, 13, .82)),
              linear-gradient(rgba(255, 255, 255, .018), rgba(255, 255, 255, .018));
  border: 1px solid rgba(198, 242, 78, .10);
  border-radius: 3px;
  padding: 15px 16px 16px;
  min-width: 0;
}
.panel > header {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rind); margin: 0 0 12px;
}
.panel > header .sub { margin-left: auto; color: var(--mute); letter-spacing: .08em; }
.panel.tall { grid-row: span 2; }
.panel.flush { padding: 0; overflow: hidden; }

/* the numbers an app is made of */
.metric { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.metric .big { display: block; font-size: clamp(24px, 3vw, 34px); line-height: 1.06; color: var(--paper); letter-spacing: -.01em; }
.metric .big.hot { color: var(--flesh); }
.metric .big.dim { color: #48564A; }
.metric .cap { display: block; margin-top: 7px; font-size: 11px; letter-spacing: .04em; color: var(--mute); line-height: 1.5; }
.metric .cap b { color: var(--pith); font-weight: 500; }

/* the machine, now a status widget rather than wallpaper */
#press {
  position: relative; inset: auto;
  width: 100%; height: 300px;
  display: block; z-index: auto;
}
.panel.press-panel { padding: 0; position: relative; overflow: hidden; }
.panel.press-panel .stateline {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 0; border-top: 1px solid rgba(198,242,78,.10);
  background: rgba(6,9,10,.72); backdrop-filter: blur(8px);
}
.panel.press-panel .stateline i {
  flex: 1; padding: 9px 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: #43503F; font-style: normal; border-right: 1px solid rgba(198,242,78,.07);
  transition: color .2s ease;
}
.panel.press-panel .stateline i:last-child { border-right: 0; }
.panel.press-panel .stateline i.on { color: var(--flesh); }

/* controls */
.toolbar { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar input[type=text] { flex: 1 1 180px; padding: 9px 11px; font-size: 12px; }
.chip {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 12px; border: 1px solid rgba(198,242,78,.14); background: transparent;
  color: var(--mute); border-radius: 2px; cursor: pointer; min-height: 34px;
}
.chip:hover { color: var(--pith); border-color: rgba(198,242,78,.3); }
.chip[aria-pressed="true"] { background: rgba(198,242,78,.12); color: var(--lime); border-color: rgba(198,242,78,.4); }
button.sm { padding: 9px 14px; font-size: 11px; min-height: 34px; }

/* dense data table */
.dt { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.dt thead th {
  position: sticky; top: 0; z-index: 1;
  background: #080C0B;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rind);
  font-weight: 500; text-align: left; padding: 10px 12px; white-space: nowrap;
  border-bottom: 1px solid rgba(198,242,78,.14); cursor: pointer; user-select: none;
}
.dt thead th.n, .dt td.n { text-align: right; }
.dt thead th[aria-sort]::after { content: " ↓"; color: var(--flesh); }
.dt thead th[aria-sort="ascending"]::after { content: " ↑"; }
.dt td { padding: 8px 12px; border-bottom: 1px solid rgba(198,242,78,.055); color: #B9C4B4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt tbody tr:hover td { background: rgba(198,242,78,.035); }
.dt td .nm { color: var(--paper); }
.dt td .dx { color: var(--mute); font-size: 10.5px; }
.dt .pill { display: inline-block; width: 7px; height: 7px; border-radius: 2px; vertical-align: middle; margin-right: 7px; }
.dt .pill.ripe { background: var(--flesh); }
.dt .pill.thin { background: #3E5B2C; }
.dt .pill.dead { background: #1E2A20; }
.scroller { max-height: 560px; overflow: auto; }
.scroller::-webkit-scrollbar { width: 9px; height: 9px; }
.scroller::-webkit-scrollbar-thumb { background: rgba(198,242,78,.16); border-radius: 5px; }

/* a disabled control that still shows what it will do */
.form { display: grid; gap: 9px; }
.form label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.form .inputrow { display: flex; gap: 8px; }
.form .inputrow input { flex: 1; }
.form .suffix { display: flex; align-items: center; padding: 0 13px; font-family: var(--mono); font-size: 12px; color: var(--pith); border: 1px solid var(--line); border-left: 0; }
.locked { position: relative; }
.locked::after {
  content: attr(data-why);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(6,9,10,.80); backdrop-filter: blur(1.5px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--flesh); padding: 12px; border-radius: 2px;
}
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(198,242,78,.06); font-size: 13px; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--mute); }
.kv b { font-family: var(--mono); font-weight: 400; color: var(--paper); font-variant-numeric: tabular-nums; }
.kv b.hot { color: var(--flesh); }
.kv b.dim { color: #4B5A4C; }

.page-h {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 4px 0 16px;
}
.page-h h1 { font-size: clamp(26px, 3.2vw, 38px); margin: 0; line-height: 1; }
.page-h .sub { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--mute); }

/* the live strip in the masthead */
.ticker { display: flex; gap: 0; margin-left: auto; align-items: stretch; }
.ticker i {
  font-style: normal; padding: 0 16px; display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid rgba(198,242,78,.09);
  font-family: var(--mono); font-size: 12.5px; color: var(--paper); font-variant-numeric: tabular-nums;
}
.ticker i s { text-decoration: none; display: block; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 2px; }
.ticker i.live b { color: var(--lime); font-weight: 400; }
@media (max-width: 860px) { .ticker i.opt { display: none; } }
@media (max-width: 560px) { .ticker i { padding: 0 10px; font-size: 11.5px; } }

/* An inline link inside a caption was a 14px tall tap target. Padding gives it a real hit area
   without turning a mid-sentence link into a button. */
.metric .cap a { display: inline-block; padding: 9px 0; margin: -9px 0; }

/* Four one-line figures stacked one per screen is a lot of thumb for very little. They stay 2 up
   all the way down: the numbers are short and that is the whole point of them. */
.grid.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .grid.metrics { gap: 10px; } .grid.metrics .panel { padding: 12px 13px 13px; } }

/* ═══ BACKGROUND ═══════════════════════════════════════════════════════════════════════════
   Flat black reads as a placeholder. Two full-bleed layers, both very low: a pair of soft
   corner glows for depth, and film grain to kill the banding those gradients would otherwise
   show on a dark screen.
   ⚠ Both cover the WHOLE viewport. A short gradient with a defined edge reads as a horizontal
   band across the page, not as depth, and a repeated accent above about 0.05 reads as a
   rendering bug rather than as texture. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    /* the skin of the fruit, drawn once at 1800x1300 and never tiled */
    url("/assets/rind.svg") center / cover no-repeat,
    /* a vignette, so the corners sit back and the reading column comes forward */
    radial-gradient(140vw 120vh at 50% 42%, transparent 34%, rgba(0,0,0,.42) 100%),
    radial-gradient(120vw 90vh at 8% -10%,  rgba(198,242,78,.055), transparent 62%),
    radial-gradient(110vw 80vh at 96% 108%, rgba(245,166,60,.05),  transparent 60%),
    radial-gradient(70vw 60vh at 100% 0%,   rgba(143,191,63,.028), transparent 65%);
}

body[data-page="home"]::before { z-index: 1; }   /* the glow sits over the scene, under the veil */

/* the fixed press, on the front only */
body[data-page="home"] #press {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: block; pointer-events: none;
}
#press-veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg, rgba(6,9,10,0) 0%, rgba(6,9,10,.10) 30%, rgba(6,9,10,.62) 56%, rgba(6,9,10,.90) 74%, rgba(6,9,10,.94) 100%);
}
@media (max-width: 900px) {
  #press-veil {
    background: linear-gradient(180deg, rgba(6,9,10,0) 0%, rgba(6,9,10,.03) 17%, rgba(6,9,10,.45) 24%,
      rgba(6,9,10,.96) 30%, rgba(6,9,10,1) 36%, rgba(6,9,10,1) 100%);
  }
  body[data-page="home"] .hero { padding-top: 34vh; }
}

/* ═══ THE WAY IN ═══════════════════════════════════════════════════════════════════════════ */
.cta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  background: var(--lime); color: #0A1005; text-decoration: none;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; padding: 11px 18px; border-radius: 2px; white-space: nowrap;
}
.cta:hover { background: var(--pith); }
.cta em { font-style: normal; font-size: 15px; line-height: 0; }
.cta.big { font-size: 13px; padding: 15px 26px; margin: 0; }
.cta.ghost { background: transparent; color: var(--pith); border: 1px solid rgba(198,242,78,.28); }
.cta.ghost:hover { background: rgba(198,242,78,.08); color: var(--lime); }
.ctarow { display: flex; gap: 11px; flex-wrap: wrap; margin: 30px 0 4px; }
@media (max-width: 560px) { .cta { padding: 10px 13px; font-size: 10.5px; letter-spacing: .08em; } }

/* ═══ THE FIELD ════════════════════════════════════════════════════════════════════════════
   274 markets, one cell each, coloured by 24h volume. Sequential: ONE hue, light to dark, so a
   brighter cell always means more. The steps were run through the palette validator against this
   surface; the darkest traded step clears 3:1 and "no trade" sits deliberately below the ramp,
   which is why it is named in the legend, in the hover readout, and again as a table on /markets. */
.field { display: grid; grid-template-columns: repeat(auto-fill, minmax(12px, 1fr)); gap: 3px; }
.field i {
  aspect-ratio: 1; border-radius: 2px; background: var(--v0); display: block;
  transition: transform .12s ease;
}
.field i:hover, .field i:focus-visible { transform: scale(1.55); outline: none; box-shadow: 0 0 0 1px var(--lime); }
:root { --v0: #171F19; --v1: #8A5D22; --v2: #B0762A; --v3: #CE8829; --v4: #EDA43A; --v5: #FFC978; }
.field i.v1 { background: var(--v1); } .field i.v2 { background: var(--v2); }
.field i.v3 { background: var(--v3); } .field i.v4 { background: var(--v4); }
.field i.v5 { background: var(--v5); }

.scale { display: flex; align-items: center; gap: 9px; margin-top: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.scale .ramp { display: flex; gap: 2px; }
.scale .ramp b { width: 15px; height: 9px; border-radius: 1px; display: block; }
.readout {
  font-family: var(--mono); font-size: 12px; color: var(--pith); min-height: 1.5em;
  margin-top: 10px; letter-spacing: .02em;
}

/* horizontal bars: one series, one hue, 4px rounded data end, 2px gap between rows */
.bars { display: grid; gap: 7px; margin-top: 4px; }
.barrow { display: grid; grid-template-columns: 46px 1fr 62px; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11.5px; color: #AFBBAB; }
.barrow .t { color: var(--paper); }
.barrow .v { text-align: right; font-variant-numeric: tabular-nums; }
.barrow .track { height: 9px; background: rgba(198,242,78,.07); border-radius: 2px; overflow: hidden; }
.barrow .track i { display: block; height: 100%; background: var(--flesh); border-radius: 0 4px 4px 0; min-width: 2px; }
.barrow.zero .track i { background: #2B3A2C; }
.barrow.zero .t, .barrow.zero .v { color: #5B6A5C; }

/* ═══ PRE LAUNCH ═══════════════════════════════════════════════════════════════════════════
   Everything the vault will show, showing zero, because zero is what it holds. A dash would be
   "we do not know"; 0.0000 is "we know, and it is nothing". */
.zero { color: #4E5D50 !important; }
.prelaunch {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--flesh); border: 1px solid rgba(245,166,60,.32); border-radius: 2px; padding: 4px 9px;
}
.prelaunch::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--flesh); }

/* ═══ DIAGRAMS ═════════════════════════════════════════════════════════════════════════════ */
figure.dia { margin: 26px 0; }
figure.dia svg { width: 100%; height: auto; display: block; overflow: visible; }
figure.dia figcaption {
  margin-top: 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.65;
  color: var(--mute); letter-spacing: .02em;
}
figure.dia figcaption b { color: var(--pith); font-weight: 500; }

/* ═══ DOCS ═════════════════════════════════════════════════════════════════════════════════
   There is no machine behind this page, so the column centres instead of hugging the right. And a
   diagram drawn at 880 units cannot live inside a 58ch measure: at that width its labels render
   around 6px. Figures break out of the column and centre on the page. */
body[data-page="docs"] .col { margin-left: auto; margin-right: auto; max-width: 64ch; }
body[data-page="docs"] .fillrail { left: max(14px, calc(50vw - 560px)); }
figure.dia {
  width: min(1000px, calc(100vw - 2 * clamp(20px, 5vw, 56px)));
  position: relative; left: 50%; transform: translateX(-50%);
}
@media (max-width: 900px) {
  /* Below this the labels stop being legible however wide the figure is, so it scrolls at its own
     natural size inside its own box rather than shrinking into noise. */
  figure.dia { overflow-x: auto; }
  figure.dia svg { min-width: 720px; }
  body[data-page="docs"] .fillrail { display: none; }
}

/* A panel row where one side is naturally shorter should not stretch to match the other. */
.grid.split, .grid.c3, .grid.c4 { align-items: start; }
.field { grid-template-columns: repeat(auto-fill, minmax(15px, 1fr)); gap: 4px; }

/* ═══ RESPONSIVE, MEASURED ═════════════════════════════════════════════════════════════════
   A sweep at 320/360/390/430 found two faults on every page: the bottom nav overflowed, so the
   fifth tab was undiscoverable, and every table forced a sideways drag. Both are fixed here by
   removing things, not by shrinking them. */

/* 1. The nav has to FIT. Five labels at 320px need the dots gone, not smaller type: the current
      page is marked by a lit top edge instead, which costs no width at all. */
@media (max-width: 700px) {
  .gauge nav { padding: 0 6px; }
  .gauge a { padding: 0 8px; font-size: 9.5px; letter-spacing: .06em; gap: 0; flex: 1 1 0; justify-content: center; }
  .gauge a::before { display: none; }
  .gauge a[aria-current="page"] { box-shadow: inset 0 2px 0 var(--flesh); background: rgba(245,166,60,.07); }
  .gauge::after { display: none; }
}

/* 2. Tables drop columns rather than scroll. A number nobody can reach is worth less than one
      that is simply not shown, and /markets keeps every field in its own filter and sort. */
@media (max-width: 760px) {
  .dt th.opt2, .dt td.opt2 { display: none; }
  .scroller { max-height: 460px; }
}
@media (max-width: 620px) {
  .dt th.opt1, .dt td.opt1 { display: none; }
  .dt th, .dt td { padding: 8px 8px; font-size: 11.5px; }
  .dt td .dx { display: block !important; margin-top: 2px; }
}
/* the prose table on /docs wrapped nowhere because every cell forbade it */
@media (max-width: 760px) {
  .tablewrap table { min-width: 0; }
  .tablewrap th, .tablewrap td { white-space: normal; }
}
/* `accountMarginSummary(dex, addr)` is one 202px token with nowhere to break, which put the docs
   table 18px over the viewport at 320. Long identifiers get to break mid-word here; a hyphenless
   split reads worse than a sideways drag does. */
@media (max-width: 560px) {
  .tablewrap th, .tablewrap td { overflow-wrap: anywhere; font-size: 11.5px; padding-right: 10px; }
}

/* 3. Everything else that was one column and did not need to be */
@media (max-width: 640px) {
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid.c4 .panel { padding: 12px 13px 13px; }
  .field { grid-template-columns: repeat(auto-fill, minmax(11px, 1fr)); gap: 3px; }
  .page-h { gap: 8px; }
  .page-h .prelaunch { margin-left: 0 !important; }
  .barrow { grid-template-columns: 40px 1fr 54px; gap: 8px; font-size: 10.5px; }
}
@media (max-width: 360px) {
  .app { padding-left: 12px; padding-right: 12px; }
  .gauge a { padding: 0 5px; font-size: 9px; }
}

/* ═══ SAYING IT PLAINLY ════════════════════════════════════════════════════════════════════
   Three steps, in the order they happen. The numeral carries the sequence so the sentences do
   not have to. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.step { display: flex; gap: 14px; align-items: flex-start; padding: 15px 16px; }
.step .no {
  font-family: var(--display); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  font-weight: 800; font-size: 34px; line-height: .8; color: var(--flesh); flex: none;
  font-variant-numeric: tabular-nums;
}
.step h4 { margin: 0 0 5px; font-family: var(--body); font-size: 14.5px; font-weight: 600; color: var(--paper); line-height: 1.3; }
.step p { margin: 0; font-size: 13px; line-height: 1.55; color: #A6B3A2; }

/* a plain sentence that sits directly under a page title */
.plain-lead {
  font-size: 15px; line-height: 1.6; color: #C2CCBD; max-width: 74ch; margin: -4px 0 16px;
}
.plain-lead b { color: var(--paper); font-weight: 600; }

/* the glossary: a term, then what it means, in the reader's words */
.terms { display: grid; gap: 0; }
.terms div { display: grid; grid-template-columns: 132px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(198,242,78,.07); }
.terms div:last-child { border-bottom: 0; }
.terms dt, .terms .t { font-family: var(--mono); font-size: 12px; color: var(--flesh); letter-spacing: .02em; }
.terms .d { font-size: 13.5px; line-height: 1.55; color: #B4BFB0; }
@media (max-width: 560px) { .terms div { grid-template-columns: minmax(0, 1fr); gap: 3px; } }

/* A table inside a half width panel is narrow at 1440 and wide at 390, so the viewport is the
   wrong thing to ask. The panel measures itself. */
.panel.flush { container-type: inline-size; }
@container (max-width: 560px) { .dt th.opt2, .dt td.opt2 { display: none; } }
@container (max-width: 400px) {
  .dt th.opt1, .dt td.opt1 { display: none; }
  .dt th, .dt td { padding: 8px 8px; font-size: 11.5px; }
  .dt td .dx { display: block !important; margin-top: 2px; }
}

/* ⚠ Order matters: the `.tablewrap table { min-width: 460px }` above was added after the media
   query that cancels it, so it won on equal specificity. This has to stay last in the file. */
@media (max-width: 760px) {
  .tablewrap table { min-width: 0; }
  .tablewrap th, .tablewrap td { white-space: normal; }
}
/* `accountMarginSummary(dex, addr)` is one 202px token with nowhere to break, which put the docs
   table 18px over the viewport at 320. Long identifiers get to break mid-word here; a hyphenless
   split reads worse than a sideways drag does. */
@media (max-width: 560px) {
  .tablewrap th, .tablewrap td { overflow-wrap: anywhere; font-size: 11.5px; padding-right: 10px; }
}

/* Three columns inside a 58ch measure gives each step about 170px, which wraps "quotes the new
   markets" onto four lines. Inside a reading column they stack; the numeral keeps the sequence. */
.col .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
.col .step { padding: 16px 0; border-bottom: 1px solid rgba(198,242,78,.09); gap: 18px; }
.col .step:last-child { border-bottom: 0; }
.col .step .no { font-size: 30px; width: 30px; text-align: center; }

/* On the front the netting sits behind a lit 3D machine and competes with it, so it steps back
   there and does its work on the app pages, which have no other subject. */
body[data-page="home"]::before { background-size: cover, cover, cover, cover, cover; opacity: .55; }

/* ═══ THE CHAIN ════════════════════════════════════════════════════════════════════════════
   Three inputs and three outputs made the reader do the joining. A chain does the joining for
   them: one line per step, each reading from the one above. */
.chain { margin-top: 16px; }
.chain .link {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 14px;
  padding: 11px 0 11px 20px; position: relative;
  border-bottom: 1px solid rgba(198,242,78,.07);
}
.chain .link:last-child { border-bottom: 0; }
.chain .link::before {
  content: ""; position: absolute; left: 5px; top: 0; bottom: 0;
  border-left: 1px solid rgba(198,242,78,.16);
}
.chain .link:first-child::before { top: 50%; }
.chain .link:last-child::before { bottom: 50%; }
.chain .link::after {
  content: ""; position: absolute; left: 2px; top: 50%; margin-top: -3px;
  width: 7px; height: 7px; border-radius: 50%; background: #2E3D2E;
}
.chain .link.out::after { background: var(--flesh); box-shadow: 0 0 9px rgba(245,166,60,.75); }
.chain .link span { font-size: 13.5px; color: #B4BFB0; }
.chain .link b {
  font-family: var(--mono); font-weight: 400; font-size: 14px; color: var(--paper);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chain .link.out b { color: var(--flesh); font-size: 17px; }