:root {
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --gutter: var(--s-5);

  --t-h1-hero: clamp(38px, 7.5vw, 76px);
  --t-h1-page: clamp(28px, 4vw, 40px);
  /* --t-h1 is deliberately not set here: this sheet loads last and would overrule a page's hero size. */
  --t-h2: clamp(22px, 2.4vw, 30px);
  --t-h3: clamp(20px, 1.6vw, 23px);
  --t-body: clamp(17px, 0.6vw + 15px, 18px);
  --t-small: 14px;

  --lh-body: 1.6;
  --lh-head: 1.12;

  --measure: 623px;
}

/* :where() keeps this at zero specificity, so a page's small-text classes (.pay-fine) still win. */
main p:not(:where(.a5 p, .cv p)),
#main p:not(:where(.a5 p, .cv p)) {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

@media (max-width: 720px) {
  :root { --pad-x: var(--gutter); }
}