html { margin: 0; padding: 0; width: 100%; font-size: 16px; }
        body {
            margin: 0; padding: 0; width: 100%;
            background-color: #F4F3F0;
            color: #111111;
            overflow-x: hidden;
            overscroll-behavior: none;
            -webkit-font-smoothing: antialiased;
        }

        
        .paper-texture {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            pointer-events: none; z-index: 50;
            opacity: 0.025; mix-blend-mode: multiply;
        }

        #canvas-container {
            position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
            z-index: 5; pointer-events: none;
            display: flex; justify-content: center; align-items: center;
        }

        
        #svg-ball-container {
            width: 400px; height: 400px; 
            max-width: 90vw; max-height: 90vh;
            will-change: transform;
            transform: translateZ(0); 
        }

        .idle-float {
            animation: editorialFloat 6s ease-in-out infinite;
        }
        @keyframes editorialFloat {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        .pedestal-base {
            position: absolute; width: 256px; height: 16px;
            background: linear-gradient(135deg, #ffffff 0%, #EFEFEF 100%);
            border-radius: 50%;
            top: 73%; left: 50%; transform: translate(-50%, -50%);
            z-index: 6; will-change: transform;
        }
        .pedestal-shadow {
            position: absolute; width: 224px; height: 32px;
            background: rgba(0,0,0,0.12); border-radius: 50%;
            top: 74%; left: 50%; transform: translate(-50%, -50%);
            filter: blur(20px); z-index: 4; will-change: transform;
        }

        .content-layer { position: relative; z-index: 20; pointer-events: none; }
        
        .scroll-section {
            height: 100vh; display: flex; flex-direction: column;
            justify-content: center; align-items: center;
            position: relative; pointer-events: auto; 
        }

        
        .reveal-elem {
            opacity: 0; transform: translateY(40px);
            will-change: transform, opacity;
        }

        .museum-label {
            background-color: rgba(244, 243, 240, 0.85);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(17,17,17,0.08);
            border-radius: 4px;
        }

        #pedestal-fader {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to bottom, transparent 50%, #F4F3F0 90%);
            z-index: 7; opacity: 0; pointer-events: none;
        }

        
        .article-content { pointer-events: auto; padding-top: 4rem; }
        .article-content p {
            margin-bottom: 2rem;
            font-family: 'Merriweather', serif;
            font-size: 1.1875rem; 
            line-height: 1.85;
            color: #252525;
            max-width: 680px; 
            margin-left: auto; margin-right: auto;
        }
        
        
        .sapo-box {
            position: relative; max-width: 720px; margin: 0 auto 5rem auto; text-align: center;
        }
        .sapo-box p {
            font-family: 'Merriweather', serif;
            font-style: italic; font-size: 1.5rem; font-weight: 300;
            color: #111111; margin: 0; line-height: 1.7; max-width: 100%;
        }
        .sapo-divider {
            width: 40px; height: 2px; background-color: #820505; margin: 2rem auto;
        }

        .article-content h3 {
            font-family: 'Anton', sans-serif;
            font-size: 2.25rem; text-transform: uppercase; letter-spacing: 0.02em;
            margin-top: 5rem; margin-bottom: 2rem; color: #111111;
            max-width: 680px; margin-left: auto; margin-right: auto;
            position: relative;
        }
        .article-content h3::before {
            content: ''; position: absolute; left: 0; top: -1rem;
            width: 24px; height: 4px; background-color: #820505;
        }

        
        .timeline-wrapper {
            margin: 4rem auto; max-width: 680px; position: relative; padding-left: 1rem;
        }
        .timeline-nav {
            display: flex; flex-direction: column; gap: 1.5rem; border-left: 1px solid rgba(17,17,17,0.1);
        }
        .timeline-item {
            position: relative; cursor: pointer; padding-left: 2.5rem;
        }
        .timeline-item::before {
            content: ''; position: absolute; left: -5px; top: 12px;
            width: 9px; height: 9px; border-radius: 50%; background-color: #d9d6d2; 
            transition: all 0.4s ease;
        }
        .timeline-item:hover .timeline-year, .timeline-item.active .timeline-year { color: #820505; }
        .timeline-item:hover::before, .timeline-item.active::before { background-color: #820505; transform: scale(1.4); }
        
        .timeline-year { 
            font-family: 'Anton', sans-serif; font-size: 1.5rem; color: #9d9a96; transition: color 0.4s; margin-bottom: 0.25rem;
        }
        .timeline-content-body {
            font-family: 'Inter', sans-serif; font-size: 1.05rem; color: #55524f; line-height: 1.6;
            max-height: 0; overflow: hidden; opacity: 0; transition: all 0.5s ease;
        }
        .timeline-item.active .timeline-content-body { 
            max-height: 300px; opacity: 1; padding-top: 0.25rem; padding-bottom: 1rem; 
        }

        
        .album-grid img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
        .album-grid .overflow-hidden:hover img { transform: scale(1.05); }

        .chart-container { position: relative; width: 100%; margin-bottom: 1rem; }