:root {
  /* The site uses a single font size throughout. */
  --fs-base: 16px;
  --lh-base: 20px;
  --foreground: #000;
  --background: #fff;
  /* The page's outer margin, set on <body>. Named rather than written there
     once, because a full-bleed component has to cancel it to reach the viewport
     edges and then pay it back inside its own scroller — three places that must
     never drift apart. */
  --page-margin: calc(var(--fs-base) * 1.5);
  /* The hand-drawn arrows (snippets/components/arrow). A token rather than a
     local value: the slideshow has to subtract the width of a pair of them from
     its track, so the number has to be readable outside the arrow itself. */
  --arrow-width: calc(var(--fs-base) * 3);
}

/* Room to spend: the drawings grow with the layout. */
@media (min-width: 60em) {
  :root {
    --fs-base: 21px;
    --lh-base: 26px;
    --page-margin: calc(var(--fs-base) * 3);
    --arrow-width: calc(var(--fs-base) * 7);
  }
}