/* BRASA — the running lines between chapters. Pure CSS, duplicated content is
   aria-hidden so a screen reader hears the phrase once. */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(.9rem, 2vw, 1.6rem);
  border-block: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg);
}
.marquee--bare { border: 0; }

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-run var(--speed, 34s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 1.2em;
  padding-right: 1.2em;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.4vw, 3.6rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__track em {
  font-style: normal;
  color: var(--accent);
  font-size: .55em;
}
.marquee--outline .marquee__track span {
  color: transparent;
  -webkit-text-stroke: 1px var(--cream-30);
}

@keyframes marquee-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}