/* ============================================================ SUM — design tokens Authoritative: DESIGN.md. Lane is institutional modernism — bone paper, engraved brass, crimson reserved for the conversion drench. Nothing here is decorative. Authored in OKLCH. Never #000 or #fff; every neutral is warmed toward the brand hue so the paper reads as paper. ============================================================ */ :root { /* ---- Surfaces ---- */ --paper: oklch(95.8% 0.011 85); /* dominant, warm bone */ --paper-deep: oklch(92.4% 0.025 84); /* alternating band — official merch cream */ --paper-edge: oklch(88.5% 0.030 82); /* inset panels, inputs */ /* ---- Ink ---- */ --ink: oklch(19.5% 0.014 25); /* primary text; also the dark sections */ --ink-deep: oklch(13.5% 0.014 25); /* dark ground shade: footer plinth + fall. Completes the deep set: paper-deep, crimson-deep, ink-deep. */ --ink-2: oklch(40% 0.013 25); /* secondary */ --ink-3: oklch(55% 0.011 30); /* meta, captions, labels */ --rule: oklch(83% 0.020 80); /* hairlines on paper */ /* ---- Brand ---- */ --crimson: oklch(43% 0.168 21); /* the drench */ --crimson-deep: oklch(30% 0.130 22); /* drench floor */ --gold: oklch(82% 0.155 78); /* CTA fill, marks on dark */ --brass: oklch(64% 0.098 76); /* engraved rules + marks on paper */ /* ---- The marks (device #3, see DESIGN.md) ---- Greek ornament as COLOURLESS masks, painted with surface tokens via `background` + `mask-image` — the .mark-phoenix mechanism. Masks read alpha, so the fills inside the URIs are arbitrary. The large marks are FILLED silhouettes — the seal's material — never line work: wire at architectural scale reads as a logo, not a watermark. One construction grammar for all three: compass semicircles and right angles on an 8-unit rhythm, figure and ground in equal measure (band 4, groove 4). --orn-key is the small REPEATING meander tile: one crisp micro-band only (the 404 break; its second placement died with the exit-intent overlay, Aug 2026). The --frame-* temple masks that framed the calendar's next event are GONE (retired Aug 2026, owner's call): once the ledger gained date plates and flagship grounds the frame over-decorated the row, and the emphasis moved to colour — the crimson docket row in calendar.css. Do not reintroduce a drawn frame there. --mark-fret a carved meander tablet -> crimson banners --mark-volute a filled spiral band -> cream bands --mark-wave a crest frieze tile -> footer horizon; the one mark that repeats, because a frieze is a band, and the footer's own mask-repeat tiles it */ --orn-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7'%3E%3Cpath d='M0 6H8M0 6V0H6V4H2V2H4' fill='none' stroke='%23000' stroke-width='0.9' stroke-linecap='square'/%3E%3C/svg%3E"); --mark-fret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cmask id='g'%3E%3Crect width='64' height='64' fill='%23fff'/%3E%3Cpath d='M6 64V6H58V58H14V14H50V50H22V22H42V42H30' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='square'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='64' height='64' mask='url(%23g)'/%3E%3C/svg%3E"); --mark-volute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M64 32A30 30 0 0 0 4 32A26 26 0 0 1 56 32A22 22 0 0 0 12 32A18 18 0 0 1 48 32A14 14 0 0 0 20 32A10 10 0 0 1 40 32L36 32A6 6 0 0 0 24 32A10 10 0 0 1 44 32A14 14 0 0 0 16 32A18 18 0 0 1 52 32A22 22 0 0 0 8 32A26 26 0 0 1 60 32H64Z'/%3E%3C/svg%3E"); --mark-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M47 15A14 14 0 0 0 19 15A10 10 0 0 1 39 15A6 6 0 0 0 27 15L31 15A2 2 0 0 1 35 15A6 6 0 0 0 23 15A10 10 0 0 1 43 15H47Z'/%3E%3Crect y='24' width='64' height='8'/%3E%3C/svg%3E"); /* ---- On dark / on crimson ---- */ --on-dark: oklch(96% 0.014 85); --on-dark-2: oklch(78% 0.020 80); --on-crimson: oklch(96% 0.014 85); --on-crimson-2: oklch(85% 0.032 78); --rule-dark: oklch(100% 0 0 / 0.16); /* CTA: gold always carries ink, never white */ --cta-bg: var(--gold); --cta-fg: var(--ink); /* ---- Type ---- Archivo: American grotesque with a real width axis (62–125). Set wide + heavy it reads carved-stone and stadium at once. Spectral: screen-drawn serif, gives the reading warmth. Neither has Greek glyphs — ΣYM is ALWAYS the wordmark SVG, never text. The serif fallback is a safety net only. */ --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Spectral', Georgia, 'Times New Roman', serif; /* Width axis presets for the display face */ --wide: 118%; --wider: 125%; /* ---- Scale (ratio >= 1.3 between heading steps) ---- */ --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: 1.0625rem; --t-lg: 1.1875rem; --t-xl: clamp(1.5rem, 1.24rem + 1.15vw, 2.1rem); --t-2xl: clamp(2rem, 1.48rem + 2.3vw, 3.2rem); /* Sized by the longest unbreakable word in the copy ("entrepreneurship") at 390px, not by taste — and by RENDER, not arithmetic. The trap: at 390px the FLUID term governs (the old 1.45rem + 3.6vw = 37.2px), so lowering the clamp floor changed nothing; the wide-stretch face needs ~31px to keep the word whole in a 350px column. The slope below lands 31.6px at 390px and ~78px at 1440px, within 3px of the old desktop sizes. */ --t-3xl: clamp(1.9rem, 0.9rem + 4.4vw, 5.4rem); --t-hero: clamp(2.8rem, 1.20rem + 7.2vw, 8.4rem); /* ---- Space ---- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.875rem; --s-4: 1.5rem; --s-5: 2.5rem; --s-6: 4rem; --s-7: 6.5rem; --section-y: clamp(5rem, 9vw, 11rem); /* ---- Grid ---- */ --measure: 68ch; --page: 1440px; --gutter: clamp(1.25rem, 4vw, 4.5rem); --header-h: 76px; /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart */ --fast: 200ms; --base: 480ms; --slow: 760ms; --focus: 0 0 0 2px var(--paper), 0 0 0 4.5px var(--crimson); --focus-dark: 0 0 0 2px var(--ink), 0 0 0 4.5px var(--gold); }