/* RUSDRAM — GALLERY. Warm-dark photo wall, masonry-ish, lightbox. */

.page-hero {
  position: relative; padding: calc(var(--header-h) + 4rem) 0 2.4rem;
  background: radial-gradient(120% 80% at 50% 0%, #240a10, var(--black)); text-align: center;
}
.page-hero .kicker { justify-content: center; margin-bottom: 1rem; }
.page-hero h1 { font-family: var(--f-display); font-size: clamp(2.4rem,1.6rem+4vw,4.6rem); color: var(--paper); }
.page-hero p { max-width: 56ch; margin: 1.2rem auto 0; color: var(--smoke-dim); }

.filters { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; padding: 1.8rem 0 0; }
.chip { font-weight: 600; font-size: .8rem; letter-spacing: .06em; padding: .55em 1.1em; border: 1px solid var(--line); border-radius: 999px; color: var(--smoke); transition: all .3s var(--ease); }
.chip:hover { border-color: var(--brass); color: var(--paper); }
.chip.is-active { background: var(--brass); color: #2a1d05; border-color: var(--brass); }

.wall { padding: 2.6rem 0 clamp(4rem,8vw,7rem); background: var(--black); }
.grid {
  columns: 3; column-gap: 1rem;
}
@media (max-width: 900px){ .grid{ columns: 2; } }
@media (max-width: 560px){ .grid{ columns: 1; } }
figure.shot {
  break-inside: avoid; margin: 0 0 1rem; position: relative; overflow: hidden;
  border: 1px solid var(--line); cursor: zoom-in; background: var(--black-2);
}
figure.shot img { width: 100%; display: block; transition: transform .6s var(--ease), filter .4s; }
figure.shot:hover img { transform: scale(1.05); }
figure.shot figcaption {
  position: absolute; inset-block-end: 0; inset-inline: 0; padding: 1.6rem .9rem .7rem;
  font-size: .78rem; color: var(--paper);
  background: linear-gradient(transparent, rgba(8,4,5,.85)); opacity: 0; transition: opacity .35s;
}
figure.shot:hover figcaption { opacity: 1; }

.credits { padding: clamp(3rem,6vw,5rem) 0; background: var(--black-2); }
.credits-box { max-width: 70ch; margin: 0 auto; text-align: center; }
.credits-box h2 { font-family: var(--f-display); color: var(--paper); font-size: 1.6rem; margin-bottom: 1rem; }
.credits-box p { color: var(--smoke-dim); font-size: .92rem; }