:root{--bg:#07090c;--land:#1b232c;--land-hi:#26313c;--ink:#e9edf1;--dim:#8b97a3;--red:#c8372d;
--serif:'Cormorant Garamond',Georgia,serif;--sans:'Oswald','Arial Narrow',sans-serif;--gut:clamp(16px,4vw,56px)}
*{box-sizing:border-box;font-variant-numeric:lining-nums!important}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 20px/1.5 var(--serif);font-variant-numeric:lining-nums;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gut);position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:600 22px/1 var(--serif);letter-spacing:.02em}
.brand img{border-radius:50%}
.bar nav{display:flex;gap:22px}
.bar nav a{font:400 15px/1 var(--sans);letter-spacing:.04em;color:var(--dim);text-decoration:none;padding:10px 0}
.bar nav a:hover{color:var(--ink)}
.stage{position:relative;display:grid;grid-template-columns:minmax(0,2.15fr) minmax(280px,1fr);gap:clamp(24px,3.4vw,52px);padding:6px var(--gut) clamp(36px,5vw,72px);align-items:start;isolation:isolate}
.glow{position:absolute;inset:-90px 0 0;z-index:-1;background-size:cover;background-position:center;filter:blur(70px) saturate(.75);opacity:.3;transition:opacity .6s;
-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.screen{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.65)}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;color:var(--ink)}
.poster img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;left:clamp(14px,2.2vw,30px);bottom:clamp(14px,2.2vw,30px);display:flex;align-items:center;gap:12px;background:var(--red);padding:12px 22px 12px 18px;font:500 17px/1 var(--sans);letter-spacing:.03em;transition:background .15s}
.play::before{content:"";border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.poster:hover .play{background:#dc4236}
.notes .when{font:400 15px/1.3 var(--sans);letter-spacing:.04em;color:var(--dim);margin:0 0 14px}
.notes h2{font:500 clamp(34px,3.5vw,54px)/1.04 var(--serif);margin:0 0 12px;letter-spacing:-.005em;text-wrap:balance}
.notes .sub{font:italic 500 23px/1.25 var(--serif);color:var(--dim);margin:0 0 18px}
.notes .desc{margin:0 0 22px;max-width:60ch;line-height:1.55}
.watch-on{display:flex;flex-wrap:wrap;gap:10px}
.watch-on a{font:400 15px/1 var(--sans);letter-spacing:.03em;text-decoration:none;border:1px solid var(--land-hi);padding:11px 15px}
.watch-on a:hover{border-color:var(--dim)}
.index{padding:0 var(--gut) clamp(48px,7vw,96px)}
.index-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 28px;padding-bottom:14px;border-bottom:1px solid var(--land-hi)}
.index-head h1{font:500 clamp(25px,2.4vw,32px)/1.15 var(--serif);margin:0}
.sort{display:flex;gap:6px}
.sort button{background:none;border:0;color:var(--dim);font:400 15px/1 var(--sans);letter-spacing:.03em;padding:10px 12px;cursor:pointer}
.sort button:hover{color:var(--ink)}
.sort button[aria-pressed=true]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}
.films{list-style:none;margin:0;padding:0}
.film{border-bottom:1px solid var(--land)}
.row{display:grid;grid-template-columns:clamp(150px,17vw,270px) clamp(190px,22vw,340px) minmax(0,1fr);gap:clamp(18px,2.6vw,38px);align-items:center;width:100%;padding:clamp(16px,1.9vw,26px) 0;background:none;border:0;color:inherit;font:inherit;text-align:left;text-decoration:none}
button.row{cursor:pointer}
.yr{font:500 clamp(68px,8vw,128px)/.86 var(--serif);letter-spacing:-.02em;color:var(--dim);transition:color .2s}
.film.soon .yr{color:var(--land-hi)}
button.row:hover .yr,.film.on .yr{color:var(--ink)}
.film.on .yr{color:var(--red)}
.pic{aspect-ratio:16/9;object-fit:cover;width:100%;height:auto;background:var(--land)}
.film.soon .pic{clip-path:inset(0)}
.film.soon .yr,.film.soon .t{filter:blur(9px);user-select:none}
.t,.s,.m{display:block}
.t{font:500 clamp(23px,2vw,31px)/1.12 var(--serif);margin:0 0 6px;text-wrap:balance}
.s{margin:0 0 8px;font:italic 500 19px/1.25 var(--serif);color:var(--dim)}
.m{margin:0;font:400 14.5px/1.4 var(--sans);letter-spacing:.04em;color:var(--dim)}
.film.soon .m{color:var(--ink)}
.plain{padding:20px 0}
.foot{border-top:1px solid var(--land-hi);padding:clamp(28px,4vw,48px) var(--gut);display:grid;grid-template-columns:1fr auto;gap:18px 32px;align-items:end}
.line{grid-column:1/-1;margin:0;font:500 clamp(30px,4.6vw,66px)/1.05 var(--serif);text-wrap:balance}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 24px;font:400 15px/1.3 var(--sans);letter-spacing:.03em}
.foot-links a{color:var(--dim);text-underline-offset:3px}
.foot-links a:hover{color:var(--ink)}
.maker{margin:0;font:400 15px/1.3 var(--sans);letter-spacing:.03em;color:var(--dim)}
.maker a{color:var(--ink);text-underline-offset:3px}
@media (max-width:980px){
 .stage{grid-template-columns:minmax(0,1fr)}
 .row{grid-template-columns:clamp(150px,30vw,250px) minmax(0,1fr);row-gap:12px}
 .yr{grid-column:1/-1;font-size:clamp(58px,14vw,104px)}
 .desc{max-width:none}
}
@media (max-width:560px){
 body{font-size:19px}
 .stage{padding-top:0}
 .screen{margin-inline:calc(var(--gut)*-1)}
 .row{grid-template-columns:minmax(0,1fr)}
 .foot{grid-template-columns:1fr}
 .brand{font-size:20px}
 .brand img{width:34px;height:34px}
 .bar nav{gap:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}