@font-face{font-family:Space;src:url(../assets/space-grotesk.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Instrument;src:url(../assets/instrument-italic.woff2) format("woff2");font-style:italic;font-display:swap}
:root{color-scheme:light;--paper:#f6f5ef;--ink:#1b201e;--muted:#505953;--acid:#d9ed9c;background:var(--paper);color:var(--ink);font:16px/1.4 Space,Arial,sans-serif}
*{box-sizing:border-box}
body,h1,p{margin:0}
button,a{font:inherit}
button{cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid #7972ef;outline-offset:3px}
[hidden]{display:none!important}
.masthead,main{width:min(1360px,calc(100% - clamp(40px,7.6vw,150px)));margin:auto}
.masthead{display:flex;justify-content:space-between;align-items:center;padding:21px 0 17px;border-bottom:1px solid #cecec3}
.wordmark{display:flex;align-items:center;gap:11px;font-weight:700;font-size:24px;letter-spacing:-.065em;text-decoration:none}
.sigil{display:flex;align-items:center;gap:2px;transform:skew(-16deg)}
.sigil i{width:5px;height:15px;background:currentColor}.sigil i:nth-child(2){height:23px}.sigil i:nth-child(3){height:18px}
.masthead nav{display:flex;align-items:center;gap:clamp(12px,2vw,28px);font-size:12px;font-weight:500}
.masthead nav a{text-decoration:none;color:var(--muted)}
.masthead nav [aria-current]{color:var(--ink)}
.masthead nav [aria-current]:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#64823c;vertical-align:2px;margin-right:6px}
.heading{display:flex;align-items:end;justify-content:space-between;gap:22px;padding:clamp(23px,2.7vw,43px) 0 clamp(21px,2.3vw,36px)}
h1{font-weight:500;font-size:clamp(50px,6.4vw,102px);line-height:.98;letter-spacing:-.08em}
h1 em{font-family:Instrument,Georgia,serif;font-weight:400;letter-spacing:-.045em;white-space:nowrap}
.heading>p{max-width:30ch;font-size:clamp(13px,1.1vw,17px);color:var(--muted);line-height:1.45;padding-bottom:3px}
.heading>p i{font-style:normal;color:var(--ink)}
.theater{color:#eef1e7;background:#141817;border-radius:12px;overflow:hidden;isolation:isolate;box-shadow:0 1px 0 #ffffff75 inset}
.aperture{position:relative;isolation:isolate;overflow:hidden;height:clamp(375px,min(40vw,64svh),590px);background:radial-gradient(ellipse at 16% 18%,#474e49 0%,transparent 52%),radial-gradient(ellipse at 80% 86%,#3e463e 0%,transparent 50%),#242a28}
.aperture::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(119deg,transparent 0 3px,#1015110d 3px 4px)}
.still,.space,.falloff{position:absolute;inset:0}
.still{width:100%;height:100%;object-fit:cover}
.space{visibility:hidden;overflow:hidden}
.film-ready .space{visibility:visible}.film-ready .still{visibility:hidden}
.lens-plane{position:absolute;left:0;top:0;width:max-content;transform-origin:0 0}
.falloff{pointer-events:none;background:radial-gradient(ellipse at var(--optical-x,50%) var(--optical-y,50%),transparent 40%,#08100c15 75%,#080d0b47 108%)}
.deck{position:relative;display:flex;align-items:center;gap:14px;padding:10px 20px 12px;border-top:1px solid #565d54;color:#eeeeea;background:#171c19}
.shuttle{position:absolute;bottom:calc(100% - 6px);left:0;z-index:2;appearance:none;margin:0;width:100%;height:14px;cursor:ew-resize;background:transparent}
.shuttle::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,#c6d5a8 var(--position,0%),#525b51 var(--position,0%))}
.shuttle::-moz-range-track{height:3px;background:#525b51}.shuttle::-moz-range-progress{height:3px;background:#c6d5a8}
.shuttle::-webkit-slider-thumb{appearance:none;border:0;width:11px;height:11px;margin-top:-4px;border-radius:100%;background:#eff4db;opacity:0}
.shuttle::-moz-range-thumb{border:0;width:11px;height:11px;border-radius:100%;background:#eff4db}
.shuttle:hover::-webkit-slider-thumb,.shuttle:focus-visible::-webkit-slider-thumb{opacity:1}
.shuttle:focus-visible{outline:2px solid #b8c9ff;outline-offset:-2px}
[data-film-play]{width:40px;height:40px;border:1px solid #697366;border-radius:50%;color:#1d2419;background:#def0b6;display:grid;place-items:center;flex:none}
[data-film-play] span{width:0;height:0;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent currentColor;margin-left:2px}
[data-running="true"] [data-film-play] span{width:9px;height:12px;border:solid currentColor;border-width:0 3px;margin:0}
[data-ended="true"] [data-film-play] span{font:22px/1 Arial;border:0;width:auto;height:auto;margin:0}
[data-ended="true"] [data-film-play] span::before{content:'↻'}
.timer{color:#b1baae;font:11px/1 Consolas,'Courier New',monospace;white-space:nowrap}.timer [data-clock]{color:#eef0e8}
.cuts{display:flex;gap:10px;flex:1;margin-left:12px}
.cuts button{flex:1;text-align:left;background:none;border:0;color:#c1c8c0;min-height:40px;padding:3px 0 0;font-size:12px;min-width:0}
.cuts i{display:block;height:2px;background:#444c42;margin-bottom:8px;position:relative;overflow:hidden}
.cuts i:after{content:'';display:block;position:absolute;inset:0;background:var(--acid);transform:scaleX(var(--played,0));transform-origin:left}
.cuts button[aria-current="step"]{color:#e5f2c8}
.afterword{display:flex;justify-content:space-between;align-items:start;gap:10px;padding:15px 0 32px;color:var(--muted);font-size:13px}
.afterword a,.masthead a:hover{text-underline-offset:3px}
.afterword a{white-space:nowrap;color:var(--ink)}
.visually-hidden{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.embed main,.render main{width:100%}
.embed .masthead,.embed .heading,.render .masthead,.render .heading,.render .deck,.render .afterword,.embed .afterword{display:none!important}
.embed .theater,.render .theater{border-radius:0}
.render .aperture{height:100dvh}
.embed .aperture{height:clamp(290px,45vw,540px)}
@media(max-width:700px){
 .masthead,main{width:calc(100% - 30px)}
 .masthead{padding:15px 0}.wordmark{font-size:20px}.masthead nav{font-size:11px;gap:11px}
 .heading{display:block;padding:24px 0 19px}.heading>p{max-width:43ch;margin-top:10px;font-size:14px}
 h1{font-size:clamp(45px,9.6vw,68px)}
 .aperture,.embed .aperture{height:clamp(330px,97vw,480px)}
 .deck{gap:9px;padding:9px 10px}.timer{display:none}.cuts{margin:0;gap:6px}.cuts button{font-size:10px}
 [data-film-play]{width:34px;height:34px}.afterword{font-size:12px}
}
@media(max-height:530px) and (min-width:701px){.aperture{height:clamp(265px,64svh,390px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}
