/* Base unit 4px. Structural layout snaps to 8/12/16/24/32/48. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Rhythm */
  --section-y: 96px;
  --section-y-tight: 64px;
  --card-pad: 24px;
  --card-pad-lg: 32px;
  --stack-gap: 16px;
  --grid-gutter: 20px;

  /* Containers */
  --container-prose: 660px;
  --container-content: 900px;
  --container-wide: 1180px;
  --page-gutter: 24px;
}

@media (max-width: 900px) {
  :root {
    --section-y: 64px;
    --section-y-tight: 48px;
    --card-pad-lg: 24px;
  }
}
@media (max-width: 520px) {
  :root {
    --section-y: 48px;
    --page-gutter: 18px;
    --card-pad: 18px;
  }
}