/* ================================================================
   COLLECTION — Staggered 3-Column Parallax Grid
   ================================================================ */

.collection {
  padding: var(--space-xl) 0;
  background: var(--dark);
}
.collection__header {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  margin-bottom: var(--space-md);
}
.collection__title {
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 8rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ivory);
  margin-top: 1rem;
}
.collection__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.collection__col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.collection__col--center { margin-top: 5rem; }
.collection__col--right { margin-top: 10rem; }

.collection__item {
  position: relative;
  overflow: hidden;
  background: var(--dark);
}
.collection__img-wrap {
  overflow: hidden;
  aspect-ratio: 3/4;
  position: relative;
  background: var(--dark);
}
.collection__img {
  transition: transform 1s var(--ease-out);
}
.collection__item:hover .collection__img {
  transform: scale(1.06);
}
.collection__caption {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 1rem 0 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s, transform 0.5s var(--ease-out);
}
.collection__item:hover .collection__caption {
  opacity: 1;
  transform: translateY(0);
}

/* ── Reveal utility for images ── */
[data-animate="reveal"] .craft__img,
[data-animate="reveal"] .collection__img,
[data-animate="reveal"] .atelier__panel-img {
  transform: scale(1.2);
}