/* Scene coordinates always scale with their own artwork, never with text height. */
.world{width:100%;max-width:none;margin-inline:0;aspect-ratio:1024/1536;container-type:inline-size}
.world-art{inset:0}
.world>.cherry-branch{top:-6.8%;width:24%;height:22%;left:-3%}
.world>.botanical-bridge{position:absolute;inset:auto 0 0;height:0;z-index:2;pointer-events:none}
.world>.botanical-bridge>img:first-child{width:25%;right:-2%;top:0;transform:translateY(-65%)}
.world>.botanical-bridge .descending-leaves{width:19%;height:auto;aspect-ratio:285/260;left:-4%;top:0;transform:scaleX(-1) rotate(10deg) translateY(-55%)}
.world>.botanical-bridge .bridge-cloud{width:90%;left:-10%;top:0;transform:translateY(-45%)}
.closing-world{padding:0 0 80px;min-height:0;aspect-ratio:auto;margin-top:-70px;container-type:inline-size}
.alley-scene{position:absolute;top:70px;left:0;width:100%;aspect-ratio:1672/941;z-index:-2;pointer-events:none}
.alley-scene>.alley-art{inset:0;width:100%;height:100%;object-fit:contain;z-index:0}
.alley-scene>.vent-steam{top:57%;bottom:auto;right:0;width:18%;height:34%;z-index:2}
.alley-scene>.streetlight-aura{top:0;right:3%;width:18%;height:35%;z-index:1}
.alley-scene>.street-moth{top:17%;right:11%;width:2%;height:2.8%}
.alley-scene>.moth-mid{top:23%;right:8%;width:2.1%;height:3.3%}
.alley-scene>.moth-near{top:27%;right:15%;width:3%;height:4.8%}
.alley-scene>.lamp-dust{top:12%;right:5%;width:12%;height:22%}
.closing-world:after{display:none}
.closing-content{width:46%;max-width:none;margin-left:6%;padding:8% 0 0;min-height:calc(56.28cqw + 70px)}
.closing-content .full-brand{width:52%;max-width:370px}
.closing-world>.closing-motto{margin:0 auto;width:min(820px,86%)}
@media(min-width:1681px){.story h2{font-size:4.7cqw}.story p{font-size:1.16cqw}.story .story-number{font-size:1.4cqw}.story button,.story-jump{font-size:1.3cqw}.story{padding:1.7cqw}.world .story p{max-width:33ch}}
@media(max-width:650px){
 .world>.cherry-branch{top:-9%;width:31%;height:28%}
 .world>.botanical-bridge>img:first-child{width:40%;right:-4%}
 .world>.botanical-bridge .descending-leaves{width:38%;left:-12%}
 .closing-world{margin-top:-25px;overflow:hidden;padding-bottom:80px}
 .alley-scene{width:180%;left:-80%;top:40px}
 .closing-content{width:87%;margin-left:6%;padding-top:calc(101.3cqw + 40px);min-height:0;padding-bottom:50px}
 .closing-content .full-brand{width:220px;max-width:72%}
 .closing-world>.closing-motto{width:94%;max-width:430px}
}
/* The plume can rise from the grate, but cannot travel beneath the pavement. */
.alley-scene>.vent-steam{top:55%;height:37%;overflow:hidden;mask-image:linear-gradient(transparent,#000 18%,#000 86%,transparent)}
.alley-scene>.vent-steam i{transform-origin:50% 100%;animation-name:grate-steam}
@keyframes grate-steam{0%{transform:translateY(8%) scale(.82);opacity:0}22%{opacity:.2}65%{opacity:.28}100%{transform:translate(-5%,-18%) scale(1.08);opacity:0}}

/* A contained impact vignette between the foundry and the percussion landscape. */
.earth-impact{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,48px);max-width:1000px;margin:40px auto 0;padding:0 12px;isolation:isolate}
.earth-impact img{display:block;width:42%;max-width:370px;height:auto;filter:drop-shadow(0 0 24px #ee8b3325)}
.earth-impact p{margin:0;transform:rotate(-4deg);font-family:var(--display,'Barlow Condensed',sans-serif);font-weight:900;line-height:1.05;letter-spacing:-.025em;text-shadow:0 3px 0 #384c57,0 6px 14px #000;animation:earth-impact-type 6s ease-in-out infinite}
.earth-impact p span{display:block;font-size:clamp(24px,4.1vw,57px);color:#d9f7fa}
.earth-impact p strong{display:block;font-size:clamp(48px,7.2vw,96px);color:#ffd09a}
@keyframes earth-impact-type{0%,78%,100%{transform:rotate(-4deg) translateY(0)}80%{transform:rotate(-5deg) translateY(-3px)}82%{transform:rotate(-3deg) translateY(2px)}85%{transform:rotate(-4deg) translateY(0)}}
@media(max-width:650px){.earth-impact{gap:8px;margin-top:24px;padding:0}.earth-impact img{width:39%}.earth-impact p span{font-size:clamp(17px,4.3vw,28px)}.earth-impact p strong{font-size:clamp(32px,8vw,52px)}}
@media(prefers-reduced-motion:reduce){.earth-impact p{animation:none}}
/* Keep the shattered Earth as a left-aligned accent beneath the filters. */
.earth-impact{justify-content:flex-start;max-width:none;margin:28px 0 0;padding:0;gap:clamp(12px,2vw,28px)}
.earth-impact img{width:25%;max-width:240px}
.earth-impact p span{font-size:clamp(21px,2.9vw,40px)}
.earth-impact p strong{font-size:clamp(38px,4.8vw,64px)}
@media(max-width:650px){.earth-impact{margin-top:24px;gap:12px}.earth-impact img{width:30%;max-width:150px}.earth-impact p span{font-size:clamp(16px,4vw,24px)}.earth-impact p strong{font-size:clamp(30px,7vw,44px)}}

/* Paired accents stay in normal flow so they follow the filter cards at every width. */
.impact-accents{position:relative;z-index:2;display:grid;grid-template-columns: .9fr 1.1fr;align-items:center;gap:20px;margin-top:28px}
.impact-accents .earth-impact{margin:0;gap:12px;min-width:0}
.impact-accents .earth-impact img{width:43%;max-width:210px;flex-shrink:0}
.impact-accents .earth-impact p span{font-size:clamp(18px,2.3vw,32px)}
.impact-accents .earth-impact p strong{font-size:clamp(34px,4vw,54px)}
.arcade-impact{width:100%;max-width:620px;justify-self:center}
.arcade-impact img{display:block;width:100%;height:auto;mask-image:radial-gradient(ellipse at center,#000 45%,#000d 60%,transparent 74%)}
@media(max-width:750px){.impact-accents{grid-template-columns:1fr;gap:16px}.impact-accents .earth-impact{max-width:440px}.impact-accents .earth-impact img{width:30%;max-width:150px}.arcade-impact{width:min(100%,540px)}.impact-accents .earth-impact p span{font-size:clamp(18px,4vw,28px)}.impact-accents .earth-impact p strong{font-size:clamp(34px,7vw,48px)}}
/* Tighten the transition in document flow, carrying every following section upward. */
.filter-foundry{padding-bottom:24px}
.foundry-objects .float-bucket{top:auto;bottom:-105px;right:0}
@media(max-width:650px){.filter-foundry{padding-bottom:20px}.foundry-objects .float-bucket{bottom:-70px}}
.foundry-objects{overflow:visible}
