/* Mobile composition shared by every page. */
@media (max-width: 760px) {
  html { scroll-padding-top: 88px; }
  .header {
    padding: calc(16px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left));
  }
  .nav {
    top: calc(78px + env(safe-area-inset-top));
    padding: 12px max(20px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }
  .nav.open { max-height: calc(100svh - 78px - env(safe-area-inset-top)); }
  .nav-toggle { min-height: 52px; }
  .submenu a { min-height: 44px; display: flex; align-items: center; }

  .hero { height: 100svh; min-height: 620px; max-height: 820px; }
  .hero-copy { bottom: 120px; }
  .hero h1 { font-size: clamp(2.7rem, 10vw, 4rem); line-height: 1.04; }
  .hero-summary { gap: 18px; }
  .hero-bottom { left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); }

  .photo-composition { display: block; }
  .photo-wide { height: clamp(300px, 84vw, 420px); }
  .photo-small-wrap { width: 74%; margin: 18px 0 0 auto; position: relative; }
  .photo-small { height: clamp(185px, 54vw, 235px); }
  .photo-caption { font-size: 12px; }
  .place-line { display: grid; justify-content: start; gap: 15px; }
  .place-line > span { max-width: none; font-size: 12px; }
  .place-line .text-link { white-space: normal; min-height: 44px; align-items: center; }

  .experience-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; overflow: visible; }
  .experience-tabs button { width: 100%; min-height: 50px; padding: 12px 0; }
  .experience-image-wrap { height: clamp(290px, 80vw, 390px); }
  .experience-copy p { font-size: 16px; }
  .experience-heading p { font-size: 15px; }
  .round-link { min-height: 48px; }

  .article-hero > img { height: clamp(280px, 78vw, 390px); }
  .article-body { overflow-wrap: anywhere; }
  .original-gallery .zoom-icon, .bird-card .zoom-icon { width: 44px; height: 44px; }
  .footer-sitemap a { font-size: 14px; line-height: 1.6; display: inline-block; padding: 4px 0; }
  .footer-social a { min-width: 44px; min-height: 44px; }
  .gallery-nav, .dialog-close { min-width: 44px; width: 44px; height: 44px; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: clamp(2.45rem, 11vw, 2.7rem); }
  .scroll-cue { max-width: 124px; }
  .slide-count { display: none; }
  .experience-tabs { column-gap: 14px; }
  .experience-tabs button { font-size: 14px; }
  .photo-small-wrap { width: 82%; }
}

@media (max-height: 650px) and (max-width: 760px) {
  .hero { min-height: 590px; }
  .hero-copy { bottom: 115px; gap: 18px; }
  .hero h1 { font-size: clamp(2.35rem, 9vw, 3.2rem); }
}