/* Gallery: night band; swipe row below 1024px, six in one row from 1024px. */
.gallery { overflow-x: clip; background: var(--color-night); color: var(--color-night-ink); }
.gallery .section-head__title { color: var(--color-white); }
.gallery .section-head__subtitle, .gallery .section-head__eyebrow { color: var(--color-night-ink); }
.gallery :focus-visible { outline-color: var(--color-white); }
.gallery__row {
  display: flex;
  gap: var(--size-gap);
  margin: 0 calc(-1 * var(--size-gutter));
  padding: 8px var(--size-gutter) 28px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--size-gutter);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--color-ink) 28px, var(--color-ink) calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, var(--color-ink) 28px, var(--color-ink) calc(100% - 28px), transparent 100%);
}
.gallery__row.is-start {
  -webkit-mask-image: linear-gradient(to right, var(--color-ink) 0, var(--color-ink) calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, var(--color-ink) 0, var(--color-ink) calc(100% - 28px), transparent 100%);
}
.gallery__row.is-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--color-ink) 28px, var(--color-ink) 100%);
  mask-image: linear-gradient(to right, transparent 0, var(--color-ink) 28px, var(--color-ink) 100%);
}
.gallery__row.is-start.is-end { -webkit-mask-image: none; mask-image: none; }
/* The track under the row is the scroll hint; the native bar is hidden. */
.gallery__row::-webkit-scrollbar { display: none; }
.gallery__item {
  flex: none;
  width: min(58vw, 232px);
  width: min(58vw, 232px, calc((100vh - 120px) * 9 / 19));
  width: min(58vw, 232px, calc((100svh - 120px) * 9 / 19));
  scroll-snap-align: start;
}
.gallery__track {
  width: 64px;
  height: 3px;
  margin: 4px auto 0;
  overflow: hidden;
  border-radius: var(--size-radius-pill);
  background: var(--color-night-ink);
}
.gallery__thumb {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  transform-origin: left center;
  transform: scaleX(var(--p, 0.17));
  transition: transform 120ms linear;
}
.gallery__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gallery__player { position: relative; width: 100%; }
.gallery .gallery__phone { width: 100%; }
.gallery__caption { max-width: 100%; font-size: var(--size-text-sm); line-height: 1.4; text-align: center; color: var(--color-night-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.gallery__caption strong { color: var(--color-white); font-weight: 700; }
.gallery .text-link { color: var(--color-white); }
.gallery__sound {
  position: absolute;
  right: 10%;
  bottom: 6%;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-phone);
  color: var(--color-white);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft);
}
.gallery__sound:active { transform: scale(.92); }
.gallery__sound::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 17px;
  width: 7px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 25%, 45% 25%, 100% 0, 100% 100%, 45% 75%, 0 75%);
}
.gallery__sound::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 14px;
  width: 8px;
  height: 16px;
  border: solid currentColor;
  border-width: 0 2.5px 0 0;
  border-radius: 50%;
  opacity: 0;
}
.gallery__sound[aria-pressed="true"] { background: var(--color-accent-text); }
.gallery__sound[aria-pressed="true"]::after { opacity: 1; }
.gallery__sound[aria-pressed="false"]::after { opacity: 1; transform: rotate(45deg) scaleY(0.01); border-width: 0; }

.gallery__more { margin-top: 8px; text-align: center; }

@media (min-width: 1024px) {
  .gallery__row { margin: 0; padding: 0 0 36px; overflow: visible; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; }
  .gallery__item { width: auto; min-width: 0; }
  .gallery .gallery__phone { max-width: var(--size-phone-sm); margin-inline: auto; }
  .gallery__player { max-width: var(--size-phone-sm); margin-inline: auto; transform: rotate(-1.5deg); }
  .gallery__item:nth-child(even) .gallery__figure { transform: translateY(28px); }
  .gallery__item:nth-child(even) .gallery__player { transform: rotate(1.5deg); }
  .gallery__track { display: none; }
  .gallery__more { margin-top: 28px; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .gallery__player { transition: transform var(--dur-slow) var(--ease-out); }
}
@media (min-width: 1024px) {
  .gallery__item:focus-within .gallery__player { transform: translateY(-6px) rotate(0); }
}
@media (min-width: 1024px) and (hover: hover) {
  .gallery__item:hover .gallery__player { transform: translateY(-6px) rotate(0); }
}
.gallery .text-link:hover { color: var(--color-white); }