/* One film, its story, its frames. The image remains the main event. */
body[data-page="film-case"]{--case-pad:clamp(20px,3.5vw,72px);--case-line:#eeede727;background:#080808;color:#eeede7}
body[data-page="film-case"]::before{content:"";position:fixed;inset:0;z-index:0;background:url('assets/grain.svg') repeat;background-size:185px;opacity:.045;pointer-events:none}
body[data-page="film-case"] .site-header{background:linear-gradient(#080808f2,#08080800);border-bottom:0}
body[data-page="film-case"] .site-header.scrolled{background:#080808ed}
body[data-page="film-case"] main,body[data-page="film-case"] .site-footer{position:relative}
.film-case[hidden],.case-empty[hidden],.case-video[hidden],.case-play[hidden],.case-poster[hidden],.film-cover-name--case[hidden],.case-frames[hidden],.case-media-error[hidden],#case-open-source[hidden]{display:none!important}
.case-label,.case-topline,.case-heading>div,.case-screen-foot,.case-play,.case-facts,.case-link,.case-links,.case-frames-controls,.case-media-error{font-size:9px;line-height:1.5;letter-spacing:.14em;font-weight:400;text-transform:uppercase}
.case-topline{display:flex;justify-content:space-between;gap:18px;margin:0 var(--case-pad);padding-top:118px;color:#b7b6af}
.case-topline>a{color:#eeede7;min-height:28px}
.case-topline>span:last-child{margin-left:auto}
.case-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding:25px var(--case-pad) 28px}
.case-heading h1{max-width:78%;margin:0;font-size:clamp(62px,9.3vw,182px);font-weight:400;line-height:.93;letter-spacing:-.065em;text-wrap:balance}
.case-heading>div{max-width:220px;text-align:right;flex-shrink:0;padding-bottom:6px;color:#c0bfb8}
.case-heading>div p{margin:0 0 10px}
.case-heading>div p:empty,.case-heading>div span:empty{display:none}
.case-screen{position:relative;margin:0 var(--case-pad);background:#030303;aspect-ratio:2.05/1;isolation:isolate;overflow:hidden}
.case-screen::after{content:"";position:absolute;z-index:0;left:var(--case-art-left,0px);bottom:var(--case-art-bottom,0px);width:var(--case-art-width,100%);height:var(--case-art-gradient-height,58%);background:linear-gradient(180deg,transparent,#0009);pointer-events:none}
.case-screen>.film-cover-name--case{position:absolute;z-index:1;left:calc(var(--case-art-left,0px) + var(--case-art-pad,clamp(20px,3.2vw,64px)));bottom:calc(var(--case-art-bottom,0px) + var(--case-art-pad,clamp(20px,3.2vw,64px)));max-width:var(--case-art-title-width,min(70%,900px));font-size:var(--case-art-title-size,clamp(28px,5.2vw,88px));line-height:.9;text-wrap:balance}
.case-poster,.case-video{width:100%;height:100%;object-fit:contain;background:#030303}
.case-embed{display:block;width:100%;height:100%;border:0;background:#030303}
.case-screen.is-playing{aspect-ratio:16/9;max-height:85svh}
.case-screen.is-playing .case-poster,.case-screen.is-playing .film-cover-name--case,.case-screen.is-playing::after{display:none}
.case-screen.is-portrait{aspect-ratio:16/9;max-height:85svh}
.case-screen.is-portrait .case-poster{object-fit:contain}
.case-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:16px;border:1px solid #eeede790;border-radius:0;background:#0606066b;backdrop-filter:blur(9px);padding:20px 25px;color:#eeede7;transition:background .25s,border-color .25s}
.case-play:hover{background:#080808bc;border-color:#eeede7}
.case-play-icon{font-size:26px;line-height:1;letter-spacing:0}
.case-screen-corner{position:absolute;z-index:1;width:17px;height:17px;border-color:#eeede7aa;border-style:solid;border-width:0;pointer-events:none}
.case-screen-corner--tl{left:18px;top:18px;border-top-width:1px;border-left-width:1px}
.case-screen-corner--tr{right:18px;top:18px;border-top-width:1px;border-right-width:1px}
.case-screen-corner--bl{left:18px;bottom:18px;border-bottom-width:1px;border-left-width:1px}
.case-screen-corner--br{right:18px;bottom:18px;border-bottom-width:1px;border-right-width:1px}
.case-screen.is-playing .case-screen-corner{display:none}
.case-screen-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;padding:16px var(--case-pad) 0;color:#a4a39e}
.case-screen-foot>a{color:#eeede7;display:flex;gap:28px}
.case-media-error{margin:18px var(--case-pad);color:#bab9b2}
.case-media-error a{display:inline-block;margin-left:18px;border-bottom:1px solid #eeede760;color:#eeede7}
.case-story{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(45px,10vw,180px);padding:clamp(80px,10vw,170px) var(--case-pad) clamp(80px,8vw,130px);scroll-margin-top:100px}
.case-story-title>.case-label{color:#aaa9a3}
.case-story h2,.case-frames h2{margin:24px 0 0;font-size:clamp(58px,7vw,125px);line-height:.92;font-weight:400;letter-spacing:-.06em}
.case-story h2 em,.case-frames h2 em{color:transparent;-webkit-text-stroke:1px #d9d8d0;paint-order:stroke fill}
.case-synopsis{margin:0 0 clamp(40px,4.5vw,75px);font-size:clamp(21px,2.05vw,36px);line-height:1.42;letter-spacing:-.035em;text-wrap:pretty;max-width:780px}
.case-facts{display:grid;grid-template-columns:100px 1fr;gap:20px;padding-top:24px;border-top:1px solid var(--case-line)}
.case-facts>p{margin:0;color:#8f8f89}
.case-facts dl{margin:0;display:grid;grid-template-columns:minmax(100px,.9fr) minmax(100px,1fr);gap:12px 22px;letter-spacing:.06em;line-height:1.55}
.case-facts dt{color:#96968e}
.case-facts dd{margin:0}
.case-links{display:flex;flex-wrap:wrap;gap:22px 30px;margin-top:35px}
.case-links a,.case-link{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid #eeede760;min-height:40px}
.case-links a:hover,.case-link:hover{border-color:#eeede7}
.case-frames{padding:0 0 clamp(80px,10vw,160px)}
.case-frames-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:0 var(--case-pad) 35px}
.case-frames-head .case-label{color:#aaa9a3;margin:0}
.case-frames h2{font-size:clamp(48px,5.2vw,92px);margin-top:20px}
.case-frames-controls{display:flex;flex-direction:column;align-items:flex-end;gap:22px;flex-shrink:0}
.case-frames-controls>div{display:flex;gap:12px;align-items:center}
.case-frames-controls button{background:none;border:0;font-size:8px;letter-spacing:.13em;min-height:44px;padding:8px;color:#b8b7b0}
.case-frames-controls>div button{font-size:24px;min-width:44px}
.case-frames-controls>div span{margin-right:14px;font-size:8px;color:#aaa9a3;font-variant-numeric:tabular-nums}
.case-frames-controls button:hover{color:#eeede7}
.case-frame-track{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--case-pad);padding:0 var(--case-pad) 15px;scrollbar-width:thin;scrollbar-color:#45453e #10100f;overscroll-behavior-x:contain}
.case-frame-track figure{flex:0 0 70%;min-width:0;margin:0;scroll-snap-align:start;position:relative;background:#030303}
.case-frame-track img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#030303}
.case-frame-track figcaption{font-size:8px;letter-spacing:.14em;padding:13px 0 0;background:#080808;color:#93938b}
.case-frame-track.is-portrait figure{flex-basis:31%}
.case-frame-track.is-portrait img{aspect-ratio:9/16}
.case-next-project{display:block;position:relative;isolation:isolate;padding:clamp(45px,6vw,105px) var(--case-pad);overflow:hidden;border-top:1px solid var(--case-line);background:#080808}
.case-next-project>img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.12;filter:grayscale(1);transition:opacity .6s,transform 1.2s}
.case-next-project>div{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:27px}
.case-next-project h2{max-width:85%;margin:0;font-size:clamp(48px,7vw,125px);font-weight:400;line-height:.96;letter-spacing:-.06em;text-wrap:balance}
.case-next-project>div>span{font-size:clamp(36px,5vw,90px);font-weight:300}
.case-next-project:hover>img{opacity:.27;transform:scale(1.025)}
.case-empty{min-height:78svh;padding:170px var(--case-pad) 90px}
.case-empty h1{margin:30px 0;font-size:clamp(70px,12vw,180px);font-weight:400;letter-spacing:-.065em;line-height:.9}
.case-empty>p:not(.case-label){color:#aaa9a3;font-size:18px}
.case-empty .case-link{margin-top:25px}
.case-noscript{padding:20px var(--case-pad);font-size:14px}
.case-noscript a{text-decoration:underline}
@media(prefers-reduced-motion:no-preference){
 .film-case{animation:case-arrive .7s ease-out both}
 .case-screen{animation:case-screen-arrive 1s cubic-bezier(.2,.65,.2,1) both}
 .case-screen-corner{animation:case-corner-arrive .7s ease .5s both}
 @keyframes case-arrive{from{opacity:0}to{opacity:1}}
 @keyframes case-screen-arrive{from{clip-path:inset(3% 2%);transform:translateY(12px)}to{clip-path:inset(0);transform:translateY(0)}}
 @keyframes case-corner-arrive{from{opacity:0}to{opacity:1}}
}
@media(max-width:1000px){.case-heading{gap:25px}.case-heading h1{max-width:75%;font-size:clamp(55px,8.8vw,100px)}.case-story{gap:6vw;grid-template-columns:.8fr 1.2fr}.case-facts{grid-template-columns:1fr;gap:20px}.case-facts dl{font-size:8px}}
@media(max-width:700px){
 .case-topline{padding-top:105px;font-size:7px;gap:12px}.case-topline>span:nth-child(2){display:none}
 .case-heading{display:block;padding-top:20px;padding-bottom:22px}.case-heading h1{max-width:none;font-size:clamp(44px,10.5vw,76px);line-height:.99;letter-spacing:-.055em}.case-heading>div{display:flex;justify-content:space-between;gap:18px;text-align:left;max-width:none;margin-top:23px;padding:0;font-size:8px}.case-heading>div p{margin:0}
 .case-screen{margin:0;aspect-ratio:16/10}.case-screen>.film-cover-name--case{max-width:var(--case-art-title-width,78%);font-size:var(--case-art-title-size,clamp(25px,7vw,48px))}.case-screen.is-portrait>.film-cover-name--case{max-width:var(--case-art-title-width,85%)}.case-screen.is-playing{aspect-ratio:16/9}.case-screen.is-portrait{aspect-ratio:9/13;max-height:80svh}.case-play{padding:15px 18px;font-size:8px;gap:12px}.case-play-icon{font-size:23px}.case-screen-corner{width:12px;height:12px}
 .case-screen-foot{font-size:7px;gap:15px;align-items:flex-start}.case-screen-foot>a{gap:14px;flex-shrink:0}.case-screen-foot>span{max-width:65%}
 .case-story{grid-template-columns:1fr;gap:35px;padding-top:75px;padding-bottom:70px}.case-story h2{font-size:64px;margin-top:19px}.case-synopsis{font-size:22px;margin-bottom:35px;line-height:1.4}.case-facts{grid-template-columns:75px 1fr;gap:15px}.case-facts dl{grid-template-columns:1fr;gap:5px;font-size:9px}.case-facts dd{margin-bottom:12px}.case-links{gap:15px;font-size:8px;margin-top:20px}
 .case-frames-head{align-items:flex-start;gap:20px;flex-direction:column;padding-bottom:23px}.case-frames h2{font-size:clamp(43px,9.5vw,65px)}.case-frames-controls{flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:12px}.case-frames-controls button{padding:8px 0}.case-frames-controls>div{gap:6px}.case-frames-controls>div span{margin-right:5px}.case-frame-track{gap:10px}.case-frame-track figure{flex-basis:90%}.case-frame-track.is-portrait figure{flex-basis:66%}.case-frame-track figcaption{font-size:7px}
 .case-next-project{padding-top:45px;padding-bottom:55px}.case-next-project>div{gap:15px}.case-next-project h2{font-size:clamp(36px,8.5vw,60px)}.case-next-project>div>span{font-size:35px}.case-label{font-size:8px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.case-next-project>img,.case-play{transition:none}.case-next-project:hover>img{transform:none}}