/* Size the story to its content instead of centering it in a tall viewport. */
.scroll-story{height:auto}
.story-sticky{position:relative;top:0;height:auto;min-height:0;padding-block:40px;align-items:start}
.story-copy h2,.story-copy #story-description{min-height:0}
.model-stage{height:clamp(280px,34vw,440px);min-height:0;aspect-ratio:auto}
@media(max-width:700px){
 .scroll-story{height:auto}
 .story-sticky{position:relative;top:0;grid-template-rows:auto auto;gap:20px;padding-block:28px}
 .model-figure{height:auto}
 .model-stage{height:clamp(240px,70vw,320px);max-height:320px}
 .story-copy #story-description{min-height:0}
}

/* Keep the menu inside its panel, including short landscape viewports. */
.mobile-nav{max-height:calc(100svh - 76px);overflow-y:auto;overscroll-behavior:contain}
.site-header .mobile-nav .compact-stores{width:100%;max-width:380px}
.mobile-nav .compact-stores .store-badge{padding-inline:8px;column-gap:7px}
.mobile-nav .compact-stores .store-badge strong{font-size:13px}

/* The hero remains in two columns at these intermediate widths. */
@media(min-width:701px) and (max-width:950px){
 .hero-copy .store-badge{grid-template-columns:24px minmax(0,1fr);column-gap:9px;padding-inline:12px}
 .hero-copy .store-badge svg{width:24px;height:28px}
 .hero-copy .store-badge strong{font-size:17px;line-height:21px}
}
@media(max-width:700px){
 .hero-copy,.hero-art figcaption>span:last-child,.body-info-card{min-width:0}
 .hero-art figcaption small{font-size:10px;line-height:1.8}
 .store-note{font-size:10px;line-height:1.8}
 .view-controls button{min-height:44px;font-size:10px}
 .view-controls input{height:44px}
 .footer-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:11px}
 .footer-bottom{font-size:10px;overflow-wrap:anywhere}
 dialog{max-width:calc(100% - 24px);max-height:94svh;padding-top:60px}
 dialog button{min-height:44px;min-width:66px}
 dialog img{max-height:calc(94svh - 80px)}
}
@media(max-width:760px){
 .body-controls{flex-direction:column;align-items:stretch;gap:10px;margin-top:14px}
 .body-controls>span{width:100%;text-align:center;font-size:11px;line-height:1.8}
 .body-buttons{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;width:100%}
 .body-buttons button{min-height:44px;min-width:44px}
 .body-buttons button.reset-body{font-size:11px}
 .body-visual-card>figcaption{font-size:10px;line-height:1.8}
 .body-visual-card{min-height:0}
}
@media(max-width:350px){
 .store-pair:not(.compact-stores) .store-badge{grid-template-columns:22px minmax(0,1fr);column-gap:8px;padding-inline:10px}
 .store-pair:not(.compact-stores) .store-badge svg{width:22px;height:26px}
 .store-pair:not(.compact-stores) .store-badge strong{font-size:15px;line-height:20px;letter-spacing:-.3px}
 .store-pair .coming-soon{font-size:9px;letter-spacing:1px}
 .site-logo{font-size:22px;gap:8px}
 .site-logo small{font-size:7px;letter-spacing:1.4px}
}
