/* Responsive safety net — generated, loaded last. Guarantees no horizontal
   overflow and readable, wrapping headings on every device from 320px up,
   without overriding the design on wider screens. */

/* No element may create a horizontal scrollbar. overflow-x: clip (not hidden)
   keeps position: sticky and off-canvas drawers working. */
html, body { max-width: 100%; overflow-x: clip; }

/* Media and embeds never exceed their container. */
img, svg, video, canvas, iframe, embed, object, figure, picture {
  max-width: 100%;
}
img, video, canvas { height: auto; }
pre, code, kbd, samp { overflow-x: auto; max-width: 100%; }

/* Headings and display lockups wrap instead of running off-screen. A
   white-space: nowrap that would push a headline off the edge is overridden;
   on wide screens the line still fits, so nothing wraps unnecessarily. */
h1, h2, h3, h4, h5, h6,
[class*="lockup"], [class*="display"], [class*="headline"], [class*="title"],
[class*="hero"] h1, [class*="hero"] h2 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
[class*="lockup"], [class*="lockup"] > * { white-space: normal !important; }

/* Long unbroken strings (URLs, emails, ids) wrap rather than overflow. */
p, li, dd, dt, blockquote, figcaption, address, a, span, td, th {
  overflow-wrap: break-word;
}

/* Grid and flex children may shrink below their content so a single wide
   child cannot force the whole track past the viewport. */
[class*="grid"] > *, [class*="row"] > *, [class*="flex"] > *,
[class*="cols"] > *, [class*="columns"] > * { min-width: 0; }

/* A band whose entire content is one wrapper spans its own grid instead of
   being dropped into the first track of it.

   This is the single worst layout failure the pipeline produces, and it is
   invisible in the source. A section is given a two-column grid, and its markup
   holds one `.container` — so the container is auto-placed into column one and
   the whole band renders in a third of the window, with the heading breaking one
   word per line, while the other column stands empty. The real two-column
   layout then runs a second time inside that third.

   A multi-track grid holding exactly one item has no use for its remaining
   tracks, so spanning them takes nothing away. `:where()` keeps the specificity
   at zero: any rule that deliberately places that child still wins. */
:where(main, section, article, aside, header, footer, nav, div) > :only-child {
  grid-column: 1 / -1;
}

/* Wide data tables scroll inside their own box on narrow screens instead of
   dragging the whole page sideways. */
@media (max-width: 48rem) {
  table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Cap the display scale on phones so no headline is bigger than the screen.
   These override the modular scale only where it is too large to fit. */
@media (max-width: 30rem) {
  :root {
    --step-7: clamp(2.2rem, 9vw, 3rem);
    --step-6: clamp(2rem, 8vw, 2.7rem);
    --step-5: clamp(1.8rem, 7vw, 2.4rem);
    --step-4: clamp(1.55rem, 6vw, 2.05rem);
    --step-3: clamp(1.35rem, 5vw, 1.8rem);
  }
}
@media (min-width: 30.01rem) and (max-width: 48rem) {
  :root {
    --step-7: clamp(2.8rem, 8vw, 4.6rem);
    --step-6: clamp(2.5rem, 7vw, 4rem);
    --step-5: clamp(2.2rem, 6vw, 3.4rem);
  }
}

/* Touch targets stay usable. */
@media (pointer: coarse) {
  a.btn, button, [role="button"], .btn,
  input[type="submit"], input[type="button"] { min-height: 44px; }
}