:root {
            --paper: #fdfcfb;
            --ink: #121212;
            --accent: #3a5a40; /* Muted Sage/Urban Green */
            --muted: #6b7280;
            --line: rgba(18, 18, 18, 0.06);
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--paper);
            color: var(--ink);
            scroll-behavior: smooth;
        }

        .serif { font-family: 'Playfair Display', serif; }
        .cursive { font-family: 'Birthstone', cursive; }
        .mono { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.15em; }

        /* Animation System */
        .reveal { opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .page-view { display: none; }
        .page-view.active { display: block; animation: pageFade 0.8s ease forwards; }
        @keyframes pageFade { from { opacity: 0; transform: scale(0.99); } to { opacity: 1; transform: scale(1); } }

        /* Search Overlay */
        #search-overlay {
            position: fixed; inset: 0; background: rgba(253, 252, 251, 0.98);
            z-index: 20000; display: none; flex-direction: column; align-items: center; justify-content: center;
        }
        #search-overlay.active { display: flex; animation: searchPop 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
        @keyframes searchPop { from { opacity: 0; clip-path: circle(0% at 50% 50%); } to { opacity: 1; clip-path: circle(150% at 50% 50%); } }

        /* Custom UI */
        .btn-mag {
            padding: 1rem 2.5rem; border: 1.5px solid var(--ink);
            font-size: 10px; font-weight: 700; text-transform: uppercase;
            letter-spacing: 3px; transition: 0.4s; background: transparent;
            cursor: pointer; display: inline-block;
        }
        .btn-mag:hover { background: var(--ink); color: white; transform: translateY(-2px); }
        
        .journal-card { border: 1px solid var(--line); transition: 0.5s; background: white; }
        .journal-card:hover { border-color: var(--ink); box-shadow: 0 20px 40px rgba(0,0,0,0.03); }

        /* Storytelling Animation for Search Results */
        .search-result { animation: slideUp 0.6s ease forwards; opacity: 0; }
        @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

        /* Scroll Progress */
        #progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); width: 0%; z-index: 10001; transition: width 0.1s; }
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.4s ease-out forwards;
}
#mobileNav {
  animation: slideDown 0.25s ease-out forwards;
}

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