:root{--bg:#0f1115;--card:#171a21;--text:#e6e6e6;--muted:#9aa0a6;--accent:#d4a017}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
header{border-bottom:1px solid #23262e}nav,main,footer{max-width:860px;margin:0 auto;padding:16px}
nav{display:flex;justify-content:space-between;align-items:center}nav .logo{font-weight:800;color:var(--text);letter-spacing:1px}
nav .links a{margin-left:16px;color:var(--muted)}
img{max-width:100%;display:block;border-radius:10px}
.hero{position:relative;margin:16px 0}.hero h1{position:absolute;left:24px;bottom:20px;margin:0;font-size:32px;text-shadow:0 2px 12px #000}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.post{background:var(--card);border-radius:12px;padding:14px;overflow:hidden}
.post img{margin:-14px -14px 12px;width:calc(100% + 28px);max-width:none;border-radius:0}
.post h2{margin:0 0 6px;font-size:19px}.meta{color:var(--muted);font-size:14px;margin-bottom:8px}
article h1{line-height:1.25}article h2{margin-top:28px}article img{margin:18px 0}
footer{color:var(--muted);font-size:14px;border-top:1px solid #23262e;margin-top:40px}