/* Narrow-screen layout: scale display lettering to the content box,
   and let ordinary text wrap rather than hiding overflow. Desktop unchanged. */
@media (max-width: 760px) {
  .photo-page h1 { font-size: 12vw; line-height: 1.05; }
  .video-page h1 { font-size: 14vw; line-height: 1.05; }
  .photo-page h1, .video-page h1 { max-width: 100%; overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
  header { gap: 14px; }
  header > *, nav, nav a { min-width: 0; }
  header > .text-link { max-width: 52%; text-align: right; }
  nav { max-height: calc(100svh - 65px); overflow-y: auto; }
  .menu-toggle { flex-shrink: 0; min-height: 44px; }
  .video-first .hero h1 { font-size: 18vw; width: 100%; max-width: 100%; line-height: 1.05; }
  .video-first .hero h1 .name { width: auto; max-width: 100%; }
  .video-first .hero-meta > span { white-space: normal; max-width: 100%; min-width: 0; }
  .video-first .hero-meta { gap: 12px 20px; }
  .hero-overlay { min-width: 0; }
  .film-controls { gap: 8px; }
  .film-controls button { min-width: 0; max-width: 100%; white-space: normal; }
  .section-label > *, .about-story, .about-heading, .about-bottom, .bio,
  .media-heading > *, .format-intro > *, .format-card-heading > *,
  .detail > *, .contact-bar > *, .format-foot > *, footer > * { min-width: 0; }
  h2, h3, .section-label, .text-link, .detail, .lead, .bio, footer {
    overflow-wrap: anywhere;
  }
  .format-card-heading { grid-template-columns: 28px minmax(0, 1fr); }
  .format-card-heading h3 { font-size: 7.4vw; }
  .text-link { max-width: 100%; gap: 16px; }
  .text-link:hover { gap: 16px; }
  .format-foot { gap: 16px; flex-wrap: wrap; }
  .portrait-videos, .photo-gallery { min-width: 0; max-width: 100%; }
  .portrait-video video, .gallery-photo img { max-width: 100%; }
}