:root {
            --parchment: #fcfaf7;
            --charcoal: #1a1a1a;
            --amber: #d97706;
            --olive: #556b2f;
            --earth: #78350f;
        }
        
        body { 
            font-family: 'Lora', serif; 
            background-color: var(--parchment); 
            color: var(--charcoal);
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        .serif-heading { font-family: 'Playfair Display', serif; }
        .literary-serif { font-family: 'Cormorant Garamond', serif; }
        .sans { font-family: 'Inter', sans-serif; }

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

        .drop-cap::first-letter {
            float: left;
            font-family: 'Playfair Display', serif;
            font-size: clamp(4rem, 10vw, 6rem);
            line-height: 0.8;
            padding: 8px 16px 0 0;
            color: var(--earth);
        }

        .glass-nav {
            background: rgba(252, 250, 247, 0.9);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(26, 26, 26, 0.08);
        }

        .story-card:hover .story-img { transform: scale(1.05); }

        .nav-link { 
            font-family: 'Inter', sans-serif;
            font-size: 0.75rem; 
            font-weight: 600; 
            text-transform: uppercase; 
            letter-spacing: 0.25em; 
            transition: 0.4s; 
        }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        .animate-fade { animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

        .reading-progress {
            position: fixed;
            top: 0; left: 0; height: 3px;
            background: var(--amber);
            z-index: 2001;
            transition: width 0.1s;
        }

        .no-scrollbar::-webkit-scrollbar { display: none; }
        
        .reveal { opacity: 0; transform: translateY(50px); transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .mobile-menu {
            transform: translateX(100%);
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .mobile-menu.open { transform: translateX(0); }

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

        @media (max-width: 1024px) {
            .parallax-bg { background-attachment: scroll; }
        }