@font-face {
  font-family: "ST H1 Playfair";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/st-h1-playfair-regular.woff2") format("woff2");
}

@font-face {
  font-family: "ST H1 Playfair";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/st-h1-playfair-medium.woff2") format("woff2");
}

@font-face {
  font-family: "ST H1 Playfair";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/st-h1-playfair-italic.woff2") format("woff2");
}

@font-face {
  font-family: "ST H1 Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/st-h1-plex-mono-regular.woff2") format("woff2");
}

@font-face {
  font-family: "ST H1 Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/st-h1-plex-mono-medium.woff2") format("woff2");
}

html.dt-page {
  /* The approved light palette, unchanged. The page colour defers to the shared surface role so the
     benchmark and the dated record stand on literally the same paper rather than on two creams
     three units apart; everything else here is this surface's own. */
  --st-h1-paper: var(--theme-surface-page);
  --st-h1-ink: #16150f;
  --st-h1-ink-secondary: #55524a;
  --st-h1-ink-muted: #8a867b;
  --st-h1-rule: #d7d1c2;
  --st-h1-rule-strong: #b9b2a0;
  /* The 2px section rule. On paper a rule at full ink strength is simply a rule, so in light this
     is the ink; see the dark mapping for why it cannot be the ink there. */
  --st-h1-rule-emphatic: var(--st-h1-ink);
  --st-h1-accent: #b14724;
  --st-h1-accent-wash: rgba(177, 71, 36, 0.055);
  /* The link is the site's, not this surface's. It used to be a private #35479b, which put the
     homepage on one blue and every other route on --theme-ink-link, so the colour of "a link"
     changed on the first click a reader made. The alias is kept so the many .st-h1-* rules below
     keep one name to read, but the value now has a single owner in tokens.css. */
  --st-h1-link: var(--theme-ink-link);
  /* Source comparison series. Restraint is the constraint: four sources on one frame is where a
     record starts looking like a dashboard, so these are the surface's own ink and three colours
     already published on it rather than a new categorical ramp. Stable Tape keeps the ink and the
     heaviest stroke, so the published measurement stays the thing the eye lands on first. */
  --st-h1-source-1: var(--st-h1-ink);
  --st-h1-source-2: #35479b;
  --st-h1-source-3: #6b7f4e;
  --st-h1-source-4: #9a6a3c;
  --st-h1-serif: "ST H1 Playfair", var(--serif-display);
  --st-h1-mono: "ST H1 Plex Mono", var(--mono);
}

/*
 * DARK IS COMPOSED FROM THE SITE'S OWN ROLES, NOT FROM A SECOND PRIVATE PALETTE.
 *
 * What it replaces, and why each value moved:
 *
 *   PAPER. #14130f was a warm near-black, while every other route's dark page is the cool
 *   --palette-night-800. The homepage's own lower bands are painted by the body rather than by this
 *   variable, so the two grounds met halfway down the page and the seam was visible; crossing into
 *   Daily Tape changed the paper again. One ground now.
 *
 *   INK. Secondary was #a6a093 and muted #75705f, both dimmer than the site's dark ink roles. The
 *   connective mono labels — "OF USD STABLECOINS", "OF US M2", "OBSERVED 12:00 UTC" — are set in
 *   those two inks, and they are what binds $1, "for every", $75 and the exact reading into one
 *   statement. On paper they hold; against a near-black ground, dimmed a further step below the
 *   site's own, they stopped holding and the reading broke into islands.
 *
 *   RULES. --st-h1-rule was warm on a now-cool ground. More importantly the 2px section rule was
 *   drawn in --st-h1-ink: on cream that is a printed rule, but reversed out on near-black it was the
 *   single brightest object on the page, brighter than the headline. That one bar is most of why
 *   the surface read as an instrument panel. It now takes --st-h1-rule-emphatic, which is a firm
 *   rule in both themes and a light source in neither.
 *
 *   ACCENT. #e5764b is a hot orange, and it marks the current-record dot and the withdrawn and
 *   no-fixing dates in the status register — which is what made that register read as a row of
 *   status lamps rather than as publication state. It becomes the same oxide the dated record uses
 *   for frozen-object identity, so the mark means the same thing and looks the same on both routes.
 *
 * LINK. This was the last private value left. The surface kept its own calmer #93a4ea on the ground
 * that a quieter blue read better here, but the consequence was that a link changed colour when a
 * reader crossed from the benchmark into the dated record, in dark exactly as in light. One blue is
 * worth more than a slightly better one, so this now inherits --theme-ink-link with the rest.
 */
html.dt-page[data-theme="dark"] {
  --st-h1-paper: var(--theme-surface-page);
  --st-h1-ink: var(--theme-ink-primary);
  --st-h1-ink-secondary: var(--theme-ink-secondary);
  --st-h1-ink-muted: var(--theme-ink-muted);
  --st-h1-rule: var(--theme-rule-standard);
  --st-h1-rule-strong: var(--theme-rule-interactive);
  --st-h1-rule-emphatic: var(--theme-ink-muted);
  --st-h1-accent: var(--theme-object-identity-ink);
  --st-h1-accent-wash: rgba(200, 120, 104, 0.075);
  --st-h1-link: var(--theme-ink-link);
  /* Lifted for the dark ground, not merely reused. The light values are printing inks chosen against
     cream; at these luminances on near-black they close up into one another and the series stop
     being separable, which is the only job the colour has here. */
  --st-h1-source-1: var(--st-h1-ink);
  --st-h1-source-2: #93a4ea;
  --st-h1-source-3: #a8bd83;
  --st-h1-source-4: #d0a173;
}

html.dt-page .page { padding-top: var(--layout-nav-h); }

/*
 * WHAT USED TO STAND HERE. First a private copy of the whole navigation bar: max-width 1440, 56px
 * gutters, a 64px bar, an 11px brand gap, a 17.93x26 mark, a 15px wordmark and 12.5px/0.13em
 * destinations. Every one of those values was correct and none of them was shared, so the bar was
 * 64px tall at 56px on the homepage and 48px tall at 88px on every other route, and the mark and
 * wordmark changed size on the crossing. Those figures moved to css/nav.css and css/tokens.css.
 *
 * What survived that pass was a smaller private treatment of the same bar: its ground and hairline
 * painted from --st-h1-paper / --st-h1-rule, its destinations painted from --st-h1-ink-secondary in
 * --st-h1-mono, and the dropdown caret hidden. --st-h1-paper is an alias for --theme-surface-page,
 * so the ground was already shared; the rest was not. The measured result was a bar whose links
 * were 12.0px warm #55524A here and 12.5px cool #3B424C on all thirteen other routes, with the
 * Structure caret present everywhere except the landing page. The bar is now nav.css alone. The
 * homepage's own paper and ink still come from the --st-h1-* palette; the chrome above them does
 * not.
 */

/*
 * The nav wordmark is suppressed on the homepage alone, by owner ruling.
 *
 * This page carries the serif publisher nameplate in its masthead, 90px below the bar and on the
 * same left edge, so the bar's own "Stable Tape" made the publication name appear twice at
 * nameplate rank within one screen. The newspaper convention is one nameplate, and here it is the
 * masthead's. Internal routes have no masthead publisher line, so they keep the bar's wordmark and
 * this rule does not reach them.
 *
 * Clipped, not removed. `display: none` would take the word out of the document; this keeps it in
 * the DOM and in the accessibility tree, and the anchor's own aria-label ("Stable Tape home") still
 * supplies the link's accessible name either way. The mark stays visible and the whole anchor stays
 * the home link with its 44px target intact.
 *
 * The computed font-size is deliberately left at 15px rather than zeroed: the shared contrast gate
 * reads .nav-brand span's font size to check that record metadata stays subordinate to the brand,
 * and zeroing it would make that comparison meaningless rather than merely hide a word. The private
 * colour and family that used to sit on this rule are gone with the rest of the bar treatment; a
 * clipped word takes its size from nav.css like every other route's visible one.
 */
html.dt-page .nav-brand span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * The publication canvas. Stated through the shared layout roles rather than as 1440/56, because
 * those two numbers are now the site's measure and gutter and every other route resolves the same
 * pair. At 1440 and at 1280 this renders exactly as it did when the numbers were written here.
 */
.st-h1 {
  width: min(100%, var(--layout-box-page));
  margin-inline: auto;
  padding: 42px var(--layout-gutter) 65px;
  background: var(--st-h1-paper);
  color: var(--st-h1-ink);
}

/*
 * The masthead establishes the publisher once and then gets out of the way.
 *
 * Stable Tape is the publication; Onchain Dollar Share is its benchmark. That hierarchy is carried
 * by scale and rank, not by decoration: the publisher name is set well below h1 size and the
 * descriptor is mono at caption scale, so the eye still lands on the benchmark title beneath. The
 * descriptor is deliberately not an h1 and must not grow into one.
 */
.st-h1-masthead {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--st-h1-rule-strong);
}

.st-h1-masthead-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

/*
 * The public-beta phase banner.
 *
 * A slim rule-bounded strip, not a card and not a callout. It carries no fill, no icon and no warning
 * colour, because every one of those reads as "something is wrong here" rather than "this is the
 * stage this service is at". The badge is mono and small, the sentence is set in the body face at
 * reading size, and the whole strip is quieter than the masthead above it and the benchmark below.
 */
.st-h1-phase {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 0 11px;
  border-bottom: 1px solid var(--st-h1-rule);
}

.st-h1-phase-badge {
  margin: 0;
  padding: 3px 7px 2px;
  border: 1px solid var(--st-h1-rule-strong);
  color: var(--st-h1-ink-secondary);
  font-family: var(--st-h1-mono);
  font-size: 0.58rem;
  letter-spacing: 0.17em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.st-h1-phase-note {
  flex: 1 1 34ch;
  margin: 0;
  color: var(--st-h1-ink-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
}

.st-h1-phase-link {
  color: var(--st-h1-accent);
  font-family: var(--st-h1-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-decoration: none;
  white-space: nowrap;
}

.st-h1-phase-link:hover,
.st-h1-phase-link:focus-visible { text-decoration: underline; }

.st-h1-publisher {
  margin: 0;
  color: var(--st-h1-ink);
  font-family: var(--st-h1-serif);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.1;
}

.st-h1-publisher-descriptor {
  margin: 0;
  color: var(--st-h1-ink-secondary);
  font-family: var(--st-h1-mono);
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  line-height: 1.4;
  text-align: right;
  text-transform: uppercase;
}

.st-h1-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding-top: 25px;
  padding-bottom: 25px;
}

.st-h1-eyebrow,
.st-h1-run,
.st-h1-selected,
.st-h1-canonical,
.st-h1-fixing-unit,
.st-h1-exact,
.st-h1-arithmetic,
.st-h1-affordance,
.st-h1-figure figcaption a {
  font-family: var(--st-h1-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

.st-h1-eyebrow {
  margin: 0 0 14px;
  color: var(--st-h1-ink-secondary);
  font-size: 0.78rem;
  letter-spacing: 0.19em;
  line-height: 1.4;
}

.st-h1 h1 {
  max-width: none;
  margin: 0;
  color: var(--st-h1-ink);
  font-family: var(--st-h1-serif);
  font-size: clamp(4.25rem, 6vw, 5.375rem);
  font-weight: 400;
  letter-spacing: -0.021em;
  line-height: 0.95;
}

.st-h1-subtitle {
  max-width: 36rem;
  margin: 15px 0 0;
  color: var(--st-h1-ink-secondary);
  font-size: 1.22rem;
  line-height: 1.35;
}

.st-h1-run {
  flex: none;
  padding-top: 13px;
  color: var(--st-h1-ink-secondary);
  font-size: 0.78rem;
  letter-spacing: 0.055em;
  line-height: 1.85;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.st-h1-run strong,
.st-h1-run span {
  display: block;
}

.st-h1-run strong {
  color: var(--st-h1-ink);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.st-h1-run i { font-style: normal; }

.st-h1-rule {
  height: 2px;
  background: var(--st-h1-rule-emphatic);
}

.st-h1-fix-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 15px;
}

.st-h1-selected {
  margin: 0;
  color: var(--st-h1-accent);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  line-height: 1.45;
}

.st-h1-selected i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--st-h1-accent);
  vertical-align: 1px;
}

.st-h1-canonical {
  margin: 0;
  padding: 4px 10px 3px;
  border: 1px solid var(--st-h1-accent);
  color: var(--st-h1-accent);
  font-size: 0.72rem;
  letter-spacing: 0.19em;
  line-height: 1.35;
}

.st-h1-fix-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 2px 0 18px;
}

.st-h1-fixing {
  display: flex;
  align-items: baseline;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}

.st-h1-fixing-prefix {
  display: flex;
  align-items: baseline;
  font-family: var(--st-h1-serif);
}

.st-h1-fixing-prefix small {
  margin-left: 10px;
  color: var(--st-h1-ink-secondary);
  font-family: var(--st-h1-mono);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.15em;
  line-height: 1;
}

.st-h1-fixing-prefix > span {
  font-size: 3.625rem;
  line-height: 1;
}

.st-h1-fixing-prefix em {
  margin: 0 26px 0 14px;
  font-size: 2.18rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}

.st-h1-fixing strong {
  color: var(--st-h1-ink);
  font-family: var(--st-h1-serif);
  font-size: clamp(7.25rem, 9.9vw, 8.875rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 0.86;
}

/* An unavailable component is a state label, not a numeric fixing. Keep it
   legible in the same slot without giving the word the scale of a reciprocal. */
.st-h1-fixing.st-h1-fixing--unavailable {
  align-items: center;
  white-space: normal;
}

.st-h1-fixing.st-h1-fixing--unavailable strong {
  font-family: var(--st-h1-mono);
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.st-h1-fixing-unit {
  margin-left: 18px;
  color: var(--st-h1-ink-secondary);
  font-size: 0.84rem;
  letter-spacing: 0.185em;
  line-height: 1;
  transform: translateY(-6px);
}

.st-h1-exact {
  flex: none;
  margin: 0;
  padding-bottom: 8px;
  text-align: right;
}

.st-h1-exact data,
.st-h1-exact span { display: block; }

.st-h1-exact data {
  color: var(--st-h1-ink);
  font-size: 3.125rem;
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1;
}

.st-h1-exact span {
  margin-top: 11px;
  color: var(--st-h1-ink-secondary);
  font-size: 0.72rem;
  letter-spacing: 0.155em;
  line-height: 1.35;
}

.st-h1-arithmetic {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  padding: 12px 0 14px;
  border-top: 1px solid var(--st-h1-rule);
  color: var(--st-h1-ink-secondary);
  font-size: 0.84rem;
  line-height: 1.5;
}

.st-h1-arithmetic p { margin: 0; }

.st-h1-arithmetic :is(data, strong) {
  color: var(--st-h1-ink);
  font-weight: 500;
}

.st-h1-sources {
  display: flex;
  flex: none;
  gap: 30px;
  color: var(--st-h1-ink-secondary);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.st-h1-sources b {
  color: inherit;
  font-weight: 400;
}

.st-h1-figure { margin: 16px 0 0; }

.st-h1-chart {
  display: block;
  width: 100%;
  overflow: visible;
  touch-action: manipulation;
}

.st-h1-chart:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 4px;
}

.st-h1-chart-hit {
  cursor: crosshair;
  fill: transparent;
  pointer-events: all;
}

/*
 * The record promise. This is the publication's central claim about what a dated point is, and it
 * used to be set at chart-caption scale where it read as metadata about the axis. It now carries a
 * serif lead at editorial rank, sitting between the status register and the chart it describes.
 *
 * Both sentences are load-bearing and neither works alone. The first says the point is what was
 * published on the day. The second says corrections and withdrawals are added rather than
 * overwritten, which is what stops the first from sounding like a refusal to fix mistakes.
 */
.st-h1-record-promise {
  padding: 30px 0 26px;
}

.st-h1-record-promise-lead {
  max-width: 34ch;
  margin: 0;
  color: var(--st-h1-ink);
  font-family: var(--st-h1-serif);
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  font-weight: 400;
  letter-spacing: -0.014em;
  line-height: 1.15;
}

.st-h1-record-promise-body {
  /* One line on desktop, as the approved plate sets it: the sentence is a single clause and
     breaking it after "not written" strands the verb from its object. */
  max-width: 76ch;
  margin: 13px 0 0;
  color: var(--st-h1-ink-secondary);
  font-size: 1.02rem;
  line-height: 1.45;
}

/*
 * Provenance, beside the reading rather than at the foot of the page. The record identifier is a
 * short public handle; the full 64-character digest stays on the dated record, where verification
 * actually happens. A homepage wearing a full hash looks technical without being more checkable.
 */
.st-h1-provenance {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0;
  padding: 15px 0;
  border-top: 1px solid var(--st-h1-rule);
  font-family: var(--st-h1-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.st-h1-provenance-id {
  color: var(--st-h1-ink);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.st-h1-provenance code {
  color: var(--st-h1-ink-secondary);
  font-family: inherit;
  font-size: inherit;
}

.st-h1-provenance a,
.st-h1-provenance button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--st-h1-link);
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

.st-h1-provenance-status {
  color: var(--st-h1-ink-secondary);
}

/*
 * The publication status register.
 *
 * Its job today is truthful publication state, and its restraint is the point: this is the location
 * a scarce Signal will eventually occupy, and it only stays scarce if nothing shouts here first.
 * Rows are quiet mono labels against plain values, and the withdrawn row is the only one carrying
 * accent colour, because a withdrawal is the one state a reader must not mistake for current.
 */
/*
 * The register is a different kind of statement from the reading above it, and it now looks like
 * one. Two changes, no new elements:
 *
 * SPACE. It used to open 15px below the provenance line, the same step the fixing pays between its
 * own parts, so the reading, its arithmetic, its record identifier and the publication state read
 * as one continuous ledger of five ruled bands. A full editorial step above it makes the reading a
 * block and the register the block after it.
 *
 * RULE WEIGHT. Its two rules step up while the fixing's interior rules stay where they are. Seven
 * full-canvas hairlines at one weight is a grid, and a grid is what made the surface read as an
 * instrument panel; the same seven rules with a boundary among them read as a page.
 */
.st-h1-status {
  display: grid;
  grid-template-columns: var(--layout-sidehead) 1fr;
  gap: 0 24px;
  margin-top: 20px;
  padding: 18px 0 20px;
  border-top: 1px solid var(--st-h1-rule-strong);
  border-bottom: 1px solid var(--st-h1-rule-strong);
}

.st-h1-status-title {
  margin: 0;
  padding-top: 5px;
  color: var(--st-h1-ink-secondary);
  font-family: var(--st-h1-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.17em;
  line-height: 1.5;
  text-transform: uppercase;
}

.st-h1-status-rows {
  margin: 0;
}

.st-h1-status-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 5px 0;
}

.st-h1-status-row dt {
  flex: 0 0 11rem;
  color: var(--st-h1-ink-secondary);
  font-family: var(--st-h1-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  line-height: 1.5;
  text-transform: uppercase;
}

.st-h1-status-row dd {
  margin: 0;
  color: var(--st-h1-ink);
  font-size: 1.02rem;
  line-height: 1.5;
}

.st-h1-status-row dd span {
  color: var(--st-h1-ink-secondary);
}

.st-h1-status-row dd time {
  font-weight: 500;
}

.st-h1-status-row[data-st-h1-status="withdrawn"] dd time {
  color: var(--st-h1-accent);
}

.st-h1-status-row[data-st-h1-status="no-fixing"] dd time {
  color: var(--st-h1-accent);
}

.st-h1-status-row dd a {
  color: var(--st-h1-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/*
 * The row's link pair.
 *
 * inline-flex with nowrap keeps the two destinations on one line and moves them together when the
 * sentence before them runs long, instead of letting the second link orphan onto a line of its own.
 * The group itself still wraps as a unit, so nothing overflows at narrow widths.
 */
.st-h1-status-links {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/*
 * A middot between the two, drawn rather than emitted so it stays out of both accessible names and
 * so a row carrying a single link needs no special case. The first link opens the edition and the
 * second explains it: the separator is what stops them reading as one run of blue.
 */
.st-h1-status-links a + a::before {
  content: "\00B7";
  display: inline-block;
  padding: 0 8px;
  color: var(--st-h1-ink-muted);
  text-decoration: none;
}

/*
 * The explanatory link is subordinate to the edition it explains, so it is set in secondary ink
 * while staying unmistakeably a link. Secondary rather than muted: muted ink at this size does not
 * clear the contrast gate, and a link a reader cannot read is not a quieter link, it is a broken one.
 */
.st-h1-status-links a + a {
  color: var(--st-h1-ink-secondary);
}

.st-h1-status-links a + a:hover,
.st-h1-status-links a + a:focus-visible {
  color: var(--st-h1-link);
}

/*
 * At desktop widths the row becomes date · sentence · links, with the links held in a right-hand
 * column rather than trailing the prose.
 *
 * Measured rather than guessed: at 1440 the withdrawn row's sentence ends 644px into an 862px
 * column and its two links need 218px, so they cannot share a line however they are grouped. Left
 * inline they therefore dropped whole onto the line beneath, reading as an orphan.
 *
 * Making them a flex item pushed right turns that into a deliberate column: the links sit on the
 * row's first baseline, aligned with each other down the register, and the sentence keeps a sane
 * measure by flexing rather than by running the full width. Below 768px the row stacks label over
 * value and this does not apply, so the mobile treatment is unchanged.
 */
@media (min-width: 768px) {
  .st-h1-status-row dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
  }

  .st-h1-status-row dd > time { flex: 0 0 auto; }

  /* Flexes into the space left over, with a floor so it never collapses to a sliver. */
  .st-h1-status-row dd > span:not(.st-h1-status-links) { flex: 1 1 18rem; }

  /*
   * Held right, and level with the end of the sentence rather than its start.
   *
   * `align-items: baseline` on the row puts every item on the first baseline, which is right for the
   * date — it heads the row — but wrong for the links once the sentence runs to a second line: they
   * sat beside line one with the remainder of the sentence trailing beneath them, so the pair read as
   * belonging to the middle of the row and left an empty step under them. Aligning to the end of the
   * line box puts them where the sentence actually finishes, which is also where a reader looking for
   * somewhere to go next arrives. Single-line rows are unaffected: there the two are the same place.
   */
  .st-h1-status-links {
    flex: 0 0 auto;
    margin-left: auto;
    align-self: flex-end;
  }
}

.st-h1-status-row dd i { font-style: normal; }

.st-h1-status-recent {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 5px 0;
}

.st-h1-status-recent > dt {
  flex: 0 0 11rem;
  color: var(--st-h1-ink-secondary);
  font-family: var(--st-h1-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  line-height: 1.5;
  text-transform: uppercase;
}

.st-h1-status-recent > dd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 14px;
  margin: 0;
  color: var(--st-h1-ink);
  font-size: 1.02rem;
  line-height: 1.5;
}

.st-h1-status-recent-summary {
  color: var(--st-h1-ink);
  font-family: var(--st-h1-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.st-h1-status-details { display: inline-block; }

.st-h1-status-details > summary {
  min-height: 40px;
  padding: 7px 0;
  color: var(--st-h1-link);
  cursor: pointer;
  font-family: var(--st-h1-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.st-h1-status-details > summary::-webkit-details-marker { display: none; }
.st-h1-status-details > summary::marker { content: ""; }
.st-h1-status-details > summary:focus-visible { outline: 2px solid var(--st-h1-link); outline-offset: 3px; }
.st-h1-status-detail-rows { width: 100%; padding-top: 4px; }
.st-h1-status-detail-rows dl { margin: 0; }

/* The homepage status is a short ledger, not a hidden transcript of every determination. */
.st-h1-status-content {
  display: grid;
  grid-template-columns: minmax(15rem, 0.75fr) minmax(18rem, 1.25fr);
  gap: 28px 34px;
}

.st-h1-status-current {
  padding: 2px 0 0 16px;
  border-left: 2px solid var(--st-h1-rule-strong);
}

.st-h1-status-label,
.st-h1-status-ledger h3,
.st-h1-status-meaning h3,
.st-h1-status-next h3 {
  margin: 0;
  color: var(--st-h1-ink-secondary);
  font-family: var(--st-h1-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.st-h1-status-current-date {
  margin: 10px 0 3px;
  color: var(--st-h1-ink);
  font-family: var(--st-h1-serif);
  font-size: 1.45rem;
  line-height: 1.2;
}

.st-h1-status-current-note,
.st-h1-status-next p,
.st-h1-status-meaning p {
  margin: 0;
  color: var(--st-h1-ink-secondary);
  font-size: 0.96rem;
  line-height: 1.6;
}

.st-h1-status-current-note strong {
  display: block;
  color: var(--st-h1-accent);
  font-family: var(--st-h1-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.st-h1-status-current-note span { display: block; margin-top: 4px; }

.st-h1-status-ledger ul {
  margin: 9px 0 0;
  padding: 0;
  border-top: 1px solid var(--st-h1-rule);
  list-style: none;
}

.st-h1-status-ledger-item {
  display: grid;
  grid-template-columns: minmax(7rem, auto) max-content 1fr;
  align-items: baseline;
  gap: 8px 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--st-h1-rule);
}

.st-h1-status-ledger-date {
  color: var(--st-h1-ink);
  font-size: 0.98rem;
  line-height: 1.5;
}

.st-h1-status-ledger-item strong {
  color: var(--st-h1-accent);
  font-family: var(--st-h1-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.st-h1-status-ledger-links {
  display: inline-flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.83rem;
  line-height: 1.5;
  text-align: right;
}

.st-h1-status-ledger-links a {
  color: var(--st-h1-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.st-h1-status-ledger-links a:focus-visible {
  outline: 2px solid var(--st-h1-link);
  outline-offset: 3px;
}

.st-h1-status-ledger-note {
  grid-column: 1 / -1;
  max-width: 58ch;
  color: var(--st-h1-ink-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
}

/*
 * Reliability, built in public.
 *
 * Set as editorial notes, not as a status dashboard. There is no colour coding, no severity, no red:
 * a reader scanning this should come away with "this publication is unusually candid about how it is
 * earning reliability", and colour-coded alarm states would produce the opposite reading from the
 * same facts. The status label is mono and quiet for the same reason -- it is a fact about progress,
 * not an alert.
 */
.st-h1-reliability {
  padding: 22px 0 4px;
  border-top: 1px solid var(--st-h1-rule-strong);
}

.st-h1-reliability-heading {
  margin: 0;
  color: var(--st-h1-ink-secondary);
  font-family: var(--st-h1-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.17em;
  line-height: 1.5;
  text-transform: uppercase;
}

.st-h1-reliability-intro {
  margin: 9px 0 0;
  max-width: 74ch;
  color: var(--st-h1-ink);
  font-size: 0.95rem;
  line-height: 1.6;
}

.st-h1-reliability-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 28px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.st-h1-reliability-item {
  padding: 14px 0 16px;
  border-top: 1px solid var(--st-h1-rule);
}

.st-h1-reliability-date {
  margin: 0;
  color: var(--st-h1-ink);
  font-family: var(--st-h1-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.st-h1-reliability-date--principle { color: var(--st-h1-ink-secondary); }

.st-h1-reliability-title {
  margin: 7px 0 0;
  color: var(--st-h1-ink);
  font-family: var(--st-h1-serif);
  font-size: 1.06rem;
  line-height: 1.25;
}

.st-h1-reliability-body {
  margin: 7px 0 0;
  color: var(--st-h1-ink-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
}

.st-h1-reliability-status {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 11px 0 0;
}

.st-h1-reliability-status span {
  color: var(--st-h1-ink-secondary);
  font-family: var(--st-h1-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.st-h1-reliability-status strong {
  color: var(--st-h1-accent);
  font-family: var(--st-h1-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.09em;
}

.st-h1-reliability-exit {
  margin: 16px 0 0;
  max-width: 74ch;
  color: var(--st-h1-ink-secondary);
  font-size: 0.85rem;
  line-height: 1.55;
}

.st-h1-status-ledger-details {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.st-h1-status-ledger-details > summary {
  min-height: 40px;
  padding: 7px 0;
  color: var(--st-h1-link);
  cursor: pointer;
  font-family: var(--st-h1-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.st-h1-status-ledger-details > summary::-webkit-details-marker { display: none; }
.st-h1-status-ledger-details > summary::marker { content: ""; }
.st-h1-status-ledger-details > summary:focus-visible {
  outline: 2px solid var(--st-h1-link);
  outline-offset: 3px;
}

.st-h1-status-ledger-details > ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--st-h1-rule);
  list-style: none;
}

.st-h1-status-ledger-date-row {
  display: grid;
  grid-template-columns: minmax(7rem, auto) max-content 1fr;
  align-items: baseline;
  gap: 8px 16px;
  padding: 7px 0 7px 16px;
  border-bottom: 1px solid var(--st-h1-rule);
}

.st-h1-status-ledger-date-row time {
  color: var(--st-h1-ink);
  font-size: 0.92rem;
  line-height: 1.5;
}

.st-h1-status-ledger-date-row strong {
  color: var(--st-h1-accent);
  font-family: var(--st-h1-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.st-h1-status-ledger-date-row .st-h1-status-ledger-links {
  justify-content: flex-end;
}

.st-h1-status-meaning,
.st-h1-status-next {
  padding-top: 16px;
  border-top: 1px solid var(--st-h1-rule);
}

.st-h1-status-meaning { grid-column: 1 / -1; max-width: 66ch; }
.st-h1-status-meaning p { margin-top: 8px; }
.st-h1-status-next { grid-column: 1 / -1; }
.st-h1-status-next[hidden] { display: none; }
.st-h1-status-next p { margin-top: 7px; color: var(--st-h1-ink); }
.st-h1-status-next p span { color: var(--st-h1-ink-secondary); }

/* Every cell of the ledger names itself for assistive technology. The visible column headings are
   decorative on this component: the condensed form has none at all and the dated form hides its own
   at phone widths, so a screen reader met a run of bare strings with nothing saying which was the
   reading and which was the timestamp. This label is always in the DOM and never on the screen.

   NOT display:none and NOT visibility:hidden, either of which would remove it from the accessibility
   tree along with the screen. */
.st-ledger-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── THE DEFINITION LEDGER ─────────────────────────────────────────────────────────────────
   Four ruled rows, no graphic, no marks and no colour beyond the surface's own accent wash.

   It replaces an equal-weight two-up block, and the inequality is the point: the governing row is
   set larger and washed, and the three below it are smaller, because they answer different
   questions and only one of them is the measurement this page publishes. Two columns of identical
   weight said the opposite, and then spent a verdict line trying to take it back.

   The figures are deliberately smaller than the block they replace (1.32rem against 2.05rem). This
   section explains the reading above it and must not compete with it, so nothing here approaches
   the size of the ODS figure or the supply figure in the hero.

   Order is not a ranking, and no rule here may be repurposed to imply one: there is no rank column,
   no ordinal, no colour scale across the rows and no cell in which a spread could be printed. */
.st-ledger {
  padding: 28px 0 26px;
  border-top: 1px solid var(--st-h1-rule-strong);
  border-bottom: 1px solid var(--st-h1-rule);
}

.st-ledger-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.st-ledger-heading {
  display: grid;
  gap: 5px;
}

.st-ledger-kicker,
.st-ledger-fixing,
.st-ledger-role,
.st-ledger-attr,
.st-ledger-value,
.st-ledger-preview,
.st-ledger-foot a {
  font-family: var(--st-h1-mono);
}

.st-ledger-kicker {
  margin: 0;
  color: var(--st-h1-accent);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.st-ledger-title {
  max-width: 24ch;
  margin: 0;
  color: var(--st-h1-ink);
  font-family: var(--st-h1-serif);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* Provenance, set small and kept out of the way. The fixing date is a fact this block is filed
   under, not the idea it is organised by. */
.st-ledger-fixing {
  margin: 0 0 2px;
  color: var(--st-h1-ink-secondary);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.st-ledger-intro {
  max-width: 68ch;
  margin: 14px 0 28px;
  color: var(--st-h1-ink-secondary);
  font-size: 0.92rem;
  line-height: 1.65;
}

.st-ledger-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--st-h1-rule-emphatic);
}

.st-ledger-row {
  display: grid;
  grid-template-columns: minmax(9.5rem, 13rem) minmax(0, 1fr) minmax(9.5rem, 14rem) minmax(7rem, 11rem);
  column-gap: 26px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--st-h1-rule);
}

/* The governing row is washed and set larger. It has no leading accent border or inset shadow:
   source role, typography, spacing and the stated face-value / whole-market basis carry hierarchy
   without making the row resemble a selected control. */
.st-ledger-row--governing {
  margin-inline: -14px;
  padding-inline: 14px;
  border-bottom: 1px solid var(--st-h1-rule-strong);
  background: var(--st-h1-accent-wash);
}

.st-ledger-identity { min-width: 0; }

.st-ledger-role {
  margin: 0;
  color: var(--st-h1-ink-secondary);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.st-ledger-row--governing .st-ledger-role { color: var(--st-h1-accent); }

.st-ledger-name {
  margin: 3px 0 0;
  color: var(--st-h1-ink);
  font-family: var(--st-h1-serif);
  font-size: 1.15rem;
  line-height: 1.2;
}

.st-ledger-row--governing .st-ledger-name { font-size: 1.32rem; }

.st-ledger-reads {
  margin: 2px 0 0;
  color: var(--st-h1-ink-secondary);
  font-size: 0.76rem;
  line-height: 1.5;
}

.st-ledger-counts {
  min-width: 0;
  margin: 0;
  color: var(--st-h1-ink-secondary);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* The explanatory column. Mono capitals so the two fields read as properties of the source rather
   than as prose, and so one column can be scanned to see where the split falls. */
.st-ledger-attr {
  min-width: 0;
  margin: 0;
  color: var(--st-h1-ink);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
}

.st-ledger-row--governing .st-ledger-attr { font-weight: 500; }

.st-ledger-attr small {
  display: block;
  margin-top: 4px;
  color: var(--st-h1-ink-secondary);
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.st-ledger-fig {
  min-width: 0;
  text-align: right;
}

.st-ledger-value {
  color: var(--st-h1-ink);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.st-ledger-row--governing .st-ledger-value { font-size: 1.32rem; }

/* An absent figure is written out, in the page's reading face rather than in mono, so it cannot be
   mistaken for a number at a glance or read as a zero. */
.st-ledger-value--absent {
  color: var(--st-h1-ink-secondary);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.st-ledger-when {
  display: block;
  margin-top: 5px;
  color: var(--st-h1-ink-secondary);
  font-family: var(--st-h1-mono);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.st-ledger-preview {
  display: block;
  margin-top: 3px;
  color: var(--st-h1-accent);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.st-ledger-foot {
  display: flex;
  align-items: baseline;
  gap: 32px;
  padding-top: 16px;
}

.st-ledger-foot p {
  max-width: 76ch;
  margin: 0;
  color: var(--st-h1-ink-secondary);
  font-size: 0.76rem;
  line-height: 1.6;
}

.st-ledger-foot a {
  margin-left: auto;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--st-h1-link);
  color: var(--st-h1-link);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

/* At publication widths the governing aggregate becomes the lead reading and the other source
   lenses sit beneath it as equal editorial columns. This breaks the database-row cadence without
   introducing cards, ranking, provider marks or a comparison scale. */
@media (min-width: 981px) {
  .st-ledger--condensed .st-ledger-rows {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .st-ledger--condensed .st-ledger-row--governing {
    grid-column: 1 / -1;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr) minmax(10rem, 14rem) minmax(8rem, 12rem);
    margin-inline: 0;
    padding: 22px 18px 23px;
    border-bottom-color: var(--st-h1-rule-strong);
  }

  .st-ledger--condensed .st-ledger-row:not(.st-ledger-row--governing) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    align-content: start;
    padding: 22px 20px 24px;
    border-bottom: 1px solid var(--st-h1-rule);
  }

  .st-ledger--condensed .st-ledger-row:not(.st-ledger-row--governing):not(:last-child) {
    border-right: 1px solid var(--st-h1-rule);
  }

  .st-ledger--condensed .st-ledger-row:not(.st-ledger-row--governing) .st-ledger-identity {
    grid-column: 1;
    grid-row: 1;
  }

  .st-ledger--condensed .st-ledger-row:not(.st-ledger-row--governing) .st-ledger-name {
    font-size: 1.22rem;
  }

  .st-ledger--condensed .st-ledger-row:not(.st-ledger-row--governing) .st-ledger-fig {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 16px;
    text-align: left;
  }

  .st-ledger--condensed .st-ledger-row:not(.st-ledger-row--governing) .st-ledger-counts {
    grid-column: 1;
    grid-row: 3;
    min-height: 2.55em;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid var(--st-h1-rule);
  }

  .st-ledger--condensed .st-ledger-row:not(.st-ledger-row--governing) .st-ledger-attr {
    grid-column: 1;
    grid-row: 4;
    margin-top: 15px;
  }
}

.st-h1-affordance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 0 15px;
}

.st-h1-picker {
  display: flex;
  align-items: center;
  gap: 4px;
}

.st-h1-picker button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--st-h1-ink-secondary);
  cursor: pointer;
  transition: color 100ms ease-out, transform 100ms ease-out;
}

.st-h1-picker button span {
  font-family: var(--st-h1-serif);
  font-size: 1.7rem;
  line-height: 1;
  transform: translateY(-2px);
}

.st-h1-picker button:hover { color: var(--st-h1-accent); }
.st-h1-picker button:active { transform: translateY(1px); }
.st-h1-picker button:disabled { color: var(--theme-ink-disabled); cursor: default; transform: none; }

.st-h1-picker time {
  min-width: 202px;
  color: var(--st-h1-accent);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

.st-h1-affordance > a,
.st-h1-figure figcaption a {
  color: var(--st-h1-link);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-decoration: none;
  text-underline-offset: 4px;
}

.st-h1-affordance > a:hover,
.st-h1-figure figcaption a:hover { text-decoration: underline; }

.st-h1-figure figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
  padding-top: 15px;
  border-top: 1px solid var(--st-h1-rule);
  color: var(--st-h1-ink-secondary);
  font-size: 0.94rem;
  line-height: 1.5;
}

.st-h1-figure figcaption p { margin: 0; }
.st-h1-figure figcaption a { flex: none; }

.st-h1-ods-unavailable {
  display: grid;
  min-height: 220px;
  place-content: center;
  gap: 10px;
  border-top: 1px solid var(--st-h1-rule-strong);
  border-bottom: 1px solid var(--st-h1-rule-strong);
  text-align: center;
}

.st-h1-ods-unavailable strong {
  font-family: var(--st-h1-serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 500;
}

.st-h1-ods-unavailable span {
  color: var(--st-h1-ink-secondary);
  font-family: var(--st-h1-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .st-h1-title-row { gap: 28px; }
  .st-h1-fix-row { gap: 18px; }
  .st-h1-fixing-prefix > span { font-size: 3rem; }
  .st-h1-fixing-prefix em { margin-right: 16px; font-size: 1.8rem; }
  .st-h1-fixing strong { font-size: 7rem; }
  .st-h1-exact data { font-size: 2.5rem; }
  .st-h1-arithmetic { align-items: flex-start; }
  .st-h1-sources { flex-direction: column; gap: 2px; }
}

@media (max-width: 767px) {
  /* The 54px narrow bar and the 20px narrow gutter are now --layout-nav-h and --layout-gutter, and
     apply to every route. No mark override at this width either: below 768px the nav has already
     crossed over to the square hand-cut small geometry, which css/nav.css sizes at 20px, and
     restating a tall rectangle here would letterbox that square inside it. */

  /*
   * The masthead stacks rather than shrinking. The descriptor is the longest string in the hero and
   * cannot sit beside the publisher name at 390px without either wrapping raggedly against it or
   * being reduced to an unreadable size, so it takes its own line at full measure.
   */
  .st-h1-masthead {
    padding-bottom: 11px;
  }

  .st-h1-masthead-row {
    display: block;
  }

  .st-h1-publisher { font-size: 1.45rem; }

  /*
   * The banner stacks at 390px. Badge, sentence and link side by side would leave the sentence about
   * 14 characters of measure, so the badge takes its own line and the sentence gets the full width.
   */
  .st-h1-phase {
    display: block;
    padding: 9px 0 10px;
  }

  .st-h1-phase-badge {
    display: inline-block;
    margin-bottom: 7px;
  }

  .st-h1-phase-note { font-size: 0.84rem; }

  .st-h1-phase-link {
    display: inline-block;
    margin-top: 7px;
  }

  .st-h1-publisher-descriptor {
    margin-top: 5px;
    font-size: 0.66rem;
    letter-spacing: 0.15em;
    text-align: left;
  }

  /*
   * The reliability notes stack at one column. Three dated notes side by side at 390px would give
   * each about 12 characters of measure, so the grid collapses rather than compressing.
   */
  .st-h1-reliability-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .st-h1-reliability { padding-top: 18px; }

  .st-h1-reliability-intro { font-size: 0.91rem; }

  .st-h1-record-promise { padding: 24px 0 20px; }

  .st-h1-provenance {
    gap: 10px 22px;
    font-size: 0.74rem;
  }

  /*
   * Status rows stack label over value. A 15rem label column beside a value leaves roughly nothing
   * for the withdrawn row's sentence at this width, which is the row that most needs to stay
   * readable.
   */
  .st-h1-status {
    display: block;
    padding: 16px 0 18px;
  }

  .st-h1-status-title {
    margin-bottom: 8px;
    padding-top: 0;
  }

  .st-h1-status-content {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .st-h1-status-current {
    padding-left: 12px;
  }

  .st-h1-status-current-date {
    margin-top: 8px;
    font-size: 1.3rem;
  }

  .st-h1-status-ledger-item {
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: 4px 12px;
  }

  .st-h1-status-ledger-links {
    grid-column: 1 / -1;
    justify-content: flex-start;
    text-align: left;
  }

  .st-h1-status-ledger-date-row {
    grid-template-columns: minmax(7rem, auto) 1fr;
    padding-left: 12px;
  }

  .st-h1-status-ledger-date-row .st-h1-status-ledger-links {
    grid-column: 1 / -1;
  }

  .st-h1-status-row {
    display: block;
    padding: 9px 0;
  }

  .st-h1-status-row dt {
    margin-bottom: 2px;
    font-size: 0.66rem;
  }

  .st-h1-status-row dd { font-size: 0.98rem; }

  .st-h1-status-recent {
    display: block;
    padding: 9px 0;
  }

  .st-h1-status-recent > dt {
    margin-bottom: 2px;
    font-size: 0.66rem;
  }

  .st-h1-status-recent > dd {
    display: block;
    font-size: 0.98rem;
  }

  .st-h1-status-recent-summary {
    display: block;
    font-size: 0.76rem;
    line-height: 1.7;
  }

  .st-h1-status-details { display: block; }

  /* 390px. The four-column row becomes three stacked lines with no new component, no rotation and
     no collision logic: the same markup, placed differently.

     The figure box is promoted with display: contents so its two children can be placed
     independently. The value goes on the first line beside the source name, because that pairing is
     the row's whole reading; the observation stamp goes on the second line beside what the source
     counts, because that pairing is its provenance. Nested, they would have had to travel together
     and the stamp would have squeezed the name column into three-word wraps. */
  .st-ledger-row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
    row-gap: 4px;
    align-items: baseline;
    padding: 15px 0 16px;
  }

  .st-ledger-identity { grid-column: 1; grid-row: 1; }
  .st-ledger-fig { display: contents; }
  .st-ledger-value,
  .st-ledger-preview { grid-column: 2; grid-row: 1; text-align: right; }
  .st-ledger-counts { grid-column: 1 / -1; grid-row: 2; }

  /* The stamp takes a line of its own rather than sharing one with what the source counts. Sharing
     was tried and it is what broke the row: a stamp long enough to say "Last observed 22 Aug 2026,
     12:03 UTC" claims half of a 390px line, and the source name and the counts text were both
     wrapping into three-word columns to pay for it. */
  .st-ledger-when {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 2px;
    text-align: left;
    white-space: normal;
  }

  .st-ledger-attr { grid-column: 1 / -1; grid-row: 4; margin-top: 3px; }

  .st-ledger-name { font-size: 1.1rem; }
  .st-ledger-row--governing .st-ledger-name { font-size: 1.22rem; }
  .st-ledger-value { font-size: 1.06rem; }
  .st-ledger-row--governing .st-ledger-value { font-size: 1.22rem; }

  .st-ledger-row--governing {
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .st-ledger-attr small { margin-top: 3px; }

  .st-ledger-foot {
    display: block;
    padding-top: 14px;
  }

  .st-ledger-foot a {
    display: inline-block;
    margin: 12px 0 0;
  }

  /*
   * The trigger says what it does, and it now looks like every other route's.
   *
   * It first used to hide its own text with font-size: 0 and print "BENCHMARK" from a ::before,
   * which was wrong twice over: the control opens the navigation overlay rather than going to the
   * benchmark, so the visible label contradicted both its behaviour and its accessible name ("Open
   * menu"). That substitution was deleted, but a private treatment of the button stayed behind it:
   * mono, ink, 0.13em and a 2px underline, against the shared sans link-blue label used on all
   * thirteen other routes. On a phone the menu button is most of the visible chrome, so that was
   * the masthead changing between the landing page and everything behind it. The rule is gone and
   * nav.css owns the control.
   */

  .st-h1 {
    padding-top: 28px;
    padding-bottom: 49px;
  }

  .st-h1-title-row {
    display: block;
    padding-top: 18px;
    padding-bottom: 15px;
  }

  .st-h1-eyebrow {
    margin-bottom: 11px;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
  }

  .st-h1 h1 {
    max-width: none;
    font-size: 42px;
    letter-spacing: -0.018em;
    line-height: 0.98;
  }

  .st-h1-subtitle {
    margin-top: 14px;
    font-size: 1.03rem;
    line-height: 1.42;
  }

  .st-h1-run {
    padding-top: 16px;
    font-size: 0.72rem;
    line-height: 1.8;
    text-align: left;
    white-space: normal;
  }

  .st-h1-fix-head {
    align-items: flex-start;
    padding-top: 14px;
  }

  .st-h1-selected {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }

  .st-h1-canonical {
    padding: 3px 8px 2px;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
  }

  .st-h1-fix-row {
    display: block;
    padding: 6px 0 13px;
  }

  /*
   * The 390px hero collision.
   *
   * The prefix row and the large reciprocal were pulled into each other by a negative top margin on
   * a 7rem figure, so "$1 OF USD STABLECOINS for every" overlapped the "$75" beneath it, and the
   * exact percentage sat hard against the same figure with 7px of air and no separation, losing its
   * rank as the subordinate-but-legible reading.
   *
   * The fix is vertical space and an explicit rule, not smaller type. The reciprocal keeps its 7rem
   * dominance; the prefix gets its own row and its own leading; the percentage is separated below a
   * hairline so position and spacing carry the hierarchy.
   */
  .st-h1-fixing {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    /*
     * ST-CONVERGENCE1A. 6px was a gap between two line boxes, not between two pieces of type.
     *
     * At this width the denominator is set at 112px and its dollar sign overshoots its own line box
     * upward by more than six pixels, so the stroke climbed into the "$1 OF USD STABLECOINS / for
     * every" row above it and the two lines touched. The row gap now clears the overshoot. Both
     * type sizes and the whole composition are unchanged; only the space between the rows moved.
     */
    row-gap: 18px;
    column-gap: 13px;
  }

  .st-h1-fixing-prefix {
    grid-column: 1 / -1;
    align-items: baseline;
    flex-wrap: wrap;
    row-gap: 4px;
    line-height: 1.1;
  }

  .st-h1-fixing-prefix > span { font-size: 2.15rem; }
  .st-h1-fixing-prefix small { margin-left: 8px; font-size: 0.62rem; }
  .st-h1-fixing-prefix em { margin: 0 0 0 12px; font-size: 1.63rem; }

  .st-h1-fixing strong {
    margin-top: 0;
    font-size: 7rem;
    letter-spacing: -0.035em;
    line-height: 1;
  }

  .st-h1-fixing-unit {
    margin: 0;
    font-size: 0.72rem;
    transform: none;
  }

  .st-h1-exact {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-top: 16px;
    padding: 16px 0 0;
    border-top: 1px solid var(--st-h1-rule);
    text-align: left;
  }

  .st-h1-exact data { font-size: 2rem; }
  .st-h1-exact span { margin: 0; font-size: 0.68rem; }

  .st-h1-arithmetic {
    display: block;
    padding: 13px 0 12px;
    font-size: 0.77rem;
    line-height: 1.75;
  }

  .st-h1-sources {
    display: block;
    margin-top: 8px !important;
    font-size: 0.71rem;
    line-height: 1.7;
    white-space: normal;
  }

  .st-h1-sources span {
    display: inline-block;
    margin-right: 22px;
  }

  .st-h1-figure { margin-top: 27px; }

  .st-h1-series-caption {
    padding-top: 10px;
    font-size: 0.78rem;
    line-height: 1.55;
  }

  .st-h1-affordance {
    display: block;
    padding: 14px 0;
  }

  .st-h1-picker {
    justify-content: space-between;
    padding: 6px 0;
    border-top: 1px solid var(--st-h1-rule);
    border-bottom: 1px solid var(--st-h1-rule);
  }

  .st-h1-picker time {
    min-width: 0;
    font-size: 0.86rem;
  }

  .st-h1-affordance > a {
    display: inline-block;
    margin-top: 14px;
  }

  .st-h1-figure figcaption {
    display: block;
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .st-h1-figure figcaption a {
    display: inline-block;
    margin-top: 13px;
  }

  /*
   * Two destinations set in tracked capitals need more than one word space between them. The
   * desktop caption is a flex row with a 40px gap, but at this width it collapses to a block and
   * the two links flowed as inline text, so "EARLIER RECORDS" and "METHODOLOGY" ran together with
   * the arrow of the first touching the M of the second and read as one label.
   */
  .st-h1-figure figcaption a + a { margin-left: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-h1-picker button { transition: none; }
}

@media print {
  .st-h1-chart { break-inside: avoid; }
}

/*
 * SOURCE COMPARISON
 *
 * The reaction this has to earn is "I can see that the sources measure this differently", not "here
 * is a settings panel". So there is no card, no shadow, no chip and no coloured status furniture:
 * the unit is a ruled band in the same printed language as the publication-status register above it,
 * and the only colour in it is the four series inks, which carry meaning by pointing at the chart.
 *
 * The summary is visible in the committed page. The control below opens the detail rows, while the
 * client keeps the comparison chart gated on genuine comparison history.
 */
.st-sources {
  margin-top: 4px;
  padding-top: 14px;
}

.st-sources[hidden] { display: none; }

.st-sources-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/*
 * A text control with a rule under it rather than a button with a filled body. A filled pill here
 * would be the loudest object on a page whose headline is set in a serif display face, and it would
 * read as an app control on a surface that is deliberately a publication.
 */
.st-sources-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1.5px solid var(--st-h1-rule-strong);
  background: transparent;
  color: var(--st-h1-ink);
  cursor: pointer;
  font-family: var(--st-h1-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 100ms ease-out, border-color 100ms ease-out;
}

.st-sources-toggle:hover { color: var(--st-h1-accent); border-bottom-color: var(--st-h1-accent); }
.st-sources-toggle:focus-visible { outline: 2px solid var(--st-h1-link); outline-offset: 3px; }
.st-sources-toggle[aria-expanded="true"] { color: var(--st-h1-accent); border-bottom-color: var(--st-h1-accent); }

.st-sources-bar-note {
  flex: 1 1 240px;
  color: var(--st-h1-ink-secondary);
  font-size: 0.86rem;
  line-height: 1.55;
}

.st-sources-panel { padding-top: 18px; }
.st-sources-panel[hidden] { display: none; }

.st-sources-basis {
  color: var(--st-h1-ink-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 68ch;
}

.st-sources-basis b { color: var(--st-h1-ink); font-weight: 500; }

.st-sources-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--st-h1-rule);
  counter-reset: st-source-counter;
}

.st-source {
  border-bottom: 1px solid var(--st-h1-rule);
  counter-increment: st-source-counter;
}

.st-source-detail > summary {
  display: grid;
  /* Every row's <summary> is its own independent grid (one per <details>), so a bare `auto` fourth
     column sized itself to that row's own versus text and left a different remainder for columns
     2-3 on every row: "The published measurement" (short) vs "These readings were observed at
     different times." (long) shifted the value column by ~140px between rows. All four columns are
     now fr-based so every row divides the same row width the same way, and only the cell content
     wraps when a phrase is long, never the column boundaries. */
  grid-template-columns: 14px minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, 1.6fr);
  align-items: baseline;
  gap: 4px 14px;
  min-height: 44px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
}

.st-source-detail > summary::-webkit-details-marker { display: none; }
.st-source-detail > summary::marker { content: ""; }
.st-source-detail > summary:focus-visible { outline: 2px solid var(--st-h1-link); outline-offset: 2px; }

/* The numeral that ties a row to its mark on the chart. On a narrow viewport the chart labels its
   series with exactly this numeral, so the list is the key and no legend is needed at any width. */
.st-source-key {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--st-h1-source-1);
  font-family: var(--st-h1-mono);
  font-size: 0.7rem;
  font-weight: 600;
}

.st-source-key::before { content: counter(st-source-counter); }

.st-source:nth-child(2) .st-source-key { color: var(--st-h1-source-2); }
.st-source:nth-child(3) .st-source-key { color: var(--st-h1-source-3); }
.st-source:nth-child(4) .st-source-key { color: var(--st-h1-source-4); }

.st-source-name {
  color: var(--st-h1-ink);
  font-family: var(--st-h1-serif);
  font-size: 1.06rem;
  line-height: 1.3;
}

.st-source-value {
  color: var(--st-h1-ink);
  font-family: var(--st-h1-mono);
  font-size: 0.94rem;
  font-weight: 500;
  text-align: right;
}

.st-source-role,
.st-source-asof,
.st-source-history,
.st-source-versus {
  color: var(--st-h1-ink-secondary);
  font-family: var(--st-h1-mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
  /* Without this, a grid item's automatic minimum size defaults to its content's un-wrapped width,
     so the longest phrase among these four (e.g. "These readings were observed at different
     times.") forces its column wider on that row than a shorter phrase does on another row - each
     <summary> is its own independent grid, so that shift lands differently on every row. */
  min-width: 0;
}

.st-source-role { grid-column: 2; }
.st-source-asof { grid-column: 3; }
.st-source-history { grid-column: 3; grid-row: 1; color: var(--st-h1-ink); }
.st-source-versus { grid-column: 4; text-align: right; }

/* An unaligned comparison is stated, not hidden and not dressed as a warning. It is an ordinary
   fact about two readings, and a red chip would make it look like a fault in the data. */
.st-source-versus[data-source-versus="unaligned"] { color: var(--st-h1-ink-muted); text-transform: none; letter-spacing: 0.02em; }
.st-source-versus[data-source-versus="unavailable"] { color: var(--st-h1-ink-muted); text-transform: none; letter-spacing: 0.02em; }
.st-source-versus[data-source-versus="designated"] { color: var(--st-h1-ink-muted); }

.st-source-body {
  padding: 2px 0 20px 28px;
  max-width: 78ch;
}

.st-source-designated {
  color: var(--st-h1-ink);
  font-family: var(--st-h1-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding-bottom: 10px;
}

.st-source-designated b { font-weight: 600; }

.st-source-body dl { margin: 0; display: grid; gap: 9px; }
.st-source-body dl > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; }

.st-source-body dt {
  color: var(--st-h1-ink-muted);
  font-family: var(--st-h1-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 2px;
}

.st-source-body dd {
  margin: 0;
  color: var(--st-h1-ink-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.st-source-body dd b { color: var(--st-h1-ink); font-weight: 500; }
.st-source-body dd a { color: var(--st-h1-link); text-decoration: none; text-underline-offset: 3px; }
.st-source-body dd a:hover { text-decoration: underline; }
.st-source-body dd i { font-style: normal; }

.st-source-attribution {
  padding-top: 12px;
  color: var(--st-h1-ink-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.st-source-attribution a { color: var(--st-h1-link); text-decoration: none; }
.st-source-attribution a:hover { text-decoration: underline; }

.st-sources-notes {
  display: grid;
  gap: 0;
  margin-top: 22px;
  border-top: 1px solid var(--st-h1-rule);
}

.st-sources-note { border-bottom: 1px solid var(--st-h1-rule); }

.st-sources-note > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: var(--st-h1-ink);
  font-family: var(--st-h1-serif);
  font-size: 1rem;
  list-style: none;
}

.st-sources-note > summary::-webkit-details-marker { display: none; }
.st-sources-note > summary::marker { content: ""; }
.st-sources-note > summary::after {
  content: "+";
  margin-left: auto;
  padding-left: 16px;
  color: var(--st-h1-ink-muted);
  font-family: var(--st-h1-mono);
  font-size: 1.05rem;
}

.st-sources-note[open] > summary::after { content: "\2212"; }
.st-sources-note > summary:focus-visible { outline: 2px solid var(--st-h1-link); outline-offset: 2px; }

.st-sources-note > div { padding: 0 0 18px; max-width: 72ch; }

.st-sources-note p {
  color: var(--st-h1-ink-secondary);
  font-size: 0.92rem;
  line-height: 1.65;
}

.st-sources-note p + p { padding-top: 10px; }

.st-sources-note ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
  color: var(--st-h1-ink-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}

@media (max-width: 767px) {
  /*
   * The four-column row cannot survive 390px, so it becomes a stack. The order is deliberate: name,
   * then reading, then when it was observed, then what kind of history stands behind it. A reader
   * scrolling a phone gets the identity and the number first and the qualification immediately
   * after, never the number alone.
   */
  .st-source-detail > summary {
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 3px 12px;
    padding: 14px 0;
  }

  .st-source-name { grid-column: 2; font-size: 1rem; }
  .st-source-value { grid-column: 3; grid-row: 1; }
  .st-source-role { grid-column: 2 / span 2; grid-row: 2; }
  .st-source-asof { grid-column: 2 / span 2; grid-row: 3; }
  .st-source-history { grid-column: 2 / span 2; grid-row: 4; }
  .st-source-versus { grid-column: 2 / span 2; grid-row: 5; text-align: left; }

  .st-source-body { padding-left: 0; }
  .st-source-body dl > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }

  .st-sources-bar { gap: 12px; }
  .st-sources-bar-note { flex-basis: 100%; font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .st-sources-toggle { transition: none; }
}

@media print {
  .st-sources { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * FINAL DESIGN PORT, 6 September. Compaction of the source-lens ledger.
 *
 * The design this homepage is ported from replaced this whole surface with a
 * three-figure row. That is not portable here: this ledger states each source's
 * price basis, coverage and licence position, and those statements are governed
 * and separately tested. Removing them to save height would drop rights copy,
 * not decoration.
 *
 * So the surface keeps every statement it makes and is compacted typographically
 * instead. Nothing here hides a row, a figure, a date or an attribution: the
 * rules below change type scale, leading and padding only. The block stays fully
 * legible and keeps its own "6 September 2026 fixing" dateline, which is what
 * stops a reader reading a comparison as current when it is not.
 * ───────────────────────────────────────────────────────────────────────────── */

.st-ledger--condensed .st-ledger-title {
  font-size: 1.32rem;
  line-height: 1.2;
}

.st-ledger--condensed .st-ledger-head {
  gap: 0.35rem;
  padding-bottom: 0.5rem;
}

.st-ledger--condensed .st-ledger-intro {
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 62ch;
  margin-block: 0.4rem 0.6rem;
}

.st-ledger--condensed .st-ledger-row {
  padding-block: 0.7rem;
}

.st-ledger--condensed .st-ledger-counts,
.st-ledger--condensed .st-ledger-attr {
  font-size: 0.76rem;
  line-height: 1.4;
}

.st-ledger--condensed .st-ledger-foot {
  gap: 0.3rem;
  padding-top: 0.5rem;
}

.st-ledger--condensed .st-ledger-foot p {
  font-size: 0.76rem;
  line-height: 1.45;
  max-width: 70ch;
}

/* The retained verification row. Quieter than it was, for the same reason: it is
 * a reuse act at the foot of the page, not a headline. Every field the
 * publication checks read stays exactly where it was in the DOM. */
.observatory-reuse .reuse h3 { font-size: 1.05rem; }
.observatory-reuse #citationText { font-size: 0.74rem; line-height: 1.5; }
.observatory-reuse .reuse-seal { font-size: 0.74rem; }

/* Section rhythm. The ported design runs a tighter vertical scale between bands
 * than this page did; these are the outer paddings only, so no band loses
 * internal breathing room and nothing reflows at any width. */
.observatory-page > .st-h1 { padding-top: 2rem; padding-bottom: 2.75rem; }
.observatory-page > .st-publication { padding-top: 3rem; padding-bottom: 2.75rem; }
.observatory-page > .observatory-ground { padding-top: 2.25rem; }