:root {
  --red: #e10600;
  --red-deep: #b10500;
  --red-bright: #fe0127;
  --ink: #141414;
  --charcoal: #1c1c1c;
  --steel: #2a2a2a;
  --muted: #5f5f5f;
  --ash: #8a8a8a;
  --line: #ddd8d0;
  --paper: #f4f1ec;
  --mist: #eceeea;
  --white: #ffffff;
  --black: #000000;
  --overlay: rgba(12, 12, 12, 0.62);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  --header-h: 5.5rem;
  --topbar-h: 2.25rem;
  --max: 1180px;
  --wide: 1440px;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 720px) {
  :root {
    --header-h: 4.25rem;
    --space-8: 3rem;
    --space-9: 4rem;
  }
}