/* ═══════════════════════════════════════════════════════════════════════════ SPECIMEN — colour and type. No layout lives here. NINE COLOURS, not 131. Bone paper, a warmer paper for bands, an off-white card, three inks (near-black, text, muted), one hairline, and one accent in two steps. Pure #000 and pure #FFF appear nowhere. Measured WCAG 2.2 contrast, computed rather than assumed: ink on bg 17.77 on surface 15.99 on card 18.39 body on bg 11.00 on surface 9.90 on card 11.39 muted on bg 5.72 on surface 5.14 on card 5.92 accent-dark on bg 7.43 on surface 6.68 on card 7.69 on-accent on accent 5.61 bg on ink 17.77 (the dark proof band) dim on ink 9.03 (bg mixed 70% into ink, the band's note text) Lowest text pair on the site: 5.14 : 1. TWO TYPEFACES, plus a monospaced specification layer drawn from the same superfamily as the text face — the one signature move. Fraunces carries the display voice (high contrast, WONK on, real optical sizing); IBM Plex Sans is the workhorse; IBM Plex Mono sets every index, label and figure, which is what makes the page read as a specification rather than a brochure. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── ink and paper ─────────────────────────────────────────────────────── */ --ink:#141210; /* near-black, warmed — never #000 */ --body:#3E3831; --muted:#6A6256; --line:#DDD6C9; /* hairline only, never text */ --bg:#FBF9F5; /* bone paper — never #FFF */ --surface:#F1EDE4; /* the deeper paper, for banded sections */ --card:#FFFDF9; /* ── one accent, on well under 5% of the surface ───────────────────────── */ --accent:#B23A16; --accent-dark:#94300F; --on-accent:#FFF6F1; /* ── type ──────────────────────────────────────────────────────────────── */ --font-head:Fraunces,Georgia,'Times New Roman',serif; --font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace; --font-num:var(--font-mono); --head-weight:500; --head-lead:1.06; --head-track:-0.018em; --lead:1.62; /* Display step. max/min = 4.95/2.55 = 1.94, comfortably inside the 2.5 that WCAG 1.4.4 needs at 500% zoom. Against a 1.13rem body at full width this is a 4.38:1 display-to-body ratio — the 3.8–4.4 the premium tier clusters in. */ --step-6:clamp(2.55rem,1.62rem + 4.35vw,4.95rem); /* Print sets no radius, and neither does this. Every corner on the site is square, including the form fields the shared stylesheet already squares — mismatched radii are the most reliable "assembled from a kit" tell there is. */ --radius:0; --btn-radius:0; } /* ── the display voice ──────────────────────────────────────────────────── Fraunces has real optical sizing. Small headings get a low opsz so the thins stay printable; the two display sizes get a high one so the contrast opens up. WONK is on throughout — it is the face's own character and the only thing on the page that could be called decorative. */ h1,h2,h3,h4{font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 18} /* Leading tightens as size grows and opens as it shrinks. 1.06 is right for a 79px headline and wrong for a 17px one, where the two lines of a wrapped question all but touch on a phone. */ h3,h4{--head-weight:600;--head-track:-0.008em;--head-lead:1.24} .qa-row h2{--head-lead:1.24} .offer h2,.offer h3{--head-lead:1.12} .row h2{--head-lead:1.14} h1,.big,.phead h1,.hero h1{font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120; --head-weight:400} .pull blockquote p{font-family:var(--font-head);font-weight:400; font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 96;letter-spacing:-0.015em} /* ── the specification layer ────────────────────────────────────────────── Everything a specification sheet would set in a fixed pitch: the section index, the section label, every key in a spec list, and every figure. Tabular, lining, and never bolder than 400 — the weight difference is done with size and colour instead, which is what keeps it looking measured. */ .idx,.sec-label,.fig,.step-n,.qa-n,.spec-n,.offer-n,.price-lab, .spec .k,.masthead,.req,.stats .lab,.foot-brand,.row .n,.card .n{ font-family:var(--font-mono);font-weight:400; font-variant-numeric:tabular-nums lining-nums; font-feature-settings:'tnum' 1,'lnum' 1} /* One exception, and it is a considered one: the PRICE is set in the display serif, not the fixed pitch. A measurement wants to look like an instrument read it; a price wants to look like a person wrote it down. It is also the only figure on the site with a thousands separator, and a monospaced comma sits marooned in its own cell — "$1 , 500" — which no amount of tracking repairs. */ .price .fig{font-family:var(--font-head);font-weight:400;letter-spacing:-0.025em; font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120; font-variant-numeric:lining-nums} .sec-label,.stats .lab,.price-lab,.req{letter-spacing:.08em;text-transform:uppercase} .idx,.step-n,.qa-n,.spec-n,.offer-n{letter-spacing:.02em} .fig{letter-spacing:-0.03em} .spec .k{letter-spacing:.005em} .foot-brand{letter-spacing:.14em;text-transform:uppercase} /* The brand and the phone number in the header are the two things a visitor looks for first, so they get the two voices of the site: the serif for the name, the fixed pitch for the number. */ .brand{font-family:var(--font-head);font-weight:500;letter-spacing:-0.02em; font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 36} .call,.hero-tel a{font-family:var(--font-mono);font-weight:400; font-variant-numeric:tabular-nums lining-nums} /* Body text: hyphenation off, better wrapping, real quotes. */ p{text-wrap:pretty} .hero-sub,.lede,.intro-body p{text-wrap:pretty} ::selection{background:var(--accent);color:var(--on-accent)} /* A designed print sheet, because a fixed-price page gets printed and taken to whoever signs the cheque. Colour drops out; the structure survives. */ @media print{ :root{--bg:#FFFFFF;--surface:#FFFFFF;--card:#FFFFFF;--ink:#000000; --body:#1A1A1A;--muted:#3A3A3A;--line:#999999; --accent:#000000;--accent-dark:#000000;--on-accent:#FFFFFF} }