/* ==========================================================================
   SETTINGS · LAYOUT — the measures and widths of the printed page: the reading
   measure, the page container, and the margin-apparatus columns that carry the
   signature sidenote citations. Breakpoints are documented here as the source
   of truth (plain CSS has no custom-media, so media queries reuse these px).
   ========================================================================== */

:root {
  /* — Reading measures (the column width, in characters) — */
  --measure:        66ch;   /* the body column — ideal line length */
  --measure-narrow: 52ch;   /* standfirst, captions, asides */
  --measure-wide:   78ch;   /* intros, wide tables */

  /* — Page containers — */
  --container-max:   78rem;  /* the full masthead-to-footer width */
  --container-text:  44rem;  /* a centred article column (no apparatus) */
  --container-wide:  92rem;  /* listings, the map figure, dashboards */

  /* — The margin apparatus: the sidenote column beside the reading column — */
  --apparatus-main:     minmax(0, 1fr);
  --apparatus-aside:    16rem;  /* the sidenote column width */
  --apparatus-gap:      clamp(1.5rem, 3.5vw, 3rem);

  /* — Page gutter — */
  --gutter: var(--gutter-page);

  /* — Breakpoints (source of truth; media queries below restate these px) —
       sm  640px · md  900px · lg 1152px · xl 1392px
       The sidenote apparatus engages at lg and up. */
  --bp-sm: 40rem;
  --bp-md: 56.25rem;
  --bp-lg: 72rem;
  --bp-xl: 87rem;

  /* — Stacking order — */
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-popover:  500;
  --z-overlay:  1000;
}