/* Independent depth layers live in a transparent WebGL scene. */
.hero-scene{position:absolute;right:-5%;top:0;width:75%;height:100%;z-index:0;pointer-events:none;opacity:1!important;mix-blend-mode:normal;mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 96%,transparent 100%)}
.hero-scene>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1s ease;mask-image:linear-gradient(180deg,transparent,#000 10%,#000 84%,transparent)}
.hero-scene>img{position:absolute;display:block;width:49%;height:auto;top:50%;left:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 0 34px #d7a64b44);opacity:0;transition:opacity .5s;object-fit:contain}
.hero-scene[data-scene=ready]>img{opacity:0}.hero-scene[data-scene=fallback]>canvas{display:none}.hero-scene[data-scene=fallback]>img{opacity:1}
.hero-scene:before{content:'';position:absolute;inset:10% 0;background:radial-gradient(ellipse at 53% 50%,#c89b3a0b,transparent 62%);pointer-events:none}
.hero .hero-inner{position:relative;z-index:2;pointer-events:none}.hero .hero-inner a{pointer-events:auto}
@media(min-width:1700px){.hero-scene{right:-1%;width:67%}}
@media(max-width:1100px) and (min-width:601px){.hero{display:flex;flex-direction:column}.hero .hero-inner{order:-1;padding-bottom:0}.hero:after{display:none}.hero-scene{position:relative;right:auto;top:0;width:100%;height:470px;margin:0;opacity:1!important}.hero-scene>img{width:38%}}
@media(max-width:600px){.hero{display:flex;flex-direction:column}.hero .hero-inner{order:-1;padding-bottom:0}.hero:after{display:none}.hero-scene{position:relative;top:0;right:auto;width:100%;height:390px;margin-left:0;margin-bottom:0;z-index:0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.hero-scene>img{width:58%}}
@media(prefers-reduced-motion:reduce){.hero-scene>img{transition:none}}

/* Keep one continuous space background through the hero boundary. */
.hero{background:transparent}.hero:after{display:none;background:none}.hero-scene[data-scene=ready]>canvas{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-scene>canvas{transition:none}}

/* A small brand mark at the centre of the archive radar. */
.radar:after{content:'';width:60px;height:60px;background:url('/assets/souzdp-emblem.png') center/contain no-repeat;border:0;box-shadow:0 0 18px #d4bd8126}

.section-head .archive-heading,.section-head .knowledge-heading{max-width:none}

.mission-help .section-head{display:block}.mission-help .section-head h2{max-width:none;font-size:clamp(29px,2.5vw,42px)}.mission-help .section-head>p{max-width:68ch;margin-top:20px}