/* ============================================================ LUMEN design system — v2 (2026-09-26) This file is loaded LAST on every page, after lumen-overrides.css and lumen-design.css. It does two jobs: 1. It redefines the --lum-* tokens that v1 built its rules on, so the whole existing system re-skins at once instead of being overwritten rule by rule. The v1 layout/scaffolding rules stay exactly as they are; only the palette and the type faces move. 2. It carries the v2 shell — the status bar, the nav, the footer — which lumen-v2.js injects onto every page, plus the components the v2 homepage is built from. Direction (locked 2026-09-26 from three probes): the console. The product is a render farm you can watch, so the page is built like an instrument panel: a hairline grid, mono micro-labels against the numbers they name, cut corners, and one accent that means "this is live" (cyan) against one that means "resident process" (amber). Type does the work — Big Shoulders Display for statements, Chakra Petch for interface, Manrope for prose, JetBrains Mono for anything that is data. Deliberately NOT here: any rule that changes layout on a [class*=] selector. That is the single broadest trap in this codebase — see the flex-col/justify-between incident. Broad selectors below touch type and colour only. ============================================================ */ /* ── 1. type stack ───────────────────────────────────────────── Four faces, each with exactly one job. No variable font, no subsetting games — these are the same woff2 files the probes were approved against. */ @font-face{font-family:'Big Shoulders Display';src:url(/fonts/bsd-800.woff2?v=1) format('woff2');font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:'Big Shoulders Display';src:url(/fonts/bsd-900.woff2?v=1) format('woff2');font-weight:900;font-style:normal;font-display:swap} @font-face{font-family:'Chakra Petch';src:url(/fonts/chakra-500.woff2?v=1) format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Chakra Petch';src:url(/fonts/chakra-600.woff2?v=1) format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Manrope';src:url(/fonts/manrope-200.woff2?v=1) format('woff2');font-weight:200;font-style:normal;font-display:swap} @font-face{font-family:'Manrope';src:url(/fonts/manrope-300.woff2?v=1) format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Manrope';src:url(/fonts/manrope-400.woff2?v=1) format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Manrope';src:url(/fonts/manrope-500.woff2?v=1) format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'JetBrains Mono';src:url(/fonts/jbmono-400.woff2?v=1) format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'JetBrains Mono';src:url(/fonts/jbmono-500.woff2?v=1) format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Michroma';src:url(/fonts/michroma-400.woff2?v=1) format('woff2');font-weight:400;font-style:normal;font-display:swap} /* ── 2. tokens ───────────────────────────────────────────────── The v2 values, plus the --lum-* names v1 already uses remapped onto them. Anything v1 styled with a token is now v2. */ :root{ /* v2 names */ --ink:#03050b; --ink2:#070c16; --ink3:#0b1020; --line:rgba(122,180,214,.14); --line2:rgba(122,180,214,.28); --cyan:#22e0ff; --cyan-dk:#0b6f88; --amber:#ffa62b; --text:#dde8f2; --muted:#7c8fa5; --dim:#4d5f74; --cut:10px; --cut-lg:16px; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --disp:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif; --tech:'Chakra Petch',ui-sans-serif,system-ui,sans-serif; --body:'Manrope',system-ui,-apple-system,sans-serif; /* v1 names remapped — this is what re-skins the inher ited system */ --lum-bg:var(--ink); --lum-surface:var(--ink2); --lum-surface-2:var(--ink3); --lum-line:var(--line); --lum-line-hi:rgba(34,224,255,.34); --lum-ink:var(--text); --lum-dim:var(--muted); --lum-cyan:var(--cyan); --lum-cyan-dk:#04222a; --lum-amber:var(--amber); --lum-display:var(--disp); --lum-body:var(--body); --lum-cut:var(--cut); } /* ── 3. base ─────────────────────────────────────────────────── Scoped to .lum-v2, which lumen-v2.js sets on as its first act. If the script never runs the page keeps its v1 skin rather than sitting on a half-applied background. */ .lum-v2{background:var(--ink)} .lum-v2 body{ background:var(--ink); color:var(--text); font-family:var(--body); font-weight:300; -webkit-font-smoothing:antialiased; } .lum-v2 ::selection{background:var(--cyan);color:#00131a} .lum-v2 a{text-decoration:none} /* ── upstream chrome, removed ────────────────────────────────── The harvested pages bring their own nav and footer. Both are hidden here rather than by JS setting style/class on them, and the reason is hydration: the footer ships in the static HTML and the nav is client-rendered into #layout-header, so React owns both and a class JS writes onto them can be patched straight back off. Keying the rule on .lum-v2 gets it off those nodes and onto an ancestor instead — but NOT, as first assumed, onto one React leaves alone. Next renders , so the root's class attribute is React's too and hydration strips a class added before it. lumen-v2.js therefore re-applies .lum-v2 from a MutationObserver; if that ever goes away, everything below stops applying and the symptom is the old nav sitting on top of the new one, not an error. The :has(nav) guard is deliberate. A bare [class*="top-0"] also matches ordinary positioned content, and v1 already learned this the expensive way: a broad attribute rule aimed at a carousel took the hero with it. Content blocks do not contain a