/* Gallery page (v2). Tokens only. */
.gl-head-grid{display:grid;gap:28px 64px;align-items:end}
@media(min-width:900px){.gl-head-grid{grid-template-columns:1.2fr .8fr}}
.page-head.gl-head h1{font-size:clamp(3.6rem,1.8rem + 8vw,9.5rem);line-height:.9;letter-spacing:-.045em;max-width:none}
.gl-head-side p{font-size:var(--fs-lead);color:var(--text-muted);max-width:40ch}
.gl-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4rem}
.gl-filter{display:inline-flex;align-items:center;gap:.55em;min-height:44px;padding:.5em 1.1em;border-radius:var(--pill);border:1px solid var(--border);font-size:var(--fs-sm);font-weight:500;color:var(--text-muted);transition:background-color .3s,border-color .3s,color .3s}
.gl-filter span{font-family:ui-monospace,Menlo,monospace;font-size:.7rem;opacity:.7}
.gl-filter:hover{border-color:var(--border-strong);color:var(--text)}
.gl-filter.active{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
[data-theme="light"] .gl-filter.active{background:var(--plum);border-color:var(--plum)}

.gl-section{padding-top:clamp(24px,3vw,40px)}
.gl-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,42vw,220px);grid-auto-flow:dense;gap:10px}
@media(min-width:760px){.gl-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(180px,22vw,240px);gap:14px}}
@media(min-width:1100px){.gl-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:230px}}
.g-item{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:var(--bg3);isolation:isolate;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.g-item.g-tall{grid-row:span 2}
.g-item.g-wide{grid-column:span 2}
.g-item.g-big{grid-column:span 2;grid-row:span 2}
.g-mask{position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden}
.g-item img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter);transition:transform 1.2s var(--ease-settle),filter .6s}
.g-item::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:linear-gradient(to top,rgba(30,15,38,.55),transparent 50%);opacity:0;transition:opacity .45s;pointer-events:none}
.g-item:hover img,.g-item:focus-visible img{transform:scale(1.07)}
.g-item:hover::after,.g-item:focus-visible::after{opacity:1}
.g-item:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.g-item.is-hidden{display:none}
.gl-grid.gl-anim .g-item:not(.is-hidden){animation:glIn .55s var(--ease-out) both;animation-delay:calc(min(var(--n,0),12) * 35ms)}
@keyframes glIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

.gl-cta{margin-top:clamp(56px,8vw,100px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--border)}
.gl-cta h2{font-size:clamp(2.4rem,1.4rem + 3.4vw,4.6rem);line-height:1;letter-spacing:-.03em}

/* ---- Lightbox ---- */
.gl-box{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(14,7,18,.94);color:#fff;overflow:hidden}
.gl-box::backdrop{background:rgba(14,7,18,.6);backdrop-filter:blur(6px)}
.gl-box[open]{display:grid;place-items:center;animation:glFade .35s var(--ease-out)}
@keyframes glFade{from{opacity:0}to{opacity:1}}
.gl-box-fig{display:grid;justify-items:center;gap:14px;padding:72px clamp(16px,8vw,110px) 28px;max-width:100%;max-height:100%}
.gl-box-fig img{max-width:min(100%,1200px);max-height:calc(100svh - 150px);width:auto;height:auto;border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9);animation:glZoom .45s var(--ease-settle)}
.gl-box-fig img.swap{animation:none}
@keyframes glZoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.gl-box figcaption{display:flex;gap:16px;align-items:baseline;justify-content:center;flex-wrap:wrap;text-align:center;font-size:var(--fs-sm);color:rgba(255,255,255,.82);max-width:60ch}
.gl-box-count{font-family:ui-monospace,Menlo,monospace;font-size:.72rem;letter-spacing:.12em;color:#d8b6e8}
.gl-box-btn{position:absolute;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);transition:background-color .3s,transform .4s var(--ease-settle)}
.gl-box-btn svg{width:22px;height:22px}
.gl-box-btn:hover{background:rgba(255,255,255,.2)}
.gl-box-btn:focus-visible{outline:2px solid #d8b6e8;outline-offset:3px}
.gl-box-close{top:16px;right:16px}
.gl-box-prev{left:clamp(10px,2vw,28px);top:50%;translate:0 -50%}
.gl-box-next{right:clamp(10px,2vw,28px);top:50%;translate:0 -50%}
.gl-box-prev:hover{transform:translateX(-3px)}
.gl-box-next:hover{transform:translateX(3px)}
@media(max-width:700px){.gl-box-prev,.gl-box-next{top:auto;bottom:18px;translate:none}.gl-box-prev{left:calc(50% - 64px)}.gl-box-next{right:calc(50% - 64px)}.gl-box-fig{padding:68px 12px 92px}.gl-box-fig img{max-height:calc(100svh - 210px)}}
@media(prefers-reduced-motion:reduce){.gl-box[open],.gl-box-fig img,.gl-grid.gl-anim .g-item{animation:none!important}}
@media(min-width:760px) and (max-width:1099px){.gl-grid .g-item:last-child{grid-column:1/-1}}