/* V31 — user-reviewed mobile portrait artwork. Keep both 1200×2600 PNGs
   completely visible and undistorted while snapping one full page at a time.
   The interior reader retains independent scrolling, like the desktop book.
   Desktop styles/assets remain unmodified. */
.mobile-landing-art, .mobile-art-navigation, .mobile-interior-art,
.mobile-interior-navigation { display: none; }
.mobile-paper-shell { display: contents; }
.mobile-paper-fill { display: none; }
@media (max-width: 600px) {
  :root { --mobile-nav-height: 0px; }
  html {
    /* Native touch swipes settle on a complete scene, never between pages.
       Desktop's separate wheel-based pager remains untouched. */
    scroll-snap-type: y mandatory !important;
    scroll-padding: 0;
    scrollbar-gutter: auto;
    scrollbar-width: none;
  }
  html.lyrics-open { scroll-snap-type: none !important; }
  body, main { width: 100%; padding: 0; margin: 0; }
  html::-webkit-scrollbar { display: none; }
  body { min-width: 0; margin: 0; overflow-x: clip; }
  .mobile-navigation { display: none !important; }
  .scene, .scene.landing, .scene.interior {
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scroll-margin-top: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #000;
  }
  /* Full available visual viewport, no CSS edge margins. A 6:13 portrait
     necessarily leaves side space on 400×734 (the image fills the height);
     removing that space by force would stretch the band or crop the monogram.
     Small-viewport height remains stable while the mobile address bar moves. */
  .scene .artboard, .landing .artboard, .interior .artboard {
    position: relative;
    display: block;
    flex: none;
    width: min(100vw, calc(100svh * 6 / 13));
    height: auto;
    min-height: 0;
    max-width: none;
    aspect-ratio: 6 / 13;
    margin: 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    container-type: inline-size;
    background: #000;
  }
  .landing .desktop-landing-art,
  .landing .landing-navigation { display: none; }
  .landing .mobile-landing-art {
    position: absolute;
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;  /* exact matching aspect ratios; no distortion */
    user-select: none;
    -webkit-user-drag: none;
  }
  .landing .mobile-art-navigation,
  .interior .mobile-interior-navigation {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
  }
  .mobile-art-link {
    position: absolute;
    display: block;
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(255,255,255,.13);
  }
  .mobile-art-link:focus-visible {
    outline: 3px solid #f0e7ce;
    outline-offset: -3px;
    border-radius: 4px;
    background: rgba(255,255,255,.08);
  }
  .interior .visual-stage {
    position: absolute;
    display: block;
    inset: 0;
    width: 100%; height: 100%;
    aspect-ratio: auto;
    pointer-events: none;
  }
  .interior .visual-stage .base-art,
  .interior .visual-stage .book-navigation,
  .interior .visual-stage .monogram-link { display: none; }
  .interior .mobile-interior-art {
    position: absolute;
    display: block;
    inset: 0;
    width: 100%; height: 100%;
    max-width: none;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .mobile-paper-shell {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    min-height: 0;
    padding: 0; margin: 0;
    pointer-events: none;
    z-index: 3;
    isolation: auto;
  }
  .mobile-paper-shell::before, .mobile-paper-shell::after,
  .mobile-paper-fill { display: none !important; }
  .interior .paper-content,
  #music .long-paper-content {
    position: absolute;
    display: block;
    top: 25.0%;
    left: 12.8%;
    width: 73.8%;
    height: 46.2%;
    max-height: 46.2%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 .24rem 0 0;
    margin: 0;
    outline-offset: -4px;
    background: transparent;
    border: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(25,20,18,.55) transparent;
    overscroll-behavior-y: contain;
    pointer-events: auto;
    color: #080705;
  }
  .interior .paper-content::-webkit-scrollbar { width: 4px; }
  .interior .paper-content::-webkit-scrollbar-thumb { background: rgba(25,20,18,.45); border-radius: 4px; }
  .interior .paper-content h2 { font-size: clamp(1.25rem, 6.2cqw, 1.85rem); margin-bottom: .5em; }
  .interior .paper-content h2::after { margin-top: .26em; }
  .interior .paper-content p { font-size: clamp(.97rem, 4.55cqw, 1.22rem); line-height: 1.28; margin-bottom: .83em; }
  .interior .paper-content .preview-note, .interior .paper-content .support-note { font-size: clamp(.91rem, 4.18cqw, 1.1rem); }
  .interior .paper-content h3.section-subheading,
  .interior .paper-content h3.support-group-label { font-size: clamp(.99rem, 4.85cqw, 1.28rem); }
  #music .lyric-directory a {
    display: inline-flex;
    align-items: center;
    white-space: normal;
    min-height: 30px;
    font-size: clamp(.95rem, 4.5cqw, 1.2rem);
  }
  .paper-content .support-links a,
  .paper-content .social-directory a { font-size: clamp(.96rem, 4.6cqw, 1.18rem); }
  .paper-content .social-directory a { min-height: 34px; }
  .paper-content .contact-address a { overflow-wrap: anywhere; }
  /* The reading window ends at 71.2% of the page, above the bottom
     weathered edge. Scroll within this paper without changing sections;
     wheel/swipe outside the paper turns one whole scene at a time. */
}

/* V29: while magnified, the current scene is a bounded page to inspect.
   Freeze only the outer document/layout viewport (which contains the other
   scenes); keep the browser's native visual viewport free to pinch and pan
   within the current 100dvh scene. Reenable normal page snap at scale 1.
   Do not disable touch events or change touch-action: pinch zoom is native. */
@media (max-width: 600px), (pointer: coarse) {
  html.is-pinching, html.is-magnified {
    scroll-snap-type: none !important;
    overflow-y: hidden !important;
    overscroll-behavior-y: none;
  }
}

/* V30: phones held sideways show the familiar wide book, but unlike a
   desktop they have a coarse touch pointer. Native CSS section snapping
   must apply to those gestures too; do not require mouse/hover hardware. */
@media (min-width: 601px) and (pointer: coarse) {
  html { scroll-snap-type: y mandatory; scroll-padding: 0; }
  .scene { scroll-snap-align: start; scroll-snap-stop: always; min-height: 100dvh; }
}

/* V31: landscape on an actual touch phone uses the original wide-book artwork.
   Fit the entire 16:9 illustration into the *stable* available screen: V30's
   155svh cap and scene padding left room unused around the book. Keep that
   desktop-specific composition unchanged on fine-pointer monitors.

   A mobile browser controls when its own URL/navigation bars appear; the site
   cannot force them to stay hidden.  svh keeps our artwork and scene heights
   fixed while Chrome's bars expand/collapse, preventing the visible resize
   produced by dynamic 100dvh units.  Letterboxing is intentional if the
   device's view area is wider than the source illustration. */
@media (min-width: 601px) and (orientation: landscape) and (pointer: coarse) {
  html {
    scrollbar-gutter: auto;
    scrollbar-width: none;
    scroll-padding: 0;
    overscroll-behavior-x: none;
  }
  html::-webkit-scrollbar { display: none; }
  body { margin: 0; min-width: 0; overflow-x: clip; }
  .scene, .scene.landing, .scene.interior {
    box-sizing: border-box;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-margin-top: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .scene .artboard, .landing .artboard, .interior .artboard {
    width: min(100%, 177.77778svh);
    max-width: none;
    aspect-ratio: 16 / 9;
    margin: 0;
    flex: none;
  }
  /* Preserve the precise desktop paper location; only adjust the minimum
     typography that was too large for a landscape phone's short viewport. */
  .interior .paper-content h2 {
    font-size: clamp(1.05rem, 2.6cqw, 1.7rem);
    line-height: 1.05;
  }
  .interior .paper-content p {
    font-size: clamp(.8rem, 2cqw, 1.16rem);
    line-height: 1.27;
    margin-bottom: .76em;
  }
  .interior .paper-content h3.section-subheading,
  .interior .paper-content h3.support-group-label {
    font-size: clamp(.84rem, 2.05cqw, 1.2rem);
    line-height: 1.18;
  }
  .interior .paper-content .preview-note,
  .interior .paper-content .support-note {
    font-size: clamp(.75rem, 1.8cqw, 1.08rem);
    line-height: 1.22;
  }
  .interior .paper-content .support-links a,
  .interior .paper-content .social-directory a {
    font-size: clamp(.8rem, 2cqw, 1.16rem);
    line-height: 1.25;
  }
  #music .lyric-directory a {
    font-size: clamp(.8rem, 1.95cqw, 1.12rem);
    min-height: 32px;
  }
}