/* Announcement bar: one row, text moves right-to-left at a constant speed, repeats with an even gap.
   announce.js sets --tk-w (width of one repeat) and --tk-dur (that width ÷ speed), so long and short texts move equally fast. */
.announce.tk { display: block; padding: 0; overflow: hidden; white-space: nowrap; text-align: left; background: var(--red); color: #fff; font-size: 0.9rem; font-weight: 500; }
.tk-track { display: flex; width: max-content; }
.tk-item { flex: none; padding: 8px var(--tk-gap, 96px) 8px 0; }
.tk-item a { display: inline-flex; gap: 0.5em; align-items: center; }
.tk-item a:hover { text-decoration: underline; }

/* running (JS on, normal motion): the text starts at the left edge and slides one repeat's width, then loops without a jump */
.tk-on .tk-track { animation: tk-run var(--tk-dur, 30s) linear infinite; will-change: transform; }
.tk-on:hover .tk-track, .tk-on:focus-within .tk-track { animation-play-state: paused; }
@keyframes tk-run { to { transform: translate3d(calc(var(--tk-w) * -1), 0, 0); } }

/* not running (no JS, or "reduce motion"): the text stands still, centred, and may wrap */
.announce.tk:not(.tk-on) { white-space: normal; text-align: center; }
.announce.tk:not(.tk-on) .tk-track { width: auto; justify-content: center; }
.announce.tk:not(.tk-on) .tk-item { padding: 8px var(--gut, 20px); }