:root {
            --teal-green: #44A194;
            --pure-white: #FFFFFF;
            --soft-blue: #5682B1;
            --deep-forest: #1C352D;
            --ivory: #F9F9F7;
        }

        body {
            font-family: 'Baskervville', serif;
            background-color: var(--pure-white);
            color: var(--deep-forest);
            overflow-x: hidden;
        }

        .font-sans { font-family: 'Inter', sans-serif; }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .parallax-bg {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .asymmetric-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 1rem;
        }

        .horizontal-scroll {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
        }
        .horizontal-scroll::-webkit-scrollbar { display: none; }

        .floating-img {
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .floating-img:hover {
            transform: scale(1.05) rotate(0deg) !important;
            z-index: 10;
        }

        .glass-nav {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(28, 53, 45, 0.05);
        }

        .btn-atelier {
            background: var(--teal-green);
            color: white;
            padding: 0.8rem 2rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.75rem;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-atelier:hover {
            background: var(--deep-forest);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(28, 53, 45, 0.1);
        }

        .cart-drawer {
            transform: translateX(100%);
            transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        }
        .cart-drawer.open { transform: translateX(0); }

        .modal-overlay {
            background: rgba(28, 53, 45, 0.4);
            backdrop-filter: blur(8px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        .modal-overlay.open { opacity: 1; pointer-events: auto; }

        .grain {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: url('https://www.transparenttextures.com/patterns/stardust.png');
            opacity: 0.05;
            pointer-events: none;
            z-index: 9999;
        }

        /* Filter Pills */
        .filter-pill {
            padding: 0.5rem 1.5rem;
            border: 1px solid var(--teal-green);
            border-radius: 9999px;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s;
        }
        .filter-pill.active {
            background: var(--teal-green);
            color: white;
        }