:root{--bg:#121413;--ink:#d8d4ca;--muted:#8b887f;--rule:rgba(216,212,202,.14);--acc:#c8a46a;--d:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;--t:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--w:min(1080px,100% - 2.5rem)}
*{box-sizing:border-box}html{background:var(--bg);color-scheme:dark}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font:400 1.0625rem/1.65 var(--t);color:var(--ink);background:var(--bg)}
body::before{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.1;background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration-color:var(--rule);text-underline-offset:.25em;transition:color .2s,text-decoration-color .2s}
a:hover{color:#fff;text-decoration-color:var(--acc)}
:focus-visible{outline:1px solid var(--acc);outline-offset:3px}
.wrap{width:var(--w);margin-inline:auto}main{flex:1}
.top{display:flex;justify-content:space-between;align-items:baseline;padding-block:1.6rem 1rem}
.mark{font:italic 400 1.3rem var(--d);text-decoration:none}
.nav{display:flex;gap:1.6rem}
.nav a{color:var(--muted);text-decoration:none;font-size:.95rem;background:linear-gradient(var(--acc),var(--acc)) left bottom/0 1px no-repeat;transition:background-size .35s,color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--ink);background-size:100% 1px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 2rem;padding-block:3rem 2rem;margin-top:4rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.9rem}
.foot nav{display:flex;gap:1.4rem}.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}
.frame{position:relative;aspect-ratio:2.39/1;margin-top:1rem;overflow:hidden;background:linear-gradient(135deg,#1b1d1c,#0d0f0e)}
.frame img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.82)}
.frame::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45))}
.marks,.still::after{content:"";position:absolute;inset:12px;z-index:2;pointer-events:none;--c:rgba(216,212,202,.5);background:linear-gradient(var(--c),var(--c)) top left/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) top left/1px 14px no-repeat,linear-gradient(var(--c),var(--c)) top right/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) top right/1px 14px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/1px 14px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1px 14px no-repeat}
.slate{position:absolute;z-index:3;left:28px;right:28px;bottom:26px;display:flex;justify-content:space-between;font-size:.8rem;color:rgba(216,212,202,.75);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.open{animation:open 1.7s cubic-bezier(.6,0,.2,1) both}@keyframes open{from{clip-path:inset(46% 0)}to{clip-path:inset(0)}}
.name{font:400 clamp(2.5rem,8vw,5.6rem)/1 var(--d);letter-spacing:-.015em;margin:2.2rem 0 .7rem}
.sub{color:var(--muted);margin:0}
.cols{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem 5rem;margin-top:3rem}
.prose{max-width:36rem}.prose p{margin:0 0 1.1em}
.doors{display:grid;align-content:start}
.door{display:block;padding:1rem 0;border-top:1px solid var(--rule);text-decoration:none}.door:last-child{border-bottom:1px solid var(--rule)}
.door b{display:block;font:400 clamp(1.7rem,3.4vw,2.3rem)/1.2 var(--d);transition:letter-spacing .4s,color .2s}
.door:hover b{letter-spacing:.02em;color:#fff}.door span{color:var(--muted);font-size:.9rem}
h1{font:400 clamp(2.4rem,6vw,4rem)/1.05 var(--d);letter-spacing:-.01em;margin:2.5rem 0 1.5rem}
.film,.sec{display:grid;grid-template-columns:5.5rem 1fr;gap:0 1.5rem;padding-block:2.4rem;border-top:1px solid var(--rule)}
.yr{color:var(--muted);font-variant-numeric:tabular-nums}
h2{font:400 clamp(1.6rem,3.8vw,2.5rem)/1.15 var(--d);margin:0 0 .8rem}
.film p,.sec p{max-width:36rem;margin:0 0 1rem}
.stills{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.4rem 0}
.still{position:relative;margin:0;aspect-ratio:16/9;background:#0d0f0e}.still::after{inset:8px}
.still img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.2) brightness(.9)}
summary{cursor:pointer;color:var(--muted);list-style:none;width:max-content}summary::-webkit-details-marker{display:none}
summary::before{content:"+ "}details[open] summary::before{content:"\2013  "}summary:hover{color:var(--ink)}
dl{display:grid;grid-template-columns:1fr 1fr;gap:.3rem 1.3rem;max-width:38rem;margin:1.2rem 0 0;font-size:.9rem;overflow-wrap:anywhere}
dt{text-align:right;color:var(--muted)}dd{margin:0}
.list{margin:0;padding:0;list-style:none}.list h3{font:italic 400 1.3rem var(--d);color:var(--muted);margin:3rem 0 .6rem}
.list li{display:grid;grid-template-columns:5.5rem 1fr auto;gap:0 1.5rem;padding:.7rem 0;border-top:1px solid var(--rule)}
.list .m{color:var(--muted);font-size:.9rem;text-align:right}
@media(max-width:720px){.cols,.film,.sec{grid-template-columns:1fr}.film,.sec{gap:.4rem}.list li{grid-template-columns:3.5rem 1fr;gap:0 1rem}.list .m{grid-column:2;text-align:left}.stills{grid-template-columns:1fr}.cols{gap:2rem}}
@media(prefers-reduced-motion:reduce){.open{animation:none}*{transition:none!important}}