/* A phone needs less empty stage between the portrait, props and reading.
   Keep the existing copy and scroll choreography; shorten only its runways. */
@media(max-width:760px){
 .js .opening-sequence{height:calc(100svh + clamp(260px,38svh,350px))}
 .js .wardrobe-story{margin-top:-20svh}
 .hero-copy{bottom:calc(20svh + 24px)}
 .gesture-hint{bottom:calc(20svh + 86px)}
 .wardrobe-chapter{padding:40px 0 28px;min-height:0}
 .wardrobe-copy{padding:16px 0}
 .wardrobe-faces{height:clamp(330px,44svh,410px);margin-top:16px}
 .lining-window{height:12svh;min-height:80px;max-height:130px}
 .fan-scene{height:auto;min-height:0;padding:28px 0 30px;justify-content:flex-start}
}
/* Portrait tablets use the same shorter transitions, with a wider text column. */
@media(min-width:761px) and (max-width:980px) and (orientation:portrait){
 .js .opening-sequence{height:calc(100svh + 380px)}
 .js .wardrobe-story{margin-top:-18svh}
 .hero-copy{bottom:calc(18svh + 24px)}
 .gesture-hint{bottom:calc(18svh + 86px)}
 .wardrobe-chapter{padding:56px 0 36px;min-height:0}
 .wardrobe-copy{width:calc(100% - 180px);max-width:480px;padding:16px 0}
 .wardrobe-faces{height:clamp(450px,48svh,560px);margin-top:20px}
 .lining-window{height:13svh;min-height:100px;max-height:150px}
 .fan-scene{height:auto;min-height:0;padding:28px 0 34px;justify-content:flex-start}
 .fan-composition{width:min(620px,92%)}
}
/* With no moving portrait, ordinary document flow gives the cleanest reading. */
@media(max-width:760px) and (prefers-reduced-motion:reduce){
 .js .opening-sequence{height:calc(100svh + 200px)}
 .js .wardrobe-story{margin-top:0}
 .wardrobe-faces{height:300px}
 .lining-window{height:150px;max-height:none;min-height:0}
}
@media(max-width:760px) and (scripting:none){
 .wardrobe-faces{height:300px}
 .lining-window{height:150px;max-height:none;min-height:0}
}
@media(min-width:761px) and (max-width:980px) and (orientation:portrait) and (prefers-reduced-motion:reduce){
 .js .opening-sequence{height:calc(100svh + 200px)}
 .js .wardrobe-story{margin-top:0}
 .wardrobe-faces{height:430px}
 .lining-window{height:180px;max-height:none;min-height:0}
}
@media(min-width:761px) and (max-width:980px) and (orientation:portrait) and (scripting:none){
 .wardrobe-faces{height:430px}
 .lining-window{height:180px;max-height:none;min-height:0}
}