body {
            font-family: 'Noto Serif', serif;
            background-color: #F5E9D8;
            color: #3E2C23;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Narrative Texture Overlay */
        body::before {
            content: "";
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: url('https://www.transparenttextures.com/patterns/pinstriped-suit.png');
            opacity: 0.04;
            pointer-events: none;
            z-index: 999;
        }

        /* Timeline Elements */
        .timeline-line {
            width: 1px;
            background: linear-gradient(to bottom, transparent, #E76F2E 10%, #3E2C23 90%, transparent);
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            height: 100%;
            z-index: 0;
        }

        .timeline-node {
            width: 12px;
            height: 12px;
            background: #E76F2E;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            box-shadow: 0 0 20px rgba(231, 111, 46, 0.4);
        }

        /* Animations */
        @keyframes hero-bg {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .animated-hero {
            background: linear-gradient(-45deg, #F5E9D8, #e8ddd0, #dcd0c0, #F5E9D8);
            background-size: 400% 400%;
            animation: hero-bg 15s ease infinite;
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Custom Hover Effects */
        .card-overlap {
            transition: transform 0.5s ease, box-shadow 0.5s ease;
        }
        .card-overlap:hover {
            transform: translateY(-15px) rotate(0deg) !important;
            box-shadow: 0 30px 60px -12px rgba(62, 44, 35, 0.2);
            z-index: 40 !important;
        }

        /* Multi-page System */
        .page-content { display: none; }
        .page-content.active { display: block; }

        /* Loader */
        #loader {
            position: fixed;
            inset: 0;
            background: #3E2C23;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.8s ease;
        }

        .rotate-slow { animation: rotate 30s linear infinite; }
        @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }