:root {
            --paper: #FDFDFB;
            --ink: #121212;
            --accent: #2A4D4D;
            --gold: #A68966;
        }

        body {
            background-color: var(--paper);
            color: var(--ink);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            line-height: 1.6;
        }

        .serif-display { font-family: 'Playfair Display', serif; font-weight: 900; letter-spacing: -0.05em; }
        .cursive { font-family: 'Cormorant Garamond', serif; font-style: italic; }
        
        /* Typography Scale */
        .text-huge { font-size: clamp(3rem, 15vw, 12rem); line-height: 0.85; }

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

        .line-draw { height: 1px; background: var(--ink); width: 0; transition: width 1.5s ease-out; }
        .reveal.active .line-draw { width: 100%; }

        /* Navigation */
        .nav-link { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.3em; position: relative; padding-bottom: 4px; }
        .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--ink); transition: width 0.3s ease; }
        .nav-link:hover::after { width: 100%; }

        /* Cart Badge */
        .cart-count { background: var(--accent); color: white; border-radius: 50%; width: 16px; height: 16px; font-size: 10px; display: flex; align-items: center; justify-content: center; position: absolute; -top: 8px; -right: 8px; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: var(--paper); }
        ::-webkit-scrollbar-thumb { background: var(--ink); }

        .page { display: none; }
        .page.active { display: block; animation: fadeIn 1s ease forwards; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* Hero Background Animation */
        .hero-bg {
            position: absolute; inset: 0; overflow: hidden; z-index: -1;
            background: radial-gradient(circle at 50% 50%, #f0f0f0 0%, #fdfdfb 100%);
        }
        .floating-shape {
            position: absolute; border: 1px solid rgba(0,0,0,0.03); border-radius: 50%;
            animation: float 20s infinite linear;
        }
        @keyframes float { 0% { transform: translate(0,0) rotate(0deg); } 100% { transform: translate(100px, 100px) rotate(360deg); } }

        /* Modal Blur */
        .modal-bg { backdrop-filter: blur(15px); background: rgba(253, 253, 251, 0.95); }