:root {
            --maroon: #432323;
            --beige: #D2C1B6;
            --soft-yellow: #FFF4B7;
            --off-white: #E2DFD0;
            --purple: #32012F;
        }

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

        .artistic { font-family: 'Kaushan Script', cursive; }
        .serif { font-family: 'Playfair Display', serif; }

        /* --- Header Hide/Show Logic --- */
        #main-header {
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
        }
        #main-header.nav-hidden {
            transform: translateY(-110%);
        }

        /* --- Marquee Animation --- */
        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .marquee-container { overflow: hidden; white-space: nowrap; }
        .marquee-content { display: inline-block; animation: marquee 40s linear infinite; }

        /* --- Hero Particles --- */
        .particle-canvas {
            position: absolute; inset: 0; pointer-events: none; z-index: 0;
        }
        @keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 0.6; transform: scale(1); } }
        .sparkle { position: absolute; background: white; border-radius: 50%; animation: sparkle 4s infinite; }

        /* --- Diagonal Card Design --- */
        .diagonal-card {
            transform: skewY(-3deg);
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .diagonal-card > div { transform: skewY(3deg); }
        .diagonal-card:hover {
            transform: skewY(0deg) scale(1.03);
            box-shadow: 0 40px 60px -15px rgba(67, 35, 35, 0.3);
            z-index: 10;
        }

        /* --- Modals & Overlays --- */
        .overlay {
            position: fixed; inset: 0; background: rgba(50, 1, 47, 0.9);
            backdrop-filter: blur(15px); z-index: 9999;
            display: none; align-items: center; justify-content: center; opacity: 0; transition: 0.4s;
        }
        .overlay.active { opacity: 1; display: flex; }
        .modal-body {
            background: var(--off-white); width: 90%; max-width: 1100px;
            max-height: 85vh; border-radius: 40px; overflow-y: auto; position: relative;
        }

        /* --- Navigation Hover --- */
        .nav-btn { position: relative; font-size: 1.5rem; transition: 0.3s; }
        .nav-btn::after {
            content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px;
            background: var(--maroon); transition: 0.3s;
        }
        .nav-btn:hover::after { width: 100%; }

        /* --- Animations --- */
        .reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal-on-scroll.active { opacity: 1; transform: translateY(0); }

        .image-float { animation: float 6s ease-in-out infinite; }
        @keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-15px) rotate(2deg); } }

        /* View Switching */
        .page-view { display: none; }
        .page-view.active { display: block; }