/* The Lab's complete type and corner vocabulary.
   Six rem-based sizes respect a visitor's browser text-size preference. */
:root {
  --type-small: .875rem;      /* 14px: captions and secondary metadata */
  --type-body: 1rem;          /* 16px: prose, form fields, and actions */
  --type-lead: 1.25rem;       /* 20px: introductions and compact headings */
  --type-subheading: 1.5rem;  /* 24px: card titles and subsections */
  --type-heading: 2rem;       /* 32px: section headings */
  --type-display: 3rem;       /* 48px: page titles */
  --page-title-size: var(--type-display);
  --corner: 8px;
}

/* Fixed steps avoid creating additional in-between sizes as the viewport changes. */
@media (max-width: 600px) {
  :root { --page-title-size: var(--type-heading); }
}