/* Responsive layout: the artwork keeps its full width and embedded branding. */
html{scroll-padding-top:24px}body{min-width:280px}img{max-width:100%}button,a{touch-action:manipulation}.section,.world-info,.world-art,.resource-grid,.news-card{min-width:0}h2,h3,h4,p,a,button{overflow-wrap:break-word}
.split-hero{height:auto;min-height:max(720px,66.667vw);max-height:none;background:transparent;padding-bottom:85px;isolation:isolate;overflow:hidden}
.world-panorama{inset:0;transform:none!important;background-size:100% auto;background-position:center top;background-repeat:no-repeat;background-color:transparent;mask-image:linear-gradient(#000 0%,#000 60%,transparent 100%);transition:filter .8s}
.split-hero[data-active-world] .world-panorama{transform:none!important}
.hero-title.hero-integrated{height:clamp(330px,34vw,1100px);padding:0}
.hero-integrated+.world-choices{padding:25px 8% 110px;gap:12%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.world-choice{min-width:0}.world-choice h2{font-size:clamp(28px,3vw,46px)}.world-choice>p{font-size:14px}.world-action{min-height:44px;font-size:13px}
.hero-bottom{height:65px;z-index:2;gap:16px;font-size:9px;border-top:0}.hero-bottom>a{min-height:44px;display:flex;align-items:center}
.split-hero:before{z-index:0;background:linear-gradient(0deg,#14212700,#11131000);pointer-events:none}
.split-hero:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:clamp(150px,18vw,340px);z-index:0;pointer-events:none;background:linear-gradient(90deg,#142127 0%,#152024 35%,#171e1d 47%,#201e18 53%,#292219 66%,#241b13 100%);mask-image:linear-gradient(transparent,#000 90%)}
main:after{display:none}.page-atmosphere{top:0;mask-image:linear-gradient(transparent 0px,transparent 500px,#000 1000px,#000 calc(100% - 80px),transparent)}
header{height:88px;padding:0 6%;z-index:6}nav{gap:28px}nav>a{min-height:44px;display:inline-flex;align-items:center;font-size:13px}
.world-detail{grid-template-columns:repeat(2,minmax(0,1fr))}.world-art{min-height:0;align-self:stretch}.world-info{padding:clamp(24px,3vw,44px)}.world-info>p:not(.eyebrow){font-size:14px;line-height:1.8}.world-features p{font-size:12px}.world-features strong{font-size:13px}.world-features{grid-template-columns:repeat(2,minmax(0,1fr))}.world-facts{flex-wrap:wrap;gap:18px 35px}.world-info .small-note{font-size:12px}.world-info>.button{min-height:48px}.world-news-link{font-size:12px;min-height:44px;display:flex;align-items:center}
.news-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.news-card>p{font-size:14px;line-height:1.8}.news-meta{flex-wrap:wrap;line-height:1.7;font-size:11px}.news-filters button{min-height:44px;font-size:12px}.news-image{height:auto;aspect-ratio:16/9;object-fit:cover}.demo{font-size:10px}.small-note{font-size:12px}.resource small{font-size:12px}.community>div>p:last-child{font-size:14px}.resource{min-width:0}.close{min-width:44px;min-height:44px}dialog{max-height:calc(100dvh - 32px);overscroll-behavior:contain}dialog p,dialog ol{font-size:14px}dialog h2{padding-right:22px;overflow-wrap:anywhere}footer{gap:20px;flex-wrap:wrap}footer p{font-size:11px;width:auto}footer>a:last-child{min-height:44px;display:flex;align-items:center}
@media(min-width:801px) and (max-width:1150px){.world-features{grid-template-columns:1fr}.world-poster h4{font-size:38px}.world-poster{left:22px;right:16px}.community{gap:30px}}
@media(max-width:900px){.section{padding:64px 6%}.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.community{grid-template-columns:1fr;gap:30px}.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.resource{min-height:155px}.world-detail{grid-template-columns:1fr}.world-art{min-height:360px;aspect-ratio:16/9;max-height:520px}.stalker-detail .world-art{order:0}.world-features{grid-template-columns:repeat(2,minmax(0,1fr))}.world-info{padding:30px}.world-poster h4{font-size:clamp(40px,7vw,60px)}.world-info h3{max-width:none;font-size:32px}.hero-bottom span:last-child{display:none}}
@media(max-width:640px){header{height:68px}.menu{display:flex;min-height:44px;padding:8px 13px}nav{display:none;position:absolute;top:68px;left:0;right:0;padding:18px 6%;flex-direction:column;gap:8px;background:#111b16f2;border-bottom:1px solid #ffffff20}nav.open{display:flex}nav>a{min-height:48px}nav .nav-cta{align-self:flex-start}
.split-hero{min-height:0;padding-top:68px;padding-bottom:78px}.world-panorama{background-size:100% auto;background-position:center 68px;mask-image:linear-gradient(#000 0%,#000 30%,transparent 70%)}
.hero-title.hero-integrated{height:calc(35vw + 48px)}.hero-integrated+.world-choices{padding:22px 6% 30px;display:grid;grid-template-columns:1fr;gap:16px}
.hero-integrated~.world-choices .world-choice:first-child,.hero-integrated~.world-choices .world-choice:last-child{margin:0;text-align:left;padding:18px;border:1px solid #afcebf38;border-radius:3px;background:linear-gradient(120deg,#182b2fe6,#162320dc);transform:none!important;opacity:1!important}
.hero-integrated~.world-choices .world-choice:last-child{background:linear-gradient(120deg,#32281be8,#272116dc);border-color:#d6a15355}.world-choice:last-child .eyebrow{justify-content:flex-start}.world-choice h2{font-size:30px}.world-choice>p{font-size:13px;margin:10px 0}.world-action{margin-top:8px}.world-choice .eyebrow{font-size:10px;margin-bottom:8px}.hero-bottom{left:6%;right:6%;font-size:8px;letter-spacing:.5px;gap:12px}.hero-bottom>span{max-width:40%}.hero-bottom>a{font-size:8px;text-align:right}.split-hero .world-view{opacity:.12!important}.split-hero .fog{height:70%;opacity:.35}.split-hero:after{height:140px}.section{padding:48px 6%}.section-heading{display:block}.section-heading h2{font-size:31px;letter-spacing:-.8px}.news-grid{grid-template-columns:1fr}.news-filters{gap:9px}.news-filters button{flex:1 1 42%;padding:10px 8px}.news-card h3{font-size:23px}.world-info{padding:26px 20px}.world-art{min-height:300px;aspect-ratio:auto;max-height:none}.world-info h3{font-size:29px}.world-features{gap:10px}.world-features li{padding:14px 11px;flex-direction:column}.world-features li>.feature-icon{flex-shrink:0}.world-poster{left:22px;right:18px;bottom:24px}.world-poster h4{font-size:42px}.world-poster>p{font-size:12px}.poster-tags{gap:5px}.poster-tags span{font-size:8px}.community h2{font-size:38px}.resource{padding:17px;min-height:160px}.resource strong{font-size:16px}.resource small{line-height:1.7}.resource[aria-disabled=true] .arrow{font-size:8px;right:12px;top:14px}footer{padding:25px 6%;align-items:flex-start}footer p{width:100%;margin:0}dialog{padding:35px 22px 24px;width:calc(100% - 24px)}dialog .close{top:8px;right:8px}}
@media(max-width:359px){.world-features{grid-template-columns:1fr}.world-features li{flex-direction:row}.resource-grid{grid-template-columns:1fr}.resource{min-height:140px}.hero-bottom>span{display:none}.hero-bottom>a{margin:auto}.world-facts{gap:16px}.world-info>.button{width:100%}.world-poster h4{font-size:35px}}
@media(prefers-reduced-motion:reduce){.world-panorama,.split-hero[data-active-world] .world-panorama{transform:none!important}}
/* Fade follows the actual 3:2 artwork, including its mobile top offset. */
.split-hero{--art-top:0px;background:linear-gradient(90deg,#142127ee,#171e1df0 47%,#201e18f0 53%,#241b13ee),url('assets/magu-hero.jpg') center top/cover no-repeat}
.world-panorama{mask-image:linear-gradient(#000 0px,#000 calc(var(--art-top) + 47vw),transparent calc(var(--art-top) + 66.667vw))}
@media(max-width:640px){.split-hero{--art-top:68px}}
/* Keep the dismiss control out of the dialog's text flow. */
dialog .close{position:absolute;top:10px;right:10px}
/* One continuous base: no separate hero tint or horizontal strip. */
main{background:linear-gradient(90deg,#142127 0%,#152024 35%,#171e1d 47%,#201e18 53%,#292219 66%,#241b13 100%)}
.split-hero{background:transparent}
.split-hero:before,.split-hero:after{display:none}
.world-panorama{background-color:transparent;mask-image:linear-gradient(to bottom,#000 0px,#000 calc(var(--art-top) + 39vw),#000e calc(var(--art-top) + 47vw),#0008 calc(var(--art-top) + 56vw),#0002 calc(var(--art-top) + 63vw),transparent calc(var(--art-top) + 66.667vw))}
.split-hero .world-view{mask-image:linear-gradient(#000 0%,#000 45%,transparent 95%)}
.split-hero .fog{bottom:0;mask-image:linear-gradient(transparent,#000 30%,#000 55%,transparent 100%)}
.page-atmosphere{mask-image:linear-gradient(transparent 0px,transparent 55vw,#000 85vw,#000 calc(100% - 80px),transparent)}
.worlds-section{border-top:0;box-shadow:none}
@media(max-width:640px){.page-atmosphere{mask-image:linear-gradient(transparent,transparent 500px,#000 950px,#000 calc(100% - 80px),transparent)}}
