/* ══ 文章页专属 ═════════════════════════════════════════════
   外壳、正文排版、上下篇导航。
   标题 / 日期行 / 分类 / 标签在 card.styl —— 那几件首页卡片也在用。
   ──────────────────────────────────────────────────────────── */
/* ── 文章外壳 ────────────────────────────────────────────── */
.post {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 40px /* 必须加，不然文字贴着卡片边 */;
  border-radius: 16px;
  background-color: rgba(250,247,245,0.92) /* 跟 .pageCard / .postItem 同一个色号 */;
  border: 1px solid rgba(255,255,255,0.5) /* 一圈浅色高光边，毛玻璃质感 */;
  box-shadow: 0 10px 40px rgba(30,23,21,0.12);
}
.postHeader {
  padding-bottom: 16px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(30,23,21,0.1);
}
/* 文章页里标题更大更醒目（覆盖 card.styl 里的 .postTitle） */
.post .postTitle {
  font-size: 30px;
  margin-bottom: 12px;
}
/* ── 正文排版 ─────────────────────────────────────────────
   全局的 * { margin: 0 } 把所有默认间距都清光了，
   下面每一段都是在把这些间距手动补回来。
   ──────────────────────────────────────────────────────── */
.postContent {
  font-size: 16px;
  line-height: 1.9;
  color: #3d3733;
}
.postContent p,
.postContent ul,
.postContent ol,
.postContent blockquote,
.postContent pre,
.postContent table {
  margin-bottom: 1.2em;
}
.postContent ul,
.postContent ol {
  padding-left: 1.6em /* 列表缩进也被 * 重置清掉了 */;
}
.postContent h2 {
  font-size: 22px;
  margin: 2em 0 0.8em;
  padding-left: 12px;
  border-left: 4px solid #b3123f /* 主强调：领带的酒红 */;
  scroll-margin-top: 20px;
}
.postContent h3 {
  font-size: 18px;
  margin: 1.6em 0 0.6em;
}
.postContent a {
  color: #b3123f /* 主强调：领带的酒红 */;
}
.postContent img {
  max-width: 100% /* 不加的话大图会撑破容器 */;
  border-radius: 8px;
}
.postContent blockquote {
  padding: 12px 16px;
  border-left: 4px solid #d99846 /* 次强调：齿轮数字的琥珀金 */;
  background-color: rgba(217,152,70,0.08);
  color: #6b625c;
}
.postContent pre {
  padding: 16px;
  border-radius: 8px;
  background-color: #2b2422;
  color: #f5f1ee;
  overflow-x: auto /* 长代码行别撑破布局 */;
  font-size: 14px;
}
/* 只给行内代码上色。少了 :not(pre) 的话，
   代码块内部的 <code> 会在深色底上再叠一层红底。 */
.postContent :not(pre) > code {
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(179,18,63,0.1);
  color: #b3123f /* 主强调：领带的酒红 */;
  font-size: 0.9em;
}
/* ── 上下篇导航 ──────────────────────────────────────────── */
.postNav {
  display: flex;
  gap: 16px;
  max-width: 800px;
  margin: 40px auto 0;
}
.postNavItem {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 12px;
  background-color: #faf7f5;
  border: 1px solid rgba(30,23,21,0.08);
  text-decoration: none;
  transition: border-color 0.25s;
}
.postNavItem:hover {
  border-color: #b3123f /* 主强调：领带的酒红 */;
}
.postNavLabel {
  font-size: 12px;
  color: #8a817c;
}
.postNavTitle {
  font-size: 15px;
  color: #241d1b;
}
.postNavNext {
  text-align: right;
}