/* ==========================================================================
   KCCU — WEB FONTS
   Families: Fraunces (display) · Inter (body) · IBM Plex Mono (data/micro-type)
   Referenced by design-system.css as --f-display / --f-body / --f-mono.

   ──────────────────────────────────────────────────────────────────────────
   ⚠  CURRENT STATE: NOT YET SELF-HOSTED — the theme loads fonts from Google.
   ──────────────────────────────────────────────────────────────────────────

   `assets/fonts/` is empty. Until the woff2 files below are committed, the
   @import at the top of this file is what actually renders the site. The
   self-hosted @font-face block underneath is written and ready but kept
   commented out on purpose:

       Two @font-face rules with identical family/weight/style descriptors do
       NOT cascade. The LAST one wins outright, and if its src 404s the
       browser falls through to the next family in the CSS stack (Georgia,
       system sans) — it does NOT fall back to the earlier Google-served
       face. Live @font-face rules pointing at missing files would therefore
       BREAK the very fallback they are meant to be backed by.

   ── TO SELF-HOST (two steps, in this order) ───────────────────────────────
   1. Drop these exact files into `assets/fonts/`:

        assets/fonts/fraunces/Fraunces-Variable.woff2
        assets/fonts/fraunces/Fraunces-Italic-Variable.woff2
        assets/fonts/inter/Inter-Variable.woff2
        assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2
        assets/fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2
        assets/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2

      Fraunces and Inter must be VARIABLE builds spanning weight 300–700.
      The mockups use fractional weights (420, 460, 480, 550, 650) that
      static instances cannot reproduce — static files will render visibly
      wrong on headings, .k-bar-name and .k-table tr.hl.

      Sources (all SIL Open Font License 1.1):
        Fraunces      — github.com/undercasetype/Fraunces
        Inter         — github.com/rsms/inter
        IBM Plex Mono — github.com/IBM/plex

   2. Delete the @import line below, then uncomment the @font-face block.
      Both must never be active at the same time.
   ========================================================================== */

/* ── GOOGLE FONTS FALLBACK (delete once self-hosted — see step 2) ────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@300..700&display=swap');

/* ==========================================================================
   SELF-HOSTED FACES — uncomment everything below after step 1 above.
   ========================================================================== */

/* ── FRAUNCES — display serif, variable 300–700, normal + italic ─────────── */
/*
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces/Fraunces-Variable.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces/Fraunces-Italic-Variable.woff2') format('woff2');
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}
*/

/* ── INTER — body sans, variable 300–700 ────────────────────────────────── */
/*
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Variable.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
*/

/* ── IBM PLEX MONO — data / micro-type, static 400 · 500 · 600 ──────────── */
/*
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
*/

/* ── OPTICAL SIZING ─────────────────────────────────────────────────────────
   Fraunces carries an `opsz` axis (9–144). Letting the browser drive it keeps
   the oversized editorial headings from looking spindly at display sizes.
   Applies to both the Google-served and the self-hosted face.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.k-hero-title,
.k-hero-ghost,
.k-inner-ghost,
.k-footer-ghost {
    font-optical-sizing: auto;
}