/* 7.1 shared safe areas. Physical framing is enforced in camera space as well. */
:root{--page-gutter:5%;--safe-top:150px;--safe-bottom:150px}
.mask,.word-mask,.capability-frame h2{overflow:visible}
.site-header{background:linear-gradient(#030810f5,#030810ce 75%,#03081000)}
.sequence-footer{isolation:isolate}
.sequence-footer::before{content:"";position:absolute;z-index:-1;inset:-5px -5.6vw -25px;background:linear-gradient(#03081000,#030810e8 70%);pointer-events:none}
.network-ending h2{font-size:clamp(52px,6.9vw,104px);max-width:64%;line-height:1.04}
.network-ending .small-heading{max-width:60%}
.ending-expertise{position:absolute;left:70%;right:0;top:13%;display:flex;flex-direction:column;gap:32px}
.ending-expertise>div{border-top:1px solid #395161;padding-top:15px}
.ending-expertise span{font:9px/1.5 monospace;letter-spacing:.1em;color:#91b6c9}
.ending-expertise strong{display:block;font-size:28px;font-weight:400;letter-spacing:-.04em;margin:12px 0}
.ending-expertise p{font-size:13px;line-height:1.6;color:#adc3d0;max-width:240px;margin:0}
.infra-fabric{top:26%;right:auto;width:42%}
.infra-fabric h2{font-size:clamp(39px,4.2vw,65px);line-height:1.06}
.infra-fabric h2 em{display:block;margin-top:.22em}
.resource-map{left:54%;right:7%;top:24%;bottom:23%;display:flex;flex-direction:column;justify-content:space-between}
.resource-node{position:relative;inset:auto;transform:none!important;background:none;padding:17px 0 16px 0;border-top:1px solid #40586a;width:100%;text-align:left}
.resource-node span{font:9px/1.5 monospace;letter-spacing:.075em;color:#93b7cc;margin-bottom:9px}
.resource-node strong{font-size:30px;letter-spacing:-.04em;font-weight:400}
.resource-node small{font:12px/1.5 Arial,sans-serif;color:#a8c0d0;margin-top:8px}
.resource-node:last-child{border-color:#a1becd}
@media(min-width:801px) and (max-height:760px){.ending-expertise{top:4%;gap:20px}.ending-expertise strong{font-size:24px;margin:8px 0}.ending-expertise p{font-size:11px}.resource-map{top:25%;bottom:23%}.resource-node{padding:11px 0}.resource-node strong{font-size:25px}.resource-node span{font-size:8px;margin-bottom:5px}.resource-node small{font-size:10px;margin-top:5px}.infra-fabric h2{font-size:48px}}
@media(max-width:800px){
 :root{--page-gutter:25px;--safe-top:132px;--safe-bottom:155px}
 body[data-chapter=applications] #visual{top:44%;height:36%;bottom:auto}
 body[data-chapter=infrastructure] #visual{top:46%;height:35%;bottom:auto}
 .network-ending{padding-top:0;display:block}
 .network-ending .small-heading{max-width:none;margin-bottom:20px}
 .network-ending h2{font-size:42px;max-width:none;margin-bottom:24px}
 .ending-expertise{position:static;display:flex;gap:13px;margin:0 0 22px}
 .ending-expertise>div{padding-top:9px;display:grid;grid-template-columns:41% 59%;align-items:baseline}
 .ending-expertise span{font-size:7px;letter-spacing:.035em}
 .ending-expertise strong{font-size:21px;margin:0}
 .ending-expertise p{font-size:10px;grid-column:2;margin-top:5px;line-height:1.4}
 .network-ending>p:last-child{font-size:11px}
 .infra-fabric{left:25px;right:25px;width:auto;top:147px}
 .infra-fabric h2{font-size:33px}.infra-fabric h2 em{margin-top:0}
 .resource-map{left:25px;right:25px;top:43%;bottom:23%}
 .resource-node{padding:10px 0;display:grid;grid-template-columns:43% 57%;align-items:baseline}
 .resource-node span{font-size:6.8px;line-height:1.5;margin:0;max-width:110px}
 .resource-node strong{font-size:21px}
 .resource-node small{grid-column:2;font-size:10px;margin-top:5px}
}
@media(max-width:800px) and (max-height:700px){
 .network-ending h2{font-size:34px;margin-bottom:18px}.network-ending .small-heading{margin-bottom:17px}
 .ending-expertise{gap:10px;margin-bottom:14px}.ending-expertise strong{font-size:18px}.ending-expertise p{font-size:9px}
 .infra-fabric{top:117px}.infra-fabric h2{font-size:29px}
 .resource-map{top:45%;bottom:23%}.resource-node{padding:8px 0}.resource-node strong{font-size:18px}.resource-node small{font-size:9px}.resource-node span{font-size:6.5px}
}
@media(orientation:landscape) and (max-height:520px){
 body[data-chapter=applications] #visual,body[data-chapter=infrastructure] #visual{inset:0;height:100%;width:100%}
 .applications-copy .app-scene{width:40%}.applications-copy .app-tablet h2,.applications-copy .app-tv h2{font-size:31px}
 .applications-copy .app-description{font-size:10px}.app-platforms{margin-top:9px}
 .network-ending h2{font-size:40px;max-width:60%;margin-bottom:8px}.network-ending .small-heading{margin-bottom:14px;max-width:60%}
 .ending-expertise{position:absolute;left:67%;right:0;top:0;gap:11px;margin:0}.ending-expertise>div{display:block;padding-top:7px}.ending-expertise span{font-size:6px}.ending-expertise strong{font-size:17px;margin:5px 0}.ending-expertise p{font-size:9px;line-height:1.35}
 .infra-fabric{top:110px;left:5%;width:42%;right:auto}.infra-fabric h2{font-size:31px}
 .resource-map{top:108px;bottom:100px;left:55%;right:5%}.resource-node{padding:5px 0;display:block}.resource-node span{font-size:6px;max-width:none;margin-bottom:4px}.resource-node strong{font-size:19px}.resource-node small{font-size:8px;margin-top:3px}
}

/* Explicit source-only diagnostic view, never used in the landing. */
body[data-study] #stage>*:not(#visual){visibility:hidden!important}
body[data-study] #visual{inset:0!important;width:100%!important;height:100%!important;opacity:1!important;visibility:visible!important}

/* Intentional detail framing excludes the navigation bands, while leaving copy intact. */
body[data-chapter=infrastructure]:not([data-study]) #visual{mask-image:linear-gradient(to bottom,transparent 105px,#000 145px,#000 calc(100% - 150px),transparent calc(100% - 110px))}
@media(max-width:800px){body[data-chapter=infrastructure]:not([data-study]) #visual{mask-image:none}}

/* The cinematic stage clips art, but must never become a nested scroll container.
   Focus/reduced-motion navigation could leave overflow:hidden at scrollTop > 0. */
#stage{overflow:clip}