:root {
  --paper: #f6f4ee;
  --paper-rule: #e4e1d6;
  --ink: #1c2027;
  --ink-mute: #6a7684;
  --olive: #454b1b;
  --olive-dim: rgba(69, 75, 27, 0.12);
  --ember: #8a3a1a;

  --font-serif: mrs-eaves, "Mrs Eaves OT", "Iowan Old Style", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.333rem;
  --step-3: 1.777rem;
  --step-4: 2.369rem;
  --step-5: 3.157rem;
  --step-6: 4.209rem;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --max-width: 1120px;
  --gutter: 32px;

  --rule: 1px solid var(--paper-rule);
  --rule-olive: 1px solid var(--olive-dim);
}

@media (max-width: 900px) {
  :root {
    --gutter: 20px;
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: 16px;
  }
}