/* ============================================================ The Story of America — design tokens Derived from the "Story of America 250" cinematic landing page. Source of truth for palette, type and the motion/density dial. ============================================================ */ :root { /* ---- Palette (verbatim from the 250 reference) ---- */ --black: #060818; --ink: #0d1440; --ink-2: #131c52; --ink-3: #1a246a; --paper: #e8dec5; --paper-warm: #f1e7d2; --paper-dim: #cfc5ac; /* Lifted from #7d7359, which measured 4.23 on black and 3.75 on navy. Eyebrows are 10px mono — normal text, needing 4.5 — so the old value failed AA on both grounds. This clears it at 5.15 / 4.57. */ --paper-mute: #8c8164; /* ---- Red: two roles, one hue family (349deg) ---- The logo's crimson and the 250 page's terracotta turned out to be good at opposite jobs. Measured on 2026-09-02: crimson #C01F3C as text 3.32 on black / 2.94 on navy fails AA as fill white on it 6.00 passes AA terracotta #D44A3A as text 4.58 / 4.06 marginal as fill white on it 4.34 fails AA So --red is the brand fill (buttons, badges, the logo — the job the crimson was drawn for) and --red-text is a lighter tint of the same hue for type, which clears AA on both dark grounds. Never set `color` to --red; never set a background to --red-text. */ --red: #c01f3c; /* fills only — white on it 6.00 */ /* Text sitting ON the accent fill. The fill is the same crimson in both themes, so this must NOT flip with the theme — using a paper token here put near-black on crimson in the light theme, measuring 3.32. */ --on-accent: #ffffff; /* 6.00 on --red, 9.90 on --red-deep */ --red-deep: #841529; /* hover/pressed fill — white on it 9.90 */ --red-text: #cb6275; /* type only — 5.25 on black, 4.65 on navy */ --brass: #c89a4b; --line: rgba(232, 222, 197, 0.10); --line-strong: rgba(232, 222, 197, 0.22); /* ---- Semantic aliases ---- Sections reference these, never the raw palette above, so a theme only has to re-point the aliases. --ground is the page; --surface is a raised card; --ink is primary text. In the dark theme ink is paper-coloured and the ground is near-black; the light theme swaps that relationship. */ --ground: var(--black); --surface: var(--ink); --ink-text: var(--paper); --ink-dim: var(--paper-dim); --ink-mute: var(--paper-mute); --accent-type: var(--red-text); --rule: var(--brass); /* ---- Scrims ---- Full-bleed photographic sections darken (or lighten) the image so the overlaid copy is legible. These are the only place a raw rgba() belongs, because they must match the ground exactly. */ --scrim-rgb: 6, 8, 24; --scrim-heavy: 0.94; --scrim-mid: 0.72; --scrim-soft: 0.30; /* Photographs need less help in the dark theme than in the light one. */ --photo-dim: 1; --grain-opacity: 0.08; /* ---- Type ---- */ --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif; --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Fluid display scale. Utility pages redeclare --display itself (see body.tier-utility) — overriding a --display-max here would not work. */ --step--1: clamp(13px, 0.78vw + 11px, 14px); --step-0: clamp(16px, 0.25vw + 15px, 17px); --step-1: clamp(19px, 0.6vw + 17px, 22px); --step-2: clamp(24px, 1.2vw + 20px, 32px); --step-3: clamp(30px, 2.4vw + 22px, 48px); --step-4: clamp(38px, 4.5vw + 22px, 76px); --display: clamp(48px, 9vw + 8px, 148px); /* Mono eyebrow — the reference's most repeated signature */ --eyebrow-size: 10px; --eyebrow-track: 0.34em; /* ---- Layout ---- */ --wrap: 1480px; --wrap-text: 68ch; /* utility/legal pages: measure, not width */ --gutter: clamp(24px, 5vw, 64px); /* ============================================================ THE INTENSITY DIAL Three numbers control how cinematic the site feels. 1 = full film treatment (the 250 reference). 0 = flat and calm. Change these to tone the whole site down; sections read them rather than hard-coding motion, so nothing needs rewriting. ============================================================ */ --motion-parallax: 1; /* depth: parallax travel + hero drift */ --motion-reveal: 1; /* entrance: reveal distance + duration */ --density: 1; /* breathing room: vertical section padding */ /* Derived from the dial — do not set these directly */ --reveal-shift: calc(28px * var(--motion-reveal)); --reveal-dur: calc(1.4s * var(--motion-reveal) + 0.25s); --section-pad: calc(clamp(96px, 12vh, 180px) * var(--density)); --ease-cine: cubic-bezier(0.22, 1, 0.36, 1); } /* ============================================================ LIGHT THEME Set data-theme="light" on . Every value here was measured, not guessed — see the table below. The brand's own navy becomes the ink and its warm paper becomes the ground, so it reads as the same brand in daylight rather than as a different site. role hex on ground on surface primary text #0d1440 15.78 14.32 secondary text #3a4066 8.93 8.10 mute (10-11px) #6b6550 5.22 4.74 red as type #a5162f 6.82 6.19 brass as type #7d5d26 5.42 4.92 white on red fill #ffffff 6.00 (fill is unchanged across themes) The brass had to darken a long way: #c89a4b measures 2.71 on this ground and fails outright, so the light theme uses a much deeper tone at the same hue. ============================================================ */ :root[data-theme="light"] { --black: #f7f2e6; --ink: #efe7d5; --ink-2: #e6dcc6; --ink-3: #dcd0b6; --paper: #0d1440; --paper-warm: #060818; --paper-dim: #3a4066; --paper-mute: #6b6550; --red: #c01f3c; --red-deep: #841529; --red-text: #a5162f; --brass: #7d5d26; --line: rgba(13, 20, 64, 0.12); --line-strong: rgba(13, 20, 64, 0.24); --scrim-rgb: 247, 242, 230; /* Photographs are mostly mid-to-dark, so a light scrim has to work harder than a dark one to carry dark text, and the image itself is dimmed. */ --scrim-heavy: 0.95; --scrim-mid: 0.86; --scrim-soft: 0.55; --photo-dim: 0.82; --grain-opacity: 0.035; } /* Utility, legal and support pages: same brand, quieter register. Set via . */ body.tier-utility { --motion-parallax: 0; --motion-reveal: 0.45; --density: 0.55; /* Redeclare --display itself, NOT --display-max. A custom property's var() references resolve against the element where the property is DECLARED — :root here — so overriding --display-max further down the tree has no effect on --display at all. Setting --display-max alone left every utility page's h1 at 123px instead of the intended 64px. */ --display: clamp(38px, 3.4vw + 16px, 64px); } /* Respect the OS accessibility setting. This is not a style choice. */ @media (prefers-reduced-motion: reduce) { :root { --motion-parallax: 0; --motion-reveal: 0; --reveal-dur: 0.01s; } }