/* The Macro Notebook, v9: the Late Edition composition in the colours of v8.
   The structure of Late Edition (the ears in boxes, the fitted banner across the paper, Archivo labels and
   tables, In plain sight across the page, the odds in a row) on the v8 palette: newsprint, black ink, the brand
   amber, and the black terminal rail. No red flag, no paper stocks, no halftone: photos keep the v8 Bayer dither.
   Three voices: the banner shouts (Archivo condensed capitals, --banner-w), the text explains (Newsreader), the label
   counts (Archivo condensed capitals with tabular figures). No monospace anywhere.
   Two themes share one set of tokens: "paper" is the default; "terminal" is the black theme.
   The rail, the footer and the email panel keep terminal colours in both themes (.rail, .chrome). */

:root {
  --page: #F2F1EC;
  --box: #FBFAF6;
  --ink: #000000;
  --ink-2: #23221F;
  --dim: #5C5A53;
  --rule: #CCCAC2;
  --rule-2: #8C897F;
  --lab: #000000;
  --bg: var(--page);

  --amber: #FFA216;
  --red: #C4161C;
  --yellow: #FFA216;
  --night: #000000;
  --white: #FBFAF6;
  --spot: #FFA216;
  --spot-text: #8A4B00;
  --band: #0B2B66;
  --on-band: #FFFFFF;
  --up: #0B7A34;
  --down: #C4161C;
  --focus: #0B2B66;
  --photo-paper: transparent;
  --g-rates: #14359B;
  --g-fx: #00768C;
  --g-commodities: #8A4B00;
  --g-crypto: #894ED6;

  --ch-ink: var(--ink);
  --ch-key: var(--spot);
  --ch-key-text: var(--spot-text);
  --ch-grid: var(--rule);

  --banner-w: 800;
  --banner: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --label: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --margin: 32px;
  --gutter: 24px;
  --page-w: 1440px;
  color-scheme: light;
}

[data-theme="terminal"] {
  --page: #000000;
  --box: #141414;
  --ink: #F5F3EE;
  --ink-2: #CFCBC1;
  --dim: #8F8B81;
  --rule: #2A2A2A;
  --rule-2: #57544C;
  --lab: #F5F3EE;
  --white: #141414;
  --spot: #FFA216;
  --spot-text: #FFA216;
  --up: #3DDC73;
  --down: #FF5A4F;
  --focus: #FFD000;
  --photo-paper: #FFA216;
  --g-rates: #8EB8FE;
  --g-fx: #13A5B2;
  --g-commodities: #FFA216;
  --g-crypto: #A76EF8;
  color-scheme: dark;
}

/* ---------- Sheets and the terminal ----------
   Late Edition printed blocks on coloured stocks. Here every stock is one quiet sheet: paper white with ink.
   The rail and the end of the page keep the terminal colours of v8 in both themes. */

.stock-salmon, .stock-yellow, .stock-red, .stock-white, .stock-night {
  --bg: var(--box);
  background: var(--bg); color: var(--ink);
}
.rail, .chrome {
  --bg: #000000; --box: #141414; --ink: #F5F3EE; --ink-2: #CFCBC1; --dim: #8F8B81; --lab: #F5F3EE;
  --rule: #2A2A2A; --rule-2: #57544C;
  --spot: #FFA216; --spot-text: #FFA216; --up: #3DDC73; --down: #FF5A4F; --focus: #FFD000;
  --g-rates: #8EB8FE; --g-fx: #13A5B2; --g-commodities: #FFA216; --g-crypto: #A76EF8;
  --ch-ink: #F5F3EE; --ch-key: #FFA216; --ch-key-text: #FFA216; --ch-grid: #2A2A2A;
  background: var(--bg); color: var(--ink);
}

/* The inflation receipt stays a white slip inside the black panel, as in v8. */
.chrome .slip {
  --box: #FBFAF6; --ink: #000000; --ink-2: #23221F; --dim: #5C5A53; --lab: #000000;
  --rule: #CCCAC2; --rule-2: #8C897F; --spot-text: #8A4B00; --up: #0B7A34; --down: #C4161C; --focus: #0B2B66;
  color: var(--ink);
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 17px/1.5 var(--serif);
  font-variation-settings: 'opsz' 16;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button, input, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* A table box ignores overflow, so a hidden data table becomes a block that clips. */
table.sr-only { display: block; }

.skip {
  position: absolute; left: 8px; top: -64px; z-index: 50;
  padding: 10px 14px; background: var(--yellow); color: #000000;
  font: 800 14px/1 var(--label); font-stretch: 75%; letter-spacing: 0.04em; text-transform: uppercase;
}
.skip:focus { top: 8px; }

/* The label voice: Archivo condensed capitals, tracked, with tabular figures. */
.code, .fields, .kicker, .byline, .sec-meta, .story-kicker, .src, .credit, .dateline, .clock, .theme button,
.signin, .tool-link, .btn, .cont, .more, .mon, .mkt, .ticker, .wire time, .wire-sec, .rk-meta, .ear-head,
.ear-src, .ear-chart-meta, .ear-scale, .late, .row time, .row-meta, .row-cat, .chip, .chips-label, .arch-count,
.month-head, .subtabs a, .cat-parent, .file, .rail-head, .side-list li span, .ext, .dir, .odds-q, .odds-src,
.bank, .meet, .pct, .wg-axis, .wg-gap, .wg-mark, .wg-nav, .cp-crumb, .cp-meta, .cp-sub, .ct-val, .ref-id,
.ref-min, .infl-country label, .infl-meta, .infl-table thead th, .infl-table .num, .status, .foot h2,
.disclaimer h2, .inside-tip, .earlier time, .strip-btn, .save-btn, .share, .art-by, .levels dt, .levels dd.chg,
.short h2, .disclose h2, .account-menu, .consent-links, .consent-fine, .acct-label, .adm-counts dt, .adm-table th,
.slip, .infl-why h3, .infl-why li b, .infl-dock, .sample-tag, .mail-tab, .tag-note, .cg-ax, .ch-src, .fig-head,
.bars-title, .sect-tip, .art-hint, .nx-when {
  font-family: var(--label);
  font-stretch: 75%;
  font-variant-numeric: tabular-nums;
}

.code {
  display: inline-flex; align-items: center; flex: none;
  height: 22px; padding: 1px 7px 0;
  background: var(--amber); color: #000000;
  font-weight: 900; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 1px 16px 0;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  font-weight: 800; font-size: 13.5px; letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--bg); text-decoration: none; }

.prompt { margin: 0; color: var(--dim); font: 700 12.5px/1.4 var(--label); font-stretch: 75%; letter-spacing: 0.04em; text-transform: uppercase; }

.src { margin: 10px 0 0; color: var(--dim); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.45; }
.src a { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 2px; }

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--dim); }

kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 4px;
  border: 1.5px solid var(--ink); font: 800 12px/1 var(--label);
}

/* ---------- Banners: fitted wood type ----------
   Each line is a span (.fl) whose width at font-size 1em is --fw (set at build time from measured glyph
   widths). font-size = box width / --fw fills the box with no script; --max caps it. app.js trims it exact. */

[data-fit] {
  --max: 120px;
  container-type: inline-size;
  margin: 0;
  font-family: var(--banner); font-weight: var(--banner-w); font-stretch: 62%;
  line-height: 0.86; letter-spacing: -0.004em; word-spacing: 0.07em;
  text-transform: uppercase; font-variant-numeric: normal;
}
[data-fit] > a { display: block; }
[data-fit] > a:hover { text-decoration: none; }
[data-fit] > a:hover .fl { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.08em; }
.fl {
  display: block; width: fit-content; white-space: nowrap;
  font-size: min(var(--max), calc(100cqi / var(--fw)));
  padding-top: 0.04em;
}

/* ---------- Command bar ---------- */

.cmdbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  height: 56px; padding: 0 var(--margin);
  background: var(--page);
  border-bottom: 1.5px solid var(--ink);
}

.brand-mark { display: inline-flex; flex: none; }
.brand-mark svg { display: block; width: 34px; height: 34px; }

/* The search box is framed like a classified advertisement: a rule, a gap, a rule. */
.cmd {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 380px; max-width: 500px; height: 40px; padding: 0 10px 0 12px;
  background: var(--box);
  border: 1.5px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--box), inset 0 0 0 3px var(--ink);
}
.cmd:focus-within { box-shadow: inset 0 0 0 2px var(--box), inset 0 0 0 4px var(--spot); }
.cmd-prompt { color: var(--spot-text); font: 900 12px/1 var(--label); font-stretch: 75%; letter-spacing: 0.08em; text-transform: uppercase; }
.cmd input {
  flex: 1; min-width: 0; height: 34px;
  border: 0; background: transparent; outline: none;
  color: var(--ink); caret-color: var(--spot);
  font: 500 16px/1 var(--serif);
}
.cmd input::placeholder { color: var(--dim); }
.cmd-key { color: var(--ink); }

.cmd-list {
  position: absolute; left: -1.5px; right: -1.5px; top: calc(100% + 4px); z-index: 30;
  max-height: 400px; overflow: auto; padding: 4px 0;
  background: var(--box); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
.cmd-opt {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 8px 12px; cursor: pointer; color: var(--ink); font: 500 15px/1.3 var(--serif);
}
.cmd-opt[aria-selected="true"] { background: var(--ink); color: var(--box); }
.cmd-opt[aria-selected="true"] .opt-code { color: var(--yellow); }
.cmd-opt[aria-selected="true"] .opt-note { color: var(--box); }
.opt-code, .opt-note { font: 900 12px/1 var(--label); font-stretch: 75%; letter-spacing: 0.06em; text-transform: uppercase; }
.opt-code { color: var(--spot-text); }
.opt-note { color: var(--dim); }
.opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-msg:empty { display: none; }
.cmd-msg {
  position: absolute; left: -1.5px; right: -1.5px; top: calc(100% + 4px); z-index: 30;
  margin: 0; padding: 10px 12px;
  background: var(--box); border: 2px solid var(--spot); color: var(--ink); font: 500 15px/1.35 var(--serif);
}

.clocks { display: flex; gap: 18px; margin: 0 0 0 auto; white-space: nowrap; }
.clock { display: flex; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.clock dt { font-weight: 900; }
.clock dd { margin: 0; }
.clock .state { color: var(--dim); }
.clock .state[data-state="open"] { color: var(--up); font-weight: 800; }

.theme { display: flex; border: 2px solid var(--ink); }
.theme button {
  height: 32px; padding: 1px 11px 0; border: 0; background: transparent; color: var(--ink);
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
}
.theme button + button { border-left: 2px solid var(--ink); }
.theme button[aria-pressed="true"] { background: var(--ink); color: var(--page); }

/* The calculator, in reach from every page: a yellow stamp and its name. */
.tool-link {
  display: inline-flex; align-items: center; gap: 8px; flex: none; height: 36px; padding: 1px 12px 0 0;
  border: 2px solid var(--ink); font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.tool-code { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; width: 30px; margin-top: -1px; background: var(--yellow); color: #000000; border-right: 2px solid var(--ink); font-weight: 900; font-size: 15px; }
.tool-link:hover { background: var(--ink); color: var(--page); text-decoration: none; }
.tool-link[aria-current="page"] { box-shadow: 0 4px 0 var(--spot); }

/* ---------- The flag ---------- */

.flag {
  background: var(--page); color: var(--ink);
  border-bottom: 7px solid var(--ink);
  box-shadow: 0 3px 0 var(--page), 0 5px 0 var(--ink);
  margin-bottom: 5px;
}
.plate-row {
  max-width: var(--page-w); margin: 0 auto; padding: 20px var(--margin) 22px;
  display: grid; grid-template-columns: 252px minmax(0, 1fr) 252px; gap: 28px; align-items: stretch;
}

.ear {
  display: flex; flex-direction: column; min-width: 0;
  padding: 10px 13px 11px; border: 2px solid var(--ink); border-top-width: 6px;
  background: var(--box); color: var(--ink);
}
.ear-number { border-top-color: var(--amber); }
.ear-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ink);
  font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
}
.ear-head span { font-weight: 700; letter-spacing: 0.04em; }
.ear-num { --max: 74px; margin: 2px 0 8px; }
.ear-cap { margin: 0 0 8px; font: 500 15px/1.32 var(--serif); font-variation-settings: 'opsz' 16; }
.ear-src { margin: auto 0 0; padding-top: 7px; border-top: 1px solid var(--rule-2); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.35; }
.ear-src a { text-decoration: underline; text-underline-offset: 2px; }
.ear-chart-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.ear-chart-meta span { overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.ear-chart-meta b { font: var(--banner-w) 22px/1 var(--banner); font-stretch: 62%; color: var(--spot-text); }
.ear-chart { flex: 1 1 auto; min-height: 64px; position: relative; }
.ear-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ear-scale { display: flex; justify-content: space-between; margin: 5px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }

.plate-box { container-type: inline-size; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
/* The nameplate: Newsreader 800, reversed in paper white on the red, across the width of .plate-box. */
.nameplate {
  margin: 0; color: var(--ink); white-space: nowrap;
  font: 800 9.6cqi/0.95 var(--serif); font-variation-settings: 'opsz' 72; letter-spacing: -0.02em;
}
.late {
  display: inline-flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 4px 10px 3px;
  background: #000000; color: #F5F3EE;
  font-size: 12.5px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
}
.late-time { color: var(--yellow); font-weight: 800; letter-spacing: 0.06em; }

/* The day's picture under the nameplate: a halftone strip, black dots multiplied into the red. */
.art { position: relative; display: block; width: fit-content; max-width: 100%; margin: 14px auto 0; color: var(--ink); }
.art img { mix-blend-mode: multiply; image-rendering: pixelated; }
.art-hint {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 2;
  padding: 5px 10px 4px; background: var(--ink); color: var(--page);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; line-height: 1.35; text-transform: uppercase;
  opacity: 0; pointer-events: none;
}
.art:hover .art-hint, .art:focus-visible .art-hint { opacity: 1; }

/* Under the flag: the dateline and the section row, inside the page margins. */
.under-flag { max-width: var(--page-w); margin: 0 auto; padding: 0 var(--margin); }

.dateline {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 9px 0 8px; border-bottom: 1.5px solid var(--ink);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.dateline time { font-weight: 900; }
.mini-tag { color: var(--dim); }
.date-links { display: flex; gap: 20px; }
.date-links a { font-weight: 800; }
.date-links a[aria-current="page"] { box-shadow: 0 3px 0 var(--spot); }

/* Section row: four tabs, each with its paper stock as a chip; the current tab is flooded with it. */
.sections { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 3px solid var(--ink); }
.sect {
  --chip: transparent; --on-chip: var(--spot-text);
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 0; height: 58px; padding: 0 8px;
  font: 800 18px/1 var(--label); font-stretch: 75%; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.sect + .sect { border-left: 1.5px solid var(--ink); }
.sect-icon { flex: none; width: 32px; height: 32px; padding: 5px; background: var(--chip); fill: var(--on-chip); border: 0; }
.sect:hover { text-decoration: none; background: var(--box); }
.sect[aria-current="page"] { box-shadow: inset 0 -5px 0 var(--amber); }
/* New stories since the reader's last visit (app.js): a small amber tag. */
.sect-new {
  position: absolute; top: 6px; right: 10px;
  padding: 3px 7px 2px; background: var(--amber); color: #000000;
  cursor: default;
}
.sect-new[hidden] { display: none; }
.sect-num { display: block; font: 900 12px/1 var(--label); font-stretch: 75%; letter-spacing: 0.06em; text-transform: uppercase; }
.sect-tip {
  display: none; position: absolute; right: -4px; top: calc(100% + 8px); z-index: 25;
  padding: 6px 8px 5px; background: #000000; color: #F5F3EE;
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
.sect-new:hover .sect-tip, .sect:focus-visible .sect-tip { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .sect-new:not([hidden]) { animation: tag-in 220ms ease-out 300ms both; }
}
@keyframes tag-in { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Ticker: a thin strip between two black rules ---------- */

.ticker {
  display: flex; height: 36px; max-width: calc(var(--page-w) - 2 * var(--margin)); width: calc(100% - 2 * var(--margin)); margin: 0 auto;
  border-bottom: 1.5px solid var(--ink);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em;
}
.ticker-label {
  display: flex; align-items: center; flex: none; gap: 6px;
  padding: 1px 14px 0 0; margin-right: 2px;
  border-right: 1.5px solid var(--ink); color: var(--spot-text); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
}
.ticker-viewport { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.ticker-track { display: flex; width: max-content; animation: ticker 90s linear infinite; }
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track { animation-play-state: paused; }
.tick { display: flex; align-items: center; gap: 7px; padding: 1px 16px 0; border-right: 1px solid var(--rule); white-space: nowrap; }
.tick::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--gc, var(--ink)); }
.tick-date { color: var(--dim); font-size: 0.88em; }
.sym { font-weight: 900; letter-spacing: 0.04em; }
/* Each group keeps a stock: rates on salmon, currencies on yellow, commodities on red, crypto on white. */
.g-rates { --gc: var(--g-rates); }
.g-fx { --gc: var(--g-fx); }
.g-commodities { --gc: var(--g-commodities); }
.g-crypto { --gc: var(--g-crypto); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Section heads: a heavy double rule, a code box, a condensed banner title ---------- */

.sec {
  min-width: 0; padding-top: 16px;
  background: linear-gradient(var(--ink), var(--ink)) top / 100% 5px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 8px / 100% 1.5px no-repeat;
}
.sec-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 9px; margin-bottom: 14px; border-bottom: 1px solid var(--rule-2);
}
.sec-title { margin: 0; font: var(--banner-w) 28px/0.95 var(--banner); font-stretch: 62%; letter-spacing: 0.005em; text-transform: uppercase; padding-top: 2px; }
.sec-title a:hover { text-decoration: none; color: var(--spot-text); }
.sec-meta { margin-left: auto; color: var(--dim); font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-align: right; }
a.sec-meta { color: var(--ink); text-decoration: underline; text-decoration-color: var(--spot); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Front page grid ---------- */

.front {
  max-width: var(--page-w); margin: 0 auto; padding: 24px var(--margin) 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 44px; grid-auto-flow: row dense;
  grid-template-rows: auto minmax(0, 1fr);
}
.lead { grid-column: 1 / span 9; min-width: 0; }
.recent { grid-column: 1 / span 9; }

/* The rail is the terminal: black in both themes, with the amber rule on top, as tall as the lead and Recent stories. */
.rail {
  grid-column: 10 / span 3; grid-row: span var(--rail-rows, 2);
  display: flex; flex-direction: column; gap: 30px; min-width: 0;
  padding: 0 16px 20px; border-top: 6px solid var(--amber);
}
.rail .sec { background: none; padding-top: 0; }
.rail .sec + .sec, .rail .inside { border-top: 3px solid var(--rule-2); padding-top: 12px; }
.rail-flag {
  margin: 0 -16px 12px; padding: 12px 16px 8px; background: transparent; color: var(--ink); border-bottom: 2px solid var(--ink);
  font: var(--banner-w) 26px/1 var(--banner); font-stretch: 62%; letter-spacing: 0.01em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: baseline;
}
.rail-flag span { font: 800 12px/1 var(--label); font-stretch: 75%; letter-spacing: 0.06em; }
.rail .sec-title { font-size: 24px; }
.rail .sec-head .code { display: none; }
.monitor .sec-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.monitor .sec-head { margin-bottom: 8px; padding-bottom: 6px; }
.rail { container: rail / inline-size; }
@container rail (max-width: 291px) {
  .rail .sec-head { flex-wrap: wrap; row-gap: 4px; }
  .rail .sec-meta { flex-basis: 100%; margin-left: 0; text-align: left; }
}

[data-flash] { animation: flash 1.4s ease-out; }
@keyframes flash {
  0%, 30% { box-shadow: 0 0 0 4px var(--spot); }
  100% { box-shadow: 0 0 0 4px transparent; }
}

/* Column rules sit in the gutter, as in a newspaper. */
.ruled { position: relative; }
.ruled::before, .lead-side::before, .story + .story::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--gutter) / -2); border-left: 1px solid var(--rule-2);
}

/* ---------- Photos: the v8 Bayer dither ----------
   tools/photo.sh draws each photo as round dots on a 45° screen: black dots on white, multiplied into the
   stock, and a night file whose dots carry the light, screened onto Night final in paper white. Each file is
   shown at its own size; the frame crops any overflow from the centre. */

.photo { margin: 0; min-width: 0; }
.px-frame { display: flex; justify-content: center; overflow: hidden; background: var(--photo-paper); }
.px-frame picture { display: contents; }
.px-frame img { display: block; flex: none; max-width: none; height: auto; image-rendering: pixelated; mix-blend-mode: multiply; }
.photo figcaption { padding-top: 8px; color: var(--ink-2); font: 400 14.5px/1.4 var(--serif); font-variation-settings: 'opsz' 16; }
.credit { color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.credit a { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 2px; }

/* ---------- Lead ---------- */

.lead { padding-top: 0; }
.fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.fields div { display: flex; gap: 6px; align-items: center; }
.fields dt { color: var(--dim); font-weight: 700; }
.fields dd { margin: 0; font-weight: 900; }
.fields .field-code .code { background: var(--amber); color: #000000; }

.banner { --max: 136px; margin: 0 0 20px; }
@media (prefers-reduced-motion: no-preference) {
  .lead .banner { animation: press 450ms cubic-bezier(.2, .7, .2, 1) both; transform-origin: 0 0; }
}
@keyframes press {
  from { opacity: 0.6; transform: scale(1.02); }
  to { opacity: 1; transform: none; }
}

.lead-top {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--gutter); align-items: start;
}
.lead-side { position: relative; min-width: 0; }
.deck {
  margin: 0;
  font: 500 22px/1.32 var(--serif); font-variation-settings: 'opsz' 24; color: var(--ink);
}
.byline { margin: 14px 0 0; color: var(--ink); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

.levels {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0 0; padding: 0 12px 2px;
  background: var(--box); color: var(--ink); border-top: 4px solid var(--ink);
}
.levels div { padding: 9px 0 10px; border-bottom: 1px solid var(--rule); }
[data-theme="terminal"] .levels div { border-bottom-color: rgba(243, 179, 156, 0.25); }
.levels div:nth-child(even) { padding-left: 12px; border-left: 1px solid rgba(23, 19, 14, 0.25); }
.levels dt { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.levels dd { margin: 3px 0 0; font: var(--banner-w) 30px/1 var(--banner); font-stretch: 62%; }
.levels dd.chg { margin: 3px 0 0; font-size: 12.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dim); }
.levels dd.chg.up { color: var(--up); }
.levels dd.chg.down { color: var(--down); }

.columns {
  margin-top: 24px;
  columns: 3; column-gap: var(--gutter); column-rule: 1px solid var(--rule-2);
  font: 400 17px/1.52 var(--serif); font-variation-settings: 'opsz' 16;
  color: var(--ink-2); text-align: justify; hyphens: auto; text-wrap: pretty;
}
.columns p { margin: 0 0 0.75em; }
.columns p:first-child::first-letter, .art-body > .prose:first-of-type > p:first-child::first-letter, .prose > p:first-of-type::first-letter {
  float: left; margin: 0.03em 0.07em 0 0; padding-top: 0.02em; color: var(--ink);
  font: var(--banner-w) 5.2em/0.78 var(--banner); font-stretch: 62%; text-transform: uppercase;
}
.columns h3 {
  margin: 0.3em 0 0.35em; color: var(--ink); text-align: left; break-after: avoid;
  font: 800 18px/1.15 var(--label); font-stretch: 72%;
}

.jump {
  display: flex; align-items: center; justify-content: flex-end; gap: 20px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule-2);
}

/* ---------- Rail: monitor, wire, most read, index ---------- */

.mon { width: 100%; margin: 0 0 14px; border-collapse: collapse; font-size: 13.5px; font-weight: 600; }
.mon caption { padding: 0 0 4px; text-align: left; font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lab); }
.mkt-date { margin-left: 8px; color: var(--dim); font-weight: 700; }
.mon thead th { padding: 0 4px 4px; color: var(--dim); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-align: right; border-bottom: 1.5px solid var(--ink); }
.mon th, .mon td { padding: 3px 3px 3px; text-align: right; white-space: nowrap; }
.mon thead th:first-child, .mon tbody th { padding-left: 0; text-align: left; }
.mon tbody th { font-weight: 800; letter-spacing: 0.02em; }
.mon tbody tr { border-bottom: 1px solid var(--rule); }
.mon td.up, .mon td.down { font-weight: 800; }
.mon .spark { padding-right: 0; width: 1%; }
.spk { display: block; margin-left: auto; fill: var(--ink); }
.spk .c-key { fill: var(--spot-text); }
.mon-src { margin: 0; color: var(--dim); font: 700 12px/1.45 var(--label); font-stretch: 75%; letter-spacing: 0.02em; }
.mon-src a { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 2px; }

.wire li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.wire time { grid-row: span 2; color: var(--spot-text); font-size: 14px; font-weight: 900; letter-spacing: 0.02em; padding-top: 1px; }
.wire-sec { color: var(--dim); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.wire a { font: 800 17.5px/1.12 var(--label); font-stretch: 72%; }
.wire .wire-day {
  display: block; padding: 5px 8px 4px; margin-top: 4px; border-bottom: 0;
  background: var(--band); color: #FFFFFF; font: 900 12px/1.2 var(--label); font-stretch: 75%; letter-spacing: 0.1em; text-transform: uppercase;
}
.more { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--spot); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.ranked li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.rank { font: var(--banner-w) 40px/0.8 var(--banner); font-stretch: 62%; color: var(--spot-text); }
.ranked a { display: block; font: 800 17px/1.12 var(--label); font-stretch: 72%; }
.rk-meta { display: block; margin-top: 5px; color: var(--dim); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

.inside-head { margin: 0 0 6px; font: var(--banner-w) 24px/0.95 var(--banner); font-stretch: 62%; text-transform: uppercase; }
.inside-list li + li { border-top: 1px solid var(--rule); }
.inside-list a { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; }
.inside-list a:hover { text-decoration: none; }
.inside-list a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.inside-list .code { justify-self: start; }
.inside-list span:last-child { font: 500 15.5px/1.25 var(--serif); font-variation-settings: 'opsz' 16; }
.inside-tip { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--rule-2); color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.inside-tip kbd { border-color: var(--ink); color: var(--ink); }

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

.stories {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter);
}
.story { position: relative; min-width: 0; }
.story-photo { margin-bottom: 12px; }
/* The card's top row never wraps: the section name gives way with "…" before the time does. */
.story-kicker { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.story-sec { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--spot-text); font-weight: 900; }
.story-when { flex: none; color: var(--dim); font-weight: 700; }
.story-head {
  margin: 0 0 10px;
  font: 800 25px/1.03 var(--label); font-stretch: 72%; letter-spacing: -0.003em; text-wrap: pretty;
}
.story-text {
  margin: 0 0 14px;
  font: 400 16.5px/1.5 var(--serif); font-variation-settings: 'opsz' 16;
  color: var(--ink-2); text-align: justify; hyphens: auto;
}
.cont {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 12.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: var(--spot); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.cont:hover { color: var(--spot-text); }

/* Recent stories: three to a row, rules in the gutters, the buttons of a row on one line. */
.recent-stories { row-gap: 34px; }
.recent-stories .story { display: flex; flex-direction: column; }
.recent-stories .cont { margin-top: auto; }
.recent-stories .story:nth-child(3n + 1)::before { display: none; }
.recent-stories .story:nth-child(n + 4) { padding-top: 16px; border-top: 1px solid var(--rule-2); }
/* More stories: one row that scrolls sideways, three cards to a view; the arrows move it one story. */
.more-strip { margin-top: 34px; padding-top: 12px; border-top: 3px solid var(--ink); }
.strip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.strip-title { margin: 0; font: var(--banner-w) 24px/1 var(--banner); font-stretch: 62%; text-transform: uppercase; }
.strip-nav { display: flex; gap: 6px; margin-left: auto; }
.strip-btn {
  width: 44px; height: 38px; padding: 0; border: 2px solid var(--ink); background: transparent; color: var(--ink);
  font-size: 18px; font-weight: 900; cursor: pointer;
}
.strip-btn:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.strip-btn:disabled { border-color: var(--rule-2); color: var(--rule-2); cursor: default; }
.strip {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gutter)) / 3);
  padding: 0 0 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
}
.strip .story { display: flex; flex-direction: column; scroll-snap-align: start; }
.strip .cont { margin-top: auto; }
.strip:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* ---------- In plain sight: a special report on Night final stock, across the whole window ---------- */

.sight {
  grid-column: 1 / -1; position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start;
  padding: 0 0 36px;
  box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax);
  background: var(--bg);
}
.sight.sec { background: var(--bg); }
.sight > .sec-head {
  grid-column: 1 / -1; margin: 0 0 22px; padding: 14px 0 12px;
  border-bottom: 3px solid var(--ink);
}
.sight > .sec-head .sec-title { font-size: 34px; }
.sight-side { grid-column: 1 / span 5; grid-row: 2 / span 4; min-width: 0; }
.sight .sight-photo { margin: 0; }
.sight .sight-photo .px-frame { max-height: 520px; }
.sight .sight-photo figcaption { color: var(--dim); }
.sight .story-head { grid-column: 6 / -1; grid-row: 2; margin: 0 0 18px; --max: 92px; }
.sight-body {
  grid-column: 6 / -1; grid-row: 3 / span 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: start;
}
.sight-body > p { grid-column: 1; margin: 0 0 14px; font: 400 17.5px/1.5 var(--serif); color: var(--ink-2); text-align: left; }
.sight-body > p:first-of-type { font-weight: 500; font-size: 19px; line-height: 1.42; color: var(--ink); }
.sight-body > figure { grid-column: 2; grid-row: 1 / span 6; margin: 0; }
/* The front page shows the chart and the opening of an In plain sight item; the story has the rest. */
.sight-body > :is(h2, h3), .sight-body > :is(h2, h3) ~ *, .sight-body > p:nth-of-type(n+3) { display: none; }
.sight > .btn { grid-column: 6 / span 3; grid-row: 5; align-self: start; justify-self: start; margin-top: 6px; }
.earlier-head {
  margin: 24px 0 0; padding: 6px 0 6px; border-bottom: 2px solid var(--ink);
  color: var(--ink); font: 900 15px/1 var(--label); font-stretch: 75%; letter-spacing: 0.08em; text-transform: uppercase;
}
.earlier { }
.earlier li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule-2); }
.earlier time { color: var(--spot-text); font-size: 13px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; padding-top: 2px; }
.earlier a { font: 800 16.5px/1.15 var(--label); font-stretch: 72%; }

/* ---------- Lower: wages, On my desk, the odds ---------- */

.lower {
  grid-column: 1 / -1; min-width: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start;
}
.lower > .wg { grid-column: 1 / span 7; }
.lower-side { grid-column: 8 / -1; position: relative; display: grid; gap: 40px; min-width: 0; }
.lower-side::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) / -2); border-left: 1px solid var(--rule-2); }
.mail { grid-column: 1 / -1; }
.lower > .odds { grid-column: 1 / -1; margin-top: 44px; }
.lower > .odds .odds-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899px) { .lower > .odds .odds-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .lower > .odds .odds-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Charts: newspaper graphics (lib/charts.js) ---------- */

.ch-fig { margin: 8px 0 30px; container: chart / inline-size; }
.ch, .spk, .ch-fig, .ear-chart { --ch-ink: var(--ink); --ch-key: var(--spot); --ch-key-text: var(--spot-text); --ch-grid: var(--rule); }
.fig-head, .bars-title {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
  margin: 0 0 12px; padding-top: 9px; border-top: 3px solid var(--ink);
  color: var(--ink); font-size: 14px; font-weight: 900; letter-spacing: 0.05em; line-height: 1.25; text-transform: uppercase;
}
.fig-title { font-weight: 900; }
.ch { display: block; width: 100%; height: auto; overflow: visible; }
.ch-narrow { display: none; }
@container chart (max-width: 560px) {
  .ch-wide { display: none; }
  .ch-narrow { display: block; }
}
.ch text { font-family: var(--label); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.ch-wide text { font-size: 15px; }
.ch-narrow text { font-size: 14px; }
.ch .ch-lab { fill: var(--ch-ink); font-weight: 800; letter-spacing: 0.04em; }
.ch .ch-val { fill: var(--ch-ink); font-weight: 900; }
.ch .ch-tick { fill: var(--dim); font-weight: 700; }
.ch .ch-note { fill: var(--ch-key-text); font-weight: 900; letter-spacing: 0.05em; font-size: 12.5px; }
.ch .ch-note.is-ink { fill: var(--ch-ink); }
.ch .is-key { fill: var(--ch-key-text); }
.ch .c-ink { fill: var(--ch-ink); }
.ch .c-key { fill: var(--ch-key); }
.ch .c-axis { fill: var(--ch-ink); }
.ch .c-grid { fill: var(--ch-grid); }
.ch .c-rule { fill: var(--rule-2); }
.ch .is-est { stroke-width: 1.5; }
.ch .c-ink.is-est { stroke: var(--ch-ink); }
.ch .c-key.is-est { stroke: var(--ch-key); }
.ch .p-ink rect, .ch .p-ink circle { fill: var(--ch-ink); }
.ch .p-key rect, .ch .p-key circle { fill: var(--ch-key); }
.ch .ln-ink { stroke: var(--ch-ink); }
.ch .ln-key { stroke: var(--ch-key); }
.ch .is-pivot { opacity: 0.55; }
.ch-src {
  display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--rule-2);
  color: var(--dim); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4;
}
.mark { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--ink); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.mark-mn { display: block; flex: none; width: 20px; height: 20px; }
.bars-fig .bars { margin: 0; }

/* ---------- Odds ---------- */

.odds-q { margin: 0 0 8px; color: var(--dim); font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.odds-src { margin: 12px 0 0; color: var(--dim); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.45; }
.odds-src a { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 2px; }
.odds-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
.odds-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
}
.bank { font-size: 17px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.meet { grid-column: 1; grid-row: 2; color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.meter { grid-column: 1 / -1; grid-row: 3; position: relative; height: 14px; margin-top: 4px; background: repeating-linear-gradient(-45deg, var(--rule-2) 0 1.5px, transparent 1.5px 5px); }
.meter::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 1%); background: var(--ink); }
.meter.is-key::after { background: var(--spot); }
.pct { grid-column: 2; grid-row: 1 / span 2; align-self: end; font: var(--banner-w) 34px/0.9 var(--banner); font-stretch: 62%; }

/* ---------- Desk ---------- */

.desk .prompt { margin-bottom: 6px; }
.ls li {
  display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
}
.ls a { font: 800 16.5px/1.15 var(--label); font-stretch: 72%; }
.dir { color: var(--spot-text); font-size: 13px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.ls-note { display: block; margin-top: 4px; color: var(--ink-2); font: 400 15px/1.4 var(--serif); font-variation-settings: 'opsz' 16; }
.ext { color: var(--ink); font-size: 11px; font-weight: 900; letter-spacing: 0.06em; border: 1.5px solid var(--ink); padding: 2px 5px 1px; }

.refs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.ref-id { grid-column: 1 / -1; color: var(--spot-text); font-size: 12px; font-weight: 900; }
.refs a { font: 800 17px/1.15 var(--label); font-stretch: 72%; }
.ref-min { color: var(--dim); font-size: 12px; white-space: nowrap; }

/* ---------- Inner pages: the slim flag ---------- */

.minihead { text-align: left; }
.flag-mini { margin-bottom: 5px; }
.flag-in {
  max-width: var(--page-w); margin: 0 auto; padding: 14px var(--margin) 15px;
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.mini-plate {
  display: inline-block; color: var(--ink);
  font: 800 54px/1 var(--serif); font-variation-settings: 'opsz' 72; letter-spacing: -0.02em;
}
.mini-plate:hover { text-decoration: none; }
.flag-in .late { margin: 0; }

.rail-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 0 0 8px; padding-top: 9px; border-top: 3px solid var(--ink);
  font-size: 14px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
}
.rail-head span { color: var(--dim); font-size: 11.5px; font-weight: 700; }
.side-list li { padding: 9px 0; border-bottom: 1px solid var(--rule); font: 800 16.5px/1.15 var(--label); font-stretch: 72%; }
.side-list li span { display: block; margin-top: 4px; color: var(--dim); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.side-list .nx-when { margin: 0 0 3px; color: var(--spot-text); font-weight: 900; }

/* ---------- Article page ---------- */

.art-page {
  max-width: var(--page-w); margin: 0 auto; padding: 26px var(--margin) 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 30px; align-items: start;
}
.art-head { grid-column: 1 / -1; grid-row: 1; }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 16px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.kicker a:hover { text-decoration: none; }
.kicker span + span { color: var(--dim); }
.kicker .code { height: 28px; padding: 1px 10px 0; font-size: 13px; }
.kicker .code[data-g="research"] { background: var(--box); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.kicker .k-format { color: var(--ink); font-weight: 900; }
.art-title { --max: 124px; margin: 0 0 20px; }
.art-deck { margin: 0; max-width: 44em; font: 600 24px/1.32 var(--serif); font-variation-settings: 'opsz' 24; color: var(--ink); }
.art-by {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px;
  margin-top: 20px; padding: 10px 0 9px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule-2);
  font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.art-by p { margin: 0; }
.by-name { margin-right: 10px; font-weight: 900; }
.by-bio { color: var(--dim); }
/* Save, Copy link and the two posts share one centre line; the link and the button look the same. */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.share a, .share .linkish { text-decoration: underline; text-decoration-color: var(--spot); text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.share a:hover, .share .linkish:hover { color: var(--spot-text); }

/* The note file: a fact box that starts level with the photo and stays in view down the article. */
.art-file {
  grid-column: 1 / span 2; grid-row: 2; position: sticky; top: 74px;
  padding: 0 12px 12px; background: var(--box); border: 2px solid var(--ink); border-top-width: 6px;
}
.art-file .rail-head { border-top: 0; padding-top: 10px; }
.art-file .rail-head + .file { border-top: 1.5px solid var(--ink); }
.file { margin: 0 0 18px; }
.file div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0 5px; border-bottom: 1px solid var(--rule); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.file dt { color: var(--dim); font-weight: 700; }
.file dd { margin: 0; text-align: right; font-weight: 900; }
.file a { text-decoration: underline; text-decoration-color: var(--spot); text-underline-offset: 3px; }
.toc li a {
  display: block; padding: 7px 0; border-bottom: 1px solid var(--rule);
  font: 800 15px/1.15 var(--label); font-stretch: 72%;
}

.art-body { grid-column: 3 / span 7; grid-row: 2; min-width: 0; --measure: 684px; }
.art-photo { margin-bottom: 26px; }
.short {
  margin: 0 0 28px; padding: 12px 18px 14px;
  background: var(--box); color: var(--ink); border: 2px solid var(--ink); border-top-width: 6px; border-top-color: var(--amber);
}
.short h2 { margin: 0 0 6px; padding-bottom: 7px; border-bottom: 2px solid var(--ink); font-size: 15px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.short li { position: relative; padding: 7px 0 6px 22px; border-bottom: 1px solid rgba(23, 19, 14, 0.25); font: 500 18.5px/1.38 var(--serif); font-variation-settings: 'opsz' 18; }
.short li:last-child { border-bottom: 0; }
.short li::before { content: ""; position: absolute; left: 2px; top: 0.85em; width: 9px; height: 9px; background: var(--amber); }

.prose { color: var(--ink-2); font: 400 19px/1.6 var(--serif); font-variation-settings: 'opsz' 16; }
.prose p { margin: 0 0 1em; }
.prose > :is(p, h2, h3, ul, ol, blockquote) { max-width: 36em; }
.art-body > :is(.prose, .short, .disclose, .author) { max-width: var(--measure); }
.art-body .prose > p { text-align: justify; hyphens: auto; text-wrap: pretty; }
.prose h2, .art-body .prose h2 {
  margin: 1.5em 0 0.45em; padding-top: 10px; border-top: 3px solid var(--ink); color: var(--ink);
  font: 800 26px/1.05 var(--label); font-stretch: 72%; text-wrap: balance;
}
.prose h3 { margin: 1.3em 0 0.4em; color: var(--ink); font: 800 21px/1.1 var(--label); font-stretch: 72%; }
.prose ul:not(.contains-task-list), .prose ol { padding-left: 1.2em; }
.prose ul li { list-style: square; }
.prose ol li { list-style: decimal; }
.prose li { margin-bottom: 0.4em; }
/* Sources are linked in the text, where each figure is used. */
.prose :is(p, li, td) a:not([data-footnote-ref]) {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--spot); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.prose :is(p, li, td) a:not([data-footnote-ref]):hover { color: var(--spot-text); }
.fn { font: 900 12px/0 var(--label); }
.fn a { padding: 0 2px; color: var(--spot-text); }
.pull { margin: 1.3em 0; padding: 12px 0 12px 18px; border-left: 6px solid var(--spot); }
.pull p { margin: 0; color: var(--ink); font: var(--banner-w) 34px/0.98 var(--banner); font-stretch: 62%; text-transform: uppercase; }
.art-body .ch-fig { max-width: var(--measure); }
.watch { margin: 0 0 30px; }
.watch th, .watch td { text-align: left; white-space: normal; }
.disclose { margin: 0 0 22px; padding: 12px 16px; border: 1.5px solid var(--ink); border-left-width: 6px; }
.disclose h2 { margin: 0 0 4px; font-size: 13px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.disclose p { margin: 0; font: 400 15.5px/1.5 var(--serif); }
.author { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); }
.au-mark { display: block; }
.author p { margin: 0; font: 400 16px/1.5 var(--serif); }
.art-thirty { margin: 36px 0 0; }

.art-side { grid-column: 10 / -1; grid-row: 2; position: relative; display: flex; flex-direction: column; gap: 28px; }
.art-side::before, .cat-side::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--gutter) / -2); border-left: 1px solid var(--rule-2);
}
/* Key levels: the markets box, on salmon. */
.art-side .keybox { padding: 0 12px 4px; background: var(--box); color: var(--ink); border-top: 6px solid var(--ink); }
.keybox .rail-head { border-top: 0; color: inherit; }
.levels-col { margin: 0; padding: 0; border-top: 1.5px solid currentColor; background: none; grid-template-columns: minmax(0, 1fr); }
[data-theme="terminal"] .levels-col { background: none; }
.levels-col div:nth-child(even) { padding-left: 0; border-left: 0; }
.levels-col div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; }
.levels-col dd { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-size: 32px; }
.levels-col dd.chg { grid-column: 1; grid-row: 2; text-align: left; }
.fnotes li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.fnotes a { color: var(--spot-text); font: 900 12px/1.6 var(--label); }
.fnotes p { margin: 0; color: var(--ink-2); font: 400 14px/1.45 var(--serif); }
.art-page .mail { grid-column: 1 / -1; margin-top: 36px; }
.more-from { grid-column: 1 / -1; }
.more-stories { padding-top: 0; }
.more-stories .story-head { font-size: 24px; }

/* Article prose from Markdown: the photo runs past the text, the rest keeps the measure. */
.page-text .prose { margin: 28px 0 0; max-width: 36em; }
.page-text .prose > p:first-of-type::first-letter { float: none; margin: 0; padding: 0; font: inherit; color: inherit; text-transform: none; }
.page-text .prose h2 { font-size: 24px; }
.empty-state { margin: 24px 0; color: var(--ink-2); font: 400 20px/1.45 var(--serif); }
.prose blockquote { margin: 1.3em 0; padding: 12px 0 12px 18px; border-left: 6px solid var(--spot); }
.prose blockquote p { margin: 0; color: var(--ink); font: var(--banner-w) 34px/0.98 var(--banner); font-stretch: 62%; text-transform: uppercase; text-align: left !important; }
.prose table { width: 100%; margin: 0 0 30px; border-collapse: collapse; font: 600 15px/1.35 var(--label); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.prose thead th { padding: 6px 8px 5px; background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; }
.prose tbody td { padding: 7px 8px 6px; border-bottom: 1px solid var(--rule); }
.prose sup a { padding: 0 2px; color: var(--spot-text); font: 900 12px/0 var(--label); }
.prose .footnotes { margin-top: 28px; padding-top: 10px; border-top: 3px solid var(--ink); font: 400 15.5px/1.45 var(--serif); }
.prose .footnotes h2 { margin-top: 0; padding-top: 0; border-top: 0; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.prose .footnotes ol { padding-left: 1.4em; }
#side-notes ol { margin: 0; padding-left: 1.2em; font: 400 14.5px/1.45 var(--serif); color: var(--ink-2); }
#side-notes li { padding: 7px 0; border-bottom: 1px solid var(--rule); list-style: decimal; }
#side-notes li::marker { color: var(--spot-text); font: 900 13px var(--label); }
.data-footnote-backref { margin-left: 4px; text-decoration: none; }
.sample-tag {
  display: inline-block; margin-left: 8px; padding: 2px 5px 1px; border: 1.5px solid currentColor;
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px;
}
.tag-note { margin: 6px 0 0; color: var(--dim); font-size: 12px; }

/* ---------- Group, section, archive and list pages ---------- */

.cat-page, .arch-page { max-width: var(--page-w); margin: 0 auto; padding: 26px var(--margin) 0; }
/* The page head prints on the section's stock: the fitted banner title, the description beside it. */
.cat-head {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 36px; align-items: end;
  padding: 22px 26px 22px; background: var(--bg);
  border-top: 7px solid var(--ink);
}
.cat-head { border: 2px solid var(--ink); border-top-width: 7px; }
.cat-title { --max: 176px; grid-column: 1; }
.cat-head > :not(.cat-title):not(.subtabs) { grid-column: 2; }
.cat-icon { display: none; }
.cat-desc { margin: 0; color: var(--ink); font: 500 20px/1.38 var(--serif); font-variation-settings: 'opsz' 18; }
.cat-parent { grid-column: 1 / -1 !important; margin: 0 0 12px; font-size: 14px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.cat-parent a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Sub-tabs of a group: Archivo capitals along the foot of the head. */
.subtabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; margin: 22px -26px -22px; border-top: 2px solid var(--ink); background: var(--bg); }
.subtabs a { flex: none; padding: 13px 18px 12px; color: var(--ink); font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.subtabs a + a { border-left: 1px solid var(--rule-2); }
.subtabs a[aria-current="page"] { background: var(--ink); color: var(--page); }
.subtabs a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sub-count { margin-left: 7px; font-weight: 700; opacity: 0.75; }
.side-about p { margin: 0 0 10px; color: var(--ink-2); font: 400 16px/1.45 var(--serif); }
.side-about a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--spot); text-underline-offset: 3px; }

/* The lead: the photo, then the fields and headline over the deck, then the markets rail. */
.cat-lead {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gutter); align-items: start;
  padding: 28px 0 34px; border-bottom: 3px solid var(--ink);
}
.cat-photo { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.cat-lead-head, .cat-lead-text { grid-column: 7 / span 3; position: relative; }
.cat-lead-head::before, .cat-lead-text::before, .is-type .fields::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) / -2); border-left: 1px solid var(--rule-2);
}
.cat-lead-text { grid-row: 2; }
.cat-lead-title { margin: 0 0 14px; font: 800 38px/1.0 var(--label); font-stretch: 72%; letter-spacing: -0.005em; text-wrap: pretty; }
.cat-lead-text .deck { font-size: 19px; }
.cat-lead-text .btn { margin-top: 16px; }
.cat-side { grid-column: 10 / -1; grid-row: 1 / span 2; position: relative; display: flex; flex-direction: column; gap: 22px; }
/* A lead with no photo: the headline takes the photo's place, set large, and the fields head the text column. */
.is-type .cat-lead-head { display: contents; }
.is-type .cat-lead-head::before { content: none; }
.is-type .fields { grid-column: 7 / span 3; grid-row: 1; position: relative; margin: 0; padding-bottom: 14px; }
.is-type .cat-lead-hl { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.is-type .cat-lead-title { margin: -4px 0 0; font: var(--banner-w) 70px/0.88 var(--banner); font-stretch: 62%; text-transform: uppercase; letter-spacing: 0; text-wrap: balance; }
.cat-open {
  margin: 22px 0 0; columns: 2; column-gap: var(--gutter); column-rule: 1px solid var(--rule-2);
  color: var(--ink-2); font: 400 17px/1.52 var(--serif); font-variation-settings: 'opsz' 16;
  text-align: justify; hyphens: auto; text-wrap: pretty;
}
/* An empty page: the sentence, then what goes there, in columns. */
.cat-empty { padding: 24px 0 0; }
.cat-empty .empty-state { margin: 0 0 32px; }
.cat-empty .side-about { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); }
.cat-empty .rail-head { grid-column: 1 / -1; }
/* Lists by month read like a newspaper index: month bars in black, dates in capitals, Archivo headlines. */
.month { margin-top: 30px; }
.month[hidden], .row[hidden] { display: none; }
.month-head { margin: 0; padding: 7px 10px 6px; background: var(--ink); color: var(--page); font-size: 14px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.row {
  display: grid; grid-template-columns: 76px 150px minmax(0, 1fr) 190px; gap: 4px 22px; align-items: baseline;
  padding: 15px 0 14px; border-bottom: 1px solid var(--rule-2);
}
.row:not(:has(.code-link)) { grid-template-columns: 76px minmax(0, 1fr) 190px; }
.row time { display: flex; flex-direction: column; gap: 3px; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; }
.row-day { font-weight: 900; }
.row-time { color: var(--dim); font-weight: 700; }
.code-link:hover { text-decoration: none; }
.row-title { font: 800 23px/1.06 var(--label); font-stretch: 72%; }
.row-deck { margin: 6px 0 0; color: var(--ink-2); font: 400 16.5px/1.42 var(--serif); font-variation-settings: 'opsz' 16; }
.row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; color: var(--dim); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: right; }
.row-format { color: var(--ink); font-weight: 900; }
.list-end { margin: 28px 0 0; }
.cat-page .mail, .arch-page .mail { margin-top: 56px; }

.arch-controls { display: grid; gap: 12px; padding: 20px 0 18px; border-bottom: 3px solid var(--ink); }
.arch-search {
  display: flex; align-items: center; gap: 10px; max-width: 560px; height: 46px; padding: 0 12px;
  background: var(--box); border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 2px var(--box), inset 0 0 0 3px var(--ink);
}
.arch-search:focus-within { box-shadow: inset 0 0 0 2px var(--box), inset 0 0 0 4px var(--spot); }
.arch-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  color: var(--ink); caret-color: var(--spot); font: 500 17px/1 var(--serif);
}
.arch-search input::placeholder { color: var(--dim); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chips-label { width: 70px; color: var(--dim); font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 1px 12px 0; border: 2px solid var(--ink); background: transparent;
  font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.chip-icon { flex: none; width: 16px; height: 16px; fill: currentColor; }
.row-cat { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.row-cat .chip-icon { width: 22px; height: 22px; padding: 2px; background: transparent; fill: var(--spot-text); }
.row[data-group="research"] .row-cat { --chip: var(--box); }
.row[data-group="research"] .row-cat .chip-icon { fill: var(--ink); border-color: var(--ink); }
.arch-count { margin: 0; color: var(--dim); font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.arch-empty { padding: 24px 0; font: 400 19px/1.4 var(--serif); }
.linkish { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* The week ahead: the diary page. Day bars in black, the calendar in condensed figures, key releases in red. */
.week-block { margin-top: 30px; }
.week-block .sec { margin-top: 16px; }
.mkt { width: 100%; border-collapse: collapse; font-size: 15px; font-weight: 600; }
.mkt caption { padding: 0 0 6px; text-align: left; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.mkt th, .mkt td { padding: 7px 10px 6px; text-align: right; white-space: nowrap; }
.mkt thead th { border-bottom: 2px solid var(--ink); color: var(--ink); font-size: 12.5px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.mkt thead th:first-child, .mkt tbody th { text-align: left; }
.mkt tbody th { font-weight: 800; }
.mkt tbody tr { border-bottom: 1px solid var(--rule); }
.mkt td.up, .mkt td.down { font-weight: 800; }
.eco thead th:nth-child(-n+3), .eco tbody th { text-align: left; }
.eco tbody th { white-space: normal; font: 700 17px/1.25 var(--serif); font-stretch: normal; }
.eco td:nth-child(1), .eco td:nth-child(2) { text-align: left; color: var(--ink); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.eco td:nth-child(2) { color: var(--dim); font-weight: 700; }
.eco tr.is-hi td:first-child { box-shadow: inset 6px 0 0 var(--spot); padding-left: 16px; }
.eco tr.is-hi th { color: var(--spot-text); }
.eco tr.day-row td { padding: 7px 10px 6px; background: var(--ink); color: var(--page); font-size: 13px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; box-shadow: none; }
.eco td.eco-actual { font-weight: 900; }
.eco td.is-empty { color: var(--rule-2); font-weight: 600; }
.calendar { container: calendar / inline-size; }
@container calendar (max-width: 429px) {
  .eco :is(th, td):is(:nth-child(4), :nth-child(7)), .eco tr:not(.day-row) > :first-child { display: none; }
  .eco th, .eco td { padding-left: 6px; padding-right: 6px; }
  .eco tr.is-hi td:nth-child(2) { box-shadow: inset 5px 0 0 var(--spot); padding-left: 12px; }
}
.week-block .calendar .sec-head { display: none; }
.week-block .calendar.sec { padding-top: 10px; }

/* Page heads with no description: the banner takes the whole width. A kicker can sit above it. */
.cat-head:not(:has(.cat-desc)):not(:has(.subtabs)) { grid-template-columns: minmax(0, 1fr); }
.cat-head:not(:has(.cat-desc)) .cat-title { --max: 150px; }
.cat-kicker { grid-column: 1 / -1 !important; justify-self: start; margin: 0 0 14px; padding: 5px 10px 4px; background: var(--ink); color: var(--page); font: 900 14px/1 var(--label); font-stretch: 75%; letter-spacing: 0.12em; text-transform: uppercase; }
.stop-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.stop-links a { padding: 11px 14px 10px; border: 2px solid var(--ink); font: 900 13px/1 var(--label); font-stretch: 75%; letter-spacing: 0.06em; text-transform: uppercase; }
.stop-links a:hover { background: var(--ink); color: var(--page); text-decoration: none; }
/* In plain sight, the newest item: photo and text side by side. */
.sight-feature { grid-template-columns: minmax(0, 1fr); margin-top: 28px; padding-bottom: 28px; border-bottom: 3px solid var(--ink); }
.sight-feature .story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gutter); align-content: start; }
.sight-feature .story > * { grid-column: 2; }
.sight-feature .story-photo { grid-column: 1; grid-row: 1 / span 5; margin: 0; }
.sight-feature .story-head { font-size: 40px; line-height: 0.98; }
.sight-feature .story-text { font-size: 18px; }
@media (max-width: 899px) {
  .sight-feature .story { grid-template-columns: minmax(0, 1fr); }
  .sight-feature .story > *, .sight-feature .story-photo { grid-column: 1; grid-row: auto; }
  .sight-feature .story-photo { margin-bottom: 14px; }
  .sight-feature .story-head { font-size: 30px; }
}

/* ---------- End of page: the black footer of v8, with the amber rule ---------- */

.foot {
  margin-top: 72px; background: #000000; color: #F5F3EE;
  border-top: 6px solid var(--amber);
  --ink: #F5F3EE; --dim: #8F8B81; --rule: #2A2A2A; --rule-2: #57544C; --focus: #FFD000;
}
.foot-top {
  max-width: var(--page-w); margin: 0 auto; padding: 30px var(--margin) 22px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 1.5px solid #57544C;
}
.foot-plate { margin: 0; font: 800 64px/1 var(--serif); font-variation-settings: 'opsz' 72; letter-spacing: -0.02em; color: #F5F3EE; }
.foot-ed { margin: 0; padding: 5px 10px 4px; background: var(--amber); color: #000000; font: 900 13px/1 var(--label); font-stretch: 75%; letter-spacing: 0.1em; text-transform: uppercase; }
.foot-grid {
  max-width: var(--page-w); margin: 0 auto; padding: 30px var(--margin) 26px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--gutter);
}
.foot-mn { display: block; width: 64px; height: 64px; }
.foot-brand p { margin: 14px 0 0; max-width: 34ch; color: #CFCBC1; font: 400 18px/1.42 var(--serif); font-variation-settings: 'opsz' 16; }
.foot h2 { margin: 0 0 12px; padding-bottom: 7px; border-bottom: 2px solid #FFA216; color: #FFA216; font-size: 13.5px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.foot li + li { margin-top: 8px; }
.foot nav a { font: 500 17px/1.3 var(--serif); }
.social:hover { text-decoration: none; }
.social:hover .social-name { text-decoration: underline; text-underline-offset: 3px; }
.social-name { display: block; font-weight: 700; }
.social-handle { display: block; margin-top: 2px; color: var(--dim); font-size: 15px; }
.disclaimer {
  max-width: var(--page-w); margin: 0 auto; padding: 4px var(--margin) 30px;
  color: #CFC6B4; font: 400 15px/1.5 var(--serif);
}
.disclaimer h2 { margin: 0 0 12px; padding: 18px 0 7px; border-top: 1.5px solid #57544C; }
.disclaimer-text { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.disclaimer p { margin: 0; }
.status {
  display: flex; flex-wrap: wrap; align-items: stretch;
  border-top: 1.5px solid #57544C; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.status span { display: flex; align-items: center; min-height: 40px; padding: 1px 12px 0; }
.st-mark { padding-left: var(--margin) !important; }
.st-mark svg { display: block; width: 30px; height: 30px; }
.st-dim { color: var(--dim); }
.st-end { margin-left: auto; padding-right: var(--margin) !important; color: var(--dim); }

/* ---------- Responsive ---------- */

@media (max-width: 1279px) {
  .clocks .clock:nth-child(n+2) { display: none; }
  .sect { gap: 10px; font-size: 16px; }
  .plate-row { grid-template-columns: 228px minmax(0, 1fr) 228px; gap: 22px; }
}

@media (max-width: 1199px) {
  .front { grid-template-rows: none; }
  .lead, .recent { grid-column: 1 / -1; }
  /* Under the paper the markets page runs in two balanced columns, each section kept whole. */
  .rail { grid-column: 1 / -1; grid-row: auto; display: block; columns: 2; column-gap: 28px; column-rule: 1px solid var(--rule-2); padding-bottom: 6px; }
  .rail > * { break-inside: avoid; margin-bottom: 28px; }
  .rail-flag { margin: 0 -16px 14px; column-span: all; }
  .rail .sec + .sec, .rail .inside { border-top: 3px solid var(--ink); }
  .sight-side { grid-column: 1 / span 6; grid-row: 2 / span 3; }
  .sight .story-head { grid-column: 7 / -1; grid-row: 2; }
  .sight-body { grid-column: 7 / -1; grid-row: 3; grid-template-columns: minmax(0, 1fr); }
  .sight-body > figure { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .sight > .btn { grid-column: 7 / -1; grid-row: 4; }

  .lower > .wg { grid-column: 1 / -1; }
  .lower-side { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--gutter); margin-top: 40px; }
  .lower-side::before { display: none; }
  .plate-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 18px; }
  .plate-box { grid-column: 1 / -1; order: -1; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .disclaimer-text { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .art-file { display: none; }
  .art-body { grid-column: 1 / span 8; }
  .art-side { grid-column: 9 / -1; }
  .cat-photo { grid-column: 1 / span 7; }
  .cat-lead-head, .cat-lead-text, .is-type .fields { grid-column: 8 / -1; }
  .is-type .cat-lead-hl { grid-column: 1 / span 7; }
  .is-type .cat-lead-title { font-size: 60px; }
  .cat-open { columns: 1; }
  .cat-side { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px var(--gutter); margin-top: 24px; }
  .cat-side::before { display: none; }
}

@media (max-width: 899px) {
  :root { --margin: 20px; }
  html { scroll-padding-top: 12px; }
  .cmdbar { position: static; flex-wrap: wrap; height: auto; gap: 10px 12px; padding-top: 10px; padding-bottom: 10px; }
  .cmd { order: 10; flex: 1 1 100%; max-width: none; }
  .clocks { display: none; }
  .tool-link { margin-left: auto; }
  .theme { margin-left: 0; }
  .lead-top { grid-template-columns: minmax(0, 1fr); }
  .lead-side::before { display: none; }
  .columns { columns: 2; }
  .recent-stories .story::before { display: block; }
  .recent-stories .story:nth-child(odd)::before { display: none; }
  .recent-stories .story:nth-child(n + 3) { padding-top: 16px; border-top: 1px solid var(--rule-2); }
  .strip { grid-auto-columns: calc((100% - var(--gutter)) / 2); }
  .stories { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 34px; }
  .story:nth-child(3)::before { display: none; }
  .art-body, .art-side { grid-column: 1 / -1; grid-row: auto; }
  .art-side::before { display: none; }
  .art-side { display: grid; grid-template-columns: 1fr 1fr; gap: 24px var(--gutter); }
  .cat-head { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .cat-head > :not(.cat-title):not(.subtabs) { grid-column: 1; }
  .cat-photo, .cat-lead-head, .cat-lead-text, .is-type .fields, .is-type .cat-lead-hl { grid-column: 1 / -1; grid-row: auto; }
  .cat-lead-head { margin-top: 16px; }
  .cat-lead-head::before, .cat-lead-text::before, .is-type .fields::before { display: none; }
  .is-type .cat-lead-title { margin: 0 0 14px; font-size: 52px; }
  .cat-open { display: none; }
  .row, .row:not(:has(.code-link)) { grid-template-columns: 64px minmax(0, 1fr); }
  .row .code-link { grid-column: 2; grid-row: 1; justify-self: start; }
  .row .row-main { grid-column: 2; }
  .row-meta { grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; text-align: left; }
  .sight-side, .sight .story-head, .sight-body, .sight > .btn { grid-column: 1 / -1; grid-row: auto; }
  .sight-side { display: contents; }
  .sight .sight-photo { grid-column: 1 / -1; }
  .earlier-head, .earlier { grid-column: 1 / -1; order: 9; }
  .sight .sight-photo { margin-bottom: 18px; }
  .sight-body > figure { margin-top: 10px; }
  .sight > .btn { margin: 4px 0 26px; }
  .earlier { grid-template-columns: minmax(0, 1fr); }
  .lower-side { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 759px) {
  :root { --margin: 16px; --gutter: 16px; }
  body { font-size: 16px; }
  .front { row-gap: 38px; padding-top: 18px; }
  .lead, .rail, .sight, .lower { grid-column: 1 / -1; }
  .rail { columns: 1; padding-left: 14px; padding-right: 14px; }
  .rail-flag { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .rail > * { margin-bottom: 30px; }
  .ruled::before { display: none; }
  .plate-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding-top: 14px; padding-bottom: 16px; }
  .ear { padding: 8px 9px 9px; }
  .ear-head { font-size: 11.5px; flex-direction: column; gap: 2px; }
  .ear-num { --max: 60px; }
  .ear-cap { font-size: 14px; }
  .ear-chart-meta { flex-direction: column; align-items: flex-start; white-space: normal; gap: 4px; }
  .ear-chart-meta span { overflow: visible; font-size: 12px; }
  .ear-src { font-size: 11px; }
  .nameplate { font-size: 9.4cqi; }
  .late { margin-top: 10px; font-size: 11.5px; }
  .art { margin-top: 12px; }
  .art-hint { display: none; }
  .dateline { justify-content: center; gap: 4px 14px; font-size: 12px; text-align: center; }
  .mini-tag { display: none; }
  .sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sect { height: 56px; font-size: 15px; justify-content: flex-start; padding: 0 10px; gap: 10px; }
  .sect-icon { width: 30px; height: 30px; }
  .sect:nth-child(odd) { border-left: 0; }
  .sect:nth-child(n+3) { border-top: 1.5px solid var(--ink); }
  .sect-new { top: 4px; right: 6px; }
  .flag-in { padding-top: 12px; padding-bottom: 12px; gap: 10px; }
  .mini-plate { font-size: 34px; }
  .banner { --max: 76px; }
  .deck { font-size: 19px; }
  .columns { columns: 1; }
  .stories { grid-template-columns: minmax(0, 1fr); }
  .story + .story::before { display: none; }
  .recent-stories .story + .story, .story + .story { padding-top: 18px; border-top: 1px solid var(--rule-2); }
  .story-head { font-size: 24px; }
  /* On phones the strip shows one story and the edge of the next. */
  .strip { grid-template-columns: none; grid-auto-columns: 85%; }
  .strip .story + .story { padding-top: 0; border-top: 0; }
  .strip .story + .story::before { display: block; }
  .jump { justify-content: flex-start; }
  .jump .btn { width: 100%; }
  .sight { padding-bottom: 28px; }
  .sight > .sec-head .sec-title { font-size: 28px; }
  .sight .story-head { --max: 64px; }
  .sight-body { grid-template-columns: minmax(0, 1fr); }
  .odds-list { grid-template-columns: minmax(0, 1fr); }
  .mkt { font-size: 14px; }
  .foot-top { padding-top: 24px; }
  .foot-plate { font-size: 38px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .disclaimer-text { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .status { flex-direction: column; }
  .status span { padding-left: var(--margin); min-height: 32px; }
  .st-end { margin-left: 0; }
  .art-page { padding-top: 20px; row-gap: 24px; }
  .kicker { gap: 6px 14px; font-size: 12px; }
  .art-title { --max: 72px; }
  .art-deck { font-size: 20px; }
  .art-by { flex-direction: column; align-items: flex-start; }
  .prose { font-size: 18px; }
  .art-body { --measure: 648px; }
  .art-side { grid-template-columns: minmax(0, 1fr); }
  .pull p, .prose blockquote p { font-size: 28px; }
  .cat-page, .arch-page { padding-top: 20px; }
  .cat-head { padding: 16px 16px 18px; }
  .cat-title { --max: 120px; }
  .cat-desc { font-size: 18px; }
  .subtabs { margin: 16px -16px -18px; }
  .subtabs a { padding: 12px 12px 11px; font-size: 12.5px; }
  .cat-lead-title { font-size: 32px; }
  .is-type .cat-lead-title { font-size: 44px; }
  .cat-side, .cat-empty .side-about { grid-template-columns: minmax(0, 1fr); }
  .row-title { font-size: 21px; }
  .chips-label { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-viewport { overflow-x: auto; scrollbar-width: none; }
  [data-flash] { animation: none; outline: 4px solid var(--spot); outline-offset: 2px; }
}

/* ---------- Accounts: the account menu, the sign-in dialog and the consent cards ---------- */

.account { position: relative; flex: none; }
.signin { font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; min-height: 36px; }
.signin:hover { text-decoration: underline; text-decoration-color: var(--spot); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Classes below set display, which would beat the hidden attribute. */
.account [hidden], .signin-dialog [hidden], .signin-box [hidden], .save [hidden],
#signin-page [hidden], #saved-page [hidden], #admin-page [hidden] { display: none; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 30;
  display: grid; min-width: 230px; padding: 6px 0;
  background: var(--box); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
.account-menu a, .account-menu button {
  display: block; width: 100%; padding: 10px 14px 9px; color: var(--ink); text-align: left;
  font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
.account-menu a:hover, .account-menu button:hover { background: var(--ink); color: var(--box); text-decoration: none; }
.account-email {
  margin: 0 0 6px; padding: 4px 14px 10px; border-bottom: 1.5px solid var(--ink);
  color: var(--dim); font: 500 14px/1.3 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-email:empty { display: none; }

/* The sign-in dialog and box: a classified advertisement, a rule, a gap and a rule around it. */
.signin-dialog {
  width: min(480px, calc(100vw - 32px)); margin: auto; padding: 20px 24px 22px;
  border: 2px solid var(--ink); background: var(--box); color: var(--ink);
  box-shadow: inset 0 0 0 4px var(--box), inset 0 0 0 5.5px var(--ink);
}
.signin-dialog::backdrop { background: rgb(23 19 14 / 0.6); }
.signin-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 3px solid var(--ink); }
.signin-title { margin: 0; font: var(--banner-w) 40px/0.9 var(--banner); font-stretch: 62%; text-transform: uppercase; }
.signin-top .linkish { font: 900 12.5px/1 var(--label); font-stretch: 75%; letter-spacing: 0.06em; text-transform: uppercase; min-height: 32px; }
.signin-lede { margin: 0 0 14px; color: var(--ink-2); font: 400 18px/1.45 var(--serif); font-variation-settings: 'opsz' 16; }
.signin-form { display: flex; gap: 8px; }
.signin-form input {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px;
  border: 2px solid var(--ink); background: var(--box); color: var(--ink); font: 500 16px/1 var(--serif);
}
.signin-form input:focus { outline: none; border-color: var(--spot); }
.signin-form .btn { min-height: 44px; }
.signin-status { margin: 10px 0 0; font: 700 14px/1.35 var(--serif); }
.signin-status:empty { display: none; }
.consent-line { margin: 12px 0 0; color: var(--dim); font: 400 14px/1.4 var(--serif); }
.consent-line a, .consent a { text-decoration: underline; text-decoration-color: var(--spot); text-underline-offset: 3px; }
.signin-box {
  max-width: 600px; margin: 22px 0 40px; padding: 22px 24px 22px;
  background: var(--box); border: 2px solid var(--ink); box-shadow: inset 0 0 0 4px var(--box), inset 0 0 0 5.5px var(--ink);
}

.consent {
  position: fixed; right: 20px; bottom: 20px; z-index: 40; width: min(400px, calc(100vw - 32px));
  padding: 16px 18px; background: var(--box); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--amber);
}
.consent-title { margin: 0 0 8px; font: var(--banner-w) 30px/0.92 var(--banner); font-stretch: 62%; text-transform: uppercase; }
.consent-text { margin: 0 0 8px; color: var(--ink-2); font: 400 16px/1.45 var(--serif); font-variation-settings: 'opsz' 16; }
.consent-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px; font-size: 13px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }
.consent-fine { margin: 0 0 12px; color: var(--dim); font-size: 12px; }
.consent-actions { display: flex; justify-content: flex-end; gap: 8px; }
.consent-status { margin: 8px 0 0; color: var(--down); font-size: 12px; }
.consent-status:empty { display: none; }
.btn-quiet { border-color: var(--rule-2); color: var(--ink-2); }
.btn-danger { border-color: var(--down); color: var(--down); }
.btn-danger:hover { background: var(--down); color: var(--box); }

@media (max-width: 759px) {
  /* The first row is full on a phone: Sign in goes at the end of the search row. */
  .cmd { flex: 1 1 calc(100% - 90px); }
  .account { order: 11; }
  .consent { right: 0; bottom: 0; width: 100%; border-width: 2px 0 0; box-shadow: none; }
  .signin-form { flex-direction: column; }
  .signin-form input { flex: none; }
  .signin-box { padding: 18px 16px; }
}

/* ---------- Accounts: the Save button, /signin/ and /saved/ ---------- */

.save { position: relative; display: inline-flex; align-items: center; }
.save-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 1px 11px 0;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}
.save-btn:hover { background: var(--ink); color: var(--page); }
.save-btn[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.save-icon { flex: none; fill: currentColor; }
.save-tip {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 25;
  padding: 8px 11px 7px; background: var(--ink); color: var(--page);
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.save-tip button { color: inherit; font-weight: 900; text-transform: uppercase; }
.save-msg:not(.sr-only) {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 25;
  color: var(--down); font: 800 12px/1 var(--label); font-stretch: 75%; white-space: nowrap; text-transform: uppercase;
}
.signin-as { margin: 24px 0 14px; font: 400 21px/1.4 var(--serif); }
.saved-count { margin-top: 18px; }
.saved-list .row-meta button { color: var(--ink); font-size: 12.5px; font-weight: 900; text-decoration: underline; text-decoration-color: var(--spot); text-underline-offset: 3px; }
.saved-list .row-meta button:hover { color: var(--spot-text); }
.acct {
  display: grid; gap: 14px; max-width: 640px; margin: 56px 0 0; padding: 0 20px 20px;
  background: var(--box); border: 2px solid var(--ink); border-top-width: 7px;
}
.acct p { margin: 0; }
.acct-title { margin: 0 -20px; padding: 12px 20px 10px; border-bottom: 1.5px solid var(--ink); font: var(--banner-w) 34px/0.92 var(--banner); font-stretch: 62%; text-transform: uppercase; }
.acct-label { margin-right: 8px; color: var(--dim); font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.acct-delete p { margin: 0 0 10px; font: 400 17px/1.45 var(--serif); }
.acct-status { color: var(--dim); font-size: 13px; }
.acct-status:empty { display: none; }

/* ---------- Accounts: the admin panel ---------- */

.adm-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 24px 0 0; border-top: 7px solid var(--ink); border-bottom: 2px solid var(--ink); }
.adm-counts div { padding: 14px 0 16px; }
.adm-counts div + div { padding-left: 20px; border-left: 1px solid var(--rule-2); }
.adm-counts dt { color: var(--dim); font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.adm-counts dd { margin: 6px 0 0; font: var(--banner-w) 64px/0.86 var(--banner); font-stretch: 62%; }
.adm-tabs { margin: 0; }
.adm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 0; }
.adm-bar .arch-count { margin-right: auto; }
.adm-controls { grid-template-columns: repeat(auto-fit, minmax(180px, max-content)); align-items: center; }
.adm-controls .chips, .adm-controls .arch-search { grid-column: 1 / -1; }
.adm-controls label:not(.arch-search) { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font: 800 12.5px/1 var(--label); font-stretch: 75%; letter-spacing: 0.05em; text-transform: uppercase; }
.adm-controls select { height: 36px; border: 2px solid var(--ink); background: var(--box); color: var(--ink); font: 600 14px/1 var(--label); }
.adm-scroll { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font: 500 15px/1.3 var(--serif); }
.adm-table th {
  padding: 10px 14px 8px 0; border-bottom: 2px solid var(--ink); color: var(--ink);
  font-size: 12.5px; font-weight: 900; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.adm-table th button { font-weight: 900; text-decoration: none; text-transform: uppercase; }
.adm-table th[aria-sort] button { color: var(--spot-text); }
.adm-table th[aria-sort="ascending"] button::after { content: ' ▲'; }
.adm-table th[aria-sort="descending"] button::after { content: ' ▼'; }
.adm-table td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.adm-table td.num { text-align: right; font-family: var(--label); font-stretch: 75%; font-weight: 700; font-variant-numeric: tabular-nums; }
.adm-table a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--spot); text-underline-offset: 3px; }
.adm-missing { color: var(--down); font-weight: 700; }

@media (max-width: 759px) {
  .adm-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-counts div:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ---------- Wages and prices since 2019: the board, /wages/ and the country pages ---------- */

/* Prices against wages, one line per country: an open ring for prices, a solid disc for wages, joined by a
   thick line, red where a wage buys less and dark green where it buys more. */
.wg { container: wg / inline-size; }
.wg .sec-title a { color: inherit; }
.wg-axis { color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.wg-keys { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--ink); }
.wg-key { display: inline-flex; align-items: center; gap: 6px; }
.wg-key .wg-dot { position: static; transform: none; }
.wg-real { text-align: right; color: var(--ink); }
.wg-axis, .wg-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 80px; column-gap: 16px; align-items: end; }
.wg-row { align-items: center; }
.wg-ticks { position: relative; height: 20px; border-bottom: 2px solid var(--ink); }
.wg-tick { position: absolute; bottom: 4px; transform: translateX(-50%); color: var(--dim); font-weight: 700; }
.wg-tick:first-child { transform: none; }
.wg-tick:last-child { transform: translateX(-100%); }
.wg-row { padding: 5px 0 4px; border-bottom: 1px solid var(--rule); }
.wg-pin .wg-row:last-child { border-bottom: 2px solid var(--ink); }
.wg-row.is-ref .wg-name { color: var(--ink); font-weight: 600; }
.wg-row.is-here { background: color-mix(in srgb, var(--yellow) 45%, transparent); }
.wg-row.is-here .wg-name { font-weight: 700; }
.wg-name { overflow: hidden; color: var(--ink); font: 500 16.5px/1.3 var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.wg-mark { margin-left: 6px; color: var(--dim); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.wg-track { position: relative; height: 18px; }
.wg-bar { position: absolute; top: 7px; height: 4px; background: var(--dim); }
.wg-bar.up { background: var(--up); }
.wg-bar.down { background: var(--down); }
.wg-dot { position: absolute; top: 9px; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); }
.wg-w { background: var(--ink); }
.wg-p { width: 15px; height: 15px; border: 3px solid var(--ink); box-sizing: border-box; background: var(--page); }
.wg-key .wg-p { background: transparent; }
.wg-gap { text-align: right; font-size: 16px; font-weight: 900; letter-spacing: 0.02em; }
.wg-gap.up { color: var(--up); }
.wg-gap.down { color: var(--down); }
.wg-gap.flat { color: var(--dim); }
/* The front page's board: a page of tiles at a time (the European Union, then eleven countries), each with what
   a wage buys against 2019 and its path since then, filled blue above 2019 and red below. The pages scroll
   sideways; app.js sets --wt-h, the charts' height, so the board ends level with On my desk. */
.wg { --wt-h: 64px; --wt-more: #1F4FB8; --wt-less: var(--down); }
[data-theme="terminal"] .wg { --wt-more: #6189EC; --wt-less: #F24D44; }
.wt-key { margin: 12px 0 10px; color: var(--ink); font: 800 12px/1.5 var(--label); letter-spacing: 0.05em; text-transform: uppercase; }
.wt-key-line { display: inline-block; width: 18px; height: 2px; margin-right: 8px; vertical-align: 4px; background: var(--ink); }
.wt-sw { display: inline-block; width: 11px; height: 11px; margin: 0 2px 0 6px; vertical-align: -1px; border-radius: 2px; }
.wt-sw.more { background: color-mix(in srgb, var(--wt-more) 35%, var(--page)); box-shadow: inset 0 0 0 1.5px var(--wt-more); }
.wt-sw.less { background: color-mix(in srgb, var(--wt-less) 35%, var(--page)); box-shadow: inset 0 0 0 1.5px var(--wt-less); }
.wg-pages { position: relative; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.wg-pages::-webkit-scrollbar { display: none; }
.wt-page { flex: 0 0 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; scroll-snap-align: start; border-top: 1px solid var(--rule); }
.wt-tile { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 10px 12px 12px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.wt-tile.is-ref { padding-bottom: 22px; }
.wt-tile:nth-child(4n) { border-right: 0; }
.wt-tile.is-ref { background: var(--box); }
/* The name and the figure share a line when both fit; otherwise the figure goes under the name. */
.wt-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; margin-bottom: 8px; }
.wt-tile .wg-name { display: block; min-width: 0; font-size: 15.5px; }
.wt-tile.is-ref .wg-name { font-weight: 700; }
.wt-tile .wg-name::after { content: ""; position: absolute; inset: 0; }
.wt-tile:hover .wg-name { text-decoration: underline; text-decoration-color: var(--spot); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wt-tile .wg-name:focus-visible { outline: none; }
.wt-tile:has(.wg-name:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.wt-real { flex: none; margin: 0; white-space: nowrap; }
.wt-num { color: var(--ink); font: 900 18px/1.1 var(--label); letter-spacing: 0.01em; }
.wt-chart { position: relative; flex: none; height: var(--wt-h); margin-top: auto; }
.wt-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wt-grid { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wt-zero { stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wt-more { fill: var(--wt-more); fill-opacity: 0.2; }
.wt-less { fill: var(--wt-less); fill-opacity: 0.24; }
.wt-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wt-scale span { position: absolute; right: 0; padding: 2px 0 2px 3px; background: var(--box); color: var(--dim); font: 700 10px/1 var(--label); font-variant-numeric: tabular-nums; }
.wt-scale .hi { top: 1px; }
.wt-scale .lo { bottom: 1px; }
.wt-years { position: absolute; left: 12px; right: 12px; bottom: 5px; display: flex; justify-content: space-between; color: var(--dim); font: 700 10px/1 var(--label); }
@container wg (max-width: 600px) {
  .wt-page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wt-head { display: block; }
  .wt-num { font-size: 20px; }
  .wt-tile:nth-child(4n) { border-right: 1px solid var(--rule); }
  .wt-tile:nth-child(3n) { border-right: 0; }
}
@container wg (max-width: 440px) {
  .wt-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wt-tile:nth-child(3n) { border-right: 1px solid var(--rule); }
  .wt-tile:nth-child(2n) { border-right: 0; }
  .wt-tile { padding: 10px 10px 12px; }
  .wt-tile .wg-name { font-size: 15px; }
  .wt-years { left: 10px; right: 10px; }
}
.wg-nav { display: flex; align-items: center; gap: 12px; margin-left: auto; color: var(--dim); font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.wg-nav .strip-nav { margin-left: 0; }
@container wg (max-width: 520px) {
  .wg-axis, .wg-row { grid-template-columns: 116px minmax(0, 1fr) 58px; column-gap: 8px; }
  .wg-name { font-size: 15px; }
  .wg-mark { display: block; margin: 0; }
  .wg-gap { font-size: 15px; }
  .wg-tick:nth-child(even) { display: none; }
}

/* /wages/ and a country page: one reading column under a fitted banner. */
.cp { max-width: var(--page-w); margin: 0 auto; padding: 26px var(--margin) 0; }
.cp > :not(.mail) { max-width: 860px; margin-left: auto; margin-right: auto; }
.cp > .cp-crumb { margin-bottom: 14px; color: var(--dim); font: 800 13px/1.3 var(--label); font-stretch: 75%; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cp-crumb a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--spot); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cp-title { --max: 112px; margin-top: 0; margin-bottom: 20px; padding-top: 14px; border-top: 7px solid var(--ink); }
.cp-deck { margin-top: 0; margin-bottom: 14px; color: var(--ink); font: 500 22px/1.4 var(--serif); }
.cp > .cp-meta { margin-top: 0; margin-bottom: 30px; padding: 10px 0 9px; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule-2); color: var(--dim); font: 700 13px/1.5 var(--label); font-stretch: 75%; letter-spacing: 0.03em; }
.cp-meta a, .cp > p a, .cp-sources a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--spot); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cp > h2 { margin-top: 46px; margin-bottom: 12px; padding-top: 12px; background: linear-gradient(var(--ink), var(--ink)) top / 100% 5px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 8px / 100% 1.5px no-repeat; padding-top: 18px; font: var(--banner-w) 34px/0.95 var(--banner); font-stretch: 62%; text-transform: uppercase; }
.cp > p { margin-top: 0; margin-bottom: 12px; font: 400 18.5px/1.58 var(--serif); }
.cp > .cp-sub { margin-top: 18px; color: var(--dim); font: 700 13px/1.5 var(--label); font-stretch: 75%; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5; }
.cp > .cp-small { color: var(--ink-2); font: 400 15.5px/1.55 var(--serif); }
.cp > .cp-more { margin-top: 12px; font: 900 13px/1 var(--label); font-stretch: 75%; letter-spacing: 0.06em; text-transform: uppercase; }
.cp > .wg { margin-top: 8px; }
.cp-sources { display: grid; gap: 7px; font: 400 16.5px/1.45 var(--serif); }
.cp .mail { margin-top: 56px; }
/* The chart: wages and prices since 2019, the gap between them printed as a dot tint in green or red. */
.cp-fig { margin-top: 0; margin-bottom: 0; }
.cg { display: block; width: 100%; height: auto; overflow: visible; }
.cg-grid { stroke: var(--rule); stroke-width: 1; }
.cg-base { stroke: var(--ink); stroke-width: 2; }
.cg-ax { fill: var(--dim); font-size: 13px; font-weight: 700; }
.cg-up { fill: url(#cg-tint-up); }
.cg-down { fill: url(#cg-tint-down); }
.cg-tint-up circle { fill: var(--up); }
.cg-tint-down circle { fill: var(--down); }
.cg-p { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-dasharray: 9 6; stroke-linejoin: round; }
.cg-w { fill: none; stroke: var(--ink); stroke-width: 6.5; stroke-linejoin: round; stroke-linecap: round; }
/* An outline in the page colour keeps the end labels readable where they cross a line. */
.cg-lab-p, .cg-lab-w { paint-order: stroke; stroke: var(--page); stroke-width: 6px; stroke-linejoin: round; font-family: var(--label); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.04em; }
.cg-lab-p { fill: var(--ink); font-size: 14px; font-weight: 700; }
.cg-lab-w { fill: var(--ink); font-size: 14px; font-weight: 900; }
.cp-fig figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--rule-2); color: var(--dim); font: 700 12.5px/1.4 var(--label); font-stretch: 75%; letter-spacing: 0.04em; text-transform: uppercase; }
.cp-key { display: inline-flex; align-items: center; gap: 7px; }
.cp-key i { display: inline-block; width: 22px; height: 5px; }
.cp-key .k-w { background: var(--ink); height: 6px; }
.cp-key .k-p { background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 12px); height: 3px; }
.cp-key .k-up { height: 12px; background: radial-gradient(circle, var(--up) 1.4px, transparent 1.6px) 0 0 / 5px 5px; }
.cp-key .k-down { height: 12px; background: radial-gradient(circle, var(--down) 1.4px, transparent 1.6px) 0 0 / 5px 5px; }
.cp-note { margin-left: auto; }
/* Price rise by spending category: solid bars, the all-items mark in red. */
.ct { margin-top: 8px; border-top: 2px solid var(--ink); }
.ct-row { display: grid; grid-template-columns: 230px minmax(0, 1fr) 70px; gap: 14px; align-items: center; padding: 6px 0 5px; border-bottom: 1px solid var(--rule); }
.ct-name { font: 500 16.5px/1.3 var(--serif); }
.ct-track { position: relative; height: 16px; }
.ct-bar { position: absolute; top: 2px; left: 0; height: 12px; background: var(--ink); }
.ct-all { position: absolute; top: -4px; width: 4px; height: 24px; margin-left: -2px; background: var(--spot); }
.ct-val { text-align: right; font-size: 16px; font-weight: 900; }
@media (max-width: 599px) {
  .ct-row { grid-template-columns: 128px minmax(0, 1fr) 58px; gap: 8px; }
  .ct-name { font-size: 14.5px; }
  .cp-deck { font-size: 19px; }
  .cp-title { --max: 72px; }
  .cp > h2 { font-size: 28px; }
  .cp-note { flex-basis: 100%; margin-left: 0; }
  .cg-ax, .cg-lab-p, .cg-lab-w { font-size: 22px; }
  .cg-p { stroke-width: 5; }
  .cg-w { stroke-width: 9; }
}
@media (max-width: 449px) {
  .cg-ax, .cg-lab-p, .cg-lab-w { font-size: 28px; }
  .cg-lab-p, .cg-lab-w { stroke-width: 9px; }
  .cg-p { stroke-width: 6; }
  .cg-w { stroke-width: 11; }
}

/* ---------- Your inflation (/your-inflation/) ----------
   The form on newsprint; the result as a clip-out coupon in a dashed frame with a scissors mark. */

.infl { display: grid; grid-template-columns: minmax(0, 1fr) 470px; column-gap: 40px; align-items: start; margin-top: 30px; }
.infl-country { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: 16px; border-bottom: 3px solid var(--ink); }
.infl-country label { font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.infl-country select {
  height: 46px; padding: 0 44px 0 12px; border: 2px solid var(--ink); border-radius: 0;
  background: var(--box) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23FFA216'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--ink); font: var(--banner-w) 26px/1 var(--banner); font-stretch: 62%; text-transform: uppercase; appearance: none; cursor: pointer;
}
.infl-meta { flex: 1 1 280px; margin: 0; color: var(--dim); font-size: 13px; font-weight: 700; letter-spacing: 0.03em; line-height: 1.45; }
.infl-meta b { color: var(--ink); font-weight: 900; }
.infl-meta a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--spot); text-underline-offset: 3px; }
.infl-hint { max-width: 60ch; margin: 16px 0 20px; color: var(--ink-2); font: 400 17.5px/1.45 var(--serif); font-variation-settings: 'opsz' 16; }

.infl-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.infl-table thead th { padding: 0 10px 8px; border-bottom: 2px solid var(--ink); color: var(--ink); font-size: 12px; font-weight: 900; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; vertical-align: bottom; }
.infl-table thead th.num { text-align: right; }
.infl-table tbody th, .infl-table td { padding: 5px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.infl-table tbody th { padding-left: 0; font: 500 18px/1.2 var(--serif); font-variation-settings: 'opsz' 18; text-align: left; }
.infl-table thead th:first-child { padding-left: 0; }
.infl-table .num { text-align: right; white-space: nowrap; font-weight: 700; }
.infl-table .infl-sh { color: var(--dim); }
.infl-table .rate { font-weight: 900; }
.infl-table input {
  width: 8ch; height: 40px; padding: 0 8px; border: 2px solid var(--rule-2); border-radius: 0;
  background: var(--box); color: var(--ink); font: 800 17px/1 var(--label); font-stretch: 75%; font-variant-numeric: tabular-nums; text-align: right; -moz-appearance: textfield;
}
.infl-table input::-webkit-inner-spin-button, .infl-table input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.infl-table input:hover, .infl-table input:focus-visible { border-color: var(--ink); outline-offset: 0; }
.bar-col { width: 32%; padding-right: 0 !important; }
/* Solid bars for rises, hatched for falls, from a zero line. */
.infl-bar { position: relative; display: block; height: 14px; }
.infl-bar::before { content: ''; position: absolute; left: var(--zero); top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.infl-bar::after { content: ''; position: absolute; left: var(--from); width: var(--len); top: 0; bottom: 0; background: var(--ink); }
.infl-bar.fall::after { background: repeating-linear-gradient(-45deg, var(--ink) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.infl-reset { margin: 20px 0 0; }

.infl-rail { position: sticky; top: 76px; padding: 0; }
/* The coupon: paper white in a dashed frame, the scissors in the corner, the total as a banner figure. */
.slip {
  position: relative; container-type: inline-size; margin: 10px 0 30px; padding: 26px 26px 22px;
  background: var(--box); color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.5;
  outline: 2.5px dashed #8F8B81; outline-offset: 8px;
  --dim: #5C5A53;
}
.slip::before {
  content: ""; position: absolute; top: -21px; left: 18px; width: 26px; height: 26px;
  background: var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%238C897F' stroke-width='2.2'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M8.5 7.6 21 18M8.5 16.4 21 6'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 22px;
}
[data-theme="terminal"] .slip::before { filter: invert(1); background-color: #E8E2D3; }
.slip p { margin: 0; }
.slip-head { display: grid; justify-items: center; gap: 2px; padding-bottom: 16px; text-align: center; }
.slip-mark { display: block; margin-bottom: 10px; }
.slip-brand { font: 800 26px/1.1 var(--serif); font-variation-settings: 'opsz' 48; letter-spacing: -0.01em; }
.slip-title { font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.slip-where, .slip-printed { color: var(--dim); font-size: 14px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.slip-printed:empty { display: none; }
.slip-cols, .slip-lines li, .slip-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 6ch; column-gap: 10px; }
.slip-row { grid-template-columns: minmax(0, 1fr) auto; }
.slip-cols { padding: 8px 0 4px; border-top: 2px solid var(--ink); color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.slip-cols span:last-child, .slip-lines .p { text-align: right; }
.slip-lines { padding: 0 0 10px; border-bottom: 1px solid var(--ink); margin-bottom: 10px; }
.slip-lines li { padding: 2px 0; border-bottom: 1px dotted rgba(23, 19, 14, 0.35); }
.slip-lines .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 16px/1.4 var(--serif); }
.slip-lines .q { color: var(--dim); text-align: right; }
.slip-lines .p { font-weight: 800; }
.slip-row span:last-child { text-align: right; font-weight: 800; }
.slip-total { margin: 14px 0 12px !important; padding: 12px 0 14px; border-top: 6px solid var(--ink); border-bottom: 2px solid var(--ink); }
.t-label { display: block; font-weight: 900; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; }
.t-value { display: block; margin-top: 4px; color: var(--ink); font: var(--banner-w) min(150px, 34cqi)/0.86 var(--banner); font-stretch: 62%; letter-spacing: -0.005em; }
.t-value .pt { margin: 0; }
.slip-official { font-size: 16px; font-weight: 800; }
.slip-verdict { margin: 12px -8px 0 !important; padding: 8px 8px 7px; background: var(--yellow); font-weight: 900; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; }
.slip-verdict:empty { display: none; }
.slip-code { height: 52px; margin-top: 20px; }
.slip-code svg { display: block; width: 100%; height: 100%; fill: var(--ink); }
.slip-foot { margin-top: 10px !important; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

.infl-why { margin-top: 26px; }
.infl-why h3 { margin: 0 0 10px; padding-bottom: 7px; border-bottom: 3px solid var(--ink); font-size: 14px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.infl-why ul { display: grid; gap: 10px; }
.infl-why li { color: var(--ink-2); font: 400 16.5px/1.4 var(--serif); font-variation-settings: 'opsz' 16; }
.infl-why li b { margin-right: 6px; font-size: 16px; font-weight: 900; }
.infl-why .adds { color: var(--spot-text); }
.infl-why .cuts { color: var(--up); }
.infl-why-none { color: var(--dim) !important; }
.infl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.infl-status { min-height: 1.4em; margin: 10px 0 0; color: var(--dim); font: 600 14px/1.4 var(--serif); overflow-wrap: anywhere; }

.infl-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #000000; color: #F5F3EE; border-top: 5px solid var(--amber); font-size: 13.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
}
.infl-dock[hidden] { display: none; }
.infl-dock b { font: var(--banner-w) 22px/1 var(--banner); font-stretch: 62%; color: var(--amber); margin-left: 6px; }
.infl-dock:hover { text-decoration: none; }

.infl-method { margin-top: 64px; max-width: 36em; }
.infl-method.prose > p:first-of-type::first-letter { float: none; margin: 0; padding: 0; font: inherit; color: inherit; text-transform: none; }
.infl-sources { max-width: 36em; padding-left: 1.1em; font-size: 17px; }
.infl-sources li { margin-bottom: 6px; list-style: square; }

@media (max-width: 1199px) {
  .infl { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 28px; }
  .bar-col { width: 22%; }
}
@media (max-width: 899px) {
  .infl { grid-template-columns: minmax(0, 1fr); }
  .infl-rail { position: static; margin: 44px 0 0; }
  .infl-page { padding-bottom: 60px; }
}
@media (max-width: 599px) {
  .bar-col { display: none; }
  .infl-table tbody th { font-size: 16px; }
  .infl-table tbody th, .infl-table td { padding-left: 4px; padding-right: 4px; }
  .infl-table input { width: 7ch; }
  .infl-country select { width: 100%; }
  .slip { padding: 22px 16px 18px; outline-offset: 6px; }
}
.lower > .odds.ruled::before { display: none; }
@media (max-width: 1199px) {
  /* One column: the opening of In plain sight comes before its chart. */
  .sight-body > p { order: 1; }
  .sight-body > figure { order: 2; }
}
@media (max-width: 759px) {
  .sec-head { flex-wrap: wrap; row-gap: 6px; }
  .sec-head .sec-meta, .sec-head .wg-nav { flex-basis: 100%; margin-left: 0; text-align: left; }
  .wg-nav { justify-content: space-between; }
}
@media (max-width: 759px) {
  /* A banner whose lines would print under 40px is broken into more lines (app.js). */
  .banner, .art-title, .cp-title, .sight .story-head { --min: 40px; }
}