/* ─────────────────────────────────────────────────────────────────────────
   hanif ui · type

   THIS FILE IS OPTIONAL, and that is deliberate.

   tokens.css puts "Bricolage Grotesque" and "IBM Plex Mono" first in its
   font lists, with the device's own faces behind them. If this file is
   never loaded, nothing breaks: the system uses the device face, and not
   one size shifts. An app that promises zero outside requests may skip it.

   The fonts are hosted here rather than pulled from Google Fonts. The
   reason is the same one that makes the components in this system copied
   rather than linked: a page must not depend on someone else's server to
   render correctly — and a reader's IP address does not need to visit a
   third party just to fetch a typeface.

   Only the latin subset is included. Bricolage is variable (one file for
   the whole 400–700 range); Plex Mono is three separate weights because
   only three are used: 400 for numbers, 500 for labels, 600 for emphasis.

   Load it before the other stylesheets:
     <link rel="stylesheet" href="/font/type.css">
   ───────────────────────────────────────────────────────────────────────── */

/* Bricolage Grotesque — a face that is a little wide, with cuts that are
   not stiff. That is what keeps the interface from feeling cold even though
   its colours are deliberately muted.

   opsz is left to follow the text size (font-optical-sizing: auto on body):
   at small sizes the letters loosen themselves and stay readable, at
   heading sizes they tighten. That is the only reason a variable font was
   chosen here — not to have many weights. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  /* swap: the text shows in the device face first and is swapped once the
     font arrives. What is being avoided here is a blank page, not a shift —
     and the shift is small because the fallback is deliberately a system
     face of similar width. */
  font-display: swap;
  src: url("bricolage-latin.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+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono — for numbers, dates and metadata labels. In any list, a
   column of equal width is far easier to scan than proportional figures;
   and once the label is monospace too, label and number read as one
   family. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("plexmono-400-latin.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+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("plexmono-500-latin.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+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("plexmono-600-latin.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+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}