/* ESFNA Gallery — brand tokens per design-language (no new hues). */
#esfna-gallery {
  --eg-page: #f4ede0;
  --eg-surface: #fbf8f1;
  --eg-cream2: #ece1cc;
  --eg-ink: #2a2520;
  --eg-ink-soft: #6a6157;
  --eg-primary: #8c1a11;
  --eg-primary-hover: #a72018;
  --eg-accent: #d4a548;
  --eg-hairline: rgba(42, 37, 32, .12);
  --eg-hairline-strong: rgba(42, 37, 32, .22);
  --eg-sticky-top: 84px; /* clears the fixed Divi nav; tuned at E2E */
  font-family: Outfit, -apple-system, 'Segoe UI', sans-serif;
  color: var(--eg-ink);
  max-width: 1320px;
  margin: 0 auto;
}
@media (min-width: 981px) { #esfna-gallery { --eg-sticky-top: 110px; } }

/* year switcher */
#esfna-gallery .eg-years {
  display: flex; gap: 8px; padding: 12px 4px; overflow-x: auto;
  position: sticky; top: var(--eg-sticky-top); z-index: 30;
  background: var(--eg-surface); border-bottom: 1px solid var(--eg-hairline);
}
#esfna-gallery .eg-yr {
  flex: 0 0 auto; min-height: 44px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--eg-hairline-strong); background: transparent;
  font: 600 15px/1 Outfit, sans-serif; color: var(--eg-ink); cursor: pointer;
}
#esfna-gallery .eg-yr.eg-on { background: var(--eg-primary); border-color: var(--eg-primary); color: var(--eg-surface); }
#esfna-gallery .eg-yr:hover:not(.eg-on) { border-color: var(--eg-primary); color: var(--eg-primary); }

/* contributor chips */
#esfna-gallery .eg-chips { display: flex; gap: 6px; padding: 10px 4px 2px; overflow-x: auto; }
#esfna-gallery .eg-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 5px 12px 5px 6px; border: 0; border-radius: 999px;
  background: var(--eg-cream2); font: 500 12.5px/1 Outfit, sans-serif;
  color: var(--eg-ink); cursor: pointer;
}
#esfna-gallery .eg-chip.eg-on { background: var(--eg-ink); color: var(--eg-surface); }
#esfna-gallery .eg-av {
  width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: var(--eg-accent); color: var(--eg-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 10px/1 Outfit, sans-serif;
}
#esfna-gallery .eg-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

#esfna-gallery .eg-count { font-size: 12.5px; color: var(--eg-ink-soft); padding: 6px 4px 10px; }
#esfna-gallery .eg-status { font-size: 12.5px; color: var(--eg-ink-soft); padding: 4px; text-align: center; }
#esfna-gallery .eg-fallback { padding: 24px 8px; font-size: 15px; color: var(--eg-ink-soft); }
#esfna-gallery .eg-fallback a { color: var(--eg-primary); font-weight: 600; }

/* grid — justified rows */
#esfna-gallery .eg-grid { padding: 0 0 12px; }
#esfna-gallery .eg-row { display: flex; gap: 3px; margin-bottom: 3px; }
#esfna-gallery .eg-tile {
  position: relative; padding: 0; border: 0; background: var(--eg-cream2);
  overflow: hidden; cursor: pointer; flex: 0 0 auto; display: block;
}
#esfna-gallery .eg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
#esfna-gallery .eg-skel { flex: 1; height: 118px; background: var(--eg-cream2); animation: eg-pulse 1.2s ease-in-out infinite; }
@keyframes eg-pulse { 50% { opacity: .55; } }
#esfna-gallery .eg-vid {
  position: absolute; right: 6px; top: 6px; padding: 3px 8px; border-radius: 999px;
  background: rgba(42, 37, 32, .72); color: var(--eg-surface); font: 700 10px/1 Outfit, sans-serif;
}
#esfna-gallery .eg-hide {
  position: absolute; left: 6px; top: 6px; padding: 3px 7px; border-radius: 6px;
  background: rgba(140, 26, 17, .92); color: var(--eg-surface); font: 700 10px/1 Outfit, sans-serif;
}

/* focus — gold ring (a11y floor) */
#esfna-gallery button:focus-visible,
#esfna-gallery a:focus-visible {
  outline: 3px solid var(--eg-accent); outline-offset: 2px;
}

/* lightbox */
.eg-lb {
  border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
  background: #171310; color: #fbf8f1; display: none;
  flex-direction: column; font-family: Outfit, -apple-system, sans-serif;
}
.eg-lb[open] { display: flex; }
.eg-lb::backdrop { background: rgba(23, 19, 16, .97); }
.eg-lb-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; font-size: 13px; color: rgba(251, 248, 241, .75);
}
.eg-lb-x, .eg-lb-dl {
  background: none; border: 0; color: #fbf8f1; font-size: 20px; line-height: 1;
  min-width: 44px; min-height: 44px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.eg-lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 2px; }
.eg-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.eg-lb-cap { padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.eg-lb-by { display: flex; align-items: center; gap: 10px; }
.eg-lb-by b { font-size: 14px; font-weight: 600; }
.eg-lb-by span { font-size: 12px; color: rgba(251, 248, 241, .65); }
.eg-lb-av { width: 32px; height: 32px; font-size: 13px; }
.eg-lb-act { display: flex; gap: 10px; margin-top: 14px; }
.eg-lb-btn {
  flex: 1; text-align: center; padding: 11px 0; border-radius: 8px;
  border: 1px solid rgba(251, 248, 241, .28); background: none;
  font: 600 12.5px/1 Outfit, sans-serif; color: #fbf8f1; cursor: pointer; text-decoration: none;
}
.eg-lb-btn.eg-primary { background: #8c1a11; border-color: #8c1a11; }
.eg-lb-btn.eg-lb-hide { background: rgba(140, 26, 17, .35); border-color: #8c1a11; flex: 0 0 auto; padding: 11px 14px; }
.eg-lb-btn:focus-visible, .eg-lb-x:focus-visible, .eg-lb-dl:focus-visible { outline: 3px solid #d4a548; outline-offset: 2px; }