:root {
            --parchment: #fdfaf6;
            --ink: #1a1a1a;
            --moss: #4a5d4e;
            --sand: #e8e2d6;
            --paper-texture: url('https://www.transparenttextures.com/patterns/natural-paper.png');
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--parchment);
            background-image: var(--paper-texture);
            color: var(--ink);
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

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

        /* Loader */
        #loader {
            position: fixed; inset: 0; z-index: 100; background: var(--parchment);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            transition: opacity 1s ease-out;
        }
        .pencil-line {
            width: 0; height: 1px; background: var(--ink);
            animation: drawLine 2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
        }
        @keyframes drawLine { to { width: 240px; } }

        /* Transitions */
        .view { display: none; opacity: 0; }
        .view.active { display: block; animation: fadeIn 1s forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Scroll Reveal */
        .reveal { opacity: 0; transform: translateY(30px); transition: all 1s ease-out; }
        .reveal.visible { opacity: 1; transform: translateY(0); }

        /* Interactive Elements */
        .btn-journal {
            padding: 1rem 2rem; border: 1px solid var(--ink);
            text-transform: uppercase; font-size: 12px; font-weight: 600;
            transition: all 0.4s; position: relative; overflow: hidden;
            background: transparent; cursor: pointer;
        }
        .btn-journal:hover { background: var(--ink); color: white; letter-spacing: 0.2em; }
        
        .card-paper {
            background: white; border: 1px solid rgba(0,0,0,0.05);
            transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            box-shadow: 2px 2px 10px rgba(0,0,0,0.02);
        }
        .card-paper:hover { transform: translateY(-8px) rotate(-0.5deg); box-shadow: 20px 20px 40px rgba(0,0,0,0.05); }

        /* Typewriter Effect */
        .typing {
            overflow: hidden; border-right: .15em solid var(--ink);
            white-space: nowrap; margin: 0 auto;
            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
        }
        @keyframes typing { from { width: 0 } to { width: 100% } }
        @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--ink); } }

        /* Parallax Hero */
        .hero-img {
            background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?auto=format&fit=crop&q=80&w=2000');
            background-size: cover; background-position: center; background-attachment: fixed;
        }

        /* Custom Selection */
        ::selection { background: var(--sand); color: var(--ink); }