*{box-sizing:border-box}body{margin:0;background:#080808;color:#fff;font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}button:focus-visible,a:focus-visible{outline:2px solid #aaa;outline-offset:5px}header{position:absolute;top:0;left:0;width:100%;z-index:4;padding:28px 3%;background:linear-gradient(#0006,transparent)}header nav{display:flex;align-items:center;gap:30px}header a{color:#bbb;text-decoration:none;font-size:11px;letter-spacing:1.5px}header a[aria-current]{color:#fff}#language{background:none;border:0;color:white;padding:8px}.hero{height:88svh;min-height:540px;position:relative;isolation:isolate;overflow:hidden}#poster{position:absolute;width:100%;height:100%;object-fit:cover}.shade{position:absolute;inset:0;background:linear-gradient(0deg,#0008,transparent 45%),linear-gradient(#0003,transparent 25%)}#play-film{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:92px;background:none;border:0;padding:8px;transition:transform .2s}#play-film:hover{transform:translate(-50%,-50%) scale(1.1)}#play-film svg{width:100%;height:100%;fill:none;stroke:white;stroke-width:2}.hero-caption{position:absolute;bottom:42px;left:3%;right:3%;display:flex;align-items:baseline;justify-content:space-between;gap:35px;pointer-events:none}h1{font-weight:500;font-size:clamp(40px,5vw,82px);line-height:1.03;letter-spacing:-.045em;max-width:1000px;margin:0}#year{font-size:15px;letter-spacing:1px}#player{position:absolute;inset:0;background:#000;z-index:2}#player iframe{width:100%;height:100%;border:0;display:block}.playing .hero-caption{display:none}.playing .hero{height:auto;aspect-ratio:16/9;min-height:0;margin-top:75px}.playing header{background:#080808}.film-navigation{display:flex;justify-content:center;align-items:center;gap:35px;height:80px;background:#080808}.film-navigation>button{background:none;border:0;color:#fff;font-size:27px;width:44px;height:44px}#page-dots{display:flex;gap:12px;align-items:center}#page-dots button{width:6px;height:6px;border:0;padding:0;border-radius:50%;background:#555}#page-dots button[aria-current=true]{background:#fff;width:18px;border-radius:3px}.film-navigation button:hover{color:#aaa}#information{background:#f6f5f1;color:#111;padding:60px 4% 90px}.credits{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;padding-bottom:60px;border-bottom:1px solid #bbb}.label{font-size:11px;letter-spacing:1.2px;color:#888;text-transform:uppercase}.credits p{font-size:clamp(20px,2vw,32px);line-height:1.25;letter-spacing:-.6px;margin:20px 0 0}.description{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding-top:55px}.description p{max-width:850px;margin:0;font-size:clamp(18px,1.8vw,28px);line-height:1.5;letter-spacing:-.5px}[hidden]{display:none!important}@media(max-width:800px){header{padding:18px 5%}header nav{gap:24px}header a{font-size:13px;letter-spacing:1px}.hero{height:84svh;min-height:480px}.hero-caption{left:5%;right:5%;bottom:32px;display:block}h1{font-size:clamp(32px,8vw,56px)}#year{display:block;margin-top:20px;font-size:12px}#play-film{width:60px;height:72px}.film-navigation{gap:20px;height:75px}#page-dots{gap:9px}.playing .hero{margin-top:70px}#information{padding:35px 5% 55px}.credits{grid-template-columns:1fr 1fr;gap:28px;padding-bottom:30px}.credits>div:first-child{grid-column:1/-1}.credits p{font-size:20px;margin-top:12px}.description{display:block;padding-top:30px}.description p{font-size:16px;line-height:1.5;margin-top:18px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#desktop-films,#desktop-pages{display:none}
@media(min-width:801px){
 body:not(.playing) .hero{height:100svh;min-height:620px}
 body:not(.playing) .hero-caption,body:not(.playing) #play-film,body:not(.playing) .film-navigation{display:none}
 body:not(.playing) #desktop-films{display:flex;position:absolute;left:3%;right:15%;bottom:6%;flex-direction:column;align-items:flex-start;gap:8px;z-index:1}
 #desktop-films button{border:0;background:none;color:white;display:flex;align-items:flex-start;gap:20px;text-align:left;padding:0;font-size:clamp(27px,3.6vw,64px);font-weight:500;line-height:1.07;letter-spacing:-.045em;transition:opacity .2s}
 #desktop-films button:hover{opacity:.65}#desktop-films small{font-size:13px;font-weight:400;letter-spacing:0;white-space:nowrap;margin-top:8px}
 body:not(.playing) #desktop-pages{position:absolute;right:3%;bottom:6%;display:flex;align-items:center;gap:15px;z-index:2}
 #desktop-pages button{border:0;background:none;color:white;font-size:30px;width:44px;height:44px}#page-number{font-size:11px;letter-spacing:2px}
 .shade{background:linear-gradient(0deg,#0006,transparent 65%),linear-gradient(#0004,transparent 25%)}
 .playing .film-navigation{position:absolute;top:calc(75px + 56.25vw - 65px);right:3%;height:55px;background:transparent;z-index:3}.playing #page-dots{display:none}
}
@media(max-width:800px){
 body:not(.playing) .hero{height:calc(100svh - 48px);min-height:480px}
 .film-navigation{height:48px;gap:20px}.film-navigation>button{height:36px;font-size:24px}
 .hero-caption{bottom:26px}.shade{background:linear-gradient(0deg,#0006,transparent 45%),linear-gradient(#0003,transparent 25%)}
}
@media(min-width:801px){#desktop-films button{font-weight:700}}
@media(min-width:801px){#desktop-films button{font-weight:600}}
h1{font-weight:600}
@media(max-width:800px){.hero-caption{display:block}.hero-caption h1{display:inline;font-weight:600}.hero-caption #year{display:inline-block;vertical-align:top;margin:4px 0 0 10px;font-size:11px;line-height:1.3;letter-spacing:0}}
@font-face{font-family:WorkPreview;src:url('work-preview-font.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}#desktop-films button,.hero-caption h1{font-family:WorkPreview,Arial,sans-serif;font-weight:600}
.poster-outgoing{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;will-change:opacity,filter,transform}
#desktop-films button,.hero-caption h1{font-weight:550}
@media(min-width:801px){#desktop-films button{font-size:clamp(29px,3.8vw,68px)}}
@media(max-width:800px){.hero-caption h1{font-size:clamp(34px,8.5vw,60px)}}
@media(min-width:801px){#information{font-family:WorkPreview,Arial,sans-serif}.credits p{font-size:clamp(24px,2.4vw,38px);font-weight:550;line-height:1.2}.description p{font-size:clamp(22px,2.25vw,36px);font-weight:450;line-height:1.4}.label{font-size:12px;font-weight:400}}
.credit-row{display:grid;grid-template-columns:1fr 1.5fr;gap:28px}.credits .credit-name{font-size:clamp(20px,1.7vw,28px);letter-spacing:-.3px}.credit-row #role{font-size:clamp(20px,1.7vw,28px)}@media(max-width:800px){.credit-row{grid-template-columns:1fr 1.5fr;gap:18px}.credits .credit-name,.credit-row #role{font-size:16px;line-height:1.4}}
.credit-row #role{white-space:pre-line;line-height:1.5}
.credits .credit-name,.credits #detail-year,.credits #type{font-size:clamp(24px,2.4vw,38px);font-weight:550;line-height:1.2}.credit-row #role{font-size:clamp(16px,1.35vw,21px);font-weight:400;line-height:1.55;letter-spacing:0}@media(max-width:800px){.credits .credit-name,.credits #detail-year,.credits #type{font-size:20px}.credit-row #role{font-size:14px;font-weight:400}}
#film-modal{width:min(1100px,88vw);max-width:none;padding:0;border:0;background:#000;overflow:visible;color:#fff}#film-modal::backdrop{background:#000b;backdrop-filter:blur(12px)}#modal-video{aspect-ratio:16/9}#modal-video iframe{display:block;width:100%;height:100%;border:0}#close-film{position:absolute;right:0;top:-55px;font-size:42px;line-height:1;color:#fff;border:0;background:none;width:44px;height:44px}body.detail-view header{background:linear-gradient(#0004,transparent)}body.detail-view .hero{height:88svh;min-height:540px;margin-top:0}body.detail-view #desktop-films,body.detail-view #desktop-pages{display:none}body.detail-view #play-film,body.detail-view .hero-caption{display:flex}body.detail-view .film-navigation{display:flex;position:absolute;top:calc(88svh - 65px);right:3%;height:55px;background:transparent;z-index:3}body.detail-view .hero-caption{right:200px}body.detail-view #page-dots{display:none}
@media(min-width:801px){#information{padding-left:max(5%,calc((100vw - 1480px)/2));padding-right:max(5%,calc((100vw - 1480px)/2))}.credits{grid-template-columns:minmax(0,2.1fr) minmax(0,.7fr) minmax(0,1.2fr);gap:clamp(35px,4vw,70px)}.credit-row{grid-template-columns:1fr 1.1fr;gap:25px}.credits .credit-name,.credits #detail-year,.credits #type{font-size:clamp(23px,2vw,32px)}.credit-row #role{font-size:clamp(15px,1.15vw,19px)}.description{grid-template-columns:1fr 2fr}}
@media(max-width:800px){#film-modal{width:94vw}body.detail-view .hero{height:calc(100svh - 48px);min-height:480px}body.detail-view .hero-caption{display:block;right:5%}body.detail-view .film-navigation{position:static;height:48px}body.detail-view #page-dots{display:flex}}
/* Match the overscroll canvas to the film-detail surface. */
html:has(body.detail-view),body.detail-view{background:#f6f5f1}
#information{background:#fafafa}html:has(body.detail-view),body.detail-view{background:#fafafa}
.credit-row #role{font-family:WorkPreview,Arial,sans-serif;font-size:clamp(14px,1vw,17px);font-weight:300;line-height:1.6}@media(max-width:800px){.credit-row #role{font-size:12px;font-weight:300}}
@media(max-width:800px){#information{font-family:WorkPreview,Arial,sans-serif}.credits .credit-name,.credits #detail-year,.credits #type,.description p{font-size:16px;font-weight:400;line-height:1.45;letter-spacing:0}.credits>div{min-width:0}.credits #type{overflow-wrap:anywhere}.credit-row{grid-template-columns:1fr 1.5fr}.credit-row #role{font-size:12px;font-weight:300}}
@media(max-width:800px){.credits .credit-name,.credits #detail-year,.credits #type,.description p{font-weight:450}}
@media(max-width:800px){.credits .credit-name,.credits #detail-year,.credits #type,.description p{font-size:17px}.hero-caption #year{margin-left:0}}
@media(max-width:800px){.credits .credit-name,.credits #detail-year,.credits #type,.description p{font-size:16px;font-weight:500}}