/* ============================================================
   Self-hosted fonts
   Destination: public_html/assets/fonts.css

   These previously came from fonts.googleapis.com, which meant a
   render-blocking stylesheet from a third-party domain before any
   text could appear: DNS lookup, TLS handshake, then a second round
   trip to fonts.gstatic.com for the files themselves. On a slow
   mobile connection that is most of the wait before a reader sees a
   headline. Served from your own domain it is one connection, already
   open, already warm.

   Latin subset only, and only the weights the stylesheets actually
   use - 400/500/600/700. 208KB total across eleven files, and a
   browser downloads only the faces the page really renders.

   font-display: swap means text paints immediately in the fallback
   and reflows when the webfont lands. On a news site, text a reader
   can start reading beats text in the right typeface.
   ============================================================ */

/* ---- Archivo - interface, navigation, labels ---- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/archivo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/archivo-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/archivo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-700.woff2') format('woff2');
}

/* ---- Newsreader - headlines and body copy ---- */

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

/* Real italic for pull quotes. Without this the browser slants the
   upright face mechanically, which on a serif looks obviously wrong. */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-400-italic.woff2') format('woff2');
}

/* ---- IBM Plex Mono - timestamps, counts, references ---- */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plexmono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plexmono-600.woff2') format('woff2');
}