@scope (#home-work) {
@font-face{font-family:Otto;src:url('./fonts/octave.woff2')}@font-face{font-family:Oracle;src:url('./fonts/abc-oracle-light.woff')}*{box-sizing:border-box}html{overflow-x:clip}body{margin:0;background:#f5f4f0;color:#171714;font-family:Oracle,sans-serif}main{padding-top:145px}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;touch-action:manipulation}.case-project{padding-bottom:100px;scroll-margin-top:130px}.case-intro{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:36px;padding:30px 4vw 65px;min-height:470px;align-items:start}.case-title,.case-type,.case-role{font-family:Otto,serif;font-size:clamp(19px,1.2vw,25px);font-weight:400;line-height:1.15;margin:0}.case-title{max-width:370px}.case-story{font-size:16px;line-height:1.45;max-width:470px}.case-role{margin:0 0 65px}.case-copy p{margin:0 0 18px}.case-full{font-size:13px;display:inline-block;margin-top:12px;border-bottom:1px solid #aaa;padding-bottom:4px}.gallery-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 4vw 20px;gap:15px;font-size:13px}.gallery-buttons{display:flex;gap:8px}.gallery-toolbar button{border:1px solid #c9c8c1;border-radius:30px;background:transparent;min-height:42px;min-width:48px;padding:8px 17px;cursor:pointer}.gallery-toolbar button:hover{background:#e6e5de}.case-gallery{overflow:hidden;cursor:grab;touch-action:pan-y;position:relative}.case-gallery.dragging{cursor:grabbing}.gallery-track{display:flex;gap:8px;width:max-content;will-change:transform}.gallery-slide{margin:0;flex:0 0 64vw;width:64vw;background:#e6e5df;height:clamp(300px,65vh,800px);position:relative}.gallery-slide img{height:100%;width:100%;object-fit:contain;user-select:none;pointer-events:none}.gallery-slide figcaption{position:absolute;bottom:14px;left:18px;background:#f5f4f0e8;padding:5px 9px;font-size:11px}.case-project+.case-project .case-intro{border-top:1px solid #d9d8d1;padding-top:65px}.case-intro,.gallery-toolbar,.case-gallery{opacity:1;transform:none}:scope .case-project:not(.is-visible) .case-intro,:scope .case-project:not(.is-visible) .gallery-toolbar,:scope .case-project:not(.is-visible) .case-gallery{opacity:0;transform:translateY(24px)}:scope .case-intro{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}:scope .gallery-toolbar,:scope .case-gallery{transition:opacity 1s .12s ease,transform 1s .12s cubic-bezier(.2,.7,.2,1)}footer{display:flex;justify-content:space-between;padding:0 4vw 70px;font-family:Otto,serif;font-size:22px}button:focus-visible,a:focus-visible,.case-gallery:focus-visible{outline:2px solid #555;outline-offset:5px}@media(max-width:800px){main{padding-top:110px}.case-intro{grid-template-columns:1fr auto;gap:35px;padding:20px 5vw 40px;min-height:0}.case-title,.case-type,.case-role{font-size:20px}.case-title{max-width:260px}.case-story{grid-column:1/-1;max-width:620px}.case-role{margin-bottom:30px;font-size:17px}.case-project{padding-bottom:65px}.gallery-slide{flex-basis:88vw;width:88vw;height:55vh;min-height:300px}.case-project+.case-project .case-intro{padding-top:40px}footer{font-size:18px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}:scope .case-project:not(.is-visible) .case-intro,:scope .case-project:not(.is-visible) .gallery-toolbar,:scope .case-project:not(.is-visible) .case-gallery{opacity:1;transform:none}}
/* Editorial motion: staggered entrances, pressed gallery scale and soft release. */
.gallery-slide{background:transparent}.slide-inner{width:100%;height:100%;position:relative;transition:transform .725s cubic-bezier(.22,.61,.36,1);transform-origin:center}.slide-media{height:100%;width:100%;display:flex;align-items:center;justify-content:center;background:#e6e5df;overflow:hidden}.slide-media img,.slide-media video{display:block;object-fit:contain;width:100%;height:100%;max-width:var(--media-width);user-select:none;pointer-events:none}.case-gallery.dragging .slide-inner{transform:scale(.83)}:scope .case-project:not(.is-visible) .case-gallery{opacity:1;transform:none}.case-title,.case-type,.case-role,.case-copy p,.case-full{transition:opacity .9s ease,translate .9s cubic-bezier(.19,1,.22,1)}:scope .case-project:not(.is-visible) :is(.case-title,.case-type,.case-role,.case-copy p,.case-full){opacity:0;translate:0 22px}.case-role{transition-delay:.06s}.case-copy p:nth-child(1){transition-delay:.12s}.case-copy p:nth-child(2){transition-delay:.18s}.case-copy p:nth-child(3){transition-delay:.24s}.case-full{transition-delay:.3s}@media(prefers-reduced-motion:reduce){.slide-media,.slide-inner{animation:none!important;transform:none!important}:scope .case-project:not(.is-visible) :is(.case-title,.case-type,.case-role,.case-copy p,.case-full){opacity:1;translate:none}}
/* Media-shaped containers share a rhythm without forcing a single aspect ratio. */
.case-gallery{--gallery-height:clamp(280px,62vh,740px)}.gallery-track{position:relative;height:var(--gallery-height);align-items:center}.gallery-slide{flex:0 0 auto;width:min(calc(var(--gallery-height)*var(--media-ratio)),90vw,var(--media-width));height:auto;min-height:0;aspect-ratio:var(--media-ratio);max-height:var(--gallery-height);background:transparent}.slide-inner,.slide-media{width:100%;height:100%;aspect-ratio:inherit}.slide-media{background:transparent}.slide-media img,.slide-media video{max-width:none;width:100%;height:100%;object-fit:contain}.slide-inner{transition:transform .95s cubic-bezier(.16,1,.3,1)}:scope .case-gallery:not(.is-gallery-visible) .gallery-slide .slide-media{opacity:0;transform:translate3d(10vw,0,0) scale(.975)}:scope .case-gallery.is-gallery-visible .gallery-slide .slide-media{animation:media-arrive 1.45s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.08s + var(--enter-order)*.11s)}@keyframes media-arrive{0%{opacity:0;transform:translate3d(10vw,0,0) scale(.975)}25%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}@media(max-width:800px){.case-gallery{--gallery-height:clamp(260px,52vh,560px)}.gallery-slide{width:min(calc(var(--gallery-height)*var(--media-ratio)),88vw,var(--media-width));height:auto;min-height:0}.case-gallery.dragging .slide-inner{transform:scale(.92)}}@media(prefers-reduced-motion:reduce){:scope .case-gallery .gallery-slide .slide-media{opacity:1!important;transform:none!important;animation:none!important}}

/* Give portrait work a taller silhouette while preserving its full composition. */
.case-gallery{--portrait-height:clamp(350px,78vh,930px)}.case-gallery.has-portraits .gallery-track{height:var(--portrait-height)}.gallery-slide.is-portrait{width:min(calc(var(--portrait-height)*var(--media-ratio)),88vw,var(--media-width));max-height:var(--portrait-height)}@media(max-width:800px){.case-gallery{--portrait-height:clamp(340px,68vh,740px)}}

/* Top-aligned media with a slower, staggered reveal that settles into autoplay. */
.gallery-track{align-items:flex-start}.gallery-slide{align-self:flex-start}.gallery-toolbar{min-height:30px}.gallery-buttons,.gallery-slide figcaption{display:none}:scope .case-gallery:not(.is-gallery-visible) .gallery-slide .slide-media{opacity:0;transform:translate3d(7vw,38px,0) scale(.96)}:scope .case-gallery.is-gallery-visible .gallery-slide .slide-media{animation:media-arrive 1.8s cubic-bezier(.22,.75,.18,1) both;animation-delay:calc(.06s + var(--enter-order)*.12s);will-change:transform,opacity}@keyframes media-arrive{0%{opacity:0;transform:translate3d(7vw,38px,0) scale(.96)}40%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}:scope .case-intro{transition:opacity 1.25s ease,transform 1.5s cubic-bezier(.22,.75,.18,1)}.case-title,.case-type,.case-role,.case-copy p,.case-full{transition-duration:1.4s;transition-timing-function:cubic-bezier(.22,.75,.18,1)}:scope .case-project:not(.is-visible) :is(.case-title,.case-type,.case-role,.case-copy p,.case-full){translate:0 32px}.case-type{transition-delay:.08s}.case-role{transition-delay:.14s}.case-copy p:nth-child(1){transition-delay:.22s}.case-copy p:nth-child(2){transition-delay:.3s}.case-copy p:nth-child(3){transition-delay:.38s}.case-full{transition-delay:.44s}@media(prefers-reduced-motion:reduce){:scope .case-gallery .gallery-slide .slide-media{opacity:1!important;transform:none!important;animation:none!important}:scope .case-project:not(.is-visible) :is(.case-title,.case-type,.case-role,.case-copy p,.case-full){opacity:1;translate:none}}
/* Compact image sizes with room for a hover enlargement. */
.case-gallery{--gallery-height:clamp(196px,43.4vh,518px);--portrait-height:clamp(245px,54.6vh,651px)}.gallery-track{height:calc(var(--gallery-height)*1.2)}.case-gallery.has-portraits .gallery-track{height:calc(var(--portrait-height)*1.2)}.gallery-slide{width:min(calc(var(--gallery-height)*var(--media-ratio)),63vw,calc(var(--media-width)*.7));position:relative}.gallery-slide.is-portrait{width:min(calc(var(--portrait-height)*var(--media-ratio)),61.6vw,calc(var(--media-width)*.7))}.slide-inner{transform-origin:top center;transition:transform .7s cubic-bezier(.16,1,.3,1)}@media(hover:hover) and (pointer:fine){.gallery-slide:hover{z-index:2}.case-gallery:not(.dragging) .gallery-slide:hover .slide-inner{transform:scale(1.18)}}@media(max-width:800px){.case-gallery{--gallery-height:clamp(182px,36.4vh,392px);--portrait-height:clamp(238px,47.6vh,518px)}.gallery-slide{width:min(calc(var(--gallery-height)*var(--media-ratio)),61.6vw,calc(var(--media-width)*.7))}.gallery-slide.is-portrait{width:min(calc(var(--portrait-height)*var(--media-ratio)),61.6vw,calc(var(--media-width)*.7))}}@media(prefers-reduced-motion:reduce){.slide-inner{transition:none!important}}

/* Hover expands the actual flex item so its neighbours move with it. */
.gallery-slide{--rest-width:min(calc(var(--gallery-height)*var(--media-ratio)),63vw,calc(var(--media-width)*.7));width:var(--rest-width);max-height:none;transition:width 1s cubic-bezier(.22,.61,.36,1)}.gallery-slide.is-portrait{--rest-width:min(calc(var(--portrait-height)*var(--media-ratio)),61.6vw,calc(var(--media-width)*.7));width:var(--rest-width);max-height:none}.gallery-slide.is-expanded{width:calc(var(--rest-width)*1.18)}@media(hover:hover) and (pointer:fine){.case-gallery:not(.dragging) .gallery-slide:hover .slide-inner{transform:none}.gallery-slide:hover{z-index:auto}}@media(max-width:800px){.gallery-slide{--rest-width:min(calc(var(--gallery-height)*var(--media-ratio)),61.6vw,calc(var(--media-width)*.7))}}@media(prefers-reduced-motion:reduce){.gallery-slide{transition:none!important}}
/* Smaller resting images, with the established expanded dimensions preserved. */
.gallery-slide,.gallery-slide.is-portrait{width:calc(var(--rest-width)*.8)}.gallery-slide.is-expanded,.gallery-slide.is-portrait.is-expanded{width:calc(var(--rest-width)*1.18)}

/* Align project copy to the persistent header grid. */
.jm-bar .jm-bar-inner,.jm-bar.jm-bar-on .jm-bar-inner{width:min(1400px,calc(100% - 80px));max-width:none}.case-intro{width:min(1400px,calc(100% - 80px));padding-left:0;padding-right:0;margin-inline:auto}.gallery-slide{transition:width 1.4s cubic-bezier(.45,0,.2,1)}.gallery-toolbar{display:none}footer{width:min(1400px,calc(100% - 80px));margin-inline:auto;padding-inline:0}@media(max-width:640px){.jm-bar .jm-bar-inner,.jm-bar.jm-bar-on .jm-bar-inner,.case-intro,footer{width:calc(100% - 36px)}.case-intro{padding-left:0;padding-right:0}}@media(prefers-reduced-motion:reduce){.gallery-slide{transition:none!important}}


/* Fast arrival, with restrained travel and media requested before it enters view. */
.case-intro{transition-duration:.45s!important}
.case-title,.case-type,.case-role,.case-copy p,.case-full{transition-duration:.45s!important;transition-delay:0s!important}
.case-gallery.is-gallery-visible .gallery-slide .slide-media{animation-duration:.65s!important;animation-delay:calc(var(--enter-order)*.035s)!important}
/* Responsive intro layout is shared in case-layout.css. */


@media(prefers-reduced-motion:reduce){.case-intro,.case-title,.case-type,.case-role,.case-copy p,.case-full{transition:none!important}.case-gallery.is-gallery-visible .gallery-slide .slide-media{animation:none!important}}
}