/* The artwork leads; the narrative, captions and project status stay readable. */
.portfolio-cover{aspect-ratio:1.6;isolation:isolate;transition:transform .22s ease-out,border-radius .4s;background:var(--project-surface,#e4e6ef)}
.portfolio-cover:before{content:'';position:absolute;inset:-15%;background:var(--project-image) center/cover;filter:blur(22px);opacity:.3;z-index:-1}
.portfolio-card .portfolio-cover>img,.portfolio-card[data-project-group=tools] .portfolio-cover>img,.portfolio-card[href$="sips-and-treats.html"] .portfolio-cover>img,.portfolio-card[href$="recare-website.html"] .portfolio-cover>img{padding:0;object-fit:cover;object-position:50% 35%;transform:translate3d(var(--card-x,0px),var(--card-y,0px),0) scale(1.045);transition:transform .28s ease-out,opacity .55s}
.portfolio-card:hover .portfolio-cover>img,.portfolio-card[data-project-group=tools]:hover .portfolio-cover>img{transform:translate3d(var(--card-x,0px),var(--card-y,0px),0) scale(1.09)}
.portfolio-cover>.portfolio-peek{position:absolute;inset:0;opacity:0;z-index:1;pointer-events:none}.portfolio-card.preview-ready:hover .portfolio-peek{opacity:1;transition-delay:.18s}
.portfolio-card.preview-ready .portfolio-cover:after{content:'01 — 02';position:absolute;right:18px;bottom:18px;background:#121416cf;color:white;padding:8px 11px;font-size:9px;letter-spacing:.09em;border-radius:30px;opacity:0;transition:opacity .3s;z-index:2}.portfolio-card.preview-ready:hover .portfolio-cover:after{opacity:1}
.portfolio-card.is-flight .portfolio-peek{opacity:0!important;transition:none!important}.portfolio-card.is-flight .portfolio-cover{transform:none!important}
.portfolio-info h3{font-weight:450}.portfolio-info p{max-width:40ch}.portfolio-index-title{padding-bottom:12px}.portfolio-index-title p{max-width:740px;font-size:18px}.portfolio-index-title+.portfolio-section{padding-top:18px}.portfolio-section>.section-kicker{margin-bottom:24px}
.case-view-cursor{width:80px;height:80px;font-size:9px;box-shadow:0 4px 20px #0001;transition:opacity .16s,scale .2s}
.case-media .case-image-wrap{transition:clip-path 1.05s cubic-bezier(.2,.7,.2,1);will-change:auto}.js-case-motion .case-media.case-reveal{transform:none;opacity:1}.js-case-motion .case-media.case-reveal .case-image-wrap{clip-path:inset(7% 3% round 20px)}.js-case-motion .case-media.case-reveal.in-view .case-image-wrap{clip-path:inset(0 0 round 20px)}
.case-gallery{gap:40px}.case-media.wide .case-image-wrap{margin-left:calc((1 - var(--media-open,1))*3%);margin-right:calc((1 - var(--media-open,1))*3%)}
.case-media figcaption{display:flex;align-items:baseline;gap:16px;max-width:980px}.case-media figcaption:before{content:'↳';font-size:17px;color:#c73326;flex:none}
.case-next-visual{transform:translateY(var(--next-y,0px)) scale(var(--next-scale,1.12));transition:transform .3s ease-out}.case-next:hover .case-next-visual{transform:translateY(var(--next-y,0px)) scale(1.06)}
.case-lightbox-controls{left:20px;align-items:center;gap:8px}.case-image-count{margin-right:auto;font-size:12px;font-variant-numeric:tabular-nums;color:#ccd0df}.case-lightbox-controls button[data-prev],.case-lightbox-controls button[data-next]{font-size:17px;padding:8px 15px}.case-lightbox-controls button:hover{background:#0016ec;color:white}
.case-hero{view-transition-name:project-visual}.is-flight .portfolio-cover,.case-next.is-flight .case-next-visual{view-transition-name:project-visual}.leaving-project .case-hero{view-transition-name:none}
@view-transition{navigation:auto}
::view-transition-group(project-visual){animation-duration:.72s;animation-timing-function:cubic-bezier(.2,.7,.2,1);overflow:clip;border-radius:20px}
::view-transition-old(project-visual),::view-transition-new(project-visual){height:100%;object-fit:cover;mix-blend-mode:normal}
::view-transition-old(root){animation:studio-fade-out .22s both}::view-transition-new(root){animation:studio-fade-in .5s .12s both}
@keyframes studio-fade-out{to{opacity:0}}@keyframes studio-fade-in{from{opacity:0}to{opacity:1}}
@media(min-width:1001px) and (min-height:650px){.js-case-motion .case-stage{height:165svh}.js-case-motion .case-stage .case-hero{top:calc(145px - var(--hero-progress,0)*45px);height:calc(100% - 210px + var(--hero-progress,0)*80px)}}
@media(max-width:600px){.portfolio-cover{aspect-ratio:1.35}.portfolio-index-title p{font-size:16px}.portfolio-index-title+.portfolio-section{padding-top:6px}.case-gallery{gap:26px}.case-media figcaption{gap:9px}.case-lightbox{width:96vw;padding:70px 10px 16px}.case-lightbox-controls{left:10px;right:10px;gap:5px}.case-lightbox-controls button{padding:11px 10px;font-size:9px}.case-lightbox-controls button[data-prev],.case-lightbox-controls button[data-next]{padding:8px 10px}.case-image-count{font-size:10px}.case-media.wide .case-image-wrap{margin:0}.portfolio-cover:after{display:none}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}.case-media .case-image-wrap{clip-path:none!important;transition:none!important}.portfolio-peek{display:none}.portfolio-card .portfolio-cover>img{transform:none!important}.case-hero,.is-flight .portfolio-cover,.case-next.is-flight .case-next-visual{view-transition-name:none}}
html:not(.js-case-motion) body:is(.project-index,.project-detail) .portfolio-peek,body.paused .portfolio-peek{display:none}
/* Interface captures always retain their complete contents, even in previews. */
.portfolio-card .portfolio-cover>img[src$=".png"],.portfolio-card .portfolio-cover>img[src$=".svg"]{object-fit:contain;object-position:center;transform:none!important;padding:1.5%}
.case-header{backdrop-filter:blur(12px)}
.project-detail .case-hero:not(.hero-cover){background:var(--case-surface,#e4e6ef)}
.case-hero:not(.hero-cover):before{content:'';position:absolute;inset:-20%;background:var(--case-image) center/cover;filter:blur(35px);opacity:.35;z-index:-1}
.case-hero:not(.hero-cover)>img{padding:2%;filter:drop-shadow(0 14px 22px #0003)}
.case-hero-zoom{position:absolute;left:22px;bottom:22px;z-index:3;background:#121416e8;color:#fff;border:1px solid #ffffff30;border-radius:30px;padding:15px 18px;font-size:10px;letter-spacing:.015em}.case-hero-zoom:hover{background:#0016ec}
.case-hero .case-launch{z-index:3}
@media(max-width:600px){.case-hero-zoom{left:12px;bottom:14px;font-size:8px;padding:13px 12px}}