html { scroll-behavior: smooth; }
body { min-height: 100vh; font-family: Inter, sans-serif; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background:#064e3b; color:white; padding:.75rem 1rem; border-radius:.5rem; }
.skip-link:focus { top:1rem; }
.nav-link { color:#475569; font-size:.9rem; font-weight:600; transition:.2s; }
.nav-link:hover, .nav-link.active { color:#059669; }
.mobile-link { display:block; padding:.75rem .5rem; color:#475569; font-weight:600; border-radius:.5rem; }
.mobile-link:hover { background:#f8fafc; color:#059669; }
.search-input { width:14rem; border:1px solid #e2e8f0; border-radius:999px; background:#f8fafc; padding:.65rem 1rem .65rem 2.5rem; font-size:.875rem; outline:none; transition:.2s; }
.search-input:focus { background:white; border-color:#059669; box-shadow:0 0 0 3px rgba(5,150,105,.12); }
.hero-grid { background: radial-gradient(circle at 15% 20%, rgba(16,185,129,.12), transparent 35%), #fff; }
.article-content { color:#334155; font-size:1.05rem; line-height:1.85; }
.article-content h2 { margin:2.25rem 0 .85rem; color:#0f172a; font-size:1.65rem; font-weight:800; }
.article-content h3 { margin:1.75rem 0 .7rem; color:#0f172a; font-size:1.25rem; font-weight:800; }
.article-content p { margin:0 0 1rem; }
.article-content ul, .article-content ol { margin:0 0 1.25rem; padding-left:1.5rem; }
.article-content li { margin:.45rem 0; }
.article-content a { color:#047857; text-decoration:underline; }
.card-image { aspect-ratio: 16/9; object-fit:cover; transition:transform .5s ease; }
.post-card:hover .card-image { transform:scale(1.04); }
.keyword-tag { display:inline-flex; padding:.3rem .55rem; border-radius:999px; background:#f1f5f9; color:#64748b; font-size:.7rem; font-weight:600; }
.footer-link { display:block; color:#94a3b8; }
.footer-link:hover { color:#34d399; }
.toast { position:fixed; right:1rem; bottom:1rem; z-index:100; max-width:22rem; transform:translateY(150%); opacity:0; background:#0f172a; color:white; padding:.9rem 1rem; border-radius:.75rem; box-shadow:0 10px 30px rgba(0,0,0,.18); transition:.25s; font-size:.875rem; }
.toast.show { transform:translateY(0); opacity:1; }
@media (max-width:640px) { .search-input { width:100%; } .article-content { font-size:1rem; } }