/* Cinema showcase: pinned scroll chapters, line reveals, light and dark rhythm. Native scroll only. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/cormorant.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/cormorant-italic.woff2) format('woff2')}
@font-face{font-family:'Assistant';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/assistant.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:200 600;font-display:swap;src:url(fonts/geist.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-italic.woff2) format('woff2')}
:root{--bg:#06121f;--fg:#fff;--muted:#a9b6c6;--accent:#d9b25a;--ivory:#F5F1E8;--ink:#0B1A2C;--ink2:#56606c;--acc-ink:#8a6a22;
--fd:Georgia,serif;--fb:system-ui,sans-serif;--dw:500;--bw:400;--sw:600;--es:italic;--ef:var(--fd);--ew:inherit;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--fb);font-weight:var(--bw);font-size:19px;line-height:1.5;overflow-x:clip}
a{color:inherit}
img{display:block}
em{font-style:var(--es);font-family:var(--ef);font-weight:var(--ew)}
.cn-acc{color:var(--accent)}
/* nav */
.cn-nav{position:fixed;inset:0 0 auto 0;z-index:50;height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 4.2vw;transition:transform .7s var(--ease),opacity .7s var(--ease)}
.cn-nav::before{content:"";position:absolute;inset:0;background:var(--bg);opacity:0;transition:opacity .5s var(--ease);z-index:-1}
.cn-nav.solid::before{opacity:.94}
.cn-nav.away{transform:translate3d(0,-100%,0)}
.cn-logo img{height:var(--logo-h,40px);width:auto}
.cn-btn{display:inline-flex;align-items:center;gap:12px;font:600 15px/1 var(--fb);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--bg);background:var(--accent);border-radius:8px;padding:15px 22px;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.cn-btn:hover{transform:translate3d(0,-2px,0)}
.cn-btn-lg{font-size:16px;padding:20px 30px}
.cn-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
/* pinned chapters */
.cn-pin{position:relative}
.cn-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.cn-chapter .cn-stage{background:var(--ivory)}
.cn-recede{position:absolute;inset:0;transform-origin:50% 40%;will-change:transform}
.cn-frame{position:absolute;inset:0;overflow:hidden;background:var(--bg);border-radius:16px;transform-origin:50% 50%;will-change:transform}
.cn-frame.full{border-radius:0}
.cn-media{position:absolute;inset:0;will-change:transform}
.cn-media img,.cn-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;object-position:var(--pos,50% 50%)}
.cn-media iframe{opacity:0;transition:opacity 1.2s var(--ease)}
.cn-media.live iframe{opacity:1}
.cn-shade{position:absolute;inset:0;background:var(--bg);opacity:0;pointer-events:none;will-change:opacity}
.cn-copy{position:absolute;left:6vw;top:0;bottom:0;width:min(44vw,860px);pointer-events:none;z-index:3}
.cn-copy a,.cn-copy button{pointer-events:auto}
.cn-block{position:absolute;left:0;right:0}
.cn-pos-mid{top:50%;transform:translateY(-50%)}
.cn-pos-low{bottom:12vh}
.cn-pos-top{top:17vh}
.cn-kick{font:600 13px/1.4 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:22px;display:flex;gap:18px;align-items:center}
.cn-kick i{font-style:normal;color:var(--fg);opacity:.6;letter-spacing:.14em}
.cn-h1{font:var(--dw) clamp(54px,5.2vw,96px)/.98 var(--fd);letter-spacing:-.02em}
.cn-h2{font:var(--dw) clamp(44px,4.4vw,84px)/1.02 var(--fd);letter-spacing:-.015em}
.cn-h3{font:var(--dw) clamp(38px,3.6vw,68px)/1.05 var(--fd);letter-spacing:-.01em}
.cn-lede{font-size:clamp(19px,1.35vw,23px);line-height:1.5;color:var(--muted);margin-top:26px;max-width:34em}
.cn-open{display:inline-block;margin-top:26px;font:600 13px/1 var(--fb);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--fg);padding-bottom:7px;border-bottom:1px solid var(--accent)}
/* line reveal: each line slides up from its own mask */
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.li{display:block}
.cn-ready .li{transform:translate3d(0,108%,0);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
.cn-ready .fade{opacity:0;transform:translate3d(0,18px,0);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0) * 110ms + 120ms)}
.cn-ready .on .li{transform:none}
.cn-ready .on .fade{opacity:1;transform:none}
.cn-ready .cn-end-in:not(.on) .li{transform:translate3d(0,108%,0)}
.cn-ready .cn-block:not(.on) .li{transition-delay:0ms;transition-duration:.6s;transform:translate3d(0,-108%,0)}
.cn-ready .cn-block.before:not(.on) .li{transform:translate3d(0,108%,0)}
.cn-ready .cn-block:not(.on) .fade{transition-delay:0ms;transition-duration:.45s}
.cn-block:not(.on){pointer-events:none}
.cn-block:not(.on) a{pointer-events:none}
/* step rail */
.cn-rail{position:absolute;right:4.2vw;top:50%;transform:translateY(-50%);display:grid;gap:12px;z-index:3;pointer-events:none}
.cn-rail span{display:block;width:2px;height:44px;background:rgba(255,255,255,.18);position:relative;overflow:hidden}
.cn-rail span i{position:absolute;inset:0;background:var(--accent);transform-origin:50% 0;transform:scaleY(0)}
.cn-count{position:absolute;right:4.2vw;bottom:7vh;font:500 14px/1 var(--fb);letter-spacing:.16em;color:var(--muted);z-index:3;font-variant-numeric:tabular-nums}
.cn-count b{color:var(--fg);font-weight:600}
.cn-cue{position:absolute;left:50%;bottom:4.5vh;transform:translateX(-50%);font:600 13px/1 var(--fb);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);display:grid;justify-items:center;gap:14px;z-index:3;transition:opacity .6s var(--ease)}
.cn-cue i{display:block;width:1px;height:46px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.cn-cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:46px;background:var(--accent);animation:cn-cue 2.2s var(--ease) infinite}
@keyframes cn-cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.cn-cue.gone{opacity:0}
.cn-rail,.cn-count{transition:opacity .6s var(--ease)}
.pre .cn-rail,.pre .cn-count{opacity:0}
.cn-note{position:absolute;right:4.2vw;bottom:3.4vh;font-size:13px;color:var(--muted);opacity:.8;z-index:3}
/* chart drawn over the scene, no box */
.cn-chart{position:absolute;left:6vw;right:8.5vw;bottom:9vh;height:28vh;z-index:2;pointer-events:none}
.cn-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cn-wipe{position:absolute;top:-4%;bottom:-4%;overflow:hidden;will-change:transform;transform:translate3d(-100%,0,0)}
.cn-wipe-in{position:absolute;top:0;bottom:0;will-change:transform}
.cn-wipe-in svg{top:3.7037%;bottom:auto;height:92.5926%}
.cn-now{position:absolute;top:0;bottom:0;border-left:1px dashed rgba(255,255,255,.4);opacity:0;transition:opacity .6s var(--ease)}
.cn-now.on{opacity:1}
.cn-chart .g{stroke:rgba(255,255,255,.09);stroke-width:1;vector-effect:non-scaling-stroke}
.cn-chart .raw{fill:none;stroke:var(--accent);stroke-opacity:.75;stroke-width:1.4;vector-effect:non-scaling-stroke}
.cn-chart .mdl{fill:none;stroke:#fff;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cn-chart .fc{fill:none;stroke:var(--accent);stroke-width:3;stroke-dasharray:8 7;vector-effect:non-scaling-stroke}
.cn-chart .band{fill:var(--accent);fill-opacity:.13}
.cn-chart .now{stroke:rgba(255,255,255,.4);stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.cn-legend{position:absolute;right:0;top:-38px;display:flex;gap:28px;font-size:14px;color:var(--muted)}
.cn-legend span{display:flex;align-items:center;gap:10px;opacity:.25;transition:opacity .6s var(--ease)}
.cn-legend span.on{opacity:1;color:var(--fg)}
.cn-legend i{display:block;width:26px;border-top:2px solid var(--accent)}
.cn-legend .k2 i{border-top:3px solid #fff}
.cn-legend .k3 i{border-top:3px dashed var(--accent)}
/* statement: light curtain with words that fill in as you scroll */
.cn-light{background:var(--ivory);color:var(--ink)}
.cn-curtain{margin-top:-100vh;margin-top:-100svh;z-index:5}
.cn-statement{position:relative;height:230vh}
.cn-statement .cn-stage{display:grid;align-content:center;padding:0 9vw;background:var(--ivory)}
.cn-statement .cn-kick{color:var(--acc-ink)}
.cn-big{font:var(--dw) clamp(44px,4.5vw,86px)/1.08 var(--fd);letter-spacing:-.015em;max-width:17em}
.cn-big .w{opacity:.13;transition:opacity .25s linear}
.cn-sig{margin-top:44px;display:flex;gap:40px;align-items:center;font:600 13px/1.4 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.cn-sig i{display:block;width:72px;height:1px;background:var(--acc-ink);transform-origin:0 50%;transform:scaleX(var(--sg,0))}
/* figures: one at a time, very large */
.cn-figures .cn-stage{background:var(--ivory);color:var(--ink)}
.cn-figures .cn-kick{color:var(--acc-ink);position:absolute;left:6vw;top:15vh}
.cn-fig{position:absolute;left:6vw;right:6vw;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:5vw;align-items:end}
.cn-fig-val{font:var(--dw) clamp(150px,17vw,320px)/.86 var(--fd);letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.cn-fig-val em{font-size:.86em}
.cn-fig-lab{font:var(--dw) clamp(34px,2.9vw,54px)/1.1 var(--fd);padding-bottom:1.2vw}
.cn-fig-note{font-size:clamp(18px,1.25vw,22px);color:var(--ink2);margin-top:18px;line-height:1.45}
.cn-fig .fade{transition-delay:calc(var(--i,0) * 110ms + 220ms)}
.cn-figures .cn-rail span{background:rgba(11,26,44,.14)}
.cn-figures .cn-rail span i{background:var(--acc-ink)}
.cn-figures .cn-count{color:var(--ink2)}
.cn-figures .cn-count b{color:var(--ink)}
.cn-figures .cn-src{position:absolute;left:6vw;bottom:7vh;font-size:14px;color:var(--ink2)}
/* photo chapter: light, framed photography, copy on the left */
.cn-photos .cn-stage{background:var(--ivory);color:var(--ink)}
.cn-pframe{position:absolute;left:46vw;right:4.2vw;top:15vh;bottom:12vh;border-radius:8px;overflow:hidden;background:#d8d2c6;will-change:transform}
.cn-pframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity 1.1s var(--ease),transform 2.4s var(--ease)}
.cn-pframe img.on{opacity:1;transform:none}
.cn-photos .cn-copy{width:34vw}
.cn-photos .cn-kick,.cn-figures .cn-kick{color:var(--acc-ink)}
.cn-photos .cn-kick i{color:var(--ink)}
.cn-photos .cn-lede{color:var(--ink2)}
.cn-photos .cn-open{color:var(--ink);border-color:var(--acc-ink)}
.cn-photos .cn-rail{right:auto;left:43vw}
.cn-photos .cn-rail span,.cn-figures .cn-rail span{background:rgba(11,26,44,.14)}
.cn-photos .cn-rail span i,.cn-figures .cn-rail span i{background:var(--acc-ink)}
.cn-photos .cn-count{right:auto;left:6vw;bottom:7vh;color:var(--ink2)}
.cn-photos .cn-count b{color:var(--ink)}
.cn-fig-pre{font:600 13px/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--acc-ink);margin-bottom:18px}
.cn-figs-words .cn-fig-val{font-size:clamp(96px,10.5vw,200px);letter-spacing:-.03em}
/* closing */
.cn-end{position:relative;height:100vh;height:100svh;min-height:640px;background:var(--bg);overflow:hidden;display:grid;place-items:center;text-align:center}
.cn-end canvas{position:absolute;inset:0;width:100%;height:100%}
.cn-end-in{position:relative;z-index:2;display:grid;justify-items:center;gap:40px;margin-top:14vh}
.cn-end .cn-h2{max-width:14em}
.cn-end-in.cn-end-short{gap:32px;margin-top:6vh}
.cn-foot{position:absolute;left:4.2vw;right:4.2vw;bottom:4vh;display:flex;justify-content:space-between;gap:30px;font-size:14px;color:var(--muted);z-index:2;text-align:left}
.cn-foot span:last-child{text-align:right;white-space:nowrap}
/* mobile just stacks cleanly */
@media (max-width:760px){
.cn-hero .cn-frame{opacity:.42}
.cn-nav{height:68px}.cn-logo img{height:calc(var(--logo-h,40px) * .75)}.cn-btn{font-size:13px;padding:12px 15px}
.cn-copy{left:6vw;right:6vw;width:auto}.cn-pos-low{bottom:16vh}
.cn-rail{display:none}.cn-count{bottom:4vh;left:6vw;right:auto}
.cn-fig{grid-template-columns:1fr;gap:20px}.cn-fig-lab{padding:0}
.cn-chart{height:24vh;bottom:6vh}.cn-legend{display:none}
.cn-foot{flex-direction:column;gap:8px}
.cn-pframe{left:6vw;right:6vw;top:12vh;bottom:auto;height:38vh}.cn-photos .cn-copy{width:auto}.cn-photos .cn-block.cn-pos-mid{top:auto;bottom:12vh;transform:none}.cn-foot span:last-child{text-align:left}
}
@media (prefers-reduced-motion:reduce){
.cn-ready .li,.cn-ready .fade,.cn-btn,.cn-nav,.cn-big .w,.cn-legend span{transition:none!important}
.cn-cue i::after{animation:none}
}