/* =============================================================================
 * Metric-matched webfont fallbacks (2026-10-04)
 * -----------------------------------------------------------------------------
 * The header brand wordmark + primary nav render in 'Oswald'; hero/section
 * headings render in 'Fraunces'. Both load from Google Fonts with
 * display=swap, so on a cold cache the browser first paints in a system
 * fallback and then swaps to the webfont a second or two later -- reflowing
 * the layout (the ~30px nav slide the user reported).
 *
 * Fix: define a local()-backed @font-face whose metrics are OVERRIDDEN to
 * match the webfont's advance width and vertical metrics. Insert that family
 * into the stack immediately AFTER the real webfont. During FOUT the browser
 * renders this metric-matched fallback at the SAME width/height as the
 * eventual webfont, so when the webfont swaps in there is ZERO layout shift.
 *
 * Override values are the Capsize/Fontaine-published numbers for each webfont
 * paired with its named local() source:
 *   - Oswald   (condensed display) vs local Arial
 *   - Fraunces (serif text)        vs local Georgia
 * ===========================================================================*/

/* --- Oswald fallback: Arial, squeezed to Oswald's condensed advance width --- */
@font-face {
    font-family: 'Oswald Fallback';
    src: local('Arial');
    size-adjust: 69.6294%;
    ascent-override: 171.3426%;
    descent-override: 41.6508%;
    line-gap-override: 0%;
}

/* --- Fraunces fallback: Georgia, metric-matched to Fraunces --- */
@font-face {
    font-family: 'Fraunces Fallback';
    src: local('Georgia');
    size-adjust: 102.1162%;
    ascent-override: 94.9888%;
    descent-override: 24.3861%;
    line-gap-override: 0%;
}