/* ===================================================================
   博客「虾叔生生」页面样式（xiasoo 站三页共用：blog/index.html、blog/post.html、blog/topic.html）
   设计基准：运营/官网/手作/原型/博客页原型图.html（两行顶栏 + 极简两行页脚）。
   说明：本文件为手写语义类样式，不经 Tailwind 编译（无需 npm）；由 build.py 的 copy_assets()
         复制到 out/xiasoo/css/，再由 version_assets() 追加内容哈希改名并改写页面引用。
   加载顺序：site.css → icons.css → blog.css，故本文件为博客页的最终裁定样式。
   移动端：文末含 ≤768px 断点（双栏改单栏、顶栏折两行、字号与内距降级）；桌面基准（上文各项）保持不变。
   字号基准：顶栏＝品牌36px、副标14px、菜单16px、产品外链卡16px，第二行主题入口14px；
           内容区＝正文/表格15px、辅助小字13px；页脚＝ICP与落款16px。
   =================================================================== */
:root{
  --primary:#8c3c3c; --on-primary:#fff; --background:#fff;
  --surface:#f5f3f3; --surface-dim:#efeded;
  --ink:#1b1c1c; --variant:#4c4546; --muted:#8a817f; --outline:#d4d8db;
  --sans:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
  --serif:"Georgia","Songti SC","SimSun",serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);background:var(--background);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}

/* ===== 顶栏（两行，非固定）===== */
.blog-header{border-bottom:1px solid var(--outline);background:var(--background)}
.topbar{max-width:1040px;margin:0 auto;padding:18px 28px 0}
/* 第1行：左[品牌+标语] / 右[菜单 + 产品站入口]，底部对齐 */
.row1{display:flex;justify-content:space-between;align-items:flex-end}
.brand{line-height:1.2;text-decoration:none}
.brand .main{font-size:36px;font-weight:800;color:var(--primary);letter-spacing:.01em}
.brand .sub{font-size:14px;color:var(--muted);font-family:var(--serif);margin-left:10px}
/* 菜单容器 与 产品列表容器 之间留 100px 间距，两区在视觉上明确分开 */
.row1-right{display:flex;align-items:flex-end;gap:100px}
.menu{display:flex;gap:26px;align-items:center;padding-bottom:4px}
.menu a{font-size:16px;color:var(--variant);text-decoration:none;font-weight:600;letter-spacing:.02em}
.menu a:hover{color:var(--primary)}
.menu a.current{color:var(--primary);border-bottom:2px solid var(--primary);padding-bottom:2px}
/* 第2行：主题合集入口，从左往右；与品牌行仅保持间距，不设分隔线 */
.row2{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:24px;padding-bottom:14px}
.row2 a{font-size:14px;color:var(--variant);text-decoration:none;letter-spacing:.03em}
.row2 a:hover{color:var(--primary)}
.row2 a.current{color:var(--primary);font-weight:700}

/* 产品列表容器：非菜单项，顶栏右缘的独立外链区；每个产品 = 浅灰底小卡片 */
.nav-products{display:flex;align-items:flex-end;gap:10px}
.nav-products a{display:block;background:var(--surface);border:1px solid var(--outline);color:var(--variant);padding:7px 16px;font-size:16px;line-height:20px;font-family:var(--sans);text-decoration:none;transition:border-color .2s,color .2s,background-color .2s}
.nav-products a:hover{border-color:var(--primary);color:var(--primary);background:var(--surface-dim)}

/* ===== 正文区 ===== */
.blog-main{max-width:760px;margin:0 auto;padding:44px 28px 24px}
/* 目录页/合集页：主内容区双栏（左=列表/正文，右=作者卡），故整区加宽；文章页仍为单栏 760px */
.blog-main--wide{max-width:1040px}
.blog-layout{display:flex;gap:28px;align-items:flex-start}
.blog-content{flex:1 1 auto;min-width:0}
.blog-side{flex:0 0 260px}
.crumb{font-size:13px;color:var(--variant);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:6px}
.crumb a{color:var(--variant);text-decoration:none}
.crumb a:hover{color:var(--primary)}
.crumb span{opacity:.85}
.page-title{font-size:30px;line-height:1.45;color:#000;margin:0 0 14px;font-weight:700}
.meta{font-size:13px;color:var(--variant);border-bottom:1px solid var(--surface-dim);padding-bottom:18px;margin-bottom:8px}
.meta a{color:var(--variant);text-decoration:none}
.meta a:hover{color:var(--primary)}
/* 题头自述：模板常量（博客名+主题名）+ 本页定位尾巴；右对齐、置于 h1 上方 */
.self-desc{font-size:14px;color:var(--muted);text-align:right;margin:40px 0 30px;line-height:1.9}
.self-desc p{margin:0}
.self-desc b{color:var(--primary)}

/* 文章页题头摘要（excerpt 直出）：左对齐、置于 h1 上方；与 meta description 同源 */
.post-lead{font-size:15px;color:var(--muted);text-align:left;margin:40px 0 30px;line-height:1.9}

/* ===== 正文富文本（.post-body：构建期由 markdown_to_html 直出，类名挂在容器上）===== */
.post-body{font-size:15px;line-height:1.7;color:#2a2a2a}
.post-body p{margin:18px 0}
.post-body h1,.post-body h2,.post-body h3,.post-body h4{color:#000}
.post-body h2{font-size:21px;margin:34px 0 12px;font-weight:700}
.post-body h3{font-size:18px;margin:26px 0 10px;font-weight:700}
.post-body h4{font-size:16px;margin:22px 0 8px;font-weight:700}
/* 列表：务必用直接子选择器（> li），不可用后代选择器（li），否则嵌套列表会“序号+方块”叠加 */
.post-body ul,.post-body ol{list-style:none;margin:16px 0;padding:0}
.post-body ul>li,.post-body ol>li{position:relative;margin:10px 0}
.post-body ul>li{padding-left:26px}
.post-body ul>li::before{content:'';position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--primary)}
.post-body ol{counter-reset:item}
.post-body ol>li{padding-left:2.5rem;counter-increment:item}
.post-body ol>li::before{content:counter(item)'.';position:absolute;left:0;color:var(--primary);font-weight:700}
.post-body li ul,.post-body li ol{padding-left:1rem}
.post-body blockquote{border-left:4px solid var(--primary);background:var(--surface);padding:14px 20px;margin:22px 0}
.post-body blockquote p{margin:0;color:var(--variant)}
.post-body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
.post-body th,.post-body td{border:1px solid var(--outline);padding:.5rem .75rem;text-align:left}
.post-body pre{background:var(--surface);padding:14px 16px;overflow-x:auto;margin:16px 0}
.post-body code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;background:var(--surface);padding:1px 4px}
.post-body pre code{background:none;padding:0}

/* ===== 相关阅读（同主题，锚文本=带关键词标题）===== */
.related{margin-top:52px;padding-top:26px;border-top:1px solid var(--outline)}
.related h3{font-size:15px;letter-spacing:.05em;color:var(--variant);margin:0 0 18px;font-weight:600}
.related ul{list-style:none;margin:0;padding:0}
.related li{display:flex;gap:14px;align-items:baseline;border-left:3px solid var(--surface-dim);padding:12px 0 12px 16px;margin:6px 0}
.related li:hover{border-color:var(--primary)}
.related .date{font-size:13px;color:var(--muted);flex:none}
.related a{font-size:15px;color:var(--ink);text-decoration:none;font-weight:600}
.related a:hover{color:var(--primary)}

/* ===== 目录页列表（时间/主题/标签 + 标题 + 单行摘要；整卡可点）===== */
.blog-list{margin-top:8px}
.blog-list .item{position:relative;border-left:3px solid var(--surface-dim);padding:14px 0 14px 16px;margin:6px 0}
.blog-list .item:hover{border-color:var(--primary)}
.blog-list .row{font-size:13px;color:var(--muted)}
.blog-list .row .topic{color:var(--variant)}
.blog-list .row a{color:var(--variant);text-decoration:none}
.blog-list .row a:hover{color:var(--primary)}
.blog-list .title{font-size:18px;font-weight:700;margin:4px 0 0;color:var(--ink)}
.blog-list .title a{color:var(--ink);text-decoration:none}
.blog-list .title a::after{content:'';position:absolute;inset:0}
.blog-list .title a:hover{color:var(--primary)}
.blog-list .excerpt{margin:4px 0 0;font-size:15px;color:var(--variant)}

/* ===== 合集页：每篇 = 时间 + 标题 + 正文全文 ===== */
.topic-list .item{padding-top:26px;border-top:1px solid var(--outline);margin-top:32px}
.topic-list .item .date{font-size:13px;color:var(--muted)}
.topic-list .item h2{font-size:21px;font-weight:700;color:#000;margin:6px 0 14px}
.topic-list .item h2 a{color:#000;text-decoration:none}
.topic-list .item h2 a:hover{color:var(--primary)}

/* ===== 作者卡 ===== */
.author{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--outline);padding:20px;margin-top:40px}
/* 右栏作者卡（目录页/合集页）：头像置顶、文字竖排，成竖版窄长卡（高度大于宽度） */
.blog-side .author{flex-direction:column;align-items:center;text-align:center;gap:12px;margin-top:0}
.blog-side .author>div{width:100%}
/* 右栏作者卡的简介/近况是多行段落，居中不利阅读，故单独左对齐（头像与姓名仍居中） */
.blog-side .author .bio,.blog-side .author .now{text-align:left}
.author .av{width:52px;height:52px;flex:none;border-radius:50%;object-fit:cover;background:var(--primary)}
.author .name{font-size:15px;font-weight:700}
.author .role{font-size:15px;color:var(--muted);margin-top:3px}
/* bio 是作者简介段落：用衬线字体（--serif，中文落宋体）增强书卷气，与顶栏副标题同款；颜色取 muted 以免与正文争视觉 */
.author .bio{font-size:13px;line-height:1.2;color:var(--muted);font-family:var(--serif);margin-top:8px}
.author .now{font-size:15px;color:var(--primary);margin-top:8px}

/* ===== 极简页脚：第1行 ICP，第2行 落款 ===== */
.blog-footer{border-top:1px solid var(--surface-dim);margin-top:64px;padding:34px 24px}
.foot{max-width:760px;margin:0 auto;text-align:center;line-height:2}
/* 双栏页页脚与正文区同宽，保持左右对齐 */
.blog-footer--wide .foot{max-width:1040px}
.foot .icp{margin:0;font-size:16px;color:var(--muted)}
.foot .icp a{color:var(--muted);text-decoration:none}
.foot .icp a:hover{color:var(--primary)}
.foot .sign{margin:0;font-size:16px;color:var(--variant)}

/* ===== 移动端适配（≤768px）：双栏改单栏、顶栏折两行、字号与内距降级 =====
   桌面端所有规则保持不变，仅在此断点内覆盖。起因：本文件原无任何 @media，
   .blog-layout 双栏在窄屏不换行，正文被挤成极窄一列（列表/合集页显示错乱）。 */
@media (max-width:768px){
  .topbar{padding:14px 18px 0}
  .row1{flex-wrap:wrap;align-items:center;gap:8px}
  .brand .main{font-size:26px}
  .brand .sub{font-size:12px;margin-left:6px}
  .row1-right{width:100%;gap:14px;align-items:center;justify-content:space-between}
  .menu{gap:18px;padding-bottom:0}
  .nav-products a{padding:6px 12px;font-size:14px;line-height:18px}
  .row2{gap:6px 14px;margin-top:14px;padding-bottom:10px}
  .blog-main{padding:28px 18px 20px}
  .blog-layout{flex-direction:column;gap:20px}
  .blog-side{flex:0 0 auto;width:100%}
  .page-title{font-size:24px}
  .self-desc{text-align:left;margin:22px 0 18px}
  .blog-list .title{font-size:16px}
  .topic-list .item h2{font-size:18px}
  .blog-footer{margin-top:36px;padding:24px 18px}
}