/* A continuous strip of website frames, with native scrolling beneath the motion. */
.film-ready body{overflow:hidden;background:#08090d}
.film-ready .work-section{height:100svh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 110%,#19134b 0,transparent 65%),#08090d}
.film-ready .projects{--frame-width:min(76vw,1040px);display:flex;align-items:center;gap:12px;height:100svh;padding:78px calc((100vw - var(--frame-width))/2) 100px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;background:transparent;overscroll-behavior-x:contain;touch-action:pan-x;cursor:grab;outline-offset:-4px}
.film-ready .projects::-webkit-scrollbar{display:none}
.film-ready .project:nth-child(n){flex:0 0 var(--frame-width);height:min(71svh,calc(var(--frame-width)*.66 + 64px));grid-column:auto;grid-row:auto;scroll-snap-align:center;overflow:hidden;isolation:isolate;background:#131419;border-radius:2px;box-shadow:0 20px 60px #0006;transform-origin:50% 50%;will-change:transform}
.film-ready .project::before,.film-ready .project::after{content:'';position:absolute;left:45px;right:14px;height:13px;z-index:14;pointer-events:none;background:repeating-linear-gradient(90deg,#08090d 0 18px,transparent 18px 31px);border-radius:2px}
.film-ready .project::before{top:10px}.film-ready .project::after{bottom:10px}
.film-number{position:absolute;top:11px;left:15px;font:10px monospace;letter-spacing:.1em;color:#eb9b50;z-index:14;pointer-events:none}
.film-ready .project-link{inset:33px 6px;width:auto;height:auto}
.film-ready .project-caption{padding:55px 25px 22px}
.film-ready .project-caption h3{font-size:clamp(21px,2.7vw,37px);font-weight:400}
.film-ready .project .project-category{position:static;width:auto;height:auto;margin:0 0 7px;clip-path:none;overflow:visible;white-space:normal;font-size:9px;letter-spacing:.12em;color:#ffffffb3}
.film-ready .project .browser-preview img{object-position:top;transform:none!important;user-select:none;-webkit-user-drag:none}
.film-ready .project .preview-controls,.film-ready .project:first-child .preview-controls{top:45px;right:18px}
.film-ready .project .preview-toggle{border-radius:3px}
.film-controls{position:fixed;bottom:20px;right:22px;z-index:25;display:flex;align-items:center;gap:12px;color:#f2eee7}
.film-controls button{display:grid;place-items:center;width:44px;height:44px;background:#ffffff08;border:1px solid #ffffff24;border-radius:50%;font-size:22px;transition:background .2s}
.film-controls button:hover{background:#ffffff20}
.film-controls output{min-width:65px;text-align:center;font:12px monospace;letter-spacing:.06em}
.film-hint{font:12px Georgia,serif;color:#a2a2b0;margin-right:18px}
.film-ready .film-scrubbing{scroll-snap-type:none;scroll-behavior:auto}
.film-ready .film-dragging,.film-ready .film-dragging *{cursor:grabbing!important;user-select:none}
[data-theme=light].film-ready .work-section{background:radial-gradient(ellipse at 50% 110%,#dcd7f7,transparent 65%),#efeee9}
[data-theme=light] .film-controls{color:#27262e}
[data-theme=light] .film-controls button{background:#ffffff80;border-color:#0002}
[data-theme=light] .film-hint{color:#65636c}
@media(max-width:600px){
 .film-ready .projects{--frame-width:86vw;padding-top:72px;padding-bottom:155px;gap:8px}
 .film-ready .project:nth-child(n){height:min(60svh,calc(var(--frame-width)*1.22 + 64px))}
 .film-ready .project-caption{padding:45px 16px 18px}
 .film-ready .project-caption h3{font-size:25px}
 .film-controls{bottom:78px;right:50%;transform:translateX(50%);gap:18px}
 .film-hint{display:none}
 .film-controls button{width:40px;height:40px}
 .film-ready .project .preview-controls,.film-ready .project:first-child .preview-controls{top:42px;right:14px}
}
@media(max-height:500px) and (min-width:601px){.film-ready .projects{padding-top:65px;padding-bottom:70px}.film-ready .project:nth-child(n){height:calc(100svh - 135px)}.film-ready .project-caption{padding:25px 18px 12px}.film-ready .project-caption h3{font-size:20px}.film-ready .project .project-category{display:none}.film-controls{bottom:12px}}
@media(prefers-reduced-motion:reduce){.film-ready .project{transform:none!important}}

.film-ready .film-cell{position:relative;flex:0 0 var(--frame-width);height:min(71svh,calc(var(--frame-width)*.66 + 64px));scroll-snap-align:center;min-width:0}
.film-ready .film-cell>.project{width:100%;height:100%;scroll-snap-align:none}
@media(max-width:600px){.film-ready .film-cell{height:min(60svh,calc(var(--frame-width)*1.22 + 64px))}}
@media(max-height:500px) and (min-width:601px){.film-ready .film-cell{height:calc(100svh - 135px)}}