/* ==========================================================================
   A Little NAMI — horizontal editorial gallery
   ========================================================================== */

.gallery { background: var(--ivory); overflow: hidden; }

.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.gallery__title {
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 4.4vw, 3.8rem);
  line-height: 1.04;
}
.gallery__hint {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-on-ivory-mute);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.gallery__hint::after {
  content: "";
  width: 34px; height: 1px;
  background: currentColor;
  position: relative;
}

.gallery__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding-inline: var(--gutter);
  scroll-snap-type: x proximity;
}
.gallery__viewport::-webkit-scrollbar { display: none; }
.gallery__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.gallery__track {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 1.6vw, 1.75rem);
  width: max-content;
  padding-block: clamp(1.5rem, 3vw, 3rem);   /* headroom for the hover lift */
  /* gentle horizontal drift tied to the section's scroll progress */
  transform: translate3d(calc((var(--p, .5) * 2 - 1) * -3.5rem), 0, 0);
  will-change: transform;
}

.gallery__item {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--nude);
  scroll-snap-align: center;
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-soft);
}
@media (hover: hover) {
  .gallery__item:hover img { transform: scale(1.06); }
}

/* varied sizes and vertical offsets keep the strip editorial, not a carousel */
.gallery__item--tall  { width: clamp(15rem, 22vw, 22rem); aspect-ratio: 3 / 4; }
.gallery__item--wide  { width: clamp(19rem, 30vw, 32rem); aspect-ratio: 4 / 3; }
.gallery__item--small { width: clamp(11rem, 15vw, 15rem); aspect-ratio: 1 / 1; align-self: flex-end; }
.gallery__item--lift  { align-self: flex-start; }
.gallery__item--drop  { align-self: flex-end; }

.gallery__caption {
  flex: none;
  width: clamp(12rem, 16vw, 17rem);
  padding-inline: clamp(.5rem, 1.5vw, 1.5rem);
  color: var(--text-on-ivory-mute);
  font-size: .9375rem;
  line-height: 1.7;
}
.gallery__caption span {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .75rem;
}

@media (max-width: 760px) {
  .gallery__item--tall  { width: 68vw; }
  .gallery__item--wide  { width: 78vw; }
  .gallery__item--small { width: 46vw; }
  .gallery__caption { width: 70vw; }
  .gallery__track { transform: none; }
}