:root { --bg:#0d1117; --fg:#c9d1d9; --mut:#8b949e; --acc:#58a6ff; --card:#161b22; --br:#30363d; }
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.container { max-width:880px; margin:0 auto; padding:0 1.25rem; }
header { padding:3rem 0 1.5rem; border-bottom:1px solid var(--br); }
header h1 { margin:0; font-size:2rem; letter-spacing:-0.5px; }
header .tag { margin:0.25rem 0 0; color:var(--mut); font-size:0.95rem; }
main { padding:2rem 0 3rem; }
.hero { display:grid; gap:1.5rem; margin:2rem 0 3rem; }
.hero img { width:100%; height:auto; border-radius:8px; display:block; }
.hero h2 { margin:0 0 0.75rem; font-size:1.5rem; }
.posts { display:grid; gap:2rem; }
.card { background:var(--card); border:1px solid var(--br); border-radius:8px; overflow:hidden; }
.card img { width:100%; height:220px; object-fit:cover; display:block; }
.card h3 { margin:1rem 1.25rem 0.5rem; font-size:1.2rem; }
.card p { margin:0 1.25rem 1rem; }
.card p.meta { color:var(--mut); font-size:0.85rem; font-style:italic; margin-bottom:1.25rem; }
.soon { margin:3rem 0 0; padding:1.5rem; background:var(--card); border:1px dashed var(--br); border-radius:8px; }
.soon h2 { margin:0 0 0.5rem; }
.soon p { margin:0; color:var(--mut); }
footer { border-top:1px solid var(--br); padding:1.5rem 0; color:var(--mut); font-size:0.9rem; }
@media (min-width: 720px) {
  .hero { grid-template-columns: 1fr 1fr; align-items:center; }
  .posts { grid-template-columns: 1fr 1fr; }
  .posts .card:first-child { grid-column: 1 / -1; }
  .posts .card:first-child img { height:300px; }
}