/* Compact phone navigation only. The original scroll choreography is retained. */
@media (max-width:600px) and (orientation:portrait) {
  body {--project-top:calc(var(--safe-top,0px) + 58px)}
  .masthead {
    display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;
    height:var(--project-top);padding:var(--safe-top,0px) 5vw 0;gap:12px;
    background:linear-gradient(#080b12d9,#080b1240,transparent);
  }
  .masthead .wordmark {font-size:22px;margin-right:auto}
  .masthead .index-button {display:none}
  .masthead .index-button::before {content:'Menu';font-size:14px}
  .masthead .index-button span {font-size:17px}
  .masthead .project-link {display:none}
  .masthead .universe-back {display:flex;position:static;min-height:44px;align-items:center;padding:8px 4px;font-size:0;color:var(--gold);margin:0}
  .masthead .universe-back::before {content:'Universe';font-size:14px}
  .masthead .universe-back,.masthead .wordmark,#return-universe {
    touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  }
  .masthead .universe-back,.masthead .universe-back:hover,.masthead .universe-back:active,
  .masthead .wordmark:hover,.masthead .wordmark:active {
    background:transparent;border-color:transparent;box-shadow:none;
  }
  .masthead .universe-back:focus-visible {outline:1px solid var(--gold);outline-offset:3px}
  #chapter-menu {display:none!important}
  body:has(>#chapter-menu:not([hidden])) .masthead .project-link {
    display:none;position:fixed;left:5vw;right:5vw;width:90vw;justify-content:flex-start;
    min-height:48px;padding:12px 18px;margin:0;background:#111823;border:1px solid #c5ae8030;
    font-size:14px;line-height:1.4;white-space:normal;
  }
  .masthead .project-link {top:calc(var(--project-top) + 8px)}
  #chapter-menu {
    top:calc(var(--project-top) + 62px);left:5vw;right:5vw;width:90vw;padding:8px 18px;
    max-height:calc(100dvh - var(--project-top) - var(--safe-bottom,0px) - 168px);
  }
  #chapter-menu button {font-size:14px;padding:14px 0;min-height:44px}
  /* The document owns the gesture; content is advanced by the scene timeline. */
  body.phone-progressive-scroll .stage .constellation,
  body.phone-progressive-scroll .stage .about-continuation,
  body.phone-progressive-scroll .stage .eterno-history {overflow:hidden!important;overscroll-behavior:auto;touch-action:pan-y pinch-zoom}
}