:root {
            --dark-red: #8B0000;
            --pure-black: #000000;
            --pure-white: #FFFFFF;
            --overlay-red: rgba(139, 0, 0, 0.4);
        }

        body {
            background-color: var(--pure-black);
            color: var(--pure-white);
            font-family: 'Playfair Display', serif;
            margin: 0;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Typography */
        .cursive-heading { font-family: 'Kaushan Script', cursive; letter-spacing: 2px; }
        .cursive-body { font-family: 'Dancing Script', cursive; }
        
        /* Layout Fixes */
        .page-view { display: none; opacity: 0; transform: translateY(20px); transition: all 0.6s ease-in-out; }
        .page-view.active { display: block; opacity: 1; transform: translateY(0); }

        /* Hero Split & Animation */
        .hero-split { height: 100vh; display: flex; flex-wrap: wrap; }
        .hero-left { flex: 1; min-width: 50%; display: flex; align-items: center; padding: 5rem; z-index: 10; background: linear-gradient(135deg, #000 60%, #8B000055); }
        .hero-right { flex: 1; min-width: 50%; position: relative; overflow: hidden; }
        
        .hero-bg-anim {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: url('https://i.pinimg.com/736x/1c/5b/ab/1c5baba4c27b2057feacd5ee6a296b18.jpg');
            background-size: cover;
            background-position: center;
            animation: panImage 30s infinite alternate linear;
            filter: grayscale(40%) contrast(120%);
        }

        @keyframes panImage {
            0% { transform: scale(1) translate(0, 0); }
            100% { transform: scale(1.2) translate(-5%, -5%); }
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, #000 5%, transparent 100%), 
                        linear-gradient(to top, #8B000055, transparent 50%);
        }

        /* Nav Styles */
        #main-nav { transition: all 0.4s ease; }
        #main-nav.scrolled { background: rgba(0,0,0,0.95); padding: 1rem 0; border-bottom: 1px solid var(--dark-red); }
        .nav-link { position: relative; padding-bottom: 4px; }
        .nav-link::after { 
            content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; 
            background: var(--dark-red); transition: width 0.3s ease; 
        }
        .nav-link:hover::after { width: 100%; }
        .nav-link:hover { text-shadow: 0 0 10px var(--dark-red); }

        /* Card Effects */
        .fact-card {
            background: var(--dark-red);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid rgba(255,255,255,0.1);
            cursor: pointer;
        }
        .fact-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 25px 50px -12px rgba(139, 0, 0, 0.5);
        }
        .fact-card h3 { animation: textGlow 2s infinite alternate; }

        @keyframes textGlow {
            0% { text-shadow: 0 0 0px #fff; }
            100% { text-shadow: 0 0 8px rgba(255,255,255,0.6); }
        }

        /* Horizontal Scroll */
        .story-scroller {
            display: flex;
            overflow-x: auto;
            gap: 2rem;
            padding: 2rem 0;
            scrollbar-width: none;
            cursor: grab;
        }
        .story-scroller::-webkit-scrollbar { display: none; }
        .story-item {
            min-width: 350px;
            height: 500px;
            background: #000;
            border: 2px solid var(--dark-red);
            border-radius: 15px;
            transition: 0.5s;
            overflow: hidden;
            position: relative;
        }
        .story-item:hover { transform: scale(1.05); z-index: 5; }
        .story-item img {
            width: 100%; height: 100%; object-fit: cover;
            filter: grayscale(100%) contrast(110%);
            transition: 0.8s;
        }
        .story-item:hover img { filter: grayscale(0%) contrast(100%); }

        /* Filter Tabs */
        .filter-tab {
            padding: 0.8rem 2rem;
            border: 1px solid var(--dark-red);
            cursor: pointer;
            transition: 0.3s;
        }
        .filter-tab.active {
            background: var(--dark-red);
            color: white;
        }

        /* Diagonal Cuts */
        .diagonal-top { clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%); }
        .diagonal-bottom { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }

        /* Quick View Modal */
        #quickview-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.95);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        #quickview-modal.visible { display: flex; }