@font-face {
  font-family: "Milo Grid Sans";
  src:
    url("/fonts/MiloGridSans-Regular.woff2") format("woff2"),
    url("/fonts/MiloGridSans-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "STIX Two Text";
  src: url("/fonts/STIXTwoText-Latin.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  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: "STIX Two Text";
  src: url("/fonts/STIXTwoText-Greek.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0370-0377, U+037a-037f, U+0384-038a, U+038c, U+038e-03a1,
    U+03a3-03ff;
}

@font-face {
  font-family: "STIX Two Text";
  src: url("/fonts/STIXTwoText-LatinItalic.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  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: "STIX Two Text";
  src: url("/fonts/STIXTwoText-GreekItalic.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0370-0377, U+037a-037f, U+0384-038a, U+038c, U+038e-03a1,
    U+03a3-03ff;
}

@font-face {
  font-family: "STIX Two Math";
  src: url("/fonts/STIXTwoMath-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Syne";
  src: url("/fonts/Syne-Latin.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* Shared by the site and every standalone instrument. Keep brand lettering separate from reading faces. */
:root {
  --font-brand: "Milo Grid Sans", Arial, sans-serif;
  --font-display: "Syne", Arial, sans-serif;
  --font-body: "IBM Plex Sans", Arial, sans-serif;
  --font-editorial: "STIX Two Text", Georgia, serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
  --font-math: "STIX Two Math", "STIX Two Text", serif;
  --font-milo: var(--font-brand);
  --font-index: var(--font-display);
  --font-machine: var(--font-body);
  --serif: var(--font-editorial);
  --sans: var(--font-body);
  --mono: var(--font-mono);
  --display: var(--font-display);
}