/* ================================================================
   SOVNEAR — GALLERY SECTION
   Requires: tokens.css

   Layout:   Asymmetric CSS Grid (3-col, explicit row-span placement)
             → 2-col tablet → 1-col mobile
   Features: Hover zoom · Custom lightbox · Lazy-load ready
   BEM:      .gl-*  (gallery namespace)
================================================================ */


/* ================================================================
   SECTION WRAPPER
================================================================ */
.gl {
  background: var(--color-ivory, #FAF6F0);
  padding: var(--space-20, 160px) var(--space-6, 48px);
  position: relative;
  overflow: hidden;
}

/* Ambient glow — top centre */
.gl::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse at center,
    rgba(184, 137, 46, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.gl__inner {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}


/* ================================================================
   SECTION HEADER
================================================================ */
.gl__header {
  text-align: center;
  max-width: 580px;
  margin: 0 auto var(--space-12, 96px);
}

.gl__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-muted, #C9A96E);
  margin-bottom: var(--space-4, 32px);
}

.gl__eyebrow-rule {
  display: inline-block;
  width: 28px; height: 1px;
  background: rgba(201, 169, 110, 0.45);
  flex-shrink: 0;
}

.gl__heading {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-green-deep, #2E3D30);
  margin-bottom: var(--space-4, 32px);
}

.gl__heading em {
  font-style: italic;
  color: var(--color-gold-light);
}

.gl__subheading {
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(74, 94, 76, 0.75);
}


/* ================================================================
   MASONRY GRID
   3-column explicit placement. Each row unit = 220px.
   8 images arranged in asymmetric rhythm.

   Visual pattern:
   ┌─────────┬──────────┬─────────┐
   │  1 TALL │  2 LAND  │  3 TALL │  rows 1–2
   │         │  4 SQ    │         │
   ├─────────┴──────────┤         │
   │  5  WIDE (2-col)   │  6 TALL │  rows 3–4
   ├─────────┬──────────┤         │
   │  7 SQ   │  8 SQ   │         │
   └─────────┴──────────┴─────────┘
================================================================ */
.gl__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 10px;
}

/* Explicit placement */
.gl__item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.gl__item:nth-child(2) { grid-column: 2; grid-row: 1; }
.gl__item:nth-child(3) { grid-column: 3; grid-row: 1 / span 2; }
.gl__item:nth-child(4) { grid-column: 2; grid-row: 2; }
.gl__item:nth-child(5) { grid-column: 1 / span 2; grid-row: 3; }
.gl__item:nth-child(6) { grid-column: 3; grid-row: 3 / span 2; }
.gl__item:nth-child(7) { grid-column: 1; grid-row: 4; }
.gl__item:nth-child(8) { grid-column: 2; grid-row: 4; }


/* ================================================================
   GRID ITEM
================================================================ */
.gl__item {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  display: block;
  background: rgba(46, 61, 48, 0.08); /* shimmer base before image loads */

  /* Accessibility: ensure keyboard focus is visible */
  outline: none;
}

.gl__item:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
}


/* ── The image (or placeholder) ── */
.gl__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

  /* Warm cinematic treatment (design system) */
  filter: saturate(1.05) brightness(0.92) contrast(1.02);

  /* Zoom on hover — only transform for GPU compositing */
  transform: scale(1);
  transition:
    transform var(--duration-slow, 640ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    filter    var(--duration-slow, 640ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
  will-change: transform;
}

.gl__item:hover .gl__img,
.gl__item:focus-visible .gl__img {
  transform: scale(1.07);
  filter: saturate(1.1) brightness(0.96) contrast(1.03);
}


/* ── Overlay — gradient + caption ── */
.gl__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(28, 20, 10, 0.75)  0%,
    rgba(28, 20, 10, 0.20)  40%,
    transparent             75%
  );
  opacity: 0;
  transition: opacity var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 22px;
}

.gl__item:hover .gl__overlay,
.gl__item:focus-visible .gl__overlay {
  opacity: 1;
}


/* ── Caption ── */
.gl__caption {
  transform: translateY(8px);
  transition: transform var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
}

.gl__item:hover .gl__caption,
.gl__item:focus-visible .gl__caption {
  transform: translateY(0);
}

.gl__caption-category {
  display: block;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-muted, #C9A96E);
  margin-bottom: 5px;
}

.gl__caption-title {
  display: block;
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  color: var(--color-ivory, #FAF6F0);
  line-height: 1.3;
}


/* ── Expand icon — top-right corner ── */
.gl__expand {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: rgba(250, 246, 240, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(250, 246, 240, 0.20);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ivory, #FAF6F0);
  opacity: 0;
  transform: scale(0.80);
  transition:
    opacity   var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    transform var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    background var(--duration-fast, 200ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
}

.gl__item:hover .gl__expand,
.gl__item:focus-visible .gl__expand {
  opacity: 1;
  transform: scale(1);
}

.gl__expand:hover {
  background: rgba(184, 137, 46, 0.35);
  border-color: rgba(212, 168, 75, 0.50);
}


/* ── Placeholder image fill (used until real photos are swapped in) ── */
.gl__placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Subtle shimmer sweep on placeholders */
.gl__placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.18) 50%,
    transparent 60%
  );
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}


/* ================================================================
   FOOTER — Count + CTA
================================================================ */
.gl__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-8, 64px);
  padding-top: var(--space-6, 48px);
  border-top: 1px solid rgba(201, 169, 110, 0.15);
}

.gl__footer-count {
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(201, 169, 110, 0.50);
}

.gl__footer-count strong {
  font-weight: 600;
  color: var(--color-gold-muted, #C9A96E);
}

.gl__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-green-deep, #2E3D30);
  background: var(--color-gold-light);
  padding: 14px 36px;
  border-radius: var(--radius-pill, 100px);
  position: relative;
  overflow: hidden;
  transition:
    background  var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    transform   var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    box-shadow  var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
}

.gl__cta::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
  transition: left 500ms var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
}
.gl__cta:hover::before { left: 100%; }
.gl__cta:hover {
  background: var(--color-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(184, 137, 46, 0.35);
}

.gl__cta svg {
  transition: transform var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
}
.gl__cta:hover svg { transform: translateX(3px); }


/* ================================================================
   LIGHTBOX
================================================================ */
.lb {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 300);
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
}

.lb.is-open {
  opacity: 1;
  pointer-events: all;
}

/* Backdrop */
.lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 10, 0.94);
  backdrop-filter: blur(12px) saturate(60%);
  -webkit-backdrop-filter: blur(12px) saturate(60%);
  cursor: zoom-out;
}

/* Stage — wraps image + caption */
.lb__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(90vw, 1080px);
  width: 100%;
}

/* Image container */
.lb__img-wrap {
  width: 100%;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.lb__img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 4px;

  transform: scale(0.94);
  opacity: 0;
  transition:
    transform var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    opacity   var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
}

.lb.is-open .lb__img {
  transform: scale(1);
  opacity: 1;
}

/* Placeholder inside lightbox */
.lb__placeholder {
  width: min(80vw, 900px);
  height: min(70vh, 580px);
  border-radius: 4px;
  transform: scale(0.94);
  opacity: 0;
  transition:
    transform var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    opacity   var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
}
.lb.is-open .lb__placeholder {
  transform: scale(1);
  opacity: 1;
}

/* Caption */
.lb__caption {
  text-align: center;
  margin-top: var(--space-3, 24px);
  padding: 0 var(--space-4, 32px);

  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)) 120ms,
    transform var(--duration-base, 380ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)) 120ms;
}
.lb.is-open .lb__caption { opacity: 1; transform: translateY(0); }

.lb__caption-category {
  display: block;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-muted, #C9A96E);
  margin-bottom: 6px;
}

.lb__caption-title {
  display: block;
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 22px;
  font-weight: 300;
  font-style: italic;
  color: rgba(250, 246, 240, 0.88);
}

/* Counter badge (e.g. 3 / 8) */
.lb__counter {
  position: absolute;
  top: -44px; right: 0;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(201, 169, 110, 0.50);
}
.lb__counter strong { color: var(--color-gold-muted, #C9A96E); font-weight: 600; }

/* Close button */
.lb__close {
  position: fixed;
  top: var(--space-5, 40px);
  right: var(--space-5, 40px);
  z-index: 2;
  width: 44px; height: 44px;
  background: rgba(250, 246, 240, 0.08);
  border: 1px solid rgba(250, 246, 240, 0.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: rgba(250, 246, 240, 0.75);
  transition:
    background  var(--duration-fast, 200ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    border-color var(--duration-fast, 200ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    color       var(--duration-fast, 200ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    transform   var(--duration-fast, 200ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
  outline: none;
}
.lb__close:hover {
  background: rgba(184, 137, 46, 0.22);
  border-color: rgba(201, 169, 110, 0.40);
  color: var(--color-ivory, #FAF6F0);
  transform: rotate(90deg);
}
.lb__close:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 3px; }

/* Prev / Next arrows */
.lb__arrow {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 52px; height: 52px;
  background: rgba(250, 246, 240, 0.06);
  border: 1px solid rgba(250, 246, 240, 0.14);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: rgba(250, 246, 240, 0.65);
  transition:
    background   var(--duration-fast, 200ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    border-color var(--duration-fast, 200ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    color        var(--duration-fast, 200ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    transform    var(--duration-fast, 200ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.lb__arrow:hover {
  background: rgba(184, 137, 46, 0.20);
  border-color: rgba(201, 169, 110, 0.35);
  color: var(--color-ivory, #FAF6F0);
}
.lb__arrow:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 3px; }
.lb__arrow--prev {
  left: var(--space-4, 32px);
}
.lb__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb__arrow--next {
  right: var(--space-4, 32px);
}
.lb__arrow--next:hover { transform: translateY(-50%) translateX(3px); }

/* Dot indicators */
.lb__dots {
  position: fixed;
  bottom: var(--space-5, 40px);
  left: 50%; transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
  align-items: center;
}

.lb__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(201, 169, 110, 0.30);
  border: none; padding: 0; cursor: pointer;
  transition:
    background  var(--duration-fast, 200ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    transform   var(--duration-fast, 200ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.lb__dot:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 3px; border-radius: 50%; }
.lb__dot.is-active {
  background: var(--color-gold-light);
  transform: scale(1.4);
}


/* ================================================================
   ANIMATE ON SCROLL
================================================================ */
.gl__header.animate-on-scroll,
.gl__footer.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--duration-slow, 640ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    transform var(--duration-slow, 640ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
}
.gl__header.animate-on-scroll.is-visible,
.gl__footer.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

.gl__item.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition:
    opacity   var(--duration-slow, 640ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    transform var(--duration-slow, 640ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
}
.gl__item.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger */
.gl__item:nth-child(1) { transition-delay: 0ms;   }
.gl__item:nth-child(2) { transition-delay: 70ms;  }
.gl__item:nth-child(3) { transition-delay: 140ms; }
.gl__item:nth-child(4) { transition-delay: 210ms; }
.gl__item:nth-child(5) { transition-delay: 100ms; }
.gl__item:nth-child(6) { transition-delay: 170ms; }
.gl__item:nth-child(7) { transition-delay: 150ms; }
.gl__item:nth-child(8) { transition-delay: 220ms; }


/* ================================================================
   RESPONSIVE — 5-TIER BREAKPOINT SYSTEM

   Desktop        > 960px  : 3-col masonry / 3-col uniform 280px
   Tablet         ≤ 960px  : 2-col masonry / 2-col uniform 300px
   Tablet-small   ≤ 768px  : filter → horizontal scroll
   Mobile         ≤ 600px  : 1-col masonry / 2-col uniform 220px
   Mobile-small   ≤ 480px  : 1-col uniform, aspect-ratio rows
   Tiny           ≤ 375px  : tightest padding & type scale
================================================================ */

/* ── Tablet ≤ 960px ── */
@media (max-width: 960px) {
  .gl { padding: var(--space-16, 128px) var(--space-5, 40px); }

  .gl__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }

  /* Masonry re-flow to 2-col */
  .gl__item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .gl__item:nth-child(2) { grid-column: 2; grid-row: 1; }
  .gl__item:nth-child(3) { grid-column: 2; grid-row: 2; }
  .gl__item:nth-child(4) { grid-column: 1; grid-row: 3; }
  .gl__item:nth-child(5) { grid-column: 2; grid-row: 3 / span 2; }
  .gl__item:nth-child(6) { grid-column: 1; grid-row: 4 / span 2; }
  .gl__item:nth-child(7) { grid-column: 2; grid-row: 5; }
  .gl__item:nth-child(8) { grid-column: 1; grid-row: 6; }

  /* Uniform grid: 2-col with taller rows (more width per column) */
  .gl__grid--uniform {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 300px;
  }

  .lb__arrow--prev { left: var(--space-2, 16px); }
  .lb__arrow--next { right: var(--space-2, 16px); }
}

/* ── Touch / no-hover devices: always-visible captions ── */
@media (hover: none), (max-width: 960px) {
  .gl__overlay { opacity: 1; }
  .gl__caption { transform: translateY(0); }
  .gl__expand  { opacity: 1; transform: scale(1); }
  /* Gentle micro-zoom on tap — less than desktop hover */
  .gl__item:hover .gl__img { transform: scale(1.03); }
}

/* ── Mobile ≤ 600px ── */
@media (max-width: 600px) {
  .gl { padding: var(--space-12, 96px) var(--space-3, 24px); }
  .gl__header { margin-bottom: var(--space-8, 64px); }

  /* Masonry: single column natural flow */
  .gl__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 260px;
  }
  .gl__item:nth-child(n) { grid-column: 1; grid-row: auto; }

  /* Uniform: keep 2-col but shorter rows */
  .gl__grid--uniform {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
    gap: 8px;
  }

  .gl__footer {
    flex-direction: column;
    gap: var(--space-4, 32px);
    text-align: center;
  }

  /* Lightbox: arrows off on touch (swipe instead) */
  .lb__arrow { display: none; }
  .lb__close  { top: var(--space-3, 24px); right: var(--space-3, 24px); }
  .lb__stage  { max-width: 96vw; }
}


/* ================================================================
   REDUCED MOTION
================================================================ */
@media (prefers-reduced-motion: reduce) {
  .gl__img,
  .gl__overlay,
  .gl__caption,
  .gl__expand,
  .gl__item.animate-on-scroll,
  .gl__header.animate-on-scroll,
  .gl__footer.animate-on-scroll,
  .lb, .lb__img, .lb__placeholder, .lb__caption,
  .lb__close, .lb__arrow, .lb__dot { transition: none; animation: none; }

  .gl__item.animate-on-scroll { opacity: 1; transform: none; }
  .gl__header.animate-on-scroll,
  .gl__footer.animate-on-scroll { opacity: 1; transform: none; }
  .gl__placeholder::after { animation: none; }
  .gl__filter { transition: none; }
}


/* ================================================================
   FILTER TABS  (gallery.html full page only)
   v3 — horizontal scroll on mobile, centred on desktop
================================================================ */
.gl__filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-6, 48px);
}

.gl__filter {
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  /* Deep sage text — fully legible on ivory */
  color: rgba(46, 61, 48, 0.65);
  padding: 9px 22px;
  /* Subtle gold-tinted border */
  border: 1px solid rgba(46, 61, 48, 0.18);
  border-radius: var(--radius-pill, 100px);
  background: transparent;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    color        var(--duration-fast, 200ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    border-color var(--duration-fast, 200ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94)),
    background   var(--duration-fast, 200ms) var(--ease-luxury, cubic-bezier(.25,.46,.45,.94));
}

.gl__filter:hover {
  color: var(--color-green-deep, #2E3D30);
  border-color: rgba(200, 146, 42, 0.55);
  background: rgba(200, 146, 42, 0.08);
}

/* Active tab: gold pill with deep text — clear visual anchor */
.gl__filter.is-active {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  color: #1c281e;
  font-weight: 600;
}

.gl__filter:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
}

/* Count indicator — sage, legible on ivory */
.gl__filter-count {
  text-align: center;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(74, 94, 76, 0.55);
  margin-bottom: var(--space-8, 64px);
}

.gl__filter-count strong {
  font-weight: 600;
  color: rgba(46, 61, 48, 0.82);
}

/* Uniform grid for gallery.html (auto-flow, no explicit placement) */
.gl__grid--uniform {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
}

/* Override ALL explicit nth-child placements for the uniform grid */
.gl__grid--uniform .gl__item {
  grid-column: auto !important;
  grid-row:    auto !important;
}

/* Hidden item (filtered) */
.gl__item--hidden { display: none !important; }

/* ── Caption category label bug-fix ──────────────────────────────
   HTML uses .gl__caption-cat; CSS historically defined
   .gl__caption-category — both now styled identically.
───────────────────────────────────────────────────────────────── */
.gl__caption-cat {
  display: block;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-muted, #C9A96E);
  margin-bottom: 5px;
}

/* ── Filter scroll ≤ 768px ─────────────────────────────────── */
@media (max-width: 768px) {
  .gl__filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
    /* Fade-right edge: visual affordance that row scrolls */
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
  }
  .gl__filters::-webkit-scrollbar { display: none; }
  .gl__filter {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .gl__filters::after {
    content: '';
    flex-shrink: 0;
    width: 40px; /* trailing breathing room past fade */
  }
  .gl__filter-count { margin-bottom: var(--space-5, 40px); }
}

/* ── Small mobile ≤ 480px ───────────────────────────────────── */
@media (max-width: 480px) {
  .gl__grid--uniform {
    grid-template-columns: 1fr;
    grid-auto-rows: 72vw; /* aspect-ratio ~4:3 at full column width */
    gap: 6px;
  }
  .gl__filter { font-size: 10px; padding: 8px 16px; letter-spacing: 0.16em; }
  .gl__filter-count { margin-bottom: var(--space-4, 32px); }
  .gl__caption-title { font-size: 15px; }
  .gl__footer { gap: var(--space-3, 24px); }
}

/* ── Tiny ≤ 375px ───────────────────────────────────────────── */
@media (max-width: 375px) {
  .gl { padding: var(--space-10, 80px) 16px; }
  .gl__grid--uniform { grid-auto-rows: 68vw; gap: 5px; }
  .gl__filter { font-size: 9.5px; padding: 7px 13px; }
  .gl__heading { font-size: clamp(28px, 9vw, 36px); }
  .lb__caption-title { font-size: 18px; }
}