/* Shared full-site responsive fit — fix/responsive-fit 2026-08-21
 * Loaded by every in-scope site page AFTER its inline <style>, so the rules
 * here win at equal specificity. One file to tune, instead of editing the
 * duplicated inline :root of 13 pages.
 *
 * Solves three site-wide layout faults (see reports/fix-responsive-fit-2026-08-21.md):
 *   A. Big-screen dead space — the content frame was locked at 1640px, so a
 *      2560 screen showed 460px of empty margin each side (36% of the screen),
 *      3440 showed 900px each side (52%). We let the frame grow with the
 *      viewport, capped so text/cards never get absurdly wide on 4K/ultrawide.
 *   B. Hero height on mobile — heroes already use viewport units (100vh/86vh/
 *      82vh, not a fixed 1350px as first thought); we harden them to svh in
 *      each page so the mobile address bar can't push the hero past one screen.
 *      (svh swap lives in each page's own hero rule; this file carries the net.)
 *   C. Tablet/phone overflow — multi-column footers (.foot-top, 5 cols) only
 *      collapsed at <=760px, so a 768px iPad kept 5 columns and overran the
 *      viewport; the index menu-tab strip likewise overran. Collapsed/contained
 *      here for the whole 761-900 band that the per-page queries missed.
 *
 * Falls back to literal token values so it never depends on a page defining
 * every custom property.
 */

/* ---- A. Content frame grows with the viewport ------------------------------
 * min(2880px, 96vw): full-bleed-with-breathing-room up to ~3000px, then a
 * content ceiling so paragraphs/cards stay readable on 4K & ultrawide.
 *   1440 -> ~2% side margin (was 0, essentially unchanged)
 *   1920 -> ~2%  (was 7.3%)
 *   2560 -> ~2%  (was 18%)
 *   3440 -> ~8%  (was 26%)
 * Text columns keep their own narrower caps (h1/h2 1100px, .lede 520px,
 * legal .doc 880px, body copy 760px) so only the outer frame / image / card
 * grids widen — long lines of body text never stretch. */
:root { --max: min(2880px, 96vw); }

/* ---- C. Tablet-band footer collapse (net for the 761-900 gap) --------------
 * Per-page inline queries collapse .foot-top only at <=760; a 768 iPad kept
 * the 5-col grid and overflowed. Collapse earlier, uniformly. */
@media (max-width: 900px) {
  .foot-top { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .foot-top { grid-template-columns: 1fr !important; }
}

/* ---- C. Index menu-tab strip: scroll instead of overrun --------------------
 * The category tab row (.menu-tabs) is a non-wrapping flex row; on phones its
 * buttons + label ran to ~611px and drove document width past 375. Make it its
 * own horizontal scroll container so it can never push the page wide. Harmless
 * on pages that have no .menu-tabs. */
@media (max-width: 880px) {
  .menu-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .menu-tabs::-webkit-scrollbar { display: none; }
  .menu-tabs .filler { display: none; }
}

/* ---- C. Universal no-sideways-scroll safety net ----------------------------
 * Every in-scope page already declares overflow-x: clip on html/body inline;
 * restate it here so any page that ships without it still can't scroll
 * sideways, and cap replaced media so nothing blows the frame. */
html, body { overflow-x: clip; }
img, video, canvas, svg, iframe, table, pre { max-width: 100%; }