/* type-bold.css — the "modern · bold · no-nonsense" typographic voice for gf.cx
 *
 * A drop-in second voice for the portfolio. Where the default surface voice is
 * warm + editorial (Atkinson Hyperlegible + Newsreader serif-italic accent),
 * type-bold is flat, confident, product-grade — made for client-handoff and
 * spec surfaces (project.gf) that should read like a modern product, not a
 * letterpress page.
 *
 * Hosted at: https://assets.gf.cx/type-bold/type-bold.css
 *
 * Distilled from two references Dan flagged for project.gf (type/structure
 * only — no branded content copied; see README "Provenance"):
 *   · mwshvacservices.com/hrv-vs-erv-ontario  → Outfit display, 1.125 modular
 *     scale, tight heading line-heights, UPPERCASE letter-spaced micro-labels.
 *   · briewolfson.com                         → Inter body, generous measure,
 *     editorial numbered sections + tabular numerals.
 *
 * Typefaces: Outfit (display) + Inter (text) — BOTH SIL Open Font License.
 * Load them yourself (this file sets no @font-face — it only names the stacks):
 *
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800;900&display=swap" rel="stylesheet">
 *   <link rel="stylesheet" href="https://assets.gf.cx/type-bold/type-bold.css">
 *
 * Load this AFTER page-header.css so the token overrides win — page-header,
 * cards, status-pill etc. then inherit the bold voice with no further changes.
 *
 * Two ways to adopt:
 *   1. Whole-surface voice  — just add the link. :root token overrides +
 *      element rules below restyle the entire page.
 *   2. Scoped pocket        — add class="type-bold" on a wrapper to apply the
 *      voice to one region only (everything is also mirrored under .type-bold).
 *
 * v0.1.0 · 2026-10-13
 */

/* ── Type tokens + modular scale (1.125 "major second", honest to the MWS
 *    reference). Base step 0 = 1rem = the host's root font-size. ──────────── */
:root,
.type-bold {
  /* Stacks. --display carries headings/accents; --sans carries body/UI. */
  --tb-display: 'Outfit', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tb-text:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Repoint the portfolio's shared voice tokens at this voice, so every shelf
     that reads --sans / --serif (page-header, cards, status-pill…) follows.
     In this voice there is no serif: the accent slot becomes the heavy
     display face, not a Newsreader italic. */
  --sans:  var(--tb-text);
  --serif: var(--tb-display);

  /* 1.125 modular scale */
  --tb-step--2: 0.790rem;
  --tb-step--1: 0.889rem;
  --tb-step-0:  1rem;
  --tb-step-1:  1.125rem;
  --tb-step-2:  1.266rem;
  --tb-step-3:  1.424rem;
  --tb-step-4:  1.602rem;
  --tb-step-5:  1.802rem;
  --tb-step-6:  2.027rem;
  --tb-step-7:  2.281rem;
  --tb-step-8:  2.566rem;

  /* Fluid hero: small-screen floor → large-screen ceiling */
  --tb-hero: clamp(2.027rem, 1.4rem + 3.1vw, 3.25rem);

  --tb-lh-tight: 1.06;   /* display */
  --tb-lh-head:  1.14;   /* sub-heads */
  --tb-lh-body:  1.62;   /* Inter reads well a touch looser */
  --tb-ls-tight: -0.021em;
  --tb-ls-label: 0.12em;
}

/* ── Body + element rules. Mirrored at :root scope and under .type-bold so
 *    either adoption path works. The selector list stays flat on purpose. ── */
:root body,
.type-bold {
  font-family: var(--tb-text);
  font-size: var(--tb-step-0);
  line-height: var(--tb-lh-body);
  font-feature-settings: 'cv05' 1, 'ss01' 1; /* Inter: open 'a'/'g', nicer 'l' */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Outfit, heavy, tight. */
.type-bold h1, .type-bold h2, .type-bold h3, .type-bold h4,
body h1, body h2, body h3, body h4 {
  font-family: var(--tb-display);
  font-style: normal;
  letter-spacing: var(--tb-ls-tight);
  text-wrap: balance;
}
.type-bold h1, body h1 {
  font-size: var(--tb-hero);
  font-weight: 800;
  line-height: var(--tb-lh-tight);
}
.type-bold h2, body h2 {
  font-size: var(--tb-step-4);
  font-weight: 700;
  line-height: var(--tb-lh-head);
  letter-spacing: -0.016em;
}
.type-bold h3, body h3 {
  font-size: var(--tb-step-2);
  font-weight: 700;
  line-height: var(--tb-lh-head);
  letter-spacing: -0.01em;
}
.type-bold h4, body h4 {
  font-size: var(--tb-step-1);
  font-weight: 600;
  line-height: var(--tb-lh-head);
  letter-spacing: 0;
}

/* Accent word inside a heading — in this voice it is heavier + coloured,
 * NOT a serif italic. Overrides page-header.css's `em` treatment. */
.type-bold h1 em, .type-bold h2 em, .type-bold h3 em,
body h1 em, body h2 em, body h3 em {
  font-family: var(--tb-display);
  font-style: normal;
  font-weight: 900;
  color: var(--accent, currentColor);
}

/* Eyebrow / micro-label — the MWS uppercase, letter-spaced kicker. */
.type-bold .eyebrow, .eyebrow.type-bold,
.type-bold .t-label, .t-label {
  font-family: var(--tb-display);
  font-size: var(--tb-step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tb-ls-label);
  color: var(--ink-soft, #5a544d);
  line-height: 1.2;
}

/* Lede — one size up, lighter colour, still Inter. */
.type-bold .lede, .lede.type-bold {
  font-family: var(--tb-text);
  font-size: var(--tb-step-1);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft, #5a544d);
  letter-spacing: -0.003em;
}

/* Body copy */
.type-bold p, body p { max-width: 68ch; }
.type-bold strong, body strong { font-weight: 700; }
.type-bold small, body small { font-size: var(--tb-step--1); }

/* Editorial tabular numerals (Brie's numbered sections / data columns). */
.type-bold .t-num, .t-num,
.type-bold table, .type-bold .tabular {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Numbered-section counter — opt-in editorial rail (Brie reference). Put it
 * on an <ol class="t-steps"> and each <li> gets a heavy Outfit index. */
.type-bold .t-steps, ol.t-steps { list-style: none; counter-reset: tb; padding: 0; }
.type-bold .t-steps > li, ol.t-steps > li {
  counter-increment: tb; position: relative;
  padding-left: 3.2rem; margin: 0 0 1.4rem;
}
.type-bold .t-steps > li::before, ol.t-steps > li::before {
  content: counter(tb, decimal-leading-zero);
  position: absolute; left: 0; top: 0.05em;
  font-family: var(--tb-display); font-weight: 900;
  font-size: var(--tb-step-2); color: var(--accent, currentColor);
  font-feature-settings: 'tnum' 1; letter-spacing: 0;
}

/* Mono (code / IDs) left to the host's --mono; nothing clobbered here. */