/* ========================================================================== tokens.css — the design brief, compiled. valley-landscape-spokane-newman-lake-wa — brief.md (approved 2026-08-25), family `editorial-modern`, archetype `sidebar-anchor` ("The Season Line"). Values cite brief.md §3 (palette), §4 (type), §5 (layout), §7 (motion) unless marked BUILDER FILL — a name the token contract or this brief's own component set requires that the brief states no number for. Fills cite their nearest binding source (tile-a.html, the C2-winning artifact this brief was built from, or a plank-1/plank-4 arithmetic requirement) rather than being invented. ========================================================================== */ :root { /* --- Colour (brief §3.3). Derivation: dossier §4.5 has no real-world brand colour (an unstyled template — provenance ground 4 and stronger) → local character (basalt outcrop / steppe sky / harvest-wheat gold) → family norms (editorial-modern pushed cool/ink-forward, not warm-neutral). The semantic anchor (green/growth) is carried by imagery, not hue (playbook §6.1a-2) — --color-moss stays sparing. Contrast in brief §3.4's table. */ --scheme: light; --color-bg: #F6F1E7; /* parchment — page ground */ --color-surface: #EDE4D2; /* deeper parchment — raised plate */ --color-ink: #221F1C; --color-ink-muted: #5C574E; --color-accent: #26313D; /* DOMINANT — basalt, hsl(211.3°, 23.2%, 19.4%) */ --color-accent-ink: #FFFFFF; --color-wheat: #8A6118; /* secondary — LARGE-TEXT / DECORATIVE ONLY on --color-surface (brief §3.4 row 9) */ --color-moss: #4B6B45; /* semantic anchor's carrier, sparing use only */ --color-border: #C9C1AE; /* field/plate hairline — decorative, not a text pairing */ --color-border-muted: #D8D2C4; /* rail/section hairlines — decorative */ --color-hairline: #E4DFD1; /* list-row dividers — decorative */ /* BUILDER FILL: house requires --color-focus; brief gives no value. Set to accent (house default pattern) — 11.75:1 vs bg, 10.47:1 vs surface, both past the 3:1 floor. No dark band exists outside the preview expiry bar (scopes its own ring in css/preview.css), so no *-on-band token. */ --color-focus: var(--color-accent); --color-selection-bg: var(--color-accent); --color-selection-ink: var(--color-accent-ink); /* Hero atmosphere stops (brief §3.3). Two stops only — no midpoint stated. */ --color-atmo-1: #F6F1E7; /* = bg, L 0.8829 */ --color-atmo-3: #EDE4D2; /* = surface, L 0.7815 */ /* --- Typography (brief §4). Two families, 3 static woff2 instances — design-rules §5's ≤4-file ceiling. OFL 1.1, self-hosted, subset to the house declared range (house-tech-spec §8), identical on all three files. No font-variation-settings anywhere: static weight instances only (brief §4.1), so §8's wght-trap never applies. */ --font-display: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', Arial, sans-serif; --font-body: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', Arial, sans-serif; --font-emphasis: 'Petrona', 'Petrona Fallback', Georgia, serif; --font-weight-display: 700; /* Bold — h1, h2, primary CTA label */ --font-weight-body: 500; /* Medium — paragraphs, nav, rail labels */ --font-weight-body-strong: 700; /* reuses the Bold file already shipped */ --font-weight-emphasis: 500; /* Petrona Italic Medium — the accent word */ /* --- Type scale (brief §4.3), computed across its full range there. */ --text-display: clamp(2.0rem, 1.3rem + 3.0vw, 3.9rem); /* h1 */ --text-h2: clamp(1.375rem, 1.10rem + 1.17vw, 2.25rem); /* section headings */ --text-lead: clamp(1.0625rem,1.0rem + 0.27vw, 1.375rem); /* hero/lead paragraphs */ --text-body: 1rem; /* fixed: 16px at every width */ --text-eyebrow: 0.75rem; /* fixed: 12px at every width */ --text-micro: 0.6875rem; /* fixed: 11px at every width */ /* BUILDER FILL: the skeleton's own component set needs --text-h3/ --text-small by name; brief §4.3 names neither. --text-h3 matches the winning tile's wordmark size (tile-a.html: ".mark{font-size:14px}"); --text-small follows sibling-run convention (moores-landscaping- knoxville-tn), one fixed step below body for labels/hints/footer. */ --text-h3: 0.875rem; /* 14px — site-header brand mark */ --text-small: 0.9375rem; /* 15px — labels, hints, footer, nav links */ --leading-tight: 1.05; /* display — h1, h2 */ --leading-snug: 1.3; /* eyebrows, labels, buttons */ --leading-body: 1.6; /* running body copy */ /* BUILDER FILL: tracking. Brief §4 states no letter-spacing number; tile-a.html is the nearest binding precedent: eyebrows/kickers/labels at .16em (its dominant repeated value), h1/h2 at -0.01em, neutral elsewhere. No em-relative-to-glyph-metrics length exists here (brief §4.2 — plain tracking, never a metric-relative offset). */ --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.16em; /* --- Space — house scale, unchanged. */ --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; /* BUILDER FILL: design-rules §7.1's one --section-gap token; brief §5 names no step. tile-a.html's own root tokens already commit to this exact value, and the brief's whole system is built from that tile. */ --section-gap: var(--space-xl); /* 64px, fixed at every breakpoint */ /* --- Layout. House defaults, unchanged — brief §5 overrides none of them. */ --layout-container: 72rem; --layout-measure: 62ch; --layout-gutter: clamp(1.25rem, 5vw, 3rem); --layout-tap-min: 44px; /* BUILDER FILL: brief §8 plank 1's fold arithmetic is written against a fixed 56px header ("sticky chrome = 101px: 44px bar + 56px header + 1px border"). Named so .site-header sets height directly rather than from padding + content, keeping the arithmetic stable against future copy. */ --header-height: 3.5rem; /* 56px */ /* Brief §5.1: the season rail's sticky `top` is the measured height of whatever sticky chrome is present (expiry bar + header, or header alone once sold). --expiry-height lives only in css/preview.css; the `0px` fallback makes this self-adjusting at purchase with no edit — once preview.css is gone the calc collapses to header + border alone. In preview it resolves to 44 + 56 + 1 = 101px, matching plank 1. */ --sticky-offset: calc(var(--expiry-height, 0px) + var(--header-height) + var(--border-hairline)); /* --- Radius. No brief-stated geometry rule; tile-a.html uses the house --radius-sm (2px) step throughout and nothing larger, so it is reused. */ --radius-none: 0; --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-pill: 999px; --shadow-none: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --border-hairline: 1px; --border-thick: 3px; --border-style: solid; /* Brief §5.3's headrule geometry, given as literal numbers there ("a 2px accent bar"; plank 4: "2px + 14×6px") — named so site.css never repeats them as bare literals. */ --headrule-height: 0.125rem; /* 2px */ --tick-width: 0.875rem; /* 14px */ --tick-height: 0.375rem; /* 6px */ /* --- Motion (brief §7.1, verbatim). --duration-slow/--reveal-shift/ --reveal-stagger/--ease-out are the house reveal system's own names (base.css), set FROM the brief's stated reveal behaviour (§7.2: "fade + rise 8px … --duration-reveal / --ease-standard", "staggered 60ms"). */ --ease-signature: cubic-bezier(.22, .7, .2, 1); --ease-standard: cubic-bezier(0, 0, 0.2, 1); --duration-signature: 1400ms; --duration-reveal: 500ms; --duration-drift-1: 14s; --duration-drift-2: 19s; --duration-drift-3: 24s; /* House reveal-system aliases (base.css consumes these names directly). */ --ease-out: var(--ease-standard); --ease-in-out: var(--ease-standard); --duration-fast: 140ms; /* BUILDER FILL: unchanged house default, button hover only */ --duration-base: 320ms; /* BUILDER FILL: unchanged house default, declared unused */ --duration-slow: var(--duration-reveal); --reveal-shift: 0.5rem; /* 8px — brief §7.2: "fade + rise 8px" */ --reveal-stagger: 60ms; /* brief §7.2: "staggered 60ms between siblings" */ /* Living-hero dial + droplets — brief §5.3/§7.3 geometry, expressed as percentages of the field's own box, so nothing here is a fixed px position. */ --dial-sweep-start: -95deg; --dial-sweep-end: 40deg; /* the Summer tick — matches the Season Index's default-open tab, copy.md §3 */ /* BUILDER FILL: brief §7.3 gives duration/easing but no drift distance — a small atmospheric jitter, scaled from the tile's own ~6-10px drift into one reusable token rather than three literal distances. */ --drift-amplitude: 0.5rem; /* 8px */ /* Brief §5.3's stated minimums, named so site.css never repeats them as bare literals: the hero field's own floor (280px), the season rail's per-tab floor below 48em (70px), the label-only accessible floor before the strip wraps to 2×2 (11.5px), and the 48–64em fixed rail column width (180px, brief §5.1). */ --hero-field-min: 17.5rem; /* 280px */ --tab-min-width: 4.375rem; /* 70px */ --text-tab-floor: 0.71875rem; /* 11.5px */ --rail-column-width: 11.25rem; /* 180px */ /* --- Z layers — house scale, unchanged. */ --z-base: 0; --z-header: 100; --z-nav-panel: 200; --z-skip-link: 300; } /* -------------------------------------------------------------------------- @font-face — self-hosted woff2, latin subset, static instances only (brief §4.1 sidesteps the font-variation-settings/wght trap entirely). Bricolage Grotesque: SIL OFL 1.1, Mathieu Triay / Ilya Ruderman. Petrona: SIL OFL 1.1, Ana Sanfelippo / Anton Moglia. Licence text is Google Fonts' published OFL for each family. Instantiated from the published variable sources at the named static coordinates (wght 500/700, opsz 14 — Google's own static-instance optical size) and subset to the house declared range identically on all three faces (house-tech-spec §8). Coverage checked against the shipped files: the range's hyphen/dash and feet/inches marks are present in both families; nothing in this brief's copy uses characters outside Latin-1 plus the em/en dash and curly apostrophe. -------------------------------------------------------------------------- */ @font-face { font-family: 'Bricolage Grotesque'; src: url('../assets/fonts/BricolageGrotesque-Medium.woff2') format('woff2'); font-weight: 500; 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: 'Bricolage Grotesque'; src: url('../assets/fonts/BricolageGrotesque-Bold.woff2') format('woff2'); font-weight: 700; 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: 'Petrona'; src: url('../assets/fonts/Petrona-Italic-Medium.woff2') format('woff2'); font-weight: 500; font-style: italic; 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; } /* --- Metrics-matched fallbacks (house-tech-spec §8). Donors: Arial / Arial Bold (both Bricolage instances — matching the stack's own sans-serif tail rather than flashing a serif during swap), Georgia Italic (Petrona Italic — the stack's own serif tail). size-adjust / ascent-override / descent-override / line-gap-override computed from the real shipped instances' own OS/2 + hhea metrics (fontTools, USE_TYPO_METRICS set on all three) against @capsizecss/metrics' published reference data, via the fontaine algorithm house-tech-spec.md §7.1's worked example cites: sizeAdjust = (target.xAvgWidth/target.unitsPerEm) / (donor.xAvgWidth/donor.unitsPerEm); each override = target metric / (target.unitsPerEm × sizeAdjust). Measured inputs: BricolageGrotesque-Medium upm 1000 xAvg 518 asc 930 desc -270 gap 0 BricolageGrotesque-Bold upm 1000 xAvg 539 asc 930 desc -270 gap 0 Petrona-Italic-Medium upm 1000 xAvg 478 asc 858 desc -270 gap 0 Arial (regular) upm 2048 xAvg 913 Arial Bold upm 2048 xAvg 983 Georgia Italic upm 2048 xAvg 931 -------------------------------------------------------------------------- */ @font-face { font-family: 'Bricolage Grotesque Fallback'; src: local('Arial'); font-weight: 500; font-style: normal; size-adjust: 116.20%; ascent-override: 80.04%; descent-override: 23.24%; line-gap-override: 0%; } @font-face { font-family: 'Bricolage Grotesque Fallback'; src: local('Arial Bold'), local('Arial'); font-weight: 700; font-style: normal; size-adjust: 112.30%; ascent-override: 82.82%; descent-override: 24.04%; line-gap-override: 0%; } @font-face { font-family: 'Petrona Fallback'; src: local('Georgia Italic'), local('Georgia'); font-weight: 500; font-style: italic; size-adjust: 105.15%; ascent-override: 81.60%; descent-override: 25.68%; line-gap-override: 0%; }