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

/* ---- D. Footers fit every width (2026-09-14) -------------------------------
 * Jack「your website links are not adaptive to all layouts, ensure it is completely designed for all cases」.
 * Measured on all 22 footer pages at 320–1440 before this block:
 *   - 1024–1440: 5-column .foot-top squeezed link columns to 53–79px, one word per line, emails clipped;
 *   - ≤390: 3-column .foot-bot squeezed "PALO ALTO · CHAMPAIGN" to 3–4 lines;
 *   - 320: the big footer wordmark ran off the screen;
 *   - 320/390 slim footer (shop/account/my): the link row ran off the screen.
 * Locked by site/tests/footer-fit-test.js (FF-1). */
@media (min-width: 901px) and (max-width: 1599px) {
  .foot-top { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; row-gap: 48px !important; }
  .foot-top > :first-child { grid-column: 1 / -1; }
}
footer ul a, footer .foot-bot, footer.slim .inner { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .foot-bot { display: flex !important; flex-direction: column; align-items: flex-start; gap: 8px; }
  .foot-bot .mid, .foot-bot .right { text-align: left !important; }
  footer.slim .links { flex-wrap: wrap; gap: 8px 20px !important; }
}
@media (max-width: 420px) {
  .foot-big { font-size: clamp(44px, 17vw, 60px) !important; }
}