/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height:1.7; color:#333; background:#fafafa; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
header { background:white; border-bottom:1px solid #eee; padding:1rem 0; }
header .container { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.logo img { max-height:50px; }
nav ul { list-style:none; display:flex; gap:2rem; }
nav a { text-decoration:none; color:#333; font-weight:500; }
nav a:hover { color:#0070f3; }
main { min-height:70vh; padding:3rem 0; }
h1 { font-size:2.5rem; margin-bottom:2rem; color:#111; }
.article-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:2rem; }
.card { background:white; border-radius:12px; padding:1.5rem; box-shadow:0 5px 15px rgba(0,0,0,0.05); transition:transform 0.2s, box-shadow 0.2s; border:1px solid #eee; }
.card:hover { transform:translateY(-4px); box-shadow:0 10px 25px rgba(0,0,0,0.1); }
.card h2 { font-size:1.5rem; margin-bottom:0.5rem; }
.card h2 a { color:#111; text-decoration:none; }
.card p { color:#555; margin-bottom:1rem; }
.read-more { color:#0070f3; text-decoration:none; font-weight:500; }
.read-more:hover { text-decoration:underline; }
.post { max-width:800px; margin:0 auto; background:white; padding:2.5rem; border-radius:16px; box-shadow:0 5px 20px rgba(0,0,0,0.05); }
.post h1 { font-size:2.8rem; margin-bottom:1.5rem; border-bottom:2px solid #f0f0f0; padding-bottom:1rem; }
.post-content { font-size:1.2rem; line-height:1.8; color:#2d2d2d; }
.back-link { margin-top:2rem; text-align:center; }
.back-link a { display:inline-block; padding:0.6rem 1.5rem; background:#0070f3; color:white; border-radius:40px; text-decoration:none; }
.back-link a:hover { background:#0051b3; }
footer { background:white; border-top:1px solid #eee; padding:2rem 0; text-align:center; color:#777; }
footer a { color:#0070f3; text-decoration:none; }
@media (max-width:600px) { h1 { font-size:2rem; } .post { padding:1.5rem; } .post h1 { font-size:2rem; } nav ul { gap:1rem; } }