:root {
            --primary: #007bff;
            --primary-dark: #0056b3;
            --accent: #ffc107;
            --text: #333;
            --bg: #f8f9fa;
            --border: #dee2e6;
            --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        * { box-sizing: border-box; }
        body { font-family: var(--font-stack); color: var(--text); line-height: 1.6; margin: 0; background-color: var(--bg); }
        
        header { background: #fff; border-bottom: 3px solid var(--primary); padding: 1rem 0; }
        nav { max-width: 1000px; margin: 0 auto; display: flex; gap: 20px; padding: 0 20px; }
        nav a { text-decoration: none; color: var(--primary); font-weight: bold; }

        .hero { 
            height: 300px; 
            background: linear-gradient(135deg, var(--primary), var(--primary-dark)); 
            display: flex; 
            align-items: center; 
            justify-content: center;
            color: #fff;
            text-align: center;
            padding: 20px;
        }

        .container { max-width: 800px; margin: 40px auto; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

        .author-box { display: flex; gap: 20px; margin-top: 40px; padding: 20px; border-top: 1px solid var(--border); }
        .author-img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 4px solid var(--bg); }

        footer { text-align: center; padding: 40px; font-size: 0.9rem; color: #666; }

        @media (max-width: 768px) {
            .author-box { flex-direction: column; align-items: center; text-align: center; }
        }