.gallery{padding-top:3.5rem;padding-bottom:3rem;scroll-snap-align:start}
.gallery .kicker{margin-bottom:.65rem}
.gallery .stage-wrap{width:100%;height:clamp(380px,60svh,760px);margin:1.5rem auto 0;background:transparent;isolation:isolate;overflow:visible}
.gallery .stage-wrap::before,.gallery .stage-wrap::after{content:"";position:absolute;left:50%;top:50%;width:min(62%,52rem);height:76%;border:1px solid rgba(255,255,255,.3);border-radius:18px;background-color:#14151a;background-position:center;background-size:cover;box-shadow:0 12px 30px rgba(0,0,0,.18);filter:saturate(.82);opacity:.55;pointer-events:none;transition:background-image .22s ease,transform .28s cubic-bezier(.22,.72,.2,1),filter .28s ease,opacity .28s ease;z-index:0}
.gallery .stage-wrap::before{background-image:linear-gradient(rgba(8,9,12,.12),rgba(8,9,12,.12)),var(--stack-prev);transform:translate(-50%,-50%) translateX(-48%) scale(.88)}
.gallery .stage-wrap::after{background-image:linear-gradient(rgba(8,9,12,.15),rgba(8,9,12,.15)),var(--stack-next);transform:translate(-50%,-50%) translateX(48%) scale(.88);z-index:1}
.gallery .stage-wrap.card-shift-next::after,.gallery .stage-wrap.card-shift-prev::before{transform:translate(-50%,-50%) translateX(0) scale(1) rotate(0);filter:saturate(1) brightness(1);opacity:1;z-index:4}
.gallery .stage-wrap.card-shift-next::before{transform:translate(-50%,-50%) translateX(-66%) scale(.82);opacity:.3}
.gallery .stage-wrap.card-shift-prev::after{transform:translate(-50%,-50%) translateX(66%) scale(.82);opacity:.3}
.gallery .stage-wrap.card-swap::before,.gallery .stage-wrap.card-swap::after{transition:none}
.gallery .stage-wrap.card-front-entering .showcase-frame{z-index:6}
.gallery img.shot{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-radius:14px}
.gallery .showcase-frame{position:absolute;inset:0;margin:auto;overflow:hidden;z-index:3;border-radius:14px;background:#fff;box-shadow:0 16px 44px rgba(0,0,0,.28);filter:none;isolation:isolate;mix-blend-mode:normal;opacity:1}
.gallery .showcase-frame img.shot{inset:auto;margin:0;max-width:none;max-height:none;border-radius:0;box-shadow:none;mix-blend-mode:normal}
.gallery .showcase-frame::after{content:"";position:absolute;inset:0;border:3px solid #fff;border-radius:inherit;pointer-events:none;z-index:2}
.gallery .stage-wrap>.gnav{z-index:5}
.gallery .gcap{width:100%;margin-top:.75rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center}
.gallery #gcap{flex:none;width:100%;text-align:center}
.gallery #gdots{gap:.25rem;align-items:center;padding-top:0}
#gdots button{width:28px;height:28px;min-width:28px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
#gdots button::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--dim);opacity:.5}
#gdots button[aria-pressed="true"]::after{background:var(--accent);opacity:1;transform:scale(1.3)}
#gdots button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:5px}
.gallery.showcase-dark{--dim:#fff}.gallery.showcase-dark .gcap{color:#fff}
.gallery.showcase-text-light{--dim:#fff}.gallery.showcase-text-light h2,.gallery.showcase-text-light .lead,.gallery.showcase-text-light .gcap{color:#fff}
.gallery.showcase-text-dark{--dim:#fff}.gallery.showcase-text-dark h2,.gallery.showcase-text-dark .lead,.gallery.showcase-text-dark .gcap{color:#fff}
body.gallery-on .site-bg img{filter:blur(30px) saturate(1.2) brightness(1.02)}
body.gallery-on .site-bg::after{background:color-mix(in srgb,var(--end-bg) 42%,transparent)}
body.gallery-on.gallery-text-light .site-bg::after,body.gallery-on.gallery-text-dark .site-bg::after{background:color-mix(in srgb,var(--end-bg) 42%,transparent)}
@media(max-width:920px){.gallery{padding-top:4rem}.gallery .stage-wrap{height:clamp(320px,55svh,640px)}}
@media(max-width:600px){.gallery .stage-wrap{height:auto;aspect-ratio:1.5;min-height:0}.gallery .stage-wrap::before{transform:translate(-50%,-50%) translateX(-42%) scale(.86)}.gallery .stage-wrap::after{transform:translate(-50%,-50%) translateX(42%) scale(.86)}.gallery .gcap{gap:.35rem}}
@media(prefers-reduced-motion:reduce){.gallery .stage-wrap::before,.gallery .stage-wrap::after{transition:none}}
