/* A continuous editorial line, with one accessible copy of the text. */
.text-marquee {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: clamp(24px, 3vw, 44px) 0;
  background: var(--paper);
  color: var(--ink);
}
.marquee-viewport {
  width: 100%;
  overflow: hidden;
  /* Space above and below the line preserves Thai vowel and tone marks. */
  padding: .16em 0;
  font: 500 clamp(32px, 5.5vw, 88px)/1.75 var(--body);
}
.marquee-track,
.marquee-group {
  display: flex;
  width: max-content;
  gap: 0;
  padding: 0;
  margin: 0;
}
.marquee-group { flex: 0 0 auto; }
.marquee-copy {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 clamp(32px, 4vw, 72px) 0 0;
  white-space: nowrap;
  letter-spacing: -.025em;
}
.marquee-copy [lang="en"] { font-family: var(--display); }
.text-marquee[data-ready] .marquee-track {
  animation: longgoy-marquee var(--marquee-duration, 60s) linear infinite;
}
.text-marquee[data-rebuilding] .marquee-track { animation: none; }
@keyframes longgoy-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
/* A complete, wrapping sentence before initialization and when motion is off. */
.text-marquee:not([data-ready]) .marquee-track,
.text-marquee[data-static] .marquee-track,
.motion-off .text-marquee .marquee-track { animation: none; transform: none; width: 100%; display: block; }
.text-marquee:not([data-ready]) .marquee-group,
.text-marquee[data-static] .marquee-group,
.motion-off .text-marquee .marquee-group { width: 100%; display: block; }
.text-marquee:not([data-ready]) [data-marquee-duplicate],
.text-marquee[data-static] [data-marquee-duplicate],
.motion-off .text-marquee [data-marquee-duplicate] { display: none; }
.text-marquee:not([data-ready]) .marquee-copy,
.text-marquee[data-static] .marquee-copy,
.motion-off .text-marquee .marquee-copy { padding: 0 var(--gutter); white-space: normal; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .text-marquee .marquee-track { animation: none !important; transform: none; width: 100%; display: block; }
  .text-marquee .marquee-group { width: 100%; display: block; }
  .text-marquee [data-marquee-duplicate] { display: none; }
  .text-marquee .marquee-copy { padding: 0 var(--gutter); white-space: normal; overflow-wrap: anywhere; }
}
