/* 博客专属样式。全站基础样式留在 style.css；这里只放博客列表和文章详情。 */
.post-head { padding: 64px 0 6px; }
.post-head .wrap { max-width: 700px; }
.post-head .crumb { font-size: var(--fs-md); color: var(--muted); margin-bottom: 18px; }
.post-head h1 { font-size: var(--fs-3xl); line-height: 1.4; font-weight: 800; }
.post-head .meta { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.post-head .meta span { border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; background: var(--card); box-shadow: 2px 2px 0 var(--shadow); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }

/* 正文 17px 刻意不归 --fs 阶梯:博客长文阅读专属一档(介于 base 16 与 lg 18 之间),全站仅此处 */
.blog-body { max-width: 700px; margin: 0 auto; padding: 28px 24px 60px; font-size: 17px; line-height: 1.9; }
.blog-body .post-cover { display: block; width: 100%; margin: 0 0 30px; aspect-ratio: 1200 / 630; object-fit: cover; }
.blog-body p { margin-bottom: 18px; }
/* 标题:构建器映射 ##→h2、###→h3、####→h4(2026-07 起;此前 ## 出 h3)。
   2026-07 标准化:h2 提级 --fs-xl/800,前置墨点印章(::before,与首页章节印章 .spark 同族的通用化);
   h3/h4 随全站归入 --fs 阶梯。 */
.blog-body h2 { font-size: var(--fs-xl); font-weight: 800; margin: 36px 0 12px; display: flex; align-items: center; gap: 9px; }
.blog-body h2::before { content: ""; flex: 0 0 auto; width: 13px; height: 13px; background: var(--accent); transform: rotate(-4deg);
  /* 墨点印章:SVG mask(描边与圆点写死 %23000 只占位),颜色走 background 变量,明暗自动跟随 */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' rx='4.5' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' rx='4.5' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain; }
.blog-body h3 { font-size: var(--fs-lg); font-weight: 700; margin: 22px 0 8px; }
.blog-body h4 { font-size: var(--fs-base); font-weight: 700; margin: 18px 0 8px; }
.blog-body ul, .blog-body ol { padding-left: 24px; margin-bottom: 18px; }
.blog-body li { margin-bottom: 6px; }
.blog-body blockquote { margin: 22px 0; padding: 14px 18px; border-left: 3px solid #d9a78e; border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); background: var(--code-bg); border-radius: 0 8px 8px 0; }
.blog-body blockquote p { margin: 0; color: var(--muted); }
.blog-body pre { background: #28221b; padding: 16px 18px; border-radius: 12px; overflow-x: auto; margin: 22px 0; border: 2px solid var(--ink); }
.blog-body pre code { background: none; padding: 0; font-size: var(--fs-sm); color: #f5efe4; line-height: 1.7; display: block; }
.blog-body a { text-decoration: underline; text-underline-offset: 3px; }
.blog-body hr { border: none; height: 10px; margin: 32px 0; background: var(--accent); opacity: .55;
  /* 波浪形状用 SVG mask(描边色写死 %23000 只占位),颜色走 background 变量,明暗自动跟随 */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q 14 2 26 5 T 50 5 T 74 5 T 94 4' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 96px 8px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q 14 2 26 5 T 50 5 T 74 5 T 94 4' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 96px 8px; }
.blog-body img { max-width: 100%; height: auto; border-radius: 12px; border: 2px solid var(--ink); }

/* GFM 表格:构建器输出 .table-wrap > .table-scroll > table。贴纸手绘风同案例页 .dwrap 一脉:
   墨色描边 + 圆角 + 硬阴影,表头 bg2 打底,行间 1px var(--line)。
   外层 .table-wrap 是定位锚(挂「复制为图片」按钮/窄屏提示),内层 .table-scroll 负责横滚,
   窄屏宽表自己滚不撑破版心。颜色全走主题变量,明暗双主题通用。 */
.blog-body .table-wrap { position: relative; margin: 22px 0; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); box-shadow: 4px 4px 0 var(--shadow); }
.blog-body .table-scroll { overflow-x: auto; border-radius: 10px; }
.blog-body table { border-collapse: collapse; width: 100%; font-size: var(--fs-md); line-height: 1.65; }
.blog-body th, .blog-body td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.blog-body thead th { background: var(--bg2); font-weight: 700; white-space: nowrap; border-bottom: 2px solid var(--ink); }
.blog-body tbody tr:last-child td { border-bottom: none; }
/* 表格「复制为图片」悬浮按钮(blog.js 注入):桌面 hover 显现,触屏/窄屏常显 */
.table-shot { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px; cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, border-color .15s; }
.table-wrap:hover .table-shot, .table-shot:focus-visible, .table-shot.done { opacity: 1; }
.table-shot:hover, .table-shot.done { color: var(--accent-text); border-color: var(--accent); }
.table-shot:disabled { opacity: .6; cursor: wait; }
.table-shot .ico { width: 13px; height: 13px; }
@media (hover: none) { .table-shot { opacity: 1; } }
/* 正文插图复制按钮:包壳保持原图布局,按钮悬浮右上(同表格按钮一套交互) */
.blog-body .img-wrap { position: relative; display: block; }
.img-wrap:hover .img-shot, .img-shot:focus-visible, .img-shot.done { opacity: 1; }
/* 窄屏提示:复用 style.css 案例页 .diagram figcaption::before 的窄屏提示模式;
   ::after 落在 .table-scroll 之外,不随横滚移动。英文页(html lang="en")换英文文案。 */
@media (max-width: 640px) {
  .table-shot { opacity: 1; }
  .blog-body .table-wrap::after { content: "← 可左右滑动"; display: block; padding: 4px 14px 8px; font-size: var(--fs-xs); color: var(--muted); }
  html[lang="en"] .blog-body .table-wrap::after { content: "← swipe to scroll"; }
}

.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 200; }
.post-list { display: flex; flex-direction: column; gap: 14px; }
.post-card { display: block; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 20px 22px; box-shadow: 4px 4px 0 var(--shadow); color: var(--fg); position: relative; transition: transform .15s, box-shadow .15s; }
.post-card:hover { transform: translate(-2px,-3px); box-shadow: 6px 7px 0 var(--shadow); text-decoration: none; }
.post-card .pdate { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2px; color: var(--muted); }
.post-card h3 { font-size: var(--fs-xl); font-weight: 800; margin: 6px 0 8px; line-height: 1.45; }
.post-card > p { font-size: var(--fs-md); color: var(--muted); line-height: 1.65; }
.post-card .pmeta { margin-top: 12px; font-size: var(--fs-xs); color: var(--accent-text); font-weight: 700; }
.post-card .parrow { position: absolute; right: 20px; top: 18px; color: var(--accent); font-weight: 800; font-size: var(--fs-lg); transition: transform .15s; }
.post-card:hover .parrow { transform: translateX(4px); }

/* 衬线名单:文章小节(现 h2,旧 ## 出的 h3)保持衬线;子小节(现 h3,旧 ### 出的 h4)历来无衬线,不加 */
.serif, .masthead h1, .featured h3, .post-row .rtitle, .post-head h1, .blog-body h2 { font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif; }
.masthead { padding: 64px 0 0; }
.masthead .kicker { font-size: var(--fs-xs); letter-spacing: 3px; color: var(--muted); font-weight: 600; }
/* 刊头字号刻意不归 --fs 阶梯:印刷人格(44px 超出 --fs-4xl 的 40;窄屏 32px 同理) */
.masthead h1 { font-size: 44px; font-weight: 900; margin-top: 6px; }
.masthead .sub { color: var(--muted); font-size: var(--fs-base); margin-top: 8px; }
.author-strip { display: flex; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 28px 0 40px; background: var(--card); }
.author-strip img { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); flex: 0 0 auto; }
.author-strip .aname { font-weight: 800; font-size: var(--fs-base); }
.author-strip .abio { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin-top: 3px; }
.author-strip .alinks { margin-top: 7px; font-size: var(--fs-sm); display: flex; gap: 16px; }
.tag-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.tag-filter button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 4px 14px; font-size: var(--fs-sm); cursor: pointer; font-family: inherit; transition: all .15s; }
.tag-filter button:hover { border-color: var(--accent); color: var(--accent); }
.tag-filter button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.featured { display: block; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 5%, var(--card)) 0%, var(--card) 55%); padding: 30px 28px; color: var(--fg); margin-bottom: 42px; position: relative; box-shadow: var(--shadow-md); transition: border-color .18s, box-shadow .18s; }
.featured:hover { border-color: var(--accent); box-shadow: var(--shadow-md-hover); text-decoration: none; }
.featured .fcover { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 18px; }
.featured .fk { font-size: var(--fs-2xs); letter-spacing: 2.5px; color: var(--accent-text); font-weight: 700; }
.featured h3 { font-size: var(--fs-2xl); font-weight: 900; line-height: 1.5; margin: 10px 0; }
.featured .desc { color: var(--muted); font-size: var(--fs-md); line-height: 1.7; }
.featured .fmeta { margin-top: 14px; font-size: var(--fs-xs); color: var(--muted); display: flex; gap: 14px; }
.archive-head { font-size: var(--fs-sm); letter-spacing: 2px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.post-row { display: flex; align-items: center; gap: 18px; padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--fg); }
.post-row .rthumb { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--line); object-fit: cover; background: var(--card); }
.post-row .rthumb-empty { display: inline-block; }
.post-row:hover { text-decoration: none; }
.post-row:hover .rtitle { color: var(--accent); }
.post-row .rdate { flex: 0 0 92px; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.post-row .rtitle { font-size: var(--fs-lg); font-weight: 700; transition: color .15s; }
.post-row .rmeta { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.byline { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--muted); font-size: var(--fs-sm); }
.byline img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); }
#c-notes .note { --paper: #f7f0de; --paper-dk: #e9dab9; }
.blog-empty { color: var(--muted); font-size: var(--fs-md); }
.toc { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 26px 0 8px; background: var(--card); font-size: var(--fs-sm); }
.toc .tth { font-size: var(--fs-2xs); letter-spacing: 2px; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.toc a { display: block; color: var(--muted); padding: 3px 0; line-height: 1.5; }
.toc a.l3 { padding-left: 14px; font-size: var(--fs-xs); }
.toc a:hover { color: var(--accent); text-decoration: none; }
.toc a.cur { color: var(--accent-text); font-weight: 700; }
.post-nav { display: flex; gap: 14px; margin: 46px 0 8px; }
.post-nav a { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; color: var(--fg); background: var(--card); transition: border-color .15s; }
.post-nav a:hover { border-color: var(--accent); text-decoration: none; }
.post-nav .pn-k { font-size: var(--fs-2xs); color: var(--muted); letter-spacing: 1.5px; }
.post-nav .pn-t { font-size: var(--fs-md); font-weight: 700; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-nav a.pn-next { text-align: right; }

/* 宽屏才把 TOC 钉到右侧:1280 起(1080 版心 + 230 目录 + 间隙,1240 临界会蹭版心边缘) */
@media (min-width: 1280px) {
  .toc { position: fixed; right: 28px; top: 110px; width: 230px; max-height: 70vh; overflow: auto; margin: 0; }
}

@media (max-width: 640px) {
  .post-head { padding: 44px 0 4px; }
  .post-head h1 { font-size: var(--fs-2xl); }
  .blog-body { font-size: var(--fs-base); padding: 22px 20px 48px; }
  .masthead { padding-top: 44px; }
  .masthead h1 { font-size: 32px; }
  .post-row .rmeta { display: none; }
  /* 归档行给标题让位:390px 下行内宽 334,原 46 缩略图+92 日期列+双 18 间距只给标题剩 160px。
     缩略图 46→40、日期列改自适应(YYYY-MM-DD 等宽数字实占约 67px)、间距 18→12,标题可用宽升到约 200px。 */
  .post-row { gap: 12px; }
  .post-row .rthumb { flex: 0 0 40px; width: 40px; height: 40px; }
  .post-row .rdate { flex: 0 0 auto; font-size: var(--fs-xs); }
  .post-row .rtitle { font-size: var(--fs-base); }
  .post-nav { flex-direction: column; }
}

/* 文章页「复制全文 / 分享到 X」按钮(blog.js 注入,只在有剪贴板能力的环境出现):
   吃全站 .btn.btn-ghost.btn-sm,这里只做局部降档——细边、去阴影、小一号;hover 仅变色,不起跳 */
.byline .copy-post {
  margin-left: auto; border-width: 1.5px; box-shadow: none; padding: 5px 13px; font-size: var(--fs-sm);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.byline .copy-post:hover:not(:disabled), .byline .copy-post.done { transform: none; color: var(--accent); border-color: var(--accent); }
.byline .copy-post .ico { width: 15px; height: 15px; }
@media (max-width: 640px) { .byline { flex-wrap: wrap; } .byline .copy-post { margin-left: 0; } }

/* 订阅卡(blog.js 注入:列表页归档末尾 / 文章页评论区上方)。渠道保持完整，视觉降为一层信息面板。 */
.sub-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: none; padding: 18px 20px 14px; }
.masthead .sub-card { margin: -14px 0 34px; } /* 作者卡自带 40px 下边距,收拢后卡下方给筛选区留呼吸 */
.sub-sec { padding: 0; } /* 清掉全站 section 的 52px 竖 padding,间距由卡片 margin 控制 */
.sub-sec .sub-card { margin-bottom: 44px; }
.sub-title { font-size: var(--fs-base); font-weight: 800; margin-bottom: 3px; }
.sub-intro { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
.sub-ways { display: grid; grid-template-columns: 1fr 1.15fr 1.7fr; gap: 0; margin-top: 14px; border-top: 1px solid var(--line); }
.sub-way { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); padding: 14px 16px 8px; color: var(--fg); font-size: var(--fs-sm); min-width: 0; }
.sub-way:first-child { padding-left: 0; }
.sub-way:last-child { border-right: 0; padding-right: 0; }
a.sub-way { transition: color .15s; }
a.sub-way:hover { color: var(--accent); text-decoration: none; }
.sub-way .ico { width: 18px; height: 18px; color: var(--accent); }
.sub-way-name { font-weight: 700; }
.sub-way-hint { color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.sub-mail-row { display: flex; gap: 8px; margin-top: 2px; }
.sub-form input { flex: 1; min-width: 0; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); color: var(--fg); padding: 5px 10px; font-family: inherit; font-size: var(--fs-sm); box-shadow: 2px 2px 0 var(--shadow); outline: none; }
.sub-form input:focus { border-color: var(--accent); }
/* 订阅提交按钮统一 btn btn-sm(blog.js 注入时带类),旧的局部视觉规则(2px 阴影/hover -1px)随删除归零到基类 */
.sub-msg { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.sub-msg:empty { display: none; }
.sub-msg.err { color: var(--accent-text); font-weight: 600; }
.sub-privacy { margin-top: 12px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }
@media (max-width: 760px) {
  .sub-ways { grid-template-columns: 1fr 1fr; }
  .sub-way, .sub-way:first-child, .sub-way:last-child { border-right: 0; padding: 12px 0; }
  .sub-way:first-child { border-right: 1px solid var(--line); padding-right: 12px; }
  .sub-way:nth-child(2) { padding-left: 12px; }
  .sub-form { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; padding-bottom: 4px; }
}