@font-face{font-family:Figtree;src:url('./fonts/figtree-latin.woff2') format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('./fonts/source-serif-4-latin.woff2') format('woff2');font-style:normal;font-weight:200 900;font-display:swap}
:root{font-family:Figtree,Arial,sans-serif;color:#171717;background:#fff;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;overscroll-behavior-y:auto}
body{-webkit-font-smoothing:antialiased}
::selection{background:#e0e4d4;color:#111}
a{color:inherit;text-underline-offset:5px;text-decoration-thickness:1px}
a:focus-visible,summary:focus-visible{outline:2px solid #222;outline-offset:7px}
.skip{position:fixed;z-index:20;left:20px;top:15px;padding:12px 16px;background:#fff;transform:translateY(-180%)}
.skip:focus{transform:none}
.beat{max-width:750px;margin:0 auto;padding:95px 28px;text-align:center}
h1,h2{font-size:clamp(43px,6vw,78px);font-weight:620;letter-spacing:-.055em;line-height:1.01;margin:0 0 28px;text-wrap:balance}
em{font-family:'Source Serif 4',Georgia,serif;font-style:normal;font-weight:500;font-optical-sizing:auto;letter-spacing:-.035em}
p{font-size:clamp(16px,1.45vw,20px);line-height:1.55;margin:20px auto 0;max-width:45ch;text-wrap:pretty}
.last-line{font-weight:560}
.small-fact{display:flex;justify-content:center;align-items:center;gap:15px;text-align:left}
.small-fact strong{font-size:55px;font-weight:520;letter-spacing:-.07em;line-height:1}
.small-fact span{font-size:14px;line-height:1.4}
.portrait{margin:45px 0 0}
.portrait img{display:block;width:100%;height:auto}
.notes{max-width:1080px;margin:auto;padding:40px 32px 45px;display:flex;justify-content:space-between;gap:24px;align-items:flex-start;font-size:12px;color:#686868}
.notes details{max-width:660px}
.notes summary{cursor:pointer;width:fit-content;list-style:none;line-height:1.6;padding:8px 0}
.notes summary::-webkit-details-marker{display:none}
.notes summary:hover{text-decoration:underline;text-underline-offset:5px}
.research{padding:18px 0 30px}.research p{font-size:14px;line-height:1.6;margin:0 0 20px;max-width:none;text-wrap:pretty}
.research ol{margin:0;padding-left:18px}.research li{padding:10px 0 0 5px;font-size:14px}.research li p{margin-top:6px}
.colophon{padding:8px 0;line-height:1.6;white-space:nowrap;text-decoration:none}
.colophon:hover{text-decoration:underline}
#cinema{display:none}
.enhanced .journey{height:var(--journey-height,1180svh);position:relative;overflow-anchor:none}
.enhanced .viewport{position:sticky;top:0;width:100%;height:100svh;overflow:hidden;isolation:isolate}
.enhanced #cinema{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
canvas{display:block;width:100%;height:100%}
.enhanced .beat{position:absolute;inset:0;max-width:none;margin:0;padding:0;opacity:0;pointer-events:none;z-index:1}
.enhanced .beat.is-active{pointer-events:auto}
.enhanced .words{position:absolute;left:50%;top:50%;width:min(650px,76vw);transform:translate(-50%,-50%);transform-origin:center;will-change:transform,opacity}
.enhanced .opening h1{font-size:clamp(42px,6.7vw,96px);margin-bottom:24px}
.enhanced .opening p{font-size:clamp(15px,1.5vw,21px);line-height:1.55;max-width:39ch}
.enhanced .words h2{font-size:clamp(39px,5.5vw,72px)}
.enhanced .beat:not(.opening):not(.closing) .words{background:#fff;box-shadow:0 0 35px 27px #fff;border-radius:45%}
.enhanced .beat[data-beat="2"] .words{box-shadow:0 0 22px 12px #fff}
.enhanced .portrait{position:absolute;bottom:4%;left:50%;width:min(1120px,94vw);margin:0;transform:translateX(-50%);z-index:-1;will-change:opacity,transform}
.enhanced .portrait img{max-height:65svh;object-fit:contain;mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 94%,transparent)}
.enhanced .closing .words{top:19%;width:min(780px,88vw);background:#fff;box-shadow:0 0 22px 15px #fff}
.enhanced .closing h2{margin-bottom:20px}
.enhanced .closing p{font-size:18px;line-height:1.6}
@media(max-width:700px){
 .beat{padding:70px 25px}.beat h1,.beat h2{font-size:46px}p{font-size:17px}
 .enhanced .words{width:calc(100vw - 70px)}
 .enhanced .opening h1{font-size:clamp(36px,10.5vw,51px);margin-bottom:20px}
 .enhanced .opening p{font-size:15px;line-height:1.5}
 .enhanced .words h2{font-size:clamp(34px,10.1vw,47px);margin-bottom:21px}
 .enhanced .words p{font-size:16px;line-height:1.5;margin-top:16px}
 .enhanced .beat:not(.opening):not(.closing) .words{box-shadow:0 0 27px 19px #fff}
 .enhanced .portrait{width:142vw;bottom:27%}
 .enhanced .portrait img{max-height:50svh}
 .enhanced .closing .words{top:24%;width:calc(100vw - 42px)}
 .enhanced .closing p{font-size:16px}
 .small-fact strong{font-size:44px}.small-fact span{font-size:12px}
 .notes{padding:20px 24px 30px;font-size:11px;gap:20px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.words,.portrait{will-change:auto!important}}
