:root{ --primary:#cc0000; --text:#222; --muted:#666; --bg:#fafafa; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; color:var(--text); background:var(--bg); }
.container{ width:min(1100px, 92%); margin:0 auto; }
.site-header{ background:#fff; border-bottom:1px solid #eee; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; }
.brand{ display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--text); font-weight:700; }
.logo{ height:36px; width:auto; }
.site-nav a{ margin-left:14px; text-decoration:none; color:var(--text); font-weight:600; }
.site-nav a:hover{ color:var(--primary); }
h1,h2,h3{ line-height:1.2; }
.hero{ padding:28px 0; }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.card{ background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.04); }
.card img{ width:100%; height:150px; object-fit:cover; display:block; }
.card .p{ padding:12px; }
.meta{ color:var(--muted); font-size:.9rem; }
.site-footer{ background:#fff; border-top:1px solid #eee; margin-top:40px; }
.site-footer .container{ padding:20px 0; text-align:center; color:var(--muted); }

/* Comment box top */
.comment-box-top{ background:#fff5f5; border:1px solid #ffcccc; border-radius:10px; padding:15px; margin:20px 0; box-shadow:0 2px 6px rgba(0,0,0,0.05); }
.comment-form textarea{ width:100%; padding:10px; border-radius:6px; border:1px solid #ddd; resize:vertical; font-family:inherit; }
.comment-form button{ background:var(--primary); color:#fff; border:none; padding:8px 14px; border-radius:6px; cursor:pointer; margin-top:8px; }
.comment-form button:hover{ filter:brightness(.9); }

.article{ background:#fff; border:1px solid #eee; border-radius:12px; padding:18px; }
.cover{ width:100%; height:260px; object-fit:cover; border-radius:10px; margin:8px 0 14px; }