/* ============================================================================
 * SITE WIDTH — one place that sets how wide the site is.
 *
 * 1600px on large screens, overriding the two classes every page shell uses:
 * `container mx-auto` (59 occurrences) and `max-w-7xl` (11).
 *
 * A separate file rather than an edit to public/css/tailwind.css, because that
 * file is a generated build: an edit there survives until the first Tailwind
 * run and then vanishes silently. Loaded after tailwind.css on every page, so
 * specificity ties and source order decides — this file wins.
 *
 * WHY THE PADDING GROWS WITH THE WIDTH
 * A 1600px cap only reaches 1600 on screens at least that wide. The common
 * laptop sizes — 1440 and 1536 CSS px — would instead render edge-to-edge with
 * only the 1rem of `px-4`, which reads as cramped rather than spacious. So the
 * horizontal padding steps up alongside the cap: the layout keeps a margin at
 * every size, and only genuinely wide displays spend the full 1600.
 *
 * Deliberately NOT widened: max-w-3xl and max-w-4xl. Those are the reading
 * columns on article, glossary and legal pages. Prose at this width runs well
 * past 120 characters a line, which measurably hurts reading — the width that
 * helps a data grid hurts a paragraph. Layout gets the space; text keeps its
 * measure.
 * ========================================================================== */

@media (min-width: 1280px) {
  .container,
  .max-w-7xl {
    max-width: 1600px;
    padding-inline: 2rem;
  }
}

@media (min-width: 1700px) {
  .container,
  .max-w-7xl {
    padding-inline: 2.5rem;
  }
}