:root {
            --warm-white: #fdfcfb;
            --stone: #e5e5e0;
            --charcoal: #1a1a1a;
            --sage: #5e6b5e;
            --sand: #c9c1b5;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--warm-white);
            color: var(--charcoal);
            overflow-x: hidden;
        }

        .serif { font-family: 'Cormorant Garamond', serif; }
        .cursive { font-family: 'Birthstone', cursive; color: var(--sage); }

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

        .mask-reveal { overflow: hidden; position: relative; }
        .mask-inner { transform: translateY(100%); transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
        .active .mask-inner { transform: translateY(0); }

        /* UI Elements */
        .btn-editorial {
            border: 1px solid var(--charcoal);
            padding: 1rem 2.5rem;
            font-size: 10px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            transition: all 0.6s ease;
            position: relative;
            overflow: hidden;
            background: transparent;
        }
        .btn-editorial:hover { background: var(--charcoal); color: white; }

        .paper-grain {
            position: fixed;
            inset: 0;
            background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png');
            opacity: 0.15;
            pointer-events: none;
            z-index: 9999;
        }

        .nav-link { 
            font-size: 10px; 
            letter-spacing: 0.25em; 
            text-transform: uppercase; 
            opacity: 0.6; 
            transition: 0.4s;
            cursor: pointer;
        }
        .nav-link:hover { opacity: 1; letter-spacing: 0.3em; }

        /* Overlay States */
        .overlay {
            position: fixed;
            inset: 0;
            background: white;
            z-index: 8000;
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease;
            overflow-y: auto;
            padding: 5vw;
        }
        .overlay.active { display: block; opacity: 1; }

        .page-node { display: none; }
        .page-node.active { display: block; }

        /* Horizontal Line Animation */
        .hr-grow { width: 0; height: 1px; background: var(--charcoal); transition: width 2s ease; }
        .active .hr-grow { width: 100%; }

        @keyframes progress { 0% { left: -100%; } 100% { left: 100%; } }
        
        .product-img-wrapper { position: relative; overflow: hidden; aspect-ratio: 4/5; }
        .product-img-wrapper img { transition: transform 1.2s ease; }
        .product-img-wrapper:hover img { transform: scale(1.05); }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .display-large { font-size: 4rem; line-height: 1; }
        }
    #mobile-menu {
  animation: slideFade .35s ease-out;
}

@keyframes slideFade {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}