painted-catalogue {
    pointer-events: none;

    & > .catalogue {
        display: flex;
        justify-content: left;
        align-items: center;
        gap: 1rem;
        flex-direction: row;
        pointer-events: none;

        @media screen and (max-width: 1100px) {
            font-size: 2rem;

            & > * {
                display: none;
            }

            & .catalogue-arrow,
            & .catalogue-item-active {
                display: initial;
                transition: translate 10000000000000000000s;
            }
        }

        & .catalogue-arrow,
        & .catalogue-divider {
            user-select: none;
        }

        & > .catalogue-item {
            color: var(--desaturated-orange);
            font-size: 1em;
            font-weight: 500;
            pointer-events: initial;

            & a,
            & span {
                --stroke-width: 1px;
                --stroke-blur: 0.5px;
                text-shadow:
                    0 0 1rem var(--white),
                    0 var(--stroke-width) var(--stroke-blur) var(--white),
                    0 calc(-1 * var(--stroke-width)) var(--stroke-blur) var(--white),
                    var(--stroke-width) 0 var(--stroke-blur) var(--white),
                    calc(-1 * var(--stroke-width)) 0 var(--stroke-blur) var(--white),
                    var(--stroke-width) var(--stroke-width) var(--stroke-blur) var(--white),
                    calc(-1 * var(--stroke-width)) calc(-1 * var(--stroke-width)) var(--stroke-blur) var(--white),
                    var(--stroke-width) calc(-1 * var(--stroke-width)) var(--stroke-blur) var(--white),
                    calc(-1 * var(--stroke-width)) var(--stroke-width) var(--stroke-blur) var(--white);
            }

            &.catalogue-item-active {
                & a {
                    color: var(--saturated-orange);
                    text-decoration: underline;
                    font-weight: 700;
                }
            }

            &.catalogue-item-hidden:not(.catalogue-item-active, .catalogue-item-arrow) {
                /* ? wait for browser support */
                /* translate: attr(translate-amount)'px'; */
                opacity: 0;
                pointer-events: none;
            }
        }

        & > .catalogue-divider:last-child {
            visibility: hidden;
        }
    }
}