@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
/* The two IPA glyphs in the hero's etymology line, which the Zwischen files
   don't carry. A 904-byte Google Fonts text subset; the range keeps it to them. */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-ipa.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+028A, U+02C8;
}
/* Zwischen's wordmark face (zwischen.ai sets "Zwischen" in Inter 700). A
   Google Fonts text subset of just its letters, 1.7KB. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-zwischen.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+5A, U+63, U+65, U+68-69, U+6E, U+73, U+77;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour. --ivory is also hard-coded in js/pins.js (the hero's ground). */
  --night: #04191a;
  --deep: #082b2b;
  --teal: #075c59;
  --teal-glow: #7ad6d0;
  --amber: #e8a43c;
  --amber-soft: #f2b24c;
  --ivory: #f5f3ec;
  --paper: #fcfbf7;
  --sage: #e8ede9;
  --cyan: #75e3e5;
  /* Zwischen's own reds (zwischen.ai tokens: --red-deep, --red), for its section only. */
  --zw-red: #a31016;
  --zw-knight: #c4161c;
  --ink: #0b2423;
  --ink-soft: #3d5553;
  --ink-faint: #6f817f;
  --on-dark: #eef0ea;
  --on-dark-soft: rgba(238, 240, 234, 0.74);
  --on-dark-faint: rgba(238, 240, 234, 0.5);
  --rule-dark: rgba(238, 240, 234, 0.16);
  --rule-light: rgba(11, 36, 35, 0.14);

  /* Type. Source Serif 4 is Zwischen's serif (zwischen.ai and its blog, same
     files): the hero headline, every section heading and all reading text.
     Plex Sans is the interface, Plex Mono the footer's small print. Inter
     only for Zwischen's own wordmark. The Flowalto logo is an image
     (img/flowalto-logo.png). */
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --zw-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-hero: clamp(3rem, 6.2vw, 8rem);
  --t-section: clamp(2.3rem, 3.4vw, 4rem);
  --t-lede: clamp(1.06rem, 0.95rem + 0.4vw, 1.3rem);
  --t-body: clamp(1.0625rem, 0.95rem + 0.25vw, 1.1875rem);
  --t-annot: 0.72rem;

  /* Space */
  --gutter: clamp(20px, 5.2vw, 104px);
  --measure: 34em;
  --bar: 76px;
  --slant: clamp(28px, 4.2vw, 84px);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --quick: 180ms;
  --calm: 420ms;
}

@media (max-width: 767px) {
  :root {
    --bar: 64px;
  }
}