/* On phones, the first two scenes snap; the long portfolio stays free. */
@media(max-width:640px){
html{scroll-snap-type:y mandatory;scroll-padding-top:0}
main>section{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin:0}
main>section+section{margin-block-start:0}
main>#o-mnie,main>#manifest{height:100svh;min-height:0;overflow:clip}
main>#o-mnie>.scene-fit,main>#manifest>.scene-fit{position:absolute;left:50%;top:50%;width:100%;transform:translate(-50%,-50%) scale(var(--scene-scale,1));transform-origin:center}
main>#manifest>.scene-fit{top:calc(50% + 38px)}
main>#prace{min-height:100svh;padding-top:86px}
.portfolio-scroll{scroll-snap-type:none;overflow:visible}
 main>#manifest>.scene-fit{top:calc(50% + 35px)}
 main>#prace{padding-top:78px}
 /* Fit the portrait inside the screen without scaling the page's width. */
 main>#o-mnie>.scene-fit{height:100%;transform:translate(-50%,-50%);padding-bottom:12px}
 #o-mnie .hero-field{flex:1;min-height:0}
 #o-mnie .hero-copy{flex-shrink:0}
 #o-mnie .hero-photo--video{flex:1;min-height:0;aspect-ratio:auto;margin:12px 0 0;overflow:hidden}
 #o-mnie .hero-video,#o-mnie .hero-video-poster{height:134%;transform:translateY(calc(-25.3731% * var(--hero-lift,0)));mask-image:none;-webkit-mask-image:none}
 #o-mnie .hero-caption{position:absolute;inset:auto 0 0;z-index:2;width:100%;padding:12px 0;background:none}
 #o-mnie .hero-caption a{padding-right:0}
 /* Keep the mobile manifest readable while fitting all five decisions. */
 #manifest .signal-layout{padding-top:20px;gap:20px}
 #manifest .signal-readout,#manifest .signal-rule{display:none}
 #manifest .signal-intro>p,#manifest .signal-body p,#manifest .signal-foot{font-size:.875rem;line-height:1.5}
 #manifest .signal-intro h2{margin-bottom:16px}
 #manifest .signal-question{font-size:2rem;margin-bottom:16px}
 #manifest .signal-entry summary{padding:14px;font-size:1rem}
 #manifest .signal-body{padding:0 36px 14px}
}