.gallery {
  padding-top: 4rem;
}

.gallery__header {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 1rem;
  padding: 0 1rem;
  margin-bottom: 4rem;
}

.gallery__title {
  grid-column: 1 / 5;
  justify-self: start;
  margin: 0 0 2rem;
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 7rem;
  letter-spacing: -0.02em;
  line-height: 1;
  position: relative;
  isolation: isolate;
  animation: heading-text-show 1ms 340ms backwards;
}

.gallery__title::after {
  content: '';
  position: absolute;
  inset: 0;
  background: black;
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
  animation: heading-curtain 750ms cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes heading-curtain {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

@keyframes heading-text-show {
  from { color: transparent; }
}

/* Gallery photos: simple fade-in reveal (same as homepage category photos) */
.gallery .photo-grid > .photo-grid__item {
  opacity: 0;
  animation: photo-fade 600ms ease-out forwards;
}

.gallery__perex {
  grid-column: 1 / 4;
  font-size: 2rem;
  line-height: 1.5;
}

/* Mobile: widen the perex to match the homepage bio (.hero__bio spans 1/5) */
@media (max-width: 640px) {
  .gallery__perex {
    grid-column: 1 / 5;
  }
}

.gallery__credits {
  margin-top: 8rem;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 1rem;
}

.credits {
  grid-column: 1 / 5;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1.6;
}

.credits__row {
  display: block;
}

.credits__label:not(:empty)::after {
  content: ':\00a0';
}

.credits a {
  color: inherit;
  text-decoration: none;
  position: relative;
  display: inline-block;
  clip-path: inset(0);
  isolation: isolate;
}

.credits a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: black;
  transform: translateX(-101%);
  z-index: -1;
}

.credits a:hover {
  color: white;
}

.credits a:hover::before {
  transform: translateX(0);
}