:root{--bg:#0f0f13;--card:#1a1a22;--text:#f2f2f5;--muted:#a0a0ab;--accent:#ff3b6b;}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #2a2a33;flex-wrap:wrap;gap:12px;}
.logo{font-size:22px;font-weight:800;color:var(--text);text-decoration:none;}
.logo span{color:var(--accent);}
.site-header nav a{color:var(--muted);text-decoration:none;margin-left:16px;font-size:14px;text-transform:capitalize;}
.site-header nav a:hover{color:var(--text);}
main{max-width:960px;margin:0 auto;padding:24px;}
.hero{padding:32px 0;}
.hero h1{font-size:32px;margin:0 0 8px;}
.hero p{color:var(--muted);}
.hero.small h1{font-size:24px;text-transform:capitalize;}
.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.card{background:var(--card);border-radius:12px;overflow:hidden;}
.card-img{width:100%;height:160px;object-fit:cover;display:block;background:#25252f;}
.card-img.placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;text-transform:capitalize;background:linear-gradient(135deg,#25252f,#1a1a22);}
.card-body{padding:14px 16px 18px;}
.card h2{font-size:18px;margin:8px 0;}
.card h2 a{color:var(--text);text-decoration:none;}
.card h2 a:hover{color:var(--accent);}
.tag{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:6px;}
.meta{color:var(--muted);font-size:12px;margin:4px 0;}
.snippet{color:#c9c9d2;font-size:14px;line-height:1.5;}
.article-page{max-width:720px;margin:0 auto;}
.article-page h1{font-size:28px;line-height:1.3;}
.article-page p{line-height:1.7;color:#dcdce2;font-size:16px;}
.hero-img{width:100%;max-height:420px;object-fit:cover;border-radius:12px;margin:16px 0;background:#25252f;}
.source-credit{margin-top:24px;font-size:11px;color:var(--muted);border-top:1px solid #2a2a33;padding-top:10px;}
.source-credit a{color:var(--muted);text-decoration:underline;}
.source-credit a:hover{color:var(--accent);}
.site-footer{max-width:960px;margin:0 auto;padding:24px;color:var(--muted);font-size:12px;border-top:1px solid #2a2a33;}