/* Vertical Observer — dark-first instrument typography.
   Colour is reserved for one job: how strong the evidence behind a figure is.
   Everything else is graphite, so the provenance ramp is the only thing on
   screen competing for a reader's attention.

   Fonts are self-hosted rather than linked from Google, so no reader's IP
   reaches a third party for a typeface. */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}
/* Literata is trimmed to what this stylesheet renders: weight 400-500 (the
   range declared here) and optical size 12-20 (every Literata size on the
   site is 12.5-19px), which halves the file with the same outlines. It is
   preloaded wherever the other faces are. */
@font-face {
  font-family: "Literata";
  src: url("fonts/literata.woff2") format("woff2-variations");
  font-weight: 400 500;
  font-display: swap;
  font-style: normal;
}
/* Georgia scaled to Literata's metrics, so the swap moves no line. size-adjust
   is the ratio of the two faces' average advance over the site's own text;
   the overrides are Literata's ascent and descent (1177 and 308 per 1000)
   divided by it. Without it the swap re-wrapped every serif paragraph: CLS
   0.11 on a phone guide, 0.14 on desktop /data/market/. */
@font-face {
  font-family: "Literata Fallback";
  src: local("Georgia");
  size-adjust: 107.5%;
  ascent-override: 109.5%;
  descent-override: 28.65%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
/* Dark is the base, by design — not a media-query branch. Light is opt-in. */

:root {
  --ground:     #0A0C09;
  --surface:    #12150F;
  --raised:     #191D16;
  --rule:       #262B22;
  --rule-soft:  #1D2119;
  --rule-hard:  #3A4234;

  --ink:        #EDF0E7;
  --read:       #C9CFC0;
  --body:       #B4BBA9;
  --muted:      #949C88;   /* 6.9:1 on ground — was #7C8474 at 5.1 */
  --faint:      #8A927F;   /* 6.1:1 on ground — was #5A6153 at 3.1, unreadable */

  --accent:     #abd216;
  --accent-hot: #f0f200;

  /* the provenance ramp */
  --official:    #54c73a;
  --official-bd: rgba(84, 199, 58, 0.38);
  --official-bg: rgba(84, 199, 58, 0.08);
  --estimate:    #abd216;
  --estimate-bd: rgba(171, 210, 22, 0.38);
  --estimate-bg: rgba(171, 210, 22, 0.08);
  --reported:    #ccce0f;
  --reported-bd: rgba(204, 206, 15, 0.34);
  --reported-bg: rgba(204, 206, 15, 0.07);
  --company:     #f0f200;
  --company-bd:  rgba(240, 242, 0, 0.34);
  --company-bg:  rgba(240, 242, 0, 0.07);

  --display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --read-face: Literata, "Literata Fallback", Georgia, "Iowan Old Style", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The signature bands. Fixed in both themes: this is the brand, not a
     surface, so it must not flip with the reader's preference. Dark ink on it
     measures 11.2:1. */
  --signature:    #abd216;
  --on-sig:       #0A0C09;
  --on-sig-soft:  rgba(10, 12, 9, 0.82);
  --on-sig-rule:  rgba(10, 12, 9, 0.20);

  --maxw: 1280px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ground:     #F7F8F3;
  --surface:    #FFFFFF;
  --raised:     #EDEFE6;
  --rule:       #DCE0D2;
  --rule-soft:  #E6E9DE;
  --rule-hard:  #B7BEAA;

  --ink:        #14170F;
  --read:       #33372C;
  --body:       #43483B;
  --muted:      #5E6656;   /* 5.6:1 on paper */
  --faint:      #666E5D;   /* 5.0:1 on paper — was #8A9280 at 3.0 */

  --accent:     #4F7A0A;
  --accent-hot: #6E7000;

  /* the same hues, darkened until each clears 4.5:1 on paper — measured as
     a chip (text on its own tint) over ground, surface and raised, since a
     chip in a table header cell sits on raised */
  --official:    #2C7320;
  --official-bd: rgba(47, 122, 34, 0.35);
  --official-bg: rgba(84, 199, 58, 0.13);
  --estimate:    #566F0B;
  --estimate-bd: rgba(95, 122, 13, 0.35);
  --estimate-bg: rgba(171, 210, 22, 0.14);
  --reported:    #666802;
  --reported-bd: rgba(117, 119, 3, 0.35);
  --reported-bg: rgba(204, 206, 15, 0.13);
  --company:     #6A6C00;
  --company-bd:  rgba(110, 112, 0, 0.35);
  --company-bg:  rgba(240, 242, 0, 0.16);

  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hot); text-decoration: underline; text-underline-offset: 2px; }

::selection { background: var(--accent); color: var(--ground); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the accent is the band colour: on the masthead and footer the ring takes the
   band's ink instead (11.2:1), or a keyboard user cannot see where they are */
header.mast :focus-visible, footer.foot :focus-visible { outline-color: var(--on-sig); }
/* the sticky nav (62px) must never cover what has focus, nor a jump target */
html { scroll-padding-top: 72px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; }
/* it sits over the band but outside header.mast, so it needs the band's ring itself */
.skip:focus-visible { outline-color: var(--on-sig); }
/* after a skip, focus lands on main; a ring round the whole column says nothing */
main[tabindex="-1"]:focus { outline: none; }
.skip:focus { left: 16px; background: var(--ink); color: var(--ground); padding: 8px 12px;
  font-family: var(--mono); font-size: 13px; border: 0; cursor: pointer; }

/* -------------------------------------------------------------- masthead */

header.mast { background: var(--signature); color: var(--on-sig); border-bottom: none; }
header.mast .wordmark,
header.mast .live .txt b { color: var(--on-sig); }
header.mast .tagline,
header.mast .live .txt { color: var(--on-sig-soft); }
header.mast .live .dot { background: var(--on-sig); box-shadow: none; }
/* the one control on the signature band: solid black, so it reads as the
   single interactive thing rather than a hairline on green */
header.mast .iconbtn {
  background: var(--on-sig); color: var(--signature);
  border-color: var(--on-sig); font-weight: 500;
}
header.mast .iconbtn:hover { background: #000; border-color: #000; color: #fff; }
header.mast .brand:hover .wordmark { color: var(--on-sig); }

/* On a signature band the mark sits on its own dark tile — that is the app
   icon, and it keeps the three-step readout legible against the green. */
header.mast .mark,
footer.foot .ftmark {
  background: var(--on-sig); border-radius: 7px;
  padding: 8px 10px; box-sizing: content-box;
}
.mast-in {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 36px; flex-wrap: wrap;
  /* keep .wrap's 40px inset — a shorthand with 0 here pulled the masthead
     40px left of every other element on the page */
  padding: 26px 40px 22px;
}
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand svg { flex: 0 0 auto; display: block; }
.wordmark {
  font-size: clamp(23px, 3.2vw, 30px); font-weight: 700;
  letter-spacing: -0.028em; line-height: 1; color: var(--ink); margin: 0;
}
.tagline {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin: 9px 0 0;
}
.mast-meta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.live { display: flex; align-items: center; gap: 8px; }
.live .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 9px var(--accent);
}
.live .txt { font-family: var(--mono); font-size: 11px; color: var(--body); letter-spacing: 0.06em; }
.mast-actions { display: flex; gap: 8px; }
.iconbtn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; background: transparent; color: var(--muted);
  border: 1px solid var(--rule); padding: 6px 11px; cursor: pointer;
  text-decoration: none; line-height: 1.5;
}
.iconbtn:hover { color: var(--ink); border-color: var(--accent); text-decoration: none; }

/* ------------------------------------------------------------------- nav */

/* The nav sits between a bright signature band and the content, and a
   gradient was not enough to hold its own between them. It now gets a solid
   surface of its own, a signature edge tying it to the masthead, and an active
   tab that is a filled block rather than an underline. */
nav.tabs {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface);
  border-top: 3px solid var(--signature);
  border-bottom: 1px solid var(--rule-hard);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .55);
}
.tabs-in { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.tabs-in::-webkit-scrollbar { display: none; }
nav.tabs::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 48px;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  background: linear-gradient(90deg, transparent, var(--surface));
}
nav.tabs.scrollable::after { opacity: 1; }

.tabs button {
  font-family: var(--mono); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: none; border: none; border-bottom: 3px solid transparent;
  color: var(--body); padding: 18px 20px 15px; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.tabs button:hover { color: var(--ink); background: var(--raised); }
.tabs button.on {
  background: var(--signature); color: var(--on-sig);
  font-weight: 600; border-bottom-color: var(--signature);
}
.tabs button.on:hover { background: var(--signature); color: var(--on-sig); }

/* ----------------------------------------------------------------- views */

main { padding: 40px 0 90px; min-height: 60vh; }
.view { display: none; }
.view.on { display: block; }

.view-head { margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.view-head h2 {
  font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 8px;
}
.view-head p { margin: 0; color: var(--body); font-size: 15px; max-width: 74ch; font-family: var(--read-face); line-height: 1.68; }

h3 { font-size: 20px; font-weight: 600; color: var(--ink); margin: 34px 0 10px; letter-spacing: -0.015em; }
p { margin: 0 0 13px; max-width: 72ch; }

/* ----------------------------------------------------------------- chips */

.chip {
  display: inline-block; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 4px 9px; white-space: nowrap; border: 1px solid transparent;
}
.chip.official { color: var(--official); border-color: var(--official-bd); background: var(--official-bg); }
.chip.estimate { color: var(--estimate); border-color: var(--estimate-bd); background: var(--estimate-bg); }
.chip.reported { color: var(--reported); border-color: var(--reported-bd); background: var(--reported-bg); }
.chip.company  { color: var(--company);  border-color: var(--company-bd);  background: var(--company-bg); }
.chip.dim      { color: var(--muted); border-color: var(--rule); }
.chip.cat      { color: var(--body); background: var(--raised); }

/* --------------------------------------------------------------- filters */

.filters {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  margin: 0 0 8px; padding-bottom: 20px; border-bottom: 1px solid var(--rule-soft);
}
.filters input[type="search"], .filters select {
  font-family: var(--display); font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule);
  padding: 9px 12px; min-width: 190px; border-radius: 0;
}
.filters input[type="search"]::placeholder { color: var(--faint); }
.filters .count { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: auto; letter-spacing: 0.06em; }
.pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 10px 14px; cursor: pointer;
  background: transparent; border: 1px solid var(--rule); color: var(--muted);
}
.pill:hover { color: var(--ink); border-color: var(--accent); }
.pill.on { background: var(--accent); border-color: var(--accent); color: var(--ground); font-weight: 500; }

/* ------------------------------------------------------------------ feed */

.dayline {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink);
  padding: 44px 0 11px; margin-bottom: 4px;
  border-bottom: 2px solid var(--accent);
  display: flex; justify-content: space-between; align-items: baseline;
  position: sticky; top: 44px; background: var(--ground); z-index: 20;
}
.dayline:first-child { padding-top: 8px; }
.dayline .n { color: var(--muted); letter-spacing: 0.1em; }

article.story {
  border-bottom: 1px solid var(--rule-soft);
  padding: 26px 20px; margin: 0 -20px;
  transition: background .12s;
}
article.story:hover { background: var(--surface); }
article.story h3 {
  font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.014em;
  color: var(--ink); margin: 0; cursor: pointer; text-wrap: pretty;
}
article.story h3 a { color: inherit; }
article.story h3:hover { color: var(--accent); }
article.story .dek {
  font-family: var(--read-face); font-size: 15.5px; line-height: 1.66;
  color: var(--body); margin: 11px 0 0; max-width: 68ch;
}
article.story .st-foot {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  margin-top: 15px; font-family: var(--mono); font-size: 11.5px; color: var(--muted);
}
article.story .body { margin-top: 16px; display: none; max-width: 68ch; }
article.story.open {
  border-left: 2px solid var(--accent);
  padding-left: 18px;
  background: var(--surface);
}
article.story.open:hover { background: var(--surface); }
article.story.open h3 { color: var(--accent); }
article.story.open .body { display: block; }
article.story .body p {
  font-family: var(--read-face); font-size: 16.5px; line-height: 1.72; color: var(--read);
}
.srclist { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); }
.srclist .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 8px;
}
.srclist a { display: inline; font-size: 14px; }
.srclist > div { margin-bottom: 5px; line-height: 1.6; }
.srclist .outlet { color: var(--muted); font-family: var(--mono); font-size: 11px; margin-left: 6px; }

/* ----------------------------------------------------------------- stats */

/* The tracks were 168px, which broke "$11bn to $22bn" across two lines at
   25px mono. Sized to the longest figure the data actually carries. */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 0 0 30px;
}
.stat { background: var(--surface); padding: 18px 16px; }
.stat .n {
  font-family: var(--mono); font-size: 23px; font-weight: 500;
  line-height: 1.15; color: var(--ink); display: block;
  letter-spacing: -0.02em;
}
.stat .l { font-size: 13px; color: var(--body); margin-top: 8px; display: block; line-height: 1.45; }
.stat .s { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 8px; display: block; }

/* ----------------------------------------------------------------- cards */

.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.grid.g2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid.g3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.co { background: var(--surface); padding: 20px; cursor: pointer; border-left: 2px solid transparent; transition: background .12s; }
.co:hover { background: var(--raised); border-left-color: var(--accent); }
.co .nm { font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.014em; text-wrap: pretty; }
.co .cat { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.07em; text-transform: uppercase; }
.co .sm { font-family: var(--read-face); font-size: 13.5px; line-height: 1.6; margin: 12px 0 0; color: var(--body); }
.co .kv { font-family: var(--mono); font-size: 12px; color: var(--ink); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-soft); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* A line that records the absence of a figure is not data: it reads in the
   body tone, so full-strength ink is reserved for actual numbers. */
.co .kv.kv-none { color: var(--body); font-style: normal; }

/* ----------------------------------------------------------------- table */

.tscroll { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); margin: 0 0 26px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 13px 18px; vertical-align: top; }
th {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); font-weight: 500;
  background: var(--raised); position: sticky; top: 0; white-space: nowrap;
}

/* Sortable headers. The whole cell is the control, so the target is the
   header's full size rather than the width of its word. */
th.sortable { padding: 0; }
.sortbtn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 13px 18px; margin: 0; border: none; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  text-align: left; white-space: nowrap;
}
.sortbtn:hover { background: color-mix(in srgb, var(--ink) 7%, var(--raised)); }
.sortbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sorti { flex: none; }
/* muted, not faded: the arrows are how a reader learns the column sorts, so
   they carry real contrast rather than a low-opacity hint */
.sorti path { fill: var(--muted); }
th:not([aria-sort]) .sortbtn:hover .sorti path { fill: var(--ink); }
th[aria-sort="ascending"] .sorti .up,
th[aria-sort="descending"] .sorti .dn { fill: var(--ink); }
th[aria-sort="ascending"] .sorti .dn,
th[aria-sort="descending"] .sorti .up { opacity: .35; }
/* the sorted column is marked the way the site marks every current position:
   a signature rule, never a provenance colour */
th[aria-sort] { box-shadow: inset 0 -2px 0 var(--signature); }
@media (max-width: 760px) { .sortbtn { padding: 16px 16px; } }

/* read by assistive technology, not drawn */
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
td { border-top: 1px solid var(--rule-soft); color: var(--body); line-height: 1.55; }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--raised) 45%, transparent); }
tbody td:first-child { color: var(--ink); font-weight: 500; }
tbody tr:hover { background: var(--raised); }
table { font-variant-numeric: tabular-nums; }
/* A record here spans two rows — data, then its note — so nth-child zebra
   striping would tint every note row instead of every other record. The record
   boundary is drawn instead, and the note is tied to the row above it by
   having no rule between them. */
.t-spill tbody tr:nth-child(even) { background: none; }
.t-spill tbody tr.has-spill > td { border-top: 1px solid var(--rule-hard); padding-bottom: 4px; }
.t-spill tbody tr.has-spill:hover, .t-spill tbody tr.has-spill:hover + tr.spill { background: var(--raised); }
.t-spill tbody tr.spill:hover { background: var(--raised); }
tr.spill > td {
  border-top: none; padding: 0 18px 15px;
  font-family: var(--read-face); font-size: 13.5px; line-height: 1.6;
  color: var(--read); max-width: 100ch;
}
.spill-l {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-right: 10px;
}

td.num, td .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
td b { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------------- reg */

.instr { background: var(--surface); border: 1px solid var(--rule); border-left: 2px solid var(--rule-hard); padding: 26px 28px; margin: 0 0 16px; }
/* the left rule and the status chip agree: settled law reads green, a draft
   or a proposal reads as the unsettled end of the same ramp */
.instr.f-official { border-left-color: var(--official); }
.instr.f-company  { border-left-color: var(--company); }
.instr h4 { font-size: 23px; font-weight: 600; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.018em; }
.instr .juris { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.instr .status {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  padding: 7px 12px; display: inline-block; margin: 14px 0 4px;
  border: 1px solid var(--rule); color: var(--body); background: var(--raised);
}
.instr .status.official { color: var(--official); border-color: var(--official-bd); background: var(--official-bg); }
.instr .status.company  { color: var(--company);  border-color: var(--company-bd);  background: var(--company-bg); }
.instr .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint); display: block; margin: 24px 0 9px;
}
.instr p { font-family: var(--read-face); font-size: 14.5px; line-height: 1.7; color: var(--read); max-width: 78ch; }
.instr ul { margin: 0; padding: 0; list-style: none; }
.instr li {
  font-family: var(--read-face); font-size: 14px; line-height: 1.6; color: var(--body);
  padding-left: 17px; position: relative; margin-bottom: 9px;
}
.instr li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: var(--accent); }
.tl { list-style: none; padding: 0; margin: 12px 0 0; }
.tl li {
  display: grid; grid-template-columns: 108px 1fr; gap: 18px;
  padding: 10px 0; border-bottom: 1px solid var(--rule-soft);
  font-family: var(--read-face); font-size: 14px; line-height: 1.55;
}
.tl li::before { display: none; }
.tl li .d { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.tl li:first-child .d { color: var(--accent); }

/* ------------------------------------------------------------- slideover */

.sheet {
  position: fixed; inset: 0 0 0 auto; width: min(720px, 100%);
  background: var(--surface); border-left: 1px solid var(--rule);
  z-index: 90; overflow-y: auto; padding: 26px 32px 80px;
  transform: translateX(101%); transition: transform .18s ease, visibility 0s linear .18s;
  box-shadow: -24px 0 60px rgba(0, 0, 0, .5);
}
/* visible at once on opening (focus moves into it), hidden only once it has slid out */
.sheet.on { transform: translateX(0); transition: transform .18s ease; }
/* closed: no shadow on the band, and out of the accessibility tree */
.sheet:not(.on) { box-shadow: none; visibility: hidden; }
.sheet .x {
  position: sticky; top: 0; float: right; font-family: var(--mono); font-size: 11px;
  background: var(--surface); border: 1px solid var(--rule); color: var(--muted);
  padding: 6px 11px; cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase;
}
.sheet .x:hover { color: var(--ink); border-color: var(--accent); }
.sheet h3 { margin-top: 4px; font-size: 25px; }
.sheet p { font-family: var(--read-face); font-size: 14.5px; line-height: 1.68; color: var(--read); }
.scrim {
  position: fixed; inset: 0; background: rgba(5, 7, 4, .68);
  z-index: 80; opacity: 0; pointer-events: none; transition: opacity .18s;
}
.scrim.on { opacity: 1; pointer-events: auto; }

dl.kv2 {
  display: grid; grid-template-columns: minmax(120px, 178px) 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); margin: 18px 0;
}
dl.kv2 dt {
  background: var(--raised); padding: 10px 14px; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
dl.kv2 dd { background: var(--surface); padding: 10px 14px; margin: 0; font-size: 14px; color: var(--body); }

/* ------------------------------------------------------------------ misc */

.note {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 2px solid var(--accent); padding: 16px 20px; margin: 0 0 26px;
  font-family: var(--read-face); font-size: 14px; line-height: 1.68; color: var(--body);
}
.note strong { color: var(--ink); font-weight: 500; }
.empty { color: var(--muted); font-style: italic; padding: 48px 0; text-align: center; }

.prose { max-width: 74ch; }
.prose h3:first-child { margin-top: 0; }
.prose p { font-family: var(--read-face); font-size: 16px; line-height: 1.72; color: var(--read); }

footer.foot {
  border-top: none; margin-top: 72px; padding: 44px 0 52px;
  font-size: 13px; background: var(--signature); color: var(--on-sig);
}
footer.foot a { color: var(--on-sig); text-decoration: none; }
footer.foot a:hover { color: var(--on-sig); text-decoration: underline; text-underline-offset: 2px; }
footer.foot .ftcols,
footer.foot .ftnav,
footer.foot .ftcopy { border-color: var(--on-sig-rule) !important; }
footer.foot .ftdesc,
footer.foot .cred,
footer.foot .ftparent,
footer.foot .ftdisc,
footer.foot .ftcopy,
footer.foot .madeby { color: var(--on-sig); }
footer.foot .ftdesc b,
footer.foot .ftdisc em { color: var(--on-sig); }
footer.foot h5 { color: var(--on-sig-soft); }
footer.foot .colibri .mb { color: var(--on-sig-soft); }
/* the supplied Anthropic mark is dark-on-transparent — correct as-is on green */
footer.foot .anthropic-logo { filter: none; opacity: .82; }
footer.foot .madeby:hover .anthropic-logo { opacity: 1; }
:root[data-theme="light"] footer.foot .anthropic-logo { filter: none; opacity: .82; }
/* wordmark now ships dark; no inversion in either theme */
:root[data-theme="light"] footer.foot .colibri .cw { filter: none; }

/* brand block + credits, as on the sister properties */
footer.foot .ftcols {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 48px; padding-bottom: 30px; border-bottom: 1px solid var(--rule-soft);
}
footer.foot .ftbrand { display: flex; gap: 18px; align-items: flex-start; }
footer.foot .ftmark { flex: 0 0 auto; margin-top: 2px; }
footer.foot .ftdesc {
  font-family: var(--read-face); font-size: 13.5px; line-height: 1.68;
  color: var(--on-sig); margin: 0; max-width: 62ch;
}
/* on-sig, not ink: ink is near-white in dark mode and measured 1.5:1 on the band */
footer.foot .ftdesc b { color: var(--on-sig); font-weight: 500; font-family: var(--display); }
footer.foot .ftcredits { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
footer.foot .cred {
  font-family: var(--read-face); font-size: 12.5px; line-height: 1.6;
  color: var(--on-sig); max-width: 56ch;
}
footer.foot .cred a { display: inline; }
footer.foot .madeby {
  display: inline-flex; align-items: center; gap: 9px; color: var(--on-sig);
  text-decoration: none; white-space: nowrap;
}
footer.foot .madeby:hover { color: var(--ink); text-decoration: none; }
footer.foot .anthropic-logo {
  height: 15px; width: auto; display: inline-block; vertical-align: middle;
  /* the mark is dark-on-transparent and the footer band is light green,
     so it is used as supplied — no inversion in either theme */
  filter: none; opacity: .82;
}

footer.foot .ftnav {
  display: flex; gap: 56px; flex-wrap: wrap;
  padding: 28px 0; border-bottom: 1px solid var(--rule-soft);
}
footer.foot h5 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-sig-soft); margin: 0 0 10px; font-weight: 400;
}
footer.foot a { display: block; margin-bottom: 5px; }

footer.foot .ftparent {
  font-family: var(--read-face); font-size: 12.5px; color: var(--on-sig);
  margin: 24px 0 0; max-width: none;
}
footer.foot .ftdisc {
  font-family: var(--read-face); font-size: 13px; line-height: 1.75;
  color: var(--on-sig); margin: 14px 0 0; max-width: 96ch;
}
footer.foot .ftdisc em { color: var(--on-sig); font-style: normal; font-weight: 500; }
footer.foot .ftdisc a { display: inline; }
footer.foot .ftcopy {
  font-family: var(--mono); font-size: 11.5px; color: var(--on-sig);
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--rule-soft);
}

footer.foot .madeline { margin-top: 22px; }
footer.foot .colibri {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; white-space: nowrap; line-height: 1; opacity: .82;
}
footer.foot .colibri:hover { opacity: 1; text-decoration: none; }
footer.foot .colibri .mb { font-size: 12px; color: var(--on-sig); }
footer.foot .colibri .bird,
footer.foot .colibri .cw { height: 22px; width: auto; display: inline-block; vertical-align: middle; }

@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  .mast-in { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 20px 20px; }
  .sheet { padding: 22px 20px 70px; }
  dl.kv2 { grid-template-columns: 1fr; }
  dl.kv2 dt { border-top: 1px solid var(--rule); }
  .tl li { grid-template-columns: 1fr; gap: 4px; }
  article.story h3 { font-size: 19px; }
  article.story { padding: 22px 16px; margin: 0 -16px; }
  .filters input[type="search"], .filters select { min-width: 0; width: 100%; }
  .filters .count { margin-left: 0; }
  .instr { padding: 20px 18px; }

  /* The masthead was taking 48% of a phone's first screen before any
     content — tighten the stack rather than drop information. */
  .mast-in { gap: 12px; }
  .tagline { font-size: 11px; letter-spacing: 0.03em; margin-top: 7px; }
  .mast-meta { gap: 10px 16px; width: 100%; justify-content: space-between; }
  .live .txt { font-size: 11px; }
  nav.tabs::after { opacity: 1; }

  /* The desktop prominence treatment was being applied whole on a phone,
     where the nav is already the dominant element: 54px tall, and the strip
     ran 769px inside a 375px viewport so barely two and a half tabs showed.
     Trimming the padding and the tracking — not the type size — brings the
     strip to about 560px and the bar to 44px, still a full touch target. */
  nav.tabs { border-top-width: 2px; }
  .tabs button {
    font-size: 12.5px; letter-spacing: 0.07em;
    padding: 13px 13px 11px; border-bottom-width: 2px;
  }
  nav.tabs::after { width: 34px; }

  /* The footer kept its two-column grid on a phone, and the nowrap
     "Made possible by" lockup then pushed the document to 478px inside a
     375px viewport — the whole page scrolled sideways. */
  footer.foot .ftcols { grid-template-columns: 1fr; gap: 28px; }
  footer.foot .ftbrand { gap: 14px; }
  footer.foot .ftnav { gap: 28px; }
  footer.foot .madeby { white-space: normal; flex-wrap: wrap; }
  footer.foot .anthropic-logo { max-width: 100%; }
  footer.foot .colibri { flex-wrap: wrap; }
  footer.foot .colibri .cw { max-width: 100%; }
}

@media (max-width: 560px) {
  .railstats { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  dl.railkey { grid-template-columns: 1fr; gap: 4px 0; }
  dl.railkey dd { margin-bottom: 10px; }
  .wordmark { font-size: 24px; }
  header.mast .mark { padding: 6px 8px; }
  .co { padding: 16px; }
}

@media print {
  nav.tabs, .filters, .mast-actions, .sheet, .scrim, footer.foot { display: none !important; }
  .tscroll, main.page .tscroll { overflow: visible; max-height: none; border: 0; }
  .crumbs, .prevnext, .subscribe, .totop, .skip, .rail { display: none !important; }
  body { background: #fff; color: #000; }
  article.story .body { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet.on, .scrim { transition: none; }
}

/* ------------------------------------------------------------------ rail */
/* The feed's reading column is ~68ch by design; without a rail the right
   half of a wide screen is dead space and the page reads as unbalanced.
   The rail carries the provenance key, which is the thing a first-time
   reader most needs in order to make sense of the chips. */

.feedgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }

.rail { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 30px; padding-top: 4px; }
/* A sticky rail taller than the window hides its foot until the (very long) news
   list ends; let it scroll on its own instead. The inline padding keeps focus
   outlines inside the scroll box without moving the column. */
@media (min-width: 1041px) {
  .rail { max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
          padding: 4px 4px 12px; margin: 0 -4px; }
}
.railblk { margin: 0; }
.raillbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
  margin: 0 0 13px; padding-bottom: 11px; border-bottom: 1px solid var(--rule);
}
.railnote {
  font-family: var(--read-face); font-size: 13.5px; line-height: 1.65;
  color: var(--body); margin: 0; max-width: none;
}
.railstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.railstats > div { background: var(--surface); padding: 14px 12px; }
.railstats .n { font-family: var(--mono); font-size: 24px; font-weight: 500; color: var(--ink); display: block; line-height: 1; }
.railstats .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; display: block; }

dl.railkey { margin: 15px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 11px 11px; align-items: start; }
dl.railkey dt { margin: 0; }
dl.railkey dd {
  margin: 0; font-family: var(--read-face); font-size: 13px;
  line-height: 1.5; color: var(--body);
}

@media (max-width: 1040px) {
  .feedgrid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail {
    position: static; margin-top: 48px; padding-top: 30px;
    border-top: 1px solid var(--rule);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 36px;
  }
}

/* ---------------------------------------------------------- rank charts */
/* Magnitude gets one hue. Colour on this site encodes evidence strength, so
   it is never also spent on size — the basis chip beside each bar keeps that
   meaning intact, and makes a mixed-evidence ranking readable at a glance. */

.rank { margin: 0 0 40px; }
.rank-t { font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.014em; }
.rank-lead {
  font-family: var(--read-face); font-size: 14px; line-height: 1.6;
  color: var(--body); margin: 0 0 20px; max-width: 68ch;
}
.rank-head, .rank-row {
  display: grid; grid-template-columns: 148px minmax(0, 1fr) 104px 108px;
  gap: 16px; align-items: center;
}
.rank-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 9px; border-bottom: 1px solid var(--rule);
}
.rank-head .r { text-align: right; }
.rank-row { padding: 5px 0; }
.rank-row:hover .rank-bar { background: var(--accent-hot); }
.rank-app { font-size: 14.5px; color: var(--ink); font-weight: 500; }
.rank-track { background: var(--raised); height: 26px; display: block; }
.rank-bar { display: block; height: 26px; background: var(--accent); border-radius: 0 4px 4px 0; transition: background .12s; }
.rank-fig { font-family: var(--mono); font-size: 13px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.rank-ori { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.rank-note {
  font-family: var(--read-face); font-size: 12.5px; line-height: 1.6;
  color: var(--muted); margin: 18px 0 0; padding-top: 14px;
  border-top: 1px solid var(--rule-soft); max-width: 82ch;
}

@media (max-width: 720px) {
  .rank-head { display: none; }
  .rank-row {
    grid-template-columns: 1fr auto; gap: 6px 12px;
    padding: 12px 0; border-bottom: 1px solid var(--rule-soft);
  }
  .rank-track { grid-column: 1 / -1; order: 3; }
  .rank-fig { text-align: left; }
}

/* -------------------------------------------------------- capital extras */
h3 .h3n {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  font-weight: 400; margin-left: 8px; letter-spacing: 0.06em;
}
.filing-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.filing-link { margin-top: 4px; }
.instr.f-dim { border-left-color: var(--rule-hard); }

/* the nav is sticky and 58px tall; matches the .bgblock convention so a
   jumped-to heading is never sitting underneath it */
#cap-body h3 { scroll-margin-top: 84px; outline: none; }

/* Jump strip: the funding table is 30 rows, so without this the filing
   groups underneath it are only reachable by scrolling the whole thing. */
.capjump {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); margin: 0 0 24px;
}
.capjump button {
  flex: 1 1 auto; background: var(--surface); padding: 12px 16px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--body); text-align: left;
  border: none; border-bottom: 2px solid transparent; cursor: pointer;
}
.capjump button:hover { background: var(--raised); color: var(--ink); border-bottom-color: var(--signature); }
.capjump .jn { color: var(--muted); margin-left: 6px; }

.instr.k-note { border-left-color: var(--muted); }
.kindtag {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--rule-hard); padding: 3px 8px; margin: 0 0 10px;
}

/* the caveat sits above the legal boilerplate and is set to actually be read:
   larger than the disclaimer, ruled off, full-strength ink */
footer.foot .ftcaveat {
  font-family: var(--read-face); font-size: 15px; line-height: 1.65;
  color: var(--on-sig); margin: 26px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--on-sig-rule); max-width: 88ch; font-weight: 500;
}

/* the page behind a modal must not scroll under it */
body.sheet-open { overflow: hidden; }

/* ------------------------------------------------------------ data view */
.jump {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 30px; padding-bottom: 22px; border-bottom: 1px solid var(--rule);
}
.jump button {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em;
  border: 1px solid var(--rule); padding: 10px 13px; color: var(--body);
  background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
}
/* these are the only in-page controls that sit below a comfortable touch
   target on a phone, so they get the height back there */
@media (max-width: 760px) {
  .jump button { padding: 14px 15px; }
}
.jump button:hover { border-color: var(--accent); color: var(--ink); }
.jump .jn { color: var(--muted); font-variant-numeric: tabular-nums; }
.tblock { scroll-margin-top: 78px; }
h3 .tcount {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  font-weight: 400; margin-left: 10px; letter-spacing: 0.05em;
}
.tnote {
  font-family: var(--read-face); font-size: 13px; line-height: 1.6;
  color: var(--muted); margin: 0 0 14px; max-width: 84ch;
}

/* ------------------------------------------------------ back to top + keys */
.totop {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  background: var(--on-sig); color: var(--signature);
  border: 1px solid var(--signature); padding: 10px 14px; cursor: pointer;
  opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .15s, visibility .15s;
}
/* hidden, not just transparent: an invisible button must not be a focus stop */
.totop.on { opacity: 1; pointer-events: auto; visibility: visible; }
.totop:hover { background: var(--signature); color: var(--on-sig); }

footer.foot .ftkeys {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--on-sig-rule);
}
footer.foot .ftkeys-l {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-sig-soft);
}
footer.foot .ftkeys .k {
  font-family: var(--read-face); font-size: 12.5px; color: var(--on-sig);
  display: inline-flex; align-items: center; gap: 6px;
}
footer.foot .ftkeys kbd {
  font-family: var(--mono); font-size: 11px; line-height: 1;
  border: 1px solid var(--on-sig-rule); background: rgba(10, 12, 9, .1);
  padding: 4px 6px; color: var(--on-sig);
}
/* This was '.ftkeys { display: none }' (0,1,0), which lost the cascade to
   'footer.foot .ftkeys { display: flex }' (0,2,1) above — so the shortcut
   panel rendered on phones the whole time, wrapping to five lines to
   advertise keys the device does not have. Match the specificity. */
@media (max-width: 760px) {
  footer.foot .ftkeys { display: none; }
  .totop { right: 14px; bottom: 14px; }
}

/* ------------------------------------------------- background as a document */
/* 24 headings and 53 paragraphs is a reference document, not a page: it needs
   a contents rail, real heading levels, and a measure that stops at ~70ch
   instead of running the full 1200px container. */

.docgrid { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 56px; align-items: start; }
.doccol { min-width: 0; }

.bgblock { margin: 0 0 8px; scroll-margin-top: 84px; }
.bgblock + .bgblock { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--rule); }
.bgh {
  font-size: 27px; font-weight: 600; letter-spacing: -0.022em;
  color: var(--ink); margin: 0 0 14px;
}
.bglead {
  font-family: var(--read-face); font-size: 19px; line-height: 1.5;
  color: var(--ink); margin: 0 0 16px; max-width: 62ch; text-wrap: pretty;
}
.bgstand {
  font-family: var(--read-face); font-size: 16px; line-height: 1.7;
  color: var(--body); margin: 0 0 26px; max-width: 70ch;
}
.doccol h3 { scroll-margin-top: 84px; font-size: 19px; margin: 34px 0 8px; }
.doccol .prose p, .prose p { max-width: 70ch; }

.docrail { position: sticky; top: 92px; max-height: calc(100vh - 130px); overflow-y: auto; }
.toc { display: flex; flex-direction: column; }
.toc .raillbl { margin-bottom: 12px; }
.toc button {
  font-family: inherit; font-size: 13px; line-height: 1.45; color: var(--muted);
  padding: 6px 0 6px 12px; background: none; cursor: pointer;
  border: none; border-left: 2px solid var(--rule);
  text-align: left; width: 100%; display: block;
}
.toc button:hover { color: var(--ink); border-left-color: var(--rule-hard); }
.toc button.top {
  font-family: var(--display); font-weight: 600; color: var(--body);
  margin-top: 12px; font-size: 13.5px;
}
.toc button.top:first-of-type { margin-top: 0; }
.toc button.sub { font-family: var(--read-face); padding-left: 20px; }
/* Two levels are marked at once: the block you are in, and the section within
   it. Both take the signature rule — inventing a second colour would spend the
   palette on navigation, which on this site means evidence. The section is the
   precise position, so it carries the heavier bar and the heavier text. */
.toc button.on { color: var(--ink); border-left-color: var(--signature); }
.toc button.sub.on { border-left-width: 3px; padding-left: 19px; font-weight: 500; }

@media (max-width: 1040px) {
  .docgrid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docrail {
    position: static; max-height: none; order: -1;
    margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--rule);
  }
  .toc { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .toc .raillbl { width: 100%; }
  .toc button { border-left: none; border: 1px solid var(--rule); padding: 7px 11px; }
  .toc button.sub { display: none; }
}

/* ======================================================== static pages */
/* Real-URL pages written at build time (story, company, instrument,
   background, data table, guide, hubs). Same tokens, bands and type scale as
   the reader; nothing here spends a colour on anything but evidence. */

/* .wrap's padding shorthand would otherwise zero main's top padding */
main.page { padding-top: 30px; padding-bottom: 80px; }

/* nav: links instead of the reader's tab buttons, same look */
.tabs a {
  font-family: var(--mono); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--body); padding: 18px 20px 15px; border-bottom: 3px solid transparent;
  transition: background .12s, color .12s;
}
.tabs a:hover { color: var(--ink); background: var(--raised); text-decoration: none; }
.tabs a[aria-current="page"] { background: var(--signature); color: var(--on-sig); font-weight: 600; }
.tabs a.reader { margin-left: auto; color: var(--accent); }
.tabs a.reader:hover { color: var(--ink); }

.crumbs ol {
  list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--muted);
}
.crumbs li + li::before { content: "/"; margin: 0 9px; color: var(--muted); }
.crumbs a { color: var(--muted); display: inline-block; padding: 5px 0; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--body); }

.doc { max-width: 76ch; }
.doc.doc-wide { max-width: none; }
.doc.doc-wide .dochead { max-width: 76ch; }
.dochead { margin: 0 0 30px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.dochead h1 { overflow-wrap: anywhere; }
.doc h1, .hub h1 {
  font-size: clamp(27px, 3.4vw, 38px); line-height: 1.16; font-weight: 600;
  letter-spacing: -0.022em; color: var(--ink); margin: 0 0 16px; text-wrap: balance;
}
.kicker {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 14px;
}
.dochead .dek, .dochead .lead {
  font-family: var(--read-face); font-size: 18px; line-height: 1.62;
  color: var(--read); margin: 0 0 16px; max-width: 34em;
}
.dochead .lead { color: var(--ink); }
.byline { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 14px; }
.byline time, .si-meta time { white-space: nowrap; }
.st-foot { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
a.chip:hover { text-decoration: none; border-color: var(--accent); }
.basisnote { font-family: var(--read-face); font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 12px 0 0; }
/* ~72 characters a line in the serif: 68ch of Literata ran to 81-91 */
.docbody p, .doc .prose p, .doc section > p {
  font-family: var(--read-face); font-size: 17px; line-height: 1.75; color: var(--read); max-width: 32em;
}
.doc h2, .hub h2 {
  font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: -0.015em;
  margin: 44px 0 14px;
}
.doc h3 { font-size: 17px; margin: 26px 0 8px; }
.doc .prose h2 { margin-top: 36px; }
.h2n { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 8px; letter-spacing: 0.06em; }
.cos { margin: 22px 0 0; font-size: 14.5px; line-height: 1.7; }
.cos .lbl, .srclist h2.lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; margin: 0 12px 0 0;
}
.srclist h2.lbl { display: block; margin: 0 0 8px; }
.doc .srclist { margin-top: 30px; }
.srclist, dl.kv2 dd, .storylist, .colist { overflow-wrap: anywhere; }

.keyfacts { margin: 4px 0 20px; }
.keyfacts .kf-t {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; margin: 0 0 -8px;
}
.keyfacts dl.kv2 dd { color: var(--ink); }

ul.bullets { margin: 0 0 14px; padding: 0; list-style: none; max-width: 36em; }
ul.bullets li {
  font-family: var(--read-face); font-size: 15.5px; line-height: 1.65; color: var(--read);
  padding-left: 18px; position: relative; margin-bottom: 9px;
}
ul.bullets li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; background: var(--accent); }

/* legal force rides on the border and the label; the status itself reads as prose */
.statusbox {
  font-family: var(--read-face); font-size: 15px; line-height: 1.6; padding: 11px 15px; margin: 4px 0 0;
  border: 1px solid var(--rule); border-left-width: 3px; color: var(--read); background: var(--raised); max-width: 76ch;
}
.statusbox .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted); margin-right: 8px; }
.statusbox.official { border-color: var(--official-bd); border-left-color: var(--official); background: var(--official-bg); }
.statusbox.company { border-color: var(--company-bd); border-left-color: var(--company); background: var(--company-bg); }
.doc .tl li { display: grid; }
.doc .tl li .d { padding-top: 2px; }
.reviewed { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin: 24px 0 0; }

/* lists of reports */
.storylist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.storylist li { padding: 17px 0; border-bottom: 1px solid var(--rule-soft); }
.si-meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 5px; }
.si-h { font-size: 18px; font-weight: 600; line-height: 1.36; color: var(--ink); letter-spacing: -0.01em; text-wrap: pretty; }
.si-h:hover { color: var(--accent); }
.si-dek { font-family: var(--read-face); font-size: 14.5px; line-height: 1.62; color: var(--body); margin: 7px 0 0; max-width: 72ch; }

.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 48px 0 0; }
.prevnext a { background: var(--surface); border: 1px solid var(--rule); padding: 16px 18px; color: var(--ink); font-weight: 500; line-height: 1.42; }
.prevnext a:hover { background: var(--raised); color: var(--accent); text-decoration: none; }
.prevnext a[rel="next"] { grid-column: 2; text-align: right; }
.pn-l { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: 6px; }

/* hubs */
.hub .intro { font-family: var(--read-face); font-size: 16.5px; line-height: 1.68; color: var(--read); max-width: 70ch; margin: 0 0 28px; }
.linkcols { columns: 3 220px; column-gap: 36px; list-style: none; margin: 0; padding: 0; }
.linkcols li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--rule-soft); font-size: 15px; }
.linkcols .n, .co-o, .dl .n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-left: 6px; }
.colist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.colist li { padding: 15px 0; border-bottom: 1px solid var(--rule-soft); }
.co-n { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.co-n:hover { color: var(--accent); }
.co-s { font-family: var(--read-face); font-size: 14px; line-height: 1.6; color: var(--body); margin: 6px 0 0; max-width: 78ch; }
.jumplinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.jumplinks a { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; border: 1px solid var(--rule); padding: 9px 12px; color: var(--body); }
.jumplinks a:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.jumplinks .n { color: var(--muted); margin-left: 4px; }
.hub section { scroll-margin-top: 84px; }
.monthnav { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; }
.dl { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; margin: 0; }
.doc .instr h3 { font-size: 20px; margin: 0 0 8px; }
caption {
  caption-side: top; text-align: left; padding: 12px 18px; font-family: var(--read-face);
  font-size: 14px; color: var(--read); border-bottom: 1px solid var(--rule);
}
.doc .rank-t { font-size: 19px; margin: 0 0 6px; }
.doc .rank { margin-top: 36px; }
.permalink, .fullprofile { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; margin: 14px 0 0; }

/* home page: the static headline list the reader replaces on load */
.staticlist { margin: 0; padding: 0 0 0 1.4em; }
.staticlist li { padding: 8px 0; color: var(--muted); }
.staticlist a { font-size: 17px; font-weight: 600; color: var(--ink); }
.staticlist time { font-family: var(--mono); font-size: 11.5px; margin-left: 8px; }
.staticmore { font-family: var(--mono); font-size: 12px; margin-top: 16px; }
.raillinks { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; }

/* "This Week in Vertical" sign-up — renders only while sign-up is open */
.subscribe { border: 1px solid var(--rule); border-left: 2px solid var(--signature); background: var(--surface); padding: 20px 22px; margin: 36px 0 0; max-width: 76ch; }
.subscribe .sub-t { font-size: 19px; margin: 0 0 6px; }
.subscribe .sub-d { font-family: var(--read-face); font-size: 14.5px; color: var(--body); margin: 0 0 14px; }
.subscribe .sub-d a, .subscribe .sub-c a { text-decoration: underline; text-underline-offset: .15em; }
.sub-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sub-row input {
  flex: 1 1 220px; min-width: 0; font-family: var(--display); font-size: 16px; color: var(--ink);
  background: var(--ground); border: 1px solid var(--rule-hard); padding: 10px 12px; border-radius: 0;
}
.sub-row input::placeholder { color: var(--muted); }
.sub-row input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
.sub-f button {
  flex: 0 0 auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--signature); color: var(--on-sig); border: 1px solid var(--signature);
  padding: 10px 18px; cursor: pointer; font-weight: 600; min-height: 44px;
}
.sub-f button:hover { background: var(--accent-hot); border-color: var(--accent-hot); }
.sub-f button:disabled { opacity: .6; cursor: wait; }
.sub-c { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0 0; font-family: var(--read-face); font-size: 13.5px; line-height: 1.55; color: var(--body); cursor: pointer; }
.sub-c input { width: 17px; height: 17px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--signature); }
:root[data-theme="light"] .sub-c input { accent-color: var(--accent); }
.sub-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sub-s { font-family: var(--read-face); font-size: 14px; line-height: 1.6; margin: 12px 0 0; padding: 10px 13px; border-left: 2px solid var(--rule-hard); background: var(--raised); color: var(--read); max-width: none; }
/* the form's states use the brand, never an evidence colour */
.sub-s.good { border-left-color: var(--signature); }
.sub-s.bad { border-left-color: var(--ink); color: var(--ink); }
.sub-note { font-family: var(--read-face); font-size: 15px; line-height: 1.65; color: var(--read); border-left: 2px solid var(--signature); background: var(--surface); padding: 14px 18px; margin: 8px 0 0; max-width: 76ch; }
.rail .subscribe { margin: 0; padding: 16px 16px 18px; }
.rail .subscribe .sub-d { font-size: 13.5px; line-height: 1.6; margin-bottom: 12px; }
.rail .sub-row input { flex-basis: 100%; }
.rail .sub-row button { flex: 1 1 auto; }
.rail .sub-c { font-size: 13px; }

/* newsletter issue pages */
.nl-issue .storylist .chip, .nl-hub .storylist .chip { margin-left: 6px; padding: 2px 7px; vertical-align: 1px; }
.doc h3.nl-cat { font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin: 30px 0 10px; }
.nl-cat a { color: var(--muted); }
.nl-cat a:hover { color: var(--ink); }
.doc h3.nl-reg { font-size: 17px; line-height: 1.36; margin: 26px 0 0; }
.nl-reg a { color: var(--ink); }
.nl-reg a:hover { color: var(--accent); }
.nl-tl { margin-top: 8px; }
.nl-tl li { grid-template-columns: 138px 1fr; }

/* privacy notice */
.prose code { font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
.prose .tscroll { margin-top: 6px; }
.consentctl button, footer.foot .ftlink {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--rule-hard); padding: 9px 14px; margin-right: 10px;
}
.consentctl button:hover { border-color: var(--accent); }
.consentctl span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
footer.foot .ftlink { display: block; border: 0; padding: 0; margin: 0 0 5px; font-family: inherit; font-size: inherit; letter-spacing: normal; text-transform: none; color: var(--on-sig); }
footer.foot .ftlink:hover { text-decoration: underline; text-underline-offset: 2px; }

/* analytics choice — injected by assets/consent.js only when GA is configured */
.cbanner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; max-width: 560px; margin: 0 auto;
  background: var(--surface); color: var(--read); border: 1px solid var(--rule-hard); border-left: 2px solid var(--signature);
  padding: 16px 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
.cbanner p { font-family: var(--read-face); font-size: 14px; line-height: 1.6; margin: 0 0 12px; max-width: none; }
.cbanner .cb-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cbanner button {
  flex: 1 1 140px; min-height: 44px; cursor: pointer; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 16px;
  background: transparent; color: var(--ink); border: 1px solid var(--ink);
}
.cbanner button:hover { background: var(--ink); color: var(--ground); }

/* footer column labels are not headings on static pages (keeps the outline) */
footer.foot .fth {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-sig-soft); margin: 0 0 10px; font-weight: 400;
}

@media (max-width: 760px) {
  .tabs a { font-size: 12.5px; letter-spacing: 0.07em; padding: 13px 13px 11px; border-bottom-width: 2px; }
  .prevnext { grid-template-columns: 1fr; }
  .prevnext a[rel="next"] { grid-column: auto; text-align: left; }
  .dochead .dek, .dochead .lead { font-size: 16.5px; }
  .docbody p, .doc .prose p, .doc section > p { font-size: 16px; }
  .si-h { font-size: 17px; }
}

/* ======================================== review fixes, 23 October 2026 */

/* Links inside running text: ink and an underline, never the accent, which is
   also the "estimate" evidence colour and differed from the text by colour alone. */
.docbody a, .doc .prose a, .doc section > p a, .doc ul.bullets a, .dochead .dek a,
.dochead .lead a, .basisnote a, .tcap a, .startwith a, .correction a, .doc .note a, .cos a, .doc .srclist a,
.tscroll td a, .gtable td a, .byline a, .nl-issue .kicker a, .sub-note a, #v-about .prose a, .cite a, .hub .intro a {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px;
  /* the underline is the link's only cue, so it takes text contrast (--muted, 5.6:1+) */
  text-underline-offset: 3px; text-decoration-color: var(--muted);
}
.docbody a:hover, .doc .prose a:hover, .doc section > p a:hover, .doc ul.bullets a:hover,
.dochead .dek a:hover, .dochead .lead a:hover, .tcap a:hover, .startwith a:hover,
.correction a:hover, .doc .note a:hover, .cos a:hover, .doc .srclist a:hover,
.tscroll td a:hover, .gtable td a:hover, .byline a:hover, .nl-issue .kicker a:hover, .sub-note a:hover,
#v-about .prose a:hover, .cite a:hover, .hub .intro a:hover { color: var(--ink); text-decoration-color: var(--accent); }

/* wide pages keep the reading measure; only tables take the full width */
.doc.doc-wide h2, .doc.doc-wide h3, .doc.doc-wide .srclist, .doc.doc-wide .subscribe,
.doc.doc-wide .tcap, .doc.doc-wide .jumplinks { max-width: 76ch; }
/* reading measure, about 70 characters a line */
ul.tl { max-width: 40em; }
.hub .intro, .colist .co-s { max-width: 34em; }
.colist .co-s .chip { max-width: 100%; white-space: normal; }
.doc section[id] { scroll-margin-top: 84px; }
.tcap { font-family: var(--read-face); font-size: 14px; line-height: 1.6; color: var(--read); margin: 18px 0 8px; }
.tscroll:focus-visible { outline-offset: -2px; }
/* the header row sticks inside its own scroller on desktop; on a phone the
   first column stays put so a row keeps its name while scrolling sideways */
@media (min-width: 761px) { main.page .tscroll { max-height: 85vh; overflow: auto; } }
@media (max-width: 760px) {
  .gtable th:first-child, .gtable td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--rule);
  }
  .gtable th:first-child { z-index: 2; background: var(--raised); }
}
.toc-links { margin: 0 0 8px; }

/* a rail beside static pages at 1041px and wider (reuses the reader's rail) */
.pagecol { min-width: 0; }
.raillist { list-style: none; margin: 0 0 10px; padding: 0; }
.raillist li { padding: 7px 0; border-bottom: 1px solid var(--rule-soft); font-size: 14px; line-height: 1.45; }
.raillist a { color: var(--ink); }
.raillist a:hover { color: var(--accent); }

.srclist > ul { list-style: none; margin: 0; padding: 0; }
.srclist > ul > li { margin-bottom: 5px; line-height: 1.6; }
.guides-box ul.bullets li { font-family: var(--display); font-size: 15.5px; }
.correction, .cite { margin: 30px 0 0; padding: 14px 18px; border: 1px solid var(--rule); border-left: 2px solid var(--ink);
  background: var(--surface); max-width: 76ch; }
.cite { border-left-color: var(--rule-hard); }
.doc .correction h2, .doc .cite h2 { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.doc .correction p, .doc .cite p { font-family: var(--read-face); font-size: 15px; line-height: 1.65; color: var(--read); margin: 0 0 6px; }
.doc .cite p { overflow-wrap: anywhere; }   /* the URL, at 360px */
.latest { font-family: var(--read-face); font-size: 16px; color: var(--read); margin: 0 0 14px; }
.latest b { color: var(--ink); font-weight: 600; }
.doc .dim { color: var(--muted); font-weight: 400; }
.topapps { margin: 0 0 28px; }
.topapps .jumplinks { margin-top: 10px; }
.startwith { font-family: var(--read-face); font-size: 15px; color: var(--read); margin: -12px 0 24px; }
.nl-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }

@media (max-width: 560px) {
  .crumbs li[aria-current]:not(:nth-child(2)) { display: none; }
  footer.foot .ftnav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
}

/* Special reports (25 Oct 2026): the editor's own photos and the quotes he heard */
.special .sfig { margin: 26px 0; }
.special .sfig img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.special .sfig-hero { margin-top: 6px; }
.special .sfig figcaption { font-family: var(--read-face); font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.special .sfig .credit { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; }
.special blockquote.pull { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); }
.special blockquote.pull p { font-family: var(--read-face); font-size: 20px; line-height: 1.45; color: var(--ink); margin: 0 0 8px; }
.special blockquote.pull footer { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }