/* Zomi tokens and chrome.

   One ground, one accent family, one typeface. Everything on the site is a
   rectangle on black separated by a hairline: no rounded cards, no shadows, no
   gradients behind text. Numbers are the design, so they are given the room.

   Contrast against #000 is in the comment beside each text colour, and every
   number there is what scripts/check-contrast.mjs measured, not an estimate.
   scripts/qa.mjs then measures what the browser actually painted, which is the
   half that catches a rule repainting something in a colour nobody chose. */

:root {
  --ground: #000000;
  --panel: #050b08;
  --panel-2: #08120d;

  --line: #14301f;
  --line-soft: #0c1d14;

  --accent: #35e0a1;      /* 12.33:1 on black */
  --accent-hi: #7ff0c4;   /* 15.16:1 on black */

  --text: #dcefe6;        /* 17.53:1 on black, headings and figures */
  --body: #7fa493;        /*  7.63:1 on black, running prose */
  --meta: #6b8c7c;        /*  5.67:1 on black, eyebrows, labels, captions */
  --faint: #628574;       /*  5.13:1 on black, side notes and the legal line */
  --pending: #e8b75c;     /* 11.36:1 on black, the one unset state */

  /* The metric adjusted fallback below has to be IN the stack or it is a
     @font-face nobody uses: without it the first paint is Consolas at its own
     metrics and every line rewraps when JetBrains Mono lands. */
  --mono: "JetBrains Mono", "JetBrains Mono fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ------------------------------------------------------------ type ----
     One modular scale for the whole site. Nothing sets a font-size that is
     not on this list, so a heading on /audit is the same size as the heading
     on / and the page reads as one document rather than eleven.
     11 is the eyebrow, 13 is the body, 72 is the one display size. */
  --t-11: 11px;
  --t-13: 13px;
  --t-15: 15px;
  --t-18: 18px;
  --t-24: 24px;
  --t-34: 34px;
  --t-48: 48px;
  --t-72: 72px;

  --lead-body: 1.6;
  --lead-display: 1.08;
  --track-eyebrow: .22em;

  /* ------------------------------------------------------------ grid ----
     Twelve columns on a 1248 px field at 1440, with a 96 px gutter either
     side. Everything that is not full bleed starts and ends on one of those
     twelve lines, which is what stops a panel floating half a column off the
     one above it. */
  --gutter: 96px;
  --wide: 1440px;
  --gap: 24px;
  --col: calc((100% - 11 * var(--gap)) / 12);

  /* vertical rhythm: two band heights, nothing in between */
  --band: 120px;
  --band-lg: 160px;

  /* ---------------------------------------------------------- motion ----
     One easing family, three durations, transform and opacity only. */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 200ms;
  --t-mid: 360ms;
  --t-slow: 600ms;

  --rule: 1px solid var(--line);
  --rule-soft: 1px solid var(--line-soft);

  --bar-h: 56px;
}

/* The webfont and the fallback are made the same advance, so a late font swap
   rewraps no line and moves nothing.

   JetBrains Mono sets one character on 0.6 em. Consolas and Menlo both set one
   on 0.5498 em, measured in the browser rather than guessed, so 0.6 / 0.5498 is
   109.1 percent and that is the adjustment. The previous 104 percent ran the
   fallback four percent narrow, which is why a line that fitted before the font
   landed took a second line after it and pushed the page down. */
@font-face {
  font-family: "JetBrains Mono fallback";
  src: local("Consolas"), local("Menlo"), local("DejaVu Sans Mono");
  size-adjust: 109.1%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

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

html {
  background: var(--ground);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--mono);
  font-size: var(--t-13);
  line-height: var(--lead-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Grain. Three percent, fixed, pointer transparent, never attached to a
   scrolling box, so it costs one composited layer and no repaint on scroll.
   The tile is a 64 px deterministic noise field written once by hand, not a
   photograph, so it tiles without a seam and weighs seven kilobytes. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  opacity: .03;
  background-image: url("/assets/grain.png");
  background-size: 64px 64px;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--text); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: .35em; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }

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

img, canvas { display: block; max-width: 100%; }

/* Shared, not home only: /animation has an h1 and no visible heading either. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--accent);
  color: #000;
  padding: 10px 16px;
}
.skip:focus { left: 0; text-decoration: none; }

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ------------------------------------------------------------------ type -- */

.eyebrow {
  margin: 0;
  font-size: var(--t-11);
  line-height: 1.4;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--meta);
}

.num {
  font-size: var(--t-24);
  line-height: 1.2;
  color: var(--accent);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.sub { color: var(--meta); font-size: var(--t-11); line-height: 1.55; }

.lede { color: var(--body); max-width: 68ch; }

.pending { color: var(--pending); }

/* A figure with nothing behind it yet. Not an alarm and not a value: the same
   grey the labels use, so an empty market reads as empty rather than as a
   warning. The amber --pending is spent once, on the token contract pill. */
.num.none { color: var(--meta); }

/* ---------------------------------------------------------------- top bar -- */

/* A slim bar that floats clear of the page on a blurred black ground rather
   than sitting welded to the top edge. Once the page has moved it compacts:
   it slides flush to the top edge and its ground goes from glass to nearly
   solid, so it stops being an object on the page and becomes a chrome edge.

   The slide is a transform and the ground is a colour. Neither is a layout
   property, so the bar's box in the flow never changes size and compacting
   costs exactly zero layout shift. The earlier version animated padding and
   height, which looked the same and moved the whole document three pixels
   every frame of the transition. */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 12px var(--gutter) 0;
  /* a scrim, not decoration: it keeps the page from reading through the strip
     above the floating bar while the bar itself stays glass */
  background: linear-gradient(to bottom, rgba(0, 0, 0, .96) 0 70%, rgba(0, 0, 0, 0));
}

.bar-in {
  display: flex;
  align-items: center;
  gap: 22px;
  height: var(--bar-h);
  max-width: calc(var(--wide) - 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 18px;
  border: var(--rule);
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease);
}
.bar[data-compact] .bar-in {
  transform: translateY(-12px);
  border-color: var(--line-soft);
  background: rgba(0, 0, 0, .92);
}

/* the sentinel is one pixel of nothing at the top of the document; when it
   stops intersecting, the bar is no longer at rest */
.bar-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: .22em;
  font-size: var(--t-13);
  flex: none;
}
.brand:hover { color: var(--accent); text-decoration: none; }
.brand canvas {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
  flex: none;
  transition: transform var(--t-fast) var(--ease);
}
.brand:hover canvas { transform: translateY(-1px); }
.brand i {
  font-style: normal;
  font-weight: 400;
  letter-spacing: .1em;
  font-size: var(--t-11);
  color: var(--meta);
  text-transform: lowercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;
}
.nav a {
  position: relative;
  color: var(--meta);
  font-size: var(--t-11);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 0;
  transition: color var(--t-fast) var(--ease);
}
/* the hairline draws in from the left rather than appearing: one property,
   one direction, and it reads as the link acknowledging the cursor */
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav a:hover { color: var(--accent); text-decoration: none; }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--line); }

.bar-tools { display: flex; align-items: center; gap: 10px; flex: none; }
/* The chain pill says "checking Robinhood Mainnet" while the RPC is being
   asked and "Robinhood Mainnet, id 4663" once it answers. The second is eight
   pixels wider than the first, and eight pixels of growth in a flex row is the
   whole nav moving. So the wider of the two is reserved: 250 px is what the
   longer string measures at 11 px with this tracking, checked in the browser
   and not guessed. */
.bar-tools .pill { display: none; min-width: 250px; justify-content: center; }
@media (min-width: 1300px) { .bar-tools .pill { display: inline-flex; } }

.find { display: flex; align-items: stretch; border: var(--rule); }
.find input {
  width: 152px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--t-11);
  padding: 6px 10px;
}
.find input::placeholder { color: var(--faint); }
/* The search box draws its own accent border on focus. It gets the ring as
   well: a border is a colour change, and a colour change alone is not a focus
   indicator for anyone who cannot separate those two colours. */
.find input:focus { outline: none; }
.find input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.find:focus-within { border-color: var(--accent); }
.find button {
  border: 0;
  border-left: var(--rule);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--t-11);
  letter-spacing: .16em;
  padding: 0 12px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.find button:hover { background: var(--accent); color: #000; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--t-11);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 15px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--accent); color: #000; text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { border-color: var(--line); color: var(--faint); cursor: not-allowed; }
.btn[disabled]:hover { background: transparent; color: var(--faint); }

.btn-quiet { border-color: var(--line); color: var(--body); }
.btn-quiet:hover { background: var(--line); color: var(--text); }

.burger {
  display: none;
  border: var(--rule);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--t-11);
  letter-spacing: .16em;
  padding: 7px 13px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.burger:hover { border-color: var(--accent); }

/* --------------------------------------------------------------- drawer -- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--ground);
  display: none;
  flex-direction: column;
  padding: 0 var(--gutter) 32px;
  overflow-y: auto;
}
.drawer[data-open] { display: flex; }

.drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar-h);
  border-bottom: var(--rule);
  margin-bottom: 8px;
}
.drawer-top span {
  font-size: var(--t-11);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--meta);
}
.drawer-close {
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--t-11);
  letter-spacing: .16em;
  cursor: pointer;
  padding: 6px 0;
}

.drawer a.item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  border-bottom: var(--rule-soft);
  color: var(--text);
  font-size: var(--t-18);
  letter-spacing: .02em;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.drawer a.item:hover { color: var(--accent); text-decoration: none; transform: translateX(3px); }
.drawer a.item b {
  font-weight: 400;
  font-size: var(--t-11);
  letter-spacing: .18em;
  color: var(--meta);
  min-width: 26px;
}
.drawer a.item span { margin-left: auto; color: var(--meta); font-size: var(--t-13); }

.drawer .find { margin-top: 22px; }
.drawer .find input { width: 100%; }

/* --------------------------------------------------------------- section -- */

/* The divider between bands sits on the content field, not on the viewport,
   so it starts and ends exactly where the first and twelfth columns do. That
   is the whole difference between a page that is on a grid and a page with
   lines drawn across it. */
.band { padding: 0; }
.band > .wrap { position: relative; padding-top: var(--band); padding-bottom: var(--band); }
/* absolutely placed rather than a border, because a border on the wrap would
   run under its own gutter padding and come out viewport wide again */
.band > .wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--line);
}
/* The band directly under a page head does not repeat the divider the head
   already ends on, and does not pay the full band of air for it either: the
   next thing down carries its own top rule. */
.band-first > .wrap::before { display: none; }
.band-first > .wrap { padding-top: 0; }
.band-tall > .wrap { padding-top: var(--band-lg); padding-bottom: var(--band-lg); }

/* No rule under the head: whatever follows it carries its own top rule, and
   two hairlines forty pixels apart is one hairline too many. */
.band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}
.band-head h2 {
  font-size: var(--t-11);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--meta);
}
.band-head .side { font-size: var(--t-11); letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }

/* ------------------------------------------------------------------ grid -- */

/* The market numbers. A hairline stat strip: five cells on one rule, tabular
   figures, no boxes. The outer two cells lose their outer padding so the
   first label starts on the first column line and the last ends on the last,
   instead of every figure sitting twenty two pixels inside the field. */
.figures {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.figures > div {
  padding: 22px;
  border-right: var(--rule-soft);
  transition: background var(--t-mid) var(--ease);
}
.figures > div:first-child { padding-left: 0; }
.figures > div:last-child { border-right: 0; padding-right: 0; }
.figures > div:hover { background: var(--panel); }
.figures .eyebrow { margin-bottom: 10px; }
.figures .num { margin-bottom: 6px; }

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

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: var(--rule);
  padding: 5px 11px;
  font-size: var(--t-11);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--meta);
  white-space: nowrap;
}
.pill b { font-weight: 400; color: var(--text); letter-spacing: .06em; text-transform: none; }
.pill.on { border-color: var(--accent); color: var(--accent); }
.pill.off { border-color: #3a3218; color: var(--pending); }

.ca {
  font-size: var(--t-11);
  letter-spacing: .02em;
  word-break: break-all;
  color: var(--text);
  text-transform: none;
}

/* ------------------------------------------------------------- zomi tile -- */

.tile { position: relative; display: block; background: var(--panel); }
.tile canvas { width: 100%; aspect-ratio: 1; image-rendering: pixelated; }
.tile figcaption,
.tile .cap {
  padding: 10px 12px 12px;
  font-size: var(--t-11);
  letter-spacing: .1em;
  color: var(--meta);
  border-top: var(--rule-soft);
}
.tile .cap b { display: block; font-weight: 400; color: var(--text); letter-spacing: .06em; }

/* ------------------------------------------------------------- grounds --- */

/* Depth without gloss. Two grounds, both drawn out of the same 26 px thinking
   as the identities: a dither field of one pixel dots on a four pixel pitch,
   and a scanline ground of one pixel rules on a three pixel pitch. They sit
   behind a panel, never behind running text, and the light is top left in
   both, which is the same direction the engine rims its shells from. */
.ground-dither {
  background-color: var(--panel);
  background-image:
    radial-gradient(circle at 50% 50%, var(--line) 0 .8px, transparent 1px),
    linear-gradient(150deg, rgba(53, 224, 161, .045), transparent 62%);
  background-size: 4px 4px, 100% 100%;
}
.ground-scan {
  background-color: var(--panel);
  background-image:
    repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px 3px),
    linear-gradient(150deg, rgba(53, 224, 161, .05), transparent 58%);
}

/* A 1 px accent rule that draws itself in when its band is revealed. */
.rule-draw {
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.reveal.in .rule-draw { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .rule-draw { transform: scaleX(1); transition: none; } }

/* ------------------------------------------------------------ empty state -- */

/* One design language for everything that has nothing in it yet, on every
   page and in every script: a dashed hairline box, the locked 26 px Zomi
   ghosted at three tenths, and one plain sentence. No amber, no icon, no
   apology. The ghost is a background image rather than a canvas so a state a
   script writes and a state the HTML carries are the same object, and so
   nothing decorative needs an accessible name. */
.empty {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 34px 28px;
  border: 1px dashed var(--line);
  background: var(--panel);
  color: var(--body);
  font-size: var(--t-13);
  line-height: var(--lead-body);
  max-width: none;
}
.empty::before {
  content: "";
  flex: none;
  width: 52px;
  height: 52px;
  background: url("/assets/ghost.png") 0 0 / 52px 52px no-repeat;
  image-rendering: pixelated;
  opacity: .3;
}

/* ---------------------------------------------------------------- footer -- */

.foot { border-top: var(--rule); padding-top: 36px; overflow: hidden; }

/* Full bleed, and wider than the viewport on purpose: the mark is cropped by the
   edges rather than framed by them, which is what makes it read as a device
   closing the page rather than as a picture of a logo. No aspect-ratio here:
   site.js sizes the canvas to a whole number of cells per pixel, and a ratio
   would fight it for half a pixel on every letter. */
.wordmark {
  display: block;
  width: 108vw;
  max-width: none;
  margin-left: calc(50% - 54vw);
  height: auto;
  image-rendering: pixelated;
}

/* The footer links land on the twelve column grid rather than wrapping as a
   flex row, so the last line of the page is as measured as the first. */
.foot-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px var(--gap);
  padding: 26px 0 34px;
  font-size: var(--t-11);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--meta);
}
.foot-row a { color: var(--meta); transition: color var(--t-fast) var(--ease); }
.foot-row a:hover { color: var(--accent); }
.foot-row .foot-state { grid-column: span 2; justify-self: end; }
.foot-note {
  border-top: var(--rule-soft);
  padding: 18px 0 48px;
  font-size: var(--t-11);
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--faint);
  text-transform: none;
  max-width: 82ch;
}

/* ------------------------------------------------------------- no script -- */

/* Both wordmarks on this site are canvases painted by the engine, which is the
   whole point of them: the mark is made of the same cells the identities are.
   With scripting off a canvas is a reserved box with nothing in it, so the
   marks are swapped for the pixel lockup that already ships in public/brand,
   drawn from the same grid. The six Zomi in the strip are swapped for the six
   PNGs scripts/build-strip.mjs renders out of the same engine, because the
   caption under them describes six pictures and an empty band is not six
   pictures. `html.js` is set by config.js, the first blocking script on every
   page. */
html:not(.js) .hero-mark,
html:not(.js) .wordmark { display: none; }

.mark-fallback {
  display: block;
  width: min(100%, 760px);
  height: auto;
  image-rendering: pixelated;
}
.foot .mark-fallback { width: min(100%, 1100px); margin: 0 auto 8px; }

/* ----------------------------------------------------------------- reveal -- */

/* Only hide a band when the script that shows it again has loaded. `html.js`
   is set by config.js, the first blocking script on the page, so a run with no
   scripting or a failed asset leaves every band visible instead of leaving the
   home page empty below the fold. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* Children of a revealed group arrive behind their parent, sixty milliseconds
   apart, in document order. site.js sets the index, so the markup carries no
   inline style and the CSP stays where it is. */
.js .stagger > * { transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js .stagger.reveal > * { opacity: 0; transform: translateY(10px); }
.js .stagger.reveal.in > * {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  /* the same selector weight as the rules above, or these lose */
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .stagger.reveal > *,
  .js .stagger.reveal.in > * { opacity: 1; transform: none; transition: none; transition-delay: 0ms; }
}

/* ----------------------------------------------------------------- widths -- */

/* The gutter steps down with the viewport; the column count never changes on
   desktop, so a band keeps its proportions from 1440 all the way to a laptop. */
@media (max-width: 1360px) { :root { --gutter: 56px; } }

@media (max-width: 1080px) {
  :root { --gutter: 40px; --band: 88px; --band-lg: 112px; }
  .nav { display: none; }
  .burger { display: inline-block; }
  .bar-in .find { display: none; }
  .foot-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-row .foot-state { grid-column: span 3; justify-self: start; }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; --band: 56px; --band-lg: 64px; --gap: 14px; }
  .bar { padding-top: 8px; }
  .bar[data-compact] .bar-in { transform: translateY(-8px); }
  .bar-in { padding: 0 12px; }
  .band-head { margin-bottom: 24px; }
  /* Two by two rather than one by one: a five number strip stacked in a single
     column is a third of the scroll, and these are numbers, not paragraphs.
     The fifth cell takes the full width and closes the block. */
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; }
  .figures > div { border-bottom: var(--rule-soft); padding: 14px 14px 16px; }
  .figures > div:nth-child(2n) { border-right: 0; }
  .figures > div:last-child { grid-column: 1 / -1; border-right: 0; }
  .figures .eyebrow { margin-bottom: 6px; }
  .num { font-size: var(--t-18); }
  .bar-tools .btn { padding: 7px 11px; }
  .foot { padding-top: 26px; }
  .foot-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 0 24px; }
  .foot-row .foot-state { grid-column: span 2; justify-self: start; }
  .foot-note { padding: 14px 0 32px; }
  .nowt { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 18px; }
}