/* Utilities: small single-purpose helpers. They come last and win. */
@layer utilities {
    /* Read by screen readers, not shown. */
    .visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    .skip-link {
        position: absolute;
        left: var(--space-3);
        top: calc(var(--space-8) * -1);
        z-index: var(--z-skip);
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-md);
        background: var(--primary-fill);
        color: var(--on-primary);
        font-weight: var(--weight-semibold);
        text-decoration: none;
    }
    .skip-link:focus { top: var(--space-3); color: var(--on-primary); }

    /* Long-form text keeps a readable line length on wide screens. */
    .panel > p, p.meta { max-width: var(--measure); }

    /* Users who ask for less motion get none: no lifts, fades or pulses. */
    @media (prefers-reduced-motion: reduce) {
        *, ::before, ::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
        a.card:hover { transform: none; }
    }
}