/* Past the Havens V32: original user-separated mobile art layers.
   Each section fills the dynamic VIEWPORT for snap boundaries while the
   foreground occupies stable 100svh, so collapsing browser bars never
   resize the illustration. Wide-screen desktop site is unchanged. */
.mobile-layered-art, .layered-paper-image, .layered-landscape-book { display: none; }

/* Phones in portrait, plus narrow devtools previews with a mouse pointer. */
@media (max-width: 600px) {
  html { scroll-snap-type: y mandatory !important; scroll-padding: 0 !important; }
  .scene, .scene.landing, .scene.interior {
    box-sizing: border-box; width: 100%; height: 100dvh; min-height: 100dvh;
    max-height: 100dvh; padding: 0; margin: 0; overflow: clip;
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  .scene .artboard, .scene.landing .artboard, .scene.interior .artboard {
    position: relative; width: 100vw; height: 100dvh; min-height: 0;
    max-width: none; max-height: 100dvh; aspect-ratio: auto;
    overflow: hidden; flex: none; container-type: inline-size;
  }
  .landing .mobile-landing-art, .interior .mobile-interior-art,
  .landing .mobile-art-navigation, .interior .mobile-interior-navigation,
  .interior .visual-stage { display: none !important; }
  .mobile-layered-art { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .layered-backdrop { position: absolute; inset: 0; width: 100%; height: 100%;
    max-width: none; object-fit: cover; object-position: center top;
    pointer-events: none; user-select: none; -webkit-user-drag: none; }
  .layered-stable-stage { position: absolute; left: 0; top: 0; right: 0;
    height: 100svh; pointer-events: none; }
  .layered-wordmark { position: absolute; display: block; width: 82%; height: auto;
    max-width: none; left: 9%; top: 5.5%; pointer-events: none; }
  .layered-tabs { position: absolute; width: 94%; left: 3%; aspect-ratio: 1172 / 113; pointer-events: none; }
  .layered-tabs.home-tabs { top: 26.0%; }
  .layered-tabs.inner-tabs { top: 6.9%; }
  .layered-tabs > img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
  .layered-tabs-links { position: absolute; inset: -18% 0; display: block; pointer-events: none; }
  .layered-tabs-links a { position: absolute; top: 0; height: 100%; width: 20%; display: block;
    pointer-events: auto; text-decoration: none; -webkit-tap-highlight-color: rgba(255,255,255,.12); }
  .layered-tabs-links a:focus-visible, .layered-collage-links a:focus-visible,
  .layered-monogram:focus-visible { outline: 3px solid #f0e7ce; border-radius: 4px; outline-offset: 1px; }
  .layered-collage { position: absolute; width: 96%; height: auto; left: 2%; top: 41.8%;
    aspect-ratio: 1135 / 664; pointer-events: none; }
  .layered-collage > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
  .layered-collage-links { position: absolute; inset: 0; pointer-events: none; }
  .layered-collage-links a { display: block; position: absolute; pointer-events: auto;
    -webkit-tap-highlight-color: rgba(255,255,255,.12); }
  .layered-monogram { display: block; position: absolute; bottom: 4%; left: 50%;
    width: 12%; aspect-ratio: 709 / 945; transform: translateX(-50%); pointer-events: auto; }
  .layered-monogram img { width: 100%; height: 100%; object-fit: contain; max-width: none; display: block; }
  .mobile-paper-shell { display: block; z-index: 3; pointer-events: none; position: absolute;
    left: 50%; top: 18.6svh; transform: translateX(-50%);
    width: min(86vw, 46.1svh); height: auto; aspect-ratio: 946 / 1416;
    min-height: 0; margin: 0; padding: 0; overflow: visible; }
  .mobile-paper-shell::before, .mobile-paper-shell::after,
  .mobile-paper-fill { display: none !important; }
  .layered-paper-image { display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; max-width: none; object-fit: fill;
    pointer-events: none; user-select: none; }
  .interior .paper-content, #music .long-paper-content {
    position: absolute; top: 7.2%; left: 9.3%; width: 80.7%; height: 72.8%;
    max-height: 72.8%; box-sizing: border-box; margin: 0;
    padding: 0 .12rem 0 0; overflow-y: auto; overflow-x: hidden;
    background: transparent; color: #080705; pointer-events: auto;
    overscroll-behavior-y: contain;
  }
  .interior .paper-content h2 { font-size: clamp(1.20rem, 6.2cqw, 1.85rem); }
  .interior .paper-content p { font-size: clamp(.95rem, 4.45cqw, 1.21rem); line-height: 1.28; }
  .interior .paper-content .preview-note, .interior .paper-content .support-note { font-size: clamp(.89rem, 4.05cqw, 1.09rem); }
  .interior .paper-content h3.section-subheading, .interior .paper-content h3.support-group-label { font-size: clamp(.98rem, 4.73cqw, 1.27rem); }
  #music .lyric-directory a { font-size: clamp(.93rem, 4.35cqw, 1.18rem); }
  .paper-content .support-links a, .paper-content .social-directory a { font-size: clamp(.94rem, 4.5cqw, 1.18rem); }
}
/* Accessibility: while browser is zoomed, the existing V30 zoom safety rule
   suspends scrolling/snap. The new layers never intercept native touch gestures. */
@media (max-width: 600px) {
  html.is-pinching, html.is-magnified { scroll-snap-type: none !important; }
}

/* Landscape phones retain the site's atmosphere but use a readable compact
   two-column fallback, not the squeezed desktop layout. Desktop computers and
   browser windows with a fine pointer keep the approved 16:9 design. */
/* V35 landscape-only finishing pass. Portrait and desktop remain approved as in V32.
   All positions are percentages of the responsive phone viewport. */
@media (min-width: 601px) and (orientation: landscape) and (pointer: coarse) {
  html { scroll-snap-type: y mandatory !important; }
  .scene, .scene.landing, .scene.interior {
    height: 100dvh; min-height: 100dvh; max-height: 100dvh;
    width: 100%; padding: 0; margin: 0; overflow: clip;
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  .scene .artboard, .scene.landing .artboard, .scene.interior .artboard {
    width: 100vw; height: 100dvh; max-height: 100dvh;
    max-width: none; aspect-ratio: auto; margin: 0; padding: 0;
    overflow: hidden; flex: none;
  }
  .landing .desktop-landing-art, .landing .landing-navigation,
  .interior .visual-stage { display: none !important; }
  .mobile-layered-art { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .layered-backdrop { position: absolute; inset: 0; width: 100%; height: 100%;
    max-width: none; object-fit: cover; object-position: center; pointer-events: none; }
  /* Match scene height so Chrome's collapsible bars cannot strand the Home
     link behind the page instead of near the visible bottom. */
  .layered-stable-stage { position: absolute; inset: 0; height: 100dvh; pointer-events: none; }
  .layered-wordmark { position: absolute; width: 39%; height: auto; left: 3%; top: 18%; max-width: none; }
  .layered-tabs { position: absolute; width: 42%; left: 2%; top: 64%;
    aspect-ratio: 1172 / 113; pointer-events: none; }
  .layered-tabs > img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .layered-tabs-links { position: absolute; inset: -20% 0; pointer-events: none; }
  .layered-tabs-links a { position: absolute; top: 0; width: 20%; height: 100%; pointer-events: auto; }
  .layered-collage { position: absolute; top: 12%; left: 43%; width: 55%;
    aspect-ratio: 1135 / 664; pointer-events: none; }
  .layered-collage > img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .layered-collage-links { position: absolute; inset: 0; pointer-events: none; }
  .layered-collage-links a { position: absolute; display: block; pointer-events: auto; }
  /* Both Home and interior sheets return to the visual center of the book. */
  /* One bottom-centered Home monogram on every landscape scene. */
  .layered-monogram { position: absolute; width: 3.7%; aspect-ratio: 709 / 945;
    left: 50%; bottom: 2%; z-index: 8; transform: translateX(-50%);
    pointer-events: auto; }
  .layered-monogram img { display: block; width: 100%; height: 100%; object-fit: contain; }

  /* A crop of the already-supplied background's BOOK AREA, not a new image.
     This keeps the entire book in view instead of magnifying and clipping it. */
  .interior .mobile-layered-inner .layered-backdrop { display: none; }
  .interior .mobile-layered-inner .layered-landscape-book {
    display: block; position: absolute; width: 72%; height: 77%;
    left: 14%; top: 13%; max-width: none; object-fit: fill;
    pointer-events: none; user-select: none;
  }
  /* Match the LANDING tabs exactly in scale; center and anchor near the top. */
  .interior .layered-tabs.inner-tabs { width: 42%; left: 29%; top: 2.6%; }
  .interior .layered-monogram { width: 3.7%; left: 50%; bottom: 2%; z-index: 8; }
  .mobile-paper-shell { display: block; position: absolute; z-index: 3;
    width: 58%; height: 73%; aspect-ratio: auto;
    top: 13%; left: 21%; transform: none; pointer-events: none;
    padding: 0; margin: 0; background: transparent; overflow: visible; }
  .layered-paper-image { display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: fill; max-width: none; pointer-events: none; }
  .mobile-paper-fill, .mobile-paper-shell::before, .mobile-paper-shell::after { display: none !important; }
  .interior .paper-content, #music .long-paper-content {
    position: absolute; left: 8.8%; top: 8.2%; width: 82%; height: 74%;
    max-height: 74%; padding: 0 2px 0 0; margin: 0; background: transparent;
    overflow-y: auto; overflow-x: hidden; pointer-events: auto;
    overscroll-behavior-y: contain;
  }
  .interior .paper-content h2 { font-size: clamp(1.02rem, 2.2cqw, 1.55rem); }
  .interior .paper-content p { font-size: clamp(.92rem, 1.75cqw, 1.12rem); line-height: 1.27; }
  .interior .paper-content .preview-note, .interior .paper-content .support-note { font-size: clamp(.86rem, 1.7cqw, 1rem); }
  .interior .paper-content h3.section-subheading, .interior .paper-content h3.support-group-label { font-size: clamp(.92rem, 1.8cqw, 1.1rem); }
  #music .lyric-directory a, .paper-content .support-links a, .paper-content .social-directory a {
    font-size: clamp(.9rem, 1.8cqw, 1.1rem); }

  /* V35: In landscape, both auxiliary pull-out sheets match the exact
     on-book paper rectangle. Use the same original horizontal paper artwork,
     instead of squeezing an unrelated portrait sheet into this short screen.
     The backdrop and V20 lift/fade remain unchanged. */
  .lyric-dialog,
  .credits-dialog {
    width: 58vw;
    height: 73dvh;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    transform: rotate(-.25deg);
  }
  .lyric-dialog .lyric-sheet,
  .credits-dialog .lyric-sheet {
    background: url('assets/paper-sheet-cropped.webp') center / 100% 100% no-repeat;
  }
  .lyric-dialog .lyric-sheet-art,
  .credits-dialog .lyric-sheet-art { display: none; }
  .lyric-dialog .lyric-sheet-inner,
  .credits-dialog .lyric-sheet-inner { inset: 8.2% 9.2% 13.5% 8.8%; }
  .lyric-dialog .lyric-sheet-heading,
  .credits-dialog .lyric-sheet-heading {
    gap: .55rem; padding-bottom: .22rem; margin-bottom: .42rem;
  }
  .lyric-dialog .lyric-sheet-heading h2 { font-size: clamp(1.08rem, 2.35vw, 1.48rem); }
  .lyric-dialog .lyric-close { font-size: clamp(.85rem, 1.6vw, 1.05rem);
    min-width: 44px; min-height: 34px; align-items: flex-start; }
  .lyric-dialog .lyric-transcript {
    font-size: clamp(.94rem, 1.98vw, 1.13rem);
    line-height: 1.22;
    padding-bottom: .7rem;
  }
  .credits-dialog .lyric-sheet-heading h2 { font-size: clamp(1rem, 2.12vw, 1.34rem); }
  .credits-dialog .credits-sheet-body {
    font-size: clamp(.88rem, 1.73vw, 1.05rem);
    line-height: 1.2;
    padding-bottom: .7rem;
  }
  .mobile-layered-art a:focus-visible { outline: 3px solid #f0e7ce; outline-offset: 1px; }
}

/* V38: iOS WebKit fragment links can snap back to the previous root snap
   point. Keep snap off after an explicit section-link turn; mobile.js restores
   normal one-finger swipe snapping at the next outer-page gesture. No effect
   on Android, desktop, lyrics, or the visual design. */
@media (max-width: 600px), (pointer: coarse) {
  html.ios-direct-section-nav {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
  }
}