:root {
  --ink: #14221d;
  --muted: #56645d;
  --paper: #f5f1e8;
  --surface: #fffdf8;
  --forest: #173c32;
  --forest-deep: #102d26;
  --clay: #a84d31;
  --gold: #c39b59;
  --line: #d9d1c3;
  --font-display: Georgia, "Noto Serif", serif;
  --font-ui: Arial, "Helvetica Neue", sans-serif;
  --content-max: 1200px;
  --reading-max: 720px;
  --page-pad: 32px;
  --grid-gap: 24px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 80px;
  --s10: 96px;
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 16px;
}

@media (max-width: 640px) {
  :root {
    --page-pad: 20px;
    --grid-gap: 16px;
  }
}