/* ========================================================================== SPARSKEY DESIGN SYSTEM — v2 Ported verbatim from prototype/tokens.css (the approved design system). See docs/VISUAL-SYSTEM.md §10 for the component inventory, §11 for the layer order: tokens -> reset -> base type -> layout -> components -> page overrides -> responsive. This file is layers 1-6; page overrides and the site-chrome integration live in site.css and load after it. Scoped under .sk — put the class on . Nothing here leaks out of it. Deltas against the prototype file, and only these: - .sk-hero--full no longer reads --hero-h; that variable was injected by the prototype harness, which rewrote vh units per preview frame. The measured comp height is the value in production. Kept on purpose: - .sk-assume, the visible assumption marker. It stays until the OPEN items close, so unconfirmed copy is visible rather than silently true. - container-type on .sk, which every @container query below depends on. ========================================================================== */ .sk { /* ---------- GROUND ---------- */ --ink: #101820; /* dark ground: hero, process band, footer */ --ink-soft: #16202A; /* raised surface on dark */ --canvas: #F3EFE8; /* warm gallery canvas — default light ground */ --paper: #F7F4EE; /* light half of a split band, slightly lifted */ --canvas-sink: #EAE5DC; /* CTA bands, filter rails, image wells */ /* ---------- TEXT ---------- */ --text: #15191E; /* 15.4:1 on canvas */ --muted: #6B6D6A; /* 4.6:1 on canvas — passes, but only just */ --on-dark: #EDE9E2; /* 14.8:1 on ink */ --on-dark-muted: rgb(237 233 226 / .64); /* ---------- BRONZE — THREE ROLES, NOT ONE ---------- The comps use one bronze on both grounds. On the light canvas that value measures 2.83:1, which fails as text — and the comps do set links in it. Split into three roles so the look survives and the text passes. */ --accent-dark: #C0A57E; /* text ON INK — 7.6:1 ✓ */ --accent-line: #A98A5C; /* rules, borders, non-text marks only */ --accent-text: #7E6238; /* text ON CANVAS — 5.0:1 ✓ */ --accent-fill: #B9A17C; /* hero button fill; carries --ink text at 7.2:1 */ --accent-fill-hv: #A88E68; /* ---------- LINES ---------- */ --line: rgb(20 25 30 / .14); --line-strong: rgb(20 25 30 / .26); --line-dark: rgb(237 233 226 / .16); /* ---------- STATUS ---------- */ --success: #41624C; --warning: #7E5F27; --danger: #923D36; /* ---------- OVERLAY ---------- Three layers, each with one job: a top band so navigation stays legible over a busy mural, a left wedge giving the headline a controlled zone, and the bottom lift for metadata. The right third stays near-untouched. */ --scrim: linear-gradient(to bottom, rgb(16 24 32 / .56) 0%, rgb(16 24 32 / .14) 17%, transparent 32%), linear-gradient(to right, rgb(16 24 32 / .74) 0%, rgb(16 24 32 / .48) 32%, rgb(16 24 32 / .10) 64%, transparent 88%), linear-gradient(to top, rgb(16 24 32 / .78) 0%, rgb(16 24 32 / .34) 30%, transparent 62%); --scrim-soft: linear-gradient(to top, rgb(16 24 32 / .84) 0%, rgb(16 24 32 / .58) 34%, rgb(16 24 32 / .22) 66%, transparent 100%); /* ---------- TYPE ---------- The hero device is an ITALIC bronze final word, so the display face must have a true italic. Playfair Display is the closest free match with one. */ --f-display: 'Playfair Display', 'Newsreader', Georgia, 'Times New Roman', serif; --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --f-script: 'Caveat', 'Segoe Script', cursive; /* exactly one line, once */ /* cqw, NOT vw. `.sk` is a container, and vw resolves against the real browser window rather than the 390/1440 frame — a 390px frame inside a 1700px window rendered the hero at 96px, which is what pushed text over itself on mobile. Custom properties substitute lazily, so cqw resolves at the point of use, in descendants of .sk — which is exactly the box we want to measure. */ --t-hero: clamp(2.35rem, 6.6cqw, 6rem); /* ≈96px @1440, ≈38px @390 */ --t-h1: clamp(1.95rem, 4.4cqw, 4rem); --t-h2: clamp(1.6rem, 3.2cqw, 3rem); --t-h3: clamp(1.2rem, 2cqw, 2rem); --t-lg: 1.1875rem; --t-body: 1.0625rem; --t-sm: 0.9375rem; --t-xs: 0.8125rem; --t-label: 0.6875rem; /* eyebrow floor: 11px, not 10 */ /* ---------- SPACE (4px scale) ---------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px; --s12:220px; /* ---------- LAYOUT ---------- */ --container: 1520px; --gutter: clamp(20px, 4cqw, 64px); --radius: 0; /* the comps use 0 everywhere */ --ease: cubic-bezier(.22, 1, .36, 1); container-type: inline-size; container-name: screen; background: var(--canvas); color: var(--text); font-family: var(--f-body); font-size: var(--t-body); line-height: 1.65; -webkit-font-smoothing: antialiased; } /* ---------- base ---------- THE WHOLE RESET SITS IN :where() ON PURPOSE. Written as `.sk img { … }` the reset scores (0,1,1) and outranks every component class at (0,1,0). That silently broke three things before it was caught: link-buttons lost their label colour, hero images ignored object-fit, and split panels lost their vertical rhythm. A reset must never outrank a component, so :where() drops it to (0,0,1). */ :where(.sk) *, :where(.sk) *::before, :where(.sk) *::after { box-sizing: border-box; } :where(.sk) :is(h1,h2,h3,h4,p,figure,ul,ol,dl,dd) { margin: 0; } :where(.sk) :is(ul,ol) { padding: 0; list-style: none; } :where(.sk) img { display: block; max-width: 100%; height: auto; } /* Every image ships as