/* ============================================================
   主题：和纸 · 日式小清新  jp-washi v1.0.0
   ------------------------------------------------------------
   设计思路
   · 纸：生成り（きなり）米白打底，卡片比底色再亮半度，像叠了一层纸；
        极淡的横向抄纸纹（repeating-linear-gradient），深色模式自动关掉。
   · 墨：不用纯黑，用偏暖的墨色；正文行高 1.95、字距 0.01em，段落首行缩进 2em。
   · 朱：主色取「渋朱」#ad554d —— 鸟居、印章、朱肉都是这个调子，比樱粉更耐看，
        在米白底上对比度也够（约 4.9:1）。
   · 若竹：博主标识、评论热力格用低饱和的若竹绿，与朱色形成日式经典的「朱×绿」。
   · 形：圆角统一收到 2–5px，阴影基本取消，分隔线改用虚线 —— 平、薄、透。
   ------------------------------------------------------------
   版式适配
   · 单栏：.wrap 收窄到 820px（默认 880），一行约 40 余字，接近日式杂志的行宽。
   · 双栏：.wrap.wide 1160px，正文与 296px 侧边栏间距 26px；侧栏卡片加纸感描边。
   · ≤640px：文章内边距、导航条内边距单独收一遍（本文件晚于骨架加载，
     不重写就会把骨架的窄屏规则盖掉）。
   ------------------------------------------------------------
   只改配色：动下面 :root 里的 12 个变量即可，其余是造型。
   相对资源请与本文件放在同一文件夹，用 url(xxx.png) 引用。
   ============================================================ */

:root {
  /* —— 纸 —— */
  --bg: #f8f4ec;              /* 页面底色：生成り */
  --card: #fffdf8;            /* 卡片 / 顶栏 / 页脚：比底色亮半度 */
  --tint: #f4ede1;            /* 表头、引用、浅底块 */
  --line: #e7ddcf;            /* 分隔线 / 描边：淡茶 */

  /* —— 墨 —— */
  --text: #3a3530;            /* 主文字 */
  --text-soft: #5f574e;       /* 摘要 / 次要文字 */
  --muted: #8f857a;           /* 时间戳 / 弱化文字 */

  /* —— 朱（主色） —— */
  --accent: #ad554d;
  --accent-soft: #f7e9e4;
  --on-accent: #fffdf8;

  /* —— 引用与代码 —— */
  --quote-bg: #f6efe4;
  --quote-text: #544c44;
  --code-bg: #2e2a26;         /* 墨色，不用纯黑 */
  --code-text: #eae2d4;
  --inline-code-bg: #f0e7d9;

  /* —— 博主标识 / 提示色：若竹绿 —— */
  --admin: #6f8f68;
  --admin-soft: #eaf0e4;
  --admin-text: #4d6b47;
  --ok: #5d8a5a;
  --bad: #a94a41;

  /* —— 字体 —— */
  --font-body: "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei",
    -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  /* 标题用的明朝体栈：日式小清新的「文艺感」八成来自这一条 */
  --jp-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC",
    "Hiragino Mincho ProN", STSong, SimSun, serif;

  /* 主题内部用的小变量 */
  --jp-hover: #dccbb6;        /* 卡片悬停描边 */
  --jp-paper: rgba(122, 101, 79, .016);  /* 纸纹颜色 */
}

/* ============================================================
   夜间：夜樱（暗底也是暖调，不用蓝紫）
   ★ 必须写 html[data-theme="dark"]，与骨架的暗色变量同特异性，
     本文件后加载才能赢；写 :root 会被骨架的暗色压住。
   ============================================================ */
html[data-theme="dark"] {
  --bg: #191816;
  --card: #211f1c;
  --tint: #2a2723;
  --line: #353129;
  --text: #e9e3d8;
  --text-soft: #c2b8a9;
  --muted: #958b7d;
  --accent: #d98a80;          /* 暗底上提亮，否则朱色发闷 */
  --accent-soft: #3a2a26;
  --on-accent: #1a1512;
  --quote-bg: #262320;
  --quote-text: #cfc6b8;
  --code-bg: #121110;
  --code-text: #ded6c6;
  --inline-code-bg: #2f2b26;
  --admin: #9dbe94;
  --admin-soft: #2a3327;
  --admin-text: #b7d3ae;
  --ok: #8fbb87;
  --bad: #e0938a;
  --jp-hover: #4a4338;
  --jp-paper: transparent;
}

/* ============================================================
   1. 底子
   ============================================================ */
body {
  background-color: var(--bg);
  /* 抄纸纹：每 27px 一条极淡横线，近看才有，不抢内容 */
  background-image: repeating-linear-gradient(180deg,
    var(--jp-paper) 0 1px, transparent 1px 27px);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.9;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

/* 单栏：收窄到 820。双栏由下面的 .wrap.wide 接管，互不影响 */
.wrap { max-width: 820px }

::selection { background: #f0d9d3; color: #3a3530 }
html[data-theme="dark"] ::selection { background: #4a322c; color: #f2e9dc }

/* 所有标题统一走明朝体；正文保持无衬线，长文才不累 */
.brand span,
.hero h1,
.pc-title,
.article h1,
.page-head h1,
.arc-hero h1,
.comments h2,
.sd-t,
.toc-h,
.cat-card h3,
.arc-h2 { font-family: var(--jp-serif) }

/* ============================================================
   2. 页头与导航
   ============================================================ */
.hd { border-bottom: 1px solid var(--line) }
/* 页头节点本身就是 .wrap：只改上下，左右那 20px 留给 .wrap（写成 padding:16px 0 会让品牌贴边） */
.hd-in { padding-block: 16px }

/* 站名用 500：宋体只有 400 / 700 两档，500 会落到常规字重 ——
   明朝体的「细」正是小清新的关键，600 会被合成加粗、糊成一团 */
.brand { font-size: 21px; font-weight: 500; letter-spacing: .06em }
.brand small { font-family: var(--font-body); letter-spacing: .02em }

/* 首字方块：只改形状（方一点的印章），★ 底色与字色一律不动 ——
   品牌标恒为骨架的品牌蓝 #2563eb，不跟 --accent 走。
   这里写 var(--accent) 会让换主题时「云」跟着变色（Wei 明确要求 logo 不随主题变）。 */
.brand-mark {
  border-radius: 3px;
  font-family: var(--jp-serif);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(120, 80, 60, .12);
}

/* 图标按钮（主题 / 搜索）：跟着收圆角。
   ★ 颜色用 --text-soft 而不是骨架的 --muted：米白底上 --muted 太淡，
     太阳 / 月亮两个描边图标会糊成两个空方块。 */
.theme-btn, .search-btn { border-radius: 3px; color: var(--text-soft) }
.theme-btn:hover, .search-btn:hover { color: var(--accent) }

/* 桌面导航：不做底色块，改「朱色细下划线」——留白更干净。
   ⚠️ 窄屏有自己的 padding（横向滑条），所以只对 ≥641px 生效。 */
@media (min-width: 641px) {
  .nav a {
    padding: 6px 11px;
    border-radius: 0;
    border-bottom: 1px solid transparent;
    color: var(--text-soft);
    font-size: 14.5px;
    letter-spacing: .05em;
  }
  /* 「朋友」这类带下拉的项：骨架里 .nav-drop 是 inline-block、里面的 <a> 是行内元素，
     行内盒按基线摆放 → 实测整块比邻居**低 5px**（top 27.9 vs 22.9），就是它看起来偏下。
     外层改 flex 并撑满行高，里面的 <a> 变成撑满的块级项；再给两者同样的
     height / line-height，文字基线就完全锁死了（不靠 padding 凑高度）。 */
  .nav-drop { display: flex; align-items: stretch; align-self: stretch }
  .nav > a, .nav-drop > a {
    height: 40px;
    line-height: 38px;      /* 40 - 上下 1px 边框 */
    padding: 0 11px;
  }
  .nav a:hover {
    background: none;
    color: var(--accent);
    border-bottom-color: var(--accent);
    text-decoration: none;
  }
  .nav a.on {
    background: none;
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
  }
}

.nav-sub { border-radius: 4px; box-shadow: 0 10px 26px rgba(72, 56, 38, .10) }
.nav-sub a { border-radius: 2px }
.hd-search input { border-radius: 3px }

/* ============================================================
   3. 首页：引言、分类、文章卡片
   ============================================================ */
.hero { padding: 30px 0 2px }
.hero h1 { font-size: 21px; font-weight: 600; letter-spacing: .03em }
.hero p { font-size: 14.5px; letter-spacing: .02em }

.chips { gap: 7px; margin: 20px 0 4px }
.chip {
  border-radius: 3px;
  background: transparent;
  padding: 4px 12px;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--text-soft);
}
.chip:hover { border-color: var(--accent); color: var(--accent) }
.chip-sub { border-style: dashed }

.plist { gap: 16px; margin-top: 22px }
.pc {
  border-radius: 4px;
  padding: 22px 24px;
  transition: border-color .18s ease, transform .18s ease;
}
.pc:hover { border-color: var(--jp-hover); transform: translateY(-1px) }

.pc-meta { font-size: 12.5px; letter-spacing: .03em; margin-bottom: 8px }
.pc-title { font-size: 20px; line-height: 1.55; font-weight: 600; letter-spacing: .02em }
.pc-excerpt { font-size: 14.8px; line-height: 1.85; color: var(--text-soft) }

/* 标签 = 方形小印章，不用糖果色胶囊 */
.tag-chip {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1px 8px;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--muted);
}
.tag-chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.pc-cover img { width: 190px; height: 124px; border-radius: 3px }

/* 分页：小方章 */
.pager { gap: 7px; margin-top: 32px }
.pager a, .pager span { border-radius: 2px; padding: 6px 12px; font-size: 13.5px }
.pager .cur { border-color: var(--accent) }

/* ============================================================
   4. 文章页
   ============================================================ */
.crumb { font-size: 13px; letter-spacing: .03em }

.article { border-radius: 5px; padding: 40px 44px }
.article h1 { font-size: 29px; line-height: 1.45; font-weight: 600; letter-spacing: .015em }
.art-meta {
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
  letter-spacing: .03em;
}
.art-cover img { border-radius: 3px }
.art-cp {
  border-left: 2px solid var(--accent);
  border-radius: 0 3px 3px 0;
  font-size: 13.5px;
  line-height: 1.9;
}

/* —— 正文排版：日式长文那一套 —— */
.art-body { font-size: 16.5px; line-height: 1.95 }
/* 首行缩进 2em 已经承担了分段识别，段间距就不再放大（书页靠缩进、不靠空行） */
.art-body > p { text-indent: 2em; margin: 0 0 .8em }
.art-body p { margin: 0 0 .8em }
.art-body h2 {
  font-family: var(--jp-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .02em;
  padding-left: 13px;
  border-left-width: 3px;
  margin: 1.8em 0 .7em;
}
/* 小标题用黑体：SimSun 只有常规一档，18px 的明朝体比正文还「轻」，
   层级会反过来；日式排版本来就是「明朝大标题 + ゴシック小标题」混排。 */
.art-body h3 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .03em;
  margin: 1.7em 0 .55em;
}
.art-body h4 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .03em;
}
.art-body blockquote {
  border-left: 2px solid var(--accent);
  border-radius: 0;
  padding: 14px 20px;
  background: var(--quote-bg);
  color: var(--quote-text);
}
.art-body img { border-radius: 3px }
.art-body hr { border-top: 1px dashed var(--line) }
.art-body pre { border-radius: 4px }
.art-body code { border-radius: 2px; padding: 1px 5px }
.art-body th { font-weight: 600 }
.art-body a { text-underline-offset: 3px }

/* 目录 */
.toc { border-radius: 3px; padding: 11px 15px }
.toc-h { font-size: 13.5px; letter-spacing: .06em }
.toc-h::before { width: 4px; height: 12px; border-radius: 0 }
.toc-i a { border-radius: 2px; border-left-width: 2px }
.toc-i a.on { background: transparent; border-left-color: var(--accent) }

/* 点赞 / 上下篇 / 密码页 */
.like-btn { border-radius: 3px; letter-spacing: .04em }
.pn a { border-radius: 3px }
.lock-box { border-radius: 5px }
.lock-inp, .lock-btn { border-radius: 3px }
.pin-badge { border-radius: 2px; letter-spacing: .08em }

/* ============================================================
   5. 评论
   ============================================================ */
.comments { border-radius: 5px; padding: 30px 34px }
.comments h2 { font-size: 19px; font-weight: 600; letter-spacing: .04em }
.cmt { border-top: 1px dashed var(--line) }
.tag-mini { border-radius: 2px; letter-spacing: .04em }
.cmt-body { font-size: 14.8px; line-height: 1.85 }
.cform input, .cform textarea { border-radius: 3px; background: var(--bg) }
.cap-img { border-radius: 2px }
.btn { border-radius: 3px; letter-spacing: .06em }

/* ============================================================
   6. 侧边栏（双栏）
   —— 单栏时不输出这段 CSS，写了也不影响。
   ⚠️ 侧栏宽 296px，卡片内边距比默认收 1–2px，
      给热力图的 26 列留出格宽；格子本身是 aspect-ratio:1，不会变形。
   ============================================================ */
.wrap.wide { max-width: 1160px }
.ly { gap: 26px }

.sd { gap: 14px }
.sd-w { border-radius: 4px; padding: 14px 16px }
.sd-t { font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--text-soft) }
/* 小标题前的竖条 → 朱色小方块（判子感） */
.sd-t::before { width: 5px; height: 5px; border-radius: 0; transform: translateY(-1px) }

.sd-n { border-radius: 2px; font-weight: 600 }
.sd-tag { border-radius: 2px; letter-spacing: .04em }
.sd-stat { border-radius: 3px }
.sd-search input, .sd-search button { border-radius: 3px }
.sd-svbar, .sd-svbar i { border-radius: 2px }
.sd-svpend { border-radius: 2px }
.sd-hdot { border-radius: 1px }
/* 热力图：评论色从青色改成若竹绿，与朱色文章格配成「朱×绿」 */
.sd-heat { --hc: #7d9a74 }
html[data-theme="dark"] .sd-heat { --hc: #8fb083 }
/* 空格子比 --tint 再深半度：纸白卡上 #f4ede1 几乎看不见，热力图会像一张白纸 */
.sd-hc { background: #efe6d7 }
html[data-theme="dark"] .sd-hc { background: #2f2b25 }

/* ============================================================
   7. 归档 / 标签 / 分类 / 友链
   ============================================================ */
.arc-block, .arc-stat, .cat-card, .link-card, .fr-item { border-radius: 4px }
.arc-stat { padding: 15px 16px }
.arc-stat b { font-size: 23px }
.arc-h2 { letter-spacing: .06em; font-weight: 600 }
.arc-gh { letter-spacing: .04em }
.tag-pill { border-radius: 2px; letter-spacing: .04em }
.cat-card h3 { font-weight: 600; letter-spacing: .03em }
.link-card { transition: border-color .18s ease }
.link-card:hover { border-color: var(--jp-hover) }
.empty { border-radius: 4px; border-style: dashed }

/* ============================================================
   8. 页脚：去掉实心块，只留一条虚线与大量留白
   ============================================================ */
.ft {
  background: transparent;
  border-top: 1px dashed var(--line);
  padding: 28px 0 34px;
  font-size: 12.5px;
  letter-spacing: .05em;
}
.ft a:hover { color: var(--accent) }

/* ============================================================
   9. 窄屏：本文件晚于骨架加载，必须把骨架的窄屏值重申一遍，
      否则会被上面的桌面值盖掉（典型症状：手机上文章内边距变成 40px）。
   ============================================================ */
@media (max-width: 640px) {
  .article { padding: 24px 18px }
  .comments { padding: 22px 18px }
  .pc { padding: 18px 16px }
  .plist { gap: 12px }
  .brand { font-size: 19px }
  .brand-mark { border-radius: 3px }
  .art-body { font-size: 16px; line-height: 1.9 }
  .art-body h2 { font-size: 20px }
  .article h1 { font-size: 24px }
  .hd-in { padding-block: 11px 0 }
  /* 手机导航是横向滑条，当前项仍用实心块（触屏要够醒目），
     但把骨架的 8px 药丸收成 2px 方章，和全站其他圆角统一 */
  .nav a { border-radius: 2px }
  .nav a.on { background: var(--accent); color: var(--on-accent); font-weight: 500 }
}