/* ===== Theme (switch .htk--light on <section> for light look) ===== */
.headline-ticker { --h: 48px; --gap: 28px; --speed: 28s; --bg: #111827; --fg: #e5e7eb; --muted:#9ca3af; --brand:#ef4444; --brand-fg:#fff; }
.headline-ticker.htk--light { --bg:#ffffff; --fg:#111827; --muted:#6b7280; --brand:#dc2626; --brand-fg:#ffffff; box-shadow: inset 0 -1px 0 #e5e7eb, inset 0 1px 0 #e5e7eb; }


.headline-ticker { width: 100%; background: var(--bg); color: var(--fg); font: 600 15px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.htk-bar { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: var(--h); overflow: hidden; }
.htk-brand { display:inline-flex; align-items:center; justify-content:center; height: 100%; padding: 0 14px; background: var(--brand); color: var(--brand-fg); letter-spacing: .08em; font-weight: 800; font-size: 13px; }
.htk-viewport { position: relative; height: 100%; mask-image: linear-gradient(90deg, transparent 0, black 40px, black calc(100% - 40px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, black 40px, black calc(100% - 40px), transparent 100%); }
.htk-pause { all: unset; cursor: pointer; padding: 8px 12px; margin-right: 6px; border-radius: 10px; color: var(--fg); opacity: .8; }
.htk-pause:hover { background: rgba(255,255,255,.08); opacity: 1; }


.htk-track { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: var(--gap); white-space: nowrap; animation: htk-scroll var(--speed) linear infinite; will-change: transform; }
.htk-track.clone { left: 100%; }


@keyframes htk-scroll { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(-100%, -50%, 0); } }


.htk-item { display:inline-flex; align-items:center; gap:10px; }
.htk-cat { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); background: rgba(239,68,68,.12); padding: 3px 8px; border-radius: 999px; }
.htk-head { display:inline-flex; gap:8px; align-items:center; }
.htk-head a { color: var(--fg); text-decoration: none; }
.htk-head a:hover { text-decoration: underline; }
.htk-time { font-size: 12px; color: var(--muted); }
.htk-sep { color: var(--muted); opacity:.7; }


/* Pause on hover */
.headline-ticker:hover .htk-track { animation-play-state: paused; }


/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .htk-track { animation: none; position: relative; left: 0; } }


/* Mobile */
@media (max-width:600px){ .headline-ticker{ --h:44px; --gap:18px; } .htk-time{ display:none; } .htk-brand{ padding:0 10px; } }