@font-face {
  font-family: "Geist Sans";
  src: url("/fonts/geist-sans-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

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

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

:root {
  --sf-sans: "Geist Sans", "Helvetica Neue", Arial, sans-serif;
  --sf-serif: "Newsreader", Iowan Old Style, Baskerville, Georgia, serif;
  --sf-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
}

html {
  font-synthesis: none;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--sf-sans);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

:where(h1, h2, .display-type, blockquote) {
  font-family: var(--sf-serif);
  font-optical-sizing: auto;
  font-synthesis: none;
}

:where(code, pre, kbd, samp, .mono, [data-mono]) {
  font-family: var(--sf-mono);
  font-variant-ligatures: none;
}