/* Restored 2026-11-11. The 20261111 delivery silently dropped these rules,
   which the previous build carried at the tail of polish.css. Without them the
   mobile hero breaks: style.css turns .hero into a column flex at 620px while
   design.css/polish.css still set align-items:center, so children shrink to
   content width and .hero-visual collapses to a sliver with the caption
   stacked vertically.

   Specificity note: polish.css overrides the hero with ".home-page .hero"
   (0-2-0), so a bare ".hero" rule loses regardless of load order. The
   .home-page variants below match that weight and win by coming later.

   Served from its own dated filename so the URL is new: mobile webviews
   (WeChat X5) key their cache on the path and ignore query strings, and the
   proxy sends max-age=604800 for the other stylesheets. */

@media (max-width: 620px) {
  .hero,
  .home-page .hero {
    align-items: stretch;
  }
  .hero-copy,
  .hero-visual,
  .home-page .hero-copy,
  .home-page .hero-visual {
    width: 100%;
    max-width: none;
  }
  .hero-visual .photo-overlay,
  .home-page .photo-overlay {
    flex-wrap: wrap;
    gap: 8px;
  }
  .hero-visual .photo-overlay b,
  .home-page .photo-overlay b {
    max-width: 100%;
  }
}

/* Very narrow phones (320-360px): brand + menu toggle + two header pills
   overflowed the viewport by a few px and caused horizontal scroll. */
@media (max-width: 360px) {
  body:not(.admin-shell):not(.print-document) .site-header {
    padding-inline: 3%;
    gap: 5px;
  }
  body:not(.admin-shell) .site-header .brand {
    font-size: 17px;
    gap: 5px;
  }
  body:not(.admin-shell) .site-header .brand-mark {
    width: 25px;
    height: 25px;
    font-size: 19px;
  }
  .header-account-actions {
    gap: 4px;
  }
  .header-account-actions > a {
    padding: 6px 7px;
    font-size: 10px;
    letter-spacing: -0.2px;
  }
}