/*
 * Karla - state font-display explicitly.
 *
 * Karla is the body font. Its two @font-face blocks in dist/css/style.css are
 * the only ones on the site with no font-display descriptor, so those two faces
 * fall back to `auto` and let each browser choose. The six Archia faces in the
 * same file already declare swap, so this is an omission in two declarations
 * rather than a deliberate policy.
 *
 * HOW BIG IS THIS? SMALLER THAN IT LOOKS - MEASURED, NOT ASSUMED.
 * Stalling both Karla files indefinitely (CDP Fetch, request held open) and
 * screenshotting the hero copy at 1500ms gives an IDENTICAL 4781 text pixels
 * with and without this file. That is not the fix failing; it is Chrome's
 * `auto` already behaving well - roughly a 100ms block period and then swap,
 * not the 3s block that `font-display: block` gives. By 1500ms both have
 * swapped to the fallback.
 *
 * So the honest claim is narrow: in Chrome this closes a ~100ms invisible-text
 * window, which is real but small. It is worth shipping because `auto` is
 * browser discretion rather than a guarantee - Safari has historically blocked
 * far longer for auto - and because leaving two faces silently different from
 * the other six invites the question again later. It is NOT a headline Core
 * Web Vitals win, and should not be reported as one.
 *
 * WHY A SEPARATE FILE
 * font-display is a DESCRIPTOR, not a property - it cannot be set from another
 * rule and there is nothing to override. The only way to change it is to
 * redeclare the whole @font-face; a later declaration for the same
 * family/style/weight replaces the earlier one. dist/ is read-only here (see
 * CLAUDE.md: the gulp pipeline pins Node 7 and the compiled CSS is already
 * behind the SCSS), so this follows the palette-additions.css pattern.
 *
 * The src is copied BYTE FOR BYTE from the compiled file, including local("")
 * and the absolute onclusive.com URLs, so the same files are fetched from the
 * same origin as before and only the descriptor is new. (Those absolute URLs
 * are worth revisiting separately - they make fonts a cross-origin fetch on
 * staging and local, though not on production, where the site IS
 * onclusive.com. Deliberately not changed here.)
 *
 * If the gulp pipeline is ever revived, add font-display to the Karla blocks in
 * src/scss and delete this file.
 */

@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(""),
         url("https://onclusive.com/wp-content/themes/onclusive/dist/fonts/karla-v21-latin-regular.woff2") format("woff2"),
         url("https://onclusive.com/wp-content/themes/onclusive/dist/fonts/karla-v21-latin-regular.woff") format("woff");
}

@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local(""),
         url("https://onclusive.com/wp-content/themes/onclusive/dist/fonts/karla-v21-latin-500.woff2") format("woff2"),
         url("https://onclusive.com/wp-content/themes/onclusive/dist/fonts/karla-v21-latin-500.woff") format("woff");
}