/* The postcard band: native swipe on a phone, a pinned drift along the wall on a big screen. */
.band { padding-bottom: var(--s7); }
.band__head { display: grid; gap: var(--s3); max-width: 1296px; margin-inline: auto; padding-inline: var(--gutter); }
.band__intro { max-width: 52ch; }
.band__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); }
.band__hint { display: flex; align-items: center; gap: var(--s2); color: var(--terra-600); }
.band__hint .icon { width: 1.5rem; height: 1.5rem; }
.band__ctrl { display: flex; align-items: center; gap: var(--s2); }
.counter { min-width: 5.5em; text-align: center; font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-width: 44px; min-height: 44px; padding: 0 var(--s3);
  border: 1.5px solid var(--sea-700); border-radius: 999px; background: var(--white); color: var(--sea-900); cursor: pointer; font: 800 var(--fs-small) / 1 var(--font-sans);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.iconbtn:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .iconbtn:not(:disabled):hover { background: var(--sea-900); color: #fff; border-color: var(--sea-900); } }

.band__viewport { margin-top: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: var(--s5) var(--s6); }
.band__viewport::-webkit-scrollbar { display: none; }
.band__viewport:focus-visible { outline-offset: -4px; }
.band__track { position: relative; display: flex; gap: var(--s4); width: max-content; padding-inline: var(--gutter); }
.band__item { flex: none; display: flex; width: min(74vw, 300px); scroll-snap-align: center; }
.band__item .postcard { width: 100%; }

@media (min-width: 900px) {
  .band { padding-bottom: var(--s9); }
  .band__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--s2); }
  .band__head > .label { grid-column: 1 / 13; }
  .band__head h2 { grid-column: 1 / 9; }
  .band__intro { grid-column: 9 / 13; align-self: end; }
  .band__bar { grid-column: 1 / 13; justify-content: flex-end; margin-top: 0; }
  .band__hint { display: none; }
  .band__item { width: clamp(290px, 22vw, 330px); }
  .band__track { gap: var(--s6); }
}
.band.is-pinned { min-height: 100svh; padding: calc(var(--header-h) + var(--s4)) 0 var(--s4); display: flex; flex-direction: column; justify-content: center; }
.is-pinned .band__viewport { overflow-x: clip; scroll-snap-type: none; padding-block: var(--s4) var(--s3); margin-top: 0; }
.is-pinned .band__item { scroll-snap-align: none; }
.is-pinned .band__track { will-change: transform; }
html:not(.js) .band__ctrl { display: none; }