/* Cascade — minimal responsive safety net.
   Desktop-first design; this only engages on narrow viewports and only does two
   things: (1) let the header + nav wrap so no link is ever clipped off-screen,
   (2) stop oversized display type from forcing horizontal scroll. Intentionally
   conservative — no layout redesign, just keeps everything reachable on a phone. */

/* The [hidden] attribute must always win. Many elements here carry inline
   display:flex/grid in their opening tag, which outranks the UA's
   [hidden]{display:none} and left banners/overlays stuck visible. */
[hidden] { display: none !important; }
@media (max-width: 760px) {
  header { flex-wrap: wrap !important; row-gap: 12px !important; padding-left: 18px !important; padding-right: 18px !important; }
  header nav { flex-wrap: wrap !important; column-gap: 16px !important; row-gap: 8px !important; }
  /* keep giant hero headings inside the viewport */
  h1, h2 { overflow-wrap: break-word; word-break: break-word; }
  /* any element that opts into horizontal scrolling keeps it; the page body must not */
  html, body { max-width: 100%; overflow-x: hidden; }
}