@font-face {
  font-family: "IBM Plex Serif";
  src: url("/fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("/fonts/ibm-plex-serif-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── the tokens, and the only place a colour is written down ───────────────────────────────── */
:root {
  --paper: #FAF9F6;
  --ink: #141414;
  --allowed: #1F5E3A;
  --refused: #7A1F1F;
  --gold: #B8933F;
  --hairline: color-mix(in srgb, var(--ink) 20%, transparent);
  --quiet: color-mix(in srgb, var(--ink) 62%, transparent);
  --serif: "IBM Plex Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --rail: 48px;
  --section: 96px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E0E0E;
    --ink: #E8E6E1;
    /* ⛔ THE VERDICTS ARE LIFTED, NOT REUSED. Measured on the dark paper the light pair reads 2.50:1
       and 1.88:1 — under the floor. These sit where their light counterparts sit, same hue. */
    --allowed: #5CAF83;
    --refused: #E08C8C;
  }
}

/* ── the page ──────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  /* ⛔ TABULAR FIGURES EVERYWHERE. A column of numbers that do not line up is a column a reader
     cannot scan, and a proportional 1 beside a proportional 8 is the oldest way to make a table
     look approximate. Set on the root so nothing has to remember it. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  /* ⚠️ THE SAFE AREA IS PADDING, NOT MARGIN. On a notched phone in landscape the inset is on the
     left; a margin would leave the paper colour ending at the notch instead of running under it. */
  padding:
    env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ⛔ NOTHING IS CENTRED. One rail on the left, the same on every page and every width; the content
   ends where it ends. Neither of the two ways to centre a block appears in this stylesheet, and
   site/test/site.test.ts fails the build if one arrives. */
main, header.masthead, footer.record-foot {
  max-width: 1100px;
  margin: 0;
  padding-left: var(--rail);
  padding-right: var(--rail);
}

@media (max-width: 640px) {
  :root { --rail: 20px; --section: 64px; }
}

/* ── type ──────────────────────────────────────────────────────────────────────────────────── */
h1, h2, h3 {
  /* ⛔ HEADINGS ARE NEVER BOLD — size and space carry the hierarchy. */
  font-weight: 400;
  font-family: var(--serif);
  letter-spacing: -0.01em;
  margin: 0 0 24px 0;
  text-wrap: balance;
}

h1 { font-size: 56px; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: 28px; line-height: 1.2; }
h3 { font-size: 17px; }

@media (max-width: 640px) {
  h1 { font-size: 34px; }
  h2 { font-size: 22px; }
}

/* Prose is 68ch and only prose is. A figure, a table and a receipt each set their own measure. */
/* ⚠️ "overflow-wrap: anywhere" DOES NOTHING TO PROSE and everything to the one paragraph that
   carries a hash. It only breaks a word that cannot fit on a line by itself, which in English is
   never and in an answer line quoting a sha256 is always. Measured: without it the answer paragraph
   on the queries page ran 232px past its container at 390 and 4px at 1440. */
p { max-width: 68ch; margin: 0 0 24px 0; overflow-wrap: anywhere; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }

code, .mono { font-family: var(--mono); font-variant-ligatures: none; }

/* ── sections: one 96px gap, and a hairline only where the page asks for one ────────────────── */
/* ⛔ THE RULE IS NOT AUTOMATIC ANY MORE. A border on every "section + section" drew a line directly
   under the question, which cut the hero off from the three sentences that answer it — the one place
   on the page where nothing should come between them. A hairline is now a decision a page makes
   ("class="ruled""), and the only one on the home page sits after the prose. */
/* ⚠️ ONE SECTION GAP, WITH THE RULE IN THE MIDDLE OF IT. A ruled section that added its own 96px of
   padding on top of the previous section"s 96px of margin produced a 192px canyon with a line
   floating in the top half of it — measured in the first screenshot pass. Half the gap is pulled
   back as negative margin and spent as padding, so the total between two sections is 96px whether
   or not a line is drawn in it. */
section { margin: 0 0 var(--section) 0; }
section:last-of-type { margin-bottom: 0; }
section.ruled {
  border-top: 1px solid var(--hairline);
  margin-top: calc(var(--section) / -2);
  padding-top: calc(var(--section) / 2);
}

/* ── the masthead ──────────────────────────────────────────────────────────────────────────── */
/* ⚠️ AN OXBLOOD RULE BENEATH IT, AND IT IS THE FIRST TIME A VERDICT COLOUR HAS DRAWN A LINE. The
   owner ruled it there: the masthead closes on the colour of a refusal, and the band opens on gold.
   Everything between the two rules is the page's own headline. */
header.masthead { padding-top: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--refused); }
.masthead .lockup { display: flex; align-items: center; gap: 14px; }
.masthead .wordmark {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: 20px;
}
.masthead .edition {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--quiet);
  margin-top: 22px;
  letter-spacing: 0.01em;
}
/* ⚠️ THE TAGLINE LEFT THE MASTHEAD. It now appears exactly once, in the home hero, under the
   question — a line repeated on every page stops being read by the second one. */
.hero-creed { margin-top: 34px; }

/* ⚠️ THE CAPTION UNDER A SPECIMEN. It was styled only inside a specimen cell, so the labels under
   the marks on the design page rendered at prose size and read as a sentence rather than a caption
   — visible in the first screenshot pass, invisible in the markup. */
.name { font-family: var(--sans); font-size: 11px; color: var(--quiet); margin-top: 10px; }
.masthead .edition .mono { font-size: 12px; }

/* ── the band ──────────────────────────────────────────────────────────────────────────────── */
/* ╔══════════════════════════════════════════════════════════════════════════════════════════════╗
   ║  THE BAND IS THE SITE'S HEADER. Every page opens with one and every page's headline is in it. ║
   ╚══════════════════════════════════════════════════════════════════════════════════════════════╝

   ⛔⛔ IT DOES NOT FLIP WITH THE SCHEME, AND THAT IS THE ONE DECISION IN HERE WORTH ARGUING WITH.
   Every other surface on this site is two values that swap: "background: var(--paper)" is light in
   light and dark in dark. The band inverts them INSIDE itself — --ink becomes the light value and
   --paper the dark one — so it is the same black slab in both schemes, and so is the gold on it.
   A band that flipped would be a light slab on a dark page in dark mode, and the oxblood headline
   figure on it would be #E08C8C on #E8E6E1: measured 1.09:1, which is not a number, it is a smudge.

   🔴 IT INVERTS FOUR TOKENS, NOT TWO, AND THE OTHER TWO WERE A MEASURED DEFECT. This block first
   swapped only --ink and --paper on the belief that --hairline and --quiet, being color-mix of
   --ink, would follow. They do not: a var() inside a custom property is substituted at the element
   where that property is DECLARED, so --quiet computed once on :root against the ROOT ink and was
   inherited into the band as a dark grey. MEASURED in the first screenshot pass of the new band —
   in the light scheme every small line in it (the figure's four lines, the labels on the numbers
   page) was dark grey on a #141414 slab and simply gone; in the dark scheme the same rules were
   correct, which is how it nearly shipped. Both are re-declared here so the mix resolves against
   the band's own ink, and a contrast fixture in site/test/overflow.test.ts now measures every text
   colour in the band against the band in both schemes.

   ⛔ FULL WIDTH MEANS OUTSIDE main. It is a sibling of the masthead, so it runs edge to edge; its
   inner wrapper carries the same 1100px measure and the same rail as every other block, so nothing
   in it is centred and nothing in it starts at a different left edge from the rest of the page. */
.band {
  --ink: #FAF9F6;
  --paper: #141414;
  /* ⛔ THE BAND'S OWN VERDICT PAIR, IN BOTH SCHEMES, BECAUSE THE BAND IS A THIRD SURFACE. The refused
     is the owner's oxblood lifted at the same hue and saturation until it clears the floor on this
     slab: 1.79:1 became 3.35:1. The allowed is the dark scheme's green, which needs no new colour and
     measures 6.94:1 here — nothing in the band uses it today, and a token that would fail the floor
     the day something did is a trap rather than a default. */
  --refused: #C33232;
  --allowed: #5CAF83;
  /* ⛔ RE-DECLARED HERE, NOT INHERITED. See the note above: these resolve against the ink of the
     element that declares them, and :root's ink is the wrong one inside the band. */
  --hairline: color-mix(in srgb, var(--ink) 20%, transparent);
  --quiet: color-mix(in srgb, var(--ink) 62%, transparent);
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  margin: 32px 0 var(--section) 0;
  padding: 56px 0;
}
.band-inner {
  max-width: 1100px;
  padding-left: var(--rail);
  padding-right: var(--rail);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: start;
}
/* ⚠️ "justify-self: end" IS NOT CENTRING. It is the right edge of a two-column grid, which is where
   the owner put the seal; at 390 the grid collapses to one column and the seal stays on that edge. */
.band-seal { justify-self: end; color: var(--gold); }
.band-seal .seal { display: block; max-width: 100%; height: auto; }
/* ⚠️ AIR BETWEEN THE FIGURE AND THE QUESTION. With margin 0 the question's cap-height sat 10px under
   the figure's query link and the two read as one block — measured in the second screenshot pass. */
.band h1 { margin: 40px 0 0 0; }
.band .band-head > h1:first-child { margin-top: 0; }
.band .band-line {
  font-family: var(--serif);
  font-size: 21px;
  max-width: 54ch;
  margin: 24px 0 0 0;
}
.band .creed, .band .creed-sub { margin-top: 8px; }
.band .hero-creed { margin-top: 28px; }

/* The headline figure: the band's whole reason to be 56px tall at the top and 56px at the bottom. */
/* ⛔ THE FOUR LINES ARE STILL THERE AT 220px. The owner asked for the caption and the denominator;
   a figure renders with all four or it does not render, so the caption and the denominator are the
   two that are given size, and the interval, the date and the query sit under them in the small
   face. A 220px number with no link to its query would be the exact advertisement this site is the
   argument against. */
.figure.headline .label { font-size: 28px; font-family: var(--serif); color: var(--ink); }
.figure.headline .value {
  font-family: var(--mono);
  font-size: 220px;
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 10px 0 14px 0;
}
.figure.headline dl { font-size: 13px; }
/* ⚠️ THE DENOMINATOR STARTS AT THE RAIL. The label column is 72px wide so four short words line up
   under each other on a normal figure; under a 220px number that same column pushed the one line
   the owner asked for a quarter of the way across the band — visible in the first screenshot pass,
   invisible in the markup. The labels keep their column; it is narrower here. */
.figure.headline dt { min-width: 52px; }
.figure.headline dl div:first-child { font-size: 17px; }
.figure.headline dl div:first-child dd { font-size: 17px; line-height: 1.5; color: var(--ink); }
@media (max-width: 1100px) { .figure.headline .value { font-size: 148px; } }
@media (max-width: 860px) {
  .band { padding: 36px 0; }
  .band-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* ⚠️ The seal is drawn smaller on a phone rather than dropped. It is the band's device; a header
     that loses its device at 390 is two designs. */
  .band-seal .seal { width: 132px; }
  .figure.headline .value { font-size: 88px; }
  .figure.headline .label { font-size: 20px; }
  .figure.headline dl div:first-child dd { font-size: 15px; }
}

/* The numbers page carries three of them side by side rather than one at full height. */
.band .figures { gap: 32px; }
.band .figure.large .value { font-size: 64px; line-height: 1.02; }
.band .figure.large .label { font-family: var(--sans); font-size: 13px; }
@media (max-width: 860px) { .band .figure.large .value { font-size: 44px; } }

/* ── the mark's own lines ──────────────────────────────────────────────────────────────────── */
.creed { font-family: var(--serif); font-size: 21px; margin: 0; }
.creed-sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--quiet);
  margin: 8px 0 0 0;
}

/* ── the figure ────────────────────────────────────────────────────────────────────────────── */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 860px) { .figures { grid-template-columns: 1fr; } }

.figure .label { font-family: var(--sans); font-size: 13px; color: var(--quiet); }
.figure .value {
  font-family: var(--mono);
  font-size: 40px;
  line-height: 1.1;
  margin: 10px 0 12px 0;
  word-break: break-word;
}
.figure .value .unit { font-size: 16px; color: var(--quiet); }
.figure .value .unmeasured { font-size: 22px; letter-spacing: 0.08em; }
/* ⛔ THE FOUR LINES. A figure with three of them does not render — see components.ts. */
.figure dl { margin: 0; font-size: 12px; line-height: 1.7; color: var(--quiet); }
.figure dl div { display: flex; gap: 8px; align-items: baseline; }
.figure dt { font-family: var(--sans); min-width: 72px; flex: none; }
/* At 390 the four lines are the narrowest thing on the page; the label column gives back its width
   rather than squeezing a denominator into six characters a line. */
@media (max-width: 860px) { .figure dt { min-width: 60px; } }
/* The denominator carries check names and counts and is the longest line on the page at 390.
   It wraps inside the figure; nothing here is ever cut off at the right edge. */
.figure dd { font-family: var(--mono); margin: 0; font-size: 11px; line-height: 1.75; min-width: 0; overflow-wrap: anywhere; }

/* The bench's verdict, printed the way the mirror's own batch line prints it. */
.benchline { font-family: var(--mono); font-size: 13px; }
.benchline code { font-size: inherit; }

/* ── the verdict ───────────────────────────────────────────────────────────────────────────── */
.verdict {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  border: 1px solid var(--hairline);
  padding: 3px 9px;
  display: inline-block;
}
/* ⛔ THE ONLY TWO PLACES A COLOUR THAT IS NOT INK APPEARS ON THIS SITE. */
.verdict.allowed { color: var(--allowed); border-color: color-mix(in srgb, var(--allowed) 45%, transparent); }
.verdict.refused { color: var(--refused); border-color: color-mix(in srgb, var(--refused) 45%, transparent); }

/* ⛔ A FIGURE MAY TAKE A VERDICT COLOUR, AND ONLY WHEN THE NUMBER IS THAT VERDICT. "Refused before
   landing" is a count of refusals and is oxblood; "errors hidden silently" counts what a rule says
   got through and is oxblood; the model bill is what the gate cost and is green. A figure whose
   number is not a verdict stays ink — the specimen sheet's three are ink for that reason. */
.figure.refused .value { color: var(--refused); }
.figure.allowed .value { color: var(--allowed); }

/* ── the bars ──────────────────────────────────────────────────────────────────────────────── */
/* ⛔ A BAR IS A TABLE THAT KEPT ITS CAPTION. The model table is the one set of rows a reader compares
   rather than reads, so it is drawn — but the caption stays above it, carrying the date and the
   caveat, because "declared by trailer, not verified" is the whole meaning of these lengths.

   ⚠️ THE TRACK IS THE COMMITS AND THE FILL IS THE REFUSALS, so the oxblood is never a count of
   something that is not a refusal. A bar whose length meant "commits" in oxblood would be the
   verdict colour describing work, which is the rule this file keeps. */
.bars { display: grid; gap: 14px; }
.bars .bar { display: grid; grid-template-columns: minmax(0, 14ch) minmax(0, 1fr) minmax(0, max-content); gap: 16px; align-items: center; }
.bars .bar .name { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
/* ⛔ "display: block" ON BOTH, AND IT IS NOT TIDINESS. MEASURED in the first screenshot pass: a span
   is inline, an inline box takes no height and a percentage width inside one resolves against
   nothing — so every bar rendered as an empty outline and the whole chart said zero. The markup is
   spans because a bar is not a list and not a table; the layout has to be made block by hand. */
.bars .bar .track { display: block; border: 1px solid var(--hairline); height: 22px; min-width: 0; }
.bars .bar .fill { display: block; background: var(--refused); height: 100%; }
.bars .bar .n { font-family: var(--mono); font-size: 12px; color: var(--quiet); white-space: nowrap; }
@media (max-width: 640px) {
  .bars .bar { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bars .bar .n { white-space: normal; }
}

/* ── the table ─────────────────────────────────────────────────────────────────────────────── */
.table-caption { font-family: var(--sans); font-size: 12px; color: var(--quiet); margin-bottom: 10px; max-width: 68ch; }
/* ⛔ A TABLE SCROLLS, IT NEVER WRAPS. A wrapped cell changes a row's height and a column of numbers
   stops being one thing; the horizontal scroll is the honest answer on a 390px screen. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
th, td { white-space: nowrap; padding: 7px 18px 7px 0; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
th { font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: 0.06em; color: var(--quiet); }
td { font-family: var(--mono); }
td.n, th.n { text-align: right; padding-right: 28px; }
td.s { font-family: var(--serif); white-space: normal; max-width: 42ch; }

/* ── the receipt ───────────────────────────────────────────────────────────────────────────── */
.receipt { border: 1px solid var(--hairline); padding: 18px 20px; margin-bottom: 18px; }
.receipt .what { font-family: var(--sans); font-size: 13px; color: var(--quiet); margin-bottom: 12px; }
/* ⛔⛔ A RECEIPT WRAPS. IT NEVER SCROLLS AND IT NEVER CLIPS.
   "white-space: pre" in a scroller put a hash and a blast phrase off the right edge at 390, where
   the only sign that anything had been cut was a scrollbar the phone does not draw. A row is a
   two-column grid — key, value — and the value wraps under itself at any width. "anywhere" rather
   than "break-word" because the longest strings here are hashes, which have no break opportunities
   at all and would otherwise push the column open. A table may scroll; a receipt is evidence. */
.receipt .row { font-family: var(--mono); font-size: 12.5px; line-height: 1.8; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 2px 16px; }
.receipt .row .k { color: var(--quiet); white-space: nowrap; }
.receipt .row .v { overflow-wrap: anywhere; min-width: 0; }
.receipt .hash { font-family: var(--mono); font-size: 11px; color: var(--quiet); margin-top: 12px; overflow-wrap: anywhere; }
.receipt .verify { font-family: var(--sans); font-size: 11px; margin-top: 8px; }
/* One reader-language line. Not a footnote about how the page was built. */
.receipt .note { font-family: var(--serif); font-size: 13px; color: var(--quiet); margin-top: 12px; max-width: 68ch; }

/* ── the install line ──────────────────────────────────────────────────────────────────────── */
.install { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.install code { font-size: 24px; border: 1px solid var(--hairline); padding: 12px 18px; display: inline-block; }
.install .copy { font-family: var(--sans); font-size: 11px; color: var(--quiet); }
@media (max-width: 640px) { .install code { font-size: 17px; } }

/* ── a query, printed as the constant the build handed to the driver ───────────────────────── */
/* ⛔ IT WRAPS. The first version scrolled, on the argument that a wrapped SQL line reads as a
   different line — and MEASURED at 390 by site/test/overflow.test.ts, that argument cost the page
   its purpose: nine query blocks ran past the right edge and took the whole document 212px wider
   than the viewport with them. A query a reader cannot finish reading is not a published query.
   "pre-wrap" keeps the newlines and the indentation the constant actually has; "anywhere" is for the
   one long unbroken string a query can contain. */
pre.query {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  border-left: 1px solid var(--hairline);
  padding: 2px 0 2px 16px;
  margin: 0 0 24px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
pre.query code { font-size: inherit; }

/* ── the specimen sheet ────────────────────────────────────────────────────────────────────── */
.specimen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; }
.specimen .cell { border: 1px solid var(--hairline); padding: 16px; }
.specimen .cell .name { font-family: var(--sans); font-size: 11px; color: var(--quiet); margin-top: 10px; }
.swatch { height: 56px; border: 1px solid var(--hairline); }
.marks { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }

/* ── the poster frame ──────────────────────────────────────────────────────────────────────── */
/* ⚠️ NO FIXED ASPECT RATIO ANY MORE. The frame holds a transcript now, and a fixed ratio either cropped
   it at 390 or left a third of the box empty at 1440. The frame is as tall as what is in it. */
.poster { border: 1px solid var(--hairline); max-width: 760px; padding: 22px 24px; }
.poster .frame { font-family: var(--mono); font-size: 12.5px; line-height: 1.9; overflow-wrap: anywhere; }
.poster .frame .l { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.poster .frame .t { min-width: 0; overflow-wrap: anywhere; }
.poster .frame .spacer { height: 10px; }

/* ── the badge ─────────────────────────────────────────────────────────────────────────────── */
.badge { border: 1px solid var(--hairline); display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; }
.badge .text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; }

/* ── the footer ────────────────────────────────────────────────────────────────────────────── */
footer.record-foot { border-top: 1px solid var(--hairline); padding-top: 28px; padding-bottom: 72px; font-size: 12px; color: var(--quiet); }
footer.record-foot .line { font-family: var(--sans); margin-bottom: 6px; }
footer.record-foot .mono { font-size: 11px; word-break: break-all; }

.unmeasured { font-family: var(--mono); letter-spacing: 0.06em; }

/* ── print ─────────────────────────────────────────────────────────────────────────────────── */
/* ⚠️ THE PRINTED PAGE IS THE LIGHT PAGE. A printer given the dark tokens lays down a full page of
   ink for the background and the reader gets a grey rectangle with the numbers in it. */
@media print {
  :root { --paper: #FAF9F6; --ink: #141414; --rail: 0px; }
  body { font-size: 11pt; }
  section + section { break-inside: avoid; }
  .figure, .receipt, table { break-inside: avoid; }
  .poster { display: none; }
  /* ⚠️ THE BAND PRINTS AS PAPER. A printer given a full-width ink slab returns a black rectangle with
     the headline knocked out of it and an empty cartridge; the gold rules survive, because they are
     what says where the band was. */
  .band { --ink: #141414; --paper: #FAF9F6; padding: 24px 0; margin-bottom: 32px; }
  .figure.headline .value { font-size: 64pt; }
  /* A link's destination is on the paper or it is gone. */
  main a[href^="/"]::after { content: " (" attr(href) ")"; font-family: var(--mono); font-size: 9pt; }
}