/* ═══════════════════════════════════════════════════════════════════════════
DS-NEXUS — "Brass on paper" shared system
Single source of truth for the interior pages (calibrator/ + posts/).
The landing (docs/index.html) keeps its own inline copy on purpose: it has a
different nav (← Portfolio), a parallax hero canvas and the spell/reveal piece.
Each interior page keeps only its page-specific CSS inline + this .
⚠️ CACHE: GitHub Pages serves this with max-age=600, so the pages link it as
`laton.css?v=N`. BUMP THAT N (in the three interior pages, css AND js) on every
change here, or a returning visitor gets new HTML with the old stylesheet.
═══════════════════════════════════════════════════════════════════════════ */
:root {
--paper:#DEDCD5; --paper-2:#E5E4DE; --paper-3:#D6D3C8;
--ink:#20272A; --pine:#1E3A34; --signal:#C8502A; --signal-ink:#A83E1E;
--brass:#9A7420; --sage:#6E7A6F;
--line:rgba(30,58,52,0.16); --line-2:rgba(30,58,52,0.09);
/* five profile hues — earthy marks that sit on paper */
--p-d:#B4472A; --p-e:#2F6E5E; --p-n:#9A7420; --p-y:#5B6699; --p-s:#77864F;
--font-display:"Spectral",Georgia,"Times New Roman",serif;
--font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--pad:clamp(20px,5vw,40px);
color-scheme:light;
}
:root[data-theme="dark"] {
color-scheme:dark;
--paper:#161F1C; --paper-2:#1D2724; --paper-3:#26302C;
--ink:#E4E0D5; --pine:#A9C6B8; --signal:#D6603C; --signal-ink:#E8825C;
--brass:#CBA24D; --sage:#93A096;
--line:rgba(196,214,204,0.16); --line-2:rgba(196,214,204,0.09);
--p-d:#E08A5A; --p-e:#6FB3A0; --p-n:#CBA24D; --p-y:#98A2D8; --p-s:#AEBE82;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body {
font-family: var(--font-body); font-size: 16px; line-height: 1.7;
color: var(--ink); background: var(--paper); min-height: 100vh;
-webkit-font-smoothing: antialiased;
transition: background .4s ease, color .4s ease;
}
a { color: var(--signal-ink); text-decoration: none; }
:focus-visible { outline:2px solid var(--signal); outline-offset:3px; border-radius:2px; }
/* ─── background: ambient neural constellation ─── */
.bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-grain {
position:absolute; inset:0; opacity:0.16; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-net { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.1s ease; }
.bg-net.on { opacity:0.32; }
:root[data-theme="dark"] .bg-grain { mix-blend-mode:screen; opacity:0.05; }
:root[data-theme="dark"] .bg-net.on { opacity:0.42; }
/* Every body child rides above the fixed background except .bg itself.
The