/* ───────────────────────────────────────────────────────────
   FENCED.CA — DARK × INDUSTRIAL hybrid
   Recipe: dark-custom palette + industrial typography.

   Load order (required):
     1. tokens.css           — base palette + noise overlay (KEEP)
     2. styles.css           — base layout
     3. dark-industrial.css  — THIS FILE
     4. (optional) dark-custom.css if mounting under .dc shell

   What this file does:
     • Swaps display + mono fonts to industrial workwear set
       (Archivo Narrow, IBM Plex Mono). Inter stays for body.
     • Strips italic-serif heading accents (no Instrument Serif).
     • Forces hero-sub / scene-h2 / pillar-h1 / aud-h to
       condensed uppercase.
     • Tightens the H2 clamp so uppercase doesn't eat the page.
     • KEEPS dark ink palette, KEEPS brass CTAs (NOT safety
       orange), KEEPS tokens.css noise overlay (NOT the
       industrial blueprint-grid).
   ─────────────────────────────────────────────────────────── */

:root {
  /* ─── Type: industrial workwear ──────────────────────── */
  --font-display:  "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
  --font-editorial:"Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
  --font-body:     "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* TIGHTER H2 — uppercase Archivo Narrow eats vertical space */
  --t-h2: clamp(34px, 4vw, 56px);
}

/* ─── hero ──────────────────────────────────────────────── */
.hero-mark {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.005em !important;
}

.hero-sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(16px, 1.8vw, 22px);
}
.hero-sub em {
  font-style: normal;
  color: var(--brass);
  font-weight: 700;
}

/* ─── ALL display headings: condensed uppercase, no italic serif ── */
.scene-h2,
.pillar-h1,
.pillar-h2,
.aud-h,
.trust-h2,
.qm-title,
.promise h3,
.install-steps h3,
.coat-meta h3,
.region-card h3,
.mh-pillar-hero h1,
.mh-pillar-sec h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.04;
}

/* Kill italic-serif accents on em inside headings — recolour to brass instead */
.scene-h2 em,
.pillar-h1 em,
.pillar-h2 em,
.hero-sub em,
.aud-h em,
.trust-h2 em,
.mh-pillar-hero h1 em,
.mh-sub em {
  font-family: inherit;
  font-style: normal;
  color: var(--brass);
  font-weight: 800;
}

/* ─── eyebrows, stats, meta — mono ─────────────────────── */
.eyebrow,
.tk-h-tag,
.tk-sw-h,
.tk-sw-h2,
.spec-l,
.qm-pill-s,
.cmp-row .cmp-h,
.pillar-crumbs,
.faq-tog {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* ─── navigation, footer marks ─────────────────────────── */
.nav-mark,
.footer-brand .ft-mark,
.pillar-here,
.pillar-toc ul,
.qm-pill-l {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─── spec rows / data values use display, not mono, so the
        numbers line up tight under the headings ─────────── */
.spec-v { font-family: var(--font-display); font-weight: 500; }

/* ─── selection — brass on ink (already set in tokens.css,
        repeated here for clarity) ───────────────────────── */
::selection { background: var(--brass); color: var(--ink); }