style.css

:root {
  color-scheme: light dark;

  /* populace.dev consumes the PolicyEngine design system: @policyengine/ui-kit
     tokens.css is loaded via CDN in the page <head> (light theme — PE default,
     no .dark class). The site's original local var names are aliased onto the
     PE semantic tokens here, so the existing component CSS keeps working. */
  --ink: var(--background); /* page background */
  --ink-2: var(--muted); /* raised surface (cards) */
  --paper: var(--foreground); /* primary text */
  --paper-dim: var(--muted-foreground);
  /* --text-tertiary (#64748B) measures 4.47:1 on the translucent .panel-card
     used by /connect/ — just under AA. Darkened one step so faint text clears
     4.5:1 on every surface the site paints. */
  --paper-faint: #5B6878;
  /* Accent. Named --brand* because these are teal, not amber: the old
     --amber/--amber-soft names were left over from a previous palette and
     invited reaching for the wrong colour. --chart-1 (#319795) was 3.51:1 on
     white and failed AA as the site's main link colour, so the emphasis accent
     now resolves to --primary (#2C7A7B, 5.03:1). */
  --brand: var(--primary);
  --brand-strong: var(--primary);
  /* deeper teal for hover/pressed states, so hover still reads as a change now
     that --brand and --brand-strong resolve to the same AA-passing value.
     #285E61 = teal-700, 7.33:1 on white. */
  --brand-deep: #285E61;
  /* Chart series 2. --brand-strong collapsed onto --primary for AA, which
     left .vc-s1 and .vc-s2 the same colour, distinguished only by a dash
     pattern -- while .vc-lab/.vc-lab2 styled the legend as two colours.
     A dark slate keeps the two-series-plus-neutrals restraint and reads
     apart from teal in greyscale. 10.4:1 on white. */
  --chart-s2: #334155;
  /* AA-safe warning text. --text-warning (#c2410c) is only 4.10:1 against the
     16%-tinted chip .tag-local paints behind it; #9A3412 is 5.63:1 there. */
  --brand-warning: #9A3412;
  /* Back-compat aliases: page-level inline <style> blocks still reference
     --amber/--amber-soft. Keep them pointed at the accent tokens. */
  --amber: var(--brand);
  --amber-soft: var(--brand-strong);
  --line: var(--border);
  --line-soft: var(--border-light);
  /* aliases so the content-page component CSS uses design-system colors
     instead of hard-coded light-mode fallbacks (theme-safe). */
  --text: var(--foreground);
  --surface: color-mix(in srgb, var(--background) 72%, transparent);
  /* PE ships its font families in the Tailwind @theme layer (not :root), which a
     no-build static page can't read; the families below mirror ui-kit tokens.css
     and resolve to --font-sans/--font-mono if a build ever exposes them. */
  --display: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --body: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --mono: var(--font-mono, "JetBrains Mono", "Fira Code", Consolas, monospace);
  --max: 1320px;

  /* ---------- type scale (single source of truth for font sizes) ---------- */
  /* Steps are ~1.3x apart so h1 > h2 > h3 > body reads as four distinct
     levels. The old scale topped out at 3.9rem/3.2rem: h1 and h2 were close
     enough to compete, and both were loud enough to fight the body copy. */
  --fs-hero: clamp(1.9rem, 3.8vw, 2.7rem);     /* homepage h1 */
  --fs-hero-sub: clamp(1.9rem, 4vw, 2.7rem);   /* interior-page h1 */
  --fs-h2: clamp(1.5rem, 2.6vw, 1.95rem);      /* band headings */
  --fs-h3: 1.2rem;                             /* card h3 */
  --fs-h3-sm: 1.1rem;                          /* compact card h3 */
  --fs-h4: 16px;                               /* step / minor headings */
  --fs-lede: clamp(1.05rem, 1.8vw, 1.25rem);   /* hero ledes */
  --fs-stat: 2.4rem;                           /* big metric numerals */
  --fs-body: 17px;                             /* prose + card body text */
  --fs-body-sm: 14px;                          /* secondary text, notes, tables */
  --fs-small: 13px;                            /* captions, nav, fine print */
  --fs-mono: 13px;                             /* code blocks */
  --fs-label: 12px;                            /* uppercase mono micro-labels */
  --fs-code-inline: 0.9em;                     /* inline code, relative to its text */
  --ls-label: 0.08em;                          /* letter-spacing for micro-labels */

  /* ---------- spacing scale (single source of truth for rhythm) ----------
     One geometric-ish ramp. Component margins/padding pick a step from here
     instead of inventing a number, so seams between sections are consistent
     and the eye can find them. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  /* band gutter + vertical band rhythm */
  --gutter: clamp(20px, 5vw, 56px);
  --band-y: clamp(48px, 6vw, 80px);

  /* ---------- one border radius, one border colour ----------
     Cards, code blocks, charts and panels used 2px/3px/6px/8px in different
     places for the same job. One value now. */
  --radius: 8px;
  /* Referenced by the model navs, .contact-email, .comparison-table row hover
     and .verification-tag, but never defined --
     so those backgrounds resolved to nothing and the PUBLISHED ANCHOR chips
     rendered as bare text while STATUTE/CALIBRATED rendered as pills. */
  --brand-wash: color-mix(in srgb, var(--primary) 8%, transparent);
  --radius-card: var(--radius);
  --radius-sm: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--fs-small);
}
.skip-link:focus { left: 12px; top: 12px; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.prose tbody th {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- focus (WCAG 2.4.7) ----------
   The vendored ui-kit ships a focus ring inside @layer base, so any unlayered
   rule here would silently outrank it; and its single teal outline disappears
   against the teal-tinted and dark-filled surfaces this site paints (most
   visibly /connect/'s selected tablist button, which is filled with --text).
   This is a two-tone ring — a dark inner outline plus a light outer box-shadow
   — so exactly one of the two always contrasts, on any background the site
   uses. Unlayered, so it wins everywhere. */
:focus-visible {
  outline: 3px solid var(--foreground);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--background);
  border-radius: 3px;
}
/* On a filled/inverted control the roles swap: the light ring sits inside. */
[aria-selected="true"]:focus-visible,
.btn-primary:focus-visible {
  outline-color: var(--background);
  outline-offset: -5px;
  box-shadow: 0 0 0 3px var(--foreground);
}
/* Never let a clipping ancestor eat the ring. */
:focus-visible { position: relative; z-index: 1; }

/* ---------- fragment navigation ----------
   `scroll-behavior: smooth` was here, and it is why `/docs/#papers` did not
   work: the four paper viewer pages link to that fragment, the target sits
   ~4,400px down, and Chrome does not run the smooth animation for the
   initial same-document fragment jump at all (measured: scrollY stayed 0
   with smooth, landed exactly on target with auto). It was also the wrong
   call for its own sake — a multi-second animated flight down a long
   reference page is disorienting, not calm. Instant jumps now.
   scroll-margin-top keeps the landed heading clear of the fixed nav
   instead of tucked underneath it. */
:target,
section[id],
[id]:not(body) { scroll-margin-top: clamp(88px, 12vh, 112px); }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: visible;
  position: relative;
}

/* Let content shrink inside grid/flex tracks. Horizontal scrolling belongs
   only to explicit table and code scrollers, never to the whole document. */
main, section, article, header, nav, .hero-inner, .hero-copy, .band-head,
.lede, h1, h2, h3, p, figure, figcaption { min-width: 0; max-inline-size: 100%; }
img, svg, canvas { max-width: 100%; }
h1, h2, h3, p, figcaption, a { overflow-wrap: anywhere; }

/* ---------- background: deliberately nothing ----------
   The page used to stack three ambient layers behind the reading column: two
   fixed teal radial washes, an animated canvas of 120–360 drifting/twinkling
   dots (field.js, now deleted along with its markup), and an SVG noise grain.
   These are reference pages of continuous prose; ambient motion and
   texture directly behind that much body copy is what "the background is confusing" means.
   One flat surface, so the only thing moving on the page is the text.
   .grain is a <div> on all 14 pages (markup owned elsewhere) — retired here.

   What replaces it is not ambient: a static plot grid. The subject of this site
   is models that produce charts, so the page's own surface is ruled like the
   paper those charts are drawn on — a 64px lattice at 3% of the accent, fixed,
   never animated, no second layer. It is a texture you notice once and then
   stop seeing, which is the whole difference from the dot field. The character
   is spent in the hero fan chart below; everything else stays quiet. */
.grain {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--brand) 4.5%, transparent) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--brand) 4.5%, transparent) 0 1px, transparent 1px 64px);
  /* fade the lattice out down the page so long reference pages end on plain
     paper rather than carrying texture under 4,900 words of prose */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 26vh, transparent 96vh);
  mask-image: linear-gradient(to bottom, #000 0, #000 26vh, transparent 96vh);
}

/* ---------- hero fan chart: the signature element ----------
   The old background depicted a field of synthetic households — a
   microsimulation metaphor on a site about macro models. The artifact this
   subject actually produces is a forecast fan, so the hero *is* one, drawn from
   papers/boe-svar/figures/current_forecast.json by assets/make_hero.py. The
   ornament is the output. Static: no entrance animation, nothing loops. */
.hero-fig {
  margin: 0;
  min-width: 0;          /* lets the grid track shrink; no horizontal overflow */
}
.hero-fan {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.hero-fan text { font-family: var(--mono); fill: var(--paper-faint); }
.hero-fan .hf-tick { font-size: 11px; }
/* the viewBox scales to about half below the two-column breakpoint, which would
   render these at ~6px. Hide them there; the figcaption carries the detail. */
@media (max-width: 999px) {
  .hero-fan .hf-tick { display: none; }
}
.hero-fan .hf-grid { stroke: var(--line-soft); stroke-width: 1; }
.hero-fan .hf-zero { stroke: var(--line); stroke-width: 1.5; }
.hero-fan .hf-b90 { fill: color-mix(in srgb, var(--brand) 13%, transparent); }
.hero-fan .hf-b68 { fill: color-mix(in srgb, var(--brand) 26%, transparent); }
.hero-fan .hf-med {
  fill: none; stroke: var(--brand-strong); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.hero-fan .hf-dot { fill: var(--brand-strong); }

.hero-fig figcaption {
  margin-top: var(--s-3);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--paper-faint);
  max-width: 46ch;
  text-align: center;
}
.hero-fig figcaption a { color: var(--brand-strong); }

/* single column at phone/tablet: the figure sits under the CTAs, never behind
   a word of text at any width */
.hero-inner { display: grid; grid-template-columns: 1fr; gap: var(--s-7); }
.hero-copy { min-width: 0; }

@media (min-width: 1000px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    gap: var(--s-5);
    align-items: center;
  }
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--gutter);
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  border-bottom: 1px solid var(--line-soft);
}

.brand {
  font-family: var(--mono);
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
  color: var(--paper);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.brand-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brand);
}
.brand-logo {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  font-family: var(--mono);
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
}
.nav-links a {
  color: var(--paper-dim);
  text-decoration: none;
  transition: color 0.25s;
}
.nav-links a:hover { color: var(--brand-strong); }
.nav-links a[aria-current="page"] {
  color: var(--brand-strong);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
.nav-gh { color: var(--paper) !important; display: inline-flex; align-items: center; }
.nav-gh svg { width: 18px; height: 18px; display: block; }
.nav-links a:not(.nav-gh) { display: none; }

/* Keep the two primary journeys available on small screens. The previous
   mobile header reduced the entire site navigation to a GitHub icon. */
.nav-links a.nav-mobile { display: inline-flex; }
.nav-links .nav-start {
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--brand);
  border-radius: 4px;
  color: var(--brand-strong);
}
.nav-links .nav-start:hover { background: var(--ink-2); }

@media (min-width: 940px) {
  .nav-links .nav-start { min-height: auto; padding: 0; border: 0; }
  .nav-links .nav-start:hover { background: transparent; }
  .nav-links a:not(.nav-gh) { display: inline; }
}

/* Economy subnav: one sticky bar for the whole section. The country scope
   sits on the left as a segmented capsule; topic anchors read as quiet
   underline tabs on the right and scroll horizontally when cramped. */
.economy-subnav {
  position: sticky;
  top: calc(var(--nav-h, 62px) - 8px);
  z-index: 8;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--paper) 6%, transparent);
}
.economy-subnav-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--s-5);
  max-width: var(--max);
  margin: 0 auto;
  padding: 7px var(--gutter) 0;
}
.economy-subnav-scope {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex: 0 0 auto;
}
.economy-subnav-scope::after {
  content: "";
  width: 1px;
  align-self: stretch;
  margin: 10px 0;
  background: var(--line-soft);
}
.economy-subnav-label {
  color: var(--paper-faint);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}
.economy-topics {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.economy-topics::-webkit-scrollbar { display: none; }
/* Buttons join the anchors so an in-page tablist (role="tab" needs buttons,
   not links) renders in the same idiom instead of a second component. */
.economy-topics a,
.economy-topics button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: var(--s-3) 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--paper-dim);
  font-family: var(--mono);
  font-size: var(--fs-small);
  text-decoration: none;
  white-space: nowrap;
}
.economy-topics button { cursor: pointer; }
.economy-topics a:hover,
.economy-topics button:hover { color: var(--brand-strong); }
.economy-topics a[aria-current="location"],
.economy-topics button[aria-selected="true"] {
  color: var(--paper);
  border-bottom-color: var(--brand-strong);
}
@media (max-width: 720px) {
  .economy-subnav-row { flex-wrap: wrap; gap: 0 var(--s-5); }
  .economy-subnav-scope { padding-bottom: 0; }
  .economy-topics { margin-left: 0; width: 100%; }
  .economy-subnav-countries a span { display: none; }
  .economy-subnav-countries a small { font-size: var(--fs-small); color: inherit; }
}

/* Homepage at-a-glance country toggle: same capsule language as the
   economy country switch, in button form. The head is a flex row with the
   heading left and the toggle sitting on its baseline, wrapping on small
   screens. */
.glance-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  max-width: none;
}
.glance-head > div:first-child { max-width: 60ch; }
.glance-head h2 { margin-bottom: 0; }
.glance-switch { display: inline-flex; flex-shrink: 0; }
.glance-switch button {
  padding: 7px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--paper-dim);
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
  white-space: nowrap;
}
.glance-switch button + button { margin-left: -1px; }
.glance-switch button:first-of-type {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.glance-switch button:last-of-type {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.glance-switch button:hover {
  color: var(--brand-strong);
  border-color: var(--brand);
  background: var(--brand-wash);
  position: relative;
  z-index: 1;
}
.glance-switch button[aria-selected="true"] {
  color: var(--ink);
  border-color: var(--brand-strong);
  background: var(--brand-strong);
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.economy-page section[id] { scroll-margin-top: 132px; }

/* Per-model page tabs (olg pilot): the .glance-switch capsule inside a
   sticky bar in the .economy-subnav idiom. Panels are plain sections with
   role=tabpanel toggled by a tiny inline script. */
.model-tabs {
  position: sticky;
  top: calc(var(--nav-h, 62px) - 8px);
  z-index: 8;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  backdrop-filter: blur(12px);
}
.model-tabs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  max-width: var(--max);
  margin: 0 auto;
  padding: 7px var(--gutter) 0;
}
.model-tabs-link {
  flex: 0 0 auto;
  padding: 10px 2px;
  border-bottom: 2px solid transparent;
  color: var(--paper-dim);
  font-family: var(--mono);
  font-size: var(--fs-small);
  text-decoration: none;
  white-space: nowrap;
}
.model-tabs-link:hover { color: var(--brand-strong); }
.model-tabs-link[aria-current="location"],
.model-tabs-link[aria-current="page"] {
  color: var(--paper);
  border-bottom-color: var(--brand-strong);
}
.model-tabs-set {
  display: inline-flex;
  gap: var(--s-5);
}
.model-tabs-set button {
  flex: 0 0 auto;
  padding: 9px 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--paper-dim);
  font-family: var(--mono);
  font-size: var(--fs-label);
  white-space: nowrap;
  cursor: pointer;
}
.model-tabs-set button:hover { color: var(--brand-strong); }
.model-tabs-set button.is-current {
  color: var(--paper);
  border-bottom-color: var(--brand-strong);
}
.model-tabs-spacer { flex: 1 1 auto; }

/* Methodology scrollytelling: narrative steps left, a sticky formal-
   structure panel right that swaps content with the step in view. */
.scrolly-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
  gap: var(--s-7);
  align-items: start;
  max-width: min(1400px, 100%);
  margin: var(--s-7) auto 0;
  padding: 0 var(--gutter);
}
.scrolly-steps { min-width: 0; }
.meth-step {
  min-height: 90vh;
  padding: var(--s-6) 0 var(--s-6) var(--s-5);
  border-left: 2px solid var(--line-soft);
  opacity: .28;
  transition: opacity .5s ease, border-color .5s ease;
}
.meth-step.active { opacity: 1; border-left-color: var(--brand-strong); }
.meth-step:first-child { padding-top: 0; }
.meth-step:last-child { min-height: auto; padding-bottom: 100px; }
.meth-step-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.meth-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-strong);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 700;
}
.meth-step-head h3 { margin: 0; }
.scrolly-sticky {
  position: sticky;
  top: calc(var(--nav-h, 62px) + 56px);
  min-width: 0;
}
.meth-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
}
.meth-panel-title { font-weight: 600; }
.meth-panel-badge { color: var(--paper-faint); font-size: var(--fs-label); }
.meth-inline { display: none; }
@media (max-width: 899px) {
  .scrolly-wrap { grid-template-columns: 1fr; }
  .scrolly-sticky { display: none; }
  .meth-inline { display: block; }
  .meth-step { opacity: 1; }
}
@media (max-width: 720px) {
  .model-tabs-row { gap: var(--s-3); overflow-x: auto; scrollbar-width: none; }
  .model-tabs-row::-webkit-scrollbar { display: none; }
  .model-tabs-spacer { display: none; }
}
[role="tabpanel"][id] { scroll-margin-top: 132px; }

/* Methodology-tab formal panels: labelled equations inside a callout. */
.prose h4 {
  margin: var(--s-5) 0 var(--s-3);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--paper-dim);
}
.formal-label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--paper-faint);
}
.formal-eq-label {
  display: inline-block;
  min-width: 12ch;
  margin-right: var(--s-3);
  font-size: var(--fs-label);
  color: var(--paper-faint);
}
.callout.formal { overflow-x: auto; }

.model-local-nav,
.validation-model-nav {
  display: flex;
  gap: 8px;
  padding: 0 var(--gutter) var(--s-5);
  max-width: calc(980px + (2 * var(--gutter)));
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.validation-model-nav {
  position: sticky;
  top: 116px;
  z-index: 5;
  width: max-content;
  max-width: calc(100% - (2 * var(--gutter)));
  margin-top: 12px;
  padding: 5px;
  gap: 3px;
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(20, 45, 52, .06);
}
.model-local-nav::-webkit-scrollbar,
.validation-model-nav::-webkit-scrollbar { display: none; }
.model-local-nav a,
.validation-model-nav a {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--paper-dim);
  font-family: var(--mono);
  font-size: var(--fs-label);
  text-decoration: none;
}
.model-local-nav a:hover,
.validation-model-nav a:hover,
.validation-model-nav a[aria-current="location"] {
  color: var(--brand-strong);
  border-color: color-mix(in srgb, var(--brand) 34%, var(--line-soft));
  background: var(--brand-wash);
}
.validation-model-nav a[aria-current="location"] { font-weight: 600; }
/* Pathway line under the global header, generated by site_nav.py. */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  padding: 10px clamp(20px, 5vw, 56px);
  border-bottom: 1px solid var(--line-soft);
  color: var(--paper-faint);
  font-size: var(--fs-label);
}
.crumbs a { color: var(--paper-dim); }
.crumbs a:hover { color: var(--brand-strong); }
.crumbs a::after { content: "/"; margin: 0 8px; color: var(--line); }
.crumbs span[aria-current] { color: var(--paper); }


/* ---------- hero ---------- */
.hero {
  display: flex;
  align-items: center;
  padding: clamp(120px, 16vh, 168px) var(--gutter) var(--s-9);
}
.hero-inner { max-width: 980px; margin: 0 auto; width: 100%; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-4);
}

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
  margin-bottom: var(--s-5);
}
h1 em {
  font-style: italic;
  color: var(--brand-strong);
  font-weight: 500;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--paper);
  max-width: 78ch;
  margin-bottom: var(--s-6);
}
.lede strong { color: var(--brand-strong); font-weight: 600; }

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: 0; }

.btn {
  font-family: var(--mono);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  display: inline-block;
  /* some buttons are labelled with a full repo URL; let the label break
     rather than push the page sideways at 375px */
  max-width: 100%;
  overflow-wrap: anywhere;
}
.btn-primary {
  background: var(--brand);
  color: var(--ink);
  font-weight: 500;
}
.btn-primary:hover { background: var(--brand-deep); }
.btn-secondary {
  color: var(--brand-strong);
  border: 1px solid var(--brand);
  background: var(--brand-wash);
}
.btn-secondary:hover { border-color: var(--brand-strong); background: var(--surface); }
.btn-ghost {
  color: var(--paper);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-strong); }
.mono { font-family: var(--mono); }

/* ---------- bands ---------- */
.band {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--band-y) var(--gutter);
  position: relative;
}
.band + .band { border-top: 1px solid var(--line-soft); }
.band-wide { max-width: min(1400px, 100%); }

/* Alternating band. Used on 43 pages — the economy hub and topics, the
   forecast record, and every release note — but never defined, so all of
   them rendered it as a plain .band. The tint is derived from the border
   colour rather than a fixed value, so it follows the light and dark
   palettes without a second rule, matching how --brand-wash is built. It is
   deliberately faint: these bands separate sections, they do not compete
   with them. */
.band-alt { background: color-mix(in srgb, var(--border-light) 22%, transparent); }

/* Used on /, /models and /connect. It lived only in connect's page-local
   <style>, so the other two rendered it as a default paragraph. */
.section-intro {
  margin-top: 10px;
  color: var(--paper-dim);
  font-size: var(--fs-body);
  line-height: 1.55;
}

.band-head { margin-bottom: var(--s-6); }
.kicker {
  display: block;
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-3);
}
h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.012em;
  max-width: 26ch;
}

.prose { max-width: none; }
/* Long unbreakable tokens — file paths, package names, URLs printed inline in
   the prose — are wider than a 375px column at this body size and pushed the
   page 2–3px sideways on /validation/. Break them instead of shrinking the
   type. <pre>/.codeblock keep their own horizontal scroll and are untouched. */
.prose p, .prose li, .prose td, .prose figcaption { overflow-wrap: break-word; }
.prose p { margin-bottom: var(--s-5); color: var(--paper); font-size: var(--fs-body); line-height: 1.7; }
.prose p:last-child { margin-bottom: 0; }
.prose em { font-style: italic; color: var(--brand-strong); }
.prose strong { font-weight: 600; color: var(--paper); }

/* ---------- cards ---------- */
.card-id { font-size: var(--fs-small); color: var(--brand); letter-spacing: 0.04em; }
/* ONE chip form. Variants differ only by colour, never by shape or size. */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}
.tag-wip { background: var(--ink-2); color: var(--paper-dim); }

/* model access + status badges (accurate to how each model can be used) */
.tag-hosted { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--text-success); }
.tag-local { background: color-mix(in srgb, var(--brand-warning) 16%, transparent); color: var(--brand-warning); }
.tag-experimental { background: var(--muted); color: var(--paper-dim); border-color: var(--line); }
.tag-country { background: transparent; color: var(--paper-dim); border-color: var(--line); }
/* two badges sit side by side in a card header */
.tag-row { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* paper status badges: draft / preprint / submitted / published */

.stack-note { text-align: center; color: var(--paper-faint); font-size: var(--fs-small); margin-top: 8px; }

/* ---------- metrics ---------- */
.metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: var(--s-7) 0 var(--s-6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 720px) { .metrics { grid-template-columns: repeat(3, 1fr); } }

.metric {
  padding: 30px 28px;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 720px) {
  .metric { border-bottom: none; border-right: 1px solid var(--line-soft); }
  .metric:last-child { border-right: none; }
}
.metric-label { display: block; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--paper-faint); margin-bottom: 14px; }
.metric-val {
  font-family: var(--display);
  font-size: var(--fs-stat);
  font-weight: 500;
  color: var(--brand-strong);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.metric-vs { font-family: var(--mono); font-size: var(--fs-small); color: var(--paper-faint); font-weight: 400; }
.metric-note { display: block; font-family: var(--mono); font-size: var(--fs-label); color: var(--paper-faint); margin-top: 12px; }
.research-link a {
  color: var(--brand-strong);
  text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent);
  text-underline-offset: 0.18em;
}
.research-link {
  font-size: var(--fs-small);
  margin-top: 18px;
}

/* ---------- releases ---------- */

/* ---------- commons ---------- */

/* ---------- footer ---------- */
.foot {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 48px var(--gutter) 64px;
  border-top: 1px solid var(--line-soft);
}
.foot-pe { display: inline-flex; align-items: center; }
.foot-pe img { height: 20px; width: auto; display: block; opacity: 0.82; transition: opacity 0.2s; }
.foot-pe:hover img { opacity: 1; }

/* ---------- scroll reveal ----------
   Heroes paint immediately. Section-level blocks reached by scrolling move
   once, together, so long technical pages never arrive out of order. */
.reveal {
  opacity: 1;
  transform: none;
  animation: none;
}
.scroll-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}
.scroll-reveal.in-view {
  opacity: 1;
  transform: none;
}
.scroll-reveal.reveal-initial { transition: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- strategy grid (papers aggregator, homepage overview) ---------- */
.strategy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 640px) { .strategy-grid { grid-template-columns: repeat(2, 1fr); } }
/* four model cards: keep a balanced 2x2 at desktop */

/* Cards: ONE treatment. Previously two padding values, two radii, two border
   colours and two hover transforms did the same job. */
.strategy-card {
  display: block;
  border: 1px solid var(--line-soft);
  background: var(--card);
  padding: var(--s-5);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.strategy-card:hover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
}
.strategy-card header { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.strategy-card .card-id { font-size: var(--fs-small); color: var(--brand); letter-spacing: 0.04em; }
/* The restructured cards lead with a bolded question inside the body copy,
   which was out-weighting the card title. The title takes 600 so the
   heading level still wins. */
.strategy-card h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-h3-sm);
  color: var(--paper);
  margin-bottom: 10px;
}
.strategy-card p { font-size: var(--fs-body); line-height: 1.55; color: var(--paper-dim); margin-bottom: 0; }
.strategy-card .strategy-paper-link {
  display: block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: var(--fs-small);
  color: var(--brand-strong);
}

/* ---------- strategy landing pages: depth-gradient sections ---------- */
.page-title { font-size: var(--fs-hero-sub); }

/* ---------- diagrams (strategy-page SVGs) ---------- */

/* box = a stage/node in a pipeline or hierarchy diagram */

/* text roles inside a diagram */

/* edges: flows between stages */

/* reference / floor lines on bar charts */

/* bar-chart bars: primary result vs. comparison arms */

/* ---------- quick-start block (06 releases) ---------- */

/* =====================================================================
   Content pages (olg, connect) — one shared measure and rhythm.
   `body.doc` widens the reading column so text uses the full line, and
   lets code, tables, charts, and card grids span the whole band.
   ===================================================================== */
.doc .band { max-width: var(--max); }
/* The hero's inner column was 980px while bands are 1140px, so a page's h1
   started 26px to the right of every heading under it — a visible kink down
   the left edge. One column edge for the whole page. */
.doc .hero-inner { max-width: var(--max); }
/* Content-page titles share one left edge with the sections below. The
   homepage keeps its split text/chart composition; only model-style heroes
   collapse to a single, left-aligned reading column. */
.doc .model-hero .hero-inner { display: block; }
.doc .model-hero .lede { margin-left: 0; margin-right: 0; }

/* text fills the line; rich blocks go edge-to-edge inside the band */
.doc .prose { max-width: none; }
.doc .prose > p,
.doc .prose > ul,
.doc .prose > ol,
.doc .prose > .research-link,
.doc .prose > .soon-hint,
.doc .prose > .chart-note,
.doc .prose > .opt-note { max-width: none; }

/* consistent body copy across every content page */
.doc .prose p { font-size: var(--fs-body); line-height: 1.7; }
.doc .prose ul { padding-left: 22px; }
.doc .prose li { margin: var(--s-2) 0; line-height: 1.7; font-size: var(--fs-body); max-width: none; }
.doc .prose p code,
.doc .prose li code,
.doc .prose td code { font-family: var(--mono); font-size: var(--fs-code-inline); color: var(--brand-strong); }
.doc .prose p code,
.doc .prose li code,
.connect-panel p code { overflow-wrap: anywhere; }

/* AI-client identity cues: names stay visible, while the marks make the
   hosted path quicker to scan without turning third-party brands into CTAs. */
.ai-client-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.ai-client {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--background, #fff) 92%, transparent);
  color: var(--text);
  font-weight: 600;
}
.ai-client img { display: block; flex: 0 0 auto; }
.seg button[data-client] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  min-width: 148px;
  flex: 1 1 auto;
}
/* client picker: centered pill group, full-width tap targets on mobile */
#seg-client {
  display: flex;
  flex-wrap: wrap;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}
/* the connect hero lede is one sentence of plain prose — let it run the line */
.connect-hero .lede { max-width: none; }
.seg button[data-client] img { display: block; flex: 0 0 auto; }
.seg button[data-client="chatgpt"] img { color: currentColor; }
.seg button[data-client="chatgpt"][aria-selected="true"] img { filter: invert(1); }

/* section headings on content pages read a touch tighter than the band default */
.doc .band-head { margin-bottom: var(--s-6); }
.doc h2 { max-width: none; }

/* --- code blocks: one look everywhere (was duplicated inline) --- */
.codeblock {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--ink-2);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0 var(--s-2);
  overflow-x: auto;
}
.codeblock pre { margin: 0; }
.codeblock code,
.code-window code { font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.7; white-space: pre; }
.codeblock .cb-copy {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-label); color: var(--paper-faint);
}
.codeblock .cb-copy:hover { color: var(--text); }
.cm { color: var(--paper-faint); }
.kw { color: var(--brand); }

/* --- reference tables --- */
/* wide tables (e.g. the docs comparison) scroll inside their own container
   instead of pushing the page sideways on narrow screens */
/* .model-seg is declared in /connect/'s inline <style> (owned elsewhere). It
   sets overflow-x:auto but is a flex item, whose default min-width:auto makes
   it grow to content width rather than clip — which panned the whole page
   679px sideways at 375px. Fixed from here with a two-class selector so it
   outranks the inline single-class rule without editing that file. */
.seg.model-seg { min-width: 0; max-width: 100%; }
/* same failure mode for any other flex/grid child that scrolls internally */
.panel-bars > *, .model-pane, .prose > * { min-width: 0; }

.table-scroll { overflow-x: auto; margin: 24px 0; }
/* code blocks get the same treatment: long lines scroll inside the block
   instead of being clipped unreachably (or panning the whole page) on mobile */
.prose pre,
.codeblock pre,
.code-window pre { overflow-x: auto; max-width: 100%; }
.table-scroll table { margin: 0; min-width: 720px; }
/* Reference tables also appear inside scrollytelling steps (the frb-us/code
   series list, the pe/code route map), which sit outside .prose — same
   treatment there rather than falling back to unstyled HTML. */
.prose table, .meth-step table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: var(--fs-body-sm); }
.prose th, .meth-step th {
  text-align: left; font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--paper-faint);
}
.prose th, .prose td, .meth-step th, .meth-step td {
  padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
.opt-note { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--paper-faint); }
.callout {
  border-left: 2px solid var(--brand);
  padding: var(--s-1) 0 var(--s-1) var(--s-5); margin: var(--s-6) 0;
  font-size: var(--fs-body-sm); line-height: 1.6; color: var(--paper-dim); max-width: none;
}

/* ---------- section divider after hero + grid footer ---------- */
.hero + .band { border-top: 1px solid var(--line-soft); }
.foot-head { display: block; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--paper-faint); margin-bottom: 12px; }
.next-invite { margin-top: 30px; text-align: center; font-size: var(--fs-small); color: var(--paper-faint); display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.next-invite a { color: var(--text, #111); text-decoration: none; border-bottom: 1px solid var(--line-soft); padding-bottom: 1px; }
.next-invite a:hover { color: var(--brand-strong); border-bottom-color: var(--brand-strong); }

/* Homepage decision path. This is intentionally a list rather than another
   card grid: readers scan from their question to the model in one line. */
.question-list {
  border-top: 1px solid var(--line);
  margin-top: var(--s-6);
}
.question-list a {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(180px, 0.7fr) 18px;
  gap: var(--s-5);
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--paper);
  text-decoration: none;
}
.question-list a::after { content: "→"; color: var(--brand); }
.question-list a:hover strong,
.question-list a:hover::after { color: var(--brand-deep); }
.question-list span { font-size: var(--fs-body); line-height: 1.45; }
.question-list strong {
  color: var(--brand-strong);
  font-family: var(--mono);
  font-size: var(--fs-small);
  font-weight: 500;
}
.chooser-note { margin-top: var(--s-5); color: var(--paper-dim); font-size: var(--fs-body-sm); }
.chooser-note a { color: var(--brand-strong); }

/* Micro→macro pipeline strip: the scoring flow at a glance. */
.pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-block: var(--s-4);
}
.pipeline .pl-node {
  border: 1px solid var(--line, currentColor);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: var(--fs-body-sm);
  line-height: 1.35;
}
.pipeline .pl-node strong { display: block; font-family: inherit; }
.pipeline .pl-node .mono { display: block; color: var(--paper-dim); }
.pipeline .pl-arrow { color: var(--brand); }
.pipeline a.pl-node { text-decoration: none; color: inherit; }
.pipeline a.pl-node:hover { border-color: var(--brand); }

@media (max-width: 620px) {
  .nav {
    min-height: 112px;
    align-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-block: 10px;
  }
  .brand { width: 100%; font-size: 12px; }
  .nav-links {
    width: 100%;
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-links a { flex: 0 0 auto; white-space: nowrap; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links .nav-gh { display: none; }
  .nav-links a.nav-mobile:first-child { display: inline-flex; }
  .nav-links .nav-start { min-height: 44px; padding-inline: 12px; }
  .nav-gh { min-width: 44px; min-height: 44px; justify-content: center; }
  .question-list a { grid-template-columns: 1fr 18px; gap: 8px 14px; }
  .question-list strong { grid-column: 1; grid-row: 2; }
  .question-list a::after { grid-column: 2; grid-row: 1 / span 2; }
}

/* slim footer bar */
.foot-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 30px; }
/* wraps like .foot-bar above it — without this the nav pushed every page
   68px sideways at a 375px viewport. */
.foot-nav { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; }
.foot-nav a { font-family: var(--mono); font-size: var(--fs-small); color: var(--paper-dim); text-decoration: none; }
.foot-nav a:hover { color: var(--brand-strong); }
.foot-nav .foot-pe img { height: 18px; }
.footer-brand,
.footer-links,
.footer-links a { display: inline-flex; align-items: center; }
.footer-brand {
  gap: 10px;
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--fs-body-sm);
  text-decoration: none;
}
.footer-brand img { width: 20px; height: 20px; }
.footer-legal {
  margin: 0;
  color: var(--paper-faint);
  font-family: var(--mono);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.footer-links { flex-wrap: wrap; gap: 10px; }
.footer-links a {
  justify-content: center;
  width: 30px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--paper-dim);
  font-family: var(--mono);
  font-size: var(--fs-small);
  text-decoration: none;
}
.footer-links a:hover { color: var(--brand-strong); background: transparent; transform: translateY(-1px); }
.footer-links img,
.footer-links svg { width: 17px; height: 17px; flex: 0 0 auto; }
.footer-links svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.footer-links .footer-icon-fill { fill: currentColor; stroke: none; }
.footer-links .footer-text {
  width: auto;
  padding-inline: 8px;
}
.footer-links .footer-policyengine { gap: 7px; }

/* Homepage: one compact path section replaces two overlapping explainers. */
.home-page .band { padding-block: clamp(48px, 6vw, 72px); }
/* Four path cards: 2x2 from 640px (base rule), one row of four when wide. */
@media (min-width: 1080px) {
  .home-page #choose .strategy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.model-evidence-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--s-7);
  border: 1px solid var(--line-soft);
  background: var(--line-soft);
}
.model-evidence-links-top {
  max-width: var(--max);
  margin: var(--s-6) auto 0;
}
.model-evidence-links a {
  position: relative;
  display: grid;
  gap: 8px;
  padding: var(--s-5);
  padding-right: calc(var(--s-5) + 28px);
  color: var(--paper);
  background: var(--ink);
  text-decoration: none;
  transition: background .2s, box-shadow .2s;
}
.model-evidence-links a::after {
  content: "→";
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  color: var(--brand-strong);
  font-family: var(--mono);
  transition: transform .2s;
}
.model-evidence-links a:hover,
.model-evidence-links a:focus-visible {
  background: var(--brand-wash);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.model-evidence-links a:hover::after,
.model-evidence-links a:focus-visible::after { transform: translateX(4px); }
.model-evidence-links a:hover strong { color: var(--brand-strong); }
.model-evidence-links strong { font-family: var(--display); font-size: var(--fs-h3-sm); }
.model-evidence-links span { color: var(--paper-dim); font-size: var(--fs-body-sm); line-height: 1.5; }

.forecast-result-list,
.forecast-round-list {
  display: grid;
  gap: 12px;
  margin-block: var(--s-6);
}
/* auto-fit, not auto-fill: empty tracks collapse, so the record's first
   scored card fills the band instead of being stranded at the track minimum
   with dead space beside it. The minimum is the width below which the dot
   plot stops being readable; two cards still pair up on a full-width band,
   and min(100%, …) keeps a single card from overflowing a narrow screen. */
.forecast-result-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }
.forecast-round-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.forecast-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-block: var(--s-6);
  border: 1px solid var(--line-soft);
  background: var(--line-soft);
}
.forecast-summary article { display: grid; gap: 6px; padding: var(--s-5); background: var(--ink); }
.forecast-summary strong { color: var(--paper); font: 600 var(--fs-stat)/1 var(--display); }
.forecast-summary span { color: var(--paper-faint); font-size: var(--fs-small); }
.forecast-next { padding-left: var(--s-4); border-left: 2px solid var(--brand); }
.forecast-result,
.forecast-round {
  padding: var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--card);
}
.forecast-result header,
.forecast-result footer,
.forecast-round > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.forecast-result h3 { margin: 4px 0 0; font-size: var(--fs-h3); }
.forecast-band {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--brand-strong);
  background: var(--brand-wash);
  font: 500 var(--fs-label)/1 var(--mono);
}
/* Scored-result dot plot: every value at its true position on one shared
   scale, forecast/naive labelled above the axis, outturn/official below. */
.forecast-dotplot {
  position: relative;
  height: 120px;
  margin: var(--s-6) 44px;
}
.fc-axis {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--line-soft);
}
.fc-mark { position: absolute; top: 50%; }
.fc-mark i {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--brand);
}
.fc-mark span {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  white-space: nowrap;
  color: var(--paper-faint);
  font-size: var(--fs-small);
}
.fc-mark strong { color: var(--paper); font-family: var(--mono); }
.fc-up span { bottom: 14px; }
.fc-down span { top: 14px; }
/* The forecast is the claim being judged, so it is the emphatic mark: brand
   colour at full opacity, against the outturn in the chart's second series
   and the two benchmarks dimmed. This rule was missing while its three
   siblings existed, so the one marker that matters rendered unstyled. */
.fc-mark-forecast i { background: var(--brand-strong); }
.fc-mark-outturn i { background: var(--chart-s2); }
.fc-mark-naive i { background: var(--paper-faint); opacity: 0.55; }
.fc-mark-official i { background: var(--chart-s2); opacity: 0.55; }
/* The forecasts page's supporting-prose idiom, matching .chart-intro: short
   paragraphs that carry the caveats which used to be stacks of arrow rows. */
.forecast-note,
.prose .forecast-note {
  max-width: 78ch;
  margin-block: var(--s-5) 0;
  color: var(--paper-dim);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}
.prose .forecast-note + .more { margin-top: var(--s-5); }
.forecast-result footer {
  flex-wrap: wrap;
  row-gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  color: var(--paper-faint);
  font-size: var(--fs-small);
}
.forecast-round > div > span { color: var(--brand-strong); }
.forecast-round dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-block: var(--s-5);
  background: var(--line-soft);
}
.forecast-round dl div { padding: 14px; background: var(--ink); }
.forecast-round dt { color: var(--paper-faint); font: var(--fs-label)/1.4 var(--mono); text-transform: uppercase; }
.forecast-round dd { margin: 6px 0 0; color: var(--paper); font-weight: 600; }
.forecast-round { display: flex; flex-direction: column; }
.forecast-round dl { width: 100%; }
.forecast-round > a { color: var(--brand-strong); font-size: var(--fs-small); }
.forecast-round > a:first-of-type { margin-top: auto; }
.forecast-round > a + a { margin-top: 6px; }

.score-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-block: var(--s-6);
  border: 1px solid var(--line-soft);
  background: var(--line-soft);
}
.score-method-grid article { padding: var(--s-5); background: var(--ink); }
.score-method-grid h3 { margin: 8px 0; font-size: var(--fs-h3-sm); }
.score-method-grid p { margin: 0; color: var(--paper-dim); font-size: var(--fs-body-sm); line-height: 1.5; }
.score-method-id { color: var(--brand-strong); font-size: var(--fs-label); }

@media (max-width: 700px) {
  .model-evidence-links,
  .score-method-grid,
  .forecast-summary { grid-template-columns: 1fr; }
  .forecast-result header { align-items: flex-start; }
  .forecast-result-plot > div { grid-template-columns: 62px minmax(60px, 1fr) 58px; gap: 8px; }
}

/* A scored card is never narrower than the 520px track minimum above once the
   viewport clears ~900px — one card fills the band, two share it — so the card
   scales with it rather than stretching a phone-sized layout: more padding,
   a taller axis with larger marks and readable labels, an airier footer. */
@media (min-width: 900px) {
  .forecast-result { padding: var(--s-6) var(--s-7); }
  .forecast-result header { padding-bottom: var(--s-4); }
  .forecast-result header .mono { color: var(--paper-faint); font-size: var(--fs-body-sm); }
  .forecast-result h3 { margin-top: var(--s-2); font-size: var(--fs-lede); }
  .forecast-band { padding: 7px 14px; }
  .forecast-dotplot { height: 172px; margin: var(--s-7) 64px; }
  .fc-axis { height: 3px; }
  .fc-mark i { width: 16px; height: 16px; }
  .fc-mark span { gap: 4px; font-size: var(--fs-body-sm); }
  .fc-up span { bottom: 20px; }
  .fc-down span { top: 20px; }
  .forecast-result footer { padding-top: var(--s-5); font-size: var(--fs-body-sm); }
}

/* ==========================================================================
   Validation page — comparison charts and provenance styling
   Used by /validation/. Charts are hand-authored inline SVG (no third-party JS)
   and inherit the site's light/dark tokens through currentColor and var().
   ========================================================================== */

.model-hero { min-height: auto; padding-top: clamp(120px, 18vh, 180px); padding-bottom: 10px; }
.papers-index-hero { padding-bottom: clamp(64px, 8vw, 100px); }
.papers-index-hero .paper-library { margin-top: clamp(38px, 5vw, 60px); }
.contact-hero { padding-bottom: clamp(52px, 7vw, 82px); }
.contact-band { padding-top: clamp(56px, 8vw, 92px); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.contact-primary,
.contact-brief {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: clamp(8px, 2vw, 20px);
  background: var(--ink);
}
.contact-primary h2,
.contact-brief h2 {
  margin: 20px 0 10px;
  color: var(--paper);
  font: 500 var(--fs-h2)/1.08 var(--display);
}
.contact-primary p,
.contact-brief p {
  max-width: 48ch;
  margin: 0 0 var(--s-5);
  color: var(--paper-dim);
}
.contact-primary .contact-email,
.contact-brief .btn { margin-top: auto; }
.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 11px 16px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-wash);
  color: var(--brand-strong);
  text-decoration: none;
  font-family: var(--mono);
  font-size: var(--fs-small);
  transition: border-color .2s, background .2s, transform .2s;
}
.contact-email:hover { border-color: var(--brand-strong); background: var(--surface); transform: translateY(-1px); }
.contact-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  max-width: var(--max);
  margin: var(--s-6) auto 0;
  padding: 0 var(--gutter);
}
.contact-socials > span {
  color: var(--paper-faint);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}
.contact-socials a {
  display: inline-flex;
  align-items: center;
  padding: 8px;
  border-radius: 999px;
  color: var(--paper-dim);
  text-decoration: none;
}
.contact-socials a:hover { color: var(--brand-strong); background: var(--brand-wash); }
.contact-socials .soc-icon { display: block; }
.models-page .model-hero + .band { border-top: 0; }
.validation-page .model-hero { padding-bottom: var(--s-5); }
.validation-page .validation-model-nav { margin-top: 0; }
.validation-page .validation-model-nav + .band { padding-top: clamp(64px, 8vw, 92px); }

/* comparison matrix: strong column headers, anchored row labels, easier scanning */
.comparison-prose {
  width: 100%;
  max-width: none;
}
.comparison-table-wrap {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--ink);
  box-shadow: 0 14px 36px color-mix(in srgb, #000 16%, transparent);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--brand) var(--ink-2);
  scrollbar-width: thin;
}
.comparison-table {
  width: 100%;
  min-width: 1120px !important;
  table-layout: fixed;
}
.comparison-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.comparison-table thead { background: var(--ink-2); }
.comparison-table thead tr { border-bottom: 1px solid var(--line); }
.comparison-table thead td:first-child,
.comparison-table tbody th:first-child { width: 154px; }
.comparison-table thead th { padding: 20px 16px; }
.comparison-table tbody th,
.comparison-table tbody td {
  padding: 15px 16px;
  line-height: 1.55;
}
.comparison-table thead th a { color: var(--paper); text-decoration: none; line-height: 1.45; }
.comparison-table thead th a span { color: var(--brand-strong); font-size: 10px; letter-spacing: .06em; }
.comparison-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ink-2) 58%, transparent); }
.comparison-table tbody tr:hover { background: var(--brand-wash); }
.comparison-table th,
.comparison-table td { border-right: 1px solid var(--line-soft); }
.comparison-table tr > :last-child { border-right: 0; }
.comparison-table tbody tr:last-child > * { border-bottom: 0; }
.comparison-table th:first-child,
.comparison-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  padding-left: 16px;
  background: var(--ink);
  box-shadow: 1px 0 0 var(--line);
}
.comparison-table thead td:first-child { z-index: 2; background: var(--ink-2); }
.comparison-table tbody tr:nth-child(even) th:first-child { background: var(--ink-2); }

.vfig { margin: 32px 0 30px; }
.vfig figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--paper-faint);
}
.vfig figcaption code { font-size: var(--fs-code-inline); }

.vchart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px 10px 6px;
  background: var(--surface);
}
.vchart text { font-family: var(--mono); fill: var(--paper-dim); }
.vchart .vc-tick { font-size: 11px; }
.vchart .vc-lab { font-size: 12px; fill: var(--brand); }
.vchart .vc-lab2 { fill: var(--chart-s2); }
.vchart .vc-rowlab { font-size: 11.5px; fill: var(--paper-dim); }
.vchart .vc-val { font-size: 12px; fill: var(--paper); font-weight: 600; }
.vchart .vc-note { font-size: 10.5px; fill: var(--paper-faint); }
.vchart .vc-grid { stroke: var(--line-soft); stroke-width: 1; }
.vchart .vc-axis { stroke: var(--line); stroke-width: 1.5; }

/* series 1 = ours, series 2 = the official/published counterpart */
.vchart .vc-s1 { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.vchart .vc-s1-dot { fill: var(--brand); }
.vchart .vc-s2 { fill: none; stroke: var(--chart-s2); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.vchart .vc-s2-dot { fill: var(--chart-s2); }
.vchart .vc-b1 { fill: var(--brand); }
/* 34%/18% measured ~2.3:1 and ~1.3:1 on the chart surface, under the 3:1
   WCAG 1.4.11 floor -- and these are the official/comparison bars our numbers
   are judged against. */
.vchart .vc-b2 { fill: color-mix(in srgb, var(--paper) 55%, transparent); }
.vchart .vc-b3 { fill: color-mix(in srgb, var(--paper) 35%, transparent); }
.vchart .vc-band90 { fill: color-mix(in srgb, var(--brand) 13%, transparent); }
.vchart .vc-band68 { fill: color-mix(in srgb, var(--brand) 26%, transparent); }
.current-outlook { margin: 28px 0 8px; }

/* Paper index result emphasis. */
.paper-result strong { color: var(--brand); font-weight: 600; }
.paper-result:has(> strong:first-child) { border-top-color: var(--line); }

/* ---------------------------------------------------------------------
   Section seams. Bands are separated by a hairline and generous, EQUAL
   space above and below it, so the eye can find where one section ends.
   --------------------------------------------------------------------- */
.band + .band,
.hero + .band { border-top: 1px solid var(--line-soft); }

/* heading rhythm inside prose: space belongs above a heading, not below */
.prose h3, .doc .prose h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: var(--s-7) 0 var(--s-3);
  color: var(--paper);
}
.prose > :first-child { margin-top: 0; }
.prose table, .prose .table-scroll, .prose figure, .prose .codeblock { margin-block: var(--s-6); }
.prose caption {
  text-align: left;
  font-size: var(--fs-small);
  color: var(--paper-dim);
  padding-bottom: var(--s-3);
}

/* --- economy dashboard --- */
.economy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-top: var(--s-6);
}
.economy-stat {
  background: var(--ink);
  padding: clamp(22px, 3vw, 34px);
  min-width: 0;
}
.economy-stat-label {
  color: var(--paper-faint);
  font-size: var(--fs-small);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.economy-stat-value {
  color: var(--paper);
  font: 500 clamp(36px, 5vw, 58px)/1 var(--display);
  letter-spacing: -.035em;
  margin: 18px 0 8px;
}
.economy-stat-change {
  color: var(--brand-strong);
  min-height: 2.7em;
}
.economy-stat dl {
  border-top: 1px solid var(--line-soft);
  margin: 22px 0 0;
  padding-top: 14px;
}
.economy-stat dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  font: var(--fs-small)/1.45 var(--mono);
}
.economy-stat dt { color: var(--paper-faint); }
.economy-stat dd { color: var(--paper); margin: 0; text-align: right; }
.economy-stat dd a { color: inherit; }
.economy-method {
  color: var(--paper-faint);
  font-size: var(--fs-body-sm);
  max-width: none;
  margin-top: var(--s-5);
}
.economy-figure-grid,
.economy-model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  max-width: var(--max);
  margin: var(--s-6) auto 0;
  padding: 0 var(--gutter);
}
.economy-figure {
  min-width: 0;
  margin: 0;
  padding: var(--s-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
}
.economy-figure svg { display: block; width: 100%; height: auto; }
.economy-chart-grid { stroke: var(--line-soft); stroke-width: 1; }
.economy-chart-line {
  fill: none;
  stroke: var(--brand-strong);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.economy-chart-dot { fill: var(--brand-strong); }
.economy-chart-label {
  fill: var(--paper-faint);
  font: var(--fs-label)/1 var(--mono);
}
.economy-chart-value {
  fill: var(--paper);
  font: 600 var(--fs-body-sm)/1 var(--mono);
}
.economy-figure figcaption { display: grid; gap: 7px; padding: 0 8px 8px; }
.economy-figure figcaption strong {
  color: var(--paper);
  font: 600 var(--fs-body)/1.35 var(--display);
}
.economy-figure figcaption span {
  color: var(--paper-faint);
  font-size: var(--fs-body-sm);
  line-height: 1.45;
}
.economy-figure figcaption a {
  color: var(--brand-strong);
  font: var(--fs-label)/1.4 var(--mono);
}
.economy-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.economy-model-card {
  padding: var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
}
.economy-model-card > span {
  color: var(--brand-strong);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.economy-model-card h3 {
  margin: 12px 0 8px;
  color: var(--paper);
  font-family: var(--display);
  font-size: var(--fs-h3-sm);
}
.economy-model-card p { color: var(--paper-dim); line-height: 1.55; }
.economy-model-card a { color: var(--brand-strong); font-family: var(--mono); }
/* Quiet, contextual research-note aside inside the forecast section. */
.economy-note-aside {
  margin-top: var(--s-5);
  padding-left: 14px;
  border-left: 2px solid var(--brand);
  color: var(--paper-dim);
  line-height: 1.55;
}
.economy-note-aside > span.mono {
  display: block;
  margin-bottom: 4px;
  color: var(--brand-strong);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.economy-note-aside a {
  color: var(--brand-strong);
  font-family: var(--mono);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.economy-note-aside .economy-note-aside-all {
  margin-left: 10px;
  color: var(--paper-faint);
}
.economy-note-aside .economy-note-aside-all:hover { color: var(--brand-strong); }
.economy-trends-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--s-6);
  border: 1px solid var(--line-soft);
  background: var(--line-soft);
}
.economy-trends-card {
  display: grid;
  gap: var(--s-5);
  min-width: 0;
  padding: clamp(24px, 4vw, 38px);
  background: var(--ink);
}
.economy-trends-card header {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.economy-trends-card header span {
  color: var(--brand-strong);
  font-size: var(--fs-label);
  letter-spacing: .08em;
}
.economy-trends-card h3 {
  margin: 0;
  color: var(--paper);
  font: 600 var(--fs-h3-sm)/1.2 var(--display);
}
.economy-trends-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
}
.economy-trends-card dl div {
  min-width: 0;
  padding: 16px;
  background: var(--surface);
}
.economy-trends-card dt {
  color: var(--paper-faint);
  font: var(--fs-label)/1.35 var(--mono);
}
.economy-trends-card dd {
  margin: 10px 0 0;
  color: var(--paper);
  font: 500 clamp(24px, 3vw, 34px)/1 var(--display);
}
.economy-trends-card dd small {
  display: block;
  margin-top: 8px;
  color: var(--paper-faint);
  font: var(--fs-label)/1 var(--mono);
}
.economy-trends-card > a {
  justify-self: start;
  color: var(--brand-strong);
  font: var(--fs-small)/1.4 var(--mono);
}
.economy-subsection {
  margin-top: var(--s-7);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line-soft);
}
.trends-page .model-hero {
  padding-top: clamp(104px, 13vh, 132px);
  padding-bottom: var(--s-4);
}
.trends-page .model-hero .lede { margin-bottom: var(--s-4); }
.trends-band { padding-top: clamp(36px, 5vw, 58px); }
.trends-heading { max-width: 760px; }
.trends-grid {
  grid-template-columns: 1fr;
  gap: var(--s-5);
  max-width: 980px;
}
.trends-grid .economy-figure {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(210px, .65fr);
  align-items: center;
  gap: clamp(18px, 4vw, 46px);
  padding: clamp(18px, 3vw, 32px);
}
.trends-grid .economy-figure figcaption {
  align-content: center;
  padding: 0;
}
.trends-grid .economy-figure figcaption strong {
  font-size: var(--fs-h3-sm);
}
.trends-related {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(280px, 1fr) auto;
  align-items: center;
  gap: var(--s-5);
  max-width: 980px;
  margin: var(--s-6) auto 0;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--brand-wash);
}
.trends-related span {
  color: var(--brand-strong);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.trends-related h2 {
  margin: 10px 0 0;
  color: var(--paper);
  font: 500 var(--fs-h3-sm)/1.2 var(--display);
}
.trends-related p { margin: 0; color: var(--paper-dim); }
.trends-related .btn { white-space: nowrap; }
.trends-page .economy-method {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
}
.economy-source-detail {
  margin-block: var(--s-5);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.economy-source-detail > summary {
  cursor: pointer;
  padding: 16px 0;
  color: var(--brand-strong);
  font: var(--fs-small)/1.5 var(--mono);
}

@media (max-width: 900px) {
  .economy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .economy-figure-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .economy-grid { grid-template-columns: 1fr; }
  .economy-model-grid { grid-template-columns: 1fr; }
  .economy-trends-directory { grid-template-columns: 1fr; }
  .economy-trends-card dl { grid-template-columns: 1fr; }
  .trends-grid .economy-figure { grid-template-columns: 1fr; gap: 8px; }
  .trends-related { grid-template-columns: 1fr; }
  .trends-related .btn { justify-self: start; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-primary,
  .contact-brief { min-height: 270px; }
  .contact-socials { grid-template-columns: 1fr; }
  .contact-socials > span { padding: 0 0 10px; }
  .contact-socials a + a { border-left: 1px solid var(--line-soft); border-top: 0; }
}

/* one callout treatment (was: left-rule callout + tinted note + bordered box) */
.callout, .opt-note, .chart-note, .soon-hint, .caveat {
  max-width: none;
}

.vlinks { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 26px; font-size: var(--fs-small); }

@media (max-width: 620px) {
  .vchart { padding: 10px 4px 4px; }
  .vchart .vc-tick { font-size: 13px; }
  .vchart .vc-lab, .vchart .vc-val { font-size: 14px; }
  .vchart .vc-rowlab { font-size: 12.5px; }
  .vchart .vc-note { font-size: 12px; }
}

/* ============================================================
   papers index cards
   ============================================================ */
.library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
.library-card {
  min-width: 0;
  padding: var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.library-card .di-id { color: var(--brand); font-family: var(--mono); font-size: var(--fs-label); }
.library-card h3 { margin: 10px 0 8px; font-family: var(--display); font-size: var(--fs-h3-sm); font-weight: 500; }
.library-card p { color: var(--paper-dim); font-size: var(--fs-body-sm); line-height: 1.55; }
.library-actions { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: var(--s-4); }
.library-actions a { color: var(--brand-strong); font-family: var(--mono); font-size: var(--fs-label); }
.paper-meta { margin-top: var(--s-4); color: var(--paper-faint) !important; font-family: var(--mono); font-size: var(--fs-label) !important; }
@media (max-width: 680px) { .library-grid { grid-template-columns: 1fr; } }

/* The wide comparison matrix is useful on desktop. On phones a deliberate
   two-model view replaces the clipped horizontal slice. */
.mobile-compare { display: none; }
.mobile-compare h3 { margin: 0 0 var(--s-4); font-family: var(--display); font-size: var(--fs-h3); font-weight: 500; }
.mobile-compare-controls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-5); }
.mobile-compare-controls label { display: grid; gap: 7px; color: var(--paper-dim); font-family: var(--mono); font-size: var(--fs-label); }
.mobile-compare-controls select { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--paper); background: var(--surface); font: inherit; }
.mobile-compare-row { padding: var(--s-5) 0; border-top: 1px solid var(--line-soft); }
.mobile-compare-row h4 { margin: 0 0 var(--s-4); color: var(--brand); font-family: var(--mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); }
.mobile-compare-row > div { padding: var(--s-3); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); }
.mobile-compare-row > div + div { margin-top: 8px; }
.mobile-compare-row strong { color: var(--paper); font-size: var(--fs-body-sm); }
.mobile-compare-row p { margin: 6px 0 0; color: var(--paper-dim); font-size: var(--fs-body-sm); line-height: 1.55; }

@media (max-width: 760px) {
  .desktop-comparison { display: none; }
  .mobile-compare { display: block; }
  .mobile-compare-controls { grid-template-columns: 1fr; }
  .validation-model-nav {
    top: 172px;
    width: calc(100% - 20px);
    max-width: none;
    border-radius: var(--radius);
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .validation-model-nav a { flex: 1 1 auto; min-height: 40px; text-align: center; }
}

/* ============================================================
   working papers — index cards + in-page PDF viewer
   ============================================================ */

/* --- papers index: metadata/result row --- */
.paper-result {
  display: block; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: var(--fs-label);
  line-height: 1.55; color: var(--paper-dim);
}
.paper-result strong { color: var(--brand); font-weight: 500; }

/* --- viewer page --- */
.paper-viewer { padding-top: clamp(96px, 14vh, 140px); }
.paper-viewer-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.paper-viewer-head > * { min-width: 0; max-width: 100%; }
.paper-viewer-head h1,
.paper-viewer-head .paper-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.25;
  margin: 6px 0 0; max-width: 30ch; color: var(--paper);
}
@media (max-width: 620px) {
  .economy-topics { top: 112px; }
  .economy-page section[id] { scroll-margin-top: 188px; }
  .paper-viewer-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .paper-viewer-head h1,
.paper-viewer-head .paper-title { width: 100%; max-width: 100%; }
}
.paper-viewer-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.paper-viewer .paper-result,
.paper-viewer > p { overflow-wrap: anywhere; }

/* the embed frame */
.pdf-frame {
  position: relative;
  width: 100%;
  height: min(78vh, 1000px);
  min-height: 460px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
}
.pdf-frame object,
.pdf-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* fallback shown by the browser when inline PDF rendering is unavailable
   (it is the <object> element's child content, so it only paints when the
   PDF handler fails) */
.pdf-fallback {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; height: 100%;
  padding: 36px 24px; text-align: center;
}
.pdf-fallback p {
  margin: 0; max-width: 46ch;
  font-size: var(--fs-body-sm); line-height: 1.6; color: var(--paper-dim);
}

.pdf-note {
  margin-top: 14px; font-family: var(--mono); font-size: var(--fs-label);
  color: var(--paper-faint);
}

/* --- mobile / touch: inline PDF embedding is unreliable (iOS Safari and most
   Android browsers render a blank box or a single page), so drop the embed
   entirely and promote a download/open card instead. --- */
.pdf-mobile { display: none; }
@media (max-width: 820px), (pointer: coarse) {
  .pdf-frame { display: none; }
  .pdf-mobile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    border: 1px solid var(--line-soft); border-radius: var(--radius);
    padding: 24px 22px; background: var(--ink-2);
  }
  .pdf-mobile p {
    margin: 0; font-size: var(--fs-body-sm); line-height: 1.6;
    color: var(--paper-dim);
  }
}

/* =====================================================================
   Dark theme.

   The vendored ui-kit ships a complete dark token set, but only behind a
   `.dark` class that nothing on this site ever sets — so it was unreachable
   dead weight. It is wired to the system preference here rather than in
   vendor/ui-kit-tokens.css, because that file is a generated upstream
   artifact ("DO NOT EDIT; refresh by re-fetching the pinned version") and a
   refresh would silently drop the wiring. Site theming policy belongs here.

   Verified before shipping: the dark set defines every token this site
   actually consumes. The only tokens it omits are --radius (a length, which
   correctly inherits from :root) and the --diverging-* / --warm-neutral
   scales, which are referenced nowhere in this repo. An automated WCAG 2.x
   sweep of every text node on all 14 pages reports zero AA failures in dark,
   given the three site-level overrides at the end of this block.

   Values below mirror the `:root.dark` block of vendor/ui-kit-tokens.css.
   Keep them in sync when refreshing that vendored file.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Page */
    --background: #0B0E14;
    --foreground: #F5F5F5;

    /* Primary (lifted up the teal scale so it pops on dark) */
    --primary: #38B2AC;
    --primary-foreground: #0B0E14;

    /* Secondary */
    --secondary: #1E293B;
    --secondary-foreground: #F5F5F5;

    /* Muted */
    --muted: #1A2030;
    --muted-foreground: #9CA3AF;

    /* Accent */
    --accent: #1E293B;
    --accent-foreground: #F5F5F5;

    /* Destructive */
    --destructive: #F87171;
    --destructive-foreground: #0B0E14;

    /* Chrome. --border bumped from #1E293B (1.32:1 on background, 1.22:1 on card — visually invisible) to #334155 (1.87:1 on bg, 1.57:1 on card). */
    --border: #334155;
    --input: #334155;
    --ring: #38B2AC;

    /* Card. Bumped from #131820 (1.08:1 on background — invisible) to #1A2030 (1.19:1 on bg). Together with the bumped --border, the card surface is now clearly distinguishable. */
    --card: #1A2030;
    --card-foreground: #F5F5F5;

    /* Popover */
    --popover: #1A2030;
    --popover-foreground: #F5F5F5;

    /* Charts (lifted up the brand scale for dark backgrounds) */
    --chart-1: #4FD1C5;
    --chart-2: #38BDF8;
    --chart-3: #81E6D9;
    --chart-4: #7DD3FC;
    --chart-5: #94A3B8;

    /* Background variants */
    --background-secondary: #0B0E14;
    --background-tertiary: #0F1320;

    /* Border scale */
    --border-light: #1E293B;
    --border-medium: #334155;
    --border-dark: #475569;

    /* Text semantic aliases */
    --text-primary: #F5F5F5;
    --text-secondary: #CBD5E1;
    --text-tertiary: #94A3B8;
    --text-inverse: #000000;

    /* Accessible-on-dark text variants — picked at AA on #0B0E14 */
    --text-warning: #FFB066;
    --text-error: #F87171;
    --text-success: #4FD1C5;

    /* Primary alpha variants (re-tuned for dark primary) */
    --primary-alpha-40: rgba(56, 178, 172, 0.4);
    --primary-alpha-50: rgba(56, 178, 172, 0.5);
    --primary-alpha-60: rgba(56, 178, 172, 0.6);

    /* Site-level tokens that are literal values rather than vendor aliases,
       so they need an explicit dark counterpart.
       Contrast measured against --background #0B0E14 / --card #1A2030:
         --paper-faint    #A9B4C4   9.21:1 on bg, 7.74:1 on card
         --brand-deep     #81E6D9  13.11:1 on bg (hover/pressed, lifted
                                    above --primary's 7.48:1)
         --brand-warning  #FFB066  10.72:1 on bg */
    --paper-faint: #A9B4C4;
    --brand-deep: #81E6D9;
    --brand-warning: #FFB066;
  }
}

/* Ambient field — restored, deliberately quieter than the original.
   Density and alpha roughly halved from the original, and the three things that
   actually pulled the eye off the text are gone: the twinkle (oscillating
   opacity), the mouse parallax, and the glow halo on heavy points. What remains
   is slow uniform drift.

   The canvas is position:fixed, so the mask is VIEWPORT-relative, not
   document-relative: the field is densest in the upper part of whatever you are
   looking at and clears by 88vh, leaving the bottom of every screen clean. It
   does still pass behind body copy while scrolling — that is intended, and is
   readable because text no longer fades in (the reveal animation that used to
   hold copy at opacity:0 is retired). Motion stops under prefers-reduced-motion,
   handled in field.js. */

/* The verdict band — "how far to trust it" on every model page, and the
   validation summary. This is the suite's distinguishing claim (each model
   publishes how far it can be checked), so it gets a surface of its own rather
   than reading as one more section. Kept quiet: a tint and a top rule, no box.
   .band-result was referenced on all five model pages with no rule behind it. */
.band.band-result, .band + .band.band-result {
  background: color-mix(in srgb, var(--brand) 4%, transparent);
  /* Specificity note: `.band + .band` (0,2,0) sets the generic hairline, so a
     bare `.band-result` (0,1,0) loses and the accent rule silently vanishes. */
  border-top: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
}
.band-result > .band-head .kicker { color: var(--brand); }
@media (prefers-color-scheme: dark) {
  .band-result { background: color-mix(in srgb, var(--brand) 9%, transparent); }
}

/* Model card grid: give the cards room and a consistent stacking rhythm.
   .band-stack was referenced on the homepage models section with no rule. */
.band-stack { padding-top: var(--s-7); }

/* Hero fan: the two quarter labels bracketing the x-axis. They carry the
   date range, so unlike the value ticks they survive at narrow widths where
   .hf-tick is hidden. */
.hf-q { fill: var(--paper-faint); }
@media (max-width: 1000px) { .hf-tick.hf-q { display: initial; } }

/* honest-warning cells in validation tables (over-band, imposed, targeted) */
/* Was --brand-strong: the same teal as links, series 1 and .metric-val, so
   "Weak" read in the site's affirmative accent. --brand-warning is AA-tested. */
/* SVG text takes `fill`, not `color`, so the shared rule below set a
   property nothing reads and `.vchart text { fill: var(--paper-dim) }` won:
   every vc-warn line inside a chart rendered as muted grey at the browser
   default 16px instead of the warning colour. The HTML cells were always
   fine, so the bug was invisible wherever both appeared together. */
.vchart .vc-warn { fill: var(--brand-warning); font-weight: 600; font-size: 12px; }
td.vc-warn, th.vc-warn { color: var(--brand-warning); font-weight: 600; }

/* Methodology step diagrams: dashboard schematics remapped to site tokens,
   click to expand in a modal. */
.step-diagram {
  --accent: var(--brand-strong);
  --accent-light: var(--brand-wash);
  --bg-diagram: var(--surface);
  --pe-color-gray-500: var(--paper-faint);
  --text-light: var(--paper-faint);
  --text-mid: var(--paper-dim);
  position: relative;
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  cursor: zoom-in;
}
.step-diagram rect[fill="#fff"] { fill: var(--surface); }
.step-diagram {
  display: flex;
  justify-content: center;
  align-items: center;
}
.step-diagram svg { display: block; margin: 0 auto; }
.step-diagram .expand-hint {
  position: absolute;
  right: 10px;
  bottom: 8px;
  margin: 0;
  color: var(--paper-faint);
  font-size: var(--fs-label);
  opacity: 0;
  transition: opacity .15s ease;
}
.step-diagram:hover .expand-hint,
.step-diagram:focus-visible .expand-hint { opacity: 1; }
.step-diagram:hover { border-color: var(--brand); }
.diagram-modal[hidden] { display: none; }
.diagram-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter: blur(6px);
}
.diagram-modal-box {
  --accent: var(--brand-strong);
  --accent-light: var(--brand-wash);
  --bg-diagram: var(--surface);
  --pe-color-gray-500: var(--paper-faint);
  --text-light: var(--paper-faint);
  --text-mid: var(--paper-dim);
  max-width: min(940px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--ink);
}
.diagram-modal-box rect[fill="#fff"] { fill: var(--surface); }
.diagram-modal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.diagram-modal-title { font-weight: 600; }
.diagram-modal-close {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  width: 30px; height: 30px;
  background: none;
  color: var(--paper-dim);
  font-size: 16px;
  cursor: pointer;
}
.diagram-modal-close:hover { color: var(--brand-strong); border-color: var(--brand); }
.diagram-modal-body svg { width: 100%; height: auto; }

/* At a glance: UK and US side by side as cards; the source note sits
   under each table rather than crowding the top. */
.glance-both { display: block; }
.glance-col {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  min-width: 0;
}
.glance-title {
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  color: var(--paper);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}
.glance-col table { width: 100%; }
.glance-col caption {
  caption-side: bottom;
  padding-top: var(--s-4);
  text-align: left;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--paper-faint);
}
@media (max-width: 960px) { .glance-both { grid-template-columns: 1fr; } }

/* ---------- OLG showcase runtime charts (/olg #showcase) ----------
   Appended rules only: toolbar selects, per-chart legends and a panel-title
   text class for the SVG charts drawn at runtime from tpi_data.json. */
.olg-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  margin: 18px 0 4px;
}
/* label + select share one pill, dashboard style */
.olg-toolbar label {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--mono); font-size: var(--fs-label);
  color: var(--paper-faint); text-transform: uppercase; letter-spacing: 0.06em;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.olg-toolbar label:hover, .olg-toolbar label:focus-within {
  border-color: var(--brand);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--paper) 8%, transparent);
}
.olg-toolbar select {
  font: inherit; font-family: var(--body); font-size: var(--fs-small);
  font-weight: 600; text-transform: none; letter-spacing: normal;
  color: var(--paper);
  background: transparent; border: 0; border-radius: 999px;
  padding: 2px 6px; min-width: 11ch; cursor: pointer;
}
.olg-toolbar select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.olg-chart svg { width: 100%; height: auto; display: block; }
.olg-legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 8px 0 2px;
  font-family: var(--mono); font-size: 0.76rem; color: var(--paper-dim);
}
.olg-legend .li { display: inline-flex; align-items: center; gap: 7px; }
.olg-legend .ln {
  display: inline-block; width: 24px; height: 0;
  border-top: 2.4px solid var(--paper-dim);
}
.olg-legend .ln.dashed { border-top-style: dashed; }
.olg-legend .ln.dotted { border-top-style: dotted; border-top-width: 2.8px; }
.olg-legend .ln.grey { border-top-color: #95a5a6; }
.olg-legend .ln.gold { border-top-color: #b8860b; }
.vchart .vc-title { fill: var(--text); font-size: 12.5px; font-weight: 600; }

/* ============================================================
   papers/psl-og — paper page with the OG-UK subtab bar.
   Header offset lives on .model-tabs-first below; these rules
   cover the page's callouts only. Scoped to that page.
   ============================================================ */
.paper-viewer-tabbed .callout strong { color: var(--brand); font-weight: 600; }
.cite-note { margin-top: var(--s-4); }

/* Subtab bar as the first element of <main> (paper pages): clear the fixed
   header instead of sliding under it. */
.model-tabs-first { margin-top: calc(var(--nav-h, 62px) + 34px); }
.model-tabs-first + .paper-viewer { padding-top: clamp(28px, 5vh, 48px); }

/* Methodology freeze-box, structured like the dashboard: bordered card,
   header strip with a filled step badge, scrollable body; inside it,
   uppercase section titles with a trailing rule, one white sub-card per
   labelled equation, and arrow output-lines. */
.meth-panel, .meth-inline {
  border: 2px solid var(--brand-strong);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.meth-inline { margin-top: var(--s-4); }
.meth-panel .meth-panel-head, .meth-inline .meth-panel-head {
  margin: 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--brand-wash) 60%, transparent);
}
.meth-panel-body-pad { padding: 16px 18px 18px; }
.meth-panel > :not(.meth-panel-head), .meth-inline > :not(.meth-panel-head) {
  margin-left: 18px;
  margin-right: 18px;
}
.meth-panel > :last-child, .meth-inline > :last-child { margin-bottom: 18px; }
.meth-panel-badge {
  padding: 4px 11px;
  border-radius: 6px;
  background: var(--brand-strong);
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 600;
}
.meth-sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-4);
  color: var(--brand-strong);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.meth-sec-title::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.meth-eq {
  margin: 8px 0;
  padding: 12px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--ink);
  overflow-x: auto;
}
.meth-eq-label {
  margin-bottom: 6px;
  color: var(--brand-strong);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.meth-eq-body { text-align: center; }
/* Narrative sub-headings: bold sentence case, not uppercase micro-labels. */
.meth-step h4 {
  margin: var(--s-5) 0 var(--s-2);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--paper);
}

/* The sticky freeze-box never grows past the viewport: overflowing panel
   content scrolls inside the card. */
.scrolly-sticky .meth-panel {
  max-height: calc(100vh - var(--nav-h, 62px) - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.scrolly-sticky .meth-panel .meth-panel-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--brand-wash) 60%, var(--ink));
}

/* ============================================================
   .mo- : model OVERVIEW pages (olg/obr/svar/frb-us/us-hank/pe)
   Appended polish only — framed figure/table/chart cards follow
   the homepage .glance-col idiom (hairline border, 10px radius,
   surface background, caption below).
   ============================================================ */

/* framed card around a standalone figure (wraps OUTSIDE any
   generated marker block; never touches the generated markup) */
.mo-figcard {
  margin: var(--s-6) auto;
  max-width: 820px;
  padding: var(--s-4) var(--s-5) var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  min-width: 0;
}
.mo-figcard .vfig,
.mo-figcard figure { margin: 0; }
.mo-figcard .vfig figcaption,
.mo-figcard figure figcaption {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  text-align: left;
}

/* clean-table card: same frame; the caption reads as a source
   note under the table, matching the homepage glance cards */
.table-scroll.mo-tablecard {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
}
.mo-tablecard table caption {
  caption-side: bottom;
  padding-top: var(--s-4);
  text-align: left;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--paper-faint);
}
.mo-tablecard table tr:last-child th,
.mo-tablecard table tr:last-child td { border-bottom: 0; }

/* interactive showcase (/olg): toolbar + chart + legend read as
   one card consistent with the figure treatment above */
.mo-chartcard {
  margin: var(--s-6) auto;
  max-width: 880px;
  padding: var(--s-4) var(--s-5) var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  min-width: 0;
}
.mo-chartcard .olg-toolbar {
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
}
.mo-chartcard .olg-legend {
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}

/* fact lines: enumerable results pulled out of a paragraph wall,
   in the .qa-fact idiom (icon + line, hover wash) */
.mo-facts {
  margin: var(--s-5) 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}
.mo-fact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 4px;
  color: var(--paper-dim);
  max-width: none;
}
.mo-fact + .mo-fact { border-top: 1px solid var(--line-soft); }
.mo-fact:hover { background: var(--brand-wash); }
.mo-fact .icon { flex: 0 0 auto; color: var(--brand-strong); font-weight: 600; }

/* section rhythm: the opening paragraph of a band reads a touch
   larger, so each section starts with a visible beat */
.prose .mo-lead {
  font-size: 1.06em;
  line-height: 1.7;
}

/* Overview figures stay chart-sized: cap the SVG height inside cards
   and center it, rather than stretching to the reading column. */
.mo-figcard svg, .mo-chartcard svg {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-height: 380px;
  height: auto;
}

/* Code-page scrollytelling: steps are code-length, not screen-length —
   no 90vh minimum, tight rhythm, run-out only after the last step so
   its panel can still activate. */
.scrolly-code .meth-step {
  min-height: auto;
  padding-top: 36px;
  padding-bottom: 36px;
}
.scrolly-code .meth-step:first-child { padding-top: 0; }
.scrolly-code .meth-step:last-child { min-height: auto; padding-bottom: 45vh; }
.scrolly-code .meth-step > :last-child { margin-bottom: 0; }
.scrolly-code .meth-step h4:first-of-type { margin-top: var(--s-3); }

/* Inline code in prose reads as a chip. */
.doc .prose p code,
.doc .prose li code,
.doc .prose td code,
.meth-step code {
  padding: 1px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--surface);
  font-size: var(--fs-code-inline);
}
.codeblock code, .code-window code, pre code { border: 0; background: none; padding: 0; }

/* OLG configuration dial cards: one card per dial, one row per choice
   (replaces the old three-column dials table on /olg/code/). */
.dial-cards {
  display: grid;
  gap: 10px;
  margin: var(--s-3) 0;
}
.dial-card {
  padding: 10px 14px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  font-size: var(--fs-small);
}
.dial-name {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  color: var(--brand-strong);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.dial-choice {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 6px;
  border-radius: 4px;
}
.dial-choice + .dial-choice { border-top: 1px solid var(--line-soft); }
.dial-choice:hover { background: var(--brand-wash); }
.dial-choice > code { flex: 0 0 auto; white-space: nowrap; }
.dial-tradeoff { color: var(--paper-dim); }
@media (max-width: 560px) {
  .dial-choice { flex-direction: column; gap: 2px; }
}

/* ============================================================
   .cmp- : /olg/validation comparison tables (OG-UK vs OBR)
   Appended scannability polish on top of .mo-tablecard.
   ============================================================ */
.cmp-compare table th,
.cmp-compare table td {
  padding: var(--s-3) var(--s-4);
  vertical-align: top;
}
/* row headers: quieter, small mono — the data columns lead */
.cmp-compare table tbody th[scope="row"] {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--paper-faint);
}
/* the label column carries a subtle brand wash */
.cmp-compare table thead th:first-child,
.cmp-compare table tbody th[scope="row"] {
  background: var(--brand-wash);
}
/* /models#validation, "By model" panel: the label column holds model ids,
   which are identifiers, not prose, so they must never wrap. `width: 1%`
   with `white-space: nowrap` is the shrink-to-fit idiom for an auto-layout
   table — the column collapses to the widest name and the remaining width
   goes to the prose columns, so one long verification-class cell can no
   longer squeeze model names onto two lines. Scoped to this panel: the
   sibling "Vs other institutions" table and the /olg and /frb-us tables
   use sentence-length row headers that must stay wrappable. */
#val-p1.cmp-compare table thead th:first-child,
#val-p1.cmp-compare table tbody th[scope="row"],
#val-p1 .cmp-compare table thead th:first-child,
#val-p1 .cmp-compare table tbody th[scope="row"] {
  width: 1%;
  white-space: nowrap;
}

/* One frame, not three: charts inside cards drop the inner .vchart box,
   and the toolbar/legend hairlines go — the card border does the work. */
.mo-chartcard .vchart, .mo-figcard .vchart, .olg-chart .vchart { border: 0; border-radius: 0; padding: 0; }
.mo-chartcard .olg-toolbar { border-bottom: 0; padding-bottom: 0; }
.mo-chartcard .olg-legend { border-top: 0; padding-top: 4px; }
.olg-legend { font-family: inherit; }

/* Side-by-side model comparison cards. */
.vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin: var(--s-4) 0 var(--s-6);
}
.vs-card {
  padding: var(--s-4) var(--s-5) var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  min-width: 0;
}
.vs-card-head {
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  font-weight: 600;
}
.vs-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-size: var(--fs-small);
  color: var(--paper-dim);
}
.vs-line .icon { flex: 0 0 auto; color: var(--brand-strong); font-weight: 600; }
@media (max-width: 820px) { .vs-grid { grid-template-columns: 1fr; } }

/* Model chooser: questions expand in place. */
.qa-list { display: grid; gap: var(--s-3); }
.qa {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.qa summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }

/* Rows arrive in sequence rather than as one block, so the eye reads the
   suite as a list of seven choices. --qa-i restarts per .qa-list, so the
   second list does not inherit the first list's delays. The global
   prefers-reduced-motion rule disables all of this. */
@keyframes qa-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.qa-list.in-view .qa {
  animation: qa-in 380ms cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--qa-i, 0) * 55ms);
}
.qa { transition: border-color 180ms ease, transform 180ms ease; }
.qa:hover { border-color: var(--brand-strong); }
.qa[open] { border-color: var(--brand-strong); }
.qa summary::after { transition: transform 180ms ease; }
.qa[open] summary::after { transform: rotate(45deg); }

.qa summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--brand-strong);
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
}
.qa[open] summary::after { content: "\2212"; }
.qa summary:hover { background: var(--brand-wash); }
.qa summary span { flex: 1 1 auto; font-weight: 600; font-size: var(--fs-body); }
.qa summary strong {
  flex: 0 0 auto;
  padding: 4px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--brand-strong);
  background: var(--brand-wash);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  white-space: nowrap;
}
.qa-body { padding: 0 var(--s-5) var(--s-4); border-top: 1px solid var(--line-soft); }
.qa-body > p:first-child { margin-top: var(--s-4); color: var(--paper-dim); }
.qa-facts {
  margin: var(--s-4) 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  overflow: hidden;
}
.qa-fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  font-size: var(--fs-small);
  color: var(--paper-dim);
}
.qa-fact + .qa-fact { border-top: 1px solid var(--line-soft); }
.qa-fact:hover { background: var(--brand-wash); }
.qa-fact .icon { flex: 0 0 auto; color: var(--brand-strong); font-weight: 600; }
.qa-link { margin: var(--s-3) 0 0; }
.qa-link a {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  color: var(--brand-strong);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.qa-link a:hover { background: var(--brand-wash); text-decoration: none; }
.qa-link a:hover { text-decoration: underline; }

/* ---------- .vmet-: OBR validation metric strip + notes ----------
   Unified stat strip: no per-tile background boxes; four identical
   stats separated by hairlines only. The numbers carry the contrast. */
.vmet-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: var(--s-6) 0 var(--s-6);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 720px) { .vmet-strip { grid-template-columns: repeat(4, 1fr); } }
/* Inside a scrollytelling column the 4-up strip has ~560px, not the full band
   width, and it needs ~660px: the viewport media query above cannot see that,
   so the fourth stat was being clipped (overflow-x is visible here, so it did
   not even scroll).
   The column width is set by the scrolly grid, NOT by the viewport, so this
   has to be a CONTAINER query. A first attempt used @media (min-width:1500px)
   to restore 4-up on big screens and reintroduced the same bug from the other
   side: at a 1728px viewport the query matched while the column was still
   562px, and the strip clipped again. Two-up is the floor; 4-up returns only
   when the column itself is wide enough to hold it. */
.scrolly-steps { container-type: inline-size; }
.scrolly-steps .vmet-strip { grid-template-columns: repeat(2, 1fr); }
@container (min-width: 700px) {
  .scrolly-steps .vmet-strip { grid-template-columns: repeat(4, 1fr); }
}

.vmet-stat {
  padding: 22px 4px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: none;
}
.vmet-stat:last-child { border-bottom: none; }
@media (min-width: 720px) {
  .vmet-stat { padding: 24px 24px 22px; border-bottom: none; border-left: 1px solid var(--line-soft); }
  .vmet-stat:first-child { border-left: none; padding-left: 4px; }
}
.vmet-label {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 12px;
}
.vmet-val {
  font-family: var(--display);
  font-size: var(--fs-stat);
  font-weight: 500;
  color: var(--brand-strong);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.vmet-unit { font-family: var(--mono); font-size: var(--fs-small); color: var(--paper-faint); font-weight: 400; }
.vmet-note { display: block; font-family: var(--mono); font-size: var(--fs-label); color: var(--paper-faint); margin-top: 10px; line-height: 1.5; }

/* compact definition/caveat block under the configurations table,
   in the .qa-fact idiom: keyed lines, no run-on paragraph */
/* Key/value notes.
   Three constraints at once: keys must align across lines, values must wrap
   as normal prose, and inline markup inside a value (a link, a <code>) must
   stay inline. display:flex on the line fails the third -- every child
   becomes a flex item, which once shrank "working paper" into a 40px box
   broken across three lines. A hanging indent fixes that but fails the
   first: a key wider than the indent (e.g. "uk microdata") shunts its own
   value out of line with the others.
   So the GRID lives on the container and each line is display:contents, so
   every key and value becomes a direct grid item of one shared two-column
   grid. Columns then align across all lines whatever the longest key is, and
   each value is a single item whose contents flow inline. */
.vmet-notes {
  max-width: 80ch;
  margin: var(--s-4) auto var(--s-5);
  font-size: var(--fs-label);
  color: var(--paper-faint);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  align-items: baseline;
}
.vmet-notes-line {
  display: contents;
  gap: 10px;
  margin: 0;
  padding: 4px 0;
  line-height: 1.6;
}
.vmet-notes-key {
  min-width: 0;
  color: var(--brand-strong);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: 600;
}
.vmet-notes-line a { color: var(--paper-dim); }

/* ---- validation evidence blocks (shared by /validation and the per-model
   validation subtabs, which now host the generated charts) ---- */
.more { border-top: 1px solid var(--line-soft); margin: 26px 0 0; padding-top: 4px; }
.more > summary {
  cursor: pointer; list-style: none; padding: 14px 0;
  font-family: var(--mono); font-size: var(--fs-small);
  color: var(--paper-faint);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "+ "; }
.more[open] > summary::before { content: "\2212 "; }
.more > summary:hover, .more > summary:focus-visible { color: var(--text, #111); }
.more > :last-child { margin-bottom: 8px; }
/* additional vchart marks used by the evidence charts */
.vchart .vc-band { fill: color-mix(in srgb, var(--brand) 16%, transparent); stroke: none; }
.vchart .vc-edge { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.vchart .vc-s3 { fill: none; stroke: color-mix(in srgb, var(--paper) 45%, transparent); stroke-width: 2; stroke-linejoin: round; }

/* /models hub: offset anchor targets below the sticky subtab bar. */
.models-page section[id] { scroll-margin-top: 132px; }

.olg-legend .ln-s1 { border-top-color: var(--brand); border-top-style: solid; }
.olg-legend .ln-s2 { border-top-color: var(--chart-s2); border-top-style: dashed; }

@media (min-width: 900px) {
  .evidence-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Comparison table: collapsed to its first row until expanded. */
.cmp-clamped tbody tr:nth-child(n+2) { display: none; }
.cmp-toggle {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: none;
  color: var(--brand-strong);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}
.cmp-toggle:hover { background: var(--brand-wash); }

/* ============================================================
   .fc- : /forecasts track-record page polish (appended only).
   Wrappers sit OUTSIDE the generated scorecard marker blocks and
   restyle the generated markup without touching it.
   ============================================================ */

/* Stat tiles -> unified .vmet-strip treatment: no per-tile boxes,
   hairline separators only; the numbers carry the contrast. */
.fc-vmet .forecast-summary {
  gap: 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: none;
}
.fc-vmet .forecast-summary article {
  padding: 22px 4px 20px;
  background: none;
  border-bottom: 1px solid var(--line-soft);
}
.fc-vmet .forecast-summary article:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .fc-vmet .forecast-summary article {
    padding: 24px 24px 22px;
    border-bottom: 0;
    border-left: 1px solid var(--line-soft);
  }
  .fc-vmet .forecast-summary article:first-child { border-left: 0; padding-left: 4px; }
}
.fc-vmet .forecast-summary strong { color: var(--brand-strong); font-weight: 500; }
.fc-vmet .forecast-summary span {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
@media (max-width: 719px) {
  .fc-vmet .forecast-summary { grid-template-columns: 1fr; }
}

/* Model-vs-official figures and tables -> the .mo-figcard /
   .mo-tablecard card idiom used on the model overview pages. */
.fc-vs-cards .vchart-figure {
  margin: var(--s-6) auto;
  max-width: 1080px;
  padding: var(--s-4) var(--s-5) var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  min-width: 0;
}
.fc-vs-cards .vchart-figure .vchart { border: 0; border-radius: 0; padding: 0; background: none; }
/* Open-round chart switcher. Built at runtime by the script at the foot of
   /forecasts (see there); without JavaScript no tab bar exists and all three
   figures stay stacked and visible, so nothing ships hidden. Aligned to the
   figure card width above so the underline sits over the chart it selects. */
.fc-chart-tabs {
  max-width: 1080px;
  margin: var(--s-6) auto 0;
  gap: var(--s-6);
  border-bottom: 1px solid var(--line-soft);
}
.fc-chart-tabs button { padding: var(--s-4) 2px; }
.fc-chart-panel > .chart-intro { max-width: 1080px; margin: var(--s-5) auto 0; }
.fc-chart-panel > .vchart-figure { margin-top: var(--s-3); }
.fc-chart-panel:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.fc-vs-cards .vchart-figure figcaption {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  text-align: left;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--paper-faint);
}
.fc-vs-cards .table-scroll {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
}
.fc-vs-cards .table-scroll table caption {
  caption-side: bottom;
  padding-top: var(--s-4);
  text-align: left;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--paper-faint);
}
.fc-vs-cards .table-scroll table tr:last-child th,
.fc-vs-cards .table-scroll table tr:last-child td { border-bottom: 0; }
/* tinted label column, matching .cmp-compare */
.fc-vs-cards .table-scroll table tbody th[scope="row"] {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--paper-faint);
}
.fc-vs-cards .table-scroll table thead th:first-child,
.fc-vs-cards .table-scroll table tbody th[scope="row"] {
  background: var(--brand-wash);
}

/* The generated BoE MPR/SEF provenance paragraph (inside the
   scorecard-vs-official marker block) is restated in the keyed
   bullet block immediately after the block; suppress the
   duplicate paragraph visually without touching generated markup. */


.glance-range { display: block; margin-top: 2px; color: var(--paper-faint); font-size: var(--fs-label); }

.glance-tabs { display: flex; justify-content: center; margin-bottom: var(--s-4); }
.glance-col { max-width: 860px; margin: 0 auto; }

/* Homepage glance: stat rows instead of a table. */
.glance-rows { display: grid; }
.glance-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) 1fr auto 1.3fr;
  align-items: center;
  gap: var(--s-4);
  padding: 12px 0;
}
.glance-row + .glance-row { border-top: 1px solid var(--line-soft); }
.g-name { font-weight: 600; }
.g-name small { color: var(--paper-faint); font-weight: 400; margin-left: 4px; }
.g-cell strong { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
.g-cell .mono { margin-left: 6px; color: var(--paper-faint); font-size: var(--fs-label); }
.g-cell small { display: block; margin-top: 1px; color: var(--paper-faint); font-size: var(--fs-label); }
.g-arrow { color: var(--brand-strong); font-weight: 600; }
.glance-caption {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  color: var(--paper-faint);
  font-size: var(--fs-body-sm);
}
@media (max-width: 640px) {
  .glance-row { grid-template-columns: 1fr 1fr; }
  .g-name { grid-column: 1 / -1; }
  .g-arrow { display: none; }
}

.glance-col[hidden] { display: none; }

.glance-row-head {
  padding: 6px 0;
  color: var(--paper-faint);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}
.glance-row-head .g-name { font-weight: 500; }

/* Merged Activity/markets/releases sub-headings on the economy pages. */
.economy-subhead {
  margin: var(--s-6) 0 var(--s-3);
  font-size: var(--fs-h4, 1.1rem);
  letter-spacing: 0.01em;
}

.forecast-summary article small {
  display: block;
  margin-top: 4px;
  color: var(--paper-faint);
  font-size: var(--fs-label);
  line-height: 1.45;
  max-width: 30ch;
}

.chart-intro { color: var(--paper-dim); font-size: var(--fs-body-sm); margin: 0 0 var(--s-3); }
.vs-band { color: var(--paper-faint); font-size: var(--fs-label); white-space: nowrap; }
.fc-vs-cards table caption { caption-side: top; text-align: left; padding-bottom: var(--s-3); }

/* Hero headline: exactly two lines on desktop, natural wrap on mobile. */
.hero-h1 span { display: block; }
@media (min-width: 1000px) {
  .hero-h1 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); white-space: nowrap; }
}
@media (max-width: 999px) {
  .hero-h1 span { display: inline; }
}

/* ---------------------------------------------------------------------------
   /data series catalogue — a table with expandable rows.

   A table because comparing series down a column is the job. Expandable
   because saying everything needed nine columns and horizontal scrolling,
   and still hid the vintage history the store exists for. Detail rows ship
   open and are collapsed by script, so the no-JS page is complete.
--------------------------------------------------------------------------- */
.table-controls { margin: var(--s-4) 0 0; }
.series-show-all {
  border: 1px solid var(--line-soft);
  background: none;
  cursor: pointer;
  padding: 7px 14px;
  font: var(--fs-label)/1.4 var(--mono);
  color: var(--brand-strong);
}
.series-show-all:hover { background: var(--paper-faint); }
.series-show-all:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
.series-table { width: 100%; border-collapse: collapse; }
.series-table thead th {
  text-align: left;
  font: var(--fs-label)/1.4 var(--mono);
  color: var(--paper-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 var(--s-4) 10px 0;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.series-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.series-group { border-bottom: 1px solid var(--line-soft); }
.series-row > * { padding: 12px var(--s-4) 12px 0; vertical-align: baseline; }
.series-row > th { padding-left: 0; font-weight: 400; }
.series-row .mono { font: var(--fs-label)/1.4 var(--mono); color: var(--paper-dim); }

/* The row header is the disclosure control: whole label is the hit target. */
.series-toggle {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 0;
  background: none;
  padding: 0 0 0 20px;
  text-align: left;
  cursor: pointer;
  position: relative;
  color: inherit;
  font: inherit;
}
.series-toggle .series-name { font-weight: 600; }
.series-toggle::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--brand-strong);
  border-bottom: 1.5px solid var(--brand-strong);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}
.series-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.series-toggle:hover .series-name { color: var(--brand-strong); }
.series-toggle:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }

.series-detail-row > td { padding: 0 0 var(--s-5) 20px; }
.series-detail-row dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-3) var(--s-5);
  margin: 0 0 var(--s-4);
}
.series-detail-row dt { font-size: var(--fs-label); color: var(--paper-dim); }
.series-detail-row dd { margin: 2px 0 0; font-size: var(--fs-body-sm); }
.series-vintages-head { font-size: var(--fs-label); color: var(--paper-dim); margin: 0 0 8px; }
.vintage-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.vintage-list li { margin: 0; }
.vintage-list a {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--line-soft);
  font-size: var(--fs-label);
}

@media (max-width: 700px) {
  .series-table thead { display: none; }
  .series-row { display: grid; grid-template-columns: 1fr auto; }
  .series-row > td { padding-right: 0; }
  .series-detail-row > td { padding-left: 20px; }
}

/* =====================================================================
   HOMEPAGE (index.html only, except where noted)

   The page runs as one argument: the hero states the claim (seven open
   models, each says how far to trust it) beside the fan chart whose own
   caption admits "no forecast skill"; the .band-result band under it
   holds the two proof objects side by side — the three-grade verdict
   ladder and the one scored forecast period drawn to scale; then the
   system tour (core → extensions → joins), the live glance tables, and
   the start band. Two-panel compositions repeat down the page (hero,
   proof band, core split) so it reads as one hand.
   ===================================================================== */

/* --- the verdict band under the hero --- */
/* h2 is capped at 26ch site-wide, which is right for a section label and
   wrong for a two-sentence claim: it broke this one over five short lines. */
.verdict-claim {
  max-width: 34ch;
  text-wrap: balance;
}
.home-page .band-result .section-intro { max-width: 72ch; }

/* Scoping note for everything below: this sheet is global across 96 pages,
   so the blocks added here use names no other page carries (checked), and
   the ones generic enough to be claimed later by another page — .calc*,
   .rail*, .join*, .core-*, .xt-*, .proof-*, .scored-* — are additionally
   scoped to .home-page. .verdict-* and .rung-* are left unscoped, matching
   .verdict-claim above. No shared rule is touched: .pipeline and .qa-fact
   keep their own definitions untouched, and this page's pipeline overrides
   are all under `.home-page .join`. */

/* --- the proof band: two panels, verdicts beside the score ---
   The differentiator has two working parts — every model gets a graded
   verdict, and every forecast is scored after the fact — so the band
   shows both at once, in the same top-ruled, mono-headed panel idiom as
   the core split below. On mobile the panels stack, ladder first,
   matching the intro sentence's order. */
.home-page .proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 1000px) {
  .home-page .proof-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
}
.home-page .proof-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--s-3);
  border-top: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
}
.home-page .proof-head {
  margin: 0 0 var(--s-4);
  color: var(--brand-strong);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
/* both panels close on their link, on one baseline */
.home-page .proof-col .qa-link { margin-top: auto; padding-top: var(--s-5); }

/* The three grades are a scale: an ordered list, strongest at the top,
   one row per grade separated by a full-width rule so the rows read as
   one object. The step mark on the left fills 3 → 2 → 1, so the
   direction of the scale is visible before any word is read. Inside the
   half-width proof panel the grade sits above its example — two short
   lines beat three cramped columns at this measure. */
.verdict-ladder {
  margin: 0;
  padding: 0;
  list-style: none;
}
.verdict-rung {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: baseline;
  gap: 6px var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
}
.rung-grade {
  color: var(--brand-strong);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.rung-what {
  grid-column: 2;
  color: var(--paper-dim);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}
/* Ascending bars, filled from the left: three lit for the strongest grade,
   one for the weakest. Decorative — the order is already carried by the
   list itself and by "strongest first" in the intro. */
.rung-step {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  translate: 0 3px;
}
.rung-step i {
  display: block;
  width: 7px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--paper-faint) 34%, transparent);
}
.rung-step i:nth-child(1) { height: 8px; }
.rung-step i:nth-child(2) { height: 13px; }
.rung-step i:nth-child(3) { height: 18px; }
.rung-step i.on { background: var(--brand); }
.verdict-rung:first-child { padding-top: var(--s-2); }

/* --- 01, the core: the arithmetic, then the limits ---
   These were two .qa-fact rows: a worked calculation and a statement about
   survey uncertainty, narrated as prose in the same undifferentiated
   format. They are now two panels side by side, because the pair is the
   point — the same run gives an exact answer for one household and an
   estimate for the country, and the caveat sits at the same weight as the
   claim rather than in a footnote under it. */
.home-page .core-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  margin-top: var(--s-5);
}
@media (min-width: 900px) {
  .home-page .core-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-7); }
}
.home-page .core-panel { padding-top: var(--s-3); border-top: 2px solid var(--brand); }
.home-page .core-panel + .core-panel { border-top-color: color-mix(in srgb, var(--paper-faint) 45%, transparent); }
.home-page .core-panel-head {
  margin: 0 0 var(--s-4);
  color: var(--brand-strong);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.home-page .core-panel + .core-panel .core-panel-head { color: var(--paper-dim); }
.home-page .core-panel-foot {
  margin: var(--s-4) 0 0;
  color: var(--paper-dim);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  max-width: 62ch;
}
.home-page .core-panel-foot strong { color: var(--paper); font-weight: 650; }
.home-page .core-panel-foot a { color: var(--brand-strong); white-space: nowrap; }

/* The worked example is numbers, so it is set as numbers: one line per
   figure, the amounts right-aligned in tabular mono so the columns check
   by eye, and a rule above the total. The personal allowance is a note on
   the income-tax line, not a row of its own — it is the reason that line
   reads £7,486, not a fourth thing subtracted from £50,000. */
.home-page .calc { margin: 0; }
.home-page .calc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px var(--s-4);
  padding: 10px 0;
}
.home-page .calc-row + .calc-row { border-top: 1px solid var(--line-soft); }
.home-page .calc-row dt { margin: 0; color: var(--paper-dim); font-size: var(--fs-body-sm); line-height: 1.4; }
.home-page .calc-row dd {
  margin: 0;
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.home-page .calc-op {
  display: inline-block;
  width: 1.1em;
  color: var(--paper-dim);
  font-family: var(--mono);
}
.home-page .calc-note {
  display: block;
  margin-top: 3px;
  margin-left: 1.1em;
  color: var(--paper-faint);
  font-size: var(--fs-label);
  line-height: 1.45;
}
.home-page .calc-total { padding-top: 12px; }
.home-page .calc-row + .calc-total { border-top: 2px solid color-mix(in srgb, var(--paper) 60%, transparent); }
.home-page .calc-total dt { color: var(--paper); font-weight: 600; }
.home-page .calc-total dd { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.01em; }
.home-page .calc-identity { color: var(--paper); font-size: var(--fs-mono); white-space: nowrap; }

.home-page .core-limits { margin: 0; padding: 0; list-style: none; }
.home-page .core-limits li {
  padding: 10px 0 10px var(--s-4);
  border-left: 2px solid color-mix(in srgb, var(--brand-warning) 55%, transparent);
  color: var(--paper-dim);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  max-width: 62ch;
}
.home-page .core-limits li + li { margin-top: var(--s-3); }
.home-page .core-limits strong { color: var(--paper); font-weight: 650; }

/* --- 02, the extensions: a ledger, not a card wall ---
   Six models were six bordered cards in a 2x2x2 grid, each restating the
   same anatomy. As rows on ruled lines — name, what it adds, the
   evidence with its limit — the section scans down one column per
   question and echoes the worked-example ledger in 01. */
.home-page .xt-list {
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.home-page .xt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px var(--s-6);
  padding: var(--s-4) 0 var(--s-5);
  border-bottom: 1px solid var(--line-soft);
}
.home-page .xt-id {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-3);
  row-gap: 2px;
}
.home-page .xt-id a {
  color: var(--brand-strong);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  text-decoration: none;
}
.home-page .xt-id a:hover { text-decoration: underline; }
.home-page .xt-tag {
  color: var(--paper-faint);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.home-page .xt-tag-warn { color: var(--brand-warning); }
.home-page .xt-what {
  margin: 0;
  color: var(--paper);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1.5;
}
.home-page .xt-proof {
  margin: 0;
  max-width: 92ch;
  color: var(--paper-dim);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
}
.home-page .xt-proof strong { color: var(--paper); font-weight: 650; }
@media (min-width: 960px) {
  .home-page .xt-row {
    grid-template-columns: 176px minmax(0, 1fr) minmax(0, 1.55fr);
    align-items: baseline;
    padding: var(--s-5) 0;
  }
  .home-page .xt-id { display: grid; align-content: start; gap: 5px; }
  .home-page .xt-what { font-weight: 500; }
}

/* --- 03, the joins: one chain per join ---
   Was a pipeline strip, a caption, and three .qa-fact rows that each spelled
   a chain out in a sentence — including one that re-narrated the strip
   directly above it. Each join is now drawn as the chain it is (what goes
   in, which model, what comes out) with its own numbers keyed underneath,
   so the result sits on the chain that produced it. The terminal node
   carries the honest ending: og+microsim stops at "No scored result". */
.home-page .join-lead {
  margin: 0 0 var(--s-6);
  color: var(--paper-dim);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
}
.home-page .join-lead a { color: var(--brand-strong); }
.home-page .join-list { margin: 0; padding: 0; list-style: none; }
.home-page .join {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line-soft);
}
.home-page .join:first-child { border-top-color: var(--line); }
.home-page .join:last-child { border-bottom: 1px solid var(--line-soft); }
.home-page .join .pipeline { justify-content: flex-start; margin-block: 0 var(--s-4); }
/* The two ends of a chain are results, not models: no link, no hover, and
   the stop node is dashed so a chain that produces nothing looks different
   from one that produces a number. */
.home-page .join .pl-node-out { background: var(--brand-wash); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.home-page .join .pl-node-stop {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--brand-warning) 55%, transparent);
  color: var(--paper-dim);
}
.home-page .join-lines { display: grid; gap: 8px; margin: 0; }
.home-page .join-lines > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: baseline;
  gap: 2px var(--s-4);
}
.home-page .join-lines dt {
  margin: 0;
  color: var(--paper-faint);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.home-page .join-lines dd {
  margin: 0;
  max-width: 92ch;
  color: var(--paper-dim);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
}
.home-page .join-lines strong { color: var(--paper); font-weight: 650; }
/* The caveat gets the same slot, the same measure and the same emphasis as
   the result line, plus a keyed colour — never smaller, never after a link. */
.home-page .join-caveat dt { color: var(--brand-warning); }
.home-page .join-more { margin: var(--s-4) 0 0; }
.home-page .join-more a { color: var(--brand-strong); font-size: var(--fs-body-sm); }
.home-page .join-note {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--s-4);
  margin: var(--s-5) 0 0;
  color: var(--paper-dim);
  font-size: var(--fs-body-sm);
}
.home-page .join-note .mono {
  flex: 0 0 120px;
  color: var(--paper-faint);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
/* Below ~560px four nodes and three arrows cannot share a row without the
   node text going ragged, so the flow turns vertical and the arrows turn
   with it. Scoped to .join: .pipeline itself is on 45 other pages. */
@media (max-width: 560px) {
  .home-page .join .pipeline { flex-direction: column; align-items: stretch; }
  .home-page .join .pipeline .pl-node { text-align: center; }
  .home-page .join .pipeline .pl-arrow { display: block; text-align: center; rotate: 90deg; }
  .home-page .join-lines > div { grid-template-columns: 1fr; }
}

/* --- the one scored period ---
   The only scored result the project has, drawn as the comparison it
   describes: the 68% band to scale, the forecast marked on it, the
   outturn marked beside it. The "not a track record" line keeps the same
   width and a keyed rule, so the caveat is read with the hit and not
   after it. */
.home-page .scored-subject {
  margin: 0 0 var(--s-6);
  color: var(--paper);
  font-size: var(--fs-h4);
  font-weight: 600;
}
.home-page .scored-subject .mono { color: var(--paper-dim); font-weight: 400; }
.home-page .scored-rail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  max-width: 560px;
}
.home-page .rail-cap {
  grid-area: 1 / 1 / 2 / 4;
  margin: 0 0 var(--s-3);
  color: var(--paper-faint);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.home-page .rail-lab {
  width: max-content;
  max-width: 100%;
  margin: 0;
  position: relative;
  left: var(--x);
  translate: -50% 0;
  color: var(--paper-dim);
  font-size: var(--fs-body-sm);
  white-space: nowrap;
}
.home-page .rail-lab strong { font-variant-numeric: tabular-nums; font-weight: 650; }
.home-page .rail-lab-f { grid-area: 2 / 2 / 3 / 3; margin-bottom: 7px; }
.home-page .rail-lab-f strong { color: var(--brand-strong); }
.home-page .rail-lab-o { grid-area: 4 / 2 / 5 / 3; margin-top: 7px; }
.home-page .rail-lab-o strong { color: var(--paper); }
.home-page .rail-end {
  color: var(--paper-faint);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
}
.home-page .rail-end-lo { grid-area: 3 / 1 / 4 / 2; }
.home-page .rail-end-hi { grid-area: 3 / 3 / 4 / 4; }
.home-page .rail {
  grid-area: 3 / 2 / 4 / 3;
  position: relative;
  display: block;
  height: 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
}
.home-page .rail-tick {
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: var(--x);
  width: 2px;
  translate: -1px 0;
  border-radius: 1px;
}
.home-page .rail-tick::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  translate: -50% 0;
  border-radius: 50%;
}
.home-page .rail-tick-f { background: var(--brand-strong); }
.home-page .rail-tick-f::after { top: -3px; background: var(--brand-strong); }
.home-page .rail-tick-o { background: var(--paper); }
.home-page .rail-tick-o::after { bottom: -3px; background: var(--paper); }
.home-page .scored-note {
  margin: var(--s-5) 0 0;
  max-width: 66ch;
  color: var(--paper-faint);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.home-page .scored-verdict {
  margin: var(--s-4) 0 0;
  padding-left: var(--s-4);
  max-width: 66ch;
  border-left: 2px solid var(--brand-warning);
  color: var(--paper-dim);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}
.home-page .scored-verdict strong { color: var(--paper); font-weight: 650; }

/* --- start-using-it row --- */
.start-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5) var(--s-7);
}
.start-row .ai-client-row { margin: 0; }

/* --- reading measure on the homepage ---
   The bands run to --max (1320px). That is right for the model grid and the
   at-a-glance tables, and wrong for running text: the joins caveat was
   setting a single ~150-character line. Text blocks get a measure; data
   blocks keep the full band. Scoped to .home-page — .section-intro is
   shared with three other pages. */
.home-page .section-intro { max-width: 980px; }

/* At ≤640px .glance-row collapses to two columns and .g-arrow is hidden, but
   the header row still spent a cell on the arrow gap, so "latest outturn" and
   "model near-term forecast" stacked instead of sitting over their columns. */
@media (max-width: 640px) {
  .home-page .glance-row-head span:nth-of-type(3) { display: none; }
}

/* ---------------------------------------------------------------------
   Landing page: one left edge, one right edge.

   Rendered at 1440 the page had three alignments competing. Sections 01
   and 03 stopped at 980px because the text measure was applied to the
   CARD as well as to the running text; section 02's grid ran the full
   1320px band; and section 04's country tabs and table were centred by
   `.glance-tabs { justify-content: center }`, inherited from /economy
   where that block is the whole page. Three edges in one scroll, and the
   eye cannot find the column.

   The measure belongs on prose, not on a card: capping .strategy-card
   also made the CORE model's card narrower than the six extension cards
   below it, which inverts the hierarchy the section exists to state.
   --------------------------------------------------------------------- */
.home-page .strategy-card { max-width: none; }
.home-page .strategy-card p { max-width: 88ch; }
.home-page .glance-tabs { justify-content: flex-start; }
.home-page #now .glance-col { margin-inline: 0; max-width: 980px; }


/* ---------- model horizon map (landing 02) ----------
   Six models placed on one shared time axis, split into UK and US lanes, so
   the reader can see at a glance which model answers over which horizon
   instead of reading six paragraphs to find out. Evidence strength is in the
   shape itself: a solid outline is checked against an external published
   anchor, a dashed one has no independent outcome benchmark. Fonts come from
   the tokens, never a hardcoded family. */
.mm-figure { margin: var(--s-6) 0 var(--s-5); }
.model-map {
  display: block;
  width: 100%;
  max-width: 940px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.model-map text { font-family: var(--body); }
.mm-band { fill: color-mix(in srgb, var(--brand) 4%, transparent); }
.mm-div { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 3 4; }
.mm-axis { stroke: var(--line); stroke-width: 1.5; }
.mm-lanediv { stroke: var(--line-soft); stroke-width: 1; }
.mm-lane {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  fill: var(--paper-faint);
  letter-spacing: .06em;
}
.mm-zone {
  font-family: var(--mono);
  font-size: 12px;
  fill: var(--paper-faint);
}
.mm-pill {
  fill: var(--surface);
  stroke: var(--brand-strong);
  stroke-width: 1.5;
  transition: fill 180ms ease, stroke-width 180ms ease;
}
.mm-pill-soft { stroke-dasharray: 5 4; stroke: var(--paper-faint); }
.mm-key { stroke-width: 1.5; }
.mm-id {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  fill: var(--paper);
}
.mm-what { font-size: 12px; fill: var(--paper-faint); }
.mm-legend { font-size: 11px; fill: var(--paper-faint); }
.model-map a { cursor: pointer; }
.model-map a:hover .mm-pill { fill: color-mix(in srgb, var(--brand) 10%, transparent); stroke-width: 2.5; }
.model-map a:hover .mm-id { fill: var(--brand-strong); }
.model-map a:focus-visible .mm-pill { stroke-width: 3; }
.mm-evidence { margin-top: var(--s-5); }

@media (max-width: 720px) {
  /* The map is a two-dimensional layout; below this width it stops being
     readable at all, so the evidence lines carry the section on their own. */
  .mm-figure { display: none; }
}