/* ============================================================================
   262-php-22-ticker — running strip. Tokens only; label type of the style
   guide (uppercase, --tr-label) at 16px, the site's minimum.
   ========================================================================== */

.x262-ticker {
    overflow: hidden;
    background: var(--ink);
    color: var(--paper);
    border-block: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
}

.x262-ticker__track {
    display: flex;
    gap: 3rem;
    width: max-content;
    margin: 0;
    padding: .75rem 0;
    list-style: none;
    white-space: nowrap;
    font-size: var(--fs-body-sm);
    font-weight: var(--w-heading);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    animation: x262-ticker 36s linear infinite;
}
.x262-ticker__track li::before {
    content: "\25CF";
    margin-right: .75rem;
    color: var(--green-600);
    font-size: .6em;
    vertical-align: middle;
}

/* The items are links: same colour as the strip, underlined on hover. */
.x262-ticker__track a { color: inherit; text-decoration: none; }
.x262-ticker__track a:hover,
.x262-ticker__track a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

/* Hover or keyboard focus pauses the strip, so a link can be clicked. */
.x262-ticker:hover .x262-ticker__track,
.x262-ticker:focus-within .x262-ticker__track { animation-play-state: paused; }

@keyframes x262-ticker { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .x262-ticker__track { animation: none; }
}