/* The Journal: ink on paper, thin rules, one navy accent. Tokens follow DESIGN.md. */

:root {
  color-scheme: light;
  --paper: #FBFAF6;
  --paper-2: #F3F1EA;
  --ink: #111111;
  --ink-2: #3A3A38;
  --ink-3: #6B6B66;
  --rule: #111111;
  --rule-light: #D6D3CA;
  --accent: #163855;
  --accent-2: #3A6C9C;
  --focus: #3A6C9C;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --ui: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --t-masthead: 2.6rem;
  --t-h1: 2rem;
  --t-h2: 1.45rem;
  --t-h3: 1.15rem;
  --t-standfirst: 1.1rem;
  --t-body: 1.0625rem;
  --t-ui: 0.875rem;
  --t-label: 0.75rem;
  --t-meta: 0.8125rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: 16px;
}
@media (min-width: 768px) {
  :root {
    --t-masthead: 4.5rem;
    --t-h1: 2.75rem;
    --t-h2: 1.75rem;
    --t-h3: 1.25rem;
    --t-standfirst: 1.25rem;
    --t-body: 1.125rem;
    --gutter: 32px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: var(--t-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; }
img { display: block; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0 0 var(--s4); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.25rem; }
hr { border: 0; border-top: 1px solid var(--rule-light); margin: var(--s6) 0; }
::selection { background: var(--accent); color: var(--paper); }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
a:visited { color: inherit; }
a:visited:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: var(--s2) var(--s4); z-index: 10; font-family: var(--ui); }
.skip:focus { left: var(--s4); top: var(--s4); }

.container { max-width: 75rem; margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.meta { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ui { font-family: var(--ui); font-size: var(--t-ui); font-weight: 500; }
.todo { font-family: var(--mono); font-size: 0.85em; background: #FFF1B8; color: #3b2f00; padding: 0 4px; }

/* ---------- Masthead ---------- */
.topstrip { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; font-family: var(--ui); font-size: var(--t-meta); color: var(--ink-3); }
.topstrip .mono { font-size: var(--t-meta); }
.nameplate { margin: 0; text-align: center; font-family: var(--serif); font-weight: 500; font-size: var(--t-masthead); line-height: 1.05; letter-spacing: -0.01em; padding: var(--s3) 0 var(--s4); }
.nameplate a { text-decoration: none; }
.nameplate a:hover { color: inherit; }
.double-rule { border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule); height: 6px; }
.masthead--compact .nameplate { text-align: left; font-size: 1.75rem; padding: var(--s2) 0 var(--s3); }
.nav { font-family: var(--ui); font-size: var(--t-ui); font-weight: 500; border-bottom: 1px solid var(--rule-light); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; overflow-x: auto; scrollbar-width: thin; }
.nav li { border-left: 1px solid var(--rule-light); flex: 0 0 auto; }
.nav li:first-child { border-left: 0; }
.nav a { display: block; padding: var(--s3) var(--s4); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.masthead--compact .nav ul { justify-content: flex-start; }
.masthead--compact .nav li:first-child a { padding-left: 0; }
@media (max-width: 767px) {
  .nav ul { justify-content: flex-start; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .nav li:first-child a { padding-left: 0; }
}

main { display: block; padding-bottom: var(--s8); }
.pagehead { padding: var(--s6) 0 var(--s5); }
.pagehead h1 { font-size: var(--t-h1); }
.standfirst { font-style: italic; font-size: var(--t-standfirst); color: var(--ink-2); max-width: 44rem; margin: var(--s3) 0 0; line-height: 1.45; }

/* ---------- Section labels ---------- */
.section { border-top: 2px solid var(--rule); padding-top: var(--s3); margin-top: var(--s7); }
.section--first { margin-top: var(--s5); }
.label { font-family: var(--ui); font-weight: 600; font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 var(--s3); }
.section > .label { margin-bottom: var(--s4); }
.section h2 { font-size: var(--t-h2); margin-bottom: var(--s3); }
.intro { color: var(--ink-2); max-width: 44rem; }

/* ---------- Grid and columns ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
@media (min-width: 768px) {
  .grid--home { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0; }
  .grid--home > .lead { padding-right: var(--s6); }
  .grid--home > .rail { border-left: 1px solid var(--rule-light); padding-left: var(--s5); }
}
.cols { display: grid; grid-template-columns: minmax(0, 1fr); }
.cols > * { padding: var(--s5) 0; border-top: 1px solid var(--rule-light); }
.cols > *:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 768px) {
  .cols { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
  .cols > * { padding: 0 var(--s5); border-top: 0; border-left: 1px solid var(--rule-light); }
  .cols > *:first-child { padding-left: 0; border-left: 0; }
  .cols > *:last-child { padding-right: 0; }
}

/* ---------- Home ---------- */
.lead h2, .lead h1 { font-size: var(--t-h1); line-height: 1.1; }
.lead h2 a, .lead h1 a { text-decoration: none; }
.lead h2 a:hover, .lead h1 a:hover { text-decoration: underline; }
.lead .standfirst { margin-bottom: var(--s4); }
.textlinks { font-family: var(--ui); font-size: var(--t-ui); font-weight: 500; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s4) 0 0; }
.textlinks a { text-decoration-thickness: 1px; }
.rail .portrait { width: 120px; height: 120px; border-radius: 50%; background: var(--paper); margin-bottom: var(--s4); }
.rail .rail-name { font-family: var(--serif); font-size: var(--t-h3); font-weight: 600; margin: 0; }
.rail .rail-title { font-family: var(--ui); font-size: var(--t-ui); color: var(--ink-2); margin: var(--s1) 0 var(--s2); line-height: 1.4; }
.rail .creds { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3); margin-bottom: var(--s4); }
.rail p { font-size: 1rem; }

.pullquote { border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); padding: var(--s5) 0; margin: var(--s6) 0; }
.pullquote blockquote { margin: 0; font-style: italic; font-size: 1.5rem; line-height: 1.3; text-wrap: balance; }
@media (min-width: 768px) { .pullquote blockquote { font-size: 2rem; } }
.pullquote .attrib { font-family: var(--ui); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: var(--s4) 0 0; }
.pullquote .attrib a { color: inherit; }
.pullquote--big blockquote { font-size: 1.6rem; }
@media (min-width: 768px) { .pullquote--big blockquote { font-size: 2.25rem; } }

.list-compact { list-style: none; padding: 0; margin: 0; }
.list-compact li { padding: var(--s3) 0; border-top: 1px solid var(--rule-light); }
.list-compact li:first-child { border-top: 0; padding-top: 0; }
.list-compact .meta { display: block; }
.list-compact a { font-size: 1.05rem; font-weight: 500; text-decoration: none; }
.list-compact a:hover { text-decoration: underline; }

.band { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 768px) { .band { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s5); } }
.photo { margin: 0; }
.photo img { width: 100%; height: auto; border-radius: 0; }
.photo figcaption { font-family: var(--ui); font-size: var(--t-meta); color: var(--ink-3); margin-top: var(--s2); line-height: 1.4; }

.strip { background: var(--paper-2); display: grid; grid-template-columns: repeat(2, 1fr); margin-top: var(--s7); }
.strip > div { padding: var(--s5) var(--s4); border-left: 1px solid var(--rule-light); border-top: 1px solid var(--rule-light); }
.strip > div:nth-child(odd) { border-left: 0; }
.strip > div:nth-child(-n+2) { border-top: 0; }
.strip .fig { font-family: var(--mono); font-size: 2rem; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.strip .cap { font-family: var(--ui); font-size: var(--t-meta); color: var(--ink-2); margin-top: var(--s2); }
.strip-title { margin-top: var(--s7); }
@media (min-width: 768px) {
  .strip { grid-template-columns: repeat(4, 1fr); }
  .strip > div, .strip > div:nth-child(n) { border-top: 0; border-left: 1px solid var(--rule-light); }
  .strip > div:first-child { border-left: 0; }
}

/* ---------- Story rows ---------- */
.rows { margin: 0; padding: 0; list-style: none; }
.row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); padding: var(--s4) 0; border-top: 1px solid var(--rule-light); }
.row:first-child { border-top: 0; }
@media (min-width: 768px) { .row { grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s5); } }
.row .meta { padding-top: 0.45rem; }
.row .label { margin-bottom: var(--s1); color: var(--accent); }
.row h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.2; }
.row h3 a { text-decoration: none; }
.row h3 a:hover { text-decoration: underline; }
.row .summary { color: var(--ink-2); font-size: 1rem; margin: var(--s1) 0 0; line-height: 1.5; }
.row .links { font-family: var(--ui); font-size: var(--t-ui); font-weight: 500; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: var(--s2) 0 0; }
.ext::after { content: " \2197"; font-family: var(--ui); font-size: 0.8em; }
.row.featured h3 { font-size: 1.35rem; }

/* ---------- Filters (CSS only; works without JavaScript) ---------- */
.filters { font-family: var(--ui); font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; display: flex; flex-wrap: wrap; gap: var(--s2) 0; margin: 0 0 var(--s4); padding: 0; list-style: none; }
.filters li + li::before { content: "\00b7"; margin: 0 var(--s3); color: var(--ink-3); }
.filters a { text-decoration: none; color: var(--ink-2); padding-bottom: 2px; }
.filters a:hover { color: var(--accent); }
.archive .anchor { position: absolute; scroll-margin-top: var(--s5); }
.archive:not(:has(:target)) .filters a[href="#all"],
.archive:has(#all:target) .filters a[href="#all"] { color: var(--accent); border-bottom: 2px solid var(--accent); }
.archive:has(#f-macro:target) .filters a[href="#f-macro"],
.archive:has(#f-geopolitics:target) .filters a[href="#f-geopolitics"],
.archive:has(#f-china:target) .filters a[href="#f-china"],
.archive:has(#f-industrial:target) .filters a[href="#f-industrial"],
.archive:has(#f-ai:target) .filters a[href="#f-ai"],
.archive:has(#f-methodology:target) .filters a[href="#f-methodology"] { color: var(--accent); border-bottom: 2px solid var(--accent); }
.archive:has(#f-macro:target) .row:not([data-filter="macro"]),
.archive:has(#f-geopolitics:target) .row:not([data-filter="geopolitics"]),
.archive:has(#f-china:target) .row:not([data-filter="china"]),
.archive:has(#f-industrial:target) .row:not([data-filter="industrial"]),
.archive:has(#f-ai:target) .row:not([data-filter="ai"]),
.archive:has(#f-methodology:target) .row:not([data-filter="methodology"]) { display: none; }
.archive .rows .row.is-first-visible { border-top: 0; }

.jump { font-family: var(--ui); font-size: var(--t-ui); color: var(--ink-2); margin: 0 0 var(--s5); }
.jump a { margin-right: var(--s4); }

/* ---------- Principles, lenses ---------- */
.principle .num { font-family: var(--mono); font-size: 2rem; color: var(--accent); font-weight: 500; line-height: 1; margin-bottom: var(--s3); }
.principle h3, .lens h3 { font-size: var(--t-h3); font-weight: 600; margin-bottom: var(--s3); }
.principle p, .lens p { font-size: 1rem; color: var(--ink-2); }
.lens .examples { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3); font-style: normal; margin-top: var(--s3); }
.closing { font-style: italic; font-size: var(--t-standfirst); margin-top: var(--s5); }

.chartbox { background: var(--paper-2); border: 1px solid var(--rule-light); padding: var(--s4); margin: var(--s5) 0; }
.chartbox svg { width: 100%; height: auto; display: block; }
.chartbox .ax { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.chartbox .arc { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 5 5; fill: none; }
.chartbox .dot { fill: var(--accent); }
.chartbox text { font-family: var(--mono); fill: var(--ink); font-size: 21px; }
.chartbox .axis-title { font-family: var(--ui); font-weight: 600; font-size: 22px; fill: var(--ink-2); }
.chartbox .tick { fill: var(--ink-3); font-size: 19px; }
.chartbox .diag { stroke: var(--ink); stroke-width: 1.2; }
.prose { max-width: 40rem; }
.prose-wide { max-width: 44rem; }
.map-grid { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .map-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

table { border-collapse: collapse; width: 100%; font-family: var(--ui); font-size: var(--t-ui); font-weight: 400; }
th, td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule-light); vertical-align: top; }
th { font-weight: 600; border-bottom: 1px solid var(--rule); font-size: 0.8125rem; }
thead th { background: transparent; }
.table-wrap { overflow-x: auto; margin: 0 0 var(--s5); -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 28rem; }
.simple-table td:first-child { font-weight: 600; white-space: nowrap; }

.facts { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.facts li { padding: var(--s3) 0; border-top: 1px solid var(--rule-light); }
.facts li:first-child { border-top: 0; }
.facts strong { font-weight: 600; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); padding: var(--s3) 0; border-top: 1px solid var(--rule-light); }
.timeline li:first-child { border-top: 0; }
.timeline .yrs { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3); padding-top: 0.3rem; }
.timeline .org { font-weight: 600; }
.timeline .role { color: var(--ink-2); font-size: 1rem; }
@media (min-width: 768px) { .timeline li { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s5); } }

.cards { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.card h3 { font-size: var(--t-h3); font-weight: 600; margin-bottom: var(--s2); }
.card p { font-size: 1rem; color: var(--ink-2); }
.card .samples { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3); }
.patents td:first-child { font-family: var(--mono); white-space: nowrap; font-size: var(--t-meta); }
.patents td.d { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3); white-space: nowrap; }

.photos { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); margin-top: var(--s4); }
@media (min-width: 768px) {
  .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photos .photo:first-child { grid-column: 1 / -1; }
}
.callout-line { border-top: 1px solid var(--rule-light); border-bottom: 1px solid var(--rule-light); padding: var(--s4) 0; font-family: var(--ui); font-weight: 500; font-size: var(--t-ui); margin-top: var(--s5); }
.notice { background: var(--paper-2); border-left: 3px solid var(--accent); padding: var(--s3) var(--s4); font-family: var(--ui); font-size: var(--t-ui); margin: 0 0 var(--s5); }

.about-grid { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--s7); } }

/* ---------- Article (research note) ---------- */
.article { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-top: var(--s6); }
.article-head h1 { font-size: var(--t-h1); line-height: 1.1; }
.byline { font-family: var(--ui); font-size: var(--t-ui); color: var(--ink-2); margin: var(--s4) 0 var(--s1); }
.switch { display: flex; gap: var(--s5); font-family: var(--ui); font-size: var(--t-ui); font-weight: 500; margin: var(--s5) 0 0; border-bottom: 1px solid var(--rule-light); }
.switch a { text-decoration: none; padding: var(--s2) 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.switch a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.sidenotes { font-family: var(--ui); font-size: var(--t-ui); border-top: 1px solid var(--rule-light); }
.sidenotes ul { list-style: none; padding: 0; margin: 0; }
.sidenotes li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule-light); }
.sidenotes button { font: inherit; font-weight: 500; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: inherit; }
.sidenotes button:hover { color: var(--accent); }
.sidenotes summary { cursor: pointer; font-weight: 500; }
.sidenotes details p { font-family: var(--serif); font-size: 0.9375rem; margin: var(--s2) 0 0; color: var(--ink-2); }
.js-only { display: none; }
.js .js-only { display: block; }
@media (min-width: 1000px) {
  .article { grid-template-columns: minmax(0, 38rem) 15rem; justify-content: center; column-gap: var(--s8); }
  .article-head { grid-column: 1 / -1; max-width: 62rem; margin: 0 auto; width: 100%; padding-left: 0; }
  .article-head > * { max-width: 44rem; }
  .article-head { padding-right: 0; }
  .article-body { grid-column: 1; grid-row: 2; min-width: 0; }
  .sidenotes { grid-column: 2; grid-row: 2; align-self: start; position: sticky; top: var(--s5); }
  .article-foot { grid-column: 1 / -1; }
}
.article-head { justify-self: center; width: 100%; }
@media (min-width: 1000px) { .article-head { width: min(100%, 62rem); } }

.note-body { max-width: 38rem; font-size: var(--t-body); overflow-wrap: anywhere; }
.note-body h2 { font-size: var(--t-h2); margin: var(--s7) 0 var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.note-body h2:first-child { margin-top: 0; }
.note-body h3 { font-size: var(--t-h3); font-weight: 600; margin: var(--s6) 0 var(--s2); }
.note-body h4 { font-family: var(--ui); font-size: var(--t-ui); font-weight: 600; margin: var(--s5) 0 var(--s2); }
.note-body li { margin-bottom: var(--s2); }
.note-body blockquote { margin: var(--s5) 0; padding-left: var(--s4); border-left: 2px solid var(--accent); font-style: italic; color: var(--ink-2); }
.note-body a { overflow-wrap: anywhere; }
.note-body img { margin: 0 auto; }
.note-body svg { max-width: 100%; height: auto; }
.note-body .section-divider, .note-body .page-break:empty, .note-body hr { border: 0; border-top: 1px solid var(--rule-light); margin: var(--s6) 0; height: 0; }
.note-body .executive-summary, .note-body .highlight-box, .note-body .key-insights, .note-body .callout, .note-body .keybox,
.note-body .thesis-statement, .note-body .highlight, .note-body .key-point, .note-body .scenario-box, .note-body .cluster-box,
.note-body .recommendation, .note-body .section-intro {
  background: var(--paper-2); border-left: 3px solid var(--accent); padding: var(--s4) var(--s4) var(--s2); margin: var(--s5) 0;
}
.note-body .executive-summary { border-left-width: 3px; }
.note-body .executive-summary .key-insights { padding: var(--s3) 0 0; border: 0; background: none; margin: var(--s3) 0 0; }
.note-body .executive-summary h2, .note-body .callout-title, .note-body .key-insights h3 { border: 0; margin-top: 0; padding-top: 0; }
.note-body .risk-badge, .note-body .recommendation-badge, .note-body .severity-indicator, .note-body .tag, .note-body .target-price {
  display: inline-block; font-family: var(--ui); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--accent); color: var(--accent); padding: 2px 8px; margin: 0 0 var(--s3);
}
.note-body .chart-container, .note-body .chart-wrapper, .note-body .image-container, .note-body .img-container {
  background: var(--paper-2); border: 1px solid var(--rule-light); padding: var(--s4); margin: var(--s5) 0;
}
.note-body .chart-container img, .note-body .chart-wrapper img, .note-body .image-container img, .note-body .img-container img { width: 100%; height: auto; background: #fff; }
.note-body .chart-title, .note-body .chart-subtitle, .note-body .chart-caption, .note-body .chart-source, .note-body .img-caption, .note-body .footnote, .note-body .citation, .note-body .metric-subtext, .note-body .metric-label {
  font-family: var(--ui); font-size: var(--t-meta); color: var(--ink-3); line-height: 1.45;
}
.note-body .chart-title { color: var(--ink); font-weight: 600; margin: 0 0 var(--s2); }
.note-body .chart-caption, .note-body .img-caption { margin: var(--s3) 0 0; }
.note-body .citation { margin: calc(var(--s2) * -1) 0 var(--s4); }
.note-body .metrics, .note-body .metrics-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--s3); margin: var(--s5) 0; }
.note-body .metric, .note-body .metric-box, .note-body .metric-card, .note-body .key-metric { border: 1px solid var(--rule-light); background: var(--paper-2); padding: var(--s3) var(--s4); }
.note-body .metric-value, .note-body .number, .note-body .num { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; display: block; }
.note-body .two-column, .note-body .three-column { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s5); margin: var(--s5) 0; }
.note-body .scenario-item, .note-body .timeline-item, .note-body .reference-item, .note-body .source-item, .note-body .faq-item { margin: 0 0 var(--s4); }
.note-body .timeline-item { display: grid; grid-template-columns: 6rem 1fr; gap: var(--s3); }
.note-body .timeline-year { font-family: var(--mono); font-size: var(--t-meta); color: var(--accent); }
.note-body .references, .note-body .ref-list, .note-body .disclaimer, .note-body .disclaimer-section, .note-body .footer, .note-body .page-footer {
  font-family: var(--ui); font-size: var(--t-meta); color: var(--ink-2); line-height: 1.5;
}
.note-body .disclaimer, .note-body .disclaimer-section { border-top: 1px solid var(--rule); padding-top: var(--s4); margin-top: var(--s6); }
.note-body .references p, .note-body .reference-item, .note-body .source-item { margin-bottom: var(--s2); }
.note-body .faq-section { margin-top: var(--s7); }
.note-body .faq-section > h2 { border-top: 1px solid var(--rule); }
.note-body .faq-section [itemprop="name"] { font-size: var(--t-h3); font-weight: 600; margin: var(--s5) 0 var(--s2); }
.note-body .flow-node { border: 1px solid var(--rule-light); background: var(--paper-2); padding: var(--s3); margin: var(--s2) 0; }
.note-body .toc, .note-body .toc-num { font-family: var(--ui); font-size: var(--t-ui); }
.note-body table { font-size: 0.8125rem; }
.note-body .financial-table th, .note-body .risk-table th { background: var(--paper-2); }
.note-body .total-row td { font-weight: 600; border-top: 1px solid var(--rule); }

.article-foot { border-top: 2px solid var(--rule); margin-top: var(--s7); padding-top: var(--s4); }
.pager { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); font-family: var(--ui); font-size: var(--t-ui); }
@media (min-width: 640px) { .pager { grid-template-columns: 1fr 1fr; } .pager .next { text-align: right; } }
.pager .dir { display: block; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pager a { text-decoration: none; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.pager a:hover { text-decoration: underline; }
.asof { font-family: var(--ui); font-size: var(--t-meta); color: var(--ink-3); margin-top: var(--s5); }

/* ---------- Footer ---------- */
.site-footer { border-top: 2px solid var(--rule); margin-top: var(--s8); padding: var(--s5) 0 var(--s7); font-family: var(--ui); font-size: var(--t-ui); }
.site-footer .cols { --n: 3; }
.site-footer p { margin: 0 0 var(--s2); }
.site-footer .fname { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s2); }
.site-footer .fine { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3); line-height: 1.5; }
.copyright { margin-top: var(--s5); font-size: var(--t-meta); color: var(--ink-3); }

.notfound { padding: var(--s8) 0; max-width: 40rem; }

@media print {
  .masthead, .site-footer, .sidenotes, .switch, .skip, .article-foot .pager { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .article { display: block; }
  .note-body { max-width: none; }
  a { text-decoration: none; }
  .table-wrap { overflow: visible; }
  .note-body h2, .note-body h3, .chart-container { break-after: avoid; break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.quickfacts { margin: 0 0 var(--s5); border-top: 2px solid var(--rule); font-family: var(--ui); font-size: var(--t-ui); }
.quickfacts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--s2) 0; border-bottom: 1px solid var(--rule-light); }
.quickfacts dt { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.quickfacts dd { margin: 0; }
@media (min-width: 640px) { .quickfacts > div { grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s4); } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.view-topic { display: none; }
.archive:has(#by-topic:target) .view-topic { display: block; }
.archive:has(#by-topic:target) .view-date { display: none; }
.filters.views { margin-bottom: var(--s5); }
.archive:not(:has(#by-topic:target)) .filters.views a[data-view="date"],
.archive:has(#by-topic:target) .filters.views a[data-view="topic"] { color: var(--accent); border-bottom: 2px solid var(--accent); }
.view-date .filters a[data-all] { }
.topic-head { font-size: var(--t-h3); font-weight: 600; margin: var(--s6) 0 var(--s2); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.topic-head:first-child { margin-top: 0; }
.row .thumb { display: block; }
.row .thumb img { width: 100%; max-width: 20rem; height: auto; border: 1px solid var(--rule-light); background: #fff; }
@media (min-width: 768px) {
  .row.has-thumb { grid-template-columns: 7rem minmax(0, 1fr) 11rem; }
  .row.has-thumb .thumb { padding-top: 0.2rem; }
}
.cardimg { display: block; margin-bottom: var(--s3); }
.cardimg img { width: 100%; height: auto; border: 1px solid var(--rule-light); background: #fff; }
.lenses-fig svg { max-width: 640px; margin: 0 auto; }
.lenses-fig .lbl text { font-family: var(--ui); font-weight: 600; font-size: 18px; fill: var(--ink); }

@media (min-width: 768px) { .row.has-thumb:has(.thumb--wide) { grid-template-columns: 7rem minmax(0, 1fr) 17.5rem; } }
.thumb--wide img { max-width: 28rem; }

.newsgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
@media (min-width: 768px) {
  .newsgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) 0; }
  .newsgrid > * { padding: 0 var(--s5); border-left: 1px solid var(--rule-light); }
  .newsgrid > *:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .newsgrid > *:nth-child(3n) { padding-right: 0; }
}
.rail .quickfacts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.rail .photo { margin-bottom: var(--s4); }
.rail .list-compact .meta { margin-bottom: 2px; }
.rail .list-compact a { font-size: 1rem; }

.rail .label { font-size: var(--t-label); }

.note-cover { margin: var(--s5) 0 0; }
.note-cover img { width: 100%; height: auto; border: 1px solid var(--rule-light); }
@media (min-width: 1000px) { .note-cover { max-width: 44rem; } }

dialog#disclosures-dialog { border: 1px solid var(--rule); border-top: 3px solid var(--rule); background: var(--paper); color: var(--ink); padding: 0; width: min(40rem, calc(100vw - 2 * var(--gutter))); max-height: calc(100vh - 2 * var(--s5)); overflow: auto; font-family: var(--serif); border-radius: 0; }
dialog#disclosures-dialog::backdrop { background: rgba(17, 17, 17, 0.45); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: var(--s4) var(--s5) var(--s2); position: sticky; top: 0; background: var(--paper); border-bottom: 1px solid var(--rule-light); }
.dlg-head .label { margin: 0; }
.dlg-close { font-family: var(--ui); font-size: var(--t-ui); font-weight: 500; background: none; border: 0; padding: var(--s1) 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.dlg-close:hover { color: var(--accent); }
.dlg-body { padding: var(--s3) var(--s5) var(--s5); font-size: 1rem; }
.dlg-body .facts li { padding: var(--s3) 0; }
html.dlg-open { overflow: hidden; }