/* Portrait phones use the SAME reversible native-scroll scenes. No touch interception.
   A shorter runway and reduced travel keep swipe distance comfortable. */
@media(max-width:767px) and (min-height:540px) and (orientation:portrait) and (prefers-reduced-motion:no-preference){
 html[data-motion=on] .hero{height:185svh;min-height:0}
 html[data-motion=on] .hero-stage{height:100svh;min-height:0;position:sticky!important;top:0}
 html[data-motion=on] .hero-image-plane{inset:0;height:100%;transform:perspective(1200px) translate3d(8vw,15svh,0) rotateY(-7deg) rotateZ(3deg) scale(.72)}
 html[data-motion=on] .hero-title-block{top:17svh;transform:translate3d(0,0,0);transform-origin:0 0}
 html[data-motion=on] .hero-final-note{bottom:13svh;opacity:0}
 html[data-motion=on] .hero-final-note p{font-size:clamp(28px,8vw,42px)}
 html[data-motion=on] .hero-satellite{display:block!important;border-width:4px}
 html[data-motion=on] .hero-satellite figcaption{font-size:5px;letter-spacing:.01em;line-height:15px}
 html[data-motion=on] .hero-satellite img{height:calc(100% - 15px)}
 html[data-motion=on] .satellite-one{left:4%;top:58%;width:25vw;height:33vw}
 html[data-motion=on] .satellite-two{right:4%;bottom:18%;width:30vw;height:21vw}
 html[data-motion=on] .photo-shade{opacity:.28;background:linear-gradient(180deg,#201b17cf,transparent 63%),linear-gradient(0deg,#201b17d9,transparent 52%)}
 html[data-motion=on] .hero-outline{display:block!important;left:18%;top:42%;width:70%;height:42%}
 html[data-motion=on] .hero-bottom{bottom:24px}
 html[data-motion=on] .story-reel{height:235svh}
 html[data-motion=on] .reel-stage{position:sticky;top:0;height:100svh;padding:25px 20px 16px;display:flex;flex-direction:column;overflow:clip}
 html[data-motion=on] .reel-stage .section-index{margin-bottom:20px;padding-bottom:13px;font-size:7px;flex-shrink:0}
 html[data-motion=on] .reel-heading{margin-bottom:20px;flex-shrink:0}
 html[data-motion=on] .reel-heading h2{font-size:clamp(32px,10vw,55px);line-height:.99}
 html[data-motion=on] .reel-heading>p{font-size:12px;line-height:1.45;margin-top:12px;max-width:none}
 html[data-motion=on] .reel-window{flex:1;min-height:0;overflow:visible}
 html[data-motion=on] .reel-track{display:flex;gap:17px;width:max-content;height:100%;direction:ltr}
 html[data-motion=on] .reel-card{width:calc(100vw - 48px);flex:0 0 calc(100vw - 48px);height:100%;display:flex;flex-direction:column}
 html[data-motion=on] .reel-photo{flex:1;min-height:0;aspect-ratio:auto}
 html[data-motion=on] .reel-photo img{object-fit:cover;object-position:center}
 html[data-motion=on] .reel-caption{padding:19px 17px;min-height:0;flex-shrink:0;align-items:start;gap:12px}
 html[data-motion=on] .reel-caption h3{font-size:clamp(24px,6.9vw,33px);line-height:1.05;max-width:none;margin-bottom:6px}
 html[data-motion=on] .reel-caption .eyebrow{font-size:7px;margin-bottom:10px}
 html[data-motion=on] .reel-caption>div>p:last-child{font-size:12px;line-height:1.5;margin-top:9px}
 html[data-motion=on] .reel-number{font-size:31px;margin-top:24px}
 html[data-motion=on] .reel-controls{margin-top:16px;gap:15px;flex-shrink:0;align-items:center}
 html[data-motion=on] .reel-positions{display:flex;gap:6px}
 html[data-motion=on] .reel-positions button{min-width:44px;min-height:44px}
 html[data-motion=on] .reel-progress{display:flex;flex:1;width:auto}
 html[data-motion=on] .reel-controls>a{font-size:10px;margin-inline-start:auto;max-width:125px;gap:8px;line-height:1.45}
 html[data-motion=on] .reel-controls>a>span{font-size:23px}
 html[data-motion=on] .reel-disclosure{margin-top:12px;font-size:8px;flex-shrink:0}
 html[data-motion=on] .reel-hint{visibility:visible}
}
@media(max-width:767px) and (max-height:660px) and (min-height:540px) and (orientation:portrait){
 html[data-motion=on] .hero-title-block{top:16svh}
 html[data-motion=on] .hero h1{font-size:20vw;margin-bottom:17px}
 html[data-motion=on] .hero-eyebrow{margin-bottom:16px}
 html[data-motion=on] .hero-description{font-size:12px}
 html[data-motion=on] .hero-link{margin-top:12px}
 html[data-motion=on] .hero-final-note p{font-size:27px}
 html[data-motion=on] .reel-stage{padding-top:17px;padding-bottom:12px}
 html[data-motion=on] .reel-stage .section-index{margin-bottom:13px;padding-bottom:9px}
 html[data-motion=on] .reel-heading{margin-bottom:12px}
 html[data-motion=on] .reel-heading h2{font-size:8.5vw}
 html[data-motion=on] .reel-heading>p{font-size:10px;margin-top:8px}
 html[data-motion=on] .reel-caption{padding:12px 14px}
 html[data-motion=on] .reel-caption h3{font-size:23px}
 html[data-motion=on] .reel-caption>div>p:last-child{font-size:10px;margin-top:5px}
 html[data-motion=on] .reel-caption .eyebrow{margin-bottom:7px;font-size:6px}
 html[data-motion=on] .reel-controls{margin-top:10px}
 html[data-motion=on] .reel-disclosure{font-size:7px;margin-top:8px}
}
/* Native scrolling stays available when a short landscape viewport cannot contain a scene. */
@media(max-height:539px),(max-width:767px) and (orientation:landscape){
 html[data-motion=on] .story-reel{height:auto}
 html[data-motion=on] .reel-stage{position:relative;height:auto}
}
html[data-motion=off] .hero-title-block{transform:none!important}
@media(prefers-reduced-motion:reduce){html[data-motion] .hero-title-block{transform:none!important}}