html:has(.staff-roll){overflow:hidden;scrollbar-gutter:auto}
.staff-roll{position:fixed;inset:0;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 25%,#504148,#1b1722 75%);color:#fff5ed;}
.staff-roll-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;}
.staff-roll-shade{position:absolute;inset:0;background:#17121ed9;opacity:0;}
.staff-roll h1{position:absolute;top:6%;left:0;right:0;margin:0;text-align:center;font:400 clamp(20px,2.4vw,32px)/1.5 Georgia,serif;letter-spacing:.16em;text-shadow:0 2px 12px #211323;opacity:0;}
.staff-roll-copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:90px 10%;opacity:0;pointer-events:none;}
.staff-roll-copy p{max-width:760px;margin:0;text-align:center;word-break:keep-all;overflow-wrap:anywhere;font:400 clamp(17px,1.75vw,26px)/2 'Love Weekly Story','Batang',serif;font-synthesis:none;text-shadow:0 2px 18px #17111f;}
.staff-roll footer{position:absolute;right:6%;bottom:max(6%,env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;font-size:12px;color:#f3e6e4d9;opacity:0;transition:opacity .6s;pointer-events:none;}
.staff-roll footer .icon{width:17px;height:17px;animation:intro-cue 2s ease-in-out infinite;}
.staff-roll-advance{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;border-radius:0;padding:0;cursor:pointer;touch-action:manipulation;}
.staff-roll-advance:disabled{cursor:default;}
.staff-roll.is-ready footer{opacity:1;}
.staff-roll.is-ready .staff-roll-art,.staff-roll.is-ready .staff-roll-shade,.staff-roll.is-ready h1,.staff-roll.is-ready .staff-roll-copy{opacity:1;}
@media(max-width:700px){
 .staff-roll h1{top:5.5%;font-size:23px;}
 .staff-roll-art{inset:14dvh 0 auto;width:100%;height:auto;aspect-ratio:1672/941;}
 .staff-roll-shade{background:linear-gradient(#17121e18 10%,#17121e20 45%,#17121eaa 72%);}
 .staff-roll-copy{inset:calc(14dvh + 56.28vw + 24px) 0 auto;display:block;padding:0 8%;}
 .staff-roll-copy p{font-size:clamp(15px,4.3vw,18px);line-height:1.9;}
 .staff-roll footer{bottom:max(26px,env(safe-area-inset-bottom));font-size:11px;}
}
@media(max-height:520px) and (orientation:landscape){
 .staff-roll h1{font-size:20px;top:5%;}
 .staff-roll-art{inset:0;width:100%;height:100%;aspect-ratio:auto;}
 .staff-roll-shade{background:#17121ed9;}
 .staff-roll-copy{inset:0;display:flex;padding:65px 10%;}
 .staff-roll-copy p{font-size:17px;max-width:600px;line-height:1.8;}
 .staff-roll footer{bottom:max(6%,env(safe-area-inset-bottom));}
}