/* BREAKBONE SHELL, the V5 consistency + per-issue token layer (23 Jul 2026, Opus-instance). Loaded AFTER breakbone.css on every carried content page so the ~24 longreads, editorials, interviews, reviews and feature pages wear the SAME design system as the seven React pages, ending the two-design-system split that made the site read vibecoded. How it works, in one line: it re-skins the warm-brown V3 palette to the V5 neutral ink world, restyles the nav and footer chrome to match the React HudNav/PageShell, and exposes a small PER-ISSUE token set (accent, grain, masthead) so every issue page is visually distinct off ONE shared shell rather than a bespoke rebuild. Approach 1 of WEBSITE_PERISSUE_BRAINSTORM_23JUL.md for the archive, plus a bespoke flagship hero (approach 3) on part-1. Brand note for his later adjustment: the per-issue accents are read as risograph spot inks (the classic photocopier-zine device), so the "one red held" law is not broken; the brand red #ff0f0f still owns the STORE pill and the bill bands. Dial any accent back by editing its [data-issue] block below. */ /* ---- 1. RE-SKIN THE PALETTE TO THE V5 INK WORLD ---------------------------- breakbone.css ships a warm-brown paper world (--paper #211d18, --ink #ece4d4). The React pages use a neutral near-black (--ink #0d0d0d, --bone #e8e4dc). We override the V3 token VALUES here so all 24 pages match the React pages with a single file. Names stay V3 (--paper* = surfaces, --ink = type) to avoid touching 40KB of downstream rules. */ :root { --paper-deep: #0d0d0d; /* page ground, == V5 --ink */ --paper: #141414; /* sheet surface */ --paper-bright: #1b1b1b; /* bright sheet */ --ink: #e8e4dc; /* body type, == V5 --bone */ --ink-soft: #9e9b96; /* furniture type, neutralised off the warm #b3a996 tan (25 Jul) */ --red: #ff0f0f; /* brand red, unchanged */ --red-deep: #9e1015; /* the V5 modular type furniture, made available to the shell chrome so the nav and footer measure identically to the React pages */ --fs-1: clamp(12px, 0.85vw, 13px); --fs-2: clamp(15px, 1.2vw, 16px); --fs-3: clamp(19px, 2vw, 22px); --shell-mono: 'IBM Plex Mono', 'Courier New', monospace; /* DEFAULT per-issue token set (brand red). Each [data-issue] block overrides. */ --issue-accent: #ff0f0f; --issue-grain: 0.5; --issue-mast-ls: -0.05em; } /* the neutral wall: strip the warm radial paste-stains, keep a cool grain wash */ body.wall { background: radial-gradient(900px 480px at 15% 4%, rgba(255,255,255,.05), transparent 60%), radial-gradient(700px 520px at 88% 30%, rgba(232,228,220,.04), transparent 55%), var(--paper-deep) !important; } .grain { opacity: var(--issue-grain) !important; } /* ---- 2. THE SHARED NAV, matched to the React HudNav ------------------------ The migration script replaces the old inline nav with