@font-face {
  font-family: Fraunces;
  src: url("/assets/fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Fraunces;
  src: url("/assets/fonts/Fraunces-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: Satoshi;
  src: url("/assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Satoshi;
  src: url("/assets/fonts/Satoshi-VariableItalic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/fonts/JetBrainsMono-Italic-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

/* Keep the centered splash lockup stable while its blocked display face resolves. */
#screen-splash .brand-stack .wordmark {
  display: inline-block;
  min-inline-size: 3.2em;
  text-align: center;
}