/* ===== PROGRESS BAR ===== */
        .progress-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: rgba(10, 5, 2, 0.3);
            z-index: 10000;
        }
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #ff8c00, #d4af37);
            width: 0%;
            transition: width 0.3s ease;
        }
        .page-indicator {
            position: fixed;
            top: 15px;
            left: 30px;
            font-family: 'Playfair Display', serif;
            font-size: 0.9rem;
            color: #f5e6c8;
            z-index: 10000;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
            letter-spacing: 0.1em;
            background: rgba(10, 5, 2, 0.7);
            padding: 8px 15px;
            border-radius: 3px;
            border: 1px solid rgba(212, 175, 55, 0.3);
        }

        /* ===== LOADING SCREEN ===== */
        .loading-screen {
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            background: #0a0502;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 1;
            transition: opacity 1s ease;
        }
        .loading-screen.loaded {
            opacity: 0;
            pointer-events: none;
        }
        .loading-title {
            font-family: 'Great Vibes', cursive;
            font-size: clamp(3rem, 6vw, 5rem);
            color: #f5e6c8;
            text-shadow: 0 0 30px rgba(255, 69, 0, 0.4), 0 2px 4px rgba(0,0,0,0.8);
            margin-bottom: 40px;
            opacity: 0;
            animation: loadingFadeIn 1s ease 0.5s forwards;
        }
        .loading-subtitle {
            font-family: 'Cormorant Garamond', serif;
            font-style: italic;
            font-size: 1.1rem;
            color: #e8d4a8;
            letter-spacing: 0.15em;
            opacity: 0;
            animation: loadingFadeIn 1s ease 1s forwards;
        }
        .loading-divider {
            width: 0;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(255, 140, 0, 0.6), transparent);
            margin: 30px 0;
            animation: loadingDivider 1.5s ease 1.5s forwards;
        }
        @keyframes loadingFadeIn {
            to { opacity: 1; }
        }
        @keyframes loadingDivider {
            to { width: 200px; }
        }

        /* ===== GLOBAL RESET & SCROLL SNAP ===== */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html {
            height: 100%;
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth;
        }
        body {
            width: 100%; min-height: 100%;
            font-family: 'Cormorant Garamond', serif;
            background: #0a0502; color: #f5e6c8;
            overflow-x: hidden;
        }
        .snap-page {
            position: relative; width: 100vw; height: 100vh;
            scroll-snap-align: start; overflow: hidden;
        }

        /* =========================================
           PAGE 0: INTRO (HERO) - GPU LITE
           ========================================= */
        .hero { display: flex; align-items: flex-end;
        }
        .social-media-container {
            position: absolute;
            left: 30px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        .social-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }
        .social-label {
            font-family: 'Playfair Display', serif;
            font-size: 0.7rem;
            color: rgba(245, 230, 200, 0.7);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        }
        .social-divider {
            width: 30px;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(255, 140, 0, 0.6), transparent);
            margin: 10px 0;
        }
        .social-icon {
            width: 24px;
            height: 24px;
            color: #ff8c00;
            transition: all 0.3s ease;
            cursor: pointer;
            opacity: 0.7;
        }
        .social-icon:hover {
            color: #d4af37;
            opacity: 1;
            transform: scale(1.15);
        }
        .social-icon svg {
            width: 100%;
            height: 100%;
            fill: currentColor;
        }
        .hero::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 180px;
            background: linear-gradient(to top, #0a0502 0%, transparent 100%);
            z-index: 5; pointer-events: none;
        }
        .collage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; z-index: 1; }
        .strip {
            flex: 1; height: 100%; position: relative; overflow: hidden;
            opacity: 0; animation: stripReveal 1.2s ease forwards;
        }
        .strip:nth-child(1) { animation-delay: 0.1s; }
        .strip:nth-child(2) { animation-delay: 0.25s; }
        .strip:nth-child(3) { animation-delay: 0.4s; }
        .strip:nth-child(4) { animation-delay: 0.55s; }
        .strip:nth-child(5) { animation-delay: 0.7s; }
        .strip:nth-child(6) { animation-delay: 0.85s; }
        .strip:nth-child(7) { animation-delay: 1.0s; }
        @keyframes stripReveal {
            0% { opacity: 0; transform: scaleY(0); transform-origin: top; }
            100% { opacity: 1; transform: scaleY(1); transform-origin: top; }
        }
        .strip-bg { width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; }
        .strip-bg::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(10, 5, 2, 0.15); 
            pointer-events: none; z-index: 2;
        }
        .strip-1 .strip-bg { background-color: #3a2010; background-image: url('images/strip-1.jpg'); }
        .strip-1 .strip-bg::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: radial-gradient(ellipse at bottom, rgba(139, 37, 0, 0.5) 0%, transparent 70%); z-index: 1; }
        .strip-2 .strip-bg { background-color: #0f0805; background-image: url('images/strip-2.jpg'); }
        .strip-2 .strip-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 80%, rgba(180, 60, 0, 0.2) 0%, transparent 50%); animation: emberPulse 4s ease-in-out infinite; z-index: 1; }
        .strip-3 .strip-bg { background-color: #1a0500; background-image: url('images/strip-3.jpg'); }
        .strip-3 .strip-bg::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(255, 69, 0, 0.25) 0%, transparent 100%); animation: infernoGlow 3s ease-in-out infinite alternate; z-index: 1; }
        .strip-4 .strip-bg { background-color: #a07848; background-image: url('images/strip-4.jpg'); }
        .strip-4 .strip-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 30% 20%, rgba(139, 69, 19, 0.15) 0%, transparent 60%); z-index: 1; }
        .strip-5 .strip-bg { background-color: #150a05; background-image: url('images/strip-5.jpg'); }
        .strip-5 .strip-bg::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background: radial-gradient(ellipse at bottom, rgba(255, 99, 71, 0.2) 0%, transparent 70%); z-index: 1; }
        .strip-6 .strip-bg { background-color: #1a0202; background-image: url('images/strip-6.jpg'); }
        .strip-6 .strip-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 70% 60%, rgba(255, 140, 0, 0.15) 0%, transparent 50%); animation: emberPulse 5s ease-in-out infinite; z-index: 1; }
        .strip-7 .strip-bg { background-color: #8b4513; background-image: url('images/strip-7.jpg'); }
        .strip-7 .strip-bg::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(to top, rgba(139, 0, 0, 0.4) 0%, transparent 100%); z-index: 1; }
        @keyframes emberPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
        @keyframes infernoGlow { 0% { opacity: 0.3; } 100% { opacity: 0.7; } }
        .strip:not(:last-child)::after {
            content: ''; position: absolute; top: 0; right: 0; width: 3px; height: 100%;
            background: linear-gradient(to bottom, transparent 0%, rgba(255, 100, 0, 0.2) 20%, rgba(255, 60, 0, 0.4) 50%, rgba(255, 100, 0, 0.2) 80%, transparent 100%);
            z-index: 3; box-shadow: 0 0 8px rgba(255, 69, 0, 0.3);
        }
        .overlay-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(60, 10, 5, 0.98) 0%, rgba(80, 15, 10, 0.9) 30%, rgba(100, 20, 10, 0.7) 60%, transparent 100%); z-index: 4; pointer-events: none; }
        .overlay-top { position: absolute; top: 0; left: 0; width: 100%; height: 20%; background: linear-gradient(to bottom, rgba(10, 5, 2, 0.6) 0%, transparent 100%); z-index: 4; pointer-events: none; }
        .overlay-vignette { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 5, 2, 0.7) 100%); z-index: 4; pointer-events: none; }
        .bnr-logo { position: absolute; top: 30px; right: 40px; z-index: 10; color: #f5e6c8; text-align: right; opacity: 0; animation: fadeIn 1s ease 1.5s forwards; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
        .bnr-link { text-decoration: none; color: inherit; transition: opacity 0.3s ease; display: block; }
        .bnr-link:hover { opacity: 0.75; }
        .bnr-logo .bnr-text { 
            font-family: 'Playfair Display', serif; 
            font-size: 0.8rem; 
            letter-spacing: 0.25em; 
            text-transform: uppercase; 
            font-weight: 600; 
            line-height: 1.2; 
        }
        .bnr-logo .bnr-sub { 
            font-family: 'Playfair Display', serif; 
            font-size: 0.8rem; 
            letter-spacing: 0.25em; 
            text-transform: uppercase; 
            font-weight: 600; 
            line-height: 1.2; 
        }
        @keyframes fadeIn { to { opacity: 1; } }
        .title-section { position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); z-index: 8; text-align: center; width: 90%; max-width: 900px; }
        .main-title { 
            font-family: 'Great Vibes', cursive; font-size: clamp(4rem, 9vw, 8rem); color: #f5e6c8; 
            text-shadow: 0 0 20px rgba(255, 69, 0, 0.4), 0 2px 4px rgba(0,0,0,0.8); 
            line-height: 1.1; margin-bottom: 0.3em; opacity: 0; 
            animation: titleReveal 1.5s ease 1.8s forwards, breathe 4s ease-in-out infinite 3.5s; 
            letter-spacing: 0.02em; white-space: nowrap; 
        }
        @keyframes titleReveal { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
        @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.008); } }
        .subtitle { 
            font-family: 'Cormorant Garamond', serif; 
            font-style: italic; 
            font-size: clamp(1.1rem, 2.2vw, 1.6rem); 
            color: #e8d4a8; 
            text-shadow: 0 2px 8px rgba(0,0,0,0.9); 
            letter-spacing: 0.08em; 
            opacity: 0; 
            animation: subtitleReveal 1.2s ease 2.3s forwards; 
            line-height: 1.3; 
        }
        @keyframes subtitleReveal { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
        .subtitle .quote-mark { font-size: 1.3em; color: #ff8c00; }
        .scroll-indicator { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); z-index: 10; color: rgba(232, 212, 168, 0.7); font-family: 'Cormorant Garamond', serif; font-size: 0.85rem; letter-spacing: 0.35em; text-transform: uppercase; opacity: 0; animation: fadeIn 1s ease 3s forwards; cursor: pointer; transition: color 0.3s ease, text-shadow 0.3s ease; text-decoration: none; }
        .scroll-indicator:hover { color: #f5e6c8; text-shadow: 0 0 10px rgba(255, 140, 0, 0.5); }
        .scroll-indicator::after { content: ''; display: block; width: 1px; height: 30px; background: linear-gradient(to bottom, rgba(232, 212, 168, 0.7), transparent); margin: 8px auto 0; animation: scrollPulse 2s ease infinite; }
        @keyframes scrollPulse { 0%, 100% { opacity: 0.3; transform: scaleY(0.7); } 50% { opacity: 1; transform: scaleY(1); } }
        .decorative-line { position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(255, 140, 0, 0.5), transparent); z-index: 8; animation: lineExpand 1.5s ease 2.1s forwards; }
        @keyframes lineExpand { to { width: 60%; max-width: 500px; } }
        .no-break {
            white-space: nowrap;
        }

        /* =========================================
           ANTECHAMBER: TABLE OF CONTENTS (ALIGNED)
           ========================================= */
        .antechamber {
            position: relative;
            background-color: #1a0f0a;
            overflow: hidden;
        }

        .antechamber::before {
            content: ''; 
            position: absolute; 
            top: 0; left: 0; 
            width: 100%; 
            height: 180px;
            background: linear-gradient(to bottom, #0a0502 0%, transparent 100%);
            z-index: 6; 
            pointer-events: none;
        }

        .antechamber::after {
            content: ''; 
            position: absolute; 
            bottom: 0; left: 0; 
            width: 100%; 
            height: 180px;
            background: linear-gradient(to top, #0a0502 0%, transparent 100%);
            z-index: 6; 
            pointer-events: none;
        }

        .antechamber-bg {
            position: absolute; 
            top: 0; left: 0; 
            width: 100%; height: 100%;
            background-image: url('images/antechamber.jpg');
            background-size: cover; 
            background-position: center 65%; /* Adjusted to move book higher */
            z-index: 1;
        }

        /* Vignette overlay for text readability */
        .antechamber-bg::after {
            content: ''; 
            position: absolute; 
            top: 0; left: 0; 
            width: 100%; height: 100%;
            background: radial-gradient(circle at center, transparent 25%, rgba(10, 5, 2, 0.5) 100%);
            pointer-events: none; 
            z-index: 2;
        }

        /* Base container for both page columns */
        .book-page {
            position: absolute;
            top: 45%;
            transform: translateY(-50%);
            z-index: 4;
            display: flex;
            flex-direction: column;
            gap: 60px; /* Space between links */
            width: 30%; /* Constrained width to stay on parchment */
        }

        /* LEFT PAGE - Precisely mapped to left parchment */
        .left-page {
            left: 23%; 
            align-items: flex-start; /* Anchors block links to the left edge */
            text-align: center;
        }

        /* RIGHT PAGE - Precisely mapped to right parchment */
        .right-page {
            right: 23%; 
            align-items: flex-end; /* Anchors block links to the right edge */
            text-align: center;
        }

        /* LINK STYLING - Full width within constrained container */
        .marginalia-link {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 800 !important;
            font-size: clamp(1.3rem, 1.7vw, 1.7rem);
            color: #3a2010; /* Dark sepia ink */
            text-decoration: none;
            line-height: 1.3;
            text-shadow: 0 0 1px rgba(58, 32, 16, 0.2);
            transition: color 0.4s ease, letter-spacing 0.4s ease, text-shadow 0.4s ease;
            position: relative;
            /* CRITICAL FIX: Makes entire row clickable and aligned */
            display: inline-flexbox;
            width: 50%;
            padding: 6px 0;
            margin-left: 30%;
            margin-right: 30%;
        }

        /* Hover effect - richer ink color, no movement */
        .marginalia-link:hover {
            color: #8b0000;
            letter-spacing: 0.05em; /* Subtle expansion */
            text-shadow: 0 2px 4px rgba(139, 0, 0, 0.2);
        }

        .left-page .marginalia-link::before {
            content: '❧';
            position: absolute;
            left: -25px; /* Position outside the text block */
            top: 50%;
            color: #d4af37;
            font-size: 0.8em;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: translateY(-50%) translateX(-5px); /* Start slightly offset */
        }

        .left-page .marginalia-link:hover::before {
            opacity: 1;
            transform: translateY(-50%) translateX(0); /* Slide into place */
        }

        /* RIGHT PAGE: Reveal gold mark on the RIGHT side */
        .right-page .marginalia-link::after {
            content: '❧';
            position: absolute;
            right: -25px; /* Position outside the text block */
            top: 50%;
            color: #d4af37;
            font-size: 0.8em;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: translateY(-50%) translateX(5px); /* Start slightly offset */
        }

        .right-page .marginalia-link:hover::after {
            opacity: 1;
            transform: translateY(-50%) translateX(0); /* Slide into place */
        }

        /* CENTER ENTER BUTTON */
        .antechamber-enter {
            position: absolute;
            bottom: 8%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
        }

        .enter-btn {
            font-family: 'Cormorant Garamond', serif;
            font-size: 0.9rem;
            letter-spacing: 0.2em;
            color: #f5e6c8;
            text-transform: uppercase;
            text-decoration: none;
            border-bottom: 1px solid rgba(245, 230, 200, 0.4);
            padding-bottom: 5px;
            transition: all 0.3s ease;
        }

        .enter-btn:hover {
            color: #d4af37;
            border-color: #d4af37;
            letter-spacing: 0.25em;
        }

        /* MOBILE RESPONSIVENESS FOR ANTECHAMBER */
        @media (max-width: 768px) {
            .book-page {
                position: relative;
                top: -25%; 
                left: 0; 
                right: 0;
                transform: none;
                width: 90%;
                margin: 20px auto;
                align-items: center !important;
                text-align: center !important;
                gap: 10px; /* Reduced from 35px/40px for tighter spacing */
            }

            /* Stack pages vertically with proper spacing */
            .left-page { 
                margin-top: 39vh; /* Push first column down */
                margin-bottom: 0; /* Space between columns */
            } 

            .right-page { 
                margin-bottom: 0; /* Space before button */
                margin-top: 0;
            }

            .marginalia-link {
                font-size: 1.3rem;
                color: #3a2010; /* Dark sepia ink color for readability */
                border-bottom: none; /* Remove the faint line */
                padding: 4px 0; /* Tighter vertical spacing */
                width: 100%;
                text-shadow: none; /* Remove shadow for cleaner look */
            }

            .marginalia-link:hover {
                color: #8b0000;
                text-shadow: none;
            }

            /* Move button further down and ensure visibility */
            .antechamber-enter {
                position: relative;
                bottom: auto;
                left: auto;
                transform: none;
                margin-top: 30px;
                margin-bottom: 60px;
                width: 100%;
            }

            .enter-btn {
                font-size: 0.85rem; /* Slightly smaller button text */
                padding-bottom: 8px;
                letter-spacing: 0.2em;
            }

            .antechamber-bg {
                background-size: 500%; /* ZOOM IN: Was 'cover'. 180% makes it nearly twice as large */
                background-position: 62% 45%; /* Adjust vertical position to focus on the book pages */
            }

        }
        /* =========================================
           PAGE 1: VITA NUOVA (ASYMMETRIC TIMING)
           ========================================= */
        .page-1 { display: flex; align-items: center; background-color: #2a1a10; }
        .page-1::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 180px;
            background: linear-gradient(to bottom, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-1::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to top, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .vn-bg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('images/florence-sepia.jpg');
            background-size: cover; background-position: center;
            background-color: #8b5a2b; 
            transform: scale(1.05);
            transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
            z-index: 1;
        }
        .vn-bg::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(139, 90, 43, 0.3); 
            z-index: 2;
        }
        .vn-bg::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 30% 50%, transparent 10%, rgba(42, 26, 16, 0.4) 100%);
            z-index: 3;
        }
        .vn-content {
            position: relative; z-index: 4;
            width: 40%; max-width: 500px;
            margin-left: auto; margin-right: 4%;
            padding: 35px 40px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            opacity: 0; transform: translateY(50px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .vn-poem {
            font-family: 'Cormorant Garamond', serif; font-style: italic;
            font-size: 1.5rem; line-height: 1.4;
            color: #ffffff;
            text-align: center;
            margin-bottom: 20px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.6);
        }
        .vn-poem p { margin-bottom: 2px; }
        .vn-citation {
            font-family: 'Playfair Display', serif; font-size: 1rem;
            color: #e8e8e8;
            text-align: center;
            line-height: 1.5;
            background: rgba(0, 0, 0, 0.3);
            padding: 15px 20px;
            border-radius: 4px;
            border-top: 1px solid rgba(255, 255, 255, 0.15);
        }
        .vn-citation .author { font-weight: 700; color: #ffffff; font-size: 1.1rem; display: block; margin-bottom: 8px; }
        .page-1.in-view .vn-bg { transform: scale(1); }
        .page-1.in-view .vn-content { 
            opacity: 1; transform: translateY(0); 
            transition: opacity 1.2s ease 1.5s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.5s; 
        }
        @media (max-width: 1024px) {
            .vn-content { width: 45%; margin-right: 3%; }
            .vn-poem { font-size: 1.3rem; }
        }

        /* =========================================
           PAGE 2: BOCCACCIO (ORNATE BOX + SMOOTH TRANSITION)
           ========================================= */
        .page-2 { display: flex; align-items: center; justify-content: flex-end; background-color: #1a0f0a; }
        .page-2::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to bottom, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-2::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to top, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-2-bg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('images/dante-shadow.jpg'); 
            background-size: cover; background-position: center;
            filter: sepia(0.4) contrast(1.1) brightness(1.1);
            z-index: 1;
            transform: scale(1.05);
            transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .page-2-bg::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 70% 50%, transparent 20%, rgba(26, 15, 10, 0.6) 100%);
        }
        .ornate-box {
            position: relative; z-index: 4;
            width: 55%; max-width: 750px;
            margin-right: 5%;
            padding: 50px 60px;
            background-color: #f5e6c8; 
            border: 12px solid #8b0000;
            outline: 5px solid #d4af37;
            outline-offset: -18px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.6);
            opacity: 0; transform: translateY(50px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .boccaccio-quote {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.6rem; line-height: 1.7;
            color: #1a0f0a;
            text-align: justify;
            margin-bottom: 25px;
            font-style: italic;
        }
        .boccaccio-citation {
            font-family: 'Playfair Display', serif;
            font-size: 0.95rem;
            color: #5a0a0a;
            text-align: left;
            line-height: 1.5;
            border-top: 1px solid rgba(139, 0, 0, 0.2);
            padding-top: 15px;
        }
        .boccaccio-citation .author { font-weight: 700; font-size: 1.1rem; display: block; margin-bottom: 5px; }
        .page-2.in-view .page-2-bg { transform: scale(1); }
        .page-2.in-view .ornate-box {
            opacity: 1; transform: translateY(0);
            transition: opacity 1.2s ease 1.5s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.5s;
        }
        @media (max-width: 1024px) {
            .ornate-box { width: 70%; margin-right: 3%; padding: 40px; }
            .boccaccio-quote { font-size: 1.4rem; }
        }

        /* =========================================
           PAGE 3: INFERNO (DORÉ ENGRAVING + ARCHIVIST TAB)
           ========================================= */
        .page-3 { display: flex; align-items: flex-end; justify-content: flex-end; background-color: #0a0502; }
        .page-3::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to bottom, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-3::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to top, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-3-bg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('images/selva-obscura.jpg');
            background-size: cover; background-position: center;
            z-index: 1;
            transform: scale(1.05);
            transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .page-3-bg::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 70% 80%, transparent 30%, rgba(0, 0, 0, 0.6) 100%);
        }
        .inferno-quote-box {
            position: relative; z-index: 4;
            width: 35%; max-width: 500px;
            margin-right: 5%; margin-bottom: 10%;
            padding: 30px 40px;
            background: rgba(50, 5, 5, 0.7);
            border-radius: 4px;
            border: 1px solid rgba(139, 0, 0, 0.3);
            opacity: 0; transform: translateY(30px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .citation-icon {
            position: absolute; top: 10px; right: 15px;
            font-size: 1.2rem; color: rgba(245, 230, 200, 0.7);
            cursor: pointer; transition: color 0.3s ease, transform 0.2s ease; z-index: 5;
        }
        .citation-icon:hover { color: #f5e6c8; transform: scale(1.1); }
        .inferno-quote {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.4rem; line-height: 1.5;
            color: #ffffff; text-align: center; font-style: italic;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        }
        .page-3.in-view .page-3-bg { transform: scale(1); }
        .page-3.in-view .inferno-quote-box {
            opacity: 1; transform: translateY(0);
            transition: opacity 1.2s ease 1.5s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.5s;
        }

        /* --- Archivist's Tab & Slide-out Panel --- */
        .archivist-panel {
            position: absolute; top: 0; left: 0; height: 100%;
            width: 380px;
            background: rgba(60, 5, 5, 0.95);
            z-index: 8;
            padding: 60px 40px;
            display: flex; flex-direction: column; justify-content: center;
            transform: translateX(-340px); 
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            box-shadow: 5px 0 20px rgba(0,0,0,0.5);
            border-right: 1px solid rgba(139, 0, 0, 0.5);
        }
        .archivist-panel.open {
            transform: translateX(0);
        }
        .archivist-tab {
            position: absolute; top: 50%; right: -40px;
            transform: translateY(-50%);
            width: 40px; height: 120px;
            background: #5a0a0a;
            border-radius: 0 6px 6px 0;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            box-shadow: 4px 0 10px rgba(0,0,0,0.4);
            transition: background 0.3s ease;
        }
        .archivist-tab:hover { background: #8b0000; }
        .archivist-tab-icon {
            font-size: 1.5rem; color: #f5e6c8;
        }
        .archivist-close {
            position: absolute; top: 20px; right: 20px;
            font-size: 1.8rem; color: #f5e6c8;
            cursor: pointer; background: none; border: none;
            transition: color 0.3s ease, opacity 0.3s ease; line-height: 1;
            opacity: 0; 
            pointer-events: none; 
        }
        .archivist-panel.open .archivist-close {
            opacity: 1;
            pointer-events: auto;
        }
        .archivist-close:hover { color: #ff8c00; }
        .archivist-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.4rem; color: #f5e6c8;
            line-height: 1.4; margin-bottom: 25px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }
        .archivist-citation {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.1rem; color: #e8d4a8;
            line-height: 1.7; font-style: italic;
        }
        .archivist-citation strong {
            font-style: normal; font-weight: 700; color: #ffffff;
        }

        /* =========================================
           PAGE 4: DANTE'S LEGACY (SINGLE COLUMN)
           ========================================= */
        .page-4 {
            display: flex;
            align-items: center;
            background-color: #1a0f0a;
            padding: 60px 100px;
        }
        .page-4::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to bottom, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-4::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to top, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-4-bg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('images/florence-orange-strips.jpg');
            background-size: cover; background-position: center;
            z-index: 1;
            transform: scale(1.05);
            transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .page-4-bg::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(10, 5, 2, 0.4);
        }
        .page-4-content {
            position: relative; z-index: 4;
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        .page-4-column {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.6rem;
            line-height: 1.9;
            color: #f5e6c8;
            text-align: justify;
            text-shadow: 0 2px 6px rgba(0,0,0,0.8);
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .page-4.in-view .page-4-bg { transform: scale(1); }
        .page-4.in-view .page-4-column:nth-child(1) {
            opacity: 1; transform: translateY(0);
            transition: opacity 1.2s ease 0.5s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
        }
        .page-4.in-view .page-4-column:nth-child(2) {
            opacity: 1; transform: translateY(0);
            transition: opacity 1.2s ease 1s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1s;
        }
        .page-4.in-view .page-4-column:nth-child(3) {
            opacity: 1; transform: translateY(0);
            transition: opacity 1.2s ease 1.5s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.5s;
        }
        .page-4-column em {
            font-style: italic;
            color: #ff8c00;
            white-space: nowrap;
        }
        /* Clickable term style for Etruria */
        .clickable-term {
            color: #ff8c00;
            font-style: italic;
            border-bottom: 1px dotted rgba(255, 140, 0, 0.6);
            cursor: pointer;
            transition: color 0.3s ease, border-color 0.3s ease;
        }
        .clickable-term:hover {
            color: #ffa500;
            border-color: rgba(255, 140, 0, 0.9);
        }

        /* =========================================
           PAGE 5: CONVIVIO (NEW LIGHT)
           ========================================= */
        .page-5 {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            background-color: #1a0f0a;
        }
        .page-5::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to bottom, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-5::after { 
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to top, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-5-bg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('images/dante-monument.jpg');
            background-size: cover; background-position: center;
            z-index: 1;
            transform: scale(1.05);
            transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .page-5-bg::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 30% 50%, transparent 20%, rgba(10, 5, 2, 0.6) 100%);
        }
        .convivio-box {
            position: relative; z-index: 4;
            width: 45%; max-width: 650px;
            margin-right: 5%;
            padding: 40px;
            background-color: #f5e6c8;
            border: 10px solid #8b0000;
            outline: 4px solid #d4af37;
            outline-offset: -16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            opacity: 0; transform: translateY(50px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .convivio-quote {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.4rem; line-height: 1.6;
            color: #1a0f0a;
            text-align: justify;
            margin-bottom: 25px;
            font-style: italic;
        }
        .convivio-citation {
            font-family: 'Playfair Display', serif;
            font-size: 0.95rem;
            color: #5a0a0a;
            text-align: left;
            line-height: 1.5;
            border-top: 1px solid rgba(139, 0, 0, 0.2);
            padding-top: 15px;
        }
        .page-5.in-view .page-5-bg { transform: scale(1); }
        .page-5.in-view .convivio-box {
            opacity: 1; transform: translateY(0);
            transition: opacity 1.2s ease 1.5s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.5s;
        }
        @media (max-width: 1024px) {
            .convivio-box { width: 55%; margin-right: 3%; }
            .convivio-quote { font-size: 1.2rem; }
        }

        /* =========================================
           PAGE 6: VERNACULAR POETS (SINGLE COLUMN)
           ========================================= */
        .page-6 {
            display: flex;
            align-items: center;
            background-color: #1a0f0a;
            padding: 60px 100px;
        }
        .page-6::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to bottom, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-6::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to top, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-6-bg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('images/florence-orange-writers.jpg');
            background-size: cover; background-position: center;
            z-index: 1;
            transform: scale(1.05);
            transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .page-6-bg::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(10, 5, 2, 0.4);
        }
        .page-6-content {
            position: relative; z-index: 4;
            width: 100%;
            max-width: 850px;
            margin-left: 5%;
            margin-right: auto;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        .page-6-column {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.6rem;
            line-height: 1.9;
            color: #f5e6c8;
            text-align: justify;
            text-shadow: 0 2px 6px rgba(0,0,0,0.8);
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .page-6.in-view .page-6-bg { transform: scale(1); }
        .page-6.in-view .page-6-column:nth-child(1) {
            opacity: 1; transform: translateY(0);
            transition: opacity 1.2s ease 0.5s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
        }
        .page-6.in-view .page-6-column:nth-child(2) {
            opacity: 1; transform: translateY(0);
            transition: opacity 1.2s ease 1s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1s;
        }
        .page-6-column em {
            font-style: italic;
            color: #ff8c00;
        }

        /* Modal Styles (General) */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0, 0, 0, 0.85); z-index: 100;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
        }
        .modal-overlay.active { opacity: 1; pointer-events: auto; }
        .modal-content {
            background: #f5e6c8; padding: 40px 50px; max-width: 600px; width: 90%;
            border-radius: 4px; border: 8px solid #8b0000;
            outline: 3px solid #d4af37; outline-offset: -12px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.6);
            transform: scale(0.95) translateY(20px);
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            position: relative;
        }
        .modal-overlay.active .modal-content { transform: scale(1) translateY(0); }
        .modal-close {
            position: absolute; top: 20px; right: 25px;
            font-size: 2rem; color: #5a0a0a; cursor: pointer;
            transition: color 0.3s ease; background: none; border: none; line-height: 1;
        }
        .modal-close:hover { color: #8b0000; }
        .modal-citation {
            font-family: 'Playfair Display', serif; font-size: 1.1rem;
            color: #1a0f0a; line-height: 1.7;
        }
        .modal-citation .title {
            font-weight: 700; font-size: 1.25rem; margin-bottom: 10px; color: #8b0000;
        }
        /* Etruria Modal Specific Styles */
        .etruria-modal .modal-content {
            max-width: 700px;
            background: #0a0502;
            border: 8px solid #8b0000;
        }
        .etruria-modal img {
            width: 100%;
            max-width: 500px;
            height: auto;
            display: block;
            margin: 0 auto 25px auto;
            border-radius: 4px;
            border: 3px solid #d4af37;
        }
        .etruria-modal .modal-text {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.2rem;
            color: #e8d4a8;
            line-height: 1.7;
            text-align: center;
        }
        .etruria-modal .modal-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            color: #f5e6c8;
            text-align: center;
            margin-bottom: 25px;
            font-weight: 700;
        }

        .citation-modal .modal-content {
            max-width: 500px;
            background: #0a0502;
            border: 8px solid #8b0000;
        }
        .citation-modal .modal-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.6rem;
            color: #f5e6c8;
            text-align: center;
            margin-bottom: 20px;
            font-weight: 700;
            font-style: italic;
        }
        .citation-modal .modal-text {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.1rem;
            color: #e8d4a8;
            line-height: 1.7;
            text-align: left;
        }
        
        @media (max-width: 1024px) {
            .inferno-quote-box { width: 50%; margin-bottom: 15%; }
            .inferno-quote { font-size: 1.2rem; }
            .archivist-panel { width: 320px; transform: translateX(-280px); }
            .page-4 { padding: 60px; }
            .page-4-column { font-size: 1.4rem; }
            .page-6 { padding: 60px; }
            .page-6-column { font-size: 1.4rem; }
            .page-indicator { right: 20px; top: 12px; font-size: 0.8rem; }
        }
        /* =========================================
        PAGE 8: PHYSICAL DESCRIPTION (BOCCACCIO)
        ========================================= */
        .page-8 {
            display: flex;
            align-items: center;
            background-color: #1a0f0a;
            padding: 60px 100px;
        }
        .page-8::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to bottom, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-8::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to top, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-8-bg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('images/wiped-painting.jpg');
            background-size: cover; background-position: center;
            z-index: 1;
            transform: scale(1.05);
            transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .page-8-bg::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(10, 5, 2, 0.4);
        }
        .page-8-content {
            position: relative; z-index: 4;
            width: 100%;
            max-width: 60%;
            margin-left: 3%;
            margin-right: 53%;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        .page-8-column {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.6rem;
            line-height: 1.9;
            color: #f5e6c8;
            text-align: justify;
            text-shadow: 0 2px 6px rgba(0,0,0,0.8);
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .page-8-citation {
            font-family: 'Playfair Display', serif;
            font-size: 1rem;
            color: #e8d4a8;
            line-height: 1.6;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid rgba(212, 175, 55, 0.3);
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .citation-author {
            color: #8b0000; /* Dark red */
            font-weight: 700; /* Optional: makes it bold like the original slide */
        }
        .page-8.in-view .page-8-citation {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 1.2s ease 1s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1s;
        }
        @media (max-width: 1024px) {
            .page-8-citation { font-size: 0.9rem; }
        }
        .page-8.in-view .page-8-bg { transform: scale(1); }
        .page-8.in-view .page-8-column {
            opacity: 1; transform: translateY(0);
            transition: opacity 1.2s ease 0.5s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
        }
        @media (max-width: 1024px) {
            .page-8 { padding: 60px; }
            .page-8-column { font-size: 1.4rem; }
        }
        
        /* =========================================
   PAGE 9: LIMBUS POETS (DORÉ ENGRAVING)
   ========================================= */
        .page-9 {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            background-color: #0a0502;
        }
        .page-9::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to bottom, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-9::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to top, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-9-bg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('images/limbus-poets.jpg');
            background-size: cover; background-position: center;
            z-index: 1;
            transform: scale(1.05);
            transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .page-9-bg::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 30% 50%, transparent 30%, rgba(0, 0, 0, 0.6) 100%);
        }
        .limbus-quote-box {
            position: relative; z-index: 4;
            width: 27%; max-width: 425px;
            margin-left: 5%; 
            margin-top: 2%; /* Changed from margin-bottom to margin-top */
            padding: 30px 40px;
            background: rgba(50, 5, 5, 0.7);
            border-radius: 4px;
            border: 1px solid rgba(139, 0, 0, 0.3);
            opacity: 0; transform: translateY(30px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .limbus-quote-box .citation-icon {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 1.2rem;
            color: rgba(245, 230, 200, 0.7);
            cursor: pointer;
            transition: color 0.3s ease, transform 0.2s ease;
            z-index: 5;
        }
        .limbus-quote-box .citation-icon:hover {
            color: #f5e6c8;
            transform: scale(1.1);
        }
        .limbus-quote {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.4rem; line-height: 1.3;
            color: #ffffff; text-align: center; font-style: italic;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        }
        .page-9.in-view .page-9-bg { transform: scale(1); }
        .page-9.in-view .limbus-quote-box {
            opacity: 1; transform: translateY(0);
            transition: opacity 1.2s ease 1.5s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.5s;
        }

        /* --- Archivist's Tab for Page 9 (Right Side) --- */
        .archivist-panel-right {
            position: absolute; top: 0; right: 0; height: 100%;
            width: 380px;
            background: rgba(60, 5, 5, 0.95);
            z-index: 8;
            padding: 60px 40px;
            display: flex; flex-direction: column; justify-content: center;
            transform: translateX(340px); 
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            box-shadow: -5px 0 20px rgba(0,0,0,0.5);
            border-left: 1px solid rgba(139, 0, 0, 0.5);
        }
        .archivist-panel-right.open {
            transform: translateX(0);
        }
        .archivist-tab-right {
            position: absolute; top: 50%; left: -40px;
            transform: translateY(-50%);
            width: 40px; height: 120px;
            background: #5a0a0a;
            border-radius: 6px 0 0 6px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            box-shadow: -4px 0 10px rgba(0,0,0,0.4);
            transition: background 0.3s ease;
        }
        .archivist-tab-right:hover { background: #8b0000; }
        .archivist-tab-right-icon {
            font-size: 1.5rem; color: #f5e6c8;
        }
        .archivist-close-right {
            position: absolute; top: 20px; left: 20px;
            font-size: 1.8rem; color: #f5e6c8;
            cursor: pointer; background: none; border: none;
            transition: color 0.3s ease, opacity 0.3s ease; line-height: 1;
            opacity: 0; 
            pointer-events: none; 
        }
        .archivist-panel-right.open .archivist-close-right {
            opacity: 1;
            pointer-events: auto;
        }
        .archivist-close-right:hover { color: #ff8c00; }
        .archivist-title-right {
            font-family: 'Playfair Display', serif;
            font-size: 1.4rem; color: #f5e6c8;
            line-height: 1.4; margin-bottom: 25px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }
        .archivist-citation-right {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.1rem; color: #e8d4a8;
            line-height: 1.7; font-style: italic;
        }
        .archivist-citation-right strong {
            font-style: normal; font-weight: 700; color: #ffffff;
        }
        @media (max-width: 1024px) {
            .limbus-quote-box { width: 50%; margin-bottom: 15%; }
            .limbus-quote { font-size: 1.2rem; }
            .archivist-panel-right { width: 320px; transform: translateX(280px); }
            .page-9 { padding: 60px; }
        }
        /* =========================================
           PAGE 10: DANTE'S LEGACY (LIONS MONUMENT)
           ========================================= */
        .page-10 {
            display: flex;
            align-items: center;
            background-color: #1a0f0a;
            padding: 60px 100px;
        }
        .page-10::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 200px;
            background: linear-gradient(to bottom, #0a0502 0%, transparent 100%);
            z-index: 4; pointer-events: none;
        }
        .page-10-bg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('images/dante-lions.jpg');
            background-size: cover; background-position: center;
            z-index: 1;
            transform: scale(1.05);
            transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .page-10-bg::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(10, 5, 2, 0.4);
        }
        .page-10-content {
            position: relative; z-index: 4;
            width: 100%;
            max-width: 60%;
            margin-left: 45%;
            margin-right: 5%;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        .page-10-column {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.6rem;
            line-height: 1.9;
            color: #f5e6c8;
            text-align: justify;
            text-shadow: 0 2px 6px rgba(0,0,0,0.8);
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .page-10.in-view .page-10-bg { transform: scale(1); }
        .page-10.in-view .page-10-column {
            opacity: 1; transform: translateY(0);
            transition: opacity 1.2s ease 0.5s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
        }
        .page-10-citation {
            font-family: 'Playfair Display', serif;
            font-size: 1rem;
            color: #e8d4a8;
            line-height: 1.6;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid rgba(212, 175, 55, 0.3);
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .page-10.in-view .page-10-citation {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 1.2s ease 1s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1s;
        }
        @media (max-width: 1024px) {
            .page-10 { padding: 60px; }
            .page-10-column { font-size: 1.4rem; }
        }
        /* =========================================
           MOBILE RESPONSIVENESS (MAX-WIDTH: 768PX)
           ========================================= */
        @media (max-width: 768px) {
            /* --- Global & Hero --- */
            .bnr-logo { top: 15px; right: 20px; }
            .bnr-logo .bnr-text, 
            .bnr-logo .bnr-sub { font-size: 0.6rem; }
            .main-title { white-space: normal; }
            .scroll-indicator { bottom: 15px; margin-top: 30px; }
            .social-media-container { display: none; }
            .page-indicator { display: none; }

            /* --- Page 1: Vita Nuova --- */
            .vn-content { width: 90%; margin: 0 auto; padding: 20px; }
            .vn-poem { font-size: 1.1rem; line-height: 1.3; }
            .vn-citation { font-size: 0.9rem; }

            /* --- Page 2: Boccaccio --- */
            .ornate-box { width: 90%; margin: 0 auto; padding: 20px; }
            .boccaccio-quote { font-size: 1.1rem; line-height: 1.5; }
            .boccaccio-citation { font-size: 0.85rem; }

            /* --- Page 3: Inferno (FIXED TAB VISIBILITY) --- */
            .inferno-quote-box { width: 90%; margin: 0 auto 15% auto; padding: 20px; }
            .inferno-quote { font-size: 1.1rem; text-align: center; }

            /* Hide panel but keep tab visible */
            .archivist-panel { 
                width: 100vw; /* Use viewport width for precise calculation */
                /* Move panel left by full screen width minus 40px tab */
                transform: translateX(calc(-100vw)); 
                overflow: visible; /* Ensure tab isn't clipped by panel overflow */
            }
            .archivist-tab { 
                height: 80px; 
                /* Anchor tab to the right edge of the hidden panel */
                right: -40px; 
                /* Ensure tab stays vertically centered */
                top: 50%;
                transform: translateY(-50%);
            }
            
            /* --- Page 4: Legacy --- */
            .page-4 { 
                padding: 40px 20px; 
                align-items: flex-start; /* Change from center to top */
                padding-top: 100px;      /* Add breathing room at the top */
                overflow-y: auto;        /* Allow scrolling if content is too long */
            }
            .page-4-column { 
                font-size: 1.1rem; 
                line-height: 1.5; 
                text-align: justify; 
            }
            .page-4-content {
                margin-top: 0;           /* Reset any auto margins */
                padding-bottom: 50px;    /* Ensure space at bottom */
            }

            /* --- Page 5: Convivio --- */
            .convivio-box { width: 90%; margin: 0 auto; padding: 25px; }
            .convivio-quote { font-size: 1.1rem; line-height: 1.4; text-align: left; }

            /* --- Page 6: Vernacular Poets --- */
            .page-6 { padding: 40px 20px; }
            .page-6-column { font-size: 1rem; line-height: 1.5; text-align: justify; }
            .page-6-content { 
                margin-left: auto !important; /* Overrides the desktop 5% margin */
            }

            /* --- Page 7: Etruria Modal --- */
            .etruria-modal .modal-content { padding: 30px; }
            .etruria-modal .modal-title { font-size: 1.5rem; }
            .etruria-modal .modal-text { font-size: 1rem; }

            /* --- Page 8: Portrait --- */
            .page-8 { padding: 40px 20px; align-items: flex-start; padding-top: 80px; }
            .page-8-content { 
                max-width: 100%; 
                margin-left: 0; 
                margin-right: 0;
                width: 100%;
            }
            .page-8-bg { 
                background-position: 15% center !important;
            }
            .page-8-column { 
                font-size: 1.1rem; 
                line-height: 1.5; 
                text-align: justify;
            }
            .page-8-citation { font-size: 0.85rem; }

            /* --- Page 9: Limbus (FIXED TAB VISIBILITY) --- */
            .limbus-quote-box { width: 90%; margin: 0 auto 15% auto; padding: 20px; }
            .limbus-quote { font-size: 1.1rem; line-height: 1.4; }

            /* Hide panel but keep tab visible */
            .archivist-panel-right { 
                width: 100vw; /* Use viewport width for precise calculation */
                /* Move panel right by full screen width minus 40px tab */
                transform: translateX(calc(100vw)); 
                overflow: visible; /* Ensure tab isn't clipped */
            }
            .archivist-tab-right { 
                height: 80px; 
                /* Anchor tab to the left edge of the hidden panel */
                left: -40px; 
                /* Ensure tab stays vertically centered */
                top: 50%;
                transform: translateY(-50%);
            }
            .page-9 { padding: 40px 20px; }

            /* --- Page 10: Lions Legacy --- */
            .page-10 { padding: 40px 20px; }
            .page-10-content { max-width: 90%; margin-left: auto; margin-right: 5%; }
            .page-10-column { font-size: 1.1rem; line-height: 1.5; text-align: justify; }
            .page-10-citation { font-size: 0.85rem; }

            /* --- Modals General --- */
            .modal-content { padding: 30px 25px; }
            .modal-citation { font-size: 0.95rem; }

                /* --- Chapter Nav Button (Mobile Fix) --- */
            .chapter-nav { 
                bottom: 40px; 
                left: 0%; 
                right: auto; 
                transform: translateX(50%); 
                width: 100%; /* Ensure container spans full width for centering */
                display: flex;
                justify-content: center;
            }
            .chapter-continue-btn { 
                padding: 12px 25px; 
                font-size: 0.9rem; 
                width: auto; /* Let content define width */
                min-width: 280px; /* Ensure enough space for single line */
                max-width: 90%; /* Prevent overflow on very small screens */
                justify-content: center; /* Center text/icon inside button */
                white-space: nowrap; /* Force text to stay on one line */
            }
        }
        /* Chapter Navigation */
        /* Chapter Navigation */
        .chapter-nav {
            position: absolute;
            bottom: 40px;
            right: 5%;
            z-index: 10;
            opacity: 0; /* Hidden initially */
            transform: translateY(20px); /* Slightly lower initially */
            transition: opacity 1s ease, transform 1s ease;
        }

        /* This rule triggers the animation when Page 10 is in view */
        .page-10.in-view .chapter-nav {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 3s; /* Waits 2 seconds before fading in */
        }
        .chapter-continue-btn {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px 30px;
            background: rgba(10, 5, 2, 0.8);
            border: 2px solid #d4af37;
            color: #f5e6c8;
            text-decoration: none;
            font-family: 'Playfair Display', serif;
            font-size: 1.1rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            transition: all 0.3s ease;
            border-radius: 4px;
        }
        .chapter-continue-btn:hover {
            background: rgba(212, 175, 55, 0.9);
            color: #0a0502;
            transform: translateX(10px);
        }
        .chapter-continue-btn .arrow-icon {
            width: 24px;
            height: 24px;
        }