/* ===== @font-face declarations ===== */
@font-face {
  font-family: "Diatype Variable";
  src: url("../fonts/Cargo-DiatypePlusVariable.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Diatype Variable";
  src: url("../fonts/Cargo-DiatypePlusVariable-Italic.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: italic;
  font-display: block;
}
/* Same file as Diatype Variable; the mono look comes from its MONO axis (see .essay-quote) */
@font-face {
  font-family: "Diatype Mono Variable";
  src: url("../fonts/Cargo-DiatypePlusVariable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Diatype Mono Variable";
  src: url("../fonts/Cargo-DiatypePlusVariable-Italic.woff2") format("woff2");
  font-weight: 200 700;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "VCR OSD Mono";
  src: url("../fonts/VCROSD-Mono.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Social Variable";
  src: url("../fonts/CargoSocialPlusVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Social Variable";
  src: url("../fonts/CargoSocialItalicPlusVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Gravity Variable";
  src: url("../fonts/CargoGravityVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Gravity Variable";
  src: url("../fonts/CargoGravityItalicVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Terminal Grotesque";
  src: url("../fonts/TerminalGrotesque.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Monument Grotesk Variable";
  src: url("../fonts/CargoMonumentGroteskPlusVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Monument Grotesk Variable";
  src: url("../fonts/CargoMonumentGroteskItalicPlusVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: block;
}
/* Live's name for the same files with the MONO axis at 0.5 (used by .kinks) */
@font-face {
  font-family: "Monument Grotesk Semi-Mono Variable";
  src: url("../fonts/CargoMonumentGroteskPlusVariable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Monument Grotesk Semi-Mono Variable";
  src: url("../fonts/CargoMonumentGroteskItalicPlusVariable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Fraunces Variable";
  src: url("../fonts/Fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Fraunces Variable";
  src: url("../fonts/FrauncesItalic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Sabon";
  src: url("../fonts/Sabon.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Sabon";
  src: url("../fonts/Sabon-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Sabon";
  src: url("../fonts/Sabon-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Sabon";
  src: url("../fonts/Sabon-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Sorts Mill Goudy";
  src: url("../fonts/sortsmillgoudy.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Sorts Mill Goudy";
  src: url("../fonts/sortsmillgoudy-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibmplexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}