:root {
            --navy: #0F172A;
            --emerald: #10B981;
            --paper: #FDFDFD;
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--paper);
            color: #334155;
            scroll-behavior: smooth;
        }
        .font-serif { font-family: 'Playfair Display', serif; }
        
        .reading-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 4px;
            background: var(--emerald);
            z-index: 1000;
            transition: width 0.1s ease-out;
        }

        .article-card {
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        }
        .article-card:hover {
            transform: translateY(-12px);
        }

        .drop-cap::first-letter {
            float: left;
            font-family: 'Playfair Display', serif;
            font-size: 5.5rem;
            line-height: 0.65;
            padding-top: 10px;
            padding-right: 12px;
            color: var(--navy);
            font-weight: bold;
        }

        .premium-shadow {
            box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.08);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade { animation: fadeIn 0.6s ease-out forwards; }

        #typewriter::after {
    content: "|";
    margin-left: 6px;
    opacity: 1;
    animation: blink 1s infinite;
}

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