@font-face {
  font-family: "OOOO Sans";
  src: url("../fonts/NimbusSans-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "OOOO Sans";
  src: url("../fonts/NimbusSans-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "OOOO Condensed";
  src: url("../fonts/NimbusSansNarrow-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "OOOO Condensed";
  src: url("../fonts/NimbusSansNarrow-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "OOOO Serif";
  src: url("../fonts/NimbusRoman-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "OOOO Serif";
  src: url("../fonts/NimbusRoman-Italic.otf") format("opentype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #f1efe8;
  --paper-dark: #e5e1d7;
  --paper-light: #f8f6ef;
  --ink: #11110f;
  --graphite: #34332f;
  --muted: #74716a;
  --rule: #c9c5bb;
  --rule-dark: rgba(17, 17, 15, 0.28);
  --orange: #ff4b22;
  --blue: #2356f6;

  --font-sans: "OOOO Sans", "Helvetica Neue", Arial, sans-serif;
  --font-condensed: "OOOO Condensed", "Arial Narrow", sans-serif;
  --font-serif: "OOOO Serif", Georgia, serif;

  --max-width: 1680px;
  --page-margin: clamp(24px, 3.7vw, 64px);
  --grid-gap: clamp(14px, 1.45vw, 24px);
  --section-space: clamp(88px, 9vw, 154px);
  --section-space-tight: clamp(54px, 6vw, 96px);
  --header-h: 76px;

  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-snap: cubic-bezier(.2, .8, .2, 1);
  --motion-fast: 180ms;
  --motion-normal: 420ms;
  --motion-slow: 760ms;
}