:root{--bg:#f8fbfb;--card:#ffffff;--text:#0f1724;--muted:#576268;--accent:#0b3d91;--accent-2:#00a884}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0; background:linear-gradient(180deg,#f8fbfb 0%, #eef7f6 100%); color:var(--text); -webkit-font-smoothing:antialiased}
.container{max-width:1040px;margin:36px auto;padding:24px}
.banner{width:100%;border-radius:12px;overflow:hidden;box-shadow:0 14px 40px rgba(2,6,23,0.08);margin-bottom:22px}
.header{display:flex;align-items:flex-start;gap:18px}
h1,h2,h3{font-family:'Merriweather', Georgia, 'Times New Roman', serif;margin:0}
h1{font-size:34px}
.meta{color:var(--muted);margin-top:6px}
nav{margin-top:12px}
a{color:var(--accent);text-decoration:none}
.button{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:8px 14px;border-radius:10px;border:none;text-decoration:none}
.grid{display:grid;grid-template-columns:1fr 320px;gap:26px}
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(2,6,23,0.04)}
.post-list{margin-top:22px}
.post{background:transparent;border-radius:10px;padding:14px;margin:14px 0;transition:transform .22s ease, box-shadow .22s ease}
.post:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,0.08)}
.post h2{margin:0 0 6px 0}
.meta-small{color:var(--muted);font-size:0.95rem}
.footer{margin-top:40px;color:var(--muted);font-size:0.9rem}
.fade-in{animation:fadeIn .6s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:980px){.grid{grid-template-columns:1fr} h1{font-size:28px}}