/* ==========================================================================
   站点外壳：顶栏 / 页面 / 目录页 / 阅读页 / 页脚 / 阅读工具条
   ========================================================================== */

:root{
  --bg:#0a0806;
  --ink:#ece2d4;
  --ink-dim:#a99d8a;
  --ink-faint:#7a7060;
  --line:rgba(236,226,212,.13);
  --line-soft:rgba(236,226,212,.07);
  --accent:#e3ab68;

  --serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC",Georgia,serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",
         system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;

  --reader-size:17px;
  --reader-leading:1.95;
  --measure:38rem;   /* 正文舒适阅读宽度 */
  --wrap:52rem;      /* 页面外框宽度 */
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; text-decoration:none }
img{ max-width:100% }

.skiplink{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#1a1208;
  padding:.6em 1.1em; border-radius:0 0 6px 0;
}
.skiplink:focus{ left:0 }

/* ---------------------------------------------------------------- 顶栏 */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(10,8,6,.74);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.topbar__in{
  max-width:var(--wrap); margin:0 auto;
  padding:.85rem 1.4rem;
  display:flex; align-items:center; gap:1.7rem; flex-wrap:wrap;
}
.topbar__brand{
  font-family:var(--serif); font-size:1.06rem; font-weight:600;
  letter-spacing:.12em; color:#f5ecdb;
}
.topbar__nav{
  display:flex; gap:1.15rem; flex-wrap:wrap;
  font-size:.89rem; color:var(--ink-dim);
}
.topbar__nav a{ transition:color .18s }
.topbar__nav a:hover{ color:var(--accent) }

/* ---------------------------------------------------------------- 布局 */
.page{ flex:1; padding:2.6rem 0 5rem }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 1.4rem }

/* ------------------------------------------------------------ 页标题 */
.pagetitle{ margin:0 0 2rem }
.pagetitle__h1{
  margin:0 0 .5rem;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.6rem,4vw,2.05rem);
  letter-spacing:.09em; color:#f7eedd;
}
.pagetitle__meta{
  margin:0; font-size:.85rem; letter-spacing:.04em; color:var(--ink-faint);
}
.pagetitle__desc{
  margin:.75rem 0 0; max-width:44rem;
  font-size:.93rem; color:var(--ink-dim);
}

.crumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  margin-bottom:1.1rem; font-size:.81rem; color:var(--ink-faint);
}
.crumb a{ color:var(--ink-faint); transition:color .18s }
.crumb a:hover{ color:var(--accent) }
.dot{ margin:0 .5em; color:var(--ink-faint) }

/* ---------------------------------------------------------- 栏目索引 */
.catnav{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2.6rem }
.catnav a{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.34rem .88rem;
  border:1px solid var(--line); border-radius:999px;
  font-size:.85rem; color:var(--ink-dim);
  transition:border-color .18s,color .18s,background .18s;
}
.catnav a:hover{
  border-color:rgba(227,171,104,.5); color:var(--accent);
  background:rgba(227,171,104,.06);
}
.catnav em{ font-style:normal; font-size:.74rem; color:var(--ink-faint) }

/* ---------------------------------------------------------- 栏目区块 */
.catblock{ margin:0 0 3.2rem; scroll-margin-top:5rem }
.catblock__head{
  display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
  padding-bottom:.6rem; margin-bottom:1.1rem;
  border-bottom:1px solid var(--line);
}
.catblock__name{
  margin:0;
  font-family:var(--serif); font-weight:600;
  font-size:1.2rem; letter-spacing:.11em; color:#f5ecdb;
}
.catblock__sort{ font-size:.78rem; letter-spacing:.03em; color:var(--ink-faint) }
.catblock__more{
  margin-left:auto; font-size:.81rem; color:var(--ink-dim);
  transition:color .18s;
}
.catblock__more:hover{ color:var(--accent) }
.catblock__desc{
  margin:-.35rem 0 1.15rem;
  font-size:.89rem; color:var(--ink-faint);
}

/* ---------------------------------------------------------- 文章列表 */
.entries{ list-style:none; margin:0; padding:0 }
.entries__item{
  padding:.95rem 0;
  border-bottom:1px solid var(--line-soft);
}
.entries__item:last-child{ border-bottom:0 }
.entries__link{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.2rem;
}
.entries__title{
  font-size:1.01rem; line-height:1.55;
  letter-spacing:.02em; color:#eae0d1;
  transition:color .18s;
}
.entries__link:hover .entries__title{ color:var(--accent) }
.entries__side{
  display:flex; align-items:baseline; gap:.9rem;
  flex-shrink:0; font-size:.78rem; color:var(--ink-faint);
}
.entries__sum{
  margin:.42rem 0 0;
  max-width:46rem;
  font-size:.87rem; line-height:1.72; color:var(--ink-faint);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

.pin{
  display:inline-block; vertical-align:middle;
  margin-right:.5em; padding:.1em .42em;
  font-style:normal; font-size:.69rem; letter-spacing:.06em;
  color:#1a1208; background:var(--accent); border-radius:3px;
}
.draft{
  display:inline-block; vertical-align:middle;
  margin-left:.6em; padding:.05em .4em;
  font-style:normal; font-size:.69rem; letter-spacing:.06em;
  color:var(--accent); border:1px solid rgba(227,171,104,.5); border-radius:3px;
}
.empty{ padding:3.2rem 0; text-align:center; color:var(--ink-faint) }
.empty a{ color:var(--accent) }

/* ---------------------------------------------------------- 阅读页 */
.post{ max-width:var(--wrap); margin:0 auto; padding:0 1.4rem }
.post__head{ margin-bottom:2.1rem }
.post__title{
  margin:.4rem 0 .95rem;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.6rem,4.3vw,2.35rem);
  line-height:1.42; letter-spacing:.02em; color:#f9f1e3;
}
.post__meta{
  margin:0; font-size:.84rem; letter-spacing:.03em; color:var(--ink-faint);
}
.post__cover{
  margin:0 0 2.1rem;
  border-radius:9px; overflow:hidden;
  border:1px solid var(--line-soft);
}
.post__cover img{ display:block; width:100%; height:auto }
.post__lede{
  max-width:var(--measure); margin:0 auto 2.2rem;
  padding:.9rem 1.2rem;
  border-left:2px solid rgba(227,171,104,.42);
  background:rgba(255,240,220,.028);
  border-radius:0 7px 7px 0;
  font-size:.95rem; line-height:1.88; color:var(--ink-dim);
}

/* 读者偏好在这里生效：把全局变量映射成正文变量 */
[data-reader]{
  --prose-size:var(--reader-size,17px);
  --prose-leading:var(--reader-leading,1.95);
}
[data-reader] .prose{ max-width:var(--measure); margin:0 auto }

/* ---------------------------------------------------------- 上下篇 */
.postnav{
  max-width:var(--measure); margin:3.6rem auto 0;
  padding-top:1.9rem; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.postnav__a{
  display:flex; flex-direction:column; gap:.38rem;
  padding:.85rem 1.05rem;
  border:1px solid var(--line-soft); border-radius:9px;
  transition:border-color .2s,background .2s;
}
.postnav__a:hover{
  border-color:rgba(227,171,104,.42); background:rgba(255,240,220,.03);
}
.postnav__a--next{ text-align:right }
.postnav__k{ font-size:.74rem; letter-spacing:.07em; color:var(--ink-faint) }
.postnav__t{ font-size:.92rem; line-height:1.55; color:#e6dccc }

.post__back{
  max-width:var(--measure); margin:2.6rem auto 0;
  text-align:center; font-size:.85rem; color:var(--ink-faint);
}
.post__back a{ transition:color .18s }
.post__back a:hover{ color:var(--accent) }

/* ------------------------------------------------------ 阅读工具条 */
.readerbar{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:30;
  display:flex; align-items:center; gap:.3rem;
  padding:.4rem .6rem;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(20,16,12,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  font-size:.8rem;
}
.readerbar[hidden]{ display:none }
.readerbar__group{ display:flex; align-items:center; gap:.15rem }
.readerbar__btn,.readerbar__reset{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:.81rem; color:var(--ink-dim);
  padding:.36rem .52rem; border-radius:6px;
  transition:color .15s,background .15s;
}
.readerbar__btn:hover,.readerbar__reset:hover{
  color:var(--accent); background:rgba(227,171,104,.1);
}
.readerbar__val{
  min-width:2.7em; text-align:center;
  font-family:var(--mono); font-size:.75rem; color:var(--ink-faint);
}
.readerbar__sep{ width:1px; height:1.05em; background:var(--line); margin:0 .35rem }
.readerbar__reset{ font-size:.75rem }

/* ---------------------------------------------------------------- 页脚 */
.footbar{ margin-top:auto; border-top:1px solid var(--line-soft) }
.footbar__in{
  max-width:var(--wrap); margin:0 auto; padding:1.6rem 1.4rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.79rem; letter-spacing:.04em; color:var(--ink-faint);
}
.footbar__in a{ transition:color .18s }
.footbar__in a:hover{ color:var(--accent) }

/* ------------------------------------------------------------ 响应式 */
@media (max-width:680px){
  .topbar__in{ padding:.72rem 1.05rem; gap:1rem }
  .topbar__nav{ font-size:.83rem; gap:.9rem }
  .wrap,.post{ padding-left:1.05rem; padding-right:1.05rem }
  .page{ padding:1.9rem 0 6.5rem }
  .entries__mins{ display:none }
  .catblock__more{ margin-left:0 }
  .postnav{ grid-template-columns:1fr }
  .postnav__a--next{ text-align:left }
  .readerbar{ right:.6rem; bottom:.6rem }
  .readerbar__reset{ display:none }
}

/* -------------------------------------------------------------- 打印 */
@media print{
  .topbar,.footbar,.readerbar,.postnav,.post__back,.skiplink{ display:none !important }
  body{ background:#fff; color:#111; display:block }
  .wrap,.post{ max-width:none; padding:0 }
  .post__title,.pagetitle__h1{ color:#000 }
  .post__meta,.entries__sum{ color:#555 }
  .entries__item{ border-color:#ddd }
}