/* ---------- post card ---------- */
.cards{display:grid; gap:16px}
.card{
  border:1px solid var(--line); background:var(--panel); border-radius:var(--radius);
  padding:22px 24px; transition:transform .18s, border-color .18s, box-shadow .18s;
}
.card:hover{transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--shadow); text-decoration:none}
.card h2{margin:0 0 8px; font-size:19px; line-height:1.45; color:var(--text)}
.card .ex{color:var(--text-soft); font-size:14.5px; margin:0 0 14px}
.metaline{display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--muted)}
.metaline .sep{opacity:.4}

/* ---------- chips ---------- */
.chip{
  display:inline-block; font-size:12.5px; padding:3px 10px; border-radius:999px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text-soft);
}
.chip:hover{color:var(--accent); border-color:var(--accent); text-decoration:none}
.chip.cat{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.chips{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- article ---------- */
.article{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:40px 44px; margin-bottom:24px;
}
.article h1{font-size:29px; line-height:1.35; margin:0 0 14px; letter-spacing:-.4px}
.article .meta{font-size:13.5px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:26px}
.md{font-size:16px; line-height:1.85; color:var(--text); word-wrap:break-word}
.md h1,.md h2,.md h3,.md h4{line-height:1.4; margin:1.7em 0 .7em; letter-spacing:-.2px}
.md h1{font-size:24px} .md h2{font-size:21px; border-bottom:1px solid var(--line); padding-bottom:.35em}
.md h3{font-size:18px} .md h4{font-size:16px; color:var(--text-soft)}
.md p{margin:0 0 1.15em}
.md ul,.md ol{margin:0 0 1.15em; padding-left:1.6em}
.md li{margin:.3em 0}
.md blockquote{
  margin:1.2em 0; padding:.6em 1em; border-left:3px solid var(--accent);
  background:var(--panel-2); color:var(--text-soft); border-radius:0 8px 8px 0;
}
.md blockquote p:last-child{margin:0}
.md code{
  font-family:var(--mono); font-size:.88em; background:var(--panel-2);
  padding:.15em .45em; border-radius:5px; border:1px solid var(--line);
}
.md pre{background:var(--bg-soft)!important; border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; overflow:auto; margin:1.3em 0; line-height:1.6}
.md pre code{background:none; border:0; padding:0; font-size:13.5px}
.md table{border-collapse:collapse; width:100%; margin:1.3em 0; font-size:14.5px; display:block; overflow:auto}
.md th,.md td{border:1px solid var(--line); padding:8px 12px; text-align:left}
.md th{background:var(--panel-2); font-weight:600}
.md img{display:block; margin:1.2em auto}
.md a{text-decoration:underline; text-underline-offset:2px}

/* ---------- pager / comments ---------- */
.pager{display:flex; gap:14px; margin-bottom:30px}
.pager a{flex:1; border:1px solid var(--line); background:var(--panel); border-radius:var(--radius);
  padding:16px 20px; color:var(--text-soft); font-size:14px}
.pager a:hover{border-color:var(--accent); color:var(--text); text-decoration:none}
.pager a span{display:block; font-size:12px; color:var(--muted); margin-bottom:3px}
.pager .next{text-align:right}

.comments{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:30px 34px}
.comments h3{margin:0 0 20px; font-size:17px}
.cm{display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line)}
.cm:first-of-type{border-top:0}
.av{width:38px;height:38px;border-radius:50%;flex:0 0 38px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.cm-body{flex:1; min-width:0}
.cm-head{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.cm-author{font-weight:600; font-size:14.5px}
.cm-date{font-size:12.5px; color:var(--muted)}
.cm-text{margin:5px 0 0; font-size:14.5px; color:var(--text-soft); white-space:pre-wrap; word-break:break-word}

/* ---------- misc ---------- */
.page-head{display:flex; align-items:baseline; gap:12px; margin:0 0 24px}
.page-head h1{font-size:26px; margin:0; letter-spacing:-.3px}
.page-head .n{color:var(--muted); font-size:14px}
.pager-num{display:flex; gap:8px; justify-content:center; margin-top:30px; flex-wrap:wrap}
.pager-num a,.pager-num span{border:1px solid var(--line); background:var(--panel); min-width:38px; height:38px;
  border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; padding:0 12px}
.pager-num a:hover{border-color:var(--accent); text-decoration:none}
.pager-num .on{background:var(--accent-soft); color:var(--accent); border-color:transparent; font-weight:600}
.year{margin:0 0 8px; font-size:20px; color:var(--text-soft); font-weight:700}
.year-group{margin-bottom:26px}
.alist{list-style:none; margin:0; padding:0}
.alist li{display:flex; gap:16px; padding:9px 0; border-bottom:1px dashed var(--line); align-items:baseline; flex-wrap:wrap}
.alist time{color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; flex:0 0 92px}
.tagcloud{display:flex; flex-wrap:wrap; gap:10px}
.tagcloud a{font-size:14px}
.grid2{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.catbox{border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); padding:18px 20px}
.catbox:hover{border-color:var(--accent); text-decoration:none}
.catbox h3{margin:0 0 4px; font-size:16px; color:var(--text)}
.catbox p{margin:0 0 10px; font-size:13px; color:var(--muted)}
.empty{color:var(--muted); text-align:center; padding:60px 0}

@media (max-width:760px){
  .article{padding:26px 20px}
  .comments{padding:22px 20px}
  .alist time{flex-basis:auto}
}