/* Final mobile layout: every section must fit the viewport without clipping. */
@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  main,
  main > section,
  main > section > *,
  .hero-copy,
  .chapter-head,
  .film-copy,
  .owner-film,
  .owner-copy,
  .visit-copy {
    min-width: 0;
    max-width: 100%;
  }

  /* Keep the complete vertical film visible instead of zooming it to fill. */
  .hero-window {
    width: 100%;
    height: 64svh;
    min-height: 500px;
    background: #080503;
  }

  .hero-window video {
    object-fit: contain;
    object-position: center;
  }

  .origin-stamp b { font-size: clamp(39px, 12vw, 50px); }

  /* The world map previously remained 780px wide on a 390px viewport. */
  .map-stage {
    width: 100%;
    max-width: 100%;
    margin: 55px auto 0;
    transform: none;
  }

  .map-stage > img,
  .map-stage > svg,
  .map-labels { max-width: 100%; }

  /* Show the full portrait bowl photograph at its native 9:16 ratio. */
  .bowl-anatomy {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .bowl-anatomy figure {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 9 / 16;
  }

  .bowl-anatomy figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .bowl-anatomy .anatomy-title,
  .bowl-anatomy ol { width: auto; min-width: 0; }
  .bowl-anatomy .anatomy-title h2 { font-size: clamp(34px, 10vw, 40px); }

  /* Override the desktop minmax columns that survived into mobile. */
  .monday {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .monday figure,
  .monday > div { width: 100%; min-width: 0; }

  .owner,
  .visit,
  .faq { grid-template-columns: minmax(0, 1fr); }

  .owner-film,
  .owner-copy,
  .visit-copy,
  .visit iframe { width: 100%; max-width: 100%; }

  .owner-copy blockquote {
    max-width: 100%;
    font-size: clamp(28px, 8.5vw, 36px);
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  .visit-copy h2 { font-size: clamp(34px, 10vw, 40px); }

  .field-notes > div,
  .editorial-recap > div { grid-template-columns: minmax(0, 1fr); }

  .field-notes article,
  .editorial-recap article { width: 100%; min-width: 0; }

  .film-copy h3,
  .menu-sheet h3,
  .field-notes article h3,
  .editorial-recap article h3,
  .owner-copy blockquote:not(:lang(ja)) {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .mobile-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .mobile-bar { padding-bottom: env(safe-area-inset-bottom); background: var(--red); }
  .mobile-bar a { min-width: 0; }
  footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

  html:not([lang="ja"]) .pass-copy h2,
  html:not([lang="ja"]) .faq h2 {
    font-size: clamp(31px, 10vw, 39px);
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  .hero h1,
  .chapter-head h2,
  .gathering-map h2,
  .world-data h2,
  .field-notes h2,
  .editorial-recap h2,
  .closing h2 { font-size: 36px; }

  .world-copy h2 { font-size: 31px; }
  .origin-stamp b { font-size: 37px; }
  .lanterns span { width: 42px; }
  .hero h1,
  .field-notes h2 { font-size: 34px; letter-spacing: 0; }
}