/* 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; }

/* 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; }
}