/* 文章页样式 —— 复用 suite.css 的设计变量（--ink/--brand/--line 等） */

.page{max-width:var(--page-narrow);margin:26px auto 0;padding:0 20px}

.post{padding:34px 40px 30px}
.post-title{margin:0 0 22px;font-size:24px;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.35}

/* ---------- 正文排版 ---------- */
.post-body{font-size:14.5px;line-height:1.85;color:var(--ink-2)}
.post-body h2,.post-body h3,.post-body h4{color:var(--ink);font-weight:650;letter-spacing:-.01em;line-height:1.4}
.post-body h2{font-size:18px;margin:30px 0 12px;padding-top:22px;border-top:1px solid var(--line-2)}
.post-body h2:first-child{margin-top:4px;padding-top:0;border-top:0}
.post-body h3{font-size:15.5px;margin:24px 0 10px}
.post-body h4{font-size:14.5px;margin:20px 0 8px}
.post-body p{margin:10px 0}
.post-body a{color:var(--brand-ink);text-decoration:none;border-bottom:1px solid var(--brand-line);transition:border-color var(--t-fast)}
.post-body a:hover{border-bottom-color:var(--brand)}
.post-body strong{color:var(--ink);font-weight:650}
.post-body ul,.post-body ol{margin:10px 0;padding-left:24px}
.post-body li{margin:5px 0}
.post-body img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-md);margin:14px auto;display:block;box-shadow:var(--sh-1)}
.post-body blockquote{margin:14px 0;padding:10px 16px;border-left:3px solid var(--brand-line);background:var(--brand-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-2)}
.post-body blockquote p{margin:5px 0}
.post-body table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
.post-body th,.post-body td{border:1px solid var(--line-2);padding:8px 12px;text-align:left;vertical-align:top}
.post-body th{background:var(--surface-3);color:var(--ink);font-weight:600;white-space:nowrap}
.post-body hr{border:0;border-top:1px solid var(--line-2);margin:26px 0}

/* ---------- 代码 ---------- */
.post-body code{font-family:var(--mono);font-size:12.5px;background:var(--surface-3);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;color:var(--brand-ink);word-break:break-all}
.post-body pre{margin:14px 0;padding:14px 16px;background:#0f172a;border-radius:var(--r-md);overflow-x:auto;box-shadow:var(--sh-1)}
.post-body pre code{display:block;background:transparent;border:0;padding:0;color:#dbe4f0;font-size:12.5px;line-height:1.75;white-space:pre;word-break:normal}

/* ---------- 文末工具 CTA ---------- */
.post-cta{margin-top:30px;padding:16px 18px;border:1px solid var(--brand-line);background:var(--brand-soft);border-radius:var(--r-md)}
.cta-head{font-size:12px;font-weight:650;color:var(--brand-ink);margin-bottom:8px}
.cta-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.cta-link{font-size:13.5px;font-weight:600;color:var(--brand-ink);text-decoration:none;transition:opacity var(--t-fast)}
.cta-link:hover{opacity:.75}

/* ---------- 博客目录页 ---------- */
.blog-list{display:flex;flex-direction:column}
.blog-item{display:block;padding:15px 4px;border-bottom:1px dashed var(--line-3);text-decoration:none;transition:background var(--t-fast)}
.blog-item:last-child{border-bottom:0}
.blog-item:hover{background:var(--surface-2)}
.bi-title{font-size:15px;font-weight:650;color:var(--ink);letter-spacing:-.01em}
.blog-item:hover .bi-title{color:var(--brand-ink)}
.bi-desc{margin-top:4px;font-size:13px;color:var(--ink-3);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 移动端 ---------- */
@media (max-width:640px){
  .page{margin-top:16px;padding:0 14px}
  .post{padding:22px 18px}
  .post-title{font-size:20px}
  .post-body{font-size:14px}
  .post-body pre{padding:12px;border-radius:var(--r-sm)}
}