/*
 * Band: the ad's voice in pictures. A full-bleed lime strip in --fs-band ink type
 * with inline photo pills. With motion it is one line that scrubs sideways
 * (Scrub Marquee); without JS or with reduced motion it is a wrapped static line.
 */

.band {
  position: relative;
  overflow: clip;
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 100%;
  font-size: clamp(2.25rem, 1.1rem + 3.6vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--ink);
  border-block: 1px solid var(--ink);
}
.band__viewport {
  padding-block: .5em .55em;
}

/* Static line (default, no JS, reduced motion). */
.band__track { padding-inline: var(--gx); }
.band__set {
  max-width: var(--maxw);
  margin-inline: auto;
  text-wrap: balance;
}
.band__set--dup { display: none; }
.band__tie { white-space: nowrap; }

.band__pill {
  display: inline-block;
  height: .78em;
  aspect-ratio: 1.6;
  vertical-align: -.08em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: var(--ink);
  margin-inline: .06em;
}
.band__pill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Marquee layout, only when motion is allowed (set before first paint, so no shift). */
html.motion-ready .band {
  font-size: var(--fs-band);
  line-height: 1;
}
html.motion-ready .band__viewport { padding-block: .35em; }
html.motion-ready .band__track {
  display: flex;
  width: max-content;
  padding-inline: 0;
  transform-origin: 50% 50%;
}
html.motion-ready .band__set {
  flex: none;
  max-width: none;
  margin: 0;
  padding-right: .3em;
  white-space: nowrap;
}
html.motion-ready .band__set--dup { display: block; }