:root {
            --glass-white: #fdfdfd;
            --obsidian: #0a0a0a;
            --gold-dim: #9a845f;
            --zinc-300: #d4d4d8;
        }

        body {
            background-color: var(--glass-white);
            color: var(--obsidian);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .font-serif { font-family: 'Bodoni Moda', serif; }
        .font-cursive { font-family: 'Pinyon Script', cursive; }
        .font-mono { font-family: 'Space Mono', monospace; }

        /* --- Storytelling Reveal --- */
        .reveal-section {
            opacity: 0;
            transform: translateY(50px);
            transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-section.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- Micro-Interactions --- */
        .btn-editorial {
            position: relative;
            padding: 1.2rem 3rem;
            border: 1px solid rgba(0,0,0,0.15);
            text-transform: uppercase;
            letter-spacing: 0.3em;
            font-size: 0.65rem;
            font-weight: 600;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            background: transparent;
            overflow: hidden;
        }
        .btn-editorial:hover {
            color: white;
            border-color: var(--obsidian);
        }
        .btn-editorial::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 0%; height: 100%;
            background: var(--obsidian);
            z-index: -1;
            transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .btn-editorial:hover::before { width: 100%; }

        /* --- Layout Structures --- */
        .page-layer { display: none; }
        .page-layer.active { display: block; }
        
        .glass-card {
            background: rgba(255,255,255,0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.3);
        }

        .search-overlay {
            clip-path: circle(0% at 90% 10%);
            transition: clip-path 0.8s cubic-bezier(0.85, 0, 0.15, 1);
        }
        .search-overlay.active { clip-path: circle(150% at 90% 10%); }

        /* --- Scroll Progress --- */
        #scroll-path {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            height: 200px;
            width: 1px;
            background: rgba(0,0,0,0.1);
            z-index: 100;
        }
        #scroll-bar {
            width: 100%;
            background: var(--obsidian);
            height: 0%;
            transition: height 0.1s linear;
        }
    /* Custom Animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes float-slow {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-20px);
        }
    }
    
    @keyframes float-slower {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }
    
    @keyframes spin-slow {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    @keyframes spin-slower {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(-360deg);
        }
    }
    
    @keyframes gradient-shift {
        0%, 100% {
            opacity: 0.7;
        }
        50% {
            opacity: 0.9;
        }
    }
    
    @keyframes pulse-slow {
        0%, 100% {
            opacity: 0.6;
        }
        50% {
            opacity: 1;
        }
    }
    
    @keyframes pulse-slower {
        0%, 100% {
            opacity: 0.4;
        }
        50% {
            opacity: 0.8;
        }
    }
    
    @keyframes pulse-slowest {
        0%, 100% {
            opacity: 0.3;
        }
        50% {
            opacity: 0.5;
        }
    }
    
    @keyframes scroll-dot {
        0% {
            transform: translateY(0);
            opacity: 0.7;
        }
        100% {
            transform: translateY(10px);
            opacity: 0;
        }
    }
    
    @keyframes line-move {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
        }
    }
    
    @keyframes ping-slow {
        0% {
            transform: scale(1);
            opacity: 0.8;
        }
        100% {
            transform: scale(2);
            opacity: 0;
        }
    }
    
    @keyframes ping-slower {
        0% {
            transform: scale(1);
            opacity: 0.5;
        }
        100% {
            transform: scale(3);
            opacity: 0;
        }
    }
    
    @keyframes pulse-border {
        0%, 100% {
            border-color: rgba(0,0,0,0.05);
        }
        50% {
            border-color: rgba(0,0,0,0.2);
        }
    }
    
    @keyframes pulse-gentle {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.3);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
        }
    }
    
    /* Animation Classes */
    .animate-fadeInUp {
        animation: fadeInUp 1s ease forwards;
    }
    
    .animate-slideInLeft {
        animation: slideInLeft 1s ease forwards;
    }
    
    .animate-slideInRight {
        animation: slideInRight 1s ease forwards;
    }
    
    .animate-slideInUp {
        animation: slideInUp 1s ease forwards;
    }
    
    .animate-float-slow {
        animation: float-slow 6s ease-in-out infinite;
    }
    
    .animate-float-slower {
        animation: float-slower 8s ease-in-out infinite;
    }
    
    .animate-spin-slow {
        animation: spin-slow 20s linear infinite;
    }
    
    .animate-spin-slower {
        animation: spin-slower 30s linear infinite;
    }
    
    .animate-gradient-shift {
        animation: gradient-shift 10s ease-in-out infinite;
    }
    
    .animate-pulse-slow {
        animation: pulse-slow 3s ease-in-out infinite;
    }
    
    .animate-pulse-slower {
        animation: pulse-slower 5s ease-in-out infinite;
    }
    
    .animate-pulse-slowest {
        animation: pulse-slowest 8s ease-in-out infinite;
    }
    
    .animate-scroll-dot {
        animation: scroll-dot 1.5s ease-in-out infinite;
    }
    
    .animate-line-move {
        animation: line-move 10s linear infinite;
    }
    
    .animate-ping-slow {
        animation: ping-slow 3s ease-out infinite;
    }
    
    .animate-ping-slower {
        animation: ping-slower 6s ease-out infinite;
    }
    
    .animate-pulse-border {
        animation: pulse-border 2s ease-in-out infinite;
    }
    
    .animate-pulse-gentle {
        animation: pulse-gentle 2s infinite;
    }
    
    .animate-counter {
        animation: fadeInUp 1s ease forwards;
    }
    
    /* Custom Button Styles */
    .btn-editorial {
        border: 1px solid var(--primary-black);
        color: var(--primary-black);
        padding: 16px 32px;
        font-size: 12px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        background: transparent;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-editorial:hover {
        background: rgba(0,0,0,0.05);
    }
    
    /* Color Variables */
    :root {
        --primary-black: #0a0a0a;
        --accent-gold: #d4af37;
        --accent-silver: #c0c0c0;
    }
        /* Additional Animations */
    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .animate-slideUp {
        animation: slideUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    /* Parallax effect */
    .parallax-layer {
        will-change: transform;
    }
    
    /* Enhanced button styles */
    .btn-editorial {
        border: 1px solid var(--primary-black);
        color: var(--primary-black);
        padding: 12px 24px;
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        background: transparent;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-editorial:hover {
        background: rgba(0,0,0,0.05);
    }
    
    /* Custom colors */
    :root {
        --primary-black: #0a0a0a;
    }    /* Timeline animations */
    @keyframes timelineAppear {
        from {
            opacity: 0;
            transform: translateX(-50px) scale(0.9);
        }
        to {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }
    
    .animate-timeline {
        animation: timelineAppear 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    /* Sepia filter for historical images */
    .sepia {
        filter: sepia(0.3);
    }
    
    /* Enhanced button styles for dark theme */
    .btn-editorial {
        border: 1px solid currentColor;
        color: currentColor;
        padding: 12px 24px;
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        background: transparent;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-editorial:hover {
        background: rgba(255, 255, 255, 0.05);
    }
    
    /* Custom colors */
    :root {
        --accent-gold: #d4af37;
        --accent-silver: #c0c0c0;
    }