/* ========================================================================== WE KNOW A WAY. DESIGN TOKENS Single source of truth. Nothing elsewhere hardcodes a colour, size or space. ========================================================================== */ /* -------------------------------------------------------------------------- TYPEFACES Libre Franklin : display and body. Franklin Gothic lineage, editorial. IBM Plex Mono : labels, indices, stage numbers, data. The information design voice of the site. Self hosted, 96 KB total, no third party requests. -------------------------------------------------------------------------- */ @font-face { font-family: 'Libre Franklin'; src: url('../fonts/librefranklin-var-latin.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Libre Franklin'; src: url('../fonts/librefranklin-var-latin-ext.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plex Mono'; src: url('../fonts/plexmono-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plex Mono'; src: url('../fonts/plexmono-400-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plex Mono'; src: url('../fonts/plexmono-500-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---------- COLOUR ------------------------------------------------------ Two surfaces only, paper and ink. One accent. Measured: ink on paper 15.9:1, slate on paper 5.8:1, signal on paper 4.7:1, signal-i on ink 5.6:1. ---------------------------------------------------------------------- */ --w-paper: #F1F2F0; --w-ink: #111418; --w-slate: #585F66; --w-signal: #C4381F; /* on paper */ --w-signal-i: #E8654A; /* on ink */ --w-line: rgba(17, 20, 24, 0.14); --w-line-i: rgba(241, 242, 240, 0.18); --w-slate-i: rgba(241, 242, 240, 0.66); --w-field: rgba(17, 20, 24, 0.34); /* the field marks */ --w-field-i: rgba(241, 242, 240, 0.30); /* Per surface aliases. Components read only these. */ --surface-bg: var(--w-paper); --surface-fg: var(--w-ink); --surface-mute: var(--w-slate); --surface-line: var(--w-line); --surface-signal: var(--w-signal); --surface-field: var(--w-field); /* ---------- TYPE -------------------------------------------------------- */ --w-font: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif; --w-mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --w-t-display: clamp(2.5rem, 6.6vw, 6.5rem); --w-t-h1: clamp(1.875rem, 4.2vw, 3.5rem); --w-t-h2: clamp(1.5rem, 2.7vw, 2.375rem); --w-t-h3: clamp(1.125rem, 1.45vw, 1.4375rem); --w-t-lead: clamp(1.0625rem, 1.4vw, 1.3125rem); --w-t-body: clamp(1rem, 0.9vw, 1.0625rem); --w-t-small: 0.875rem; --w-t-label: 0.75rem; --w-lh-display: 1.0; --w-lh-tight: 1.08; --w-lh-head: 1.16; --w-lh-lead: 1.45; --w-lh-body: 1.62; --w-tr-display: -0.028em; --w-tr-head: -0.02em; --w-tr-label: 0.11em; --w-w-light: 300; --w-w-book: 400; --w-w-med: 500; --w-w-semi: 600; --w-measure: 68ch; /* ---------- SPACE ------------------------------------------------------- */ --w-s-3xs: 4px; --w-s-2xs: 8px; --w-s-xs: 12px; --w-s-sm: 16px; --w-s-md: 24px; --w-s-lg: 32px; --w-s-xl: 48px; --w-s-2xl: 64px; --w-s-3xl: 96px; /* Compaction pass, 2026-08-18. Space separates ideas; it no longer isolates every statement. Desktop lands near 92px, tablet near 68, mobile near 48, and nothing exceeds 120 without a visible reason. */ --w-section: clamp(48px, 5.2vw, 92px); --w-section-tight: clamp(34px, 3.6vw, 64px); --w-section-airy: clamp(60px, 6.6vw, 120px); /* ---------- LAYOUT ------------------------------------------------------ */ --w-margin: clamp(20px, 5.6vw, 112px); --w-max: 1520px; --w-gutter: clamp(18px, 2vw, 32px); --w-header: clamp(64px, 5.8vw, 84px); /* ---------- LINE AND RADIUS --------------------------------------------- */ --w-hair: 1px; --w-radius: 0; /* ---------- MOTION ------------------------------------------------------ One signature behaviour: the route draws. Nothing uses a second style. ---------------------------------------------------------------------- */ --w-d-fast: 160ms; --w-d-base: 320ms; --w-d-slow: 620ms; --w-d-draw: 1600ms; --w-e-out: cubic-bezier(.16, 1, .3, 1); --w-e-std: cubic-bezier(.2, .6, .2, 1); --w-move: 14px; --w-z-header: 300; --w-z-menu: 200; } /* ---------- SURFACES ------------------------------------------------------ */ [data-surface="paper"] { --surface-bg: var(--w-paper); --surface-fg: var(--w-ink); --surface-mute: var(--w-slate); --surface-line: var(--w-line); --surface-signal: var(--w-signal); --surface-field: var(--w-field); } [data-surface="ink"] { --surface-bg: var(--w-ink); --surface-fg: var(--w-paper); --surface-mute: var(--w-slate-i); --surface-line: var(--w-line-i); --surface-signal: var(--w-signal-i); --surface-field: var(--w-field-i); }