/* A reading layout, independent of the desktop camera and JavaScript. */
.mobile-photo{display:none}
@media(max-width:900px){
  :root{scroll-behavior:auto;--page:24px}
  .journey{padding-top:110px}
  .visual-stage{position:relative;top:auto;height:auto;min-height:0;z-index:0;overflow:visible;margin:0 var(--page) 22px}
  #stage{position:relative;inset:auto;height:auto;min-height:0;width:100%;mask-image:none}
  #stage picture{display:block}
  #stage .photo-poster{position:static;inset:auto;width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain}
  .chapters{margin-top:0}
  .chapter{display:block;min-height:0;padding:0 var(--page) 64px;pointer-events:auto}
  .chapter .copy{width:100%;max-width:620px;margin:0 auto}
  .chapter h1,.chapter h2{max-width:22ch;font-size:32px;line-height:1.15;margin-bottom:20px}
  .chapter h1 br,.chapter h2 br{display:none}
  .chapter p,.chapter .lead{font-size:16px;line-height:1.65;max-width:60ch;margin-bottom:24px}
  .chapter .lead{color:#b9b9b6}
  .chapter .button{min-height:54px;font-size:15px;padding:16px 20px;justify-content:space-between;gap:22px}
  .introduction{padding-bottom:48px}
  .hero-foot{position:static;inset:auto;display:flex;flex-wrap:wrap;gap:8px 24px;margin:26px auto 0;font-size:13px;line-height:1.5;max-width:620px}
  .hero-foot span:last-child{text-align:left;max-width:none}
  .machine-control,.journey-tools,.photo-scene{display:none!important}
  .mobile-photo{display:block;margin:0 auto 28px;max-width:620px;background:#151515;overflow:hidden;aspect-ratio:4/3}
  .mobile-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);object-position:50% 55%}
  #sample .mobile-photo img{object-position:50% 25%}
  .chapter .year{font-family:Bodoni,serif;font-size:52px;line-height:1;margin-bottom:18px;color:#d9d9d5}
  .chapter .capacity{display:flex;gap:18px;align-items:center;margin-top:28px;margin-bottom:16px}
  .capacity strong{font-size:40px}
  .capacity span{font-size:14px;max-width:23ch;line-height:1.5}
  .chapter .text-link{font-size:15px;min-height:44px;padding:12px 0}
  .sample-note span{font-size:16px;line-height:1.5;margin-bottom:10px}
  .chapter .sample-note p{font-size:16px}
  .chapter .finish-line{font-size:17px;color:var(--white);margin-block:30px}
  .details-section{padding:56px var(--page);gap:32px}
  .details-section p,.questions details p{font-size:16px;line-height:1.7}
  .details-intro .detail-location{font-size:14px;margin-top:24px}
  .questions summary{min-height:48px;font-size:18px;display:flex;align-items:center;padding-right:30px}
  .questions summary:after{top:12px}
  .questions details{margin-bottom:20px;padding-bottom:20px}
  .questions details p{margin-top:12px}
  .site-explore{padding:48px var(--page)}
  .explore-links a{min-height:48px;font-size:18px}
  .contact-section{padding:54px var(--page);gap:28px}
  .contact-head h2{font-size:32px;max-width:22ch}
  .contact-wordmark{font-size:36px;margin-bottom:24px}
  .contact-option{font-size:25px;min-height:58px}
  .contact-option.contact-email{font-size:clamp(17px,5.2vw,24px);gap:14px}
  footer>div{flex-wrap:wrap;gap:12px 24px}
  footer>div span:last-child{margin-left:0}
  .asset-credit{line-height:1.7}
  .header .mobile-menu-panel{max-height:calc(100dvh - 110px);overflow:auto;overscroll-behavior:contain}
}
@media(min-width:601px) and (max-width:900px){
  .visual-stage{max-width:520px;margin-inline:auto}
  .chapter h1,.chapter h2{font-size:38px}
  .details-section,.contact-section,.site-explore{padding-inline:max(24px,calc((100vw - 620px)/2))}
}
@media(max-width:360px){
  :root{--page:20px}
  .chapter h1,.chapter h2,.contact-head h2{font-size:29px}
  .chapter .button{font-size:14px;gap:14px;padding-inline:16px}
  .capacity strong{font-size:35px}
  .capacity span{font-size:13px}
}