/* Horizontal black negative: the perforation follows its long edges. */
:root{--paper:#000;--ink:#f0eee7;--film:#000;--light:#f0eee7;--muted:#939388;--gutter:4.2vw;--edge:65px;--gap:30px;--reel-top:15vh;--image-h:min(47vw,calc(100svh - var(--reel-top) - 294px));--frame-w:calc(var(--image-h)*1.777778)}
html,body{background:#000;color:var(--light)}.filmstrip{background:#000;box-shadow:none}.frame{background:#000}.frame--intro{--frame-w:72vw}.frame--portrait{--frame-w:calc(var(--image-h)*.5625)}
.frame-image,.project-play img,.project-play video{border:0;border-radius:0;box-shadow:none}.project-play,.frame--portrait .project-play{background:#000}.project-play img,.project-play video{object-fit:contain}.frame-caption{display:none}
.film-edge{height:var(--edge);display:block;padding:0;background:#000;color:#96916a;font-size:9px;letter-spacing:1px;line-height:1;isolation:isolate}
.film-edge::before{content:"";position:absolute;inset:8px -15px auto;height:35px;z-index:0;mask:none;background:repeat-x left center/70px 35px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='35' viewBox='0 0 70 35'%3E%3Crect x='20' y='1' width='26' height='33' rx='2' fill='%23141410' stroke='%2338392d' stroke-width='.7'/%3E%3C/svg%3E")}
.film-edge span{position:absolute;bottom:7px;left:22px;background:none;padding:0;margin:0!important;min-width:0}.film-edge span:last-child{left:auto;right:22px}.film-edge--bottom::before{top:23px}.film-edge--bottom span{bottom:auto;top:8px}
.opening{background:#000}.opening h1{font-size:clamp(60px,10.7vw,170px);line-height:.78}.opening-top{color:#8d8e84}
.under-reel{top:calc(var(--reel-top) + var(--image-h) + 2*var(--edge) + 23px)}.transport>span{color:#97988d}.frame-index span{background:#4b4c41}.frame-index button[aria-current=true] span{background:#ecebdf}.demo-note{color:#77786f}
@media(min-width:1600px){:root{--edge:70px;--gap:32px;--reel-top:15vh;--image-h:min(47vw,calc(100svh - var(--reel-top) - 304px))}.opening h1{font-size:10.8vw}}
@media(max-height:760px) and (min-width:701px){:root{--edge:50px;--gap:24px;--reel-top:14vh;--image-h:min(44vw,calc(100svh - var(--reel-top) - 231px))}.film-edge::before{top:6px;height:27px;background-size:58px 27px}.film-edge--bottom::before{top:18px}.film-edge span{bottom:5px;font-size:7px}.film-edge--bottom span{top:5px;bottom:auto}.opening h1{font-size:min(9.3vw,20vh)}.opening{padding:20px 27px}.under-reel{top:calc(var(--reel-top) + var(--image-h) + 2*var(--edge) + 12px)}}
@media(max-width:700px){:root{--gutter:6vw;--edge:43px;--gap:20px;--reel-top:22svh;--image-h:31svh;--frame-w:calc(var(--image-h)*1.777778)}.frame--intro{--frame-w:84vw}.frame--portrait{--frame-w:calc(var(--image-h)*.5625)}.film-edge{font-size:6px;letter-spacing:.5px}.film-edge::before{inset:6px -10px auto;height:24px;background-size:43px 24px}.film-edge--bottom::before{top:17px}.film-edge span{bottom:4px;left:14px}.film-edge span:last-child{right:14px}.film-edge--bottom span{top:5px;bottom:auto}.opening{padding:18px 21px}.opening h1{font-size:13.7vw;padding:5px 0}.opening-top{font-size:8px}.opening-bottom{font-size:16px}.under-reel{top:calc(var(--reel-top) + var(--image-h) + 2*var(--edge) + 16px)}}
@media(max-width:700px) and (max-height:700px){:root{--reel-top:19svh;--image-h:31svh;--edge:36px;--gap:18px}.film-edge::before{top:4px;height:21px;background-size:39px 21px}.film-edge--bottom::before{top:13px}.film-edge span{font-size:5px;bottom:3px}.film-edge--bottom span{top:4px;bottom:auto}.opening{padding:12px 17px}.opening h1{font-size:12.8vw}.opening-bottom{font-size:14px}.opening-top{font-size:7px}}