/* ===== PERFORMANCE INDICATOR STYLES ===== */
        .performance-indicator {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #3b82f6;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 600;
            z-index: 10000;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        /* ===== SCORE OVERLAY STYLES ===== */
        .score-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0);
            z-index: 9999;
            transition: background-color 0.3s ease;
            overflow-y: auto;
        }

        .score-overlay.active {
            display: block;
            background: rgba(0, 0, 0, 0.6);
        }

        .score-overlay-content {
            position: relative;
            background: white;
            max-width: 90vw;
            width: 1400px;
            margin: 30px auto;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            opacity: 0;
            transform: translateY(30px) scale(0.95);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .score-overlay.active .score-overlay-content {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .score-overlay-header {
            position: sticky;
            top: 0;
            background: white;
            padding: 1.2rem 2rem;
            border-bottom: 1px solid var(--gray-200);
            border-radius: 12px 12px 0 0;
            z-index: 10;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 1rem;
        }

        .score-overlay-close {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            background: var(--gray-100);
            border: 1px solid var(--gray-300);
            font-size: 1.25rem;
            cursor: pointer;
            color: var(--gray-700);
            padding: 0.75rem;
            border-radius: 8px;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            z-index: 10;
            font-weight: 600;
        }
        .score-overlay-close:hover {
            background: var(--gray-200);
            color: var(--gray-900);
            border-color: var(--gray-400);
            transform: scale(1.05);
        }

        .score-overlay-title-section {

            margin: 0;
        }
        .score-overlay-main-title { display: none; }
        .score-overlay-composition-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--primary-700);
            margin: 0 0 0.25rem 0;
            line-height: 1.3;
        }
        .score-overlay-instrumentation {
            font-size: 1rem;
            color: var(--gray-600);
            margin: 0;
            font-weight: 500;
        }

        .score-overlay-actions {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 0.2rem;
            margin-left: 1rem;
        }

        /* Composition page: hide Learn More in score overlay (already on the page) */
        .score-overlay-actions .overlay-learn-more-btn { display: none !important; }
        .score-overlay-actions .btn-primary,
        .score-overlay-actions .composition-buy-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            border: 1px solid var(--gray-300);
            background: linear-gradient(180deg, var(--gray-50), var(--gray-100));
            color: var(--gray-800);
            font-weight: 600;
            font-size: 0.9rem;
            line-height: 1.1;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            min-height: 44px;
        }
        .score-overlay-actions .btn-primary:hover,
        .score-overlay-actions .composition-buy-btn:hover:not(:disabled) {
            background: linear-gradient(180deg, var(--gray-100), var(--gray-200));
            border-color: var(--gray-400);
            transform: translateY(-1px);
        }
        .score-overlay-actions .composition-buy-btn {
            background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
            border-color: var(--primary-700);
            color: white;
        }
        .score-overlay-actions .composition-buy-btn:hover:not(:disabled) {
            background: linear-gradient(135deg, var(--primary-700), var(--primary-800));
            border-color: var(--primary-800);
        }
        .score-overlay-actions .composition-buy-btn.free {
            background: linear-gradient(135deg, var(--success-500), var(--success-700));
            border-color: var(--success-700);
        }
        .score-overlay-actions .composition-buy-btn.free:hover:not(:disabled) {
            background: linear-gradient(135deg, var(--success-600), var(--success-800));
            border-color: var(--success-800);
        }
        .score-overlay-actions .composition-buy-btn.contact {
            background: linear-gradient(135deg, #0ea5e9, #0284c7);
            border-color: #0284c7;
        }
        .score-overlay-actions .composition-buy-btn.contact:hover:not(:disabled) {
            background: linear-gradient(135deg, #0284c7, #0369a1);
            border-color: #0369a1;
        }
        .score-overlay-actions .composition-buy-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }

        .score-overlay-audio-controls {
            background: var(--gray-50);
            border: 1px solid var(--gray-200);
            border-radius: 8px;
            padding: 1rem;
            max-width: 100%;
            box-sizing: border-box;
            margin-bottom: 1rem;
        }
        .score-overlay-audio-controls .composition-audio-container {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
        }
        .score-overlay-audio-controls .composition-audio-player {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: 8px;
            padding: 0.75rem;
            margin-bottom: 0.5rem;
        }
        .score-overlay-audio-controls .composition-audio-player audio {
            width: 100%;
            height: 40px;
        }
        .score-overlay-audio-controls .composition-audio-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--primary-700);
            margin: 0 0 0.5rem 0;
        }
        .score-overlay-audio-controls .performance-info {
            color: var(--gray-600);
            font-size: 0.9rem;
            margin: 0.25rem 0;
        }

        .score-navigation-bottom {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            margin-top: 1rem;
            padding: 0.75rem;
            background: var(--gray-50);
            border: 1px solid var(--gray-200);
            border-radius: 8px;
        }
        .score-nav-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            border: 1px solid var(--gray-300);
            background: linear-gradient(180deg, var(--gray-50), var(--gray-100));
            color: var(--gray-700);
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s ease;
            min-height: 36px;
        }
        .score-nav-btn:hover:not(:disabled) {
            background: linear-gradient(180deg, var(--gray-100), var(--gray-200));
            border-color: var(--gray-400);
            color: var(--gray-900);
        }
        .score-nav-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .score-page-info {
            font-weight: 600;
            color: var(--gray-700);
            font-size: 0.9rem;
        }
        /* Different sizing for PDF vs Video */
        .score-pdf-column {
            max-width: 600px;
            margin: 0 auto;
        }
        .score-video-column {
            width: 100%;
            max-width: none;
        }
        .score-video-column .youtube-embed-container,
        .score-video-column video {
            width: 100%;
            max-width: 100%;
        }
        
        /* ===== BASE STYLES (DESKTOP) ===== */
        body {
            background: var(--secondary-200);
            margin: 0;
            overflow-x: hidden;
            width: 100%;
            box-sizing: border-box;
        }
        
        * {
            box-sizing: border-box;
        }

        /* ===== SKELETON LOADING STYLES ===== */
        @keyframes skeleton-shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        #composition-skeleton {
            margin-top: 1.5rem;
            padding: 0 1.5rem;
        }
        
        .skeleton-line,
        .skeleton-cover,
        .skeleton-pill,
        .skeleton-button,
        .skeleton-audio-player {
            background: linear-gradient(90deg, var(--gray-200) 0%, var(--gray-100) 50%, var(--gray-200) 100%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s ease-in-out infinite;
            border-radius: 8px;
        }
        
        .skeleton-cover {
            width: 100%;
            aspect-ratio: 454 / 600;
            border-radius: 16px;
            margin-bottom: 1rem;
            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
        }
        
        .skeleton-year-commission {
            padding: 0.5rem 0;
        }
        
        .skeleton-title-area {
            margin-bottom: 1.5rem;
        }
        
        .skeleton-meta-pills {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }
        
        .skeleton-pill {
            width: 80px;
            height: 2rem;
            border-radius: 999px;
        }
        
        .skeleton-buy-area {
            margin-bottom: 1.5rem;
        }
        
        .skeleton-button {
            width: 180px;
            height: 3rem;
            border-radius: 10px;
        }
        
        .skeleton-content-lines {
            margin-bottom: 2rem;
        }
        
        .skeleton-audio-player {
            width: 100%;
            height: 120px;
            border-radius: 12px;
            margin-bottom: 1rem;
        }
        
        /* Responsive skeleton styles */
        @media (max-width: 768px) {
            #composition-skeleton {
                padding: 0 1rem;
            }
            
            #composition-skeleton .composition-main {
                grid-template-columns: 1fr;
                gap: 2rem;
                padding: 0;
            }
            
            .skeleton-cover {
                max-width: 100%;
            }
            
            .skeleton-meta-pills {
                gap: 0.35rem;
            }
            
            .skeleton-pill {
                width: 70px;
                height: 1.75rem;
            }
            
            .skeleton-button {
                width: 100%;
            }
        }

        /* ===== MAIN LAYOUT ===== */
        .composition-main {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 5rem; /* ✨ INCREASED: Much larger gap to prevent conflicts */
            width: 100%;
            max-width: 100%;
            margin: 1.5rem auto 0; /* ✨ INCREASED: More breathing room at the top */
            padding: 0 1.5rem;
            box-sizing: border-box;
            justify-content: start;
            align-items: start;
        }

        /* ✨ REMOVED: composition-detail-card - no longer needed with simplified structure */

        .composition-cover-container {
            width: 362px;
            min-width: 220px;
            max-width: 454px;
            flex-shrink: 0;
            margin-bottom: 0.75rem; /* Add spacing between cover and year-commission */
        }
        /* Space below the under-cover resources mini-cards */
        #resources-card-under-cover { margin-top: 1rem; }

        /* ===== Composition page: Collections card alignment fixes ===== */
        #collections-card-placeholder .collections-card { margin-left: 0; margin-right: 0; }
        #collections-card-placeholder .collections-container { 
            gap: 1rem !important; 
            display: flex !important; 
            flex-wrap: wrap !important; 
        }
        #collections-card-placeholder #collections-container { 
            gap: 1rem !important; 
            display: flex !important; 
            flex-wrap: wrap !important; 
        }
        #collections-card-placeholder .collections-card-header,
        #collections-card-placeholder .collections-card-content,
        #collections-card-placeholder .collection-info,
        #collections-card-placeholder .collection-compositions,
        #collections-card-placeholder .collection-actions {
            box-sizing: border-box;
            padding-left: 1rem; /* exact shared inset */
            padding-right: 1rem; /* exact shared inset */
        }
        #collections-card-placeholder .collections-card-header { border: none; }
        #collections-card-placeholder .collections-card-content { margin-top: -1px; }
        /* Tighter vertical rhythm inside expanded content on composition page */
        #collections-card-placeholder .collection-actions { padding: .45rem 0 .55rem 0; }
        #collections-card-placeholder .collection-info { padding: .6rem 0 .45rem 0; }
        #collections-card-placeholder .collection-compositions { padding: .6rem 0 .75rem 0; }

        /* Media wrapper for cover image to host overlay */
        .composition-cover-media {
            position: relative;
            width: 100%;
            border-radius: 16px;
            overflow: hidden; /* ensure overlay respects rounded corners */
            border: 3px solid white;
            transition: all 0.2s ease;
            box-shadow: 5px 5px 5px -2px rgba(2,6,23,.1);
        }

        .composition-cover {
            width: 100%;
            height: auto;
            aspect-ratio: 454 / 600;
            object-fit: cover;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.13);
            background: var(--gray-200);
            max-width: 454px;
        }

        /* Remove any unwanted borders/outlines around the cover or placeholder */
        .composition-cover-container img.composition-cover,
        .composition-cover-container .feature-media.silo-placeholder {
            border: none !important;
            outline: none !important;
            box-shadow: none;
            border-radius: 16px;
            display: block;
        }
        
        /* Hover overlay on the main composition cover */
        .composition-cover-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, rgba(2,6,23,.85) 0%, rgba(2,6,23,.55) 35%, rgba(2,6,23,.85) 100%);
            color: #fff;
            border-radius: 16px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .18s ease;
            z-index: 2;
            border: 3px solid var(--primary-500);
        }
        .composition-cover-media:hover .composition-cover-overlay,
        .composition-cover-media:focus-within .composition-cover-overlay {
            opacity: 1;
            pointer-events: auto;
            border: 3px solid var(--primary-500);
            border-radius: 16px;
        }


        .cover-overlay-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .35rem;
            padding: .5rem .9rem;
            border-radius: 999px;
            background: #0f172a;
            color: #fff;
            font-weight: 800;
            font-size: .95rem;
            text-decoration: none;
            border: 1px solid rgba(255,255,255,.22);
            box-shadow: 0 8px 22px rgba(2,6,23,.28);
            cursor: pointer;
        }
        .cover-overlay-pill:hover { transform: translateY(-1px); }
        .cover-overlay-pill:focus { outline: 2px solid var(--primary-300); outline-offset: 2px; }
        
        /* ===== FROSTED ACTIONS (reusable) ===== */
        .frosted-btn,
        .frosted-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .4rem;
            padding: .5rem .95rem;
            border-radius: 999px;
            font-weight: 800;
            line-height: 1;
            text-decoration: none;
            -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
            background: rgba(255,255,255,.7);
            border: 1px solid rgba(255,255,255,.55);
            color: var(--gray-900);
            box-shadow: 0 6px 18px rgba(2,6,23,.12), 0 1px 0 rgba(255,255,255,.5) inset;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
            cursor: pointer;
            user-select: none;
        }
        .frosted-chip { padding: .35rem .7rem; font-size: .8rem; font-weight: 700; }
        .frosted-btn .icon, .frosted-chip .icon { font-weight: 900; font-size: .95rem; line-height: 1; }
        .frosted-btn:hover, .frosted-chip:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(2,6,23,.16); }
        .frosted-btn:active, .frosted-chip:active { transform: translateY(0); }

        /* Color variants (tinted frosts) */
        .frosted--watch { border-color: rgba(59,130,246,.35); color: #1d4ed8; }
        .frosted--score { border-color: rgba(124,77,255,.35); color: #6d28d9; }
        .frosted--similar { border-color: rgba(16,185,129,.35); color: #047857; }
        .frosted--neutral { border-color: rgba(255,255,255,.55); color: var(--gray-900); }

        /* Dark mode adjustments */
        body.dark-mode .frosted-btn,
        body.dark-mode .frosted-chip { background: rgba(17,24,39,.5); border-color: rgba(255,255,255,.18); color: #e5e7eb; }
        body.dark-mode .frosted--watch { background: rgba(59,130,246,.22); color: #93c5fd; }
        body.dark-mode .frosted--score { background: rgba(124,77,255,.22); color: #c4b5fd; }
        body.dark-mode .frosted--similar { background: rgba(16,185,129,.22); color: #86efac; }

        /* Ensure the cover overlay pill can opt into frosted look cleanly */
        .cover-overlay-pill.frosted-btn {
            background: rgba(255,255,255,.72);
            border-color: rgba(255,255,255,.55);
            color: var(--primary-800);
        }
        .cover-overlay-pill.frosted-btn.frosted--score { color: #6d28d9; }
        .cover-overlay-pill.frosted-btn.frosted--watch { color: #1d4ed8; }
        .cover-overlay-pill.frosted-btn.frosted--similar { color: #047857; }



        .composition-content-container {
            flex: 1 1 0;
            min-width: 0;
            margin-top: 0; /* ✨ RESET: With larger gap, no need for negative margin */
            display: flex;
            flex-direction: column;
            gap: 0rem;
        }

        /* ===== TOP FRAME (Title + Meta + Buy/Dedication + Nav only) ===== */
        .composition-top-frame {
            background: #ffffff54;
            border: 3px solid #ffffff;
            border-radius: 12px;
            padding: .5rem .75rem .5rem .75rem;
            box-shadow: 5px 5px 5px -2px rgba(2,6,23,.1);
            margin-bottom: 0.4rem;
            /* Keep this scoped to the right column; do not include audio/news */
        }
        /* Maintain breathing room between streaming embeds and related news inside the frame */
        .composition-top-frame .composition-audio-container,
        .composition-top-frame .composition-audio-player { margin-bottom: .65rem; }
        .composition-top-frame .composition-related-news-section { margin-top: .65rem; }
        @media (max-width: 768px) {
            .composition-top-frame { padding: 1rem; border-radius: 10px; }
            .composition-top-frame .composition-audio-container,
            .composition-top-frame .composition-audio-player { margin-bottom: .5rem; }
            .composition-top-frame .composition-related-news-section { margin-top: .5rem; }
        }
        
        /* ✨ REMOVED: Short instruments container no longer exists */

        .composition-info {
            flex: 1 1 0;
            display: flex;
            flex-direction: column;
            align-self: flex-start;
            align-items: flex-start;
            width: 100%;
            text-align: left;
        }

        /* ===== TYPOGRAPHY & TITLE SECTION ===== */
        .composition-title-container {
            display: grid;
            grid-template-columns: 1fr auto; /* title left, meta/buttons right */
            align-items: start;
            width: 100%;
            gap: 2rem;
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: 2px solid var(--gray-300);
            min-height: fit-content;
        }

        .composition-title-section {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            min-width: 0;
            margin-top: 0;
            padding-top: 0;
        }

        .composition-meta-container {
            margin-bottom: 0;

        }
        .composition-meta-container {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: flex-start;
            text-align: right;
            min-width: fit-content;
            margin-top: 0; /* align with title baseline */
            padding-top: 0;
        }

        .composition-title {
            background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-size: 2.4rem;
            font-weight: 300;
            letter-spacing: -0.02em;
            line-height: 1.1; /* tighter to align with buttons */
            margin: 0; /* precise alignment */
            padding-bottom: 0.5rem; /* less gap to align with buttons */
        }

        .composition-instrument {
            font-size: 1.3rem;
            color: var(--gray-500);
            font-weight: 400;
            margin-top: -8px;
        }

        .composition-meta {
            font-size: 0.98rem;
            font-weight: 500;
            color: var(--gray-800);
            margin: 0; /* ✨ RESET: Remove all margins for alignment */
            line-height: 1.2; /* ✨ MATCH: Same line height as title for alignment */
        }

        .composition-short-instruments {
            font-size: 0.85rem; /* ✨ SMALLER: Less prominent */
            font-weight: 400; /* ✨ LIGHTER: Less attention-grabbing */
            color: var(--gray-700); /* ✨ LIGHTER: More subtle color */
            margin-top: 0;
            opacity: 0.8; /* ✨ FAINT: Additional subtlety */
        }

        /* ===== SHORT INSTRUMENTS: Now only in meta container on the right ===== */
        
        /* ✨ LOW-PROFILE DIFFICULTY BADGE ===== */
        .composition-difficulty-badge {
            background: var(--gray-100); /* ✨ SUBTLE: Light gray background */
            color: var(--gray-600); /* ✨ MUTED: Subtle text color */
            padding: 0.2rem 0.6rem; /* ✨ COMPACT: Smaller padding */
            border-radius: 12px; /* ✨ SUBTLE: Less rounded */
            font-size: 0.75rem; /* ✨ SMALL: Less prominent */
            font-weight: 400; /* ✨ LIGHT: Normal weight */
            border: 1px solid var(--gray-200); /* ✨ FAINT: Subtle border */
            opacity: 0.8; /* ✨ FADED: Additional subtlety */
            display: inline-block;
            margin: 0;
        }

        /* ===== CONTENT SECTIONS ===== */
        .composition-buy-button-wrapper {
            margin: 0; /* ✨ Using parent gap for spacing */
        }
        
        /* ===== DEDICATION SECTION ===== */
        .composition-dedication-wrapper {
            margin: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            width: 100%;
            gap: 0.5rem;
            text-align: left;
        }
        
        .composition-buy-button-wrapper {
            flex: 0 0 auto;
            display: flex;
            justify-content: flex-start;
        }
        .composition-dedication {
            flex: 0 0 auto;
            text-align: right;
            font-size: 0.9rem;
            color: var(--gray-600);
            font-style: italic;
        }
        
        .composition-links-container {
            margin: 0; /* ✨ Using parent gap for spacing */
            background: transparent; /* cleaner backdrop for frosted actions */
            border: 0;
            border-radius: 10px;
            padding: 0.25rem 0; /* align left edge with audio/title */
        }

        .layout-builder-nav {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            margin-top: -10px;
            gap: 0; /* ✨ REMOVED: No gaps between buttons for compact layout */
        }

        .layout-nav-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 0.8rem;
            font-size: 0.85rem;
            font-weight: 500;
            border-radius: 6px;
            transition: all 0.2s ease;
            cursor: pointer;
            border: none;
            text-decoration: none;
            border: 3px solid var(--gray-100);
            color: var(--gray-700);
        }

        .layout-nav-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        /* Ensure frosted style wins over legacy nav styles */
        .layout-nav-btn.frosted-btn {
            border: 1px solid rgba(255,255,255,.55);
            background: rgba(255,255,255,.7);
            -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
            color: var(--gray-900);
            box-shadow: 0 6px 18px rgba(111, 111, 111, 0.12), 0 1px 0 rgba(255,255,255,.5) inset;
            font-weight: 800;
        }
        .layout-nav-btn.frosted-btn.frosted--watch { background: rgba(246, 249, 255, 0.893); border-color: rgba(59,130,246,.35); color: #1d4ed8; }
        .layout-nav-btn.frosted-btn.frosted--score { background: rgba(248, 245, 254, 0.939); border-color: rgba(124,77,255,.35); color: #6d28d9; }
        .layout-nav-btn.frosted-btn.frosted--similar { background: rgba(244, 253, 250, 0.919); border-color: rgba(16,185,129,.35); color: #047857; }

        .composition-buy-button-wrapper {
            margin-bottom: 0.25rem;
            display: flex;
            align-items: center;
        }

        .composition-buy-btn {
            display: inline-block;
            font-size: 1.15rem;
            font-weight: 800;
            border-radius: 16px;
            background: linear-gradient(135deg, #4f8dfd 0%, #7c4dff 100%);
            color: #ffffff;
            border: none;
            cursor: pointer;
            transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
            text-decoration: none;
            text-align: center;
            position: relative;
            overflow: hidden;
            padding: 0.6rem 1.2rem;
            min-height: 40px;
            box-shadow: 0 8px 18px rgba(124,77,255,.22), 0 2px 6px rgba(2,6,23,.10);
            -webkit-font-smoothing: antialiased;
        }

        .composition-buy-btn:hover {
            background: linear-gradient(135deg, #5a9bff 0%, #8a5cff 100%);
            transform: translateY(-2px);
            box-shadow: 0 14px 28px rgba(124,77,255,.35), 0 4px 10px rgba(2,6,23,.14);
        }

        .composition-buy-btn:active {
            transform: translateY(0px) scale(.99);
            box-shadow: 0 8px 18px rgba(124,77,255,.28), 0 2px 6px rgba(2,6,23,.14);
        }

        /* Free to Download state (page-level) */
        .composition-buy-btn.free {
            background: linear-gradient(135deg, var(--success-500), var(--success-700));
            border-color: var(--success-700);
            color: #fff;
        }
        .composition-buy-btn.free:hover:not(:disabled) {
            background: linear-gradient(135deg, var(--success-600), var(--success-800));
            border-color: var(--success-800);
            box-shadow: 0 6px 20px rgba(34, 197, 94, 0.25);
        }

        /* Contact to Purchase state (page-level) - Blue styling */
        .composition-buy-btn.contact {
            background: linear-gradient(135deg, #0ea5e9, #0284c7);
            border-color: #0284c7;
            color: #fff;
            box-shadow: 0 8px 18px rgba(14, 165, 233, 0.22), 0 2px 6px rgba(2, 6, 23, 0.10);
        }
        .composition-buy-btn.contact:hover:not(:disabled) {
            background: linear-gradient(135deg, #0284c7, #0369a1);
            border-color: #0369a1;
            box-shadow: 0 14px 28px rgba(14, 165, 233, 0.35), 0 4px 10px rgba(2, 6, 23, 0.14);
        }

        /* ===== YEAR-COMMISSION CONTAINER ===== */
        .composition-year-commission-container {
            margin: 0; /* Using parent gap for spacing */
            /* padding: 0.75rem 1rem; */
            background: var(--blue-50);
            border: 1px solid var(--blue-100);
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--gray-500);
            display: none; /* Hidden by default, shown when year or commission data exists */
            justify-content: space-between;
            align-items: center;
            width: 100%; /* ✨ FIXED: Use full width instead of fixed width */
            max-width: 454px;
            flex-shrink: 0;
        }

        .composition-year-commission-container:not(:empty) {
            display: flex; /* Show as flex when it has content */
        }

        .composition-year-display {
            font-weight: 600;
            color: var(--blue-900);
        }

        .composition-commission-display {
            
            text-align: right;
            flex-shrink: 0;
            font-style: italic;
            font-weight: 400;
        }

        .composition-commission {
            font-weight: 500;
        }

        /* ===== AUDIO PLAYER ===== */
        .composition-audio-container {
            width: 100%;
            background: transparent; /* container stays clean */
            border: none;
            border-radius: 0;
            padding: 0;
            box-shadow: none;
        }

        .composition-audio-player {
            margin-bottom: 0.5rem;
            background: transparent;
            border-radius: 6px;
            padding: 0.4rem 0;
            box-shadow: none;
            border: none;
            min-height: 60px;
            display: flex;               /* ensure child reordering */
            flex-direction: column;      /* stack title, audio, metadata */
        }

        .composition-audio-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--gray-700);
            margin-bottom: 0.25rem; /* tighter */
            text-align: left;
        }

        .composition-audio-player audio {
            width: 100%;
            height: 40px;
            outline: none;
            border-radius: 10px;
            background-color: #fff !important;
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
            color-scheme: light; /* force light controls in dark mode */
            margin-top: 0.25rem;
        }
        /* Match news-article white native controls */
        .composition-audio-player audio::-webkit-media-controls-panel { background-color: #fff !important; }
        .composition-audio-player audio::-webkit-media-controls-enclosure { border-radius: 10px !important; background-color: #fff !important; }
        .composition-audio-player .audio-white-wrapper { background: #fff !important; border-radius: 10px !important; }
        .composition-audio-player audio::-webkit-media-controls-timeline,
        .composition-audio-player audio::-webkit-media-controls-volume-slider,
        .composition-audio-player audio::-webkit-media-controls-mute-button,
        .composition-audio-player audio::-webkit-media-controls-play-button,
        .composition-audio-player audio::-webkit-media-controls-current-time-display,
        .composition-audio-player audio::-webkit-media-controls-time-remaining-display { background-color: transparent !important; }
        body.dark-mode .composition-audio-player audio { background: #fff !important; }
        /* Composition-only audio nav and metadata spacing + adjusted performed-by */
        .composition-page .audio-nav-divider { display: none !important; height: 0 !important; margin: 0 !important; border: 0 !important; }
        .composition-page .audio-nav-container { padding-top: 0.15rem !important; margin-top: 0 !important; }
        .composition-page .performance-info { color: var(--gray-700) !important; font-weight: 500 !important; font-size: 0.95rem !important; }

        /* Composition-only: force audio control WHITE like news article */
        .composition-page .composition-audio-player audio { background-color: var(--gray-0, #fff) !important; }
        .composition-page .composition-audio-player audio::-webkit-media-controls-panel { background-color: var(--gray-0, #fff) !important; }
        .composition-page .composition-audio-player audio::-webkit-media-controls-enclosure { background-color: var(--gray-0, #fff) !important; }
        .composition-page .audio-white-wrapper { background: var(--gray-0, #fff) !important; }

        .composition-audio-metadata {
            font-size: 0.75rem;
            color: var(--gray-400);
            margin-top: 0;               /* no top margin */
            margin-bottom: 0;            /* tighten */
            line-height: 1.3;
            background: transparent;
            padding: 0;                  /* remove extra padding */
            border-radius: 4px;
            order: 3;                     /* place after audio */
            margin-left: 0.75rem;        /* slight indent */
        }

        /* Explicit ordering for title and audio so metadata stays below */
        .composition-audio-player .composition-audio-title { order: 1; }
        .composition-audio-player audio { order: 2; }

        /* ===== PROGRAM NOTES & VIDEOS ===== */
        .program-video-section {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            width: 100vw;
            max-width: none;
            margin: 3rem 0 0 0;
            margin-left: calc(-50vw + 50%);
            padding: 3rem 2.5rem;
            box-sizing: border-box;
            background: var(--primary-100);
            border-top: 2px solid var(--gray-300);
            border-bottom: 2px solid var(--gray-300); /* remove bottom border per design */
            box-shadow: inset 0 0 20px rgba(99, 102, 241, 0.05);
            position: relative;
            left: 0;
            right: 0;
            overflow-x: hidden;
        }

        .program-notes-column {
            flex: 1;
            min-width: 0;
            border: 3px solid white;
            border-radius: 12px;
            background: #ffffffa8;
            padding: 0 1.5rem 1.5rem 1.5rem;
            box-shadow: 5px 5px 5px -2px rgba(2,6,23,.1);
        }

        .videos-column {
            flex: 1;
            min-width: 0;
            background: #ffffffa8;
            border: 3px solid white;
            border-radius: 12px;
            box-shadow: 5px 5px 5px -2px rgba(2,6,23,.1);
        }

        .page-content-container {
            width: 100%;
            border-top: 1px solid rgba(99, 102, 241, 0.1);
        }

        /* Video loading animation */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* ===== PAGE CONTENT SECTION ===== */
        .page-content-section {
            width: 100%;
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 2rem;
        }

        .page-content-container {
            background: transparent;
            padding: 2rem 0 0 0;
            border: none;
            border-radius: 0;
            box-shadow: none;
        }

        .page-content-wrapper {
            line-height: 1.72;
            color: var(--gray-900);
            font-size: 0.99rem;
            letter-spacing: 0.002em;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        .page-content-wrapper h1 {
            color: var(--gray-950);
            margin: 1.6rem 0 .7rem;
            letter-spacing: -.012em;
            line-height: 1.25;
            font-weight: 700;
        }
        .page-content-wrapper h2 {
            color: var(--gray-900);
            margin: 1.4rem 0 .65rem;
            letter-spacing: -.01em;
            line-height: 1.3;
            font-weight: 700;
        }
        .page-content-wrapper h3 {
            color: var(--gray-850);
            margin: 1.2rem 0 .6rem;
            letter-spacing: -.008em;
            line-height: 1.35;
            font-weight: 600;
        }
        .page-content-wrapper h4,
        .page-content-wrapper h5,
        .page-content-wrapper h6 {
            color: var(--gray-800);
            margin-top: 1.1rem;
            margin-bottom: 0.6rem;
        }

        .page-content-wrapper p {
            margin: .8rem 0;
            line-height: 1.72;
        }

        .page-content-wrapper ul,
        .page-content-wrapper ol {
            margin: .65rem 0;
            padding-left: 2rem;
        }
        .page-content-wrapper li {
            margin: .35rem 0;
            line-height: 1.68;
        }
        .page-content-wrapper li p {
            margin: .3rem 0;
        }
        .page-content-wrapper strong, .page-content-wrapper b {
            font-weight: 700;
            color: var(--gray-950);
        }
        .page-content-wrapper em, .page-content-wrapper i {
            font-style: italic;
        }
        .page-content-wrapper a {
            color: var(--primary-600);
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 2px;
            transition: color .15s ease;
        }
        .page-content-wrapper a:hover {
            color: var(--primary-700);
            text-decoration-thickness: 1.5px;
        }
        /* Page Content: convert file links to button-style anchors */
        .page-file-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            border: 1px solid var(--gray-300);
            background: linear-gradient(180deg, var(--gray-50), var(--gray-100));
            color: var(--gray-800);
            font-weight: 600;
            font-size: 0.9rem;
            line-height: 1.1;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-decoration: none !important;
            min-height: 44px;
            margin: 0 .35rem .35rem 0; /* tiny separation between buttons */
        }
        .page-file-button:hover {
            background: linear-gradient(180deg, var(--gray-100), var(--gray-200));
            border-color: var(--gray-400);
            transform: translateY(-0.5px);
            color: var(--gray-900);
            box-shadow: 0 2px 8px rgba(0,0,0,.06);
        }
        .page-file-button:focus-visible { outline: 2px solid var(--primary-300); outline-offset: 2px; }
        .page-file-button .icon { font-weight: 900; font-size: .95rem; line-height: 1; }
        /* Base margin handles spacing; neutralize extra left spacing */
        .page-file-button + .page-file-button { margin-left: 0; }

        /* Page Content: improve heading and paragraph legibility */
        .page-content-wrapper { font-size: 1.03rem; line-height: 1.75; letter-spacing: 0.003em; }
        .page-content-wrapper h3 { font-size: 1.35rem; font-weight: 800; }
        .page-content-wrapper code {
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: .9rem;
            background: var(--gray-100);
            padding: .15rem .4rem;
            border-radius: 4px;
            color: var(--gray-800);
            border: 1px solid var(--gray-200);
        }
        .page-content-wrapper blockquote {
            border-left: 3px solid var(--primary-500);
            padding: .7rem 0 .7rem 1.5rem;
            margin: 1.3rem 0;
            font-style: italic;
            color: var(--gray-700);
            background: var(--gray-50);
            border-radius: 0 8px 8px 0;
            line-height: 1.68;
        }
        .page-content-wrapper blockquote p:first-child {
            margin-top: 0;
        }
        .page-content-wrapper blockquote p:last-child {
            margin-bottom: 0;
        }

        .composition-notes-container {
            padding: 0rem 0rem;
            text-align: left;
        }
        
        /* Apply centered max-width when videos column is hidden (Rule 2) */
        .program-video-section.videos-hidden .composition-notes-container {
            max-width: 1800px;
            margin: 0 auto;
            padding: 0;
        }

        /* ===== FIX: EMPTY NOTES SPACING ISSUE ===== */
        /* When there are no notes but videos exist, limit video container size */
        .program-video-section.notes-empty .videos-column {
            max-width: 800px;
            margin: 0 auto;
            flex: 0 1 auto; /* Don't grow to fill space */
        }
        
        /* Center video content when notes are empty */
        .program-video-section.notes-empty .videos-column #composition-video-container-main {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* Reduce overall section height when notes are empty */
        .program-video-section.notes-empty {
            min-height: auto;
            padding: 2rem 2.5rem; /* Reduced from 3rem */
        }

        .composition-program-notes h3 {
            color: var(--gray-800);
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
            font-weight: 600;
        }
        

        .program-notes-content {
            line-height: 1.72;
            color: var(--gray-900);
            font-size: 1.01rem;
            letter-spacing: 0.002em;
            font-weight: 400;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }
        .program-notes-content p {
            margin: .8rem 0;
            line-height: 1.72;
            word-spacing: -0.001rem;
        }
        .program-notes-content h1 { margin: 1.6rem 0 .7rem; letter-spacing: -.012em; line-height: 1.25; font-weight: 700; color: var(--gray-950); }
        .program-notes-content h2 { margin: 1.4rem 0 .65rem; letter-spacing: -.01em; line-height: 1.3; font-weight: 700; color: var(--gray-900); }
        .program-notes-content h3 { margin: 1.2rem 0 .6rem; letter-spacing: -.008em; line-height: 1.35; font-weight: 600; color: var(--gray-850); }
        .program-notes-content ul, .program-notes-content ol { margin: .65rem 0; padding-left: 2rem; }
        .program-notes-content li { margin: .35rem 0; line-height: 1.72; word-spacing: -0.001rem;}
        .program-notes-content li p { margin: .3rem 0; }
        .program-notes-content strong, .program-notes-content b { font-weight: 600; color: var(--gray-950); }
        .program-notes-content em, .program-notes-content i { font-style: italic; }
        .program-notes-content a { color: var(--primary-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color .15s ease; }
        .program-notes-content a:hover { color: var(--primary-700); text-decoration-thickness: 1.5px; }
        .program-notes-content code { font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: .9rem; background: var(--gray-100); padding: .15rem .4rem; border-radius: 4px; color: var(--gray-800); border: 1px solid var(--gray-200); }
        .program-notes-content blockquote { border-left: 3px solid var(--primary-500); padding: .7rem 0 .7rem 1.5rem; margin: 1.3rem 0; font-style: italic; color: var(--gray-700); background: var(--gray-50); border-radius: 0 8px 8px 0; line-height: 1.68; }
        .program-notes-content blockquote p:first-child { margin-top: 0; }
        .program-notes-content blockquote p:last-child { margin-bottom: 0; }
        .performance-notes-content {
            line-height: 1.72;
            color: var(--gray-900);
            font-size: 1.01rem;
            letter-spacing: 0.002em;
            font-weight: 400;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }
        .performance-notes-content p {
            margin: .8rem 0;
            line-height: 1.72;
            word-spacing: -0.001rem;
        }
        .performance-notes-content h1 { margin: 1.6rem 0 .7rem; letter-spacing: -.012em; line-height: 1.25; font-weight: 700; color: var(--gray-950); }
        .performance-notes-content h2 { margin: 1.4rem 0 .65rem; letter-spacing: -.01em; line-height: 1.3; font-weight: 700; color: var(--gray-900); }
        .performance-notes-content h3 { margin: 1.2rem 0 .6rem; letter-spacing: -.008em; line-height: 1.35; font-weight: 600; color: var(--gray-850); }
        .performance-notes-content ul, .performance-notes-content ol { margin: .65rem 0; padding-left: 2rem; }
        .performance-notes-content li { margin: .35rem 0; line-height: 1.72; word-spacing: -0.001rem;}
        .performance-notes-content li p { margin: .3rem 0; }
        .performance-notes-content strong, .performance-notes-content b { font-weight: 600; color: var(--gray-950); }
        .performance-notes-content em, .performance-notes-content i { font-style: italic; }
        .performance-notes-content a { color: var(--primary-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color .15s ease; }
        .performance-notes-content a:hover { color: var(--primary-700); text-decoration-thickness: 1.5px; }
        .performance-notes-content code { font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: .9rem; background: var(--gray-100); padding: .15rem .4rem; border-radius: 4px; color: var(--gray-800); border: 1px solid var(--gray-200); }
        .performance-notes-content blockquote { border-left: 3px solid var(--primary-500); padding: .7rem 0 .7rem 1.5rem; margin: 1.3rem 0; font-style: italic; color: var(--gray-700); background: var(--gray-50); border-radius: 0 8px 8px 0; line-height: 1.68; }
        .performance-notes-content blockquote p:first-child { margin-top: 0; }
        .performance-notes-content blockquote p:last-child { margin-bottom: 0; }
        
        /* View Score CTA under notes */
        .view-score-cta { margin-top: .75rem; }
        .view-score-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            border: 1px solid var(--gray-300);
            background: linear-gradient(180deg, var(--gray-50), var(--gray-100));
            color: var(--gray-800);
            font-weight: 600;
            font-size: 0.9rem;
            line-height: 1.1;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            min-height: 44px;
        }
        .view-score-btn:hover {
            background: linear-gradient(180deg, var(--gray-100), var(--gray-200));
            border-color: var(--gray-400);
            transform: translateY(-1px);
        }

        .composition-video-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--gray-600);
            text-align: left;
            font-style: bold;
            margin: 0; /* remove extra margins */
        }

        .performance-info {
            font-size: 13px;
            font-weight: 400;
            color: var(--gray-400);
            text-align: left;
            margin: 0; /* remove extra margins */
        }
        /* Composition page: refined caption colors + tuned sizes */
        .program-video-section .composition-video-title { color: #0f172a; font-size: 15px; font-weight: 700; }
        .program-video-section .performance-info { color: #1f2937; font-size: 15px; font-weight: 500; }
        /* Subtle divider between metadata and navigation */
        #composition-video-container-main .video-nav-divider { display: none !important; height: 0 !important; border: 0 !important; margin: 0 !important; }

        /* Composition page: minimalist multi-movement navigation */
        #composition-video-container-main .video-nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: .75rem;
            margin-top: 0; /* no gap above divider */
        }
        #composition-video-container-main .video-nav-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .35rem;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            border: 1px solid var(--gray-300);
            background: linear-gradient(180deg, var(--gray-50), var(--gray-100));
            color: var(--gray-800);
            font-weight: 600;
            font-size: 0.9rem;
            line-height: 1.1;
            cursor: pointer;
            transition: all 0.2s ease;
            min-height: 36px;
        }
        #composition-video-container-main .video-nav-btn:hover {
            background: linear-gradient(180deg, var(--gray-100), var(--gray-200));
            border-color: var(--gray-400);
            transform: translateY(-1px);
        }
        #composition-video-container-main .video-nav-info {
            font-size: 0.95rem;
            color: var(--gray-700);
            font-weight: 700;
        }

        /* Nudge metadata closer to the video slightly */
        #composition-video-container-main .video-metadata-section { margin-top: 0; display: flex; align-items: baseline; gap: .75rem; justify-content: space-between; }
        /* Multi-movement: title left, performed-by right */
        #composition-video-container-main .video-metadata-section.has-title { justify-content: space-between; }
        /* Single-video: align performed-by to the right */
        #composition-video-container-main .video-metadata-section.single { justify-content: flex-end; }
        /* Neutralize global media-styles.css card chrome on composition page only */
        .composition-page .composition-audio-player,
        .composition-page .composition-video-player { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
        .composition-page .composition-audio-container { border: none !important; box-shadow: none !important; }
        .composition-page .composition-audio-container { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }

        /* ===== SCORE OVERLAY VIDEO/METADATA CENTERING ===== */
        /* Center the entire video area and its metadata inside the overlay */
        #scoreOverlay #composition-score-video-container,
        #scoreOverlay .composition-score-video-container {
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        #scoreOverlay #composition-score-video-container .youtube-embed-container,
        #scoreOverlay .composition-score-video-container .youtube-embed-container,
        #scoreOverlay #composition-score-video-container .composition-video-player,
        #scoreOverlay .composition-score-video-container .composition-video-player { 
            margin-left: auto; 
            margin-right: auto; 
        }
        /* Center metadata rows under the video in the overlay */
        #scoreOverlay .video-metadata-section {
            margin-top: 0;
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: .75rem;
            text-align: center;
        }
        #scoreOverlay .composition-video-title,
        #scoreOverlay .performance-info { text-align: center; }
        /* Center the nav controls under the video in the overlay */
        #scoreOverlay .video-nav-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: .75rem;
            margin-top: 0;
        }
        #scoreOverlay .video-nav-divider { 
            display: block; height: 1px; background: var(--gray-200); border: 0; margin: 0 auto; max-width: 1000px; 
        }
        #scoreOverlay .video-nav-btn { 
            display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--gray-300); background: linear-gradient(180deg, var(--gray-50), var(--gray-100)); color: var(--gray-800); font-weight: 600; font-size: 0.9rem; line-height: 1.1; cursor: pointer; transition: all 0.2s ease; min-height: 36px; 
        }
        #scoreOverlay .video-nav-btn:hover { 
            background: linear-gradient(180deg, var(--gray-100), var(--gray-200)); border-color: var(--gray-400); transform: translateY(-1px); 
        }
        #scoreOverlay .video-nav-info { font-size: 0.95rem; color: var(--gray-700); font-weight: 700; }
        @media (max-width: 768px) {
            #scoreOverlay .video-nav-container { gap: .5rem; }
            #scoreOverlay .video-nav-info { font-size: 0.9rem; }
        }

        /* ===== SCORE OVERLAY: Performed-by placement and tone ===== */
        #scoreOverlay .score-video-metadata .performance-info,
        #scoreOverlay .composition-video-metadata .performance-info {
            color: var(--gray-600);
            font-weight: 500;
        }
        /* Place metadata under the embedded score/video and indent slightly */
        #scoreOverlay .score-video-metadata-section,
        #scoreOverlay .composition-score-video-player .score-video-metadata,
        #scoreOverlay .composition-video-metadata {
            margin-left: 0.75rem;
            margin-top: 0.4rem;
            text-align: left;
        }

        /* ===== SCORE OVERLAY: Darker audio control surface (overlay only) ===== */
        #scoreOverlay .composition-audio-player .audio-white-wrapper,
        #scoreOverlay .score-overlay-audio-controls .audio-white-wrapper {
            background: var(--gray-200) !important;
            border-radius: 10px !important;
            border: 1px solid var(--gray-300) !important;
            overflow: hidden;
            line-height: 0;
        }
        #scoreOverlay .composition-audio-player audio,
        #scoreOverlay .score-overlay-audio-controls audio {
            background-color: var(--gray-200) !important;
            color-scheme: light;
            display: block;
        }
        #scoreOverlay .composition-audio-player audio::-webkit-media-controls-panel,
        #scoreOverlay .score-overlay-audio-controls audio::-webkit-media-controls-panel { background-color: var(--gray-200) !important; }
        #scoreOverlay .composition-audio-player audio::-webkit-media-controls-enclosure,
        #scoreOverlay .score-overlay-audio-controls audio::-webkit-media-controls-enclosure { background-color: var(--gray-200) !important; }

        /* ===== SCORE OVERLAY: Hide audio title by default; show only for multi-movement ===== */
        #scoreOverlay .composition-audio-title { display: none !important; }

        /* ===== RELATED WORKS: Let individual cards animate with stagger (no container animation) ===== */
        #related-works-placeholder .related-works-carousel-container {
            opacity: 0 !important;
            pointer-events: none !important;
        }
        #related-works-placeholder.has-cards .related-works-carousel-container {
            opacity: 1 !important;
            pointer-events: auto !important;
            transition: opacity 200ms ease !important;
        }

        @media (max-width: 768px) {
            /* Related Works mirrors program-video on mobile: no full-bleed */
            #related-works-placeholder { 
                width: 100vw !important; /* full-bleed background */
                margin: 0 !important; 
                margin-left: calc(-50vw + 50%) !important; /* center to viewport */
                padding: 1.25rem 1rem !important; 
                border-radius: 0 !important; 
                background: var(--primary-200) !important; /* slightly lighter on mobile */
            }
            #composition-video-container-main .video-nav-container {
                gap: .5rem;
            }
            #composition-video-container-main .video-nav-info {
                font-size: 0.9rem;
            }
        }



        .page-content-container {
            background: transparent;
            padding: 0rem 10rem 0 10rem;
        }

        .page-content-wrapper pre {
            background: var(--gray-100);
            padding: 1rem;
            border-radius: 6px;
            overflow-x: auto;
            margin: 1.1rem 0;
        }

        .page-content-wrapper hr {
            border: none;
            border-top: 1px solid var(--gray-300);
            margin: 2rem 0;
        }

        /* ===== NOTION FORMATTING STYLES ===== */
        .notion-bold {
            font-weight: 700;
        }

        .notion-italic {
            font-style: italic;
        }

        .notion-underline {
            text-decoration: underline;
        }

        .notion-strikethrough {
            text-decoration: line-through;
        }

        .notion-code {
            background: var(--gray-100);
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
        }

        .notion-link {
            color: var(--primary-600);
            text-decoration: underline;
        }

        .notion-link:hover {
            color: var(--primary-700);
        }

        /* ===== ENHANCED NOTION PARAGRAPH SPACING ===== */
        .notion-paragraph {
            margin-bottom: 1rem;
        }

        .notion-paragraph:last-child {
            margin-bottom: 0;
        }

        /* Ensure proper spacing for program and performance notes */
        .composition-program-notes .notion-paragraph,
        .composition-performance-notes .notion-paragraph {
            margin-bottom: 1rem;
        }

        .composition-program-notes .notion-paragraph:last-child,
        .composition-performance-notes .notion-paragraph:last-child {
            margin-bottom: 0;
        }

        /* ===== AGGRESSIVE PARAGRAPH SPACING FOR PROGRAM/PERFORMANCE NOTES ===== */
        .composition-program-notes *,
        .composition-performance-notes * {
            margin-bottom: 0;
        }

        .composition-program-notes p,
        .composition-performance-notes p,
        .composition-program-notes div,
        .composition-performance-notes div {
            margin-bottom: 1rem !important;
        }

        .composition-program-notes p:last-child,
        .composition-performance-notes p:last-child,
        .composition-program-notes div:last-child,
        .composition-performance-notes div:last-child {
            margin-bottom: 0 !important;
        }

        /* Target specific Notion content classes */
        .composition-program-notes [class*="notion"],
        .composition-performance-notes [class*="notion"] {
            margin-bottom: 1rem !important;
        }

        .composition-program-notes [class*="notion"]:last-child,
        .composition-performance-notes [class*="notion"]:last-child {
            margin-bottom: 0 !important;
        }

        /* ===== PDF WATERMARK STYLES ===== */
        .score-iframe-container {
            position: relative;
            width: 100%;
            height: 700px;
            border-radius: 12px;
            overflow: hidden;
        }

        .pdf-watermark {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
        }

        .watermark-text {
            position: absolute;
            font-family: 'Arial', sans-serif;
            font-weight: bold;
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.4);
            text-align: center;
            line-height: 1.2;
            transform: rotate(-45deg);
            white-space: nowrap;
            user-select: none;
            pointer-events: none;
        }

        .watermark-text.for-perusal {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
        }

        .watermark-text.all-rights {
            top: calc(50% + 2rem);
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            font-size: 2.2rem;
        }

        /* Responsive watermark sizing */
        @media (max-width: 768px) {
            .watermark-text {
                font-size: 2.2rem;
            }
            
            .watermark-text.all-rights {
                font-size: 1.6rem;
                margin-top: 1.5rem;
            }
        }

        @media (max-width: 480px) {
            .watermark-text {
                font-size: 1.8rem;
            }
            
            .watermark-text.all-rights {
                font-size: 1.3rem;
                margin-top: 1rem;
            }
        }

        /* ===== SCORES SECTION ===== */
        .scores-section {
            display: flex;
            flex-direction: row;
            width: 100%;
            max-width: none;
            flex-wrap: wrap;
            align-items: flex-start;
            position: relative;
            z-index: 1;
            justify-content: center;
            margin-top: 1rem;
        }

        /* ===== SCORE CONTROL BUTTONS ===== */
        .score-toggle-container {
            width: auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 0.5rem;
            margin: 0;
            padding: 0;
            flex-wrap: wrap;
        }

        .score-toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            background: linear-gradient(135deg, #6b7280, #4b5563); /* Lower saturation primary for hidden */
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
        }

        .score-toggle-btn:hover {
            background: linear-gradient(135deg, #4b5563, #374151);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
        }

        /* Active state for tab-style selection */
        .score-toggle-btn.active {
            background: var(--gray-900);
            box-shadow: 0 2px 8px rgba(17, 24, 39, 0.25);
        }

        /* Higher saturation orange for "in view" state */
        .score-toggle-btn.in-view {
            background: linear-gradient(135deg, #f97316, #ea580c);
            box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2);
        }

        .score-toggle-btn.in-view:hover {
            background: linear-gradient(135deg, #ea580c, #dc2626);
            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
        }

        .score-toggle-btn:active {
            transform: translateY(0);
        }

        .score-toggle-btn .toggle-icon {
            transition: all 0.3s ease;
            font-size: 1.1rem;
            line-height: 1;
            font-weight: bold;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .score-toggle-btn.toggled .toggle-icon {
            transform: scale(1.1);
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* Smooth color transitions for state changes */
        .score-toggle-btn {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* ===== RESIZABLE SCORE LAYOUT SYSTEM ===== */
        .score-layout-container {
            display: flex;
            align-items: stretch;
            width: 100%;
            position: relative;
            min-height: 0; /* Remove fixed minimum height */
            justify-content: center; /* center content when single column is shown */
        }

        /* Add minimum height only when content is visible */
        .score-layout-container:has(.score-carousel-container.show),
        .score-layout-container:has(.score-video-column:not(.hidden)) {
            min-height: 400px;
        }

        /* Fallback for browsers that don't support :has() */
        .score-layout-container.has-content {
            min-height: 400px;
        }

        .score-pdf-column {
            flex: 1 1 60%; /* Default: Larger space for PDF */
            display: flex;
            flex-direction: column;
            min-width: 300px; /* Increased minimum for better proportions */
            max-width: none; /* Remove max-width constraint */
            transition: flex-basis 0.2s ease; /* Smoother transition */
        }

        .score-carousel-container {
            opacity: 0;
            transform: translateX(-20px);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            pointer-events: none;
            height: 0;
            overflow: hidden;
        }

        .score-carousel-container.show {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
            height: auto;
            overflow: visible;
        }

        /* ===== RESIZABLE DIVIDER ===== */
        .score-divider {
            width: 8px;
            background: var(--gray-200);
            position: relative;
            cursor: col-resize;
            transition: all 0.3s ease;
            display: none; /* Hidden by default */
            align-items: center;
            justify-content: center;
            margin: 0 0.5rem;
            opacity: 1;
            transform: scaleX(1);
            z-index: 10; /* Ensure divider is above content */
            user-select: none; /* Prevent text selection during resize */
        }

        /* Hide divider when either column is hidden */
        .score-layout-container.pdf-only .score-divider,
        .score-layout-container.video-only .score-divider {
            display: none !important;
            opacity: 0;
            transform: scaleX(0);
            width: 0;
            margin: 0;
        }

        /* Proper divider handle hiding */
        .score-divider.divider-handle-hidden {
            display: none !important;
            opacity: 0;
            transform: scaleX(0);
            width: 0;
            margin: 0;
            pointer-events: none;
        }

        .score-divider:hover {
            background: var(--primary-300);
        }

        .score-divider.resizing {
            background: var(--primary-500);
            box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
        }

        /* Add visual feedback during resize */
        .score-layout-container.resizing .score-pdf-column,
        .score-layout-container.resizing .score-video-column {
            transition: none; /* Disable transitions during resize for immediate feedback */
        }
        
        /* Prevent content interference during resize */
        .score-layout-container.resizing {
            pointer-events: none; /* Disable pointer events on content during resize */
        }
        
        .score-layout-container.resizing .score-divider {
            pointer-events: auto; /* Re-enable pointer events on divider */
        }
        
        /* Specifically disable iframe interaction during resize */
        .score-layout-container.resizing iframe {
            pointer-events: none !important;
            user-select: none !important;
        }
        
        /* Disable YouTube iframe interaction during resize */
        .score-layout-container.resizing .youtube-embed-container iframe {
            pointer-events: none !important;
            user-select: none !important;
        }

        .divider-handle {
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .divider-grip {
            width: 4px;
            height: 40px;
            background: var(--gray-400);
            border-radius: 2px;
            position: relative;
        }

        .divider-grip::before,
        .divider-grip::after {
            content: '';
            position: absolute;
            left: 50%;
            width: 2px;
            height: 8px;
            background: var(--gray-400);
            border-radius: 1px;
        }

        .divider-grip::before {
            top: 8px;
            transform: translateX(-50%);
        }

        .divider-grip::after {
            bottom: 8px;
            transform: translateX(-50%);
        }

        .score-divider:hover .divider-grip,
        .score-divider.resizing .divider-grip {
            background: var(--primary-600);
        }

        .score-divider:hover .divider-grip::before,
        .score-divider:hover .divider-grip::after,
        .score-divider.resizing .divider-grip::before,
        .score-divider.resizing .divider-grip::after {
            background: var(--primary-600);
        }

        .score-video-column {
            flex: 1 1 40%; /* Default: Smaller space for video */
            display: flex;
            flex-direction: column;
            padding-left: 1rem;
            padding-right: 1rem;
            min-width: 300px; /* Increased minimum width for video column */
            transition: flex-basis 0.2s ease; /* Smoother transition */
            /* ✨ ADDED: Initial state for smooth animation */
            opacity: 0;
            transform: translateX(20px);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), flex-basis 0.2s ease;
        }

        .score-video-column.full-width {
            flex: 1 1 100%;
            max-width: 1000px;
            margin: 0 auto; /* Center the video when in full width */
            padding-left: 0;
            padding-right: 0;
        }

        .score-video-column.hidden {
            opacity: 0;
            transform: translateX(20px);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            pointer-events: none;
            height: 0;
            overflow: hidden;
        }

        .score-pdf-column.full-width {
            flex: 1 1 100%;
            max-width: 1000px;
            margin: 0 auto; /* Center the PDF when in full width */
            padding-left: 0;
            padding-right: 0;
        }

        /* Better centering for PDF-only layout */
        .score-layout-container.pdf-only .score-pdf-column {
            flex: 1 1 100%;
            max-width: 800px; /* Reduced from 1000px for better proportions */
            margin: 0 auto;
            padding-left: 0;
            padding-right: 0;
            display: block; /* Changed from flex to block for easier navigation */
            text-align: center;
        }
        
        /* Hide video column completely in PDF-only state */
        .score-layout-container.pdf-only .score-video-column {
            display: none !important;
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
        }

        /* Better centering for video-only layout */
        .score-layout-container.video-only .score-video-column {
            flex: 1 1 100%;
            max-width: 1200px; /* Increased for better video sizing */
            margin: 0 auto;
            padding-left: 0;
            padding-right: 0;
            display: block; /* Changed from flex to block for easier navigation */
            text-align: center;
            /* ✨ ADDED: Smooth slide-in animation from right (opposite PDF) */
            opacity: 1;
            transform: translateX(0);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            animation: videoSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
        }

        /* ✨ ADDED: Keyframe animation for video slide-in */
        @keyframes videoSlideIn {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* Hide PDF column completely in video-only state */
        .score-layout-container.video-only .score-pdf-column {
            display: none !important;
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
        }

        /* ✨ ADDED: Animation for video column when both are visible */
        .score-layout-container:not(.pdf-only):not(.video-only) .score-video-column {
            opacity: 1;
            transform: translateX(0);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        /* Ensure video content is properly sized in video-only mode */
        .score-layout-container.video-only .composition-score-video-player {
            width: 100%;
            max-width: 100%;
        }
        
        /* Ensure YouTube embeds are properly sized in video-only mode */
        .score-layout-container.video-only .youtube-embed-container {
            width: 100%;
            max-width: 100%;
        }

        .scores-section h3 {
            color: var(--primary-600);
            font-size: 1.3rem;
            font-weight: 700;
            margin: 0 1.5rem 1.5rem 0;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--primary-200);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            text-align: center;
            justify-content: center;
        }
        .score-navigation-bottom {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            margin-top: 1rem;
            padding: 0.75rem;
            background: var(--gray-50);
            border: 1px solid var(--gray-200);
            border-radius: 8px;
        }

        /* ===== VIDEO PLAYERS ===== */
        .composition-video-container {
            width: 100%;
            padding: 0 1rem;
            box-sizing: border-box;
        }



        .composition-video-player {
            margin: 1.5rem .5rem;
            padding: 0; /* Composition page: remove inner padding/card */
            background: transparent; /* No background card */
            border-radius: 0;
            border: none; /* No border card */
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            align-items: stretch;
        }

        .youtube-embed-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 56.25%;
            margin: 0;
            border-radius: 0; /* ✨ REMOVED: No border radius for seamless look */
            overflow: hidden;
            box-shadow: none; /* ✨ REMOVED: No box shadow for seamless look */
        }

        .youtube-embed-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
            border-radius: 0; /* ✨ REMOVED: No border radius for seamless look */
        }

        /* ===== RELATED WORKS: FULL-BLEED RAIL ===== */
        #related-works-placeholder {
            width: 100vw;
            max-width: none;
            margin: 0;
            margin-left: calc(-50vw + 50%);
            padding: 1.25rem 2rem;
            box-sizing: border-box;
            background: var(--primary-400);
            border-top: 1px solid var(--gray-700);
            border-bottom: none;
            box-shadow: inset 0 0 20px rgba(99, 102, 241, 0.05);
            border-radius: 0;
        }
        
        /* Flatten internal container chrome injected by the component */
        #related-works-placeholder .related-works-carousel-container {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 auto !important;
            border-radius: 0 !important;
        }
        #related-works-placeholder .related-works-carousel-component {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 !important;
            border-radius: 0 !important;
            max-width: none !important;
            width: 100% !important;
        }
        /* Nuke any stray wrapper whites from direct children except the label */
        #related-works-placeholder > div:not(.related-works-label) {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
        }
        /* Hide legacy titles from older implementations (keep component h3 visible) */
        #related-works-placeholder .related-works-title,
        #related-works-placeholder .related-works-heading,
        #related-works-placeholder .related-compositions-title { display: none !important; }
        /* Carousel layout tweaks to feel like an inline rail */
        #related-works-placeholder .related-compositions-carousel {
            gap: 1rem !important;
            padding: .37rem 0 0 0 !important;
            align-items: stretch !important;
            justify-content: flex-start !important; /* left align cards */
        }
        #related-works-placeholder .related-works-carousel { justify-content: flex-start !important; background: transparent !important; }
        /* Neutralize any global center alignment */
        #related-works-placeholder .related-works-carousel { text-align: left !important; }

        /* Composition page: ensure classy header style definitely applies */
        #related-works-placeholder h3.related-works-carousel-title {
            display: block !important;
            width: fit-content !important;
            margin: 0 0 0 0 !important;
            text-align: left !important;
            transform: translateX(0) !important;
            color: #ffffff !important;
            opacity: .98 !important;
            font-weight: 900 !important;
            font-size: 1.6rem !important;
            letter-spacing: .06rem !important;
            text-transform: none !important;
            /* Stroke via multi-layered text-shadow for cross-browser support */
            text-shadow:
              0 1px 0 rgba(0,0,0,.55),
              1px 0 0 rgba(0,0,0,.55),
              -1px 0 0 rgba(0,0,0,.55),
              0 -1px 0 rgba(0,0,0,.55),
              1px 1px 0 rgba(0,0,0,.55),
              -1px 1px 0 rgba(0,0,0,.55),
              1px -1px 0 rgba(0,0,0,.55),
              -1px -1px 0 rgba(0,0,0,.55),
              0 2px 6px rgba(0,0,0,.25) !important;
            background: transparent !important;
            border: 0 !important;
            position: relative !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
        #related-works-placeholder h3.related-works-carousel-title::after { content: none !important; }

        .related-composition-error {
            color: var(--error-600);
        }
        main {
                margin-bottom: 0;
            }

        /* ===== ENHANCED RELATED WORKS ANIMATIONS ===== */
        /* Ensure animations work by adding them to the main page CSS */
        
        /* Desktop: Maintain 8.5 x 11 aspect ratio for related works cards */
        @media (min-width: 769px) {
            #related-works-placeholder .related-composition-card {
                width: 240px !important;
                min-width: 240px !important;
                max-width: 240px !important;
                flex: 0 0 240px !important;
            }
            #related-works-placeholder .related-composition-image,
            #related-works-placeholder .related-composition-card img,
            #related-works-placeholder .related-composition-card .related-composition-image {
                width: 100% !important;
                height: 310px !important; /* 240 * (11/8.5) = 310.59px, rounded to 310px */
                object-fit: cover !important;
                object-position: center !important;
                display: block !important;
                border: 0 !important;
                outline: 0 !important;
            }
            /* Ensure placeholder divs maintain consistent height on desktop */
            #related-works-placeholder .related-composition-image .feature-media,
            #related-works-placeholder .related-composition-image .catalog-placeholder-target,
            #related-works-placeholder .related-composition-image > div {
                width: 100% !important;
                height: 100% !important;
                border-radius: 0 !important;
                border: none !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                background: transparent !important;
                position: absolute !important;
                inset: 0 !important;
            }
        }
        
        .related-composition-card {
            transition: transform .6s ease, box-shadow .2s ease, border-color .12s ease;
            box-shadow: 5px 5x 5px -2px rgba(2,6,23,.1) !important;
            background: linear-gradient(145deg, var(--gray-50) 0%, var(--gray-100) 100%) !important;
            border-color: var(--gray-200) !important;
        }

        .related-composition-card:hover {
            transform: translateY(-7px) !important;
            box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(59, 130, 246, 0.15) !important;
            background: linear-gradient(145deg, var(--gray-50) 0%, var(--primary-50) 100%) !important;
            border-color: var(--primary-300) !important;
        }

        .related-composition-card:hover .related-composition-title {
            color: var(--primary-700) !important;
        }

        .related-composition-card:hover .related-composition-image {
            transform: scale(1) !important;
        }

        .related-composition-card:hover .related-composition-title::before {
            opacity: 1 !important;
            transform: scale(1) !important;
            color: var(--primary-600) !important;
        }

        .related-composition-image {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        .related-composition-title {
            transition: color 0.3s ease !important;
            text-align: center;
            margin-top: 0;
            display:none; /* hide redundant title under cards */
        }

        .related-composition-instrumentation {
            transition: color 0.3s ease !important;
            text-align: center;
            margin-top: 0;
            display:none; /* hide redundant instrumentation under cards */
        }

        .related-composition-title::before {
            transition: all 0.3s ease !important;
        }

        /* Hover overlay for related works cards to match popular compositions */
        .related-composition-card { position: relative; }
        .related-composition-card .composition-hover-overlay {
            position: absolute !important; inset: 0 !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important;
            padding: .75rem .9rem !important; background: linear-gradient(180deg, rgba(2,6,23,.85) 0%, rgba(2,6,23,.65) 35%, rgba(2,6,23,.9) 100%) !important;
            color: #fff !important; opacity: 0 !important; transition: opacity .18s ease !important; pointer-events: none !important; border-radius: inherit !important; z-index: 3 !important;
        }
        .related-composition-card:hover .composition-hover-overlay { opacity: 1 !important; pointer-events: auto !important; }
        .related-composition-card .composition-overlay-content { width: 100%; height: 100%; display: flex; flex-direction: column; }
        .related-composition-card .ov-title { font-weight: 900; letter-spacing: -0.01em; margin: 0; line-height: 1.05; font-size: 1.0rem; }
        .related-composition-card .ov-instrument { margin-top: .25rem; font-weight: 700; font-size: .85rem; color: #e6edf7; }
        .related-composition-card .ov-row { display:flex; gap:.45rem; margin-top:.5rem; align-items:center; flex-wrap:wrap; }
        .related-composition-card .ov-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .55rem; border-radius:999px; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); font-weight:800; font-size:.75rem; }
        .related-composition-card .ov-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; margin-top:auto; padding:.4rem .7rem; border-radius:10px; background:#fff; color:#0f172a; text-decoration:none; font-weight:800; }
        
        /* ===== OTHER ARRANGEMENTS STYLES ===== */
        .other-version-card {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: 8px;
            padding: 1.5rem;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .other-version-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-color: var(--primary-300);
        }
        
        .other-version-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--gray-800);
            margin-bottom: 0.5rem;
        }
        
        .other-version-instrumentation {
            font-size: 0.9rem;
            color: var(--gray-600);
        }

        .composition-program-notes h3 {
                color: var(--primary-700);
            }

            .composition-program-notes strong {
                color: var(--primary-700);
            }

                 /* ===== TABLET STYLES (1024px and below) ===== */
         @media (max-width: 1024px) {
             .composition-main {
                 grid-template-columns: 1fr;
                 gap: 1rem;
                 padding: 0 1rem;
                 margin: 1.5rem auto 0;
             }

             .composition-cover-container {
                 width: 100%;
                 max-width: 350px;
                 margin: 0 auto;
             }

             .composition-title-container {
                 flex-direction: column;
                 align-items: ce;
                 gap: 0.25rem;
             }  
             .composition-title-section {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                min-width: 0;
                margin-top: 0;
                padding-top: 0;
             }

             .composition-title {
                font-size: 2rem;
             }  

             .composition-meta-container {
                 align-items: center;
                 text-align: center;
                 width: 100%;
             }

          .composition-buy-button-wrapper {
                margin-bottom: 0.25rem;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
            }
            /* Restore centered column layout for dedication wrapper on tablet */
            .composition-dedication-wrapper {
                flex-direction: column-reverse;
                justify-content: center;
                align-items: center;
                text-align: center;
            }
            .composition-dedication {
                text-align: center;
            }

            .composition-links-container {
                margin: 0;
                display: flex;
                background: transparent;
                border: 0;
                border-radius: 10px;
                padding: 0.5rem;
                justify-content: center;
            }

            .composition-notes-container {
                padding: 1.5rem;
                text-align: left;
            }
            
            .composition-program-notes h3 {
                color: var(--primary-700);
            }

            .composition-program-notes strong {
                color: var(--primary-700);
            }

            /* Ensure paragraph spacing on tablet */
            .composition-program-notes p,
            .composition-performance-notes p {
                margin: .8rem 0;
            }
            /* Tablet typography refinements */
            .program-notes-content {
                font-size: 0.99rem;
                line-height: 1.72;
            }
            .performance-notes-content {
                font-size: 0.99rem;
                line-height: 1.72;
            }

            /* Page content responsive adjustments */

            .page-content-container {
                padding: 1.5rem;
            }

            .page-content-wrapper {
                font-size: 0.98rem;
                line-height: 1.72;
            }

            .page-content-wrapper h1 {
                font-size: 1.75rem;
                margin: 1.5rem 0 .65rem;
                letter-spacing: -.011em;
            }

            .page-content-wrapper h2 {
                font-size: 1.5rem;
                margin: 1.35rem 0 .6rem;
                letter-spacing: -.009em;
            }

            .page-content-wrapper h3 {
                font-size: 1.25rem;
                margin: 1.15rem 0 .55rem;
                letter-spacing: -.007em;
            }
            .page-content-wrapper p { margin: .75rem 0; }
            .page-content-wrapper ul, .page-content-wrapper ol { margin: .6rem 0; }
            .page-content-wrapper li { margin: .32rem 0; }
            .page-content-wrapper blockquote { padding: .68rem 0 .68rem 1.4rem; margin: 1.2rem 0; }

            /* Related compositions responsive adjustments */
            .related-compositions-carousel {
                gap: 1rem;
                padding: 0.5rem 0;
            }

            .scores-section {
                flex-direction: column;
                gap: 1.5rem;
                padding: 1rem;
                margin: 2rem auto;
                max-width: 100%;
            }

            .score-toggle-container {
                margin-bottom: 0.75rem;
                gap: 0.5rem;
                flex-wrap: nowrap;
                justify-content: center;
            }

            .score-toggle-btn {
                padding: 0.6rem 1.2rem;
                font-size: 0.85rem;
            }

            .score-layout-container {
                flex-direction: column;
                gap: 1rem;
                justify-content: center;
                align-items: center;
            }

            .score-divider {
                display: none; /* Hide divider on mobile/tablet */
            }

            .score-pdf-column,
            .score-video-column {
                flex: none;
                min-width: 0;
                max-width: 100%;
                width: 100%;
                margin: 0 auto;
                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            }

            .score-carousel-container:not(.show) {
                height: 0;
                overflow: hidden;
            }

            .score-video-column.full-width {
                flex: 1 1 100%;
                max-width: 100%;
                margin: 0 auto;
            }

            .score-pdf-column.full-width {
                flex: 1 1 100%;
                max-width: 100%;
                margin: 0 auto;
            }

            .program-video-section {
                display: flex !important; /* maintain flex for proper ordering */
                flex-direction: column !important; /* stack vertically */
                width: 100vw !important; /* full-bleed */
                margin-left: calc(-50vw + 50%) !important;
                left: auto !important;
                right: auto !important;
                padding: 2rem 1rem !important; /* more generous padding for readability */
                gap: 1.5rem !important; /* proper spacing between sections */
                box-sizing: border-box;
            }

            /* Force children to 100% width and stack properly */
            .program-video-section > .videos-column,
            .program-video-section > .program-notes-column,
            .program-video-section > .page-content-container {
                width: 100% !important;
                max-width: 100% !important;
                display: block !important;
                flex: none !important; /* remove flex properties for cleaner stacking */
                margin: 0 !important;
                padding: 0 !important;
            }

            /* Tablet order: video first, then notes, then extra content */
            .videos-column { order: 1; }
            .program-notes-column { order: 2; }
            .page-content-container { order: 3; }

            /* Ensure proper text alignment on tablet */
            .program-video-section .composition-notes-container {
                padding: 1rem 2rem !important; /* balanced padding */
                text-align: left !important;
            }
            
            /* Center titles but keep content left-aligned when no videos */
            .program-video-section.videos-hidden .composition-program-notes h3,
            .program-video-section.videos-hidden .composition-performance-notes h3 {
                text-align: center !important;
            }

            .page-content-column {
                grid-row: 3;
            }
        }



        /* ===== MOBILE STYLES (768px and below) ===== */
        @media (max-width: 768px) {
            /* ✨ MOBILE LAYOUT - Simplified Container Structure */
            .composition-main {
                display: block;
                padding: 0;
                margin: 0 auto;
                background: transparent;
            }
            
            .composition-cover-container {
                margin: 0;
                padding: 0;
                max-width: 300px;
            }



                        .composition-content-container {
                 background: transparent;
                 padding: 0;
                 margin: 0;
                 box-shadow: none;
                 border-radius: 0;
             }

            /* ✨ CLEAN CONTENT SECTIONS */
            .composition-cover-container {
                margin: 1rem auto 1rem auto;
                padding: 0;
                max-width: 300px;
            }

            /* Mobile: tighten resources under-cover card visuals */
            #resources-card-under-cover .resources-container { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; gap: .4rem !important; }
            #resources-card-under-cover .resource-mini-card { transform: scale(.92); transform-origin: top left; border-radius: 8px; }
            #resources-card-under-cover .resource-mini-thumb { aspect-ratio: 8.5 / 11; }
            #resources-card-under-cover .included-chip { font-size: .7rem; padding: .18rem .5rem; }
            /* Remove any accidental card lip from collections/resources */
            #collections-card-placeholder .collections-card,
            #collections-card-placeholder .collection-card,
            #resources-card-under-cover .resource-mini-card { margin: 0 !important; }

            .composition-title-container {
                margin: 0;
                padding: 0;
                text-align: center;
                display: flex; /* ensure one-column layout on mobile */
                flex-direction: column;
            }
            .composition-title-section {
                margin: 0;
                padding: 0;
                text-align: center;
            }   

            .composition-meta-container {
                margin: 0;
                padding: 0;
                text-align: center;
                border-bottom: 0
            }   

            .composition-buy-button-wrapper {
                margin: .5rem auto;
                padding: 0;
                text-align: center;
                background: transparent;
                border: none;
                border-radius: 0;
            }
            /* Mobile: Buy button above dedication */
            .composition-dedication-wrapper {
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
            }
            .composition-dedication {
                text-align: center;
            }

            .composition-buy-btn {
                padding: 0.6rem 1.2rem;
                font-size: 1rem;
                margin: 0 auto;
            }

            .composition-links-container {
                margin: .75rem auto;
                padding: 1rem;
                background: transparent;
                border: 0;
                border-radius: 8px;
            }

            .composition-audio-container {
                margin: 1rem auto; /* keep spacing only */
                padding: 0;
                background: transparent; /* no card on mobile either */
                border: none;
                border-radius: 0;
            }
            
            .composition-year-commission-container {
                /* padding: 0.75rem; */
                font-size: 0.85rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .program-video-section {
                margin: 0;
            } 
            .program-notes-content {
                font-size: 0.97rem;
                line-height: 1.7;
            }
            .program-notes-content p {
                margin: .7rem 0;
            }
            .program-notes-content h1 { font-size: 1.85rem; margin: 1.4rem 0 .6rem; letter-spacing: -.01rem; }
            .program-notes-content h2 { font-size: 1.55rem; margin: 1.25rem 0 .55rem; letter-spacing: -.008rem; }
            .program-notes-content h3 { font-size: 1.3rem; margin: 1.1rem 0 .5rem; letter-spacing: -.006rem; }
            .program-notes-content ul, .program-notes-content ol { margin: .6rem 0; }
            .program-notes-content li { margin: .3rem 0; }
            .program-notes-content blockquote { padding: .65rem 0 .65rem 1.3rem; margin: 1.1rem 0; }
            .performance-notes-content {
                font-size: 0.98rem;
                line-height: 1.7;
            }
            .performance-notes-content p {
                margin: .7rem 0;
            }
            .performance-notes-content h1 { font-size: 1.85rem; margin: 1.4rem 0 .6rem; letter-spacing: -.01rem; }
            .performance-notes-content h2 { font-size: 1.55rem; margin: 1.25rem 0 .55rem; letter-spacing: -.008rem; }
            .performance-notes-content h3 { font-size: 1.3rem; margin: 1.1rem 0 .5rem; letter-spacing: -.006rem; }
            .performance-notes-content ul, .performance-notes-content ol { margin: .6rem 0; }
            .performance-notes-content li { margin: .3rem 0; }
            .performance-notes-content blockquote { padding: .65rem 0 .65rem 1.3rem; margin: 1.1rem 0; }

            /* Page content mobile adjustments */

            .page-content-container {
                padding: 1rem;
            }

            .page-content-wrapper {
                font-size: 0.97rem;
                line-height: 1.7;
            }

            .page-content-wrapper h1 {
                font-size: 1.85rem;
                margin: 1.4rem 0 .6rem;
                letter-spacing: -.01rem;
            }

            .page-content-wrapper h2 {
                font-size: 1.55rem;
                margin: 1.25rem 0 .55rem;
                letter-spacing: -.008rem;
            }

            .page-content-wrapper h3 {
                font-size: 1.3rem;
                margin: 1.1rem 0 .5rem;
                letter-spacing: -.006rem;
            }
            .page-content-wrapper p { margin: .7rem 0; }
            .page-content-wrapper ul, .page-content-wrapper ol { margin: .6rem 0; }
            .page-content-wrapper li { margin: .3rem 0; }
            .page-content-wrapper blockquote { padding: .65rem 0 .65rem 1.3rem; margin: 1.1rem 0; }

            .composition-title-container {
                 flex-direction: column;
                 align-items: center;
                 text-align: center;
                 gap: 1rem;
                 border-bottom: 1px solid var(--gray-200);
                 padding-bottom: 1rem;
             }

             .composition-meta-container {
                 align-items: center;
                 text-align: center;
                 width: 100%;
                 background: var(--primary-50);
                 padding: 0.75rem 1rem;
                 border-radius: 8px;
             }

            /* ✨ TYPOGRAPHY */
            .composition-title {
                font-size: 1.6rem;
                color: var(--primary-700);
                margin: 0 auto 0.2rem auto; /* reduced spacing above instrument on mobile */
                text-align: center;
                line-height: 1.3;
                padding: 0;
            }

            .composition-instrument {
                font-size: 1rem;
                text-align: center;
                margin: 0 auto 1rem auto;
                color: var(--gray-600);
            }

            .composition-title-container > * {
                margin-left: auto;
                margin-right: auto;
            }

            /* ✨ MOBILE BODY */
            body.composition-page {
                padding-top: 100px;
            }

            main {
                padding: 0 0.5rem;
                margin: 0 auto;
            }

            .layout-builder-nav {
                flex-direction: column;
                align-items: stretch;
                gap: 0.3rem;
            }

            .layout-nav-btn {
                justify-content: center;
                width: 100%;
                padding: 0.4rem 0.6rem;
                font-size: 0.8rem;
                background: rgba(236, 248, 255, 0.349)
            }

            /* Mobile program-video section - consistent with tablet but more compact */
            .program-video-section { 
                display: flex !important; 
                flex-direction: column !important; 
                padding: 1.5rem 1rem !important; /* compact internal spacing */
                gap: 1.25rem !important; /* good spacing for mobile */
                margin: 0 !important;
                width: 100vw !important; /* full-bleed background */
                margin-left: calc(-50vw + 50%) !important; /* center to viewport */
                box-sizing: border-box;
            }
            
            /* Mobile column styling */
            .program-video-section > .videos-column,
            .program-video-section > .program-notes-column,
            .program-video-section > .page-content-container {
                order: unset !important; /* let natural order take precedence on mobile */
                width: 100% !important;
                max-width: 100% !important;
                display: block !important;
                flex: none !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            
            /* Mobile order: video first, then notes, then extra content */
            .videos-column { order: 1; }
            .program-notes-column { order: 2; }
            .page-content-container { order: 3; }
            
            /* Mobile notes container styling */
            .program-video-section .composition-notes-container {
                padding: 0.75rem 1rem !important; /* compact but readable */
                text-align: left !important;
            }
            
            /* Mobile title centering when no videos */
            .program-video-section.videos-hidden .composition-program-notes h3,
            .program-video-section.videos-hidden .composition-performance-notes h3 {
                text-align: center !important;
                margin-bottom: 1rem !important;
            }

            /* ===== MOBILE FIX: EMPTY NOTES SPACING ===== */
            .program-video-section.notes-empty {
                padding: 1.5rem 1rem !important; /* Reduced mobile padding */
                min-height: auto !important;
            }
            
            .program-video-section.notes-empty .videos-column {
                max-width: 100% !important;
                margin: 0 !important;
            }
            
            .program-video-section.notes-empty .videos-column #composition-video-container-main {
                max-width: 100% !important;
                margin: 0 !important;
            }
            
                    /* Ensure proper content alignment */
        .program-video-section .program-notes-content,
        .program-video-section .performance-notes-content {
            text-align: left !important;
            line-height: 1.72 !important;
        }

        /* Enhanced paragraph spacing for Notion content */
        .program-video-section .program-notes-content p,
        .program-video-section .performance-notes-content p {
            margin: .8rem 0 !important;
        }

        .program-video-section .program-notes-content p:first-child,
        .program-video-section .performance-notes-content p:first-child {
            margin-top: 0 !important;
        }

        .program-video-section .program-notes-content p:last-child,
        .program-video-section .performance-notes-content p:last-child {
            margin-bottom: 0 !important;
        }

            /* Related compositions mobile adjustments */
            .related-compositions-section {
                padding: 0 1rem;
                margin: 2rem auto 0;
            }

            .related-compositions-container {
                padding: 1.5rem;
            }

            .related-compositions-carousel {
                gap: 0.75rem;
                padding: 0.5rem 0;
            }

            /* Force smaller Related Works card size on mobile (50% of desktop) */
            #related-works-placeholder .related-composition-card {
                width: 200px !important;
                min-width: 200px !important;
                max-width: 200px !important;
                flex: 0 0 200px !important;
            }
            #related-works-placeholder .related-composition-image,
            #related-works-placeholder .related-composition-card img,
            #related-works-placeholder .related-composition-card .related-composition-image {
                width: 100% !important;
                height: 258px !important; /* 200 * (11/8.5) */
                object-fit: cover !important;
                object-position: center !important;
                display: block !important;
                border: 0 !important;
                outline: 0 !important;
            }
            /* Hide any image that the runtime has flagged as broken so the JS placeholder can show */
            #related-works-placeholder .related-composition-card img[data-broken="1"],
            #related-works-placeholder .related-composition-card img[data-pending="1"]:not([data-ok="1"]) { display: none !important; }
            /* If an image has loaded OK, force-hide any placeholder siblings */
            #related-works-placeholder .related-composition-image img[data-ok="1"] ~ .silo-placeholder,
            #related-works-placeholder .related-composition-image img[data-ok="1"] ~ .feature-media,
            #related-works-placeholder .related-composition-image img[data-ok="1"] ~ .catalog-placeholder-target { display: none !important; }
            
            /* Ensure placeholder divs maintain consistent height on mobile */
            #related-works-placeholder .related-composition-image .feature-media,
            #related-works-placeholder .related-composition-image .catalog-placeholder-target,
            #related-works-placeholder .related-composition-image > div {
                width: 100% !important;
                height: 100% !important;
                border-radius: 0 !important;
                border: none !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                background: transparent !important;
                position: absolute !important;
                inset: 0 !important;
            }
        }

        /* ===== SMALL MOBILE STYLES (480px and below) ===== */
        @media (max-width: 480px) {
            .composition-title {
                font-size: 1.4rem;
            }

            /* Related compositions small mobile adjustments - handled by component */

            .composition-instrument {
                font-size: 0.9rem;
                font-weight: 400;
            }

            .composition-buy-btn {
                padding: 0.5rem 1rem;
                font-size: 0.95rem;
            }

            .composition-links-container,
            .composition-audio-container {
                padding: 0.75rem 0; /* remove side padding from audio container */
            }

            .scores-section {
                padding: 0.75rem;
            }

            .score-toggle-container {
                margin-bottom: 0.5rem;
                gap: 0.25rem;
            }

            .score-toggle-btn {
                padding: 0.5rem 1rem;
                font-size: 0.8rem;
                width: 100%;
                max-width: 200px;
            }

            .score-pdf-column,
            .score-video-column {
                padding: 1rem;
            }

            .score-carousel-container:not(.show) {
                height: 0;
                overflow: hidden;
            }

            .score-video-column.full-width {
                flex: 1 1 100%;
                max-width: 100%;
                margin: 0 auto;
            }

            .score-pdf-column.full-width {
                flex: 1 1 100%;
                max-width: 100%;
                margin: 0 auto;
            }
            .score-layout-container.pdf-only.has-content {
                display: block
            }
            /* Mobile-specific centering for PDF-only */
            .score-layout-container.pdf-only .score-pdf-column {
                max-width: 100%;
                padding: 0 1rem;
            }
            
            /* Mobile-specific centering for video-only */
            .score-layout-container.video-only .score-video-column {
                max-width: 100%;
                padding: 0 1rem;
            }
        }

        /* ===== LOADING OVERLAY ANIMATIONS ===== */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes overlaySlideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
        /* ===== SECTION REVEAL (staggered slide-up) ===== */
        @keyframes sectionRevealUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
        .reveal-section { opacity: 0; transform: translateY(14px); will-change: transform, opacity; }
        .reveal-section.revealed { animation: sectionRevealUp .42s cubic-bezier(.2,.65,.2,1) both; }

        /* ===== LOADING OVERLAY RESPONSIVE ===== */
        @media (max-width: 768px) {
            #composition-loading-overlay > div {
                max-width: 90%;
                padding: 1.5rem;
            }
        }

        /* ===== RELATED NEWS (SUBTLE) ===== */
        .composition-related-news-section {
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            display: none; /* hidden by default; shown only when related items exist */
            justify-content: flex-end; /* align rail to the right */
            border-top: 1px solid var(--gray-400);
        }
        .related-news-title {
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--gray-600);
            margin: 0 0 0.35rem 0;
            text-align: left;
        }
        .related-news-rail {
            display: none; /* hidden until data is present */
            flex-direction: column; /* stack downward */
            align-items: flex-end; /* align items to the right */
            gap: .05rem;
            overflow: visible;
            padding: 0;
            margin-left: auto; /* keep rail at the right side */
        }
        .related-news-rail::-webkit-scrollbar { height: 6px; }
        .related-news-rail::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
        .related-news-link {
            scroll-snap-align: start;
            display: inline-flex;
            align-items: baseline;
            gap: .35rem;
            text-decoration: none;
            color: var(--gray-700);
            padding: .2rem .35rem;
            border-radius: 8px;
            transition: color .15s ease, background-color .15s ease, transform .15s ease;
            white-space: nowrap;
        }
        .related-news-link:hover {
            color: var(--gray-900);
            transform: translateY(-1px);
            background: var(--gray-100);
        }
        .rn-content {
            padding: 0;
        }
        .rn-date {
            font-size: 0.78rem;
            color: var(--gray-600);
            font-weight: 700;
            margin: 0 0 0.15rem 0;
        }
        .rn-title {
            font-size: 0.9rem;
            font-weight: 800;
            color: var(--gray-900);
            margin: 0;
            letter-spacing: -0.01em;
        }
        .rn-sep { color: var(--gray-400); font-weight: 700; }
        .rn-chip {
            display: inline-block;
            padding: .2rem .5rem;
            border: 1px solid var(--gray-300);
            background: var(--gray-50);
            color: var(--gray-700);
            border-radius: 999px;
            font-weight: 700;
            font-size: .72rem;
            line-height: 1;
        }
        .rn-excerpt {
            font-size: 0.85rem;
            color: var(--gray-600);
            margin: 0.1rem 0 0 0;
            display: none; /* keep ultra-compact; enable later if desired */
        }

        /* Responsive tweaks */
        @media (max-width: 768px) {
            .composition-related-news-section {
                padding: 0;
                margin-top: 0;
                justify-content: center; /* center rail on mobile */
            }
            .related-news-rail { gap: .5rem; align-items: center; }
            .related-news-link {
                padding: .2rem .35rem;
                width: auto;
                max-width: 100%;
                white-space: normal; /* allow multi-line wrap */
                flex-wrap: wrap; /* wrap title/chip/date */
                justify-content: center; /* center content on mobile */
                text-align: center;
                row-gap: .15rem;
                column-gap: .35rem;
            }
        }