/*
 * Self-hosted webfonts.
 *
 * These were served from Google Fonts, which cost a third-party DNS lookup,
 * TLS handshake and two chained requests (CSS, then the font file) before any
 * text could paint in the brand face. Text rendered in a fallback first and
 * reflowed on swap - measurably, the homepage hero grew 67px when Montserrat
 * arrived and re-wrapped the h1 onto a second line.
 *
 * Served from our own origin and preloaded in the page head, the files arrive
 * in the first round trip and the swap happens before first contentful paint.
 * It also removes a third-party runtime dependency from the site.
 *
 * Roboto and Montserrat are variable fonts: one file each covers every weight.
 */

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/*
 * Icon fonts use `block`, not `swap`. These are ligature fonts: the element
 * contains the literal text "arrow_forward" until the font folds it into a
 * glyph. `swap` would paint that word; `block` keeps it invisible until the
 * font is ready. site.css also pins each icon box to 1em so the unfolded
 * ligature can never affect layout.
 */

@font-face {
  font-family: 'Material Icons';
  src: url('/fonts/material-icons.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Material Icons Outlined';
  src: url('/fonts/material-icons-outlined.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* Google's stylesheet used to supply these; they belong with the faces. */
.material-icons {
  font-family: 'Material Icons';
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
}

.material-icons,
.material-icons-outlined {
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  overflow-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}