/* ============================================================================ FONT TOKENS — drives the pixel / readable switch ---------------------------------------------------------------------------- Every font-size in home.css / article.css / guide.css is written as font-size: calc( * var(--display-scale)); using --display-scale for text set in the display face and --body-scale for text set in the body/mono face. In pixel mode both scales are exactly 1, so the pages render identically to the original hand-written HTML. Readable mode only has to change the two families and the two scale factors. Why two scales, and why these numbers (measured, not guessed): VT323 at 20px has an x-height of only 8px, where a system sans at 20px has 10.44px. So the original body text reads like a normal font at ~15px — below a comfortable size for long-form text. Matching that apparent size would keep readable mode just as small, so --body-scale deliberately overshoots: 0.95 gives 19px sans (x-height 9.9px), roughly 24% more apparent size than the pixel original. Press Start 2P is a pixel face whose cap height equals its font-size exactly (10px caps at 10px), while the sans manages 0.705 of that. Headings therefore need 1/0.705 = 1.42 just to look the same height. Its glyphs are also 1.68x as wide, so at 1.42 the sans still sets narrower than the original and nothing re-wraps. --font-brand never switches: the "GO AGENTIC" wordmark and the guide hero title stay pixel art in both modes. ========================================================================== */ :root { /* ---- The two pixel faces. These never switch; they are what "pixel mode" means, and they are reused to pin individual regions (see footer). ---- */ --font-brand: "Press Start 2P", monospace; --font-body-pixel: "VT323", monospace; /* VT323's x-height is only 0.40 em, so the original 20px body read like a normal font at ~15px. 1.15 lifts it to 23px (~17.6px apparent) while keeping the pixel face. Set this back to 1 to get the original sizes exactly. */ --pixel-body-scale: 1.15; /* ---- Pixel mode (default) ---- */ --font-display: var(--font-brand); --font-body: var(--font-body-pixel); --font-mono: var(--font-body-pixel); --display-scale: 1; --body-scale: var(--pixel-body-scale); } /* The footer stays pixel art in both modes. Re-declaring the tokens on