.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}
.gallery-filter {
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted-gray);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.gallery-filter:hover, .gallery-filter:focus-visible {
  border-color: var(--accent);
  color: var(--off-white);
}
.gallery-filter.is-active {
  background: var(--off-white);
  color: var(--near-black);
  border-color: var(--off-white);
}

/* Masonry via CSS columns — reliable everywhere, no JS layout engine,
   no reflow cost, degrades to a single column on narrow screens. */
.masonry {
  columns: 4;
  column-gap: 0.75rem;
}
@media (max-width: 1100px) { .masonry { columns: 3; } }
@media (max-width: 760px)  { .masonry { columns: 2; column-gap: 0.5rem; } }
@media (max-width: 460px)  { .masonry { columns: 1; } }

.masonry-item {
  display: block;
  break-inside: avoid;
  margin-bottom: 0.75rem;
  border: 1px solid var(--line);
  overflow: hidden;
}
@media (max-width: 760px) { .masonry-item { margin-bottom: 0.5rem; } }

.masonry-item img {
  width: 100%;
  height: auto;
  transition: transform var(--dur-med) var(--ease-cinematic);
}
.masonry-item:hover img,
.masonry-item:focus-visible img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .masonry-item:hover img { transform: none; }
}

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 10, 10, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) ease, visibility 0s linear var(--dur-fast);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}
.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: none;
  border: 1px solid var(--line);
  color: var(--off-white);
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 50%;
}
.lightbox-close:hover, .lightbox-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}