/* =============================================================================
   /gallery/ add-on. Shell from v2-about.css.

   The grid is CSS columns, not CSS grid, on purpose: these are 271 photos at
   whatever aspect ratio the camera was held at, and a masonry column flow keeps
   every one of them uncropped at its own shape. A fixed-ratio grid would either
   crop the tall ones or leave holes.
   ============================================================================= */

.gallery{ padding:clamp(56px,7vw,88px) 0 clamp(80px,9vw,120px); }

.gal-filter{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 clamp(28px,3.5vw,42px); }
.gal-chip{
  font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft);
  background:#fff; border:1px solid var(--hairline); border-radius:2px;
  padding:10px 15px; cursor:pointer; transition:.16s ease;
}
.gal-chip span{ color:var(--ink-faint); font-weight:600; margin-left:5px; }
.gal-chip:hover{ border-color:var(--teal); color:var(--navy); }
.gal-chip.is-on{ background:var(--navy); border-color:var(--navy); color:#fff; }
.gal-chip.is-on span{ color:var(--gold); }
.gal-chip:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

.gal-grid{ columns:4; column-gap:14px; }
.gal-item{
  display:block; margin:0 0 14px; break-inside:avoid; line-height:0;
  border-radius:3px; overflow:hidden; background:var(--navy-soft);
  box-shadow:0 18px 34px -22px rgba(15,29,45,.55);
  transition:transform .22s ease, box-shadow .22s ease;
}
.gal-item img{ width:100%; height:auto; display:block; }
.gal-item:hover{ transform:translateY(-3px); box-shadow:0 26px 46px -22px rgba(15,29,45,.7); }
.gal-item:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.gal-item[hidden]{ display:none; }
.gal-empty{ font-family:var(--body); font-style:italic; color:var(--ink-faint); }

/* ---- lightbox ---- */
.glb{
  position:fixed; inset:0; z-index:9999; background:rgba(8,16,26,.94);
  display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,54px);
}
.glb[hidden]{ display:none; }
.glb-img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:3px; display:block; }
.glb-close{
  position:absolute; top:14px; right:18px; width:44px; height:44px;
  background:none; border:0; color:#fff; font-size:34px; line-height:1; cursor:pointer;
}
.glb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:70px; background:rgba(255,255,255,.1); border:0; color:#fff;
  font-size:36px; line-height:1; cursor:pointer; border-radius:3px; transition:background .16s ease;
}
.glb-nav:hover{ background:rgba(255,255,255,.22); }
.glb-prev{ left:12px; }
.glb-next{ right:12px; }
.glb-close:focus-visible, .glb-nav:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.glb-count{
  position:absolute; bottom:16px; left:0; right:0; text-align:center; margin:0;
  font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; color:#9fb3c6;
}

@media (max-width:1100px){ .gal-grid{ columns:3; } }
@media (max-width:760px){  .gal-grid{ columns:2; } }
@media (max-width:460px){  .gal-grid{ columns:1; } .glb-nav{ width:42px; height:56px; font-size:28px; } }