/* 573153490101851213: centred titles, full-width band, copy left / preview right. */
.about-role-roster{display:block}
.about-role{position:relative;border-top:1px solid var(--agency-rule);padding-block:28px}
.about-role summary{display:flex;align-items:baseline;gap:25px;cursor:pointer;list-style:none}
.about-role summary::-webkit-details-marker{display:none}
.about-role summary::after{content:none}
.about-role h3{font-size:clamp(32px,4.7vw,90px);font-weight:500;line-height:1.08;letter-spacing:-.035em;margin:0}
.about-role-number{font-size:12px;flex:none}
.about-role-reveal{display:grid;grid-template-columns:1fr .65fr;gap:8vw;margin:30px 0 0 8%}
.about-role-copy{font-size:clamp(17px,1.2vw,23px);line-height:1.55;margin:0}
.about-role-preview{margin:0;aspect-ratio:4/5}
.about-role-preview img{width:100%;height:100%;object-fit:cover}
.about-role summary:focus-visible{outline:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.about-role-fill,.about-roster-images{display:none}
.has-roster-hover{position:relative;isolation:isolate;margin-inline:calc(-1*var(--agency-gutter));padding-block:clamp(48px,7svh,86px)}
.has-roster-hover .about-role{padding:0;border:0;isolation:isolate}
.has-roster-hover .about-role-fill{display:block;position:absolute;inset:0;background:var(--musou-soft);clip-path:inset(0% 0% 100% 0%);z-index:-1;pointer-events:none}
.has-roster-hover .about-role summary{align-items:center;justify-content:center;min-height:clamp(150px,22svh,230px);padding:24px var(--agency-gutter);position:relative}
.has-roster-hover .about-role.is-selected{color:var(--musou-ui-ink)}
.has-roster-hover .about-role h3{text-align:center;max-width:52%;font-size:4.5vw}
.has-roster-hover .about-role-number{position:absolute;left:var(--agency-gutter);top:50%;transform:translateY(-50%)}
/* Keep the native content paintable during the exit; inactive reveals stay inert. */
.has-roster-hover .about-role::details-content{content-visibility:visible}
.has-roster-hover .about-role-reveal{position:absolute;inset:0;display:block;margin:0;pointer-events:none}
.has-roster-hover .about-role-copy{position:absolute;left:calc(var(--agency-gutter) + clamp(40px,3vw,64px));width:19%;top:50%;transform:translateY(-50%);font-size:clamp(15px,1vw,19px);line-height:1.45;opacity:0;translate:0 6px;transition:opacity 280ms cubic-bezier(.22,.61,.36,1),translate 360ms cubic-bezier(.22,1,.36,1)}
.has-roster-hover .about-role.is-selected .about-role-copy{opacity:1;translate:0;transition-duration:620ms,720ms;transition-delay:60ms}
.has-roster-hover .about-role-preview{display:none}
.has-roster-hover .about-roster-images{display:block;position:absolute;width:min(24vw,52svh);aspect-ratio:4/5;left:0;top:0;transform:translate3d(0,0,0);z-index:2;pointer-events:none;opacity:0;transition:opacity .38s cubic-bezier(.22,1,.36,1);overflow:hidden}
.has-roster-hover .about-roster-images.is-visible{opacity:1}
.about-roster-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

@media(max-width:1099px){
 .about-role-reveal{grid-template-columns:1fr;gap:28px;margin:26px 0 0}
 .about-role h3{font-size:clamp(36px,6vw,64px)}
 .about-role-preview{width:100%;aspect-ratio:4/3;max-height:75svh;justify-self:stretch}
}
@media(max-width:700px){
 .about-role summary{gap:18px}.about-role h3{font-size:10.5vw}
 .about-role-reveal{grid-template-columns:1fr;gap:25px;margin:22px 0 0}
 .about-role-preview{width:100%;aspect-ratio:4/5;justify-self:stretch}
}
@media(prefers-reduced-motion:reduce){
 .about-role *, .about-role::before{animation:none!important;transition:none!important}
}
@media print{
 .about-role{break-inside:avoid}.about-role::details-content{content-visibility:visible;display:block}.about-role-reveal{display:block!important;content-visibility:visible}
 .about-role-preview{display:none}
}