/* Marquee ----------------------------------------------------------- */
/* Two identical groups sit side by side; sliding the track left by one
   group width (-50%) lands on an identical frame, so the loop is seamless. */
.marquee {
  overflow: hidden;
  padding-block: clamp(1rem, 1.9vw, 1.625rem);
  border-block: 2px solid var(--ink-key);
  background: var(--gold);
  color: var(--gold-ink);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-slide var(--marquee-duration, 60s) linear infinite;
}

.marquee__group {
  display: flex;
  flex: none;
  justify-content: space-around;
  min-width: 100vw;
}

.marquee__item {
  flex: none;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.5vw, 2.25rem);
  font-style: italic;
  line-height: 1.25;
  white-space: nowrap;
}

.marquee__item::after {
  content: "·";
  margin-inline: 0.7em;
}

@keyframes marquee-slide {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    display: block;
    width: auto;
    animation: none;
  }

  .marquee__group {
    display: block;
    min-width: 0;
    padding-inline: var(--gutter);
  }

  .marquee__group + .marquee__group,
  .marquee__item + .marquee__item {
    display: none;
  }

  .marquee__item {
    white-space: normal;
  }

  .marquee__item::after {
    content: none;
  }
}