.hero{padding-top:75px}
.hero-graphic{height:660px}
.name-viewport{top:162px}
.name-track span{font-size:clamp(140px,15.1vw,234px)}
.name-track b{font-size:clamp(123px,13.1vw,189px)}
.portrait-frame{top:45px;width:390px;height:465px;background:transparent;overflow:visible;--hover-x:0px;--hover-y:0px}
.portrait-frame::before{content:'';position:absolute;inset:10% 5%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(255,238,185,.85),rgba(255,248,220,.35) 48%,transparent 73%);filter:blur(24px);opacity:0;transition:opacity .35s ease}
.portrait-frame img{position:relative;left:auto;top:auto;width:100%;height:100%;object-fit:contain;animation:none;transform:translate3d(var(--hover-x),var(--hover-y),0);filter:brightness(1);transition:transform .25s ease-out,filter .35s ease}
.portrait-frame.is-hovering::before{opacity:1}
.portrait-frame.is-hovering img{filter:brightness(1.14) contrast(1.04) drop-shadow(0 0 18px rgba(250,227,161,.8))}
@media(prefers-reduced-motion:reduce){.portrait-frame::before,.portrait-frame img{transition:none}}
@media(max-width:760px){.hero{padding-top:65px}.hero-graphic{height:590px}.name-viewport{top:165px}.name-track span{font-size:99px}.name-track b{font-size:74px}.portrait-frame{top:40px;width:min(71.25vw,390px);height:450px}}
@media(max-width:480px){.hero-graphic{height:540px}.name-viewport{top:150px}.portrait-frame{top:40px;width:71.25vw;height:390px}}