/* H1 merged body (helper B). Base: wb-guidelines/site/assets/site.css + tokens.json, judge-r3 fixes applied.
   NEW or CHANGED values (everything else is a WB token):
   - body line-height 1.5, letter-spacing 0 (judge-r3 fix 4; checklist 12/14)
   - caps tracking .12em (judge-r3 fix 4; checklist 13)
   - header height 72px (CONTRACT.md: header 72 + hero 828 = 900 first viewport); 72 = --t72 value, on the 8px grid
   - hero placeholder min-height 828px, ink (CONTRACT.md; hero/hero.css owns the real box)
   - note figure 48 in cols 1-3, text from col 4 (judge-r3 fix 3: numbers lead on the left, one col-4 axis)
   - paper #F7F7F4 as a light band (= d_ink of the WB ramp) for the subscribe band, to break the white/dark tempo
   - dot signature: 8px pitch, dot 71% of pitch (WC contang.js C.DOT); fills from the WB ramp (rule / d_ink_2 / ink)
   - footer: layout here; the art (background) lives in the footer slot, assets/footer/<name>/footer.css (H2)
   - markets band (H2): dark, one strip of n columns edge to edge, YTD figure 48, 1Y + last value meta 14
*/
@font-face{font-family:"Newsreader Display";src:url("fonts/Newsreader.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:block}
@font-face{font-family:"Libre Franklin";src:url("fonts/LibreFranklin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:block}
:root{
--paper:#FFFFFF;--paper-2:#F7F7F4;--ink:#0D0D0B;--ink-2:#6B6B68;--rule:#E6E6E3;--ph:#8A8A87;
--d-paper:#0D0D0B;--d-ink:#F7F7F4;--d-ink-2:#A3A3A0;--d-rule:#3A3A37;
--t12:12px;--t14:14px;--t17:17px;--t22:22px;--t30:30px;--t48:48px;--t72:72px;--t96:96px;--t120:120px;
--s4:4px;--s8:8px;--s12:12px;--s16:16px;--s24:24px;--s32:32px;--s48:48px;--s64:64px;--s96:96px;--s120:120px;--s160:160px;
--m:var(--s32);--gut:var(--s24);
--serif:"Newsreader Display",Georgia,serif;--sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--d-paper)} /* v2: overscroll (Mac rubber-band) shows dark, not white */
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--t17);line-height:1.5;letter-spacing:0;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.vh{position:absolute;left:-9999px}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.label{font-size:var(--t12);line-height:1.2;letter-spacing:.12em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.meta{font-size:var(--t14);line-height:1.4;color:var(--ink-2);font-variant-numeric:tabular-nums}
.serif{font-family:var(--serif);font-variation-settings:"opsz" 72;font-weight:400;letter-spacing:-0.02em}
.dark{background:var(--d-paper);color:var(--d-ink);--ink-2:var(--d-ink-2);--rule:var(--d-rule)}
h2,h3{text-wrap:balance} p{text-wrap:pretty}

/* header: dark, 72, in flow above the hero */
.nav .wrap{display:flex;justify-content:space-between;align-items:center;height:var(--t72)}
/* v2 nav (12 Oct 2026): the confirmed horizontal lockup (logo/round3; full 4-sector mark: Tim 13 Oct 2026 retired the 3-part mark-48) at 24 px replaces the text wordmark; its cap line
   and the nav's x-height share the 72 px bar's centre; Subscribe is a hairline box (radius 0), the only boxed item. */
.nav .lockup{display:block;line-height:0}
.nav .lockup img{height:var(--s24);width:auto;display:block}
.nav ul{align-items:center}
.nav .sub{display:inline-flex;align-items:center;height:var(--s32);color:var(--d-ink)!important;border:1px solid var(--d-rule);padding:0 var(--s16);line-height:1}
.nav .sub:hover{border-color:var(--d-ink-2)}
.wordmark{font-family:var(--serif);font-variation-settings:"opsz" 72;font-weight:400;font-size:var(--t22);letter-spacing:-0.01em;line-height:1;white-space:nowrap}
.wordmark span{color:var(--ink-2)}
.nav ul{list-style:none;display:flex;gap:var(--s32);font-size:var(--t14);font-weight:500}
.nav ul a{color:var(--d-ink-2)} .nav ul a:hover{color:var(--d-ink)}


/* hero seam: hero/hero.css overrides */
#hero{display:block;min-height:560px;background:var(--d-paper)}

/* notes: white; figure leads in cols 1-3, text on the col-4 axis */
.notes{padding:var(--s120) 0 var(--s96)}
.nhead h2{grid-column:4/13;font-size:var(--t48);line-height:1.05}
.nlist{margin-top:var(--s64);border-top:1px solid var(--rule)}
.note{padding-top:var(--s48)}
.note+.note{padding-top:var(--s64)}
.note .side{grid-column:1/4;grid-row:1;padding-top:calc(var(--s32) + var(--s8))}
.note .side .fig{font-size:var(--t48);line-height:1;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.note .side .fig small{font-size:var(--t22);letter-spacing:0;margin-left:var(--s4)}
.note .side .meta{margin-top:var(--s8)}
.note .body{grid-column:4/11;grid-row:1}
.note .n span{display:block}
.note h3{margin-top:var(--s12);font-family:var(--serif);font-variation-settings:"opsz" 36;font-weight:400;font-size:var(--t30);line-height:1.2;letter-spacing:-0.01em}
.note p{margin-top:var(--s16);max-width:34em}

/* figures on col 4 to the 1408 edge (v4: no captions) */
figure{grid-column:4/13}
figure svg{display:block;width:100%;height:auto;overflow:visible}

/* the one dot element: white band, continues the notes (no new heading) */
.curve{padding:var(--s64) 0 var(--s160)}
.curve figure svg{width:auto;max-width:100%}
/* v4.1 (Tim 12 Oct: 'text missing'): chart title and one-line read, no source line */
.curve-label{grid-row:1;padding-top:var(--s16)}
.curve-head{grid-column:1/13;grid-row:1;text-align:center}  /* centred on the page axis like Markets (Tim 12 Oct) */
.curve-head h2{font-size:var(--t48);line-height:1.05;text-wrap:balance}
.curve-head p{margin:var(--s16) auto 0;max-width:34em;font-size:var(--t22);line-height:1.45;letter-spacing:-0.01em;color:var(--ink-2)}
.curve figure{grid-column:1/13;grid-row:2;margin-top:var(--s48);display:flex;justify-content:center}
@media (max-width:640px){.curve-head,.curve figure{grid-column:1/13}.curve-label{display:none}}

/* notes empty state: one line in the house type */
.notes .empty{grid-column:4/11;margin-top:var(--s48);font-family:var(--serif);font-variation-settings:"opsz" 36;font-size:var(--t30);line-height:1.2;letter-spacing:-0.01em;color:var(--ink-2)}
.notes.is-empty{padding-bottom:var(--s120)}
.note .draft{display:inline-block;margin-top:var(--s8);color:var(--ink-2)}

/* markets band (H2): dark, calm; label caps, YTD 48, 1Y and last value small */
.markets{padding:var(--s96) 0 var(--s120)}
.mhead h2{grid-column:4/13;font-size:var(--t48);line-height:1.05}
.mstrip{margin-top:var(--s64);display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));column-gap:var(--gut);border-top:1px solid var(--rule)}
.mk{padding-top:var(--s16)}
.mk .label{color:var(--d-ink-2)}
.mk .fig{margin-top:var(--s24);font-size:var(--t48);line-height:1;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.mk .fig small{font-size:var(--t22);letter-spacing:0;margin-left:var(--s4)}
.mk .meta{margin-top:var(--s8)}
.mk .y1{margin-top:var(--s24);color:var(--d-ink)}
.mk .y1 span{color:var(--d-ink-2);margin-right:var(--s4)}
.mk .last{margin-top:var(--s4)}
@media (max-width:1100px){.mstrip{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:var(--s48)}}
@media (max-width:640px){.mstrip{grid-template-columns:repeat(2,minmax(0,1fr))}.mhead h2{grid-column:1/13}}

/* subscribe: paper band, short */
.subscribe{background:var(--paper-2);padding:var(--s120) 0 var(--s120)}
.subscribe h2{grid-column:4/11;font-size:var(--t48);line-height:1.05}
.subscribe p{grid-column:4/10;margin-top:var(--s24);font-size:var(--t22);line-height:1.45;color:var(--ink-2)}
.subscribe form{grid-column:4/10;margin-top:var(--s48);display:flex;border-bottom:1px solid var(--ink)}
.subscribe input{flex:1;min-width:0;border:0;outline:0;border-radius:0;background:transparent;font:inherit;font-size:var(--t22);padding:var(--s12) 0;color:var(--ink)}
.subscribe input::placeholder{color:var(--ph)}
.subscribe button{border:0;border-radius:0;background:transparent;font:inherit;font-size:var(--t12);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);cursor:pointer;padding:0 0 0 var(--s24)}
.subscribe .fine{grid-column:4/10;margin-top:var(--s16);font-size:var(--t14)}

/* footer: dark, over the dithered earth-limb field (two dark tones, text stays legible) */
footer.dark{background-color:var(--d-paper);min-height:640px;padding:var(--s96) 0 var(--s48);display:flex;flex-direction:column}
footer .wrap{width:100%;flex:1;row-gap:var(--s24);align-content:space-between}
footer .wm{grid-column:1/4}
footer .c2{grid-column:4/8} footer .c3{grid-column:8/11}
footer p,footer a{font-size:var(--t14);line-height:1.5;color:var(--d-ink-2)}
footer a:hover{color:var(--d-ink)}
footer .wordmark{color:var(--d-ink)}
footer .legal{grid-column:4/10;align-self:end;font-size:var(--t12);line-height:1.5}
footer .copy{grid-column:10/13;align-self:end;text-align:right;font-size:var(--t12);font-variant-numeric:tabular-nums}

/* ===== H3 pages (research, about, subscribe) + shared changes. Every value is a token from tokens.json. ===== */
.nav ul a.on{color:var(--d-ink)}
.ulink{text-decoration:underline;text-underline-offset:var(--s4);text-decoration-thickness:1px}
.ulink:hover{color:var(--ink-2)}
mark.tbw{background:var(--rule);color:var(--ink-2);padding:0 var(--s4);-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* button: ink block, natural case, square (radius 0, no shadow) */
.btn{display:inline-block;background:var(--ink);color:var(--paper);font-size:var(--t17);font-weight:500;line-height:1.2;padding:var(--s16) var(--s32);white-space:nowrap}
.btn:hover{background:var(--ink-2)}
.subscribe .cta,.phead .cta{grid-column:4/10;margin-top:var(--s48)}

/* page head: white, headline on the col-4 axis */
.phead{padding:var(--s120) 0 var(--s64)}
.phead h1{grid-column:4/12;font-size:var(--t72);line-height:1.05;text-wrap:balance}
.phead .dek{grid-column:4/10;margin-top:var(--s24);font-size:var(--t22);line-height:1.45;letter-spacing:-0.01em;color:var(--ink-2)}

/* note rows (home + research): date and theme in cols 1-3, title and dek on col 4 */
.rlist{list-style:none;margin-top:var(--s64);border-top:1px solid var(--rule)}
.rnote{padding-top:var(--s48)}
.rnote+.rnote{padding-top:var(--s64)}
.rmeta{grid-column:1/4}
.rmeta span{display:block}
.rbody{grid-column:4/11}
.rbody h3{font-family:var(--serif);font-variation-settings:"opsz" 36;font-weight:400;font-size:var(--t30);line-height:1.2;letter-spacing:-0.01em}
.rbody h3 a:hover{color:var(--ink-2)}
.rbody p{margin-top:var(--s16);max-width:34em}
.more{grid-column:4/11;margin-top:var(--s64);font-size:var(--t14);font-weight:500}
.empty-state{grid-column:4/11;margin-top:var(--s48)}
.notes .empty-state .empty{margin-top:0}
.empty-sub{margin-top:var(--s16);font-size:var(--t17)}
.rindex{padding:0 0 var(--s160)}
.rindex .empty-state{grid-column:4/13;margin-top:0;padding-top:var(--s48);border-top:1px solid var(--rule)}
.notes .empty-state .empty{grid-column:auto}

/* 404 (Tim, 12 Oct 2026): dark field, stippled Hermes; '404' leads in cols 1-3 like a note figure, text on the col-4 axis */
.page-404{background:var(--d-paper)}
.nf{min-height:calc(100vh - var(--t72));padding:var(--s64) 0 var(--s96);display:flex;align-items:center}
.nf .wrap{width:100%}
.nf-left{grid-column:1/9;grid-row:1;display:grid;grid-template-columns:subgrid;align-self:center}
.nf-code{grid-column:1/4;padding-top:var(--s12);font-family:var(--serif);font-variation-settings:"opsz" 72;font-size:var(--t48);line-height:1;letter-spacing:-0.02em;font-variant-numeric:lining-nums tabular-nums;color:var(--d-ink-2);white-space:nowrap}
.nf-text{grid-column:4/9}
.nf h1{font-size:var(--t72);line-height:1.05;text-wrap:balance}
.nf-line{margin-top:var(--s24);max-width:34em;font-size:var(--t22);line-height:1.45;letter-spacing:-0.01em;color:var(--d-ink-2)}
.nf-links{margin-top:var(--s48);display:flex;gap:var(--s32);font-size:var(--t17);font-weight:500}
.nf-links .ulink:hover{color:var(--d-ink-2)}
.nf-plate{grid-column:9/13;grid-row:1}
.nf-plate img{display:block;width:100%;height:auto}
.nf-page .nf{min-height:calc(100vh - var(--t72))}
/* 404 = exactly one screen at any height (Tim 12 Oct: no footer, no scroll). The Hermes plate shrinks to the
   height left after the nav and padding instead of pushing the page taller. */
body.page-404,.nf-page{background:var(--d-paper);height:100svh;overflow:hidden;display:flex;flex-direction:column}
body.page-404 main{flex:1;min-height:0;display:flex}
body.page-404 .nf{flex:1;min-height:0;padding:var(--s32) 0}
body.page-404 .nf-plate{align-self:center;display:flex;justify-content:center}
body.page-404 .nf-plate img{width:auto;max-width:100%;max-height:calc(100svh - var(--t72) - 2 * var(--s32))}
@media (max-width:900px){.nf-left{grid-column:1/13}.nf-code{grid-column:1/13;margin-bottom:var(--s24)}.nf-text{grid-column:1/13}.nf-plate{grid-column:4/13;grid-row:2;margin-top:var(--s48)}}

/* ===== v3 home (Tim, 12 Oct 2026). Tokens only. ===== */
/* who we are (v4): paper-2 band (the Athena plate's own ground), label in cols 1-3, text on the col-4 axis, plate cols 10-12.
   Shorter than v3: 64 top, and the plate sits on the band's floor (its lower 38% is feathered into paper-2, no crop line) */
.who{background:var(--paper-2);padding:var(--s64) 0;overflow:hidden}
.who-left{grid-column:1/9;grid-row:1;display:grid;grid-template-columns:subgrid;align-self:center}
.who-label{grid-column:1/4;padding-top:var(--s16)}
.who-text{grid-column:4/9}
.who-text h2{font-size:var(--t48);line-height:1.05;text-wrap:balance}
.who-text p{margin-top:var(--s24);max-width:34em;font-size:var(--t22);line-height:1.45;letter-spacing:-0.01em;color:var(--ink-2)}
.who-plate{grid-column:10/13;grid-row:1;align-self:end;margin-bottom:calc(-1 * var(--s64))}
.who-plate img{display:block;width:100%;height:auto}
@media (max-width:900px){.who-left{grid-column:1/13}.who-label,.who-text{grid-column:1/13}.who-text{margin-top:var(--s24)}.who-plate{grid-column:5/13;grid-row:2;margin-top:var(--s48)}}

/* notes + subscribe, one section: the subscribe call is the section's last row (rule, label cols 1-3, body on col 4) */
.nsec{padding:var(--s120) 0 var(--s120)}
.nsec.is-empty{padding-bottom:var(--s120)}
.nsub{margin-top:var(--s96);padding-top:var(--s48);border-top:1px solid var(--rule)}
.nsub .rmeta{grid-column:1/4}
.nsub-body{grid-column:4/10}
.nsub h3{font-variation-settings:"opsz" 36;font-size:var(--t30);line-height:1.2;letter-spacing:-0.01em;text-wrap:balance}
.nsub-body>p{margin-top:var(--s16);max-width:34em;color:var(--ink-2)}
.nsub .cta{margin-top:var(--s32)}
.nsub .fine{margin-top:var(--s16);font-size:var(--t14);color:var(--ink-2)}

/* markets (v3, Tim: "not centred"): heading, figure group and source share the page axis; seven even columns, each centred */
.markets .mhead h2{grid-column:1/13;text-align:center}
.markets .mk{text-align:center}
/* v3 fix round 1 (judge-v3.md): phone notes on the full width; caption wraps; side labels on the heading baselines */
.who-label{padding-top:var(--s24)}
.nsub .rmeta{padding-top:var(--s12)}
@media (max-width:640px){.nhead h2,.notes .empty-state,.nsub .rmeta,.nsub-body{grid-column:1/13}.nsub-body{margin-top:var(--s16)}.who-plate{grid-column:3/13}}

/* v4 one page (Tim, 12 Oct 2026): the nav scrolls to home anchors. The header is in flow (not sticky), so a band
   lands flush with the viewport top; the newsletter row (inside the notes band) keeps a 48 px lead. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
#who,#notes,#markets{scroll-margin-top:0}
#newsletter{scroll-margin-top:var(--s48)}
/* v4 review fixes (review-architect.md): phone nav wraps under the lockup (WCAG 1.4.10 reflow); a designed focus ring */
@media (max-width:640px){.nav .wrap{flex-wrap:wrap;height:auto;min-height:var(--t72);padding-top:var(--s16);padding-bottom:var(--s16);row-gap:var(--s16)}.nav ul{gap:var(--s16)}}
:focus-visible{outline:1px solid currentColor;outline-offset:var(--s4)}