/* Foundation0 · Concept A "The Radiant at night"
Tokens, base, layout, components. Plain CSS, no build step.
Light tokens on :root; dark under the OS preference (unless the visitor chose light)
and under an explicit [data-theme="dark"]. Contrast pairs: see DESIGN-NOTES.md. */
/* ---------- 0. Fallback faces: local fonts resized to the web fonts' metrics, so text does not jump when
Geist, Geist Mono and Newsreader arrive (font-display: swap). Measured in Chromium against Liberation
Sans/Serif/Mono, which share Arial's, Times New Roman's and Courier New's metrics. ---------- */
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); font-weight: 100 450; size-adjust: 101.04%; ascent-override: 99.46%; descent-override: 29.2%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 451 900; size-adjust: 101.04%; ascent-override: 99.46%; descent-override: 29.2%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("LiberationMono"); size-adjust: 99.98%; ascent-override: 100.52%; descent-override: 29.5%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("LiberationSerif"); font-style: normal; size-adjust: 104.92%; ascent-override: 70.05%; descent-override: 25.26%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("LiberationSerif-Italic"); font-style: italic; size-adjust: 104.92%; ascent-override: 70.05%; descent-override: 25.26%; line-gap-override: 0%; }
/* ---------- 1. Tokens ---------- */
:root {
color-scheme: light;
/* ground: "Encyclopedia paper" (pearl) */
--bg: #f5f0e6; --bg-1: #fbf8f1; --bg-2: #fffdf8; --bg-3: #ebe4d6;
--line: #ddd3c2; --line-ui: #857c6d; --grid: #d6ccb9;
--ink: #16213e; --ink-2: #36435a; --ink-3: #5a6373;
/* symbiosis: gold = biological / human, cyan = digital */
--bio: #82560f; --bio-hi: #6b470c; --dig: #0a6a85; --dig-hi: #07546a;
--link: #0a6a85; --focus: #875a12;
/* chart marks (validated with dataviz validate_palette.js, light surface) */
--mark-bio: #a26e15; --mark-mid: #8f8d86; --mark-dig: #1588a8; /* mark-mid ≥ 3:1 on --bg-1 and --bg-2 */
/* the Radiant's red hairline: founding members' work */
--hair: #ba3728;
/* evidence status (always paired with a label and a ladder glyph) */
--st-verified: #196a3c; --st-reviewed: #3a4fb0; --st-preprint: #964a0b;
--st-claimed: #6e5a2e; --st-contested: #ad2e40; --st-retracted: #5a5f66; --st-deployed: #6d3fc0;
/* project accents (card bar + glyph line) */
--acc-incentre: #127a48; --acc-exoplanets: #8a5a10; --acc-intmult: #2a5fb0;
--acc-mobius: #a3333a; --acc-gf2m: #8a2f9a; --acc-rohan: #1f5f8f; --acc-shea: #4a6f12;
--acc-exo: #b23a06; --acc-medcode: #0e6b5c; --acc-nutrak: #8a6508; --acc-mm: #6b45ad;
--glow: 0; /* light theme: no additive glow */
--shadow-panel: 0 18px 40px -28px rgba(22,33,62,.25);
--header-bg: rgba(245,240,230,.88);
/* type */
--f-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--f-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--f-serif: "Newsreader", "Newsreader Fallback", "Iowan Old Style", Charter, "Bitstream Charter", Georgia, serif;
--fs-label: 11.5px; --tr-label: .14em;
--fs-xs: 13px; --fs-sm: 15px; --fs-ui: 16px;
--fs-base: 18px;
--fs-lede: clamp(19px, 1.2vw + 14px, 22px);
--fs-h3: clamp(20px, .8vw + 16px, 24px);
--fs-h2: clamp(28px, 2.6vw + 16px, 48px);
--fs-display: clamp(50px, 6.3vw + 8px, 100px);
--fs-stat: clamp(26px, 1.6vw + 18px, 36px);
--measure: 68ch;
/* space (4-pt) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
--s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
--sec-pad: clamp(64px, 9vw, 128px);
--max: 1320px; --gutter: clamp(16px, 4vw, 48px);
--tick: 12px; --r-chip: 2px; --r-btn: 3px; --cut: 10px;
/* motion */
--t-micro: 120ms; --t-ui: 220ms; --t-reveal: 650ms; --t-draw: 1400ms;
--ease-out: cubic-bezier(.2,.75,.1,1); --ease-io: cubic-bezier(.45,0,.55,1);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
/* ground: "Terminus night", a teal-cast near-black */
--bg: #070b0e; --bg-1: #0b1216; --bg-2: #10191e; --bg-3: #172329;
--line: #1e2b32; --line-ui: #56707a; --grid: #22323a;
--ink: #eeeadf; --ink-2: #c5cbc5; --ink-3: #97a4a3;
--bio: #e6b874; --bio-hi: #f7dcae; --dig: #5ccfec; --dig-hi: #b4ecf7;
--link: #b4ecf7; --focus: #f7dcae;
--mark-bio: #ba8836; --mark-mid: #61696d; --mark-dig: #27a0bf;
--hair: #f1735c;
--st-verified: #7ad69a; --st-reviewed: #a5bcff; --st-preprint: #f5a25d;
--st-claimed: #d8c9a6; --st-contested: #f2909e; --st-retracted: #a2a9ad; --st-deployed: #c9a8ff;
--acc-incentre: #37ff9a; --acc-exoplanets: #f0b25a; --acc-intmult: #5b9cf0;
--acc-mobius: #f07a7a; --acc-gf2m: #e58cf0; --acc-rohan: #9ad1ff; --acc-shea: #b5f27a;
--acc-exo: #ff5b14; --acc-medcode: #3fc1a8; --acc-nutrak: #d9a521; --acc-mm: #c9a7ff;
--glow: 1;
--shadow-panel: 0 30px 60px -40px rgba(0,0,0,.9);
--header-bg: rgba(7,11,14,.86);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #070b0e; --bg-1: #0b1216; --bg-2: #10191e; --bg-3: #172329;
--line: #1e2b32; --line-ui: #56707a; --grid: #22323a;
--ink: #eeeadf; --ink-2: #c5cbc5; --ink-3: #97a4a3;
--bio: #e6b874; --bio-hi: #f7dcae; --dig: #5ccfec; --dig-hi: #b4ecf7;
--link: #b4ecf7; --focus: #f7dcae;
--mark-bio: #ba8836; --mark-mid: #61696d; --mark-dig: #27a0bf;
--hair: #f1735c;
--st-verified: #7ad69a; --st-reviewed: #a5bcff; --st-preprint: #f5a25d;
--st-claimed: #d8c9a6; --st-contested: #f2909e; --st-retracted: #a2a9ad; --st-deployed: #c9a8ff;
--acc-incentre: #37ff9a; --acc-exoplanets: #f0b25a; --acc-intmult: #5b9cf0;
--acc-mobius: #f07a7a; --acc-gf2m: #e58cf0; --acc-rohan: #9ad1ff; --acc-shea: #b5f27a;
--acc-exo: #ff5b14; --acc-medcode: #3fc1a8; --acc-nutrak: #d9a521; --acc-mm: #c9a7ff;
--glow: 1;
--shadow-panel: 0 30px 60px -40px rgba(0,0,0,.9);
--header-bg: rgba(7,11,14,.86);
}
/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
margin: 0; background: var(--bg); color: var(--ink);
font: 400 var(--fs-ui)/1.5 var(--f-sans);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="off"]) { scroll-behavior: smooth; } }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
.lede, .dek, .promise, .prose p, .callout p { text-wrap: pretty; }
a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--dig) 55%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 1px; }
button { font: inherit; color: inherit; }
/* the hidden attribute always wins over component display rules (.fig-ctrl, .seg, grids …) */
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--dig) 35%, transparent); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* items inside a visually hidden list stay at its corner, so focusing one never scrolls the page away */
.sr-only > li { position: absolute; left: 0; top: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bg-2); color: var(--ink); padding: 10px 14px; border: 1px solid var(--line-ui); font: 500 14px var(--f-mono); }
.skip:focus { top: 12px; }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.mono { font-family: var(--f-mono); }
/* Ordinals such as 0th: the suffix stays small, raised and lowercase, even inside an uppercase label. */
sup { font-size: .68em; line-height: 0; vertical-align: super; text-transform: none; letter-spacing: .02em; }
.label { font: 500 var(--fs-label)/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }
.bio { color: var(--bio); } .dig { color: var(--dig); }
/* ---------- 3. Header ---------- */
.site-head {
position: sticky; top: 0; z-index: 40; height: 60px;
background: var(--header-bg); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
border-bottom: 1px solid var(--line);
}
.site-head .wrap { height: 100%; display: flex; align-items: center; gap: var(--s-5); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 600 14px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.brand svg { width: 26px; height: 26px; flex: none; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; padding: 10px 10px; border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--bio); }
.tools { display: flex; gap: 6px; }
.tbtn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-width: 36px; padding: 0 10px;
background: transparent; border: 1px solid var(--line-ui); border-radius: var(--r-btn); color: var(--ink-2); cursor: pointer;
font: 500 11.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
}
.tbtn:hover { color: var(--ink); border-color: var(--ink-3); }
.tbtn svg { width: 16px; height: 16px; }
.tbtn .t-txt { display: inline; }
.tbtn[data-motion-toggle][aria-pressed="false"] { color: var(--ink-3); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: 46px; width: min(280px, calc(100vw - 32px)); background: var(--bg-2); border: 1px solid var(--line-ui); box-shadow: var(--shadow-panel); padding: 8px; }
.menu-panel a { display: flex; justify-content: space-between; padding: 12px 10px; color: var(--ink); text-decoration: none; font: 500 13px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line); min-height: 44px; align-items: center; }
.menu-panel a:last-child { border-bottom: 0; }
.menu-panel a span { color: var(--ink-3); }
@media (max-width: 1080px) { .nav { display: none; } .menu { display: block; } .tools { margin-left: auto; } }
@media (max-width: 760px) { .tbtn { height: 44px; min-width: 44px; } .tbtn .t-txt { display: none; } .site-head { height: 60px; }
/* only the header's tool buttons collapse to icons; figure controls keep their visible text (and accessible name) */
.fig-ctrl .tbtn .t-txt, .fig .tbtn .t-txt { display: inline; } }
@media (max-width: 380px) { .brand { letter-spacing: .16em; font-size: 13px; } .site-head .wrap { gap: 10px; } }
/* ---------- 4. Section scaffolding ---------- */
.sec { padding-block: var(--sec-pad); border-top: 1px solid var(--line); position: relative; }
.sec.alt { background: var(--bg-1); }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); }
.sec-label { font: 500 var(--fs-label)/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-2); }
.sec-label b { color: var(--bio); font-weight: 600; }
.sec-label i { font-style: normal; color: var(--ink-3); padding-inline: .35em; }
.h2 { font: 600 var(--fs-h2)/1.08 var(--f-sans); letter-spacing: -.03em; max-width: 22ch; }
.lede { font: 400 var(--fs-lede)/1.55 var(--f-serif); color: var(--ink-2); max-width: 60ch; margin-top: var(--s-4); padding-left: var(--s-4); border-left: 2px solid var(--bio); }
.prose { font: 400 var(--fs-base)/1.65 var(--f-serif); color: var(--ink-2); max-width: var(--measure); }
.prose p + p { margin-top: 1em; }
.prose em, .lede em { font-style: italic; }
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-5); font: 500 13px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--link); text-decoration: none; padding: 12px 0; }
.more:hover { text-decoration: underline; }
.more::after { content: "\2192"; font-family: var(--f-sans); letter-spacing: 0; }
@media (max-width: 640px) { :root { --fs-base: 17px; } }
/* ---------- 5. Frames (hairline + corner ticks: gold top-left, cyan bottom-right) ---------- */
.frame { position: relative; background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow-panel); }
.frame::before, .frame::after { content: ""; position: absolute; width: var(--tick); height: var(--tick); pointer-events: none; }
.frame::before { left: -1px; top: -1px; border-left: 1px solid var(--bio); border-top: 1px solid var(--bio); }
.frame::after { right: -1px; bottom: -1px; border-right: 1px solid var(--dig); border-bottom: 1px solid var(--dig); }
.corner { position: absolute; font: 500 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); pointer-events: none; }
.corner.tl { left: 14px; top: 12px; } .corner.tr { right: 14px; top: 12px; text-align: right; }
.corner.bl { left: 14px; bottom: 10px; } .corner.br { right: 14px; bottom: 10px; text-align: right; }
/* ---------- 6. Badges, ladder glyph, chips ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
--c: var(--ink-3);
display: inline-flex; align-items: center; gap: 7px; padding: 4px 7px 4px 6px; border: 1px solid var(--c); border-radius: var(--r-chip);
background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c);
font: 500 11px/1.25 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; white-space: normal; max-width: 100%;
}
.badges, .meta-row { min-width: 0; }
.badge.v { --c: var(--st-verified); } .badge.r { --c: var(--st-reviewed); } .badge.p { --c: var(--st-preprint); }
.badge.c { --c: var(--st-claimed); } .badge.x { --c: var(--st-contested); } .badge.n { --c: var(--ink-2); }
.badge.sealed { --c: var(--ink-2); border-style: dashed; }
.ladder { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; flex: none; }
.ladder i { width: 2.5px; background: currentColor; opacity: .25; }
.ladder i:nth-child(1) { height: 3px; } .ladder i:nth-child(2) { height: 4.75px; } .ladder i:nth-child(3) { height: 6.5px; } .ladder i:nth-child(4) { height: 8.25px; } .ladder i:nth-child(5) { height: 10px; }
.ladder[data-r="1"] i:nth-child(-n+1), .ladder[data-r="2"] i:nth-child(-n+2), .ladder[data-r="3"] i:nth-child(-n+3),
.ladder[data-r="4"] i:nth-child(-n+4), .ladder[data-r="5"] i:nth-child(-n+5) { opacity: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); padding: 4px 8px; border-radius: var(--r-chip); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dig); }
html[data-motion="on"] .chip .dot.live { animation: pulse 2.8s var(--ease-io) 3; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* ---------- 7. Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px;
font: 600 12.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer;
border: 1px solid var(--line-ui); color: var(--ink); background: transparent; border-radius: 0;
}
.btn:hover { border-color: var(--ink-2); }
.btn.primary { --btn-fill: var(--bio); border-color: transparent; color: var(--bg); background: linear-gradient(225deg, transparent calc(var(--cut) * .7071), var(--btn-fill) 0) border-box; }
.btn.primary:hover { --btn-fill: var(--bio-hi); }
.btn.primary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn .arr { font-family: var(--f-sans); letter-spacing: 0; font-size: 16px; }
/* ---------- 8. Hero ---------- */
.hero { position: relative; padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); overflow: hidden; }
.hero::before { /* faint night vignette behind the Radiant: atmosphere only, no data */
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(60% 70% at 72% 46%, color-mix(in srgb, var(--dig) calc(var(--glow) * 6%), transparent), transparent 70%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 56px); align-items: center; }
.kicker { display: flex; align-items: center; gap: 10px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.kicker .pair { display: inline-flex; gap: 4px; }
.kicker .pair i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.kicker .pair i:first-child { background: var(--bio); } .kicker .pair i:last-child { background: var(--dig); }
.display { font: 600 var(--fs-display)/.92 var(--f-sans); letter-spacing: -.055em; margin-top: var(--s-5); margin-left: -.04em; white-space: nowrap; }
/* The wordmark is ~5.4em wide: size it from its own column so it can never run into the Radiant (360-1920px). */
.hero-text { min-width: 0; container-type: inline-size; }
@supports (width: 1cqi) { .hero .display { font-size: min(var(--fs-display), 17.2cqi); } }
/* The dotted zero: the font's own 0 with a dot at the centre of its counter. A dotted zero is the typographic way
to tell 0 from O; here the dot is the incentre from the logo. The offsets are Geist 600's measured ink centre of
"0" (0.34em across, 0.455em down the .92 line box), so the dot scales with the wordmark at every size. */
.display .zero { position: relative; display: inline-block; }
.display .zero::after {
content: ""; position: absolute; left: .34em; top: .455em; width: .1em; height: .1em; margin: -.05em 0 0 -.05em;
border-radius: 50%; background: var(--bio);
}
.promise { font: 400 clamp(20px, 1.1vw + 14px, 25px)/1.45 var(--f-serif); color: var(--ink); margin-top: var(--s-5); max-width: 30ch; }
.hint { font: 400 var(--fs-sm)/1.55 var(--f-sans); color: var(--ink-2); margin-top: var(--s-4); max-width: 44ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-6); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: var(--s-6); }
.stat { background: var(--bg); padding: 14px 16px 12px; }
.stat .v { font: 500 var(--fs-stat)/1.05 var(--f-mono); letter-spacing: -.02em; color: var(--ink); }
.stat .k { font: 400 var(--fs-xs)/1.4 var(--f-sans); color: var(--ink-2); margin-top: 6px; }
.prov { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-4); }
/* Radiant figure */
.radiant { margin: 0; --rad-w: 780px; }
@media (min-width: 1081px) { .radiant { --rad-w: min(780px, max(560px, calc(100vh - 210px))); } }
.radiant-stage, .rad-time, .radiant-cap, .legend, .rad-table-wrap { max-width: var(--rad-w) !important; }
.radiant-stage { position: relative; width: 100%; max-width: 780px; margin-inline: auto; background: var(--bg-1); }
.radiant-box { position: relative; aspect-ratio: 1 / 1; width: 100%; }
.radiant-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; cursor: crosshair; }
@media (max-width: 640px) {
.radiant-stage { padding: 30px 0 40px; }
.radiant-stage .corner.br { display: none; }
.radiant-stage .corner { font-size: 11px; letter-spacing: .08em; }
.radiant-stage .corner .wide-only { display: none; }
}
/* time control under the Radiant: play button, range, live output */
.rad-time { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; max-width: 780px; margin: var(--s-3) auto 0; padding: 8px 12px; border: 1px solid var(--line); background: var(--bg-1); }
.rad-time label { font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rad-time output { font: 500 12.5px/1.3 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; min-width: 15ch; }
@media (max-width: 640px) { .rad-time { grid-template-columns: auto minmax(0, 1fr); } .rad-time label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rad-time output { grid-column: 1 / -1; text-align: left; } }
.radiant-stage:focus-within { outline: 2px solid var(--focus); outline-offset: 4px; }
.radiant-stage .corner { z-index: 2; }
.radiant-stage .corner .ln { display: block; }
.radiant-readout { color: var(--ink-2); }
.radiant-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: var(--s-3); font: 400 var(--fs-xs)/1.5 var(--f-sans); color: var(--ink-2); max-width: 780px; margin-inline: auto; }
.radiant-cap b { font-weight: 600; color: var(--ink); }
.legend { list-style: none; margin: var(--s-3) auto 0; padding: 0; max-width: 780px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.legend li { background: var(--bg-1); padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.legend .lk { font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.legend .lv { font: 400 var(--fs-xs)/1.45 var(--f-sans); color: var(--ink-2); margin-top: 3px; }
.legend svg { flex: none; width: 34px; height: 34px; margin-top: 1px; }
.legend button { all: unset; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; width: 100%; border-radius: 2px; }
.legend button:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.legend button[aria-pressed="true"] .lk { color: var(--ink); }
.legend button[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--hair); }
.rad-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--s-3); }
.rad-actions .tbtn { height: 36px; }
.rad-table-wrap { max-width: 780px; margin: var(--s-3) auto 0; max-height: 420px; overflow: auto; border: 1px solid var(--line); background: var(--bg-2); }
.rad-table-wrap[hidden] { display: none; }
html:not(.js) .rad-time, html:not(.js) .rad-actions, html:not(.js) .chart-tools { display: none; }
.rad-noscript { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font: 400 var(--fs-sm)/1.55 var(--f-sans); color: var(--ink-2); }
@media (max-width: 1080px) {
.hero .wrap { grid-template-columns: minmax(0, 1fr); }
.promise { max-width: 36ch; }
.hero-text { max-width: 720px; }
}
@media (max-width: 640px) {
.legend { grid-template-columns: minmax(0, 1fr); }
.stats { margin-top: var(--s-5); }
.rad-actions .tbtn { height: 44px; }
}
/* Shared tooltip (Encyclopedia entry card) */
.f0-tip {
position: fixed; z-index: 60; left: 0; top: 0; width: max-content; max-width: min(320px, calc(100vw - 24px));
background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-ui); box-shadow: var(--shadow-panel);
padding: 11px 13px 10px; pointer-events: none; opacity: 0; transform: translateY(4px);
transition: opacity var(--t-micro) linear, transform var(--t-micro) var(--ease-out);
font: 400 13px/1.45 var(--f-sans);
}
.f0-tip.on { opacity: 1; transform: none; pointer-events: auto; }
.f0-tip::before { content: ""; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px; border-left: 1px solid var(--bio); border-top: 1px solid var(--bio); }
.tip-k { font: 500 11px/1.35 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tip-t { font: 600 15px/1.3 var(--f-sans); letter-spacing: -.01em; margin-top: 5px; color: var(--ink); }
.tip-rows { margin-top: 8px; display: grid; gap: 4px; }
.tip-row { display: flex; gap: 8px; align-items: center; color: var(--ink-2); font: 500 11.5px/1.35 var(--f-mono); letter-spacing: .06em; }
.tip-row svg { width: 16px; height: 16px; flex: none; }
.tip-row .ladder { color: var(--ink-2); width: 16px; justify-content: center; }
.tip-v { color: var(--ink); font-weight: 600; font-size: 15px; font-family: var(--f-sans); letter-spacing: 0; }
.tip-note { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--ink-2); font: 400 12.5px/1.45 var(--f-sans); }
.tip-note .h { display: inline-block; width: 14px; height: 2px; background: var(--hair); vertical-align: middle; margin-right: 6px; }
.tip-foot { margin-top: 7px; font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
/* ---------- 9. Thesis ---------- */
.thesis-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.law {
margin: var(--s-6) 0; padding: clamp(20px, 3vw, 32px); background: var(--bg-2); position: relative; border: 1px solid var(--line);
}
.law .lawnum { font: 600 11.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bio); }
.law blockquote { margin: 12px 0 0; font: 500 clamp(22px, 1.4vw + 14px, 30px)/1.3 var(--f-sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.law figcaption { margin-top: 14px; font: 400 var(--fs-sm)/1.5 var(--f-serif); color: var(--ink-2); }
.aside-note { margin-top: var(--s-5); padding: 14px 16px; border: 1px dashed var(--line-ui); font: 400 var(--fs-sm)/1.55 var(--f-sans); color: var(--ink-2); max-width: var(--measure); }
.aside-note b { font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: 6px; }
.cfe { margin: 0; }
.cfe-tiles { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.tile { border: 1px solid var(--line-ui); padding: 14px 16px 16px; background: var(--bg-2); min-width: 0; }
.tile .z { font: 500 13px/1 var(--f-mono); color: var(--ink-3); }
.tile .sym { font: 600 clamp(56px, 6vw, 88px)/1 var(--f-sans); letter-spacing: -.04em; margin-top: 10px; }
.tile .nm { font: 500 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-top: 8px; }
.tile .use { font: 400 var(--fs-xs)/1.4 var(--f-sans); color: var(--ink-2); margin-top: 4px; }
.tile.c .sym { color: var(--bio); } .tile.fe .sym { color: var(--dig); }
.slash { width: clamp(40px, 5vw, 64px); position: relative; }
.slash::before { content: ""; position: absolute; left: 50%; top: 9%; height: 82%; width: 2px; background: linear-gradient(var(--bio), var(--dig)); transform: translateX(-50%) rotate(22.5deg); transform-origin: center; }
.cfe figcaption { margin-top: 12px; font: 400 var(--fs-sm)/1.5 var(--f-serif); color: var(--ink-2); }
.principles { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.principles li { background: var(--bg); padding: 16px 18px; }
.principles h3 { font: 600 17px/1.3 var(--f-sans); display: flex; gap: 10px; align-items: baseline; }
.principles h3 span { font: 500 11.5px/1 var(--f-mono); color: var(--bio); letter-spacing: .1em; }
.principles p { font: 400 var(--fs-sm)/1.55 var(--f-sans); color: var(--ink-2); margin-top: 6px; }
@media (max-width: 960px) { .thesis-grid { grid-template-columns: minmax(0, 1fr); } }
/* ---------- 10. Ledger teaser ---------- */
.ledger-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 48px); align-items: start; margin-top: var(--s-6); }
.chart { margin: 0; padding: 18px clamp(14px, 2vw, 24px) 16px; }
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: baseline; }
.chart-title { font: 600 17px/1.3 var(--f-sans); }
.chart-how { font: 400 var(--fs-xs)/1.5 var(--f-sans); color: var(--ink-2); margin-top: 4px; max-width: 64ch; }
.vlegend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.vlegend li { display: flex; align-items: center; gap: 8px; font: 400 var(--fs-xs)/1.35 var(--f-sans); color: var(--ink-2); }
.vlegend b { font-weight: 600; color: var(--ink); }
.vlegend .sw { width: 14px; height: 10px; border-radius: 2px; flex: none; }
.vlegend svg { width: 16px; height: 16px; flex: none; }
.chart-svg { width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.chart-svg text { font-family: var(--f-mono); }
.chart-svg .row:focus { outline: none; }
.chart-svg .row:focus-visible .rowbg { stroke: var(--focus); stroke-width: 2; }
.chart-foot { margin-top: 10px; font: 400 12.5px/1.5 var(--f-sans); color: var(--ink-3); }
.chart-foot p + p { margin-top: 4px; }
.chart-tools { display: flex; gap: 8px; margin-top: 12px; }
.tbl { width: 100%; border-collapse: collapse; font: 400 13px/1.4 var(--f-sans); }
.tbl caption { text-align: left; font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 10px 12px; }
.tbl th, .tbl td { text-align: left; padding: 7px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.tbl th { font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); position: sticky; top: 0; background: var(--bg-2); }
.tbl td.n { font-family: var(--f-mono); font-variant-numeric: tabular-nums; text-align: right; }
.tbl th.n { text-align: right; }
.tbl a { color: var(--link); }
.table-wrap { position: relative; overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); } /* relative: keeps .sr-only text inside the scroll box */
.table-wrap[hidden] { display: none; }
.evid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.evid li { background: var(--bg-2); display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; }
.evid .ladder { height: 12px; }
.evid .nm { font: 500 12px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.evid .ct { font: 500 20px/1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.evid-head { font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.evid-note { font: 400 var(--fs-xs)/1.5 var(--f-sans); color: var(--ink-2); margin-top: 10px; }
@media (max-width: 960px) { .ledger-grid { grid-template-columns: minmax(0, 1fr); } }
/* ---------- 11. Members strip ---------- */
.members { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.member { background: var(--bg); padding: 18px 18px 20px; position: relative; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.member::before { content: ""; position: absolute; left: 0; top: 18px; width: 2px; height: 34px; background: var(--hair); }
.member .idx { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-3); }
.member h3 { font: 600 19px/1.2 var(--f-sans); letter-spacing: -.01em; margin-top: 10px; }
.member .gh { font: 500 12.5px/1.3 var(--f-mono); margin-top: 4px; overflow-wrap: anywhere; }
.member .mp { margin-top: 14px; font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.member .mp a { display: block; margin-top: 4px; font: 500 14px/1.35 var(--f-sans); letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.member p { font: 400 14px/1.55 var(--f-sans); color: var(--ink-2); margin-top: 12px; }
.member .mw { margin-top: auto; padding-top: 14px; }
.member .mw > span { display: block; font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 10px; }
.member .mw ul { list-style: none; margin: 4px 0 0; padding: 0; }
.member .mw li { font: 500 12.5px/1.35 var(--f-mono); overflow-wrap: anywhere; }
.member .mw li a { display: inline-block; padding: 4px 0; }
.member .mw .more-n { color: var(--ink-3); font-size: 11.5px; padding-top: 4px; }
/* five across on wide screens; otherwise two, with an odd last member spanning the row (no hole) */
@media (max-width: 1100px) { .members { grid-template-columns: repeat(2, minmax(0, 1fr)); } .members > .member:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .members { grid-template-columns: minmax(0, 1fr); } }
/* ---------- 12. Research cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: var(--s-6); }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card.feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding-bottom: 0; }
.card.feature .f-text { padding-bottom: 20px; display: flex; flex-direction: column; }
.card.feature .f-fig { border-left: 1px solid var(--line); padding: 18px 18px 18px 0; display: flex; flex-direction: column; justify-content: center; }
.card.feature .glyph { height: 220px; }
.card.feature h3 { font-size: clamp(24px, 1.2vw + 16px, 32px); }
.card.feature .credit { font-size: 15.5px; max-width: 52ch; }
@media (max-width: 860px) { .card.feature { grid-template-columns: minmax(0, 1fr); } .card.feature .f-fig { border-left: 0; padding: 0 0 18px; } .card.feature .glyph { height: 150px; } }
.card { --acc: var(--ink-3); position: relative; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); padding: 0 0 18px; min-width: 0; }
.card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--acc); }
.card .kick { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 16px 18px 0; font: 500 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.card h3 { font: 600 21px/1.2 var(--f-sans); letter-spacing: -.015em; padding: 8px 18px 0; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--acc); }
.card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.card .badges { padding: 12px 18px 0; position: relative; z-index: 2; }
.card .dek { font: 400 15.5px/1.45 var(--f-serif); color: var(--ink-2); padding: 6px 18px 0; margin: 0; max-width: none; }
/* .cards.bal (home): the last row never leaves a hole. JS marks the tail cards (.tail2 at 3 columns, .tail1 at 2). */
@media (min-width: 1101px) { .cards.bal { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cards.bal > .card { grid-column: span 2; } .cards.bal > .card.feature { grid-column: 1 / -1; } .cards.bal > .card.tail2 { grid-column: span 3; } }
@media (min-width: 701px) and (max-width: 1100px) { .cards.bal > .card.tail1 { grid-column: 1 / -1; } }
.card .credit { font: 400 14px/1.55 var(--f-sans); color: var(--ink-2); padding: 10px 18px 0; }
.card .fact.live-val { display: grid; gap: 6px; align-items: start; }
.card .fact.live-val .v { font: 500 17px/1.25 var(--f-mono); white-space: normal; overflow-wrap: anywhere; }
.card .fact.live-val .chip { position: relative; z-index: 2; justify-self: start; text-decoration: none; }
.card .fact.live-val .chip:hover { color: var(--ink); border-color: var(--line-ui); }
.glyph.hit { z-index: 2; }
.gcap .lg { display: inline-flex; align-items: baseline; gap: 6px; margin-right: 12px; }
.gcap .sq { display: inline-block; width: 9px; height: 9px; flex: none; transform: translateY(1px); }
.glyph.hit canvas { cursor: crosshair; }
.gcap .gdef { display: block; margin-top: 4px; }
.card .credit b { color: var(--ink); font-weight: 600; }
.glyph { position: relative; margin: 14px 18px 0; height: 116px; background: var(--bg-1); border: 1px solid var(--line); }
.glyph canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.glyph .gk { position: absolute; left: 8px; top: 6px; font: 500 11px/1.2 var(--f-mono); letter-spacing: .08em; color: var(--ink-3); z-index: 1; pointer-events: none; }
.glyph .gr { position: absolute; right: 8px; top: 6px; font: 500 11px/1.2 var(--f-mono); letter-spacing: .04em; color: var(--ink-2); z-index: 1; pointer-events: none; text-align: right; }
/* .ghead holds both: title (.gk) on the left, live meta (.gr) on the right, wrapping rather than overlapping */
.glyph .ghead { position: absolute; left: 8px; right: 8px; top: 6px; z-index: 1; pointer-events: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.glyph .ghead .gk, .glyph .ghead .gr { position: static; }
.glyph .ghead .gr { margin-left: auto; }
.card .gloss { font: 400 13px/1.5 var(--f-sans); color: var(--ink-2); padding: 8px 18px 0; }
.card .gloss b { color: var(--ink); font-weight: 600; }
.card .gcap { font: 400 12.5px/1.45 var(--f-sans); color: var(--ink-3); padding: 8px 18px 0; }
.card .fact { display: flex; gap: 12px; align-items: baseline; padding: 12px 18px 0; margin-top: auto; }
.card .fact .v { font: 500 20px/1.1 var(--f-mono); color: var(--ink); white-space: nowrap; }
.card .fact .k { font: 400 13px/1.4 var(--f-sans); color: var(--ink-2); }
.card .links { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 18px 0; font: 500 12px/1.4 var(--f-mono); letter-spacing: .04em; }
.card .links a { padding: 6px 0; }
.card:hover { border-color: var(--line-ui); }
.card:focus-within { border-color: var(--line-ui); }
/* ---------- 13. Instruments (the Vault) + Commons ---------- */
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: var(--s-6); }
.vault { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); padding: clamp(18px, 3vw, 32px); grid-column: 1 / -1; align-items: start; }
.vault-door { width: 100%; max-width: 200px; aspect-ratio: 1; }
.vault-egg { display: block; height: auto; }
.vault h3 { font: 600 var(--fs-h3)/1.2 var(--f-sans); letter-spacing: -.015em; margin-top: 12px; }
.vault p { font: 400 var(--fs-sm)/1.6 var(--f-sans); color: var(--ink-2); margin-top: 8px; max-width: 70ch; }
.vault .facts { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.vault .facts li { background: var(--bg-2); padding: 12px 14px; }
.vault .facts .v { font: 500 22px/1.1 var(--f-mono); color: var(--ink); }
.vault .facts .k { font: 400 13px/1.45 var(--f-sans); color: var(--ink-2); margin-top: 4px; }
.also { margin-top: var(--s-5); font: 400 var(--fs-sm)/1.6 var(--f-sans); color: var(--ink-2); }
.also b { font: 500 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-right: 8px; }
.ccard { --acc: var(--ink-3); position: relative; padding: 0 0 20px; background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-direction: column; }
.ccard::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--acc); }
.ccard .kick { padding: 16px 20px 0; font: 500 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ccard h3 { font: 600 22px/1.2 var(--f-sans); letter-spacing: -.015em; padding: 8px 20px 0; }
.ccard .badges { padding: 12px 20px 0; }
.ccard p { font: 400 var(--fs-sm)/1.6 var(--f-sans); color: var(--ink-2); padding: 12px 20px 0; }
.ccard .glyph { margin: 16px 20px 0; height: auto; padding: 12px 14px 10px; }
.ccard .ccap { font: 400 12.5px/1.5 var(--f-sans); color: var(--ink-3); padding: 8px 20px 0; max-width: 72ch; }
.ccard .links { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 20px 0; font: 500 12px/1.4 var(--f-mono); }
.ccard .links a { padding: 6px 0; }
.gsvg { width: 100%; height: auto; overflow: visible; }
.gsvg text { font-family: var(--f-mono); font-size: 11px; fill: var(--ink-2); }
@media (max-width: 860px) { .two { grid-template-columns: minmax(0, 1fr); } .vault { grid-template-columns: minmax(0, 1fr); } .vault-door { max-width: 140px; } .vault .facts { grid-template-columns: minmax(0, 1fr); } }
/* ---------- 14. Writing ---------- */
.posts { list-style: none; padding: 0; margin: var(--s-6) 0 0; border-top: 1px solid var(--line); }
.post { display: grid; grid-template-columns: 140px minmax(0, 1fr) 200px; gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; position: relative; }
.post time { font: 500 12px/1.4 var(--f-mono); letter-spacing: .1em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.post h3 { font: 500 clamp(20px, 1vw + 14px, 26px)/1.25 var(--f-serif); letter-spacing: -.005em; }
.post h3 a { color: var(--ink); text-decoration: none; }
.post h3 a::after { content: ""; position: absolute; inset: 0; }
.post h3 a:hover { text-decoration: underline; text-decoration-color: var(--bio); }
.post p { font: 400 var(--fs-sm)/1.55 var(--f-sans); color: var(--ink-2); margin-top: 6px; max-width: 70ch; }
.post .cat { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
@media (max-width: 860px) { .post { grid-template-columns: minmax(0, 1fr); } .post .cat { text-align: left; order: -1; } .post time { order: -2; } }
/* ---------- 15. Footer: Terminus colophon ---------- */
.site-foot { border-top: 1px solid var(--line); background: var(--bg-1); padding: var(--s-8) 0 var(--s-7); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); }
.foot-grid .foot-brand { display: flex; align-items: center; gap: 12px; font: 600 14px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; }
.foot-brand svg { width: 36px; height: 36px; }
.foot-grid p { font: 400 14px/1.6 var(--f-sans); color: var(--ink-2); margin-top: 12px; max-width: 60ch; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.foot-cols h4, .foot-cols .foot-h { font: 500 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.foot-cols ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 2px; }
.foot-cols a { font: 400 14px/1.5 var(--f-sans); display: inline-block; padding: 5px 0; }
.stamp { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px dashed var(--line-ui); display: flex; flex-wrap: wrap; gap: 8px 24px; font: 500 11.5px/1.5 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); }
.stamp .who { display: inline-flex; align-items: center; gap: 6px; }
.stamp .who i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- 16. Section index ----------
From 960px: a slim rail of bars at the left edge (the current section's bar is long and gold; its number shows
from 1440px), which opens into the full list on hover or keyboard focus.
Below 960px: .secbar, a one-line bar under the header ("03 of 08 · The fold"), with a 2px reading-progress
line and a list of the sections. f0.js builds both from section[data-index][data-num]; pages need no markup. */
.hud:empty { display: none !important; }
.hud { position: fixed; left: 4px; top: 50%; transform: translateY(-50%); z-index: 30; display: none; padding: 6px 12px 6px 6px; border: 1px solid transparent; background: transparent; }
.hud ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hud a { display: flex; align-items: center; gap: 8px; height: 24px; text-decoration: none; color: var(--ink-3); font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.hud a .bar { flex: none; width: 10px; height: 1px; background: var(--line-ui); }
.hud a .n { order: 2; min-width: 2.6ch; display: none; }
.hud a .t { order: 3; display: none; }
.hud a[aria-current="true"] { color: var(--ink); }
.hud a[aria-current="true"] .bar { width: 18px; height: 2px; background: var(--bio); }
.hud:hover, .hud:focus-within { background: var(--bg-2); border-color: var(--line-ui); box-shadow: var(--shadow-panel); }
.hud:hover a .bar, .hud:focus-within a .bar { width: 18px; }
.hud:hover a .n, .hud:hover a .t, .hud:focus-within a .n, .hud:focus-within a .t { display: inline; }
.hud a:hover, .hud a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 960px) { .hud { display: block; } }
@media (min-width: 1440px) { .hud a[aria-current="true"] .n { display: inline; } }
.secbar { position: fixed; left: 0; right: 0; top: 60px; z-index: 39; background: var(--header-bg); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--t-ui) linear, transform var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui); }
.secbar.on { transform: none; opacity: 1; visibility: visible; transition: opacity var(--t-ui) linear, transform var(--t-ui) var(--ease-out), visibility 0s; }
.secbar details { position: relative; }
.secbar summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; font: 500 11.5px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.secbar summary::-webkit-details-marker { display: none; }
.secbar summary b { color: var(--bio); font-weight: 600; }
.secbar summary .t { color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secbar summary .chev { margin-left: auto; flex: none; width: 12px; height: 12px; transition: transform var(--t-ui) var(--ease-out); }
.secbar details[open] summary .chev { transform: rotate(180deg); }
.secbar .prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--bio); transform-origin: 0 50%; transform: scaleX(0); }
.secbar ol { position: absolute; left: 0; right: 0; top: calc(100% + 1px); list-style: none; margin: 0; padding: 4px 8px; max-height: min(70vh, 520px); overflow: auto; background: var(--bg-2); border: 1px solid var(--line-ui); box-shadow: var(--shadow-panel); }
.secbar ol a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink-2); font: 500 12.5px/1.25 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.secbar ol li:last-child a { border-bottom: 0; }
.secbar ol a span { color: var(--ink-3); min-width: 2.6ch; }
.secbar ol a[aria-current="true"] { color: var(--ink); }
.secbar ol a[aria-current="true"] span { color: var(--bio); }
@media (min-width: 960px) { .secbar { display: none !important; } }
@media (max-width: 959px) { html.has-secbar { scroll-padding-top: 116px; } }
/* ---------- 17. No reveal-on-scroll: content is always visible (full-page capture, print, no-JS) ---------- */
/* ---------- 18. Motion kill-switch, print, forced colours ---------- */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
/* No JavaScript: hide controls that would do nothing, and say why a drawn figure is empty */
html:not(.js) [data-motion-toggle], html:not(.js) [data-theme-toggle], html:not(.js) .fig-ctrl, html:not(.js) .fig-stage > canvas, html:not(.js) .secbar { display: none !important; }
html:not(.js) .fig-stage:has(> canvas)::after { content: "This figure is drawn by JavaScript, which is off here. Its numbers are in the text and tables on this page."; position: absolute; inset: 0; display: grid; place-items: center; padding: 16px 24px; text-align: center; font: 400 var(--fs-sm)/1.5 var(--f-sans); color: var(--ink-2); }
@media print {
.site-head, .hud, .secbar, .rad-actions, .chart-tools, .skip { display: none !important; }
body { background: #fff; color: #000; }
}
@media (forced-colors: active) {
.frame::before, .frame::after, .card::before, .ccard::before, .member::before { forced-color-adjust: none; }
.badge { border: 1px solid CanvasText; }
/* the chosen option of a segmented control or toggle stays visibly chosen */
.seg button[aria-pressed="true"], .fig-ctrl [aria-pressed="true"], .legend button[aria-pressed="true"], .tbtn.play[data-state="playing"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
.seg button:focus-visible { outline: 2px solid CanvasText; outline-offset: -4px; box-shadow: none; }
/* range sliders keep a visible track and thumb (drawn by us, in system colours) */
.range { forced-color-adjust: none; }
html .range::-webkit-slider-runnable-track { background: CanvasText; height: 2px; }
html .range::-moz-range-track { background: CanvasText; height: 2px; }
html .range::-webkit-slider-thumb { background: Canvas; border-color: CanvasText; box-shadow: none; }
html .range::-moz-range-thumb { background: Canvas; border-color: CanvasText; }
.btn.primary { border-color: ButtonText; }
.hud a[aria-current="true"] .bar, .secbar .prog { forced-color-adjust: none; background: Highlight; }
}
/* =====================================================================
19. Shared components for inner pages (additive; see assets/README.md)
Every block below is new: no rule here changes a class used above.
===================================================================== */
:root { --fs-h1: clamp(36px, 4.4vw + 14px, 76px); --read: 760px; --wide: 1040px; }
/* 19.1 Page hero: breadcrumb, kicker, h1, dek, meta row. Optional --acc bar.
Add .has-fig to put a figure (.ph-fig) on the right. */
.page-hero { --acc: var(--bio); position: relative; padding: clamp(28px, 4vw, 56px) 0 clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); overflow: hidden; }
.page-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--acc); }
.page-hero .wrap { position: relative; }
.page-hero.has-fig .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 960px) { .page-hero.has-fig .wrap { grid-template-columns: minmax(0, 1fr); } }
.page-hero .kicker { margin-top: var(--s-5); }
.h1 { font: 600 var(--fs-h1)/1.02 var(--f-sans); letter-spacing: -.04em; margin-top: var(--s-4); max-width: 18ch; }
.dek { font: 400 var(--fs-lede)/1.5 var(--f-serif); color: var(--ink-2); margin-top: var(--s-5); max-width: 56ch; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--s-5); }
.ph-fig { margin: 0; min-width: 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font: 500 var(--fs-label)/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; padding: 0 .7em; color: var(--line-ui); }
.crumbs a { color: var(--ink-2); text-decoration: none; padding: 6px 0; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); }
/* 19.2 Reading layout: a 760px text column; .wide (alias .breakout) breaks figures out to 1040px.
Note: .wide is a global class; name page-specific variants something else (e.g. .wide-fig). */
.read { width: min(var(--read), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wide, .breakout { width: min(var(--wide), 100vw - 2 * var(--gutter)); margin-inline: calc(50% - min(var(--wide), 100vw - 2 * var(--gutter)) / 2); }
.prose h3 { font: 600 var(--fs-h3)/1.25 var(--f-sans); letter-spacing: -.015em; color: var(--ink); margin: 1.6em 0 .2em; }
.prose h3 + p { margin-top: .4em; }
.prose ul, .prose ol { margin: 1em 0; padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--ink-3); font-family: var(--f-mono); font-size: .8em; }
.prose blockquote { margin: 1.2em 0; padding-left: var(--s-4); border-left: 2px solid var(--dig); color: var(--ink); font-style: italic; }
.prose code, .code { font: 500 .86em/1.4 var(--f-mono); background: var(--bg-3); padding: .08em .35em; border-radius: var(--r-chip); color: var(--ink); }
.prose b, .prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--link); }
.prose > * + .fig, .prose > * + .callout, .prose > * + .split { margin-top: var(--s-6); }
.prose > .fig + *, .prose > .split + * { margin-top: var(--s-6); }
.h2 + .prose, .lede + .prose, .h2 + .split, .lede + .split { margin-top: var(--s-5); }
/* 19.3 Two columns: prose + figure. The figure sticks while the prose scrolls past (wide screens).
.rev swaps sides. */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: var(--s-6); }
.split.rev > :first-child { order: 2; }
.split > .sticky { position: sticky; top: 84px; }
@media (max-width: 960px) { .split { grid-template-columns: minmax(0, 1fr); } .split.rev > :first-child { order: 0; } .split > .sticky { position: relative; top: auto; } }
/* 19.4 Explainer figure: frame + head (title, how to read) + stage + controls + foot (source) + twin.
readout
Show the numbers
…
- Text link ↩
*/
.fnref { font: 600 .68em/1 var(--f-mono); vertical-align: super; text-decoration: none; color: var(--dig); padding: 0 .15em; }
.fnref:hover { text-decoration: underline; }
.notes { list-style: none; counter-reset: fn; margin: var(--s-5) 0 0; padding: 0; border-top: 1px solid var(--line); max-width: var(--measure); }
.notes li { counter-increment: fn; position: relative; padding: 10px 0 10px 42px; border-bottom: 1px solid var(--line); font: 400 var(--fs-xs)/1.55 var(--f-sans); color: var(--ink-2); overflow-wrap: anywhere; }
.notes li::before { content: counter(fn, decimal-leading-zero); position: absolute; left: 0; top: 10px; font: 500 11.5px/1.6 var(--f-mono); color: var(--ink-3); }
.notes li:target { background: color-mix(in srgb, var(--dig) 8%, transparent); }
.notes .back { text-decoration: none; margin-left: 6px; }
.src-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.src-list a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-chip); font: 500 11.5px/1.3 var(--f-mono); color: var(--link); text-decoration: none; }
.src-list a:hover { border-color: var(--line-ui); text-decoration: underline; }
/* 19.7 Status badges, extra states (the ladder glyph and .v .r .p .c .x .n are in section 6).
F0.statusBadges("Preprint · not peer reviewed") builds them from a status string. */
.badge.d { --c: var(--st-deployed); }
.badge.rt { --c: var(--st-retracted); text-decoration: line-through; }
.badge .xm { font: 600 13px/1 var(--f-mono); }
/* 19.8 Stat row: hairline grid of number + label + provenance (auto-fits 1 to 4 columns). */
.statrow { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 0; background: none; border: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.statrow > li, .statrow > div { background: var(--bg-2); padding: 14px 16px 12px; min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.statrow .v { font: 500 var(--fs-stat)/1.05 var(--f-mono); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.statrow .k { font: 400 var(--fs-xs)/1.45 var(--f-sans); color: var(--ink-2); margin-top: 6px; }
.statrow .src { display: block; margin-top: 8px; font: 500 11px/1.35 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); overflow-wrap: anywhere; }
.statrow .src a { color: var(--ink-3); }
/* 19.9 Member card (full version; the home page uses the compact .member strip). No pictures, by design.
M·03
Name
@login
…
*/
.mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: var(--s-6); }
.mcard { position: relative; background: var(--bg-2); border: 1px solid var(--line); padding: 18px 20px 20px; min-width: 0; }
.mcard::before { content: ""; position: absolute; left: -1px; top: 18px; width: 2px; height: 40px; background: var(--hair); }
.mcard .idx { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-3); }
.mcard h3 { font: 600 var(--fs-h3)/1.2 var(--f-sans); letter-spacing: -.015em; margin-top: 10px; }
.mcard .gh { display: inline-block; font: 500 12.5px/1.3 var(--f-mono); margin-top: 4px; padding: 4px 0; overflow-wrap: anywhere; }
.mcard .sum { font: 400 var(--fs-sm)/1.6 var(--f-sans); color: var(--ink-2); margin-top: 10px; }
.worklist { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.worklist li { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.worklist li > a { font: 500 14px/1.35 var(--f-sans); overflow-wrap: anywhere; }
.worklist li p { font: 400 13px/1.5 var(--f-sans); color: var(--ink-2); }
.worklist .badge { justify-self: start; white-space: normal; }
/* 19.10 Door cards: navigation tiles for index pages.
*/
.doors { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.door { --acc: var(--ink-3); position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px 18px 20px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color var(--t-micro) linear, transform var(--t-ui) var(--ease-out); }
.door::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--acc); }
.door .n { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-3); }
.door .t { font: 600 19px/1.25 var(--f-sans); letter-spacing: -.01em; }
.door .d { font: 400 14px/1.5 var(--f-sans); color: var(--ink-2); }
.door:hover { border-color: var(--line-ui); transform: translateY(-2px); }
.door:hover .t { text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 4px; }
/* 19.11 Key/value list and table of contents. */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: var(--s-4) 0 0; border-top: 1px solid var(--line); }
.kv dt, .kv dd { margin: 0; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); }
.kv dt { font: 500 11px/1.6 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.kv dd { font: 400 var(--fs-sm)/1.5 var(--f-sans); color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 520px) { .kv { grid-template-columns: minmax(0, 1fr); } .kv dt { border-bottom: 0; padding-bottom: 0; } }
.toc { list-style: none; margin: var(--s-5) 0 0; padding: 0; columns: 2 220px; column-gap: var(--s-6); }
.toc li { break-inside: avoid; }
.toc a { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font: 400 var(--fs-sm)/1.4 var(--f-sans); }
.toc a span { font: 500 11.5px/1.6 var(--f-mono); color: var(--bio); min-width: 2.4ch; }
.toc a:hover { color: var(--link); }
/* 19.12 Previous / next footer for inner pages. */
.prevnext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: var(--s-7); }
.prevnext a { display: grid; gap: 6px; padding: 16px 18px; background: var(--bg-1); text-decoration: none; color: var(--ink); font: 500 var(--fs-sm)/1.4 var(--f-sans); }
.prevnext a span { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.prevnext a.next { text-align: right; }
.prevnext a:hover { background: var(--bg-2); color: var(--link); }
@media (max-width: 520px) { .prevnext { grid-template-columns: minmax(0, 1fr); } .prevnext a.next { text-align: left; } }
/* 19.13 Live value: a number fetched at view time, with what it is and when (see F0.kappa). */
.live-val { display: grid; gap: 4px; }
.live-val .v { font: 500 16px/1.25 var(--f-mono); color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.live-val .k { font: 400 13px/1.45 var(--f-sans); color: var(--ink-2); }
.live-val .chip { justify-self: start; }
.chip .dot.stale { background: var(--ink-3); }
@media print {
.fig-ctrl, .twin > summary, .prevnext, .rad-time { display: none !important; }
.twin > :not(summary) { display: block !important; }
}
@media (forced-colors: active) { .page-hero::before, .door::before, .mcard::before, .callout::before { forced-color-adjust: none; } }