/* ================= GALLERY ================= */
html,body{overflow-x:clip}
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.crumb a:hover{color:var(--primary)}
.crumb .cr-sep,.crumb [aria-current]{color:var(--ink-2);opacity:.7}
.g-hero{background:var(--grain),var(--bg);padding-block:clamp(130px,10vw,170px) clamp(30px,3vw,50px)}
.g-title{font-size:clamp(46px,7.4vw,140px);line-height:1;margin-top:clamp(24px,2.4vw,40px)}
.gl-sec{background:var(--grain),var(--bg);padding-bottom:clamp(90px,8vw,150px)}
.g-bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 86px);z-index:20;display:flex;gap:8px;padding:12px 0;background:var(--bg);overflow-x:auto;scrollbar-width:none;transition:top .6s var(--ease)}
.hdr.up ~ main .g-bar{top:env(safe-area-inset-top,0px)}
.g-bar::-webkit-scrollbar{display:none}
.g-bar button{flex:none;height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--line);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;display:flex;align-items:center;gap:8px;transition:background .4s,color .4s,border-color .4s}
.g-bar button sup{font-size:10px;color:var(--primary)}
.g-bar button:hover{border-color:var(--ink)}
.g-bar button[aria-pressed="true"]{background:var(--ink);color:var(--bg-2);border-color:var(--ink)}
.g-bar button[aria-pressed="true"] sup{color:var(--bg)}
.mason{columns:4 260px;column-gap:clamp(12px,1.4vw,22px);margin-top:clamp(20px,2vw,34px)}
.gi{position:relative;display:block;width:100%;margin:0 0 clamp(12px,1.4vw,22px);padding:0;border:0;overflow:hidden;break-inside:avoid;cursor:zoom-in;background:var(--card)}
.gi[hidden]{display:none}
.gi.vid{cursor:pointer}
.gi img{display:block;width:100%;height:auto;transition:transform 1.1s var(--ease),filter .6s}
.gi:after{content:"";position:absolute;inset:0;background:rgba(28,23,20,.28);opacity:0;transition:opacity .5s}
.gi video,.gi .gi-ph{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--ink)}
.gi .gi-ph{display:grid;place-items:center;color:var(--bg);font-size:28px}
.g-more{display:flex;justify-content:center;margin-top:clamp(30px,3vw,50px)}
.g-more[hidden]{display:none}
.gi .ic{position:absolute;left:50%;top:50%;z-index:2;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(253,249,246,.92);color:var(--ink);display:grid;place-items:center;font-size:22px;opacity:0;transform:scale(.6);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.gi.vid .ic{opacity:1;transform:none;background:rgba(253,249,246,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gi.vid .ic:before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(253,249,246,.7);animation:ring 2.4s var(--ease) infinite}
@keyframes ring{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
.gi:hover img,.gi:focus-visible img{transform:scale(1.06)}
.gi:hover:after,.gi:focus-visible:after{opacity:1}
.gi:hover .ic,.gi:focus-visible .ic{opacity:1;transform:scale(1)}
.gi.vid:hover .ic{transform:scale(1.1)}

/* lightbox */
.lb-open,.lb-open body{overflow:hidden}
/* solid backdrop: a full screen blur is re-rendered on every frame of every transition and made the lightbox lag */
.lb{position:fixed;inset:0;z-index:130;display:grid;place-items:center;background:rgba(241,228,220,.97);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s;contain:layout paint}
.lb.open{opacity:1;visibility:visible;transition:opacity .3s var(--ease)}
.lb{--sw:min(92vw,1400px);--sh:min(84vh,900px)}
.lb-stage{position:relative;width:var(--sw);height:var(--sh);display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.lb-stage img,.lb-stage video{flex:none;width:auto;height:auto;max-width:var(--sw);max-height:var(--sh);object-fit:contain;display:block;user-select:none}
.lb-stage img{cursor:zoom-in;transition:transform .45s var(--ease);will-change:transform;-webkit-user-drag:none}
.lb-stage img.noanim{transition:none}
.lb-stage .lb-item{position:absolute;margin:auto;inset:0}
.lb-stage img.zoomed{cursor:grab}
.lb-stage img.zoomed.noanim{cursor:grabbing}
.lb-stage video{background:#000}
.lb-btn{position:absolute;width:56px;height:56px;border-radius:50%;border:1px solid rgba(28,23,20,.18);color:var(--ink);display:grid;place-items:center;font-size:22px;background:rgba(253,249,246,.7);transition:background .3s,color .3s;z-index:3}
@media (hover:hover){ .lb-btn:hover{background:var(--ink);color:var(--bg-2);border-color:var(--ink)} }
.lb-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lb-x{top:max(20px,env(safe-area-inset-top,0px));right:max(20px,env(safe-area-inset-right,0px))}
.lb-z{top:max(20px,env(safe-area-inset-top,0px));right:calc(max(20px,env(safe-area-inset-right,0px)) + 68px)}
.lb-p{left:max(20px,env(safe-area-inset-left,0px));top:50%;margin-top:-28px}
.lb-n{right:max(20px,env(safe-area-inset-right,0px));top:50%;margin-top:-28px}
.lb-c{position:absolute;bottom:max(22px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);font-family:var(--f-d);font-size:22px;color:var(--ink);letter-spacing:.06em}
.lb-c small{font-family:var(--f-b);font-size:11px;opacity:.6}
.lb.is-vid .lb-z{display:none}
@media (max-width:820px){
  .g-hero{padding-top:120px}
  .g-title{font-size:clamp(40px,11.5vw,90px)}
  .g-bar{top:calc(env(safe-area-inset-top,0px) + 78px)}
  .mason{columns:2 140px}
  .gi .ic{width:46px;height:46px;margin:-23px 0 0 -23px;font-size:17px}
  .gi:not(.vid) .ic{opacity:1;transform:scale(.8);width:36px;height:36px;margin:0;left:auto;top:auto;right:10px;bottom:10px;font-size:14px}
  .lb{--sw:100vw;--sh:calc(100svh - 190px)}
  .lb-p,.lb-n{top:auto;bottom:max(14px,env(safe-area-inset-bottom,0px));margin:0;width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){ .gi.vid .ic:before{animation:none} }