/* Real work, seen through the TUNNEL arch: the shop's shutter rises on each cut. */
.work-reel{--arch:50% 50% 0 0 / 34.6% 34.6% 0 0;--ratio:9/13;--rise:cubic-bezier(.16,1,.3,1);padding-block:var(--space,96px) 0}
.work-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin:0 0 clamp(28px,4vw,48px)}
.work-head h2{font:700 clamp(56px,7vw,96px)/.88 TunnelDisplay,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:0;margin:0}
.work-head p{max-width:34ch;margin:0 0 6px;color:#b7b7b4;font-size:15px;line-height:1.7}
.work-controls{display:flex;align-items:center;gap:14px;margin-top:18px;font:500 13px/1.3 Manrope,Arial,sans-serif;color:#b7b7b4}
.work-toggle{min-height:44px;padding:0 18px;border:1px solid #4a4a47;background:transparent;color:#f5f5f2;font:inherit;cursor:pointer;transition:border-color .2s,background-color .2s}
.work-toggle:hover{border-color:#f5f5f2}
.work-count{font-variant-numeric:tabular-nums;min-width:3.5em}
.work-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,44px);list-style:none;margin:0;padding:0}
.work-card{min-width:0}
.work-arch{position:relative;display:block;width:100%;aspect-ratio:var(--ratio,9/16);padding:7px;border:1px solid #4a4a47;border-radius:var(--arch);background:#050505;cursor:pointer;transition:border-color .3s}
.work-media{position:relative;display:block;height:100%;overflow:hidden;border-radius:var(--arch);background:#111}
.work-media img,.work-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.work-media video{filter:brightness(.42);transition:filter .45s ease-out}
.work-media img{filter:brightness(.42);transition:filter .45s ease-out}
.work-card.is-active .work-media video,.work-card.is-active .work-media img{filter:none}
.work-card:not(.is-active) .work-arch:hover video,.work-card:not(.is-active) .work-arch:hover img{filter:brightness(.7)}
.work-card.is-active .work-arch{border-color:#f5f5f2}
.work-media video:not([src]){opacity:0}
.work-progress{display:block;height:1px;margin:14px 7px 0;background:#2a2a28;overflow:hidden}
.work-progress span{display:block;height:100%;background:#f5f5f2;transform:scaleX(0);transform-origin:left}
.work-caption{display:flex;justify-content:space-between;align-items:start;gap:16px;padding:16px 7px 0}
.work-caption h3{font:700 clamp(26px,2.4vw,34px)/.95 TunnelDisplay,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:0;margin:0}
.work-caption p{margin:6px 0 0;color:#b7b7b4;font-size:13px;line-height:1.5}
.work-book{display:inline-flex;align-items:center;gap:10px;min-height:44px;flex:none;color:#f5f5f2;font-size:13px;text-decoration:underline;text-underline-offset:.3em}
.work-book:hover{text-decoration-thickness:2px}
.work-note{margin:28px 0 0;color:#9a9a96;font-size:12px}
/* The shutter rises once, card by card, when the section first arrives. */
.work-reel.is-armed .work-media{clip-path:inset(100% 0 0 0)}
.work-reel.is-open .work-media{clip-path:inset(0);transition:clip-path 1s var(--rise)}
.work-reel.is-open .work-card:nth-child(2) .work-media{transition-delay:.12s}
.work-reel.is-open .work-card:nth-child(3) .work-media{transition-delay:.24s}
@media (max-width:700px){
 .work-reel{--arch:50% 50% 0 0 / 28.2% 28.2% 0 0;--ratio:9/16}
 .work-head{display:block}.work-head p{margin-top:14px}
 .work-track{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:-20px;padding:0 20px 8px;scroll-padding-inline:20px;scrollbar-width:none}
 .work-track::-webkit-scrollbar{display:none}
 .work-card{scroll-snap-align:start}
 .work-caption{display:block}.work-book{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
 .work-reel.is-armed .work-media,.work-reel.is-open .work-media{clip-path:none;transition:none}
 .work-media video,.work-media img{transition:none}
}
