/* News ticker: a slim strip above the nav that scrolls right to left (index.html).
   Pure CSS. The list is in the HTML twice and the track moves by half its width,
   so the loop has no seam. Pauses on hover and keyboard focus; stands still for
   anyone who asks for reduced motion. Loaded after styles.<date>.css. Rename to
   today's date on any change (the zone's 4-hour browser cache, see CLAUDE.md). */
.news-ticker {
  overflow: hidden;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
  line-height: 1;
  color: var(--ink-dim);
}
.news-track {
  display: flex;
  width: max-content;
  animation: news-scroll 70s linear infinite;
}
.news-ticker:hover .news-track,
.news-ticker:focus-within .news-track { animation-play-state: paused; }
.news-items { display: flex; margin: 0; padding: 0; list-style: none; }
.news-items li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 26px 10px 0;
  white-space: nowrap;
}
.news-items li::before {
  content: ""; flex: none;
  width: 5px; height: 5px; margin-right: 16px; border-radius: 50%;
  background: var(--teal); opacity: .7;
}
.news-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal);
}
.news-items strong { color: var(--ink); font-weight: 600; }
.news-items a { color: var(--teal); text-decoration: none; }
.news-items a:hover, .news-items a:focus-visible { text-decoration: underline; }

@keyframes news-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .news-track { animation: none; }
  .news-items[aria-hidden="true"] { display: none; }
  .news-ticker { overflow-x: auto; }
}