/* A separate mobile composition; desktop choreography stays unchanged. */
.mobile-intro-note{display:none}
@media(max-width:700px){
 .header,.header.scrolled{position:fixed;inset:0 0 auto;transform:none;margin:0;width:100%;height:calc(72px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px));background:#080b12;isolation:isolate;border-bottom:1px solid #b4caed24}
 .header:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,#4678ff12,transparent 45%,#ff4a5910);pointer-events:none}
 .header nav{margin-left:auto}.header .nav-quiz{min-height:44px;color:#f1f5ff;background:#233858;border-color:#a7c4ee5c}
 .intro-top{top:calc(91px + env(safe-area-inset-top,0px));left:24px;right:24px}
 .scene{top:calc(72px + env(safe-area-inset-top,0px))}
 .opening-sheet{right:auto;border-radius:2px;background:radial-gradient(ellipse at 10% 10%,#fffdf5,transparent 65%),linear-gradient(125deg,#e3e8ee,#f4f0e5 52%,#e9dfe2);border:1px solid #fffc;box-shadow:-13px 6px 42px #4778ff26,14px 7px 46px #ff4a5921,0 26px 55px #0008,inset 0 1px 0 #fff}
 .opening-copy{padding:18px 12px;gap:0}
 .opening-slogan{font-size:clamp(23px,6.6vw,37px)!important;letter-spacing:-.8px!important;line-height:1.16;padding:0;text-shadow:0 1px 0 #fff8}
 .opening-copy .opening-promise{display:none}
 .opening-flap path{stroke:#7e8798;opacity:.58;stroke-width:1}
 .opening-flap .envelope-bottom-seams{opacity:.4}
 .opening-sheet:after{content:'';position:absolute;inset:-80%;pointer-events:none;z-index:3;background:linear-gradient(110deg,transparent 43%,#fff8 50%,transparent 57%);transform:translateX(-65%);animation:paper-arrival 1.8s .25s ease-out both}
 .mobile-intro-note{display:block;position:absolute;top:var(--opening-note-top,60%);left:20px;right:20px;text-align:center;opacity:var(--opening-note-opacity,1);pointer-events:none;color:#f1f3f8}
 .mobile-intro-note strong{display:block;font-size:clamp(18px,4.8vw,24px);font-weight:400;line-height:1.3;letter-spacing:-.35px}
 .mobile-intro-note p{font-size:14px;line-height:1.55;color:#aabbd5;margin:13px 0 0}
 .scroll-cue{bottom:max(24px,env(safe-area-inset-bottom,0px));gap:9px}.scroll-cue>span:last-child{font-size:11px;letter-spacing:.2px;color:#cbd9ed}
 .site-backdrop .light.blue{left:5%;opacity:.9}.site-backdrop .light.red{right:4%;opacity:.85}
 .site-backdrop .ambient-field{background:radial-gradient(ellipse at 0% 37%,#2458d62b,transparent 52%),radial-gradient(ellipse at 100% 49%,#bd29352b,transparent 50%)}
 .motion-reduced .mobile-intro-note{display:none}
}
@keyframes paper-arrival{to{transform:translateX(65%)}}
@media(prefers-reduced-motion:reduce){.opening-sheet:after{animation:none;display:none}}
.motion-reduced .opening-sheet:after{animation:none;display:none}

/* Native gestures: remove double-tap zoom, retain browser pinch zoom everywhere. */
html{touch-action:manipulation}
.portrait-wall{touch-action:pan-y pinch-zoom}
button,a,input,select,textarea,summary{touch-action:manipulation}
@media(max-width:700px){
 .opening-sheet{color:#f1f5ff;border:1px solid #b3d4ff85;border-radius:9px;background:radial-gradient(ellipse at 0 5%,#3268cbd9,transparent 65%),radial-gradient(ellipse at 105% 100%,#b13156b3,transparent 60%),linear-gradient(135deg,#182c50,#121b30 56%,#37203a);box-shadow:-12px 0 48px #326fff35,15px 8px 48px #ff426b25,0 28px 60px #0009,inset 0 1px 0 #e7f1ff75,inset 0 -1px 0 #879dd940}
 .opening-sheet:before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,transparent 0 3px,#c4dbff06 3px 4px),linear-gradient(90deg,#5685ff 0 32%,#e7efff 35% 65%,#ff5473 68%);background-size:auto,62px 3px;background-position:0 0,50% calc(100% - 18px);background-repeat:repeat,no-repeat}
 .opening-slogan{position:relative;color:#f4f6ff;text-shadow:0 2px 18px #050e3480;font-family:'Avote Editorial',Georgia,serif;font-weight:400!important;letter-spacing:-.9px!important;font-size:clamp(25px,7vw,39px)!important}
 .opening-slogan span{color:#ff6d82;text-shadow:0 0 18px #ff476b80}
 .opening-flap path{stroke:#b9d4ff;opacity:.54;stroke-width:.65;fill:#7ba8ff0a}
 .opening-flap .envelope-bottom-seams{opacity:.3;fill:none}
 .opening-sheet:after{background:linear-gradient(110deg,transparent 44%,#b9d9ff26 50%,transparent 56%);animation-duration:2.2s}
 .scene:not(.webgl-ready) .paper-bottom{background:linear-gradient(135deg,#31558d,#192a4b 57%,#67304b)}
 .scene:not(.webgl-ready) .paper-top{background:linear-gradient(145deg,#4269a5,#202f50 70%,#61314b)}
 /* Flat touch rail keeps the same portraits and metallic frames, with neighbors visible. */
 .portrait-wall,.scene.webgl-ready .portrait-wall{inset:28% 0 22%;perspective:none;touch-action:manipulation;overflow:visible}
 .portrait-ring{display:flex;align-items:center;gap:14px;overflow-x:auto;overflow-y:hidden;padding:8px max(44px,calc((100vw - 264px)/2));scroll-snap-type:x mandatory;scroll-padding-inline:max(44px,calc((100vw - 264px)/2));scrollbar-width:none;transform-style:flat;touch-action:manipulation;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 .portrait-ring::-webkit-scrollbar{display:none}
 .portrait-ring>.portrait-card{position:relative!important;left:auto!important;top:auto!important;flex:0 0 min(68vw,264px);width:min(68vw,264px);max-width:none;height:min(100%,382px);transform:none!important;scale:1!important;opacity:1!important;visibility:visible!important;filter:none!important;scroll-snap-align:center;scroll-snap-stop:normal;will-change:auto;touch-action:manipulation}
 .portrait-panel,.gallery-room{display:none!important}
 .gallery-side-arrow{background:#101d30e8!important;border-color:#b3cfff70!important;width:36px!important;height:44px!important;top:49%!important}
 .gallery-controls .gallery-hint{max-width:185px;font-size:11px!important;line-height:1.5}
 .portrait-caption strong{font-size:23px}.portrait-caption small{font-size:12px}
 .motion-reduced .portrait-wall{padding:0!important}.motion-reduced .portrait-ring{padding-inline:44px}
 #candidateDialog,#candidateContent{touch-action:manipulation}
}
.portrait-echo{display:none!important}
@media(max-width:700px){.portrait-ring>.portrait-echo{display:block!important}}
.motion-reduced .portrait-ring>.portrait-echo{display:block!important}