html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0d0f0f;color:#f5f5f2;font-family:Arial,sans-serif}
.portfolio-work-shell{position:relative;width:100%;height:100dvh;overflow:hidden;background:#0d0f0f}
.portfolio-route-head{position:absolute;z-index:20;left:0;right:0;top:0;height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 42px 0 110px;box-sizing:border-box;font-size:11px;letter-spacing:.2em}
.portfolio-route-head span{font-size:9px;color:#a8aaaa}

/* One scroll engine only. Desktop uses the proven vertical snap; touch maps horizontal swipe to it in JS. */
.portfolio-work-scroller{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.portfolio-work-scroller::-webkit-scrollbar{display:none}
.portfolio-work-stage{position:sticky;z-index:5;top:0;width:100vw;height:100dvh;overflow:hidden;pointer-events:none;perspective:1400px;perspective-origin:50% 44%}
.portfolio-work-snaps{position:relative;z-index:1;margin-top:-100dvh}
.portfolio-work-snap{width:100%;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always}

/* Single card geometry. Every visual state below is defined exactly once. */
.portfolio-work-card{position:absolute;left:50%;top:48%;width:min(36vw,520px);height:min(70vh,660px);opacity:0;pointer-events:none;transform:translate3d(-50%,-50%,0);transform-style:preserve-3d;backface-visibility:hidden;transition:transform .62s cubic-bezier(.22,.8,.2,1),opacity .38s ease,filter .38s ease}
.portfolio-work-card.is-active{z-index:10;opacity:1;pointer-events:auto;transform:translate3d(-50%,-50%,0);filter:none}
.portfolio-work-card.is-prev{z-index:8;opacity:.54;pointer-events:auto;transform-origin:70% 30%;transform:translate3d(-132%,-50%,-90px) rotateY(24deg) scale(.76);filter:brightness(.58)}
.portfolio-work-card.is-next{z-index:8;opacity:.54;pointer-events:auto;transform-origin:30% 30%;transform:translate3d(32%,-50%,-90px) rotateY(-24deg) scale(.76);filter:brightness(.58)}
.portfolio-work-card.is-prev-2{z-index:6;opacity:.31;pointer-events:auto;transform-origin:70% 30%;transform:translate3d(-195%,-50%,-205px) rotateY(32deg) scale(.62);filter:brightness(.44)}
.portfolio-work-card.is-next-2{z-index:6;opacity:.31;pointer-events:auto;transform-origin:30% 30%;transform:translate3d(95%,-50%,-205px) rotateY(-32deg) scale(.62);filter:brightness(.44)}
.portfolio-work-card.is-prev-3{z-index:4;opacity:.16;pointer-events:auto;transform-origin:70% 30%;transform:translate3d(-235%,-50%,-310px) rotateY(38deg) scale(.52);filter:brightness(.34)}
.portfolio-work-card.is-next-3{z-index:4;opacity:.16;pointer-events:auto;transform-origin:30% 30%;transform:translate3d(135%,-50%,-310px) rotateY(-38deg) scale(.52);filter:brightness(.34)}
.portfolio-work-card.is-far-prev{transform:translate3d(-270%,-50%,-390px) rotateY(42deg) scale(.46);opacity:0}
.portfolio-work-card.is-far-next{transform:translate3d(170%,-50%,-390px) rotateY(-42deg) scale(.46);opacity:0}

.portfolio-work-media{position:relative;width:100%;height:57%;border-radius:5px;overflow:hidden;background:#111;pointer-events:auto}
.portfolio-work-media-link{display:block;width:100%;height:100%}
.portfolio-work-media img{display:block;width:100%;height:100%;object-fit:cover}

.portfolio-work-copy{position:relative;z-index:6;margin:0;padding:28px 4px 4px;max-width:100%;box-sizing:border-box;pointer-events:auto;transition:transform .64s cubic-bezier(.16,1,.3,1)}
.portfolio-work-copy h2{margin:0 0 13px;font-size:clamp(42px,4vw,66px);font-weight:500;line-height:.94;letter-spacing:-.045em}
.portfolio-work-meta{margin:0 0 16px;color:#a5a7a7;font-size:10px;line-height:1.5;letter-spacing:.15em;text-transform:uppercase}
.portfolio-work-description{max-width:610px;margin:0 0 20px;cursor:pointer;outline:none}
.portfolio-work-description p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;color:#c2c4c4;font-size:15px;line-height:1.6;letter-spacing:.005em}
.portfolio-work-watch{display:inline-flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.13em}
.portfolio-work-watch-icon{display:grid;place-items:center;width:26px;height:26px}
.portfolio-work-watch-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linejoin:round}
.portfolio-work-card:not(.is-active) .portfolio-work-copy{opacity:0;pointer-events:none}
.portfolio-work-card.is-copy-open .portfolio-work-copy{transform:translate3d(0,-220px,0);background:rgba(9,11,11,.97);box-shadow:0 -18px 44px rgba(0,0,0,.24);border-radius:4px 4px 0 0}
.portfolio-work-card.is-copy-open .portfolio-work-description{cursor:pointer}
.portfolio-work-card.is-copy-open .portfolio-work-description p{display:block;overflow:visible;-webkit-line-clamp:unset}
.portfolio-work-card:not(.is-active).is-copy-open .portfolio-work-copy{transform:none}

@media(max-width:1024px){
 .portfolio-work-scroller{overflow-y:hidden;overscroll-behavior:none;touch-action:none}
 .portfolio-work-stage{perspective:1100px}
 .portfolio-work-card{top:50%;width:68vw;height:72dvh}
 .portfolio-work-card.is-prev{transform:translate3d(-108%,-50%,-65px) rotateY(20deg) scale(.82)}
 .portfolio-work-card.is-next{transform:translate3d(8%,-50%,-65px) rotateY(-20deg) scale(.82)}
 .portfolio-work-card.is-prev-2{transform:translate3d(-140%,-50%,-150px) rotateY(28deg) scale(.71)}
 .portfolio-work-card.is-next-2{transform:translate3d(40%,-50%,-150px) rotateY(-28deg) scale(.71)}
 .portfolio-work-card.is-prev-3{transform:translate3d(-166%,-50%,-235px) rotateY(34deg) scale(.63)}
 .portfolio-work-card.is-next-3{transform:translate3d(66%,-50%,-235px) rotateY(-34deg) scale(.63)}
 .portfolio-work-card.is-far-prev{transform:translate3d(-188%,-50%,-320px) rotateY(40deg) scale(.56)}
 .portfolio-work-card.is-far-next{transform:translate3d(88%,-50%,-320px) rotateY(-40deg) scale(.56)}
}
@media(max-width:800px){
 .portfolio-route-head{height:64px;padding:0 18px 0 72px}
 .portfolio-work-card{top:51%;width:80vw;height:74dvh}
 .portfolio-work-media{height:54%}
 .portfolio-work-copy{padding-top:22px}
 .portfolio-work-copy h2{font-size:42px}
 .portfolio-work-description p{font-size:14px}
 .portfolio-work-card.is-copy-open .portfolio-work-copy{transform:translate3d(0,-180px,0);border-radius:4px 4px 0 0}
}
@media(prefers-reduced-motion:reduce){.portfolio-work-card,.portfolio-work-copy{transition:none}}