:root { --bg:#ffffff; --fg:#111; --muted:#555; --accent:#0e7afe; --border:#eaeaea; --card:#fafafa; --maxw:920px; --radius:16px; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; line-height:1.55;}
.container{ max-width:var(--maxw); margin:0 auto; padding:24px;}
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--border);}
.brand{ font-weight:700; font-size:1.1rem; letter-spacing:.2px;}
.navlinks a{ margin-left:16px; text-decoration:none; color:var(--fg); }
.navlinks a:hover{ color:var(--accent); }
.hero{ display:grid; grid-template-columns:120px 1fr; gap:20px; align-items:center; margin:28px 0 8px;}
.hero img{ width:120px; height:120px; border-radius:50%; object-fit:cover; }
.hero h1{ margin:0; font-size:1.8rem; }
.hero p{ margin:8px 0 0; color:var(--muted); }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin:24px 0 8px;}
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px;}
.card h3{ margin:0 0 6px 0; font-size:1.05rem;}
.card p{ margin:8px 0 0; color:var(--muted); }
.footer{ margin-top:48px; padding:24px 0; border-top:1px solid var(--border); color:var(--muted); font-size:.95rem;}
a{ color:var(--accent); } a:hover{ opacity:.9; }
hr{ border:none; border-top:1px solid var(--border); margin:24px 0; }
ul.inline{ list-style:none; padding:0; margin:0; display:flex; gap:10px; flex-wrap:wrap;}
.badge{ display:inline-block; padding:2px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted) }
.publist li{ margin-bottom:12px; } .publist{ padding-left:18px; }
.postlist li{ margin-bottom:10px; } .postlist{ padding-left:18px; }
blockquote{ margin:0; padding:12px 16px; background:#fcfcfc; border-left:3px solid var(--border); }