/* A living filmstrip: stable card positions, continuous playback, hover emphasis. */
.projects .slider{display:flex;align-items:center;gap:14px;height:560px;padding:36px 4%;overflow:hidden;touch-action:pan-y;isolation:isolate;scroll-snap-type:none}
.projects .film{position:relative;inset:auto;top:auto;left:auto;flex:1 1 0;min-width:0;width:auto;margin:0;transform:none;filter:none;opacity:1;z-index:1!important;transition:flex-grow .65s cubic-bezier(.22,.61,.36,1);will-change:auto;cursor:pointer}
.projects .film.active-card{flex-grow:1.85;transform:none;filter:none}
.projects .film .poster{height:340px;position:relative;border-radius:10px;overflow:hidden;border:1px solid #ffffff26;box-shadow:0 16px 40px #0006;transition:height .65s cubic-bezier(.22,.61,.36,1),border-color .4s}
.projects .film.active-card .poster{height:440px;border-color:#ffffff75}
.projects .film .poster>video{object-fit:cover}
.projects .film .poster>video.landscape-clip{object-fit:cover;object-position:45% center}
.projects .film h3{font-size:16px;line-height:1.4;margin:18px 0 0;opacity:1;min-height:45px;transition:color .3s}
.projects .film.active-card h3{color:#fff}
.projects .film>p{display:none}
.projects .film .poster>small{opacity:0;transition:opacity .3s}
.projects .film.active-card .poster>small{opacity:1}
.projects .film .poster:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:800px){.projects .slider{height:505px;gap:12px;padding:20px 6%;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#65666b transparent}.projects .film{flex:0 0 62vw;scroll-snap-align:center;max-width:300px}.projects .film.active-card{flex:0 0 72vw;max-width:350px}.projects .film .poster{height:340px}.projects .film.active-card .poster{height:395px}.projects .film h3{font-size:15px}.projects .project-heading p:not(.eyebrow){max-width:280px}}
@media(prefers-reduced-motion:reduce){.projects .film,.projects .film .poster{transition:none}}

/* Let the footage stand on its own, retaining accessible button labels. */
.projects .film h3,.projects .film>p,.projects .film .poster>small,.projects .project-heading>div:last-child>p{display:none}

@media(min-width:801px){.projects .slider{max-width:1050px;margin-inline:auto}.projects .film.active-card{flex-grow:1.4}}

/* Fixed mobile slots prevent resizing from pushing the centered card away. */
@media(max-width:800px){
 .projects .slider{padding-inline:calc((100% - min(72vw,350px))/2);scroll-snap-type:x mandatory;scroll-behavior:smooth}
 .projects .film,.projects .film.active-card{flex:0 0 72vw;max-width:350px;transform:scale(.88);transform-origin:center;transition:transform .4s cubic-bezier(.22,.61,.36,1);scroll-snap-align:center}
 .projects .film.active-card{transform:scale(1)}
 .projects .film .poster,.projects .film.active-card .poster{height:395px;transition:border-color .3s}
}
@media(max-width:800px) and (prefers-reduced-motion:reduce){.projects .film,.projects .film.active-card{transition:none}.projects .slider{scroll-behavior:auto}}