.work{--gap: var(--card-gap);position:relative;display:flex;flex-direction:column;padding:calc(var(--header-h) + 2rem) 0 2rem;font-family:var(--grotesk);background:var(--site-bg);color:var(--paper)}.work::before,.work::after{content:"";flex:1 1 0}.work::before{flex-grow:2}@media(max-width:47.99em){.work::before{flex-grow:4}}body{background:var(--site-bg)}@media(max-width:47.99em){html:not(.js) .work{padding-top:2rem}}.work__head{padding:0 var(--gutter)}.work__viewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}.work__viewport::-webkit-scrollbar{display:none}.work__track{display:flex;gap:var(--gap);width:max-content;padding:0.5rem var(--gutter) 0}.work__item{flex:none;width:var(--card-w);scroll-snap-align:start;scroll-snap-stop:always}.work__card{position:relative;display:block;text-decoration:none;transition:transform 0.6s var(--ease);-webkit-user-drag:none}.work__meta{display:block;margin-bottom:0.625rem;font-size:0.75rem;line-height:1.25}.work__name{display:block;overflow:hidden}.work__name-in{display:block;font-weight:400;letter-spacing:0.01em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.work__media{position:relative;display:block;overflow:hidden;aspect-ratio:4 / 5;background:rgb(245 244 242 / 0.08)}.work__img,.work__img picture{position:absolute;inset:0;display:block}.work__img img{width:100%;height:100%;object-fit:cover}@media(hover:hover){.work:not(.is-dragging) .work__card:hover{transform:translateY(-0.5rem)}}.work__card:focus-visible{outline-offset:4px}.anim .work__media{clip-path:inset(100% 0% 0% 0%)}.anim .work__name-in{transform:translateY(110%)}.work.is-loop .work__viewport{overflow:hidden;scroll-snap-type:none;cursor:grab;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.work.is-loop.is-dragging .work__viewport{cursor:grabbing}.work.is-loop .work__track{display:grid;width:auto;padding-inline:0}.work.is-loop .work__item{grid-area:1 / 1;will-change:transform}@media(min-width:62em)and (min-aspect-ratio:1/1){.work{height:100vh;height:100svh;min-height:0}}
