:root {
            --pearl: #FDFCFB;
            --mist: #F4F3F0;
            --champagne: #F2E8DF;
            --charcoal: #1A1A1A;
            --glow: rgba(255, 253, 230, 0.6);
        }

body {
    background-color: var(--pearl);
    color: var(--charcoal);
    font-family: 'Source Serif 4', serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Headings */
.serif {
    font-family: 'Libre Baskerville', serif;
    letter-spacing: -0.02em;
}

/* Handwritten / poetic accent */
.cursive {
    font-family: 'Italianno', cursive;
    font-size: 1.4em;
    letter-spacing: 0.08em;
}

/* UI / navigation / meta */
        #loader {
            position: fixed; inset: 0; background: white; z-index: 9999;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            transition: opacity 2s ease;
        }
        .logo-glow {
            font-size: 2rem; letter-spacing: 0.5em; filter: blur(10px);
            animation: focusLogo 3s forwards cubic-bezier(0.19, 1, 0.22, 1);
        }
        @keyframes focusLogo { to { filter: blur(0); opacity: 1; } }

        /* Page Transitions */
        .page-view { display: none; opacity: 0; transform: translateY(20px); transition: all 1s ease; }
        .page-view.active { display: block; opacity: 1; transform: translateY(0); }

        /* Luminous UI Components */
        .btn-luminous {
            padding: 1rem 2.5rem; border: 0.5px solid rgba(26,26,26,0.2);
            
            font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
            position: relative; overflow: hidden; transition: 0.6s;
            background: transparent;
        }
        
/* Buttons */
.btn-luminous {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
}


        .btn-luminous:hover {
            border-color: var(--charcoal);
            box-shadow: 0 0 30px var(--glow);
            transform: translateY(-2px);
        }

        .light-grain {
            position: fixed; inset: 0; pointer-events: none; z-index: 50;
            background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
            opacity: 0.03; mix-blend-mode: overlay;
        }

        /* Ambient Glow Gradients */
        .bg-glow {
            position: absolute; width: 600px; height: 600px;
            background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
            filter: blur(80px); opacity: 0.4; pointer-events: none;
            z-index: 0; animation: floatGlow 20s infinite alternate;
        }
        @keyframes floatGlow { from { transform: translate(-10%, -10%); } to { transform: translate(20%, 20%); } }

        .reveal { opacity: 0; filter: blur(10px); transition: all 1.5s ease; }
        .reveal.active { opacity: 1; filter: blur(0); }

        /* Cart & Sidebars */
        .side-panel {
            position: fixed; top: 0; right: 0; height: 100vh; width: 100%; max-width: 450px;
            background: white; z-index: 10000; transform: translateX(100%);
            transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
            padding: 3rem; display: flex; flex-direction: column;
        }
        .side-panel.active { transform: translateX(0); box-shadow: -40px 0 100px rgba(0,0,0,0.03); }

        /* Image Masking */
        .img-mask { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s cubic-bezier(0.19, 1, 0.22, 1); }
        .reveal.active .img-mask { clip-path: inset(0 0 0 0); }

        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-thumb { background: #E0DED7; }