/* ==========================================================================
   tokens.css — the design brief, compiled.

   3-dogs-and-a-girl-lincoln-ne — brief.md (approved 2026-08-25), family
   `editorial-modern`, archetype `split-hero` ("the specimen plate"). Values
   cite brief.md §3/§4/§5/§7 unless marked BUILDER FILL — a name the token
   contract or the skeleton's own component set needs that the brief states
   no number for. Fills cite their nearest binding source (tile-b.html, the
   C2-winning artifact this brief expands, or plank-1/plank-4 arithmetic)
   rather than being invented.
   ========================================================================== */

:root {

  /* --- Colour (brief §3.3). Derivation: no real-world brand colour exists to
     echo (dossier §4.5 — brand-echo default has not attached) → local
     character (goldenrod, Nebraska's state flower) → family norms
     (editorial-modern realised warm-paper, ink-forward). goldenrod is
     decorative/fill only on every ground — never text (brief §0, §3.4 rows
     5-6). Contrast table: brief §3.4. */

  --scheme: light;

  --color-bg:          #F7F5EF;  /* paper ground */
  --color-surface:     #EFEBDD;  /* raised plate / card ground */
  --color-ink:         #201D1A;  /* editorial near-black ink */
  --color-ink-muted:   #5A5347;
  --color-accent:      #B8862B;  /* DOMINANT — goldenrod. DECORATIVE/FILL ONLY, never text */
  --color-accent-ink:  #8C5F1A;  /* text-safe amber — links, CTA fill, any real text in the accent hue */
  --color-accent-2:    #2F4A3D;  /* structural green — the semantic anchor's carrier (index numerals, roman numerals, pin-mark) */

  --color-border:      #DED4B8; /* plate/card hairline — decorative, not a text pairing */
  --color-hairline:    #E7DFC9; /* list-row dividers — decorative */

  /* BUILDER FILL: house requires --color-focus; brief gives no dedicated
     value. --color-accent (goldenrod) fails the WCAG 1.4.11 non-text 3:1
     floor itself (2.97:1 / 2.72:1, brief §3.4 rows 5-6), so the focus ring
     cannot use it. --color-accent-ink clears 3:1 against both bg and surface
     (5.12:1 / 4.67:1, rows 7-8) and is already the site's one interactive/
     accent colour (links, CTA fill) — reused here rather than introducing a
     third role. No dark-band focus token: the pull-quote's dark band carries
     no interactive element on this site (brief §3.4, "no interactive element
     sits on the pull-quote's dark band"), so none is needed. */
  --color-focus:          var(--color-accent-ink);
  --color-selection-bg:   var(--color-accent-ink);
  --color-selection-ink:  var(--color-bg);

  /* Hero atmosphere stops (brief §3.3, tile-b.html .hero-atmos). Two stops,
     lightest and darkest, both far above any AA risk (brief §3.4 rows 14-15). */
  --color-atmo-1: #F1E3C4; /* lightest */
  --color-atmo-2: #E7E1CE; /* darkest */

  /* One deliberate mode: light (design-rules §6). */


  /* --- Typography (brief §4). Two families, 4 static woff2 instances —
     design-rules §5's ceiling. OFL 1.1, self-hosted, subset to the house
     declared range (house-tech-spec §8), identical on all four files. No
     font-variation-settings anywhere: static weight instances only (brief
     §4.1), so §8's wght-trap never applies. */

  --font-display: 'Petrona', 'Petrona Fallback', 'Petrona Fallback 2', Georgia, serif;
  --font-body:    'Source Sans 3', 'Source Sans 3 Fallback', Arial, sans-serif;

  --font-weight-body:          400;
  --font-weight-body-strong:   600;
  --font-weight-display:       600; /* Petrona SemiBold — h1, h2, plate label */
  /* Petrona's italic ships as a 400 static instance (brief §4.1: "400 italic
     → Petrona-Italic.woff2"), not a third type role — the pull-quote's
     accent word and the Design Process roman-numeral index both need this
     explicit weight so they don't inherit a heading ancestor's 600 and miss
     the only italic file the site ships. */
  --font-weight-emphasis:      400;

  /* --- Type scale (brief §4.3), computed across its full range there. */

  --text-eyebrow: clamp(0.7rem,  0.6rem + 0.35vw, 0.82rem);
  --text-h1:      clamp(2.1rem,  1.4rem + 3.2vw,  3.9rem);
  --text-h2:      clamp(1.45rem, 1.15rem + 1.4vw, 2.15rem);
  --text-body:    clamp(1rem,    0.94rem + 0.3vw, 1.0625rem);
  --text-small:   clamp(0.85rem, 0.8rem + 0.2vw,  0.95rem);

  /* BUILDER FILL: the skeleton's own header component needs --text-h3 by
     name (site.css .site-header__brand); brief §4.3 names no h3 step. Set
     between the eyebrow ceiling (13.12px) and the h2 floor (23.2px), fluid
     in the same clamp idiom as the rest of the scale, for a wordmark that
     reads as a heading without competing with h2. */
  --text-h3: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);

  --leading-tight: 1.05;
  --leading-snug:  1.3;
  --leading-body:  1.6;

  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.1em;  /* eyebrows — tile-b.html .eyebrow: letter-spacing 0.1em */

  /* --- Space — house scale, unchanged (brief overrides none of it). */

  --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 explicitly. tile-b.html's own root tokens commit to this
     value directly (--space-2xl: 6rem, consumed by .section{padding-block}),
     and the brief's whole system expands that tile rather than redesigning
     it (brief header note, §7.1). */
  --section-gap: var(--space-2xl); /* 96px */

  /* Hero's own top/bottom padding — top value stated directly, brief §8
     plank 1 ("padding-block-start 1.5rem/24px puts the first element at
     y=125"); bottom value is tile-b.html's own hero padding. Not folded
     into --section-gap: the hero is not a `.section` and §7.1 exempts it. */
  --hero-pad-top:    var(--space-md); /* 1.5rem / 24px */
  --hero-pad-bottom: 1.6rem;          /* 25.6px, tile-b.html .hero padding */

  /* Gap between each stacked hero element (tile-b.html .hero-order > * + *
     { margin-top: 0.8rem }) — reproduces brief §8 plank 1's y-position
     table to the pixel, kept at the tile's value rather than rounded. */
  --hero-item-gap: 0.8rem; /* 12.8px */

  /* --- 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;

  /* The specimen-plate field's geometry (brief §5.1, §6, §8 plank 1; tile-b
     .plate-wrap/.plate): a 190px-tall atmosphere field holding a 150×170
     mounted card, centred, unchanged across breakpoints — "a mounted
     card-and-illustration object, not a full-bleed scene" (brief §6 slot 1),
     so its physical size does not grow with the viewport the way a full-
     bleed hero image would. */
  --plate-field-height: 11.875rem; /* 190px */
  --plate-width:         9.375rem; /* 150px */
  --plate-height:       10.625rem; /* 170px */
  --plate-top:           0.625rem; /* 10px — tile-b.html .plate top:10px within the 190px field */
  --plate-pin-height:    1.125rem; /* 18px — tile-b.html .pin line, y1=0 to y1=18 of 170 viewBox, scaled */

  /* The recurring section pin-mark (brief §7.3): "roughly 12×14px". */
  --pinmark-width:  0.75rem;  /* 12px */
  --pinmark-height: 0.875rem; /* 14px */

  /* The hero's one-time rule-draw line (brief §7.3; tile-b.html .rule-draw
     height:2px). */
  --rule-draw-height: 0.125rem; /* 2px */

  /* The bob loop's vertical travel (brief §7.3: "translateY(-8px)"). */
  --plate-bob-lift: 0.5rem; /* 8px */

  /* The narrow measure tile-b.html gives the hero lead line and the
     pull-quote (both `.lead`/`.pull-quote blockquote { max-width: 34ch }`),
     distinct from the house reading measure (--layout-measure, 62ch) used
     everywhere else on the page. Brief §8 plank 1 corroborates the same
     number for the lead line independently ("lead line (assumed 2 lines,
     34ch max-width)"). */
  --measure-narrow: 34ch;

  /* The Owner Credential band's image column width — no brief-stated value;
     kept well under --layout-measure so the illustration reads as a plate
     beside the prose, not a full-width banner. */
  --credential-image-max: 25rem;

  /* The interest-checkbox grid's minimum column width, so 12 options wrap
     into a readable multi-column grid at every width above mobile. */
  --form-check-col-min: 13rem;

  /* The pull-quote's accent word, "pallet" (brief §3.4 row 13 — the one
     dark-mode text pairing on the site, confined to the pull-quote band):
     10.08:1 against --color-ink. Not a role any other element on the site
     uses, so it is its own named token rather than overloading --color-*. */
  --color-pullquote-accent: #E3C589;

  /* --- Radius / shadow / border. tile-b.html uses zero radius and zero
     shadow throughout every rendered element (plate, chips, CTA, pull-quote
     band) — a flat, ink-ruled editorial register, not an unstated gap.
     --radius-none is the legitimate whole-site answer design-rules §4 names. */

  --radius-none: 0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-pill: 999px; /* unused on this site; kept for the house scale's sake */

  --shadow-none: none;
  --shadow-sm:   none;
  --shadow-md:   none;
  --shadow-lg:   none;

  --border-hairline: 1px;
  --border-thick:    3px;
  --border-style:    solid;

  /* --- Motion (brief §7.1, verbatim). */

  --ease-signature:     cubic-bezier(.16, 1, .3, 1);
  --ease-sway:          ease-in-out;
  --ease-standard:      cubic-bezier(0, 0, 0.2, 1);
  --duration-rule-draw: 1100ms;
  --duration-reveal:    500ms;
  --duration-bob:       6400ms;
  --duration-sway:      5100ms;

  /* House reveal-system aliases (base.css consumes these names directly;
     brief §7.2: "fade + rise 8px … --duration-reveal / --ease-standard",
     "staggered 60ms between siblings"). */
  --ease-out:      var(--ease-standard);
  --ease-in-out:   var(--ease-standard);
  --duration-fast: 140ms; /* BUILDER FILL: unchanged house default, button hover only — brief states no value */
  --duration-base: 320ms; /* BUILDER FILL: unchanged house default, declared unused */
  --duration-slow: var(--duration-reveal);

  --reveal-shift:   0.5rem; /* 8px — brief §7.2 */
  --reveal-stagger: 60ms;   /* brief §7.2 */

  /* --- 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).

   Petrona: SIL OFL 1.1, Ana Sanfelippo / Anton Moglia. Source Sans 3: SIL
   OFL 1.1, Paul D. Hunt (licence text: assets/fonts/OFL-Petrona.txt,
   OFL-SourceSans3.txt). Instantiated from the published variable sources at
   the brief's named static coordinates and subset to the house declared
   range identically on all four faces (house-tech-spec §8).

   COVERAGE GAP, recorded not silently shipped (house-tech-spec §8): a
   fontTools cmap read shows both Petrona instances miss U+2011 (non-breaking
   hyphen) from the house range; Source Sans 3 carries it. No copy here
   renders U+2011 (actual non-ASCII use: ©, ·, en/em dash, ellipsis — all
   present), so the census check is unaffected — first pairing of these two
   families under this range, flagged for a house-tech-spec §8 amendment
   rather than narrowed here (a per-site narrowing defeats the range's point).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Petrona';
  src: url('../assets/fonts/Petrona-SemiBold.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;
}

@font-face {
  font-family: 'Petrona';
  src: url('../assets/fonts/Petrona-Italic.woff2') format('woff2');
  font-weight: 400;
  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;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('../assets/fonts/SourceSans3-Regular.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: 'Source Sans 3';
  src: url('../assets/fonts/SourceSans3-SemiBold.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;
}

/* --------------------------------------------------------------------------
   Metrics-matched fallbacks (house-tech-spec §7/§8) — MEASURED via fontTools
   (scripts/font-metrics.mjs). Georgia/Arial aren't installed here; open
   metric twins stand in — Gelasio for Petrona, Liberation Sans for Source
   Sans 3 (`fc-list`). Overrides live inline on each @font-face below.

   QA round 2 CLS FIX (measured, full detail in the commit): (1) 'Petrona
   Fallback' 600 never registers without real Georgia/Gelasio, falling to
   uncalibrated bare `Georgia` — added a DejaVu Serif 2nd tier. (2) Source
   Sans 3's computed size-adjust (94.14%) undershot real width by 3% —
   corrected to 97.10%, ascent/descent re-derived. Both caused wrap-flips
   under font-swap.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Petrona Fallback';
  src: local('Georgia'), local('Gelasio');
  font-weight: 600;
  font-style: normal;
  size-adjust: 101.55%;
  ascent-override: 84.49%;
  descent-override: 26.59%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Petrona Fallback';
  src: local('Georgia Italic'), local('Gelasio Italic');
  font-weight: 400;
  font-style: italic;
  size-adjust: 88.98%;
  ascent-override: 96.43%;
  descent-override: 30.34%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Petrona Fallback 2';
  src: local('DejaVu Serif Bold'), local('DejaVu Serif');
  font-weight: 600;
  font-style: normal;
  size-adjust: 78.76%;
  ascent-override: 108.94%;
  descent-override: 34.28%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Sans 3 Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 400;
  font-style: normal;
  size-adjust: 97.10%;
  ascent-override: 105.46%;
  descent-override: 41.20%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Sans 3 Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 600;
  font-style: normal;
  size-adjust: 93.13%;
  ascent-override: 109.95%;
  descent-override: 42.95%;
  line-gap-override: 0%;
}