body { background-color: #FBFAF8; color: #0F172A; overflow-x: hidden; }
        
        /* Grain & Texture */
        .grain-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: url('https://grainy-gradients.vercel.app/noise.svg');
            opacity: 0.04; pointer-events: none; z-index: 9999;
        }

        /* Animations */
        .page-transition { animation: slideUpFade 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { 
            from { opacity: 0; transform: translateY(30px); } 
            to { opacity: 1; transform: translateY(0); } 
        }

        /* Typography Extras */
        .drop-cap::first-letter {
            font-family: 'Playfair Display', serif;
            font-size: 5.5rem;
            float: left;
            line-height: 0.7;
            margin-right: 0.1em;
            margin-top: 0.1em;
            color: #C6A25E;
        }

        .reading-width { max-width: 720px; }
        .active-nav { border-bottom: 2px solid #C6A25E; color: #0F172A !important; }

        /* Custom Elements */
        .editorial-rule { height: 1px; background: linear-gradient(to right, transparent, #D6C6B8, transparent); width: 100%; margin: 4rem 0; }
        
        #cursor {
            width: 12px; height: 12px; background: #C6A25E; border-radius: 50%;
            position: fixed; pointer-events: none; z-index: 10000;
            transition: transform 0.15s ease-out; mix-blend-mode: multiply;
        }

        /* Responsive Mobile Menu */
        @media (max-width: 768px) {
            .mobile-hide { display: none; }
            .mobile-stack { flex-direction: column; text-align: center; }
        }
  /* Typewriter effect */
  #typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 0.15em solid transparent;
  }

  .blink {
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
  }

  /* Marquee animation */
  @keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }

  .animate-marquee {
    animation: marquee 20s linear infinite;
  }