@font-face {
  font-family: "Comic Zine OT";
  src: url("../assets/fonts/comic-zine-ot.otf") format("opentype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "ChillSide";
  src: url("../assets/fonts/chillside.otf") format("opentype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Fatman";
  src: url("../assets/fonts/fatman.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Fatman Outline";
  src: url("../assets/fonts/fatman-outline.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --paper: #f2e9d8;
  --ink: #16173a;
  --red: #e5452e;
  --blue: #1c8fe6;
  --yellow: #f0a92f;
  --purple: #4a3ed3;
  --white: #fbf8f1;

  /* v1 aliases kept for the lower sections and scripts. */
  --color-bg: var(--paper);
  --color-surface: var(--white);
  --color-ink: var(--ink);
  --color-muted: rgba(22, 23, 58, 0.6);
  --color-ink-dim: rgba(22, 23, 58, 0.6);
  --color-faint: rgba(22, 23, 58, 0.12);
  --color-border: rgba(22, 23, 58, 0.2);
  --color-border-strong: rgba(22, 23, 58, 0.36);
  --color-accent: var(--yellow);
  --color-glow: transparent;
  --color-accent-shadow: var(--ink);

  --font-display: "League Spartan", sans-serif;
  --font-hero: "Comic Zine OT", "League Spartan", sans-serif;
  --font-body: "Gabarito", sans-serif;
  --font-mono: "Geist Mono", monospace;
  --font-loud: "Fatman", "Comic Zine OT", sans-serif;
  --font-bubble: "ChillSide", "Comic Zine OT", sans-serif;
  --display-opsz: 96;

  --outline: 3px solid var(--ink);
  --shadow-pop: 6px 6px 0 var(--ink);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --space-nav: clamp(1.25rem, 3vw, 2.5rem);
  --space-content-inline: clamp(1.5rem, 5vw, 5rem);
  --container-max-width: 80rem;
  --space-content-stack: 1.5rem;
  --space-section: clamp(5rem, 12vw, 9rem);
  --space-section-tight: clamp(3rem, 8vw, 6rem);
  --space-eyebrow-to-heading: 0.75rem;
  --space-subtext-to-cta: 2rem;
  --space-nav-gap: 1.5rem;
  --space-nav-link-gap: 0.75rem;
  --space-cta-block: 1rem;
  --space-cta-inline: 1.75rem;

  --h1-size: clamp(3rem, 6.6vw, 6.5rem);
  --h1-size-mobile: clamp(2.75rem, 12vw, 4.5rem);
  --h1-max-width: 12ch;
  --h1-line-height: 0.9;
  --h1-tracking: -0.02em;
  --h2-size: clamp(2.5rem, 6vw, 6rem);
  --h3-size: clamp(1.5rem, 2.4vw, 2.25rem);
  --manifesto-size: clamp(1.5rem, 3.2vw, 3rem);
  --body-size: 1.0625rem;
  --body-line-height: 1.5;
  --body-max-width: 45ch;
  --eyebrow-size: 0.8rem;
  --eyebrow-tracking: 0.12em;
  --wordmark-size: 1.25rem;
  --wordmark-tracking: 0;
  --wordmark-desc-size: 0.8rem;
  --wordmark-gap: 0.125rem;
  --cta-size: 1rem;
  --cta-tracking: 0.06em;

  --grid-cell-size: 28px;
  --grid-cell-size-mobile: 22px;
  --grid-column-gap: 16px;
  --grid-column-gap-mobile: 10px;
  --field-pitch: 9px;
  --field-dot-radius: 1.1px;
  --field-dot-max-radius: 2.2px;
  --field-dot-alpha: 0.85;
  --field-radius: 35vw;
  --field-radius-mobile: 60vw;
  --field-light-x-amplitude: 30vw;
  --field-light-y-amplitude: 22vh;
  --field-light-period-x: 14s;
  --field-light-period-y: 11s;
  --field-inner-zone: 40%;
  --field-flip-rate: 0.02;

  --reveal-distance: 40px;
  --duration-field: 0.2s;
  --duration-reveal: 0.6s;
  --duration-cta: 0.3s;
  --duration-word: 0.2s;
  --duration-reduced: 0.01s;
  --delay-eyebrow: 0ms;
  --delay-heading: 80ms;
  --delay-subtext: 160ms;
  --delay-cta: 240ms;

  --radius-pill: 9999px;
  --tap-target: 44px;
  --cta-min-height: 48px;
  --field-z: 0;
  --content-z: 10;
  --grain-z: 50;
  --grain-opacity: 0.02;
}