.opening{padding-top:72px;padding-bottom:72px}
/* Refined signature. Geometry is fixed before decode and remains fixed in playback. */
html[data-hook=frame]{--title-size:min(clamp(56px,6.5vw,96px),max(40px,calc((var(--opening-height) - 240px)/3.6)));--cover-space:calc(var(--opening-height) - var(--title-size)*1.84 - 192px)}
html[data-hook=frame] .opening{gap:32px}
html[data-hook=frame] h1{line-height:.92;letter-spacing:-.042em}
html[data-hook=frame] .lead-photograph{--lead-height:min(480px,54svh,max(0px,var(--cover-space)))}
html[data-hook=frame] .masthead span{opacity:1}
.signature-curtain{display:none;position:absolute;inset:-1px;z-index:3;overflow:hidden;pointer-events:none}
.signature-curtain span{position:absolute;left:0;right:0;height:51%;background:#000}.signature-curtain span:first-child{top:0}.signature-curtain span:last-child{bottom:0}
html[data-hook=frame].intro-pending .signature-curtain,html[data-hook=frame].hook-entering .signature-curtain{display:block}
html[data-hook=frame] .intro-tile{transform:translateX(var(--drift,0px));transition:opacity 650ms cubic-bezier(.22,.7,.2,1),transform 850ms cubic-bezier(.16,1,.3,1);transition-delay:var(--entry-delay,0ms)}
html[data-hook=frame] .intro-tile[data-ready]{transform:translateX(0)}html[data-hook=frame] .intro-tile img{transform:none;transition:none}
html[data-hook=frame].intro-ending .intro-tile{transform:translateX(var(--drift,0px));transition-duration:420ms,650ms;transition-delay:var(--exit-delay,0ms)}
/* Square black panels overdraw the rounded photo by one pixel. This covers
   antialiased edges without animating a mask on the HDR image itself. */
@keyframes signature-open-top{from{transform:translateY(0)}to{transform:translateY(-101%)}}
@keyframes signature-open-bottom{from{transform:translateY(0)}to{transform:translateY(101%)}}
@media(prefers-reduced-motion:no-preference){
 html[data-hook=frame].hook-entering .signature-curtain span:first-child{animation:signature-open-top 800ms cubic-bezier(.65,0,.2,1) 60ms both}
 html[data-hook=frame].hook-entering .signature-curtain span:last-child{animation:signature-open-bottom 800ms cubic-bezier(.65,0,.2,1) 60ms both}
 html[data-hook=frame].signature-settled .masthead span:is(:first-child,:last-child){animation:none;opacity:1;transform:none}
}
@media(min-width:1600px){html[data-hook=frame] .lead-photograph{--lead-height:min(560px,52svh,max(0px,var(--cover-space)))}}
@media(max-width:700px){html[data-hook=frame]{--title-size:clamp(48px,14.5vw,64px);--cover-space:calc(var(--opening-height) - var(--title-size)*1.84 - 176px)}html[data-hook=frame] .opening{gap:24px}html[data-hook=frame] .lead-photograph{--lead-height:min(430px,49svh,max(0px,var(--cover-space)))}}
@media(prefers-reduced-motion:reduce){.signature-curtain{display:none!important}.masthead span{animation:none!important;transform:none!important;opacity:1!important}}