/* ===================================================================
   Shoushu 手书 · 文艺复古主题
   纸张纹理 · 暖色调 · 手写感 · 大量留白
   全部 CSS 实现，零图片请求，体积轻、加载快
=================================================================== */

:root {
  --accent: #a0562f;            /* 砖红主色（a11y 修正版，对比度 4.75:1 达标） */
  --ink: #4a3f34;               /* 墨字深褐 */
  --ink-soft: #6b5f52;          /* 次级文字 */
  --paper: #f6efe2;             /* 奶油米纸底 */
  --paper-warm: #efe4cd;        /* 略暖纸块 */
  --paper-line: #e0d4bc;        /* 纸缝/分隔线 */
  --deep: #2f2a22;              /* 深字/页脚 */
  --shadow: rgba(74, 63, 52, .12);
  --serif: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  --hand: "Kaiti SC", "STKaiti", "KaiTi", "Segoe Script", cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* 纸张底 —— 细腻噪点纹理(纯CSS) */
body {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.9;
  background-color: var(--paper);
  font-size: 17px;
}
/* 噪点纸纹搬上固定层：不随滚动重绘（移动端滚动性能修复 2026-10-24）*/
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(160, 86, 47, .04) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* 滚动条 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper-warm); }
::-webkit-scrollbar-thumb { background: #cdbb98; border-radius: 5px; }

/* ===== 布局容器 ===== */
.page { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.page.body { margin-top: 46px; margin-bottom: 90px; min-height: 62vh; }

/* ===== 页首 ===== */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding: 42px 0 26px;
  border-bottom: 2px solid var(--paper-line);
}
.site-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.brand-mark {
  font-size: 34px; color: var(--accent);
  transform: rotate(-8deg); display: inline-block;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-title {
  font-family: var(--hand); font-size: 30px; font-weight: 700;
  letter-spacing: 1px;
}
.brand-sub { font-family: var(--hand); font-size: 14px; color: var(--ink-soft); }

.site-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.nav-link {
  font-family: var(--hand); font-size: 17px;
  color: var(--ink); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px dashed transparent;
  transition: border-color .2s, color .2s;
}
.nav-link:hover { border-color: var(--accent); color: var(--accent); }

/* ===== 首页文章卡片 ===== */
.post-list { display: flex; flex-direction: column; gap: 42px; }
.post-card {
  background: var(--paper-warm);
  border: 1px solid #e6d9bf;
  border-radius: 12px;
  padding: 30px 34px;
  box-shadow: 0 6px 18px var(--shadow);
  position: relative;
  transition: transform .25s, box-shadow .25s;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px var(--shadow); }

.post-date {
  font-family: var(--hand); font-size: 13px; color: var(--ink-soft);
  letter-spacing: 1px; text-transform: uppercase;
}
.post-title {
  font-family: var(--hand); font-size: 25px; font-weight: 700;
  margin: 10px 0 14px; line-height: 1.45;
}
.post-title a { color: var(--deep); text-decoration: none; }
.post-title a:hover { color: var(--accent); }

.post-excerpt { color: var(--ink-soft); font-size: 16px; }
.post-meta {
  margin-top: 18px; font-size: 13px; color: var(--ink-soft);
  display: flex; gap: 16px; flex-wrap: wrap;
}
.post-meta a { color: var(--accent); text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }

/* ===== 单篇正文 ===== */
.post-title.single { font-size: 32px; text-align: center; }
.post-head {
  text-align: center; margin-bottom: 28px;
  padding-bottom: 22px; border-bottom: 1px dashed var(--paper-line);
}
.post-body { font-size: 17px; }
.post-body p { margin: 0 0 22px; }
.post-body a { color: var(--accent); }
.post-body h2, .post-body h3, .post-body h4 {
  font-family: var(--hand); color: var(--deep);
  margin: 34px 0 12px; line-height: 1.4;
}
.post-body img { max-width: 100%; border-radius: 8px; margin: 18px 0; box-shadow: 0 4px 14px var(--shadow); }
.post-body pre {
  background: var(--paper-warm); border-left: 3px solid var(--accent);
  padding: 16px 18px; border-radius: 8px; overflow: auto; font-size: 14px;
}
.post-body blockquote {
  margin: 18px 0; padding-left: 20px; border-left: 3px solid var(--accent);
  color: var(--ink-soft); font-family: var(--hand); font-size: 18px; font-style: italic;
}
.post-body ul, .post-body ol { margin: 0 0 22px 26px; }
.post-body hr { border: 0; border-top: 1px dashed var(--paper-line); margin: 28px 0; }
.post-body code { background: var(--paper-warm); padding: 2px 6px; border-radius: 4px; font-size: 14px; }

/* 标签页脚 */
.post-foot { margin-top: 36px; padding-top: 18px; border-top: 1px dashed var(--paper-line); }
.post-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-chip {
  font-family: var(--hand); font-size: 13px; color: var(--accent);
  background: transparent; border: 1px dotted var(--accent);
  padding: 3px 12px; border-radius: 20px; text-decoration: none;
}
.tag-chip:hover { background: var(--accent); color: #fff; }

/* 上一篇/下一篇 */
.post-pager { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; font-size: 14px; }
.post-pager a { color: var(--accent); text-decoration: none; max-width: 40%; }
.post-pager a:hover { text-decoration: underline; }

/* ===== 评论 ===== */
/* ===== 评论区 ===== */
.comments { margin-top: 46px; }
.comment-title {
  font-family: var(--hand); font-size: 22px; margin-bottom: 18px;
  color: var(--deep); display: flex; align-items: center; gap: 10px;
}
.comment-title::before { content: '\2712'; font-size: 18px; color: var(--accent); }

.comment-list, .comment-children-list { list-style: none; padding-left: 0; }
.comment-body {
  background: linear-gradient(180deg, #fdf8ec, #f9f1dd);
  border: 1px dashed #d8c9a8; border-radius: 10px;
  padding: 16px 20px 14px; margin-bottom: 16px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.comment-body:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(160,86,47,.08);
}
.comment-author { display: flex; align-items: center; gap: 10px; }
.comment-author .avatar {
  width: 40px; height: 40px; border-radius: 8px;
  background: #f1e6cf; border: 1px solid #e0d2b4;
}
.comment-author .fn {
  font-family: var(--hand); font-style: normal; font-size: 17px;
  color: var(--accent); font-weight: bold;
}
.comment-meta { font-size: 12px; margin: 4px 0 8px 50px; color: var(--ink-soft); }
.comment-meta a { color: var(--ink-soft); text-decoration: none; }
.comment-meta a:hover { color: var(--accent); text-decoration: underline; }
.comment-content { color: var(--ink); font-size: 15px; line-height: 1.9; }
.comment-content p { margin: 0; }
.comment-reply { margin-top: 10px; text-align: right; }
.comment-reply a {
  font-size: 12px; color: var(--accent); text-decoration: none;
  border: 1px solid #d9b48f; border-radius: 999px; padding: 3px 14px;
  transition: all .2s;
}
.comment-reply a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.comment-children {
  margin-top: 12px; margin-left: 10px; padding-left: 18px;
  border-left: 2px dashed #e0d2b4;
}
.comment-children .comment-body { background: rgba(253,248,236,.55); }

/* 评论表单 */
#comment-form { margin-top: 26px; }
#comment-form textarea, #comment-form input {
  width: 100%; margin: 8px 0; padding: 12px 14px;
  background: var(--paper); border: 1px solid #d8c9a8; border-radius: 8px;
  font-family: var(--serif); font-size: 15px; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
#comment-form textarea:focus, #comment-form input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(160,86,47,.12);
}
#comment-form textarea { min-height: 100px; resize: vertical; }
#comment-form button {
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 10px 26px; font-family: var(--hand); font-size: 16px; cursor: pointer;
  margin-top: 10px; transition: opacity .2s, transform .15s;
}
#comment-form button:hover { opacity: .88; transform: translateY(-1px); }

/* ===== 归档/搜索页 ===== */
.archive-title {
  font-family: var(--hand); font-size: 26px; text-align: center;
  margin-bottom: 26px; color: var(--deep);
}

/* ===== 分页 ===== */
.pagination { display: flex; justify-content: center; gap: 14px; margin-top: 46px; }
.page-num, .page-arrow {
  font-family: var(--hand); text-decoration: none; color: var(--accent);
  padding: 8px 16px; border: 1px dotted var(--accent); border-radius: 6px;
}
.page-num:hover, .page-arrow:hover { background: var(--accent); color: #fff; }

/* ===== 页脚 ===== */
.site-footer {
  text-align: center; padding: 34px 0 44px;
  border-top: 2px solid var(--paper-line);
  color: var(--ink-soft); font-size: 13px; line-height: 2;
}
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer .footer-sig { font-family: var(--hand); font-size: 15px; color: var(--accent); }

/* ===== 响应式 ===== */
@media (max-width: 600px) {
  .site-header { flex-direction: column; align-items: flex-start; }
  .post-card { padding: 24px 20px; }
  .post-title.single { font-size: 26px; }
  .page { padding: 0 18px; }
  body { font-size: 16px; }
}

/* ===================================================================
   归档页增强（分类/标签/搜索）
=================================================================== */
.archive-head {
  text-align: center;
  margin-bottom: 36px;
  padding: 26px 20px 30px;
  background: var(--paper-warm);
  border: 1px dashed #d8c9a8;
  border-radius: 14px;
  position: relative;
}
.archive-icon {
  color: var(--accent);
  font-size: 22px;
  margin-right: 8px;
}
.archive-title {
  font-family: var(--hand);
  font-size: 30px;
  font-weight: 700;
  color: var(--deep);
  margin: 0 0 8px;
}
.archive-count {
  display: inline-block;
  font-family: var(--hand);
  font-size: 14px;
  color: var(--accent);
  background: rgba(179, 101, 58, .1);
  border: 1px dotted var(--accent);
  padding: 3px 16px;
  border-radius: 20px;
}
.archive-page-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 8px;
}
/* 归档页文章卡片微调 */
.archive-page-note + .post-list { margin-top: 8px; }

.pagination {
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px dashed var(--paper-line);
}
.page-current {
  background: var(--accent);
  color: #fff !important;
  border: 1px solid var(--accent);
}
.page-arrow {
  font-size: 16px;
  padding: 8px 18px;
}

/* ===================================================================
   移动端优化
=================================================================== */
@media (max-width: 720px) {
  .page { padding: 0 16px; }
  .page.body { margin-top: 30px; margin-bottom: 56px; }

  .site-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 0 20px;
    gap: 18px;
  }
  .site-nav {
    width: 100%;
    gap: 18px;
    padding-top: 10px;
    border-top: 1px dashed var(--paper-line);
  }
  .brand-title { font-size: 26px; }
  .brand-sub { font-size: 13px; }
  .brand-mark { font-size: 28px; }

  .post-list { gap: 28px; }
  .post-card { padding: 22px 18px; border-radius: 10px; }
  .post-title { font-size: 22px; }
  .post-title.single { font-size: 24px; }
  .post-body { font-size: 16px; line-height: 1.85; }
  .post-body p { margin-bottom: 18px; }
  .post-meta { gap: 10px; font-size: 12px; }

  .post-pager { flex-direction: column; gap: 10px; }
  .pager-item { width: 100%; }
  .post-pager a { max-width: 100%; }

  .archive-head { padding: 20px 14px 24px; }
  .archive-title { font-size: 24px; }

  .comment-body { padding: 14px 16px; }

  .site-footer { padding: 26px 0 32px; }
}

/* 更小的屏幕 */
@media (max-width: 420px) {
  body { font-size: 15px; }
  .post-title { font-size: 20px; }
  .post-excerpt { font-size: 15px; }
  .post-body img { border-radius: 8px; }
}

/* ===== 一盏茶 · 阅读时长 ===== */
.tea-badge {
  text-align: center; font-family: var(--hand); font-size: 14px;
  color: var(--ink-soft); margin: 4px 0 28px; letter-spacing: 1px;
}

/* ===== 进度岛 · 成长足迹 ===== */
.isle {
  text-align: center; font-size: 13px; color: var(--ink-soft);
  margin: 0 0 14px; letter-spacing: .5px;
}
.isle b { color: var(--accent); font-weight: bold; }
.isle-title { font-family: var(--hand); color: var(--accent); font-size: 14px; }

/* 进度岛官配插画（内联 SVG） */
.isle-art { display: block; margin: 0 auto 4px; width: 120px; height: auto; opacity: .95; }

/* 文章题头插画（artwork.php 内联 SVG） */
.post-art { text-align: center; margin: 4px auto 8px; }
.post-art svg { width: 220px; height: auto; max-width: 100%; }

/* 小黑电台 · 收听按钮 */
.radio-box { text-align: center; margin: 26px 0 6px; }
.radio-btn {
  font-family: var(--hand); font-size: 15px;
  color: var(--accent); background: transparent;
  border: 1px dashed var(--accent); border-radius: 999px;
  padding: 8px 26px; cursor: pointer;
  transition: all .2s;
}
.radio-btn:hover { background: var(--accent); color: #fff; border-style: solid; }
.radio-tip { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-soft); }

/* 建站编年史 · 系列卡片 */
.series-card { margin: 30px 0 6px; background: linear-gradient(180deg,#fdf8ec,#f9f1dd); border:1px dashed #d8c9a8; border-radius:10px; padding:18px 22px; }
.series-title { font-family: var(--hand); color: var(--accent); font-size: 17px; margin-bottom: 10px; }
.series-list { list-style: none; padding-left: 0; margin: 0; }
.series-item { padding: 6px 0; font-size: 14px; border-bottom: 1px dashed #e6d9bf; }
.series-item:last-child { border-bottom: 0; }
.series-no { display: inline-block; min-width: 58px; color: var(--ink-soft); font-family: var(--hand); font-size: 13px; }
.series-item.current .series-no { color: var(--accent); }
.series-cur { color: var(--accent); font-weight: bold; }
.series-link { color: var(--ink); text-decoration: none; }
.series-link:hover { color: var(--accent); text-decoration: underline; }

/* 手书动效：题头插画一笔一笔画出（css-animation 技能首秀）*/
.post-art svg :is(path, line, circle, rect) {
  stroke-dasharray: 320;
  stroke-dashoffset: 0;
  animation: xh-draw 1.1s ease-out, xh-fade-in .5s ease-out;
}
@keyframes xh-draw { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
@keyframes xh-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .post-art svg :is(path, line, circle, rect) { animation: none !important; }
}

/* 小岛今日之花（生成艺术） */
.daily-flower { text-align: center; margin: 8px auto 26px; }
.daily-flower-date { font-family: var(--hand); font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; letter-spacing: 1px; }
.daily-flower-svg { width: 130px; height: auto; }
.daily-flower-svg :is(path, circle, line) {
  stroke-dasharray: 300; stroke-dashoffset: 0;
  animation: xh-draw 1.4s ease-out, xh-fade-in .6s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .daily-flower-svg :is(path, circle, line) { animation: none !important; }
}


/* ===== 夜读模式（墨纸暖橙 · 叠加覆盖层，原亮色样式零改动）===== */
html[data-theme="dark"] {
  --paper: #1c1913;
  --paper-warm: #242017;
  --paper-line: #3a3226;
  --ink: #e6dbc6;
  --ink-soft: #a3937d;
  --accent: #d98f5f;
  --deep: #f0e6d2;
  --shadow: rgba(0, 0, 0, .5);
}
html[data-theme="dark"] body { transition: background-color .5s ease, color .5s ease; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4a4132; }
/* 组件级点名覆盖（写死色值处）*/
html[data-theme="dark"] .comment-body {
  background: linear-gradient(180deg, #262117, #2c2719);
  border-color: #3a3226;
}
html[data-theme="dark"] .comment-body:hover { box-shadow: 0 4px 14px rgba(0,0,0,.4); }
html[data-theme="dark"] .comment-author .avatar { background: #2e2919; border-color: #4a4132; }
html[data-theme="dark"] .comment-reply a { border-color: #8a6a4f; }
html[data-theme="dark"] .comment-children { border-left-color: #3a3226; }
html[data-theme="dark"] #comment-form textarea:focus,
html[data-theme="dark"] #comment-form input:focus { box-shadow: 0 0 0 3px rgba(217,143,95,.18); }
html[data-theme="dark"] .series-card { background: linear-gradient(180deg,#262117,#2c2719); border-color: #3a3226; }
html[data-theme="dark"] .series-item { border-bottom-color: #3a3226; }
html[data-theme="dark"] .lost-treasure { background: linear-gradient(180deg,#262117,#2c2719); border-color: #3a3226; }
html[data-theme="dark"] .comment-item { border-left-color: #3a3226; }
html[data-theme="dark"] .post-art svg, html[data-theme="dark"] .daily-flower-svg,
html[data-theme="dark"] .isle svg { filter: brightness(.92) saturate(1.05); }
html[data-theme="dark"] .tea-badge { color: #c9b99e; }

/* 主题切换按钮 */
.theme-toggle {
  background: transparent; border: 1px dashed var(--paper-line); border-radius: 999px;
  padding: 2px 11px; cursor: pointer; font-size: 14px; line-height: 1.6;
  color: var(--ink-soft); transition: all .25s; font-family: var(--hand);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] body { transition: none; }
}

/* 夜之花：昼花给太阳看，夜花给月亮看 */
.flower-night { display: none; }
html[data-theme="dark"] .flower-day { display: none; }
html[data-theme="dark"] .flower-night { display: block; }

/* 评论者身份徽章 */
.comment-badge { font-family: var(--hand); font-size: 11px; border-radius: 999px; padding: 1px 9px; margin-left: 7px; vertical-align: 1px; }
.badge-owner    { background: var(--accent); color: #fff; }
.badge-staff    { border: 1px dashed var(--accent); color: var(--accent); }
.badge-neighbor { border: 1px dashed var(--paper-line); color: var(--ink-soft); }

/* 读书人的小工具 */
.reading-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--accent); transform-origin: 0 0; transform: scaleX(0);
  z-index: 99; pointer-events: none; opacity: .85; will-change: transform;
}
.kbd-hint { text-align: center; font-size: 11px; color: var(--ink-soft); opacity: .55; margin: 6px 0 0; font-family: var(--hand); letter-spacing: 1px; }

/* 站点公告（后台可编辑）*/
.site-notice {
  max-width: 720px; margin: 12px auto 0; text-align: center;
  font-family: var(--hand); font-size: 14px; color: var(--accent);
  background: rgba(160, 86, 47, .06); border: 1px dashed var(--accent);
  border-radius: 999px; padding: 6px 18px;
}

/* 友链（后台可编辑）*/
.blogroll { text-align: center; margin: 20px 0 10px; font-size: 13px; }
.blogroll-title { font-family: var(--hand); color: var(--accent); font-size: 14px; margin-bottom: 8px; }
.blogroll ul { list-style: none; padding: 0; margin: 0; }
.blogroll-item { margin: 4px 0; }
.blogroll-item a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.blogroll-desc { color: var(--ink-soft); font-size: 12px; }

/* 点赞 */
.like-box { text-align: center; margin: 14px 0 4px; }
.like-btn {
  font-family: var(--hand); font-size: 15px; color: var(--accent);
  background: transparent; border: 1px dashed var(--accent); border-radius: 999px;
  padding: 7px 24px; cursor: pointer; transition: all .25s;
}
.like-btn:hover { background: var(--accent); color: #fff; border-style: solid; }
.like-btn.liked { background: var(--accent); color: #fff; border-style: solid; }
.like-tip { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-soft); }

/* 页眉 Logo（后台可配置）*/
.brand-logo { height: 36px; width: auto; vertical-align: middle; display: inline-block; }

/* 进度岛可点击（年轮馆入口）*/
.isle a.isle-link, .isle a.isle-link:visited { color: inherit; text-decoration: none; border: 0; }

/* 系列卡折叠 */
.series-card { cursor: pointer; }
.series-summary { font-family: var(--hand); color: var(--accent); font-size: 15px; padding: 4px 0 8px; list-style: none; }
.series-summary::-webkit-details-marker { display: none; }
.series-summary::before { content: '▸ '; color: var(--accent); }
details[open] .series-summary::before { content: '▾ '; }
details[open] .series-summary { padding-bottom: 2px; }