#work .poster-wall{--poster-width:170px;--poster-gap:16px;position:relative;isolation:isolate;margin:0 -5vw;padding:26px 0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.wall-row{position:relative;margin:0 0 18px;touch-action:pan-y}.wall-row:last-child{margin-bottom:0}.wall-row:hover,.wall-row:focus-within{z-index:2}.wall-track{display:flex;width:max-content;animation:wall-travel var(--duration) linear infinite;animation-direction:var(--direction);will-change:transform}.wall-set{display:flex;gap:var(--poster-gap);padding-right:var(--poster-gap)}
.wall-poster{position:relative;flex:0 0 var(--poster-width);width:var(--poster-width);aspect-ratio:2/3;margin:0;background:#131923;outline:none;cursor:default;transition:transform .3s cubic-bezier(.2,.7,.2,1),filter .3s,box-shadow .3s;transform-origin:center;z-index:0}.wall-poster img{width:100%;height:100%;display:block;object-fit:contain}.wall-poster figcaption{position:absolute;inset:auto 0 0;padding:38px 14px 14px;background:linear-gradient(transparent,#080b10ef);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}.wall-poster strong{display:block;color:#fff;font-size:13px;line-height:1.35}.wall-poster figcaption span{display:block;margin-top:5px;color:#a7dce7;font-size:10px;letter-spacing:.05em}
@media(hover:hover){.wall-row:hover .wall-poster{filter:brightness(.63) saturate(.65)}.wall-row .wall-poster:hover{transform:scale(1.16);filter:none;z-index:4;box-shadow:0 18px 45px #0009}.wall-poster:hover figcaption{opacity:1;transform:none}}
.wall-poster:focus-visible{transform:scale(1.12);z-index:4;box-shadow:0 0 0 2px #67d8ec,0 15px 35px #0008}.wall-poster:focus-visible figcaption{opacity:1;transform:none}
@keyframes wall-travel{from{transform:translateX(0)}to{transform:translateX(-33.333333%)}}
dialog[open]:not(.motion-closing){animation:dialog-enter .3s cubic-bezier(.16,1,.3,1) both!important}dialog[open]::backdrop{animation:backdrop-enter .3s ease both}dialog.motion-closing{animation:dialog-exit .18s ease both!important}dialog.motion-closing::backdrop{animation:backdrop-exit .18s ease both!important}.site-header.menu-open #primaryNavigation{animation:menu-enter .25s ease both}
@keyframes dialog-enter{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dialog-exit{to{opacity:0;transform:translateY(8px) scale(.98)}}@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}@keyframes backdrop-exit{to{opacity:0}}@keyframes menu-enter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:760px){#work .poster-wall{--poster-width:125px;--poster-gap:10px;margin:0 -5vw;padding:22px 0}.wall-row{margin-bottom:12px}.wall-toolbar{font-size:10px}.wall-toolbar p{max-width:22ch}.wall-toolbar button{white-space:nowrap}.wall-poster strong{font-size:11px}.wall-poster figcaption{padding:28px 9px 10px}}
@media(prefers-reduced-motion:reduce){.wall-row{overflow-x:auto;scrollbar-width:none;touch-action:pan-x pan-y}.wall-track{animation:none;will-change:auto}.wall-set[aria-hidden]{display:none}.wall-poster figcaption{opacity:1;transform:none}.wall-poster:focus-visible{transform:none}}
@media(prefers-reduced-motion:reduce){dialog[open],dialog[open]::backdrop,.site-header.menu-open #primaryNavigation{animation:none!important}.wall-poster,.wall-poster figcaption{transition:none!important}}
.wall-set{flex-shrink:0;min-width:100vw;justify-content:space-around}@media(prefers-reduced-motion:reduce){.wall-set{min-width:0;justify-content:flex-start}}

/* A quiet visual interval between the showreel and moving film artwork. */
#work.work-section{padding-top:clamp(88px,8vw,144px);padding-bottom:44px;background:var(--cinema,#080b10)}
#work .poster-wall{padding-top:24px}
@media(max-width:760px){#work.work-section{padding-top:56px;padding-bottom:30px}}