/* Mobile navigation and touch layout share the desktop artwork and player. */
.site-header .nav-icon, .mobile-member-index { display: none; }

@media (max-width: 900px) {
  body { --mobile-controls-width: min(580px, calc(100vw - 40px)); --mobile-dock-space: calc(94px + env(safe-area-inset-bottom, 0px)); }
  .hero { width: min(100%, 620px); height: max(660px, 100svh); min-height: 660px; max-height: none; }
  .poster-artwork { height: calc(100% - 172px - env(safe-area-inset-bottom, 0px)); }
  .site-header { position: fixed; left: 0; translate: none; width: 100%; height: calc(76px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 24px 0; z-index: 60; animation: none; }
  .brand { width: 110px; }
  .motion-toggle { position: static; margin-left: auto; width: 44px; min-height: 44px; border: 1px solid #a64c6826; border-radius: 50%; background: #fff4f63d; }
  .site-header nav { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0; width: var(--mobile-controls-width); height: 64px; padding: 5px; border: 1px solid #fff7facf; border-radius: 20px; background: #fff4f8ed; box-shadow: 0 6px 24px #852e511a, inset 0 1px #fff; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
  .site-header .nav-link { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; min-height: 52px; padding: 5px 10px; border-radius: 15px; font-size: 11px; letter-spacing: .08em; color: #855568; transition: background .2s, color .2s, scale .2s; }
  .site-header .nav-link.active { background: #f3d4e1; color: #852449; }
  .site-header .nav-link::after { display: none; }
  .site-header .nav-icon { display: block; }
  .site-header .nav-icon .ui-icon { width: 21px; height: 21px; stroke-width: 1.8; }
  .site-header .nav-caption { display: none; }
  .nav-link:focus-visible { outline-offset: 2px; }
  .main-composition, .hero .orbit-scene, .hero .orbit-scene .heart-object, .motion-card { touch-action: pan-y pinch-zoom; }
  .orbit-scene, .keepsakes { left: -10%; top: 29%; width: 120%; }
  .lettering-aga { left: 1%; top: 20%; width: 81%; }
  .lettering-pe { left: 39%; top: 52%; width: 66%; }
  .city-print { bottom: 60px; width: 50%; }
  .cloud-print { bottom: 85px; width: 44%; }
  .cloud-scrap { top: 20%; }
  .doodle-one { top: 36%; }
  .music-slip { left: 50%; right: auto; translate: -50% 0; bottom: -82px; width: var(--mobile-controls-width); min-height: 76px; padding: 12px 14px; gap: 12px; transform: none; border-radius: 16px; background: #fff1f6e8; }
  .hero.motion-open .music-slip { opacity: 1; pointer-events: auto; transform: none; }
  .music-slip .vinyl { width: 48px; height: 48px; }
  .music-slip .play-button { width: 44px; height: 44px; flex: none; }
  .song-copy strong { font-size: 15px; }
  .song-status { font-size: 11px; }
  footer { bottom: calc(184px + env(safe-area-inset-bottom, 0px)); height: 24px; padding-inline: 24px; justify-content: space-between; }
  .hero .member-controls { flex-direction: column; gap: 10px; width: max-content; max-width: calc(100% - 24px); }
  .member-controls .member-tabs button { min-height: 48px; padding-inline: 14px; font-size: 14px; color: #855568; }
  .member-controls .member-tabs button[aria-pressed="true"] { color: #652039; }
  .member-controls .member-tabs button::after { left: 12px; right: 12px; }
  body[data-view="music"] #main, body[data-view="music"] footer { visibility: hidden; }
  #music-dialog { position: fixed; inset: calc(84px + env(safe-area-inset-top, 0px)) 16px var(--mobile-dock-space); width: min(588px, calc(100% - 32px)); height: auto; max-height: none; margin: 0 auto; padding: 20px; border: 1px solid #fff7fac9; border-radius: 24px; background: #fff2f8dc; box-shadow: 0 12px 40px #88334e12; z-index: 55; overscroll-behavior: contain; }
  #music-dialog .round-button { width: 44px; height: 44px; }
  #music-dialog h2 { font-size: clamp(22px, 5.5vw, 28px); margin-block: 24px; }
  #music-dialog .record-art { min-height: clamp(140px, 25svh, 240px); border-radius: 12px; }
  #music-dialog .track { min-height: 72px; }
  #music-dialog input[type="range"] { height: 44px; margin: 0; }
  #music-dialog .audio-controls { gap: 10px; }

  /* The open gallery is a quieter state of the same poster. Tie all scenery
     to reveal progress so closing and interrupted gestures restore it smoothly. */
  .main-composition { translate: 0 calc(24px * var(--member-reveal, 0)); }
  .hero .hero-title-behind { opacity: calc(1 - .88 * var(--member-reveal, 0)); }
  .hero .orbit-scene .heart-object { opacity: calc(1 - .45 * var(--member-reveal, 0)); }
  .city-print, .cloud-print { opacity: calc(.62 - .49 * var(--member-reveal, 0)); }
  .cloud-scrap { opacity: calc(.48 - .40 * var(--member-reveal, 0)); }
  .doodle { opacity: calc(1 - .8 * var(--member-reveal, 0)); }
  .print-smudge { opacity: calc(.08 - .06 * var(--member-reveal, 0)); }
  .motion-back::before { content: ""; position: absolute; inset: 0; background: #f5dce5; opacity: calc(.6 * var(--member-reveal, 0)); pointer-events: none; }
  .motion-back::after { opacity: calc(1 - .7 * var(--member-reveal, 0)); }
  .mobile-member-index { display: flex; align-items: center; gap: 12px; color: #98667b; font: 11px/20px Georgia, serif; font-variant-numeric: tabular-nums; letter-spacing: .12em; }
  .mobile-member-index::before, .mobile-member-index::after { content: ""; width: 24px; height: 1px; background: #b482982e; }
  body[data-view="members"] footer { visibility: hidden; }
  .site-header nav { border-color: #fff3f75c; background: #fff4f8c9; box-shadow: 0 4px 18px #852e510d; }
  .site-header .nav-link.active { background: #edc8d980; }
  .music-slip { border-color: #fff4f766; background: #fff1f6cc; box-shadow: none; }
}

@media (min-width: 560px) and (max-width: 900px) {
  .hero { min-height: 850px; }
  .orbit-scene, .keepsakes { top: 24%; }
  .lettering-aga { top: 14%; width: 73%; }
  .lettering-pe { top: 48%; width: 60%; }

  .city-print { width: 42%; }
  .cloud-print { width: 38%; }
}