/* The faces this site serves, and nothing else.
 *
 * Site-owned, like `theme.css` beside it: a typeface is brand. This file
 * exists apart from `theme.css` for one reason — `theme.css` and
 * `theme-dark.css` are a matched pair, swapped one for the other by editing
 * a single `<link>`, and a face declared inside only one of them would
 * vanish on the swap. The *stacks* stay where the rest of the brand lives,
 * as the `--uilib-font-*` tokens in `theme.css`; only the files are here.
 *
 * `font-display: swap` on every face: the copy is the product on this site,
 * so a visitor reads it immediately in the fallback and it reflows once,
 * rather than staring at nothing for up to three seconds. The fallback
 * stacks named in `theme.css` are chosen to be close enough in width that
 * the reflow is a shift, not a relayout.
 *
 * See `static/fonts/README.md` for the files, their licences and why these
 * are pinned static instances rather than the variable originals.
 */

/* Bricolage Grotesque — display and utility. A grotesque with slightly
 * irregular, cut-looking terminals: it carries the personality of the page
 * at large sizes and, in caps with wide tracking, does the small-label job
 * a third family would otherwise be hired for. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-700-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-500-latin.woff2") format("woff2");
}

/* Newsreader — body copy. A serif drawn for screens rather than a print
 * face pressed into service: it is what makes a page of this site read as a
 * letter from a person rather than a pitch from a company. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/newsreader-600-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-400-italic-latin.woff2") format("woff2");
}