/* 13-site · Gallery page only (gallery.html). Owner: Gallery builder. Loads after site.css.
   Filters tablist, the photo grid (CSS columns so 4:5 and 3:2 frames sit without gaps), and the lightbox. */

/* ------------------------------------------------------------------ grid section */
.b-gl{padding:calc(var(--block) * .4) 0 var(--block)}
@media (max-width:1008px){.b-gl{padding-top:48px}}

/* ------------------------------------------------------------------ filters: text tabs on a hairline */
.gl-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px;margin:0 auto 56px;border-bottom:1px solid var(--hairline)}
.no-js .gl-filters{display:none}
.gl-filters__tab{position:relative;min-height:44px;padding:12px 0;margin:0 0 -1px;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;
  font:500 13px/1.5 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .3s ease,border-color .3s ease}
.gl-filters__tab:hover{color:var(--ink)}
.gl-filters__tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.gl-filters__tab:focus-visible{outline-offset:2px}
@media (max-width:1008px){
  /* one row that scrolls sideways (fades at the right edge so it reads as more), not three rows of tabs */
  .gl-filters{justify-content:flex-start;flex-wrap:nowrap;gap:0 22px;margin-bottom:32px;border-bottom:0;padding:4px 24px 4px 2px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .gl-filters::-webkit-scrollbar{display:none}
  .gl-filters__tab{flex:none;white-space:nowrap;scroll-snap-align:start}
  .gl-filters__tab{border-bottom:1px solid var(--hairline);margin:0}
  .gl-filters__tab[aria-selected="true"]{border-bottom:2px solid var(--ink)}
}

/* ------------------------------------------------------------------ grid: 3 columns / 2 / 1, gap 30px, square corners */
.gl-grid{list-style:none;margin:0;padding:0;columns:3;column-gap:30px;transition:opacity .4s ease}
.gl-grid.is-fading{opacity:0}
.gl-item{break-inside:avoid;margin:0 0 30px}
.gl-item[hidden]{display:none}
.gl-item__link{display:block;color:var(--ink);cursor:zoom-in}
.gl-item__link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.gl-item__img{display:block}
.gl-item__img img{transform:scale(1);transition:transform 2.4s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.gl-item__link:hover .gl-item__img img{transform:scale(1.04)}}
.gl-item__link:focus-visible .gl-item__img img{transform:scale(1.04)}
@media (max-width:1008px){.gl-grid{columns:2;column-gap:20px}.gl-item{margin-bottom:20px}}
@media (max-width:639px){.gl-grid{columns:2;column-gap:12px}.gl-item{margin-bottom:12px}}

/* ------------------------------------------------------------------ lightbox: native <dialog>, navy ground */
.gl-lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--ink);color:var(--on-ink);overflow:hidden;--band:var(--ink)}
.gl-lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.gl-lightbox::backdrop{background:var(--ink)}
.gl-lightbox :focus-visible{outline:2px solid var(--on-ink);outline-offset:4px}
/* lock the page behind the viewer; drop the stable gutter so the navy covers the full width */
html:has(.gl-lightbox[open]){overflow:hidden;scrollbar-gutter:auto}

.gl-lightbox__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px 0}
.gl-lightbox__count{margin:0;font:500 12px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.gl-lightbox__close{min-width:44px;min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;
  font:500 12px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:inherit;position:relative}
.gl-lightbox__close::after{content:"";position:absolute;left:4px;right:4px;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.gl-lightbox__close:hover::after{transform:scaleX(1)}

.gl-lightbox__fig{margin:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0 0}
.gl-lightbox__stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;flex:0 1 auto;padding:0 88px}
.gl-lightbox__img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);object-fit:contain;
  transition:opacity .35s ease;user-select:none;-webkit-user-drag:none}
.gl-lightbox__img.is-loading{opacity:0}
.gl-lightbox__cap{max-width:68ch;margin:16px auto 0;padding:0 24px 24px;text-align:center;font:italic 16px/1.5 var(--f-body);letter-spacing:.3px;text-wrap:balance;color:var(--on-ink)}

.gl-lightbox__nav{position:absolute;top:50%;width:64px;height:64px;margin-top:-32px;display:flex;align-items:center;justify-content:center;border:0;background:none;cursor:pointer;color:var(--on-ink);opacity:.8;transition:opacity .3s ease}
.gl-lightbox__nav:hover{opacity:1}
.gl-lightbox__nav--prev{left:12px}
.gl-lightbox__nav--next{right:12px}
.gl-arrow{display:block;width:37px;height:37px;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M19.125 11.02H1m10-10c0 10 10 10 10 10s-10 0-10 10' fill='none' stroke='%23000' stroke-width='.6' stroke-linecap='square'/%3E%3C/svg%3E") center/37px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M19.125 11.02H1m10-10c0 10 10 10 10 10s-10 0-10 10' fill='none' stroke='%23000' stroke-width='.6' stroke-linecap='square'/%3E%3C/svg%3E") center/37px no-repeat}
.gl-lightbox__nav--prev .gl-arrow{transform:scaleX(-1)}

@media (max-width:1008px){
  .gl-lightbox__bar{padding:8px 16px 0}
  .gl-lightbox__stage{padding:0}
  .gl-lightbox__img{max-height:calc(100vh - 220px);max-height:calc(100dvh - 220px)}
  /* arrows sit under the photo on phones, either side of the caption row */
  .gl-lightbox__nav{top:auto;bottom:-60px;margin-top:0;width:48px;height:48px}
  .gl-lightbox__nav--prev{left:12px}
  .gl-lightbox__nav--next{right:12px}
  .gl-lightbox__cap{margin-top:72px;font-size:15px;padding:0 20px 20px}
}

@media (prefers-reduced-motion:reduce){
  .gl-grid,.gl-lightbox__img{transition:none!important}
  .gl-item__img img{transition:none!important;transform:none!important}
}