/* ROUND 02: graphic links and composition. Loaded exclusively by index.html. */
@font-face{font-family:'Fabioverse Chakra';src:url('hero-round02/chakra-petch-latin-600-normal.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
.inhabited-hero .universe-copy{max-width:720px}
.inhabited-hero .universe-copy h1{font-family:'Fabioverse Chakra','Chakra Petch','Trebuchet MS',sans-serif;font-weight:600;font-size:clamp(26px,2.55vw,38px);letter-spacing:.025em;line-height:1.3}
.inhabited-hero .universe-copy h1 span{display:inline-block;margin-top:3px}
.inhabited-hero .portal-scene{height:850px;margin-top:38px}
.graphic-portal{position:absolute;display:block;padding:0;border:0;background:transparent;box-shadow:none;z-index:5;line-height:0;transition:filter .2s,transform .2s;aspect-ratio:4/3}
.graphic-portal img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:transparent;border:0;border-radius:0}
.graphic-portal:hover{filter:brightness(1.06);transform:translateY(-2px)}
.graphic-portal:focus-visible{outline:2px solid #a9d9ff;outline-offset:5px;border-radius:18px;filter:brightness(1.06)}
.brand-portal{width:40%;left:30%;top:0}
.facebook-portal{width:30%;left:14%;top:410px}
.instagram-portal{width:28%;right:14%;top:535px}
.inhabited-hero .hanging{top:-3px}
.inhabited-hero .side-left{width:175px;left:0;top:120px}
.inhabited-hero .side-right{width:190px;right:0;top:310px}
.inhabited-hero .mini-boombox{width:98px;left:24%;top:343px}
.inhabited-hero .mini-mic{width:98px;left:62%;top:335px}
.inhabited-hero .mini-graffiti{width:100px;right:20%;top:506px}
.inhabited-hero .universe-divider{height:185px;border-bottom:0}
.inhabited-hero .universe-divider:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,#558bbf44,#87b5d6a0,#558bbf44);z-index:8;pointer-events:none}
.inhabited-hero .resting{bottom:-1px}
@media(min-width:1600px){.inhabited-hero .side-left{left:1%}.inhabited-hero .side-right{right:1%}}
@media(max-width:1200px) and (min-width:701px){
 .inhabited-hero .portal-scene{height:740px}
 .brand-portal{width:47%;left:26.5%}
 .facebook-portal{width:34%;left:12%;top:365px}
 .instagram-portal{width:32%;right:12%;top:470px}
 .inhabited-hero .side-left{width:120px;left:0;top:115px}
 .inhabited-hero .side-right{width:130px;right:0;top:240px}
 .inhabited-hero .mini-boombox{left:20%;top:298px}
 .inhabited-hero .mini-mic{left:64%;top:267px;width:92px}
 .inhabited-hero .mini-graffiti{right:19%;top:416px;width:92px}
}
@media(max-width:700px){
 .inhabited-hero .universe-copy{width:98%}
 .inhabited-hero .universe-copy h1{font-size:clamp(22px,5.9vw,29px);letter-spacing:.005em;line-height:1.35}
 .inhabited-hero .portal-scene{height:auto;margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:92px;padding-top:0;padding-bottom:45px}
 .graphic-portal{position:relative;left:auto;right:auto;top:auto;flex:none}
 .brand-portal{width:98%;align-self:center}
 .facebook-portal{width:94%;margin-left:0}
 .instagram-portal{width:91%;align-self:flex-end}
 .inhabited-hero .side-left{width:84px;left:0;top:calc(73.5vw - 17px);z-index:6}
 .inhabited-hero .side-right{width:93px;right:0;top:calc(73.5vw + 38px);z-index:6}
 .inhabited-hero .mini-boombox{width:61px;left:24%;top:calc(73.5vw + 37px)}
 .inhabited-hero .mini-mic{width:73px;left:55%;top:calc(144vw + 110px)}
 .inhabited-hero .mini-graffiti{width:73px;right:4%;top:calc(144vw + 110px)}
 .inhabited-hero .universe-divider{height:175px;margin-top:0}
 .inhabited-hero .resting{left:5%;width:215px;bottom:-1px}
}
@media(prefers-reduced-motion:reduce){.graphic-portal{transition:none}.graphic-portal:hover{transform:none}}
@media(max-width:700px){
 .inhabited-hero .portal-scene{--canvas-width:calc(100vw - 44px);--brand-h:calc(var(--canvas-width)*.735);--facebook-h:calc(var(--canvas-width)*.705);gap:190px}
 .inhabited-hero .side-left,.inhabited-hero .side-right{top:calc(var(--brand-h) + 5px)}
 .inhabited-hero .mini-boombox{top:calc(var(--brand-h) + 160px)}
 .inhabited-hero .mini-mic,.inhabited-hero .mini-graffiti{top:calc(var(--brand-h) + var(--facebook-h) + 365px)}
}
@media(max-width:520px){.inhabited-hero .portal-scene{--canvas-width:calc(100vw - 20px)}}
@media(min-width:1201px){.inhabited-hero .mini-mic{left:37%;top:370px}}
@media(max-width:1200px) and (min-width:701px){.inhabited-hero .mini-mic{left:34%;top:320px}}