/* Self-hosted variable fonts (PERFORMANCE_ROUND2 R2-2): latin subsets of the
   same Google variable-font files the old @import chained to, served from
   /resource/ so they ride the Cloudflare edge cache and the kjmLogin warming
   list. Keep ?v= in sync with the KJSFont* static resources. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/resource/KJSFontNewsreader?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/resource/KJSFontHanken?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ───────────────────────────────────────────────────────────────────────────
   KJS demo overlay — TYPOGRAPHY: Light Serif  (Newsreader display + Hanken UI)
   Layer AFTER KJSTheme.css. Overrides the font tokens AND the base global
   Montserrat !important rule (so the swap actually paints), putting the serif
   display font on headings and Hanken Grotesk on body/UI. Toggle vs KJSType_Sans.
   Fonts are self-hosted via the @font-face rules above; no external hosts.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    --font-display: "Newsreader", "Source Serif 4", Georgia, serif;
    --font-ui:      "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

/* defeat the base `body .slds * { font-family: Montserrat !important }` — UI font everywhere */
html, body, body .slds, body .slds * { font-family: var(--font-ui) !important; }

/* …display font on the headings / display elements */
body .slds .section__title, body .slds .hero__hi, body .slds .hero__cert-name, body .slds .hero__class-title,
body .slds .hist-title, body .slds .histcert__head h2, body .slds .histtable__num, body .slds .histtable__title,
body .slds .profile-title, body .slds .profile__head h2, body .slds .schedule-head h1, body .slds .schedrow__num,
body .slds .schedrow__title, body .slds .cert-hero__name, body .slds .cert-hero__rate-pct, body .slds .catgroup__title,
body .slds .cls__num, body .slds .cls__title, body .slds .lock-card__title, body .slds .player__cls-title,
body .slds .overlay__title, body .slds .hud__val, body .slds .certcard__name, body .slds .tile__title,
body .slds .tile__num, body .slds .histrow__num, body .slds .histrow__title,
body .slds .hero__class-num, body .slds .metric__num,
body .slds .brand__name, body .slds .avatar {
    font-family: var(--font-display) !important;
}

/* keep monospace on code/eyebrow + time labels (the UI-font !important above would otherwise hit them) */
body .slds .cert-hero__code, body .slds .histcert__code, body .slds .certcard__code,
body .slds .tile__code, body .slds .schedrow__time, body .slds .histtable__num {
    font-family: var(--font-mono) !important;
}