/* tokens.css — the design brief, compiled. HKY Services, Hickory NC. Source: brief.md (approved C3 2026-09-16), family editorial-modern, archetype editorial-stack. Every value below is the brief's — nothing improvised (house-tech-spec §3). */ :root { /* --- Colour — brief §2 ------------------------------------------------- Derivation: dossier §4.5 confirms no real-world colour to echo; no brand_color recorded; accent argued directly from playbook §6.1's own named utility accent ("the orange of a pencil or a cordless drill"). */ --scheme: light; --color-bg: #F7F4EE; /* paper-white ground */ --color-surface: #EDE8DD; /* card ground — raised panels only */ --color-ink: #1C1B19; /* body + heading text */ --color-ink-muted: #5B5650; /* secondary text */ --color-accent: #B34D14; /* pencil-orange — playbook §6.1's own named utility accent */ --color-accent-ink: #FFFFFF; --color-border: #DDD8D0; /* decorative hairlines — the index rules */ --color-border-strong: #8C857A; /* control boundaries, >=3:1 vs bg AND surface */ --color-focus: #B34D14; /* :focus-visible ring — 4.79:1 vs bg, 3:1 control floor vs surface, brief §2 */ /* No dark band anywhere on this site (single light editorial ground throughout), so --color-focus-on-band is not declared — an unused token is noise (tokens.css house comment). */ --color-selection-bg: #B34D14; --color-selection-ink: #FFFFFF; /* BINDING (brief §2): accent-coloured TEXT never sits on --color-surface (4.31:1, below the 4.5:1 body floor) — only on --color-bg (4.79:1) or as accent-ink white on an opaque accent fill (5.26:1). site.css honours this at every call site; there is no token for the forbidden pairing because none exists to reach for. */ /* --- Typography — brief §3 --------------------------------------------- Prata (display, single 400 weight, no italic master — the H1's italic accent word is browser-synthesized oblique, deliberate per brief §3) / Work Sans (body, 400/600). Both subset to the house declared safe range (house-tech-spec §8), unicode-range identical on every face below. */ --font-display: 'Prata', 'Prata Fallback', 'Prata Fallback 2', Georgia, serif; --font-body: 'Work Sans', 'Work Sans Fallback', Arial, sans-serif; --font-weight-body: 400; --font-weight-body-strong: 600; --font-weight-display: 400; /* Prata ships one static weight — do not request 700 */ /* font-variation-settings is NOT used by either face (brief §3: neither ships as a variable font at the weights this brief loads) — the wght-vs-font-weight trap (house-tech-spec §8) has no call site here. */ /* --- Type scale — brief §3, computed at every declared breakpoint (375/640/768/1024/1440) in the brief's own table. */ --text-hero: clamp(2.2rem, 1.5rem + 3.8vw, 4.1rem); --text-h2: clamp(1.4rem, 1.2rem + 1.2vw, 2rem); --text-h3: clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem); --text-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); --text-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --text-small: 0.85rem; /* fixed — same value at every breakpoint by construction */ --text-eyebrow: 0.76rem; /* fixed — same value at every breakpoint by construction */ --leading-tight: 1.06; --leading-snug: 1.3; --leading-body: 1.6; --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.11em; /* eyebrows */ /* --- Space -------------------------------------------------------------- House scale, unmodified. */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; /* Inter-section rhythm — brief §4.1: 64px, fixed at every breakpoint, because the hero's own internal rhythm already carries generous space and a 96px gap on top of it would read empty rather than calm at 375. */ --section-gap: var(--space-xl); /* --- Layout -------------------------------------------------------------- */ --layout-container: 72rem; --layout-measure: 62ch; --layout-gutter: clamp(1.25rem, 5vw, 3rem); --layout-tap-min: 44px; --hero-title-measure: 16ch; /* hero H1 line-wrap width, brief §4.4's own two-line placeholder case */ /* Living-hero field geometry (brief §4.3/§4.4) */ --field-numeral-col: 1.75rem; /* the "01"–"08" numeral column width, every breakpoint */ --field-row-gap: 0; /* rows are hairline-separated, not gapped */ --hero-columns-lg: 1fr 1fr; /* >=64em two-column split, brief §4.4 */ --panel-media-col: 22rem; /* right-column field width at >=64em */ /* Sticky header — structural size the brief fixes (design-rules §7.2 rule 3 precedent: a deterministic block-size, not a function of content or the nav-toggle's post-JS reveal). Brief §4.4 target: <=56px at <64em, <=72px at >=64em. */ --bar-height: 3.5rem; /* 56px */ --bar-height-lg: 4.5rem; /* 72px */ /* --- Radius / shadow / border ------------------------------------------- editorial-modern, near-zero radius throughout (tile-c precedent): the one legitimate answer for a magazine-rule register. No --shadow-* group: nothing on this site casts a drop shadow, separation is hairlines. */ --radius-none: 0; --radius-sm: 2px; --radius-pill: 999px; --border-hairline: 1px; --border-thick: 3px; --border-style: solid; /* --- Motion — brief §6: unmodified house defaults, no override argued. -- */ --duration-fast: 140ms; --duration-base: 320ms; --duration-slow: 640ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --reveal-shift: 1.25rem; --reveal-stagger: 90ms; /* Two independently-looping hand-tool satellites (brief §4.3, §6) — slow, non-synchronised. No specific duration is named in the brief beyond "slow" and "independent"; these two values satisfy both (coprime-ish, so the pair never resynchronises inside a visit) and sit inside the range the cited living-hero reference (ref-001) itself uses. */ --orbit-pencil: 17s; --orbit-level: 23s; --drift-sm: 0.375rem; /* --- Z layers ------------------------------------------------------------ */ --z-base: 0; --z-header: 100; --z-nav-panel: 200; --z-skip-link: 300; } /* Brief §6: motion tokens collapse at their source under reduced motion; base.css already collapses --duration-* and --reveal-shift. This site's own orbit tokens are stopped the same way, at matching specificity, so satellites freeze in place with no !important (house-tech-spec §12). */ @media (prefers-reduced-motion: reduce) { :root { --drift-sm: 0; } } /* -------------------------------------------------------------------------- @font-face — two families, three static files (Prata 400, Work Sans 400, Work Sans 600), all SIL OFL 1.1 (assets/fonts/OFL-Prata.txt, OFL-WorkSans.txt). Subset to the HOUSE declared safe range (house-tech-spec §8), unicode-range identical on every face. No CDN, self-hosted only. Metrics-matched fallbacks first (house-tech-spec §7/§8), MEASURED with fontTools against the real shipped woff2 files (post-subset), never guessed. Method: size-adjust/ascent-override/descent-override/ line-gap-override, standard Fontaine formula. PRATA gets TWO fallback tiers, same precedent as the pipeline's first serif build (auto-evolution-north-logan-ut): Georgia is the correct donor for most real traffic (Windows/macOS/iOS all ship it) but is not an inspectable open file, so it is measured against Gelasio (Georgia's open metric twin) and tried first via 'Prata Fallback'; 'Prata Fallback 2', measured directly against DejaVu Serif, covers environments without Georgia (verified with `fc-match Georgia` -> DejaVu Serif in this build/QA environment). WORK SANS needs one tier: Liberation Sans is this environment's actual `local('Arial')` resolution target, verified the same way. -------------------------------------------------------------- */ @font-face { font-family: 'Prata Fallback'; src: local('Georgia'), local('Gelasio'); size-adjust: 108.43%; ascent-override: 91.58%; descent-override: 33.39%; line-gap-override: 0%; } @font-face { font-family: 'Prata Fallback 2'; src: local('DejaVu Serif'); size-adjust: 92.91%; ascent-override: 106.87%; descent-override: 38.96%; line-gap-override: 0%; } @font-face { font-family: 'Work Sans Fallback'; src: local('Arial'), local('Liberation Sans'); font-weight: 400; size-adjust: 113.41%; ascent-override: 82%; descent-override: 21.43%; line-gap-override: 0%; } @font-face { font-family: 'Work Sans Fallback'; src: local('Arial'), local('Liberation Sans'); font-weight: 600; size-adjust: 113.25%; ascent-override: 82.12%; descent-override: 21.46%; line-gap-override: 0%; } @font-face { font-family: 'Prata'; src: url('../assets/fonts/prata-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033; } @font-face { font-family: 'Work Sans'; src: url('../assets/fonts/work-sans-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033; } @font-face { font-family: 'Work Sans'; src: url('../assets/fonts/work-sans-600-latin.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033; }