/* Standalone full Gallery page — reuses style.css's :root palette
   (--ink/--accent/--white/etc.) so it visually matches the homepage
   without duplicating the whole design system for one page. */
body{background:var(--ink);color:var(--white)}

.gf-top{padding:18px 24px;border-bottom:1px solid var(--line)}
.gf-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--white);width:fit-content}
.gf-brand img{height:34px;width:34px;border-radius:50%}
.gf-brand span{font-weight:800;letter-spacing:.02em}

.gf-hero{max-width:900px;margin:0 auto;padding:56px 24px 24px;text-align:center}
.gf-hero .eyebrow{color:var(--accent-2);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.gf-hero h1{font-family:'Archivo',sans-serif;font-size:clamp(32px,5vw,52px);font-weight:900;margin:10px 0 12px;letter-spacing:-.01em}
.gf-hero p{color:var(--muted);font-size:15px;max-width:560px;margin:0 auto}
.gf-back{display:inline-block;margin-top:18px;color:var(--accent-2);text-decoration:none;font-size:13.5px;font-weight:600;transition:transform .15s ease}
.gf-back:hover{transform:translateX(-3px)}

.gf-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:0 24px 36px;max-width:1100px;margin:0 auto}
.gf-filter-btn{background:transparent;border:1px solid var(--line);color:var(--muted);padding:7px 16px;border-radius:20px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .18s var(--ease)}
.gf-filter-btn:hover{border-color:var(--accent-2);color:var(--white)}
.gf-filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

.gf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;max-width:1320px;margin:0 auto;padding:0 24px 60px}
.gf-item{position:relative;margin:0;border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--ink-2);
  opacity:0;transform:translateY(24px) scale(.97);animation:gfIn .6s var(--ease) forwards}
.gf-item.reveal.in{opacity:1;transform:none}
@keyframes gfIn{to{opacity:1;transform:none}}
.gf-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease),filter .5s var(--ease)}
.gf-item:hover img{transform:scale(1.09);filter:brightness(.75)}
.gf-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent);
  font-size:13px;font-weight:600;opacity:0;transform:translateY(10px);transition:all .3s var(--ease)}
.gf-item:hover figcaption{opacity:1;transform:none}
.gf-item[data-filtered-out]{display:none}

.gf-empty{text-align:center;color:var(--muted);padding:80px 24px}

.gf-lightbox{position:fixed;inset:0;background:rgba(4,5,10,.94);z-index:300;display:flex;align-items:center;justify-content:center;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .25s ease}
.gf-lightbox.open{opacity:1;pointer-events:auto}
.gf-lightbox img{max-width:90vw;max-height:78vh;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.5);
  transform:scale(.94);transition:transform .3s var(--ease)}
.gf-lightbox.open img{transform:scale(1)}
.gf-lightbox-cap{margin-top:16px;color:var(--white);font-size:14px;font-weight:600;text-align:center;max-width:80vw}
.gf-lightbox-close{position:absolute;top:20px;right:24px;background:none;border:none;color:#fff;font-size:32px;line-height:1;cursor:pointer;opacity:.8;transition:opacity .15s ease}
.gf-lightbox-close:hover{opacity:1}

.gf-foot{text-align:center;padding:30px 24px;border-top:1px solid var(--line)}
.gf-foot a{color:var(--muted);text-decoration:none;font-size:12.5px}
.gf-foot .footer-credit{border-top:none;margin-top:10px;padding-top:0}

@media (max-width:560px){
  .gf-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
}