/* Visible no-script defaults for the same 1672 × 941 background plane used by
   alignHeroLayers(). Inline --art-* values from that function remain authoritative.
   The absolute art box already has its size from its containing hero; size queries
   let its children use both dimensions without measuring or hiding any layer. */
@media(max-width:1023px){
 .home-page .hero-art{
  container-type:size;
  --hero-plane-ratio:calc(1672 / 941);
  --initial-art-width:max(100cqw,calc(100cqh * var(--hero-plane-ratio)));
  --initial-art-height:max(100cqh,calc(100cqw / var(--hero-plane-ratio)));
  --initial-art-left:calc((100cqw - var(--initial-art-width)) * .6);
  --initial-art-top:calc((100cqh - var(--initial-art-height)) * .5);
 }
 .home-page .hero-art>.hero-detail{
  width:var(--art-width,var(--initial-art-width));
  height:var(--art-height,var(--initial-art-height));
  left:var(--art-left,var(--initial-art-left));
  top:var(--art-top,var(--initial-art-top));
 }
 .home-page .hero-art>.nose-secret{
  left:calc(var(--art-left,var(--initial-art-left)) + var(--art-width,var(--initial-art-width)) * .708);
  top:calc(var(--art-top,var(--initial-art-top)) + var(--art-height,var(--initial-art-height)) * .505);
  width:calc(var(--art-width,var(--initial-art-width)) * .04);
  height:calc(var(--art-height,var(--initial-art-height)) * .05);
 }
 /* Keep the pre-existing full-width snow veil exception. */
 .home-page .hero-art[data-atmosphere=midnight-snow]>.theme-veil{
  left:0;width:100%;top:var(--art-top,var(--initial-art-top));
 }
}
/* These are the original small-phone background rules, expressed once for both
   background and initial overlay geometry; no viewport or theme snapshot is used. */
@media(max-width:700px){
 .home-page .hero-art{
  container-type:normal;
  --hero-plane-height:680px;
  --hero-plane-x:.82;
  --hero-plane-top:15px;
  background-size:auto var(--hero-plane-height);
  background-position:calc(var(--hero-plane-x) * 100%) var(--hero-plane-top);
  --art-width:calc(var(--hero-plane-height) * var(--hero-plane-ratio));
  --art-height:var(--hero-plane-height);
  --art-left:calc((100% - var(--art-width)) * var(--hero-plane-x));
  --art-top:var(--hero-plane-top);
 }
}
/* At 901px the existing arrival stylesheet switches to centered/top cover. */
@media(min-width:901px) and (max-width:1023px){
 .home-page .hero-art{
  --initial-art-left:calc((100cqw - var(--initial-art-width)) * .5);
  --initial-art-top:0px;
 }
}
@media(max-width:900px){
 /* In the 701–900px cover range, the existing hero minimum height (760px)
    exceeds width / ratio, so its initial cover plane is exactly 100% high.
    On smaller phones, the shared --art-height/--art-top above take precedence. */
 .home-page .hero-art[data-atmosphere]{
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--art-top,0px) + var(--art-height,100%) * .8),transparent calc(var(--art-top,0px) + var(--art-height,100%)),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--art-top,0px) + var(--art-height,100%) * .8),transparent calc(var(--art-top,0px) + var(--art-height,100%)),transparent 100%);
 }
 .home-page [data-atmosphere=eclipse]>.theme-scene{
  background-position:calc(var(--art-width,var(--initial-art-width)) * .22) calc(var(--art-height,var(--initial-art-height)) * -.16);
 }
 .home-page [data-atmosphere=haunted-cathedral]>.theme-scene{
  background-position:calc(var(--art-width,var(--initial-art-width)) * .16) 0;
 }
 .home-page [data-atmosphere=moonlit-graveyard]>.theme-scene{
  background-position:calc(var(--art-width,var(--initial-art-width)) * .1) calc(var(--art-height,var(--initial-art-height)) * -.06);
 }
}