/* ============================================================================
   Steadycase — type system
   Adopted 2026-07-27. Zilla Slab display · Archivo body · IBM Plex Mono labels.

   Palette is NOT touched by this file. Every colour on every page still comes
   from the existing tokens in redesign.css / styles.css. There is not one hex
   value below.

   WHY A SEPARATE STYLESHEET, and why this is not another redesign-chrome.css:
   that file is a scoped override band-aid patching one tier's chrome to look
   like another's. This is a type layer that every page loads on equal terms —
   one place where the type system lives, so rolling it out to a new page is
   adding a <link>, not editing that page's style block. Load it AFTER the
   page's inline <style> so equal-specificity rules win by source order.

   Fonts are self-hosted (assets/fonts/). No Google Fonts request anywhere.
   All three families are OFL 1.1; the licence text ships beside each family.
   ========================================================================= */

/* ---------- 1 · Faces ---------- */

@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/zilla-slab/zilla-slab-v12-latin-500.woff2') format('woff2')}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/zilla-slab/zilla-slab-v12-latin-600.woff2') format('woff2')}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/zilla-slab/zilla-slab-v12-latin-700.woff2') format('woff2')}

@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/archivo/archivo-v25-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/archivo/archivo-v25-latin-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/archivo/archivo-v25-latin-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/archivo/archivo-v25-latin-700.woff2') format('woff2')}
/* 800 is loaded on purpose: ~120 selectors site-wide still request it. They
   render as REAL Archivo 800 rather than a synthesized fake bold, which is what
   makes a page-by-page rollout safe instead of all-or-nothing. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/archivo/archivo-v25-latin-800.woff2') format('woff2')}

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-mono/ibm-plex-mono-v20-latin-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-mono/ibm-plex-mono-v20-latin-600.woff2') format('woff2')}

:root{
  --font-display:'Zilla Slab',Georgia,'Times New Roman',serif;
  --font-body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-label:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- 2 · Body ---------- */
body{font-family:var(--font-body)}

/* ---------- 3 · Display ----------
   Zilla Slab tops out at 700; nothing below may request 800. Grouped across all
   pages so the system lives in one place rather than in ten style blocks. */
h1,h2,h3,
.h2,
.hm-hero h1,
.fieldguide-card h2,
.ab-h2,.ab-who-card-title,
.cm-h2,.cm-decision-q,.cm-fast-title,.cm-format-name,
.cp-cat-name,.cp-cau-title,
.cu-file-name,.cu-tab-name,
.dv-detail-title,.dv-files-name,.dv-related-title,.dv-work-name,.dv-work-title,
.fn-compass-h2,.fn-covers-h3,.fn-files-name,.fn-who-h2,.fn-works-h2,.fn-works-name,
.fq-h2,.fq-bigq-q,.fq-prod-q,
.hm-does-title,.hm-files-name,.hm-format-title,.hm-product-name,.hm-system-name,.hm-tab-name,
.hw-step-title,
.pe-h2,.pe-box-t,.pe-does-t,.pe-ed-name,.pe-faq-q,.pe-faq-title,.pe-files-h2,.pe-gal-title,.pe-reason-t{
  font-family:var(--font-display);
  font-weight:700;
}

/* Slab serifs do not carry the tight tracking a geometric sans can. The old
   values were cut for Inter 800. */
.hm-hero h1{font-size:54px;letter-spacing:-.6px;line-height:1.14}
.h2,.cm-h2,.fq-h2,.pe-h2,.ab-h2,.fn-who-h2,.fn-works-h2,.fn-compass-h2,
.pe-files-h2,.fieldguide-card h2{letter-spacing:-.2px}
.hm-product-name,.pe-ed-name,.cm-format-name,.fn-works-name,.dv-work-name{letter-spacing:0}

/* Zilla sets ~4% wider than Inter. One heading had no slack: the narrow left
   column of the homepage Files section pushed "it." onto a third line. */
.hm-files .h2{font-size:29px}

/* ---------- 4 · Prices ----------
   Display face, but lining tabular figures so columns of prices align.
   .price / .price-now are the older tier's (styles.css). */
.hm-price,.hm-compass-price-amt,
.cm-fast-fmt-price,.cp-hero-price,.cu-hero-price,.dv-hero-price,.fn-hero-price,.pe-ed-price,
.price,.price-now{
  font-family:var(--font-display);
  font-weight:700;
  font-variant-numeric:lining-nums tabular-nums;
}

/* ---------- 5 · Counters ----------
   Ordinals read as data, not as headings. */
.hm-system-num,.hm-trust span,
.cm-decision-num,.cp-cat-num,.cu-file-num,.cu-step-num,.dv-files-num,.fn-files-num,.hw-step-num{
  font-family:var(--font-label);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.hm-system-num{font-size:23px}

/* ---------- 6 · Labels, eyebrows, kickers ----------
   Tracking is re-cut in em. The old 2–3.5px values were set for Inter; mono is
   already wide, so holding those would overflow the narrow label columns. .14em
   at label sizes lands at roughly the same optical width. */
.eyebrow,
.kicker,
.ab-hero-kicker,.ab-next-k,
.cm-eyebrow,.cm-fast-tag,.cm-format-k,.cm-hero-kicker,.cm-undecided-k,
.cp-buy-kicker,.cp-cau-tag,.cp-cautious-kicker,.cp-hero-kicker,.cp-kicker,
.cu-buybox-kicker,.cu-hero-kicker,.cu-how-eyebrow,.cu-tab-k,
.dv-buybox-kicker,.dv-hero-kicker,.dv-work-k,
.fn-buybox-kicker,.fn-compass-eyebrow,.fn-covers-eyebrow,.fn-hero-kicker,.fn-works-k,
.fq-fit-h,.fq-hero-kicker,
.hm-compass-price-kicker,.hm-does-kicker,.hm-files-k,.hm-format-kicker,.hm-hero-kicker,
.hm-hero-panel-caption,.hm-product-kicker,.hm-tab-k,
.hw-hero-kicker,
.pe-box-k,.pe-does-k,.pe-ed-tag,.pe-files-k,.pe-gal-tag,.pe-hero-kicker{
  font-family:var(--font-label);
  font-weight:500;
  letter-spacing:.14em;
}

/* Homepage labels, size-trimmed ~1px so mono holds the original optical width. */
.eyebrow{font-size:12px;letter-spacing:.17em}
.hm-hero-kicker{font-size:12.5px;letter-spacing:.18em}
.hm-format-kicker,.hm-does-kicker{font-size:11px;letter-spacing:.16em}
.hm-product-kicker{font-size:11px;letter-spacing:.15em}
.hm-tab-k{font-size:11.5px;letter-spacing:.15em;font-weight:600}
.hm-files-k{font-size:11px;letter-spacing:.14em}
.hm-compass-price-kicker{font-size:11.5px;letter-spacing:.14em}
.hm-hero-panel-caption{font-size:11px;letter-spacing:.15em}
.hm-price-label{font-family:var(--font-label);font-weight:500;font-size:10.5px;letter-spacing:.11em}

/* Older tier: .kicker carried 1.6px tracking cut for Inter. */
.kicker{font-size:11.5px;letter-spacing:.15em}

/* ---------- 7 · The wordmark ----------
   One word: the two weights are a single unbroken string, no gap, no space.
   The MARK is untouched — same SVG paths, same navy, same teal. */
.site-header .brand-word,
.site-footer .brand-word{font-family:var(--font-display)}
.site-header .brand-word{font-size:24px;letter-spacing:-.4px}
.site-footer .brand-word{font-size:20px;letter-spacing:-.3px}
.site-header .brand-word .b1,.site-footer .brand-word .b1{font-weight:700}
.site-header .brand-word .b2,.site-footer .brand-word .b2{font-weight:500}

/* ---------- 8 · Emphasis that stays in the body face ----------
   These sat at Inter 800 out of habit. In Archivo 700 is the emphasis weight. */
.announce-bar b,
.hm-format-list span,
.hm-does-list span,
.hm-trust div{font-weight:700}

/* ---------- 9 · Accessibility floor ----------
   Not typography, but the storefront has never had an a11y pass and a visible
   focus ring costs nothing to add while the stylesheet is being written. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}
