/* ============================================================ Agency. — design tokens THE ONLY PLACE these values are defined. Never hard-code a hex or a font stack in a section file (CLAUDE.md §3). Changing this file needs one other founder's approval. ============================================================ */ :root{ /* ---- colour · the UI palette ---- */ --cream: #FFFCF1; /* the default ground — the brand book's cream (was named --paper until 10 Sep 2026) */ --paper: #F7EFE2; /* the brand book's paper, the warmer off-white — a second neutral, unused so far */ --ink: #221E16; /* near-black. default type */ --coral: #FF6A57; /* the accent. the full stop in "Agency." */ --cobalt: #5D8CD8; /* the blue line in the hero, the Who We Are ground — the brand book's value (was #5B8AD9 until 10 Sep 2026) */ --beige: #D1C8AD; /* the stats numbers */ --gum: #F799AE; /* Problem 01 ground */ --acid: #E9FF2E; /* Problem 02 / 03 accent */ --moss: #4A6042; /* the stats ground */ /* The five glyph colours are NOT here on purpose. They are baked into the glyph SVGs and are a separate, locked set (§3). */ /* ---- type ---- */ /* Served by the Adobe Fonts web project (kit mmq3eot), loaded in the by tools/assemble.py. The lowercase names are the kit's own CSS families — they must come first so the kit wins. Archivo / Archivo Black remain behind them as the fallback if the kit fails. Deliberately NOT listed: "RL Aqva" and "Forma DJR Display", the names of the synced .otf files in "02. Fonts/". Those are local Adobe sync cuts. Naming them here would let a founder's installed copy resolve and silently mask a broken kit during QA. Weights the kit serves (re-verified against the live kit CSS, 19 Sep 2026 — use.typekit.net/mmq3eot.css): rl-aqva 900 forma-djr-display 400, 500, 600, 700 (+ italics) forma-djr-deck 400, 500, 600, 700 (+ italics) space-mono 400, 700 (+ italics) 500 is the one the sections lean on — most rules set font-weight:500 on --deck / --deck-display, per the §3 scale ("Section headline | deck, 500"). It was added to the web project on 25 Aug 2026; before that those rules silently rendered at 400. If headlines ever look light again, check the kit still carries Medium before touching any weight here. Correction, 19 Sep 2026: an earlier version of this comment said the kit did not yet serve forma-djr-deck. That was wrong by the time it was written — the kit's own last_published timestamp is 25 Aug 2026, the same day Deck landed. Every --deck rule on the site has been rendering in the real Deck cut since then, not the Display fallback. */ --display: "rl-aqva", "Archivo Black", Impact, sans-serif; --deck: "forma-djr-deck", "forma-djr-display", "Archivo", system-ui, sans-serif; /* ---- Forma DJR optical sizes (19 Sep 2026, revised) ---- DJR draws Forma DJR as five separate optical-size cuts, each tuned for a reading-size window (djr.com/forma), in this order by size: Banner 96px+ Display 48–96px Deck 19–48px — --deck above; the site's general-purpose cut Text 15–19px Micro 11–15px --deck alone was covering all of it — 12px captions through 85px numerals — which is why some small copy and some big headlines read off. These add the other four. Applied by hand, per rule, against each rule's rendered size at the 1440×900 board (§3) — not by media query — since the choice is about the text's reading role, not a live breakpoint. Tie-break rule, for any rule that sits within about a pixel of one of the boundaries above (there will be more of these as clamp() ranges get retuned): pick the SMALLER cut, i.e. the one with more space between letters. Every optical-size family opens up its spacing as the sizes get smaller, to stay legible at reading distance, and tightens it back up as sizes grow, since large type doesn't need the air and reads better without it. So the smaller neighbour is always the "more spacing" side of any boundary, and defaulting to it is the safer miss — it costs a little air at a size that could have taken the tighter cut, instead of a headline or a line of body copy rendering in a cut drawn for the wrong reading distance. Two rules use this today: 11-agencies.css `.lead h2` and wwa-04-fluency.css `h2` both settle at 49px on the 1440×900 board — 1px into Display's range — and both stay on --deck rather than move to --deck-display. Fallback order matters: each cut below tries its TRUE neighbour first (Micro → Text → Deck, Banner → Display → Deck), not a straight jump to Deck, so a kit that has Text live but not Micro still renders Micro-range copy in the closer cut rather than skipping past it. --deck-text and --deck-banner reference kit family names that follow the kit's own forma-djr-deck / forma-djr-display convention. Update, 21 Sep 2026: Fred added all three (confirmed against the live use.typekit.net/mmq3eot.css — every family name here matches what the kit actually serves, no code change needed; that's the whole point of naming them ahead of time). See tools/set-fonts-kit.py if the kit ID here is ever out of date. Check WEIGHTS as well as family, not just whether a cut is live — forma-djr-text and forma-djr-micro shipped Regular and Bold only at first (400/700, no 500), confirmed by canvas-measuring rendered glyph width at 400 vs 500 on forma-djr-text: identical. Same failure mode Deck hit before its Medium was added (§12 #2's history), and it broke a real, documented design choice: wwa-06-partners.css `.card .nm .role` is weight 500 specifically so it reads apart from `.bio` right under it at 400 ("the role above stays Medium" — its own comment). Fixed same-day, 21 Sep 2026 — Fred re-added both cuts with Medium included; re-verified against a cache-busted fetch of the kit CSS (document.fonts still reports the browser's own cached copy after a kit update, so check a fresh fetch, not just a page reload) and a canvas width comparison showing three genuinely distinct widths at 400/500/700. No CSS changes were needed — it self-corrected, as designed. If a similar gap ever shows up again on a future cut, this is the check to run. Check the §3 mobile floor too, not just the desktop clamp: a rule's `@media (max-width:760px)` block usually only overrides font-size, so it silently inherits whatever cut the desktop rule set — and a 72px desktop headline (Display) is often a 30-44px phone headline (Deck's range, not Display's). Six rules hit exactly this on 19 Sep 2026 — every --deck-display headline needed an explicit font-family:var(--deck) added inside its own mobile block. Re-run the same check on any rule this file's optical-size tokens touch. */ --deck-banner: "forma-djr-banner", "forma-djr-display", "forma-djr-deck", "Archivo", system-ui, sans-serif; --deck-display: "forma-djr-display", "forma-djr-deck", "Archivo", system-ui, sans-serif; --deck-text: "forma-djr-text", "forma-djr-deck", "Archivo", system-ui, sans-serif; --deck-micro: "forma-djr-micro", "forma-djr-text", "forma-djr-deck", "Archivo", system-ui, sans-serif; --mono: "space-mono", "Space Mono", ui-monospace, monospace; /* ---- spacing ---- */ --m: clamp(24px, calc(7.2381vw - 4.23px), 100px); /* governs every left and right page edge. brand book (10 Sep 2026): 24 at the 390 phone, 100 at 1440 — a straight line between the two, so phones don't move (was clamp(24px, 6.2vw, 92px): 89 at 1440). One value, every edge. */ }