/* Selected work: a full-viewport diagonal coil, with image-only bowed surfaces. */
.showcase{background:#f5f5f3;scroll-margin-top:-105px}
.gallery-alias{position:absolute;inset:0 auto auto 0;width:1px;height:1px;scroll-margin-top:-105px}
.showcase .gallery-stage{isolation:isolate;background:#ededeb}
.portfolio-mist{position:fixed;inset:-4%;width:108%;height:108%;z-index:0;pointer-events:none;filter:blur(6px);contain:strict}
.portfolio-mist-ready main{position:relative;z-index:1}
.portfolio-mist-ready :is(.showcase,.showcase .gallery-stage,.case-studies,.archive){background:transparent}
.showcase .gallery-stage:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(#2223 .55px,transparent .75px);background-size:7px 7px;opacity:calc(.28*(1 - var(--gallery-expand,0)))}
.gallery-stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;padding-block:20px 70px;position:relative}
.gallery-stills a{display:block}.gallery-stills img{width:100%;height:auto;border-radius:14px;background:white;aspect-ratio:1.51;object-fit:contain}.gallery-stills span{display:block;margin-top:15px;font-size:18px}
:is(.gallery-enhanced,.gallery-pending) .showcase{height:calc(var(--gallery-runway,6.8)*var(--gallery-stage-height,100svh))}
:is(.gallery-enhanced,.gallery-pending) .showcase .gallery-stage{height:100svh;min-height:660px;position:sticky;top:0;overflow:hidden}
:is(.gallery-enhanced,.gallery-pending) .showcase .gallery-stills{display:none}
.showcase .gallery-top{padding-top:125px;position:relative;z-index:5;gap:10px;flex-wrap:wrap}
.showcase .gallery-top>.eyebrow{font-size:13px}
.showcase .gallery-top>.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap;font-size:14px;line-height:1.3;border:1px solid #bbbbbb80;background:#f5f5f3e6;border-radius:100px;padding:10px 16px;backdrop-filter:blur(10px)}
:is(.gallery-enhanced,.gallery-pending) .showcase .gallery-heading{position:absolute;left:0;top:50%;width:100%;padding:0 var(--gutter);font-size:clamp(28px,3.52vw,72px);line-height:1.04;letter-spacing:-.06em;z-index:0;max-width:none;text-align:center;transform:translateY(-50%);opacity:var(--work-heading-alpha,1)}
.showcase .gallery-heading{font-size:clamp(28px,3.52vw,72px);line-height:1.04;text-align:center}
.showcase .gallery-heading>span{display:block;color:#111}
.showcase .work-title-line{overflow:hidden;padding:.08em .05em;margin:-.08em -.05em;white-space:nowrap}
.showcase .work-title-rise{display:block}
.showcase .gallery-heading>.work-title-accent{color:var(--accent)}
:is(.gallery-enhanced,.gallery-pending) .work-title-rise{transform:translateY(calc((1 - var(--work-rise,0))*125%))}
.work-title-char{display:inline-block;white-space:pre}
:is(.gallery-enhanced,.gallery-pending) .work-title-char{opacity:var(--letter-reveal,0);transform:translateY(calc((1 - var(--letter-reveal,0))*.45em));filter:blur(calc((1 - var(--letter-reveal,0))*.055em))}
:is(.gallery-enhanced,.gallery-pending) .showcase :is(.gallery-canvas,.coil-mesh-canvas){opacity:1;transform:none}
:is(.gallery-enhanced,.gallery-pending) .showcase :is(.gallery-readout,.gallery-controls){opacity:var(--work-front,0);visibility:hidden}
/* The case-study shortcut is available before rendering starts and throughout the gallery. */
:is(.gallery-enhanced,.gallery-pending) .showcase .gallery-top{opacity:1;visibility:visible}
.gallery-enhanced .showcase[data-front-visible] :is(.gallery-readout,.gallery-controls){visibility:visible}
.showcase .gallery-canvas,.coil-mesh-canvas{z-index:1}
.coil-mesh-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
:is(.gallery-enhanced,.gallery-pending) .showcase .gallery-readout{display:block;position:absolute;left:auto;right:var(--gutter);top:auto;bottom:95px;width:clamp(220px,23vw,340px);padding:0;z-index:4}
.showcase .project-heading .eyebrow{font-size:12px;color:#555}
.showcase .project-heading h3{font-size:clamp(28px,2.5vw,36px);margin-top:9px;line-height:1.05}
.showcase .project-summary>p{display:none}
.showcase .gallery-actions{gap:10px 20px;margin-top:14px;align-items:start}
.showcase .gallery-actions .text-link{font-size:12px;line-height:1.5;padding-block:4px}
:is(.gallery-enhanced,.gallery-pending) .showcase .gallery-controls{height:76px;z-index:5;background:linear-gradient(0deg,#f5f5f3cc,transparent);border-color:#1112}
.showcase .gallery-hint,.showcase .project-count{font-size:12px}.showcase .gallery-hint{min-width:140px}
.showcase .project-picker{gap:10px}.showcase .project-dots{gap:7px}.showcase .arrow-button{width:38px;height:38px}
@media(min-width:1800px){:is(.gallery-enhanced,.gallery-pending) .showcase .gallery-stage{min-height:850px}}
@media(max-width:1050px){
 .showcase .project-heading h3{font-size:29px}.showcase .gallery-actions{gap:8px 16px}
}
@media(max-width:760px){
 :is(.gallery-enhanced,.gallery-pending) .showcase{height:calc(var(--gallery-runway,6.8)*var(--gallery-stage-height,100svh))}
 :is(.gallery-enhanced,.gallery-pending) .showcase .gallery-stage{min-height:740px}
 .showcase .gallery-top{padding-top:105px}.showcase .gallery-top>.eyebrow{font-size:11px}.showcase .gallery-top>.text-link{font-size:14px;padding:10px 14px}
 :is(.gallery-enhanced,.gallery-pending) .showcase .gallery-readout{left:var(--gutter);right:auto;top:180px;bottom:auto;width:245px}
 .showcase .project-heading .eyebrow{font-size:11px}.showcase .project-heading h3{font-size:30px;margin-top:9px}
 .showcase .project-summary>p{display:none}.showcase .gallery-actions{gap:18px;margin-top:12px}.showcase .gallery-actions .text-link{font-size:12px}
 :is(.gallery-enhanced,.gallery-pending) .showcase .gallery-heading{left:0;top:50%;font-size:clamp(26px,7.5vw,44px);max-width:none}
 .showcase .gallery-hint{min-width:0;max-width:90px;line-height:1.4}.showcase .gallery-hint span{margin-left:5px}.showcase .project-count{min-width:0}
 .showcase .project-picker{gap:2px}.showcase .project-dots{gap:0}.showcase .project-dot{width:25px}.showcase .arrow-button{width:31px;height:31px}
 .showcase .gallery-heading{font-size:clamp(26px,7.5vw,44px)}
 .gallery-stills{grid-template-columns:1fr;gap:35px}.gallery-stills img{max-height:400px}.gallery-stills span{font-size:20px}
}
@media(max-width:450px){
 :is(.gallery-enhanced,.gallery-pending) .showcase .gallery-stage{min-height:700px}
 :is(.gallery-enhanced,.gallery-pending) .showcase .gallery-readout{width:220px;top:180px}
 .showcase .gallery-hint,.showcase .project-count{font-size:11px}.showcase .gallery-hint{max-width:66px}.showcase .project-dot{width:22px}.showcase .arrow-button{width:29px;height:29px}
}
@media print{.showcase .gallery-stage{display:block!important}.showcase{height:auto!important}.showcase .gallery-heading{position:static!important;padding:30px var(--gutter)!important}.showcase .gallery-stills{display:grid!important}.portfolio-mist,.coil-mesh-canvas,.showcase .gallery-readout,.showcase .gallery-controls,.showcase .gallery-top{display:none!important}}


/* Navigation lands after the orange line is written, before the first card arrives. */
.work-intro-anchor{position:absolute;left:0;top:0;width:1px;height:1px;scroll-margin-top:-105px;pointer-events:none}
:is(.gallery-enhanced,.gallery-pending) .work-intro-anchor{top:calc(var(--gallery-stage-height,100svh)*.56)}

@media print{.portfolio-mist{display:none!important}}

/* Release the inset final image into native scrolling, with a clear gap below it. */
.gallery-end-panel{display:none}
.gallery-enhanced .showcase .gallery-end-panel{display:block;position:absolute;z-index:2;left:4.75%;width:90.5%;height:auto;max-width:none;top:calc((var(--gallery-runway) - 1)*var(--gallery-stage-height) + (var(--gallery-stage-height) - var(--gallery-final-height,59.96vw))/2);visibility:hidden;pointer-events:none}
.gallery-enhanced .showcase[data-final-expanded] .gallery-end-panel{visibility:visible}
.gallery-enhanced .showcase[data-final-expanded] .gallery-stage :is(.gallery-canvas,.coil-mesh-canvas,.gallery-heading){visibility:hidden}
.gallery-finale-anchor{position:absolute;left:0;top:0;width:1px;height:1px;scroll-margin-top:-105px;pointer-events:none}
:is(.gallery-enhanced,.gallery-pending) .gallery-finale-anchor{top:calc(var(--gallery-last,6.25)*var(--gallery-stage-height,100svh))}
:is(.gallery-enhanced,.gallery-pending) .showcase+.case-studies{position:relative;z-index:2;margin-top:calc((var(--gallery-final-height,59.96vw) - var(--gallery-stage-height,100svh))/2 + clamp(30px,5vw,100px))}
@media print{:is(.gallery-enhanced,.gallery-pending) .showcase+.case-studies{margin-top:0}}
@media print{.gallery-enhanced .showcase .gallery-end-panel{display:none}}

/* Match the reserved scroll layout to the stage before enhancement loads. */
:root{--gallery-stage-height:max(100svh,660px)}
@media(min-width:1800px){:root{--gallery-stage-height:max(100svh,850px)}}
@media(max-width:760px){:root{--gallery-stage-height:max(100svh,740px)}}
@media(max-width:450px){:root{--gallery-stage-height:max(100svh,700px)}}

/* Reserve the full touch target on small phones without squeezing its label. */
@media(max-width:380px){.showcase .gallery-top>.eyebrow{display:none}.showcase .gallery-top{justify-content:flex-end}}