/* Explicit editorial H1 variant; all supporting type uses shared brand roles. */
body.about-page .about-hero-editorial{--about-display-size:clamp(100px,14vw,200px);--about-title-top:72px;--about-title-gap:54px;padding:144px 0 48px;overflow:clip}
.about-hero-stage{position:relative;min-height:clamp(580px,47vw,680px);isolation:isolate}
.about-hero-profession{position:absolute;top:0;left:0;max-width:360px;color:var(--muted)}
body.about-page .about-hero-editorial .about-hero-photo{position:absolute;top:8px;left:42%;width:40%;max-width:500px;margin:0;z-index:0}
body.about-page .about-hero-editorial .about-hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;animation:about-photo-enter 1s ease both}
:root body.type-system.about-page main .about-hero-editorial h1{position:absolute;inset:0;z-index:1;font-size:var(--about-display-size);margin:0;pointer-events:none}
body.about-page .about-hero-editorial h1 span{position:absolute;display:block;margin:0;white-space:nowrap;will-change:transform;transform:translate3d(var(--about-scroll-x,0px),0,0);animation:about-type-enter .9s cubic-bezier(.2,.65,.3,1) both}
.about-hero-editorial .about-title-first{left:0;top:var(--about-title-top)}
.about-hero-editorial .about-title-second{right:3%;top:54%}
body.about-page .about-hero-editorial h1 .about-title-first{animation-delay:.15s}
body.about-page .about-hero-editorial h1 .about-title-second{animation-delay:.3s}
.about-hero-introduction{position:absolute;left:0;top:calc(var(--about-title-top) + var(--about-display-size) * var(--type-h1-leading) + var(--about-title-gap));width:29%;max-width:340px;color:var(--muted);animation:about-type-enter .9s .4s both}
@keyframes about-photo-enter{from{opacity:0}to{opacity:1}}
@keyframes about-type-enter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media(min-width:768px) and (max-width:991px){
 body.about-page .about-hero-editorial{--about-display-size:clamp(90px,14vw,140px);--about-title-top:64px;--about-title-gap:46px;padding-top:112px}
 .about-hero-stage{min-height:570px}
 body.about-page .about-hero-editorial .about-hero-photo{left:43%;width:46%}
 .about-hero-introduction{width:36%}
 .about-hero-editorial .about-title-second{right:0;top:48%}
}
@media(max-width:767px){
 body.about-page .about-hero-editorial{--about-display-size:clamp(64px,18vw,100px);padding:104px 0 0}
 .about-hero-stage{display:flex;flex-direction:column;min-height:0}
 .about-hero-profession{position:static;max-width:none;margin-bottom:24px;order:0}
 :root body.type-system.about-page main .about-hero-editorial h1{position:relative;inset:auto;height:1.9em;order:1;flex-shrink:0}
 .about-hero-editorial .about-title-first{top:0;left:0}
 .about-hero-editorial .about-title-second{top:.85em;right:0}
 body.about-page .about-hero-editorial .about-hero-photo{position:relative;inset:auto;order:2;align-self:flex-end;width:86%;max-width:460px;margin-top:calc(var(--about-display-size) * -1.05)}
 body.about-page .about-hero-editorial .about-hero-photo img{aspect-ratio:4/5}
 .about-hero-introduction{position:static;width:100%;max-width:440px;order:3;margin-top:28px}
}
@media(prefers-reduced-motion:reduce){
 .about-hero-editorial :is(img,h1 span,.about-hero-introduction){animation:none!important;translate:none!important}
 body.about-page .about-hero-editorial h1 span{transform:none!important;will-change:auto}
}