/* Responsive — mobile refinements. Additive only: every rule is inside a
   max-width query, so the desktop component styles are unchanged. Grids already
   reflow via auto-fit; these tighten spacing, padding and type on small screens. */
@media (max-width: 600px) {
  /* step the whole page grid + section rhythm down once — every container that
     references these tokens (wrap, nav-bar, dropdown, footer, pane) stays aligned */
  :root { --gutter: 16px; --section-gap: 56px; --head-gap: 18px; }

  /* grids that opt into .rail-auto become horizontal snap sliders on phones
     (desktop keeps the grid; the rail arrows auto-show only when it overflows) */
  .rail-auto { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding-bottom: 8px; scrollbar-width: none; min-width: 0; }
  .rail-auto::-webkit-scrollbar { display: none; }
  .rail-auto > * { scroll-snap-align: start; }
  .photo-grid.rail-auto > * { flex: 0 0 46%; }
  .logo-grid.rail-auto > * { flex: 0 0 40%; }
  .people-grid.rail-auto > * { flex: 0 0 62%; }

  .layout { gap: 32px; padding-top: 36px; padding-bottom: 48px; }
  .main > section + section { margin-top: 40px; }
  section h2 { font-size: 1.45rem; margin-bottom: 14px; }
  .photo-river-sec { padding-top: 48px; }
  .sec-head { align-items: flex-start; gap: 12px; }
  .sec-head .more { width: 100%; }

  .hero-inner { padding-top: 26px; padding-bottom: 36px; }
  .hero-with-partners { padding-bottom: 24px; }
  .hero-with-partners .hero-inner { padding-bottom: 26px; }
  .home-hero h1 { max-width: 12ch; font-size: 2.35rem; }
  .home-hero .sub { font-size: 1.05rem; margin: 16px auto 24px; }
  .hero-meta { gap: 8px 22px; }
  .hero-cta-row, .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn, .hero-ctas .btn { width: 100%; }
  .stats-row { gap: 18px 28px; padding-top: 34px; }
  .stat-big { min-width: 120px; }

  .card { padding: 20px; }
  .card-grid, .hl-grid, .dash { gap: 14px; }
  .card-grid, .hl-grid { grid-template-columns: 1fr; }
  .card-band { padding: 18px; }
  .card-foot { align-items: flex-start; gap: 10px; flex-direction: column; }
  .side-card { padding: 20px; }
  .check-band { padding: 22px; }
  .event-feature { padding: 20px; }
  .event-feature .btn { width: 100%; }
  .ehead { align-items: flex-start; }
  .ehead .sq, .ehead .sq-placeholder { width: 64px; height: 64px; }

  .ww-strip { margin-top: 0; padding: 22px 0 20px; }
  .hero-with-partners .ww-strip { grid-template-columns: 1fr; gap: 10px; width: calc(100% - 32px); padding: 18px 0; border-radius: 22px; }
  .hero-with-partners .ww-label { text-align: center; }
  .ww-label { margin-bottom: 8px; }
  .logo-scroll { margin-top: 14px; }
  .logo-track { gap: 36px; }
  .logo-track img { height: 32px; }
  .marquee { margin: 40px 0; padding: 11px 0; }
  .marquee-track { gap: 24px; font-size: 0.72rem; }
  .city-marquee { padding: 14px 0; }
  .city-pill-track { gap: 14px; }
  .city-name { padding: 6px 12px; font-size: 0.66rem; }

  .hl { padding: 16px; }
  .hl .pic, .hl .pic-pad { height: 136px; }

  .river { margin-top: 18px; gap: 10px; }
  .river-row { gap: 10px; }
  .shot { height: 146px; }
  .shot .loc { left: 8px; bottom: 8px; font-size: 0.62rem; padding: 3px 9px; }

  .globe-sec { gap: 28px; }
  .section-title-narrow { max-width: 14ch; }
  .icons-row { flex-wrap: wrap; row-gap: 8px; }
  .icons-row .count { flex-basis: 100%; margin-left: 0; }

  .weekly-callout { gap: 24px; }
  .newsletter { flex-direction: column; max-width: none; }
  .newsletter .btn { width: 100%; }
  .wall-tile { padding: 22px; }
  .wall-teaser { grid-template-columns: repeat(3, 64px); gap: 12px; }
  .wall-teaser img, .more-tile { width: 64px; height: 64px; }

  .frow { gap: 12px; }
  .savebar { align-items: stretch; }
  .savebar .btn, .savebar .quiet { width: 100%; }
  .savebar .stamp { margin-left: 0; width: 100%; }

  .dark-slab { padding: 28px; gap: 20px; }
  .dark-slab .btn { width: 100%; }
  .footer-inner { padding: 32px 16px; flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer2 { margin-top: 56px; }
  .f2-top { gap: 24px; padding-top: 38px; padding-bottom: 30px; }
  .f2-brand h3 { max-width: 20ch; }
  .f2-legal { flex-direction: column; }
  .f2-legal .links { flex-wrap: wrap; gap: 10px 16px; }
}

@media (max-width: 400px) {
  .btn { padding: 12px 20px; }
  .nav-mobile-sheet { left: 8px; right: 8px; }
  .pane { padding-left: 16px; padding-right: 16px; }
  .home-hero h1 { font-size: 2.05rem; }
  .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; }
  .stat-big { min-width: 0; }
  .stat-big span { font-size: 0.82rem; }
  .wall-teaser { grid-template-columns: repeat(3, 58px); gap: 10px; }
  .wall-teaser img, .more-tile { width: 58px; height: 58px; }
}