/* Mobile refinement for the isolated cinematic prototype. Loaded last.
   No scroll interception; content and links remain native. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
.viewport-probe{position:fixed;top:0;left:0;width:1px;height:100svh;visibility:hidden;pointer-events:none;contain:strict}
a,button,input,select,summary{touch-action:manipulation}
dialog#menu,dialog#site-menu{overscroll-behavior:contain;padding-bottom:var(--safe-bottom)}
.menu-top,.menu-head{position:sticky;top:0;z-index:3;background:#0b0b0c}
.topbar,.route-cinema .site-bar{padding-left:max(var(--pad,32px),var(--safe-left));padding-right:max(var(--pad,32px),var(--safe-right));padding-top:var(--safe-top)}
.menu-top,.route-cinema .menu-head{padding-left:max(24px,var(--safe-left));padding-right:max(24px,var(--safe-right));padding-top:var(--safe-top)}
.skip,.skip-link{margin-left:var(--safe-left);margin-top:var(--safe-top)}
body.is-ready.cinema-expanded .cinema-exit{bottom:calc(22px + var(--safe-bottom))}
.route-cinema .menu-button,.route-cinema .menu-close,.menu-close,.menu-trigger{min-height:44px;min-width:44px}

@media(max-width:800px){
 html{scroll-padding-top:calc(96px + var(--safe-top))}
 .topbar,.route-cinema .site-bar,.route-cinema .site-bar.is-solid{height:calc(80px + var(--safe-top));padding-top:var(--safe-top);padding-left:max(24px,var(--safe-left));padding-right:max(24px,var(--safe-right))}
 .menu-top,.route-cinema .menu-head{height:calc(80px + var(--safe-top));padding-top:var(--safe-top);padding-left:max(24px,var(--safe-left));padding-right:max(24px,var(--safe-right))}
 .menu-grid,.route-cinema .menu-body{padding-bottom:calc(32px + var(--safe-bottom))}
 .menu-grid nav a,.route-cinema .menu-primary a{font-size:clamp(28px,8.4vw,42px);gap:16px;min-height:58px;overflow-wrap:anywhere}
 .menu-grid nav a small,.route-cinema .menu-primary small{flex:none;font-size:12px}
 .menu-grid nav a>span{flex:none}
 .route-cinema .menu-primary a>span{min-width:0}
 .menu-grid aside a,.route-cinema .menu-facts a{display:flex;align-items:center;min-height:44px;font-size:16px}
 .route-cinema .motion-switch{min-height:44px}
 .is-ready:not(.linear) .chapter-nav{bottom:calc(8px + var(--safe-bottom));left:max(12px,var(--safe-left));gap:0;padding:0}
 .chapter-nav a{width:44px;min-width:44px;min-height:44px;font-size:12px}
 .is-ready .motion-toggle{bottom:calc(8px + var(--safe-bottom));right:max(12px,var(--safe-right));min-height:44px;padding:8px 6px;font-size:11px;line-height:1.4}
 .is-ready:not(.linear) .scene-bottom{bottom:calc(68px + var(--safe-bottom))!important;font-size:11px;line-height:1.5}
 .is-ready:not(.linear) .scene-top{top:calc(107px + var(--safe-top))!important}
 .scene-bottom a{min-height:44px;display:inline-flex;align-items:center}
 .temple-choices{flex-wrap:wrap;gap:4px 16px}
 .temple-choices button{min-height:44px;min-width:44px;padding-block:8px}
 .temple-bottom>a{margin-top:4px}
 .line-link{min-height:44px}
 #light-field{display:none}
 .scene-copy,.scene-copy h1,.scene-copy h2{will-change:auto!important}
 .route-motion-toggle{right:max(12px,var(--safe-right));bottom:calc(12px + var(--safe-bottom));min-width:44px;min-height:44px}
 .reading .page-head.route-hero{padding:calc(116px + var(--safe-top)) max(24px,var(--safe-right)) calc(78px + var(--safe-bottom)) max(24px,var(--safe-left));min-height:100svh;justify-content:center}
 .reading .page-head.route-compact{min-height:min(680px,100svh)}
 .route-caption{position:static;margin-top:24px;gap:8px;max-width:calc(100% - 44px)}
 .route-source{font-size:12px;max-width:none;min-height:44px;display:flex;align-items:center}
 .route-motion-hint{display:none}
 .reading .route-hero .breadcrumbs{font-size:13px}
 .reading .route-hero .breadcrumbs a{display:inline-flex;min-height:32px;align-items:center}
 .route-hero-copy,.route-material,.reading .section>*{min-width:0}
 .reading .route-material :is(p,li,dd){font-size:17px;line-height:1.7}
 .reading .route-material :is(.caption,.source-note,figcaption,.small-label,.filter-result){font-size:13px;line-height:1.6}
 .reading .route-material :is(.source-note,.caption,figcaption) .text-link{font-size:13px}
 .reading .route-material .archive-item p{font-size:15px}
 .reading .route-material :is(.text-link,.button,summary){min-height:44px}
 .reading .route-material .text-link{display:inline-flex;align-items:center;max-width:100%;font-size:16px;overflow-wrap:anywhere}
 .reading .route-material .archive-item>.small-label{font-size:12px}
 .reading .route-material .registry dd{overflow-wrap:anywhere}
 .reading .route-next{padding:52px max(24px,var(--safe-right)) 76px max(24px,var(--safe-left))}
 .reading .route-next a{overflow-wrap:anywhere}
 .site-footer .footer-grid a,.footer-bottom a{min-height:44px;display:inline-flex;align-items:center}
 .site-footer .footer-bottom{padding-bottom:calc(24px + var(--safe-bottom))}
 body:not(.route-cinema) footer{padding-bottom:calc(86px + var(--safe-bottom))}
 .route-cinema .topbar .header-link{display:block;font-size:13px;max-width:160px;text-align:right}
 .auto-flow .motion-toggle{display:none}
}

/* Keep the four pinned chapters readable on a small, but portrait, phone. */
@media(max-width:800px) and (min-height:521px) and (max-height:700px){
 .is-ready:not(.linear) .scene .scene-copy{top:calc(24svh + var(--safe-top))!important}
 .is-ready:not(.linear) :is(.scene.opening,.scene.mission,.scene.people,.scene.heritage) :is(h1,h2){font-size:clamp(50px,16vw,68px)!important;line-height:.94;margin:12px 0 16px}
 .scene-copy .intro{font-size:17px;line-height:1.5}
 .scene-copy .kicker{font-size:10px}
 .scene-copy .line-link{margin-top:14px;font-size:14px;padding-block:8px}
 .scene-bottom>p{max-width:60%}
}

/* Short stable viewports: same art in normal flow. This class remains stable
   when mobile browser chrome changes the *visual*, not small, viewport. */
.auto-flow .scene{min-height:100svh;padding:calc(108px + var(--safe-top)) max(32px,var(--safe-right)) calc(40px + var(--safe-bottom)) max(32px,var(--safe-left))}
.auto-flow .scene-top{position:static;display:flex;gap:20px;margin-bottom:24px}
.auto-flow .scene-copy{position:relative;top:auto!important;padding-top:0;max-width:680px}
.auto-flow .scene h1,.auto-flow .scene h2{font-size:clamp(50px,9vw,76px)!important;margin:12px 0 20px;line-height:.95}
.auto-flow .scene-copy .intro{font-size:18px;line-height:1.55}
.auto-flow .scene-bottom{position:static;margin-top:28px;gap:24px;align-items:center;font-size:12px}
.auto-flow .scene-bottom>p{max-width:60%}
.auto-flow .scene .line-link{min-height:44px}
.auto-flow .motion-toggle{display:none}
@media(max-height:520px){
 .reading .page-head.route-hero{min-height:0;padding-top:calc(108px + var(--safe-top));padding-bottom:64px}
 .reading .route-hero h1{font-size:clamp(48px,7vw,68px)}
 .route-caption{position:static;margin-top:28px;max-width:calc(100% - 52px)}
 .route-source{max-width:100%;min-height:44px;display:flex;align-items:center}
 .route-motion-toggle{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;right:max(12px,var(--safe-right));bottom:calc(12px + var(--safe-bottom))}
 .route-motion-glyph{display:block;font:20px/1 Arial,sans-serif}
 .route-motion-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

@media(pointer:coarse){#light-field{display:none}.chapter-nav a,.motion-toggle{min-height:44px}}
/* Keep the desktop control pass clear of the mission caption too. */
@media(min-width:801px) and (min-height:791px) and (max-height:1000px){
 .is-ready:not(.linear) .scene.mission .scene-copy{top:26%}
 .is-ready:not(.linear) .scene.mission h2{font-size:clamp(86px,min(12vw,17svh),184px)}
}
@media print{.route-caption{display:none!important}}