/* Popular Works section background - secondary-200 variation */
    #popular-works {
        position: relative;
        background: var(--secondary-200);
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    /* Make it full-bleed across the viewport */
    #popular-works::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        background: var(--secondary-200);
        z-index: -1;
    }
    
    /* Use small viewport units when supported to avoid scrollbar issues */
    @supports (width: 100svw) {
        #popular-works::before {
            width: 100svw;
        }
    }
    
    /* Dark mode variation */
    [data-theme="dark"] #popular-works,
    [data-theme="dark"] #popular-works::before {
        background: var(--secondary-100);
    }


        /* Mobile styles for music catalog filters */
        @media (max-width: 1024px) {
            /* Match media.html sizing and enable horizontal swipe */
            .category-group { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .button-group {
                overflow-x: auto !important;
                overflow-y: hidden !important;
                scrollbar-width: thin !important; /* Firefox */
                -ms-overflow-style: auto !important; /* Edge/IE */
                gap: .35rem !important;
                padding: .25rem !important;
            }

            /* Visible thin scrollbar as a horizontal indicator */
            .button-group::-webkit-scrollbar { height: 6px !important; display: block !important; }
            .button-group::-webkit-scrollbar-track { background: var(--gray-200); border-radius: 999px; }
            .button-group::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: 999px; }
            .button-group::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }

            /* Subtle line under the group to hint scrollability */
            .category-group { position: relative; padding-bottom: .2rem; }
            .category-group::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height: 2px; background: var(--gray-200); border-radius: 999px; }

            .button-group button { padding:.55rem .9rem !important; font-size: .95rem !important; }

            /* Make ensemble and instrumentation dropdowns side-by-side on mobile */
            .filters-r2 .l {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 0.5rem !important;
                align-items: start !important;
            }

            /* Make dropdowns more compact on mobile */
            .multi-select-dropdown {
                width: 100% !important;
            }

            .multi-select-button { padding: .45rem .7rem !important; font-size: .98rem !important; width: 100% !important; justify-content: space-between !important; }

            .multi-select-text {
                font-size: 0.8rem !important;
                font-weight: 600 !important;
            }

            /* Make dropdown content scrollable on mobile */
            .multi-select-content { max-height: 260px !important; overflow-y: auto !important; scrollbar-width: thin !important; }

            .multi-select-content::-webkit-scrollbar {
                width: 6px !important;
            }

            .multi-select-content::-webkit-scrollbar-track {
                background: var(--gray-100) !important;
                border-radius: 3px !important;
            }

            .multi-select-content::-webkit-scrollbar-thumb {
                background: var(--gray-400) !important;
                border-radius: 3px !important;
            }

            /* Make filter toggle more compact on mobile */
            #filterToggle { padding:.45rem .78rem !important; font-size:.98rem !important; }
        }

        /* Extra small screens */
        @media (max-width: 480px) {
            .filters-r2 .l { grid-template-columns: 1fr !important; gap: 0.25rem !important; }
            .multi-select-button { padding:.4rem .6rem !important; font-size:.9rem !important; }
            .button-group button { padding:.5rem .8rem !important; font-size:.9rem !important; }
        }

        /* Staggered reveal animations for catalog search results - enhanced timing */
        .reveal { opacity: 0; transform: var(--reveal-transform, translateY(12px)); transition: opacity .45s ease, transform .45s ease; transition-delay: var(--reveal-delay, 0s); }
        .reveal.in { opacity: 1; transform: none; }
        /* Fast initial fade-in utility for headings (opacity only, 10ms) */
        .fade-in-initial { opacity: 0; transition: opacity .01s linear; }
        .fade-in-initial.is-visible { opacity: 1; }
        /* Specialized entrance for catalog cards */
        .composition-card.reveal { --reveal-transform: translateY(14px) scale(.985); }
        .composition-row.reveal { --reveal-transform: translateY(10px); }
        /* Dark mode adjustments */
        [data-theme="dark"] .reveal { opacity: 0; }