/*
* fonts.css — Kinkajou self-hosted variable fonts
*
* Include in every page like this:
*
*
*
*
*
* Font files live in /fonts/ (variable WOFF2, latin subset).
* size-adjust values were measured via Playwright on 2026-05-12 at 375px viewport.
* Do NOT change size-adjust without re-running the measurement script at
* assets/_measure-fonts.html — wrong values cause layout shift (CLS).
*
* Lighthouse mobile score with these settings: 98
*/
/* ─── Metric-matched fallbacks (prevent CLS during font swap) ─── */
@font-face {
font-family: 'Inter Fallback';
src: local('Arial');
size-adjust: 100%; /* Inter and Arial match at body size — no adjustment needed */
}
@font-face {
font-family: 'Syne Fallback';
src: local('Arial Black'), local('Arial Bold'), local('Arial');
size-adjust: 142.86%; /* Measured: Syne 800 renders h1 43% taller than Arial Black */
}
@font-face {
font-family: 'JetBrains Mono Fallback';
src: local('Courier New');
size-adjust: 114.29%; /* Measured: JBMono renders 14% taller than Courier New */
}
/* ─── Self-hosted variable fonts ─── */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('fonts/inter.woff2') 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: 'Syne';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('fonts/syne.woff2') 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: 'JetBrains Mono';
font-style: normal;
font-weight: 400 500;
font-display: optional; /* Decorative labels only — don't block critical path */
src: url('fonts/jetbrains-mono.woff2') 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 stacks (use these in page CSS) ─────────────────────────────────
*
* body: font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif;
* headings: font-family: 'Syne', 'Syne Fallback', system-ui, sans-serif;
* mono: font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
*
* ──────────────────────────────────────────────────────────────────────── */