/* Cairo variable font (slnt,wght) — one file covers 200-1000 weights.
   The weight RANGE is declared on BOTH rules below, and it is deliberate: a
   family that also has a `font-weight: 400`-only rule makes the browser
   SYNTHESIZE (falsify) bold and oblique for every other weight — and Cairo at a
   synthesized 700 is exactly the "awkward Arabic glyph shapes" the inventory
   grid was reported for (2026-10-01). One family, one weight range, no
   synthesis. */
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-Variable.ttf') format('truetype-variations'),
         url('../fonts/Cairo-Variable.ttf') format('truetype');
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

/* Fallback for environments where the variable file is unavailable.
   NOTE: a corrupt static fallback must NEVER mask the variable font: if the
   @font-face below parsed, the browser would render the brand text with a
   broken glyph set (the مَرچان title corruption, 2026-09-21).

   The shipped URL comes FIRST and `local('Cairo')` comes last, on purpose. With
   `local()` first, a Cairo installed on the machine wins over the file this
   project ships, so the glyph shapes depend on what happens to be installed —
   two browsers, two brand fonts. It also repeats the same family with a
   narrower weight, which is what invites synthetic bold. */
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-Variable.ttf') format('truetype-variations'),
         url('../fonts/Cairo-Variable.ttf') format('truetype'),
         local('Cairo');
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}