:root {
            --earth-brown: #452829;
            --botanical-purple: #430A5D;
            --paper-white: #FCFAFA;
            --paper-grain: url('https://www.transparenttextures.com/patterns/felt-paper.png');
        }

        body {
            font-family: 'Source Serif 4', serif;
            background-color: var(--paper-white);
            background-image: var(--paper-grain);
            color: var(--earth-brown);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .text-earth { color: var(--earth-brown); }
        .bg-earth { background-color: var(--earth-brown); }
        .text-botanical { color: var(--botanical-purple); }
        .bg-botanical { background-color: var(--botanical-purple); }

        /* Multi-page System */
        .page-view { display: none; min-height: 100vh; }
        .page-view.active { display: block; animation: pageFadeIn 0.8s ease forwards; }
        @keyframes pageFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

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

        @keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.15); } }
        .hero-zoom { animation: slowZoom 25s infinite alternate ease-in-out; }

        /* Custom UI */
        .glass-nav { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(69, 40, 41, 0.08); }
        .tip-card { transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid transparent; position: relative; overflow: hidden; }
        .tip-card:hover { transform: translateY(-12px); border-color: var(--botanical-purple); box-shadow: 0 30px 60px -12px rgba(67, 10, 93, 0.15); }
        
        .search-overlay { display: none; opacity: 0; transition: opacity 0.3s ease; }
        .search-overlay.active { display: flex; opacity: 1; }

        .hamburger span { display: block; width: 22px; height: 1.5px; background: var(--earth-brown); margin: 5px 0; transition: 0.4s; }
        .mobile-open .span1 { transform: rotate(-45deg) translate(-4px, 4.5px); }
        .mobile-open .span2 { opacity: 0; }
        .mobile-open .span3 { transform: rotate(45deg) translate(-4px, -4.5px); }

        /* Overlap Collage */
        .collage-container { position: relative; height: 500px; }
        .collage-1 { position: absolute; width: 70%; top: 0; left: 0; z-index: 1; filter: sepia(20%); }
        .collage-2 { position: absolute; width: 50%; bottom: 0; right: 0; z-index: 2; border: 15px solid white; box-shadow: 20px 20px 50px rgba(0,0,0,0.1); }