/* The portrait is a small physical performance controlled by page scroll. */
.signature-scroll{position:relative}
.signature-scroll.is-interactive{height:230svh}
.signature-scroll .signature-scene{height:100svh;min-height:580px;max-height:1000px}
.signature-scroll.is-interactive .signature-scene{position:sticky;top:0;max-height:none;min-height:0;overflow:hidden}
.signature-scroll .signature-portrait{left:0;right:-20%;bottom:0;height:100%;transform:none!important;transition:none;mix-blend-mode:lighten}
.signature-scroll .signature-portrait img,.signature-scroll .signature-portrait video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;mask-image:none}
.signature-scroll video{opacity:0;pointer-events:none;transition:opacity .2s ease}
.signature-scroll.is-idle .signature-idle,.signature-scroll.is-action .signature-action{opacity:1}
.signature-scroll.is-idle .signature-poster,.signature-scroll.is-action .signature-poster{opacity:0}
.signature-scroll .signature-copy{bottom:8%;z-index:3}
.signature-scroll .signature-copy h2{font-size:clamp(96px,15vw,230px);max-width:67vw}
.signature-scroll .signature-copy h2 span{transform:none!important}
.signature-scroll .signature-copy h2 span:last-child{font-size:.9em}
.signature-scroll .signature-copy p{font-size:clamp(22px,2.2vw,32px)}
.signature-ceiling{position:absolute;inset:0 0 auto;height:var(--ceiling,0px);background:var(--site-black,#100e0c);z-index:2;pointer-events:none;opacity:0;border-bottom:1px solid #ffffff20}
.signature-scroll.is-action .signature-ceiling{opacity:1}
.signature-cue{position:absolute;right:var(--gutter);top:100px;z-index:4;display:flex;gap:14px;align-items:center;font:11px/1.4 var(--mono);letter-spacing:.08em;color:#bcb6b0}
.signature-cue button{color:inherit;border:1px solid #ffffff38;border-radius:100px;padding:9px 13px;background:var(--site-black);font:inherit;cursor:pointer}
.signature-cue button:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.signature-scroll:not(.is-interactive) .signature-cue{display:none}
.signature-scroll.is-action .signature-cue>span{opacity:0}
@media(max-width:760px){
 .signature-scroll.is-interactive{height:205svh}
 .signature-scroll .signature-scene{height:82svh;min-height:530px}
 .signature-scroll.is-interactive .signature-scene{height:100svh;min-height:0}
 .signature-scroll .signature-portrait{left:-55%;right:-55%;height:88%;bottom:10%}
 .signature-scroll .signature-copy{bottom:7%}
 .signature-scroll .signature-copy h2{font-size:23vw;max-width:75vw}
 .signature-scroll .signature-copy p{font-size:20px;margin-top:15px}
 .signature-cue{top:90px;font-size:10px;left:var(--gutter);justify-content:space-between}
}
.reduced .signature-scroll{height:auto!important}
.reduced .signature-scroll .signature-scene{position:relative!important;height:85svh;min-height:530px}
@media(prefers-reduced-motion:reduce){.signature-scroll video{transition:none}}