:root{--bg0:#0f120f;--text0:#f6f7f2;--card:#fcfcf8;--muted:#aeb3a5;--shadow: 0 10px 30px rgba(0,0,0,0.12)}
html{background:var(--bg0)}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text0)}
a{color:inherit}

.hero{display:flex;gap:24px;padding:44px 18px 30px;border-radius:24px;background:var(--bg0)}
.hero h1{margin:0;font-size:40px;line-height:0.9;font-weight:800}
.hero .sub{margin:0;margin-top:6px;opacity:.92;max-width:34ch}
.grid{padding:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:var(--card);color:#151714;border-radius:22px;box-shadow:var(--shadow);padding:18px;text-decoration:none}
.card:hover{transform:translateY(-1px);transition:transform .15s ease}
.card .meta{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px 0}
.card .title{margin:0;font-size:18px;line-height:1.1;font-weight:700}
.card .desc{margin:10px 0 0 0;color:#41463a;font-size:14px}

.post{padding:18px}
.post h1{margin:18px 0 6px 0;font-size:28px;line-height:1.05}
.post .meta{margin:0;color:var(--muted)}
.post p{line-height:1.55;max-width:70ch}
.post footer{margin-top:30px;opacity:.75;font-size:12px}