/* ════════════════ SPOKEN RIBBON ════════════════ */
.ribbon { position: relative; overflow: hidden; padding: 12px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ribbon + .ribbon { margin-top: -6px; }
.rib-track { display: flex; width: max-content; gap: 48px; animation: marquee 70s linear infinite; }
.ribbon.rev .rib-track { animation-direction: reverse; animation-duration: 90s; }
.rib-track span { display: inline-flex; align-items: center; gap: 48px; font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3.2vw, 44px); color: rgba(255,255,255,.3); white-space: nowrap; }
.ribbon.rev .rib-track span { color: rgba(135,189,159,.32); font-size: clamp(20px, 2.2vw, 30px); }
.rib-track .bars { font-size: .7em; opacity: .8; }
.rib-track .bars i { animation: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rib-track { animation: none; } }