*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* 底色比纸面深一档，卡片才浮得起来 */
  --linen:#e9dfcb; --cloth:#fdfaf1; --cloth2:#f8f2e4;
  --sage:#9fb096; --sage-d:#5f7457;
  --mustard:#d9a566; --mustard-d:#8a6224;
  --brick:#b05a44; --fog:#78899f;
  --thread:#8a7458; --thread-l:rgba(138,116,88,.55);
  --ink:#372f24; --ink2:#52463a; --ink3:#7a6b57; --ink4:#a2957f;
  --r:18px;
  --round:"Quicksand","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  /* 三层阴影：贴边 + 接触 + 环境 */
  --lift:0 1px 0 rgba(160,132,96,.5),0 2px 4px -2px rgba(70,50,25,.16),0 16px 32px -24px rgba(70,50,25,.5);
  --lift-hi:0 1px 0 rgba(160,132,96,.5),0 6px 12px -6px rgba(70,50,25,.2),0 26px 44px -26px rgba(70,50,25,.55);
}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  background:var(--linen); color:var(--ink); font-family:var(--sans); line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* 布面经纬：间距 8px、透明度很低，只留手感不抢眼 */
  background-image:
    repeating-linear-gradient(0deg,rgba(120,100,70,.015) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(90deg,rgba(120,100,70,.015) 0 1px,transparent 1px 8px),
    radial-gradient(125% 88% at 50% -8%,#f4ecdc,#e9dfcb 58%,#dccfb8);
  background-repeat:repeat,repeat,no-repeat;
  background-attachment:scroll,scroll,fixed;
}
a{color:inherit;text-decoration:none}
/* 开屏 */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:4vh clamp(18px,5vw,60px);
}
.patch-main{
  position:relative; width:min(760px,100%); border-radius:var(--r);
  background-color:var(--cloth);
  background-image:
    repeating-linear-gradient(45deg,rgba(120,100,70,.026) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-45deg,rgba(120,100,70,.026) 0 1px,transparent 1px 6px);
  padding:clamp(36px,5vw,60px) clamp(26px,4.5vw,56px) clamp(30px,4vw,46px);
  box-shadow:var(--lift),0 40px 70px -50px rgba(70,50,25,.75);
  transform:rotate(-.7deg);
}
/* 外框缝线 + 纸边厚度 */
.patch-main::before{
  content:""; position:absolute; inset:10px; border:1.6px dashed var(--thread);
  border-radius:calc(var(--r) - 8px); opacity:.62; pointer-events:none;
}
.patch-main::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 -3px 8px -4px rgba(120,95,60,.22);
}
.patch{
  position:absolute; border-radius:10px; box-shadow:0 10px 20px -13px rgba(70,50,25,.85);
  display:grid; place-items:center; text-align:center;
  border:1px solid rgba(255,255,255,.35);
  z-index:6;
}
.patch::before{content:""; position:absolute; inset:5px; border:1.4px dashed rgba(50,38,22,.42); border-radius:6px}
.patch span{position:relative; z-index:2}
.p-sage{width:106px;height:84px;background:linear-gradient(160deg,#adbba3,#94a48a); top:-26px; left:6%; transform:rotate(-7deg); color:#2b3627; font-family:var(--round); font-size:11.5px; font-weight:700; letter-spacing:.12em}
.p-mustard{width:94px;height:74px;background:linear-gradient(160deg,#e2af74,#d29b58); bottom:-24px; right:8%; transform:rotate(6deg); color:#4a3418; font-family:var(--round); font-size:11.5px; font-weight:700; letter-spacing:.12em}
.p-fog{
  width:auto; min-width:96px; height:76px; padding:0 16px;
  background:linear-gradient(160deg,#8696ab,#6d7f96); top:41%; right:-15px; transform:rotate(9deg);
  color:#eaf0f6;
}
.p-fog span{display:inline-flex; align-items:baseline; gap:5px; font-family:var(--round); white-space:nowrap}
.p-fog b{font-size:23px; font-weight:700; letter-spacing:0; line-height:1}
.p-fog i{font-style:normal; font-size:12px; font-weight:600; letter-spacing:.04em; opacity:.95}
.eyebrow{
  text-align:center; font-family:var(--round); font-size:11.5px; font-weight:600; letter-spacing:.34em;
  color:var(--ink3); text-transform:uppercase; margin-bottom:20px;
}
.eyebrow .d{letter-spacing:.08em; color:var(--ink2); font-weight:600}
.hero h1{
  text-align:center; font-family:var(--round); font-weight:700; font-size:clamp(36px,7vw,78px);
  line-height:1.16; letter-spacing:.045em; color:var(--ink); text-wrap:balance;
}
.hero h1 .g{color:var(--brick)}
/* 副标题较长时：折行、缩小，保持层级 */
.hero h1 .g.subline{display:block; font-size:.44em; line-height:1.5; letter-spacing:.02em; margin-top:.18em; font-weight:600}
.thread-line{display:flex; align-items:center; justify-content:center; gap:10px; margin:22px 0 0}
.thread-line span{width:28px;height:1.5px;background:var(--thread); opacity:.55; border-radius:2px}
.thread-line .dot{width:7px;height:7px;border-radius:50%;background:var(--mustard); box-shadow:0 0 0 3px rgba(217,165,102,.28)}
.tagline{
  text-align:center; color:var(--ink); margin:20px auto 0;
  font-family:var(--round); font-weight:600; letter-spacing:.08em;
  font-size:clamp(17px,2.05vw,21px); line-height:1.9; max-width:34ch;
}
.tagline .sub{
  display:block; margin-top:12px; font-family:var(--sans);
  font-size:13px; font-weight:400; color:var(--ink3); letter-spacing:.02em; line-height:1.95;
  text-wrap:balance;
}
.tags{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:26px}
.tags > *{
  font-family:var(--round); font-size:11.5px; font-weight:700; padding:6px 15px; border-radius:8px;
  color:#372f24; text-decoration:none; white-space:nowrap; box-shadow:0 3px 7px -4px rgba(70,50,25,.7); border:1px solid rgba(255,255,255,.4);
  transition:transform .18s;
}
.tags > *{max-width:96px; overflow:hidden; text-overflow:ellipsis}
.tags > *:hover{transform:translateY(-2px) !important}
/* 首屏「更多」：虚线空框，和前 6 个实心彩色块区分开 */
.tags .t-more{background:none; border:1.4px dashed var(--thread-l); color:var(--ink3); box-shadow:none}
.tags .t-more:hover{background:rgba(138,116,88,.07); border-color:var(--thread); color:var(--ink2)}
.tags .t-diary{background:linear-gradient(160deg,#d89479,#bc7052); transform:rotate(-1.2deg)}
.tags .t-tech{background:linear-gradient(160deg,#a9bda0,#8ba181); transform:rotate(1.4deg)}
.tags .t-life{background:linear-gradient(160deg,#e1b77f,#d49f55); transform:rotate(-1.8deg)}
.tags .t-share{background:linear-gradient(160deg,#9db3cd,#7e95b4); transform:rotate(.7deg)}
.tags .t-violet{background:linear-gradient(160deg,#b3a4cf,#9483b3); transform:rotate(-1.5deg)}
.tags .t-teal{background:linear-gradient(160deg,#8fbdb8,#6d9c97); transform:rotate(1.1deg)}
.tags .t-rose{background:linear-gradient(160deg,#dba7ae,#bb8289); transform:rotate(-.9deg)}
.tags .t-slate{background:linear-gradient(160deg,#a6b2be,#7f8d9a); transform:rotate(1.6deg)}
.enter{
  display:flex; align-items:center; justify-content:center; gap:12px; width:fit-content; margin:32px auto 0;
  padding:14px 30px; border-radius:99px; background:var(--ink); color:#fdfaf1;
  font-family:var(--round); font-size:15.5px; font-weight:700; letter-spacing:.1em;
  box-shadow:0 6px 0 #241d14,0 16px 26px -14px rgba(55,47,36,.85); transition:.16s;
}
.enter:hover{transform:translateY(3px); box-shadow:0 3px 0 #241d14,0 10px 18px -14px rgba(55,47,36,.85); background:var(--brick)}
.tip{
  position:absolute; bottom:5vh; left:50%; transform:translateX(-50%);
  font-family:var(--round); font-size:12px; letter-spacing:.18em; color:var(--ink3);
}
/* 正文 */
#main{scroll-margin-top:90px}
.wrap{max-width:1080px; min-height:52vh; margin:0 auto; padding:14px clamp(16px,4vw,44px) 60px}
/* 顶部导航：吸顶，白条宽度 = 正文卡片宽度，四周圆角 */
.topnav{
  position:sticky; top:14px; z-index:40;
  width:100%;
  margin:0 auto 20px;
  padding:13px 22px;
  border-radius:14px;
  background:rgba(253,250,241,.97); backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(160,132,96,.45), 0 10px 24px -18px rgba(70,50,25,.55);
}
.topnav .inner{
  display:flex; align-items:center; gap:20px; position:relative;
}
/* 导航条底部一条缝线 */
.topnav .inner::after{
  content:""; position:absolute; left:2px; right:2px;
  bottom:-6px; height:1.5px;
  background:repeating-linear-gradient(90deg,var(--thread) 0 6px,transparent 6px 12px); opacity:.35;
}
.topnav .lg{display:flex; align-items:center; gap:10px; font-family:var(--round); font-weight:700; font-size:16px; color:var(--ink); transition:.18s}
.topnav .lg-ico{width:22px; height:22px; border-radius:5px; object-fit:contain; display:block; flex:0 0 auto}
.topnav .lg:hover{color:var(--brick)}
.topnav nav{display:flex; gap:18px; margin-left:auto; font-family:var(--round); font-size:14px; font-weight:600; color:var(--ink3)}
.topnav nav a:hover,.topnav nav a.on{color:var(--ink)}
.topnav nav a.on{border-bottom:2px dashed var(--brick); padding-bottom:2px}
/* 搜索按钮 */
.topnav .search{
  display:inline-flex; align-items:center; justify-content:center;
  width:27px; height:27px; border-radius:50%; margin-left:2px;
  border:1px solid var(--thread-l); color:var(--ink3);
  box-shadow:0 1px 0 rgba(160,132,96,.18); transition:.18s;
}
.topnav .search svg{width:13px; height:13px; display:block}
.topnav .search:hover{
  background:var(--cloth2); color:var(--ink); border-color:var(--thread);
  transform:translateY(-1px); box-shadow:0 3px 8px -4px rgba(70,50,25,.5);
}
/* 搜索框：展开后与导航条完全同宽同高 */
.searchbox{
  position:absolute; inset:-13px -22px; z-index:5;
  display:flex; align-items:center; gap:12px;
  padding:13px 22px; border-radius:14px;
  background:rgba(253,250,241,.995);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.searchbox.open{opacity:1; visibility:visible; transform:none}
.searchbox .si{width:16px; height:16px; flex:0 0 auto; color:var(--ink3)}
.searchbox input{
  flex:1; min-width:0; border:0; outline:none; background:none;
  border-bottom:1.5px dashed var(--thread-l);
  font-family:var(--sans); font-size:14.5px; color:var(--ink);
  padding:7px 2px; letter-spacing:.01em; text-align:center;
}
.searchbox input::placeholder{color:var(--ink4)}
.searchbox input::-webkit-search-cancel-button{display:none}
.searchbox .close{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--thread-l); background:none; color:var(--ink3);
  font-size:12px; line-height:1; cursor:pointer; transition:.18s;
}
.searchbox .close:hover{background:var(--cloth2); color:var(--ink); border-color:var(--thread)}
.searchbox .go{
  flex:0 0 auto; height:28px; padding:0 15px; border:none; border-radius:14px;
  background:var(--brick); color:#fffdf8; font-family:var(--round); font-size:12.5px; font-weight:700;
  letter-spacing:.04em; cursor:pointer; transition:.18s;
}
.searchbox .go:hover{background:#9c4a36}
.grid{display:grid; grid-template-columns:minmax(0,1fr) 272px; gap:20px; align-items:start}
/* 文章页单栏：隐藏侧栏后正文占满整个内容宽度 */
.grid.single{grid-template-columns:minmax(0,1fr)}
.grid > *{min-width:0}
.grid.single .cover{max-height:520px; object-fit:cover}
.sechead{
  display:flex; align-items:center; gap:12px; font-family:var(--round); font-size:13px; font-weight:700;
  letter-spacing:.2em; color:var(--ink); text-transform:uppercase; margin:0 0 16px;
}
.sechead::after{content:""; flex:1; height:1.6px; background:repeating-linear-gradient(90deg,var(--thread) 0 7px,transparent 7px 13px); opacity:.55}
/* 卡片 */
.card{
  position:relative; background:var(--cloth); border-radius:4px; padding:22px 24px; margin-bottom:18px;
  box-shadow:var(--lift); transition:.24s; transform:rotate(var(--tilt,-.3deg));
}
article.card:nth-of-type(even){--tilt:.35deg}
article.card:nth-of-type(3n){--tilt:-.45deg}
.card::before{
  content:""; position:absolute; inset:8px; border:1.5px dashed var(--thread-l);
  border-radius:2px; pointer-events:none;
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),inset 0 -3px 8px -5px rgba(120,95,60,.2);
}
.card:hover{transform:rotate(0) translateY(-4px); box-shadow:var(--lift-hi)}
.lead{padding:0; overflow:hidden; border-radius:18px; background:linear-gradient(170deg,#fffdf6,#f9f2e2)}
.lead::before{border-radius:11px}
.lead .head{
  display:flex; align-items:center; gap:11px; padding:13px 26px; background:linear-gradient(90deg,var(--brick),#c26b53); color:#fff8ee;
  font-family:var(--round); font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  position:relative; z-index:2;
}
.lead .head::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 2px,transparent 2px 14px);
  pointer-events:none;
}
.lead .bd{padding:26px 28px 24px; position:relative; z-index:2}
.lead h2{
  font-family:var(--round); font-size:clamp(21px,2.9vw,30px); font-weight:700; line-height:1.42;
  letter-spacing:.01em; text-wrap:balance;
}
.lead h2 a:hover{color:var(--brick)}
.lead p{color:var(--ink2); font-size:15px; margin-top:13px; max-width:56ch; line-height:2.05; font-weight:400}
.meta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:20px; padding-top:15px;
  border-top:1.5px dashed var(--thread-l); font-size:12px; color:var(--ink3); letter-spacing:.08em;
  position:relative; z-index:2;
}
.meta .tg{
  font-family:var(--round); font-size:11px; font-weight:700; padding:3px 12px; border-radius:7px;
  background:var(--sage); color:#26301f; border:1px solid rgba(255,255,255,.4);
}
.meta .go{margin-left:auto; color:var(--brick); font-family:var(--round); font-weight:700}
.meta .go:hover{text-decoration:underline; text-underline-offset:4px}
.item{display:grid; grid-template-columns:62px 1fr; gap:14px; align-items:start}
.item .d{font-family:var(--round); font-size:13px; color:var(--ink2); line-height:1.9; padding-top:3px; font-weight:600}
.item .d span{display:block}
.item .d b{display:block; font-size:11.5px; letter-spacing:.12em; margin-bottom:2px}
/* 分类色：跟分类名走，不随位置变 */
.d b.c-tech{color:var(--sage-d)}
.d b.c-life{color:var(--mustard-d)}
.d b.c-share{color:var(--fog)}
.d b.c-diary{color:var(--brick)}
.d b.c-violet{color:#79659b}
.d b.c-teal{color:#4a7b76}
.d b.c-rose{color:#a2707a}
.d b.c-slate{color:#66727e}
.item h3{font-family:var(--round); font-size:17px; font-weight:700; line-height:1.48}
.item h3 a:hover{color:var(--brick)}
.item p{color:var(--ink3); font-size:14px; margin-top:7px; font-weight:400; line-height:1.8}
.aside{display:grid; gap:14px; min-width:0}
.box{
  position:relative; background:var(--cloth); border-radius:var(--r); padding:20px 22px;
  box-shadow:var(--lift); min-width:0;
}
.box::before{content:""; position:absolute; inset:8px; border:1.4px dashed var(--thread-l); border-radius:calc(var(--r) - 7px); pointer-events:none; opacity:.85}
.box > *{position:relative; z-index:2}
.box h4{
  font-family:var(--round); font-size:12.5px; font-weight:700; letter-spacing:.18em; color:var(--ink);
  text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:9px;
}
.box h4::after{content:""; flex:1; height:1.5px; background:repeating-linear-gradient(90deg,var(--thread) 0 5px,transparent 5px 11px); opacity:.5}
.who{text-align:center}
.who .av{
  width:74px;height:74px;margin:4px auto 14px;border-radius:50%; overflow:hidden;
  background:linear-gradient(160deg,#adbba3,#94a48a);
  box-shadow:0 0 0 4px var(--cloth),0 0 0 6px rgba(138,116,88,.3),0 8px 16px -10px rgba(70,50,25,.6);
}
.who .av img{width:100%;height:100%;object-fit:cover;display:block}
.who .nm{font-family:var(--round); font-size:18px; font-weight:700}
.who .bio{font-size:12px; color:var(--ink3); margin-top:4px}
.who .st{display:flex; justify-content:space-around; margin-top:18px; padding-top:15px; border-top:1.5px dashed var(--thread-l)}
.who .st b{font-family:var(--round); font-size:19px; font-weight:700; display:block; line-height:1.2}
.who .st div:nth-child(1) b{color:var(--brick)}
.who .st div:nth-child(2) b{color:var(--sage-d)}
.who .st div:nth-child(3) b{color:var(--mustard-d)}
.who .st span{font-size:9.5px; letter-spacing:.16em; color:var(--ink3)}
.kv{display:grid; gap:11px; font-size:13.5px; min-width:0}
.kv div{display:flex; align-items:baseline; gap:9px; color:var(--ink2); line-height:1.5; min-width:0}
.kv i{flex:0 0 auto; font-style:normal; font-family:var(--round); font-weight:700; font-size:11.5px; color:var(--brick); padding-top:2px}
.kv a{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kv em{flex:0 0 auto; font-style:normal; font-family:var(--round); font-size:10.5px; color:var(--ink4)}
.kv a:hover{color:var(--brick)}
.cloud{display:flex; flex-wrap:wrap; gap:8px}
/* 最新评论 */
.cmts div{padding:9px 0; border-bottom:1px dashed var(--thread-l); min-width:0}
.cmts div:first-child{padding-top:1px}
.cmts div:last-child{border-bottom:0; padding-bottom:0}
.cmts p{
  color:var(--ink2); font-size:12.5px; line-height:1.6; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cmts p b{font-family:var(--round); font-weight:600; color:var(--ink); margin-right:5px}
.cmts a{display:block; margin-top:2px; font-size:10.5px; color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cmts a:hover{color:var(--brick)}
.cmts-empty{margin:2px 0 0; font-size:12.5px; line-height:1.8; color:var(--ink4)}
/* 分类列表 */
.cats{display:grid; gap:10px}
.cats a{
  display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink2);
  transition:.18s; padding:1px 0; min-width:0;
}
/* 分类名过长时省略，不撑破侧栏 */
.cats .c-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:inherit}
.cats a:hover{color:var(--ink); transform:translateX(2px)}
.cats i{width:8px; height:8px; border-radius:50%; flex:0 0 auto; transition:.18s; opacity:.9}
.cats a:hover i{transform:scale(1.3); opacity:1}
.cats span{flex:0 0 auto; margin-left:auto; font-family:var(--round); font-size:11.5px; font-weight:600; color:var(--ink4)}
.cloud a{
  display:inline-block; font-family:var(--round); font-size:11.5px; font-weight:600; padding:4px 11px; border-radius:7px;
  color:#372f24; border:1px solid rgba(255,255,255,.4); box-shadow:0 2px 5px -3px rgba(70,50,25,.6);
  transition:.18s;
}
.cloud a:hover{transform:translateY(-2px) rotate(-2deg)}
.cloud a:nth-child(5n+1){background:#d8e0cf}
.cloud a:nth-child(5n+2){background:#efd9b6}
.cloud a:nth-child(5n+3){background:#eecdc1}
.cloud a:nth-child(5n+4){background:#d6dfe9}
.cloud a:nth-child(5n+5){background:#e3d6c4}
/* 列表折叠：超出的先隐藏，点「展开全部」再显示 */
.cats.limited a:nth-child(n+9){display:none}
.cats.expanded a:nth-child(n+9){display:flex}
.cloud.limited a:nth-child(n+13){display:none}
.cloud.expanded a:nth-child(n+13){display:inline-block}
.list-more{
  display:block; margin-top:9px; padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--round); font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--ink4);
  transition:.18s;
}
.list-more:hover{color:var(--brick)}
.scrap{
  background:linear-gradient(160deg,#e7c69b,#dfb87e); border-radius:12px; padding:17px 19px; transform:rotate(-1.6deg);
  font-family:var(--round); font-size:16px; font-weight:700; color:#4a3418; line-height:1.55;
  box-shadow:0 12px 22px -14px rgba(70,50,25,.85); border:1px solid rgba(255,255,255,.35);
  min-width:0; overflow-wrap:anywhere;
  transition:transform .24s, box-shadow .24s;
}
/* 和文章卡片一致：鼠标进入时摆正并轻轻抬起 */
.scrap:hover{transform:rotate(0) translateY(-3px); box-shadow:0 18px 30px -18px rgba(70,50,25,.9)}
.scrap-t{display:block}
.scrap-t.is-loading{opacity:.5; font-weight:600; letter-spacing:.06em}
.scrap-d{display:block; margin-top:9px; font-size:10.5px; font-weight:600; letter-spacing:.08em; opacity:.55; text-align:right}
.foot{
  margin-top:26px; padding-top:16px;
  border-top:1.6px dashed var(--thread-l);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:11.5px; color:var(--ink3); letter-spacing:.1em;
}
.uptime{font-variant-numeric:tabular-nums}
.foot a{transition:color .18s}
.foot a:hover{color:var(--brick); text-decoration:underline; text-underline-offset:2px}
/* 移动端侧栏按钮 + 抽屉 */
.fp-menu-btn{display:none; flex:0 0 auto; align-items:center; justify-content:center; width:28px; height:28px; margin-right:2px; padding:0; border:1px solid var(--thread-l); border-radius:8px; background:var(--cloth2); color:var(--ink3); cursor:pointer; transition:.18s}
.fp-menu-btn:hover{color:var(--ink); border-color:var(--thread)}
.fp-menu-btn svg{width:14px; height:14px; display:block}
.fp-navbox{display:none}
.fp-navbox .blog-header-nav{display:block}
.fp-navbox .nav-list{display:flex; flex-direction:column; gap:0; list-style:none; margin:0; padding:0}
.fp-navbox .nav-link{display:block; padding:8px 2px; font-family:var(--round); font-size:14px; font-weight:600; color:var(--ink3); text-decoration:none; border-bottom:1px dashed rgba(138,116,88,.14); transition:.15s}
.fp-navbox .list-item:last-child .nav-link{border-bottom:0}
.fp-navbox .nav-link:hover{color:var(--brick)}
.fp-navbox .dropdown-menus{display:block; position:static; padding:0 0 6px 12px; border:0; background:none; box-shadow:none; min-width:0}
.fp-navbox .dropdown-menus .nav-link{padding:6px 2px; font-size:13px; border-bottom:0; color:var(--ink4)}
.fp-drawer-mask{position:fixed; inset:0; z-index:299; background:rgba(45,39,31,.38); opacity:0; visibility:hidden; transition:opacity .24s, visibility .24s}
.fp-drawer-mask.is-on{opacity:1; visibility:visible}

@media (max-width:900px){
  body{background-attachment:scroll,scroll,scroll}
  /* 手机端导航条元素间距减半，汉堡按钮不至于离站名太远 */
  .topnav .inner{gap:9px}
  .fp-menu-btn{display:inline-flex}
  .fp-navbox{display:block}
  .grid{grid-template-columns:1fr}
  .aside{position:fixed; top:0; left:0; bottom:0; z-index:300; display:block; width:min(84vw,320px); padding:16px 14px 28px; overflow-y:auto; overscroll-behavior:contain; background:var(--linen); box-shadow:8px 0 30px -14px rgba(55,47,36,.45); transform:translateX(-100%); transition:transform .26s cubic-bezier(.4,0,.2,1); gap:0}
  .aside.is-open{transform:translateX(0)}
  .aside .box{margin-bottom:13px}
  .aside .box:last-child{margin-bottom:0}
  .item{grid-template-columns:1fr;gap:6px}
  .topnav nav{display:none}
  .topnav .search{margin-left:auto}
  .topnav .lg{min-width:0}
  .topnav .lg span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .patch-main{transform:none}
  /* 篇数块在手机上保留，尺寸缩一号 */
  .p-fog{min-width:80px; height:64px; padding:0 12px; right:-10px}
  .p-fog b{font-size:19px}
  .p-fog i{font-size:10.5px}
}
@media (max-width:640px){
  /* 页脚在手机上竖排居中 */
  .foot{flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:7px}
  .foot .fr{justify-content:center}
  .hero{padding:6vh 16px 9vh}
  .patch-main{padding:54px 22px 48px}
  .patch{border-radius:8px}
  .p-sage{width:78px;height:62px;top:-16px;left:-6px;font-size:10px;letter-spacing:.1em}
  .p-mustard{width:70px;height:56px;bottom:-14px;right:-6px;font-size:10px;letter-spacing:.1em}
  .eyebrow{font-size:10px;letter-spacing:.24em}
  .enter{margin-top:34px}
}
/* emlog 菜单适配 */
.topnav nav .blog-header-nav{display:flex}
.topnav nav .nav-list{display:flex; align-items:center; gap:16px; list-style:none; margin:0; padding:0}
.topnav nav .list-item{position:relative}
.topnav nav .nav-link{display:inline-block; padding:4px 0; color:var(--ink3); font-family:var(--round); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; transition:.18s}
.topnav nav .nav-link:hover{color:var(--ink)}
.topnav nav .nav-link[aria-current="page"], .topnav nav .nav-link.on{color:var(--ink); border-bottom:2px dashed var(--brick); padding-bottom:2px}
.topnav nav .has-down::after{content:"⌄"; margin-left:3px; font-size:11px; opacity:.55}
.topnav nav .dropdown-menus{display:none; position:absolute; top:100%; left:0; min-width:134px; padding:8px; list-style:none; background:var(--cloth); border:1px solid var(--thread-l); border-radius:12px; box-shadow:0 16px 32px -20px rgba(55,47,36,.55); z-index:30}
.topnav nav .list-item:hover .dropdown-menus{display:block}
.topnav nav .dropdown-menus .nav-link{display:block; padding:7px 10px; border-radius:8px}
.topnav nav .dropdown-menus .nav-link:hover{background:var(--cloth2)}
.topnav nav .user-menu .nav-link{display:flex; align-items:center; gap:6px}
.topnav nav .header-avatar{width:24px; height:24px; border-radius:50%; object-fit:cover}
.topnav nav .user-menu-label{font-size:13px}

/* 列表页 */
.empty{padding:46px 0; text-align:center; color:var(--ink4); font-size:14px}

/* 分页（核心 pagination 输出） */
/* 分页：文章列表与评论区共用一套外观 */
:is(.pager, #pagenavi){display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px}
.pager{margin:44px 0 8px}
:is(.pager, #pagenavi) a, :is(.pager, #pagenavi) span, :is(.pager, #pagenavi) em{display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 11px; border-radius:9px; font-family:var(--round); font-size:13px; font-style:normal; text-decoration:none; transition:.18s}
:is(.pager, #pagenavi) a{background:var(--cloth); color:var(--ink2); border:1px solid var(--thread-l); box-shadow:0 2px 5px -3px rgba(55,47,36,.3)}
:is(.pager, #pagenavi) a:hover{background:#fff; color:var(--ink); border-color:var(--thread); transform:translateY(-1px)}
:is(.pager, #pagenavi) span{background:var(--brick); color:#fff; border:1px solid var(--brick); box-shadow:0 3px 8px -4px rgba(176,90,68,.7)}
:is(.pager, #pagenavi) em{min-width:16px; padding:0; color:var(--ink4); background:none; border:none}

/* 详情页 */
.paper{position:relative; border:1px solid var(--thread-l); border-radius:var(--r); padding:clamp(18px,2.2vw,26px) clamp(26px,4vw,46px); box-shadow:var(--lift);
  /* 斜向柔光 + 一层几乎看不见的交叉织纹，让纸面像压过的手工布纸 */
  background-image:
    repeating-linear-gradient(45deg,rgba(120,100,70,.028) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-45deg,rgba(120,100,70,.028) 0 1px,transparent 1px 6px),
    linear-gradient(158deg,#fffdf9 0%,var(--cloth) 46%,#f9f4e9 100%)}
/* 独立页面没有 .pmeta，标题就是卡片里第一个元素，去掉多余上边距 */
.paper > h1:first-child{margin-top:0}
.post h1{margin:22px 0 0; font-family:var(--round); font-size:clamp(27px,3.9vw,40px); line-height:1.32; letter-spacing:-.005em; color:var(--ink); text-wrap:balance}
.pmeta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-family:var(--round); font-size:12px; color:var(--ink4); padding-bottom:13px; border-bottom:1px dashed rgba(138,116,88,.26)}
.pmeta .tg{padding:3px 9px; border-radius:6px; color:#fff; font-weight:700; font-size:11.5px; letter-spacing:.04em}
.pmeta a{color:var(--brick); text-decoration:none}
/* 标题下的一道短色带，给正文起手一个节奏 */
.title-rule{width:76px; height:3px; border-radius:2px; margin:18px 0 0; background:linear-gradient(90deg,var(--brick),rgba(176,90,68,0))}
.cover{width:100%; height:auto; border-radius:14px; margin:22px 0 4px; box-shadow:0 12px 26px -20px rgba(55,47,36,.6)}

/* 正文排版 */
.prose{margin-top:22px; font-size:16.5px; line-height:1.95; color:var(--ink2); word-break:break-word}
.prose > *:first-child{margin-top:0}
.prose > *:last-child{margin-bottom:0}
.prose p{margin:1.15em 0}
.prose h2, .prose h3, .prose h4{margin:1.9em 0 .7em; color:var(--ink); font-family:var(--round); line-height:1.45}
.prose h2{font-size:23px; position:relative; padding-left:14px}
.prose h2::before{content:""; position:absolute; left:0; top:.42em; bottom:.42em; width:3px; border-radius:3px; background:var(--sage)}
.prose h3{font-size:19px}
.prose h4{font-size:17px}
.prose h5{margin:1.5em 0 .5em; font-size:16px; color:var(--ink); line-height:1.5}
.prose h6{margin:1.4em 0 .5em; font-size:15px; color:var(--ink2); line-height:1.5; letter-spacing:.02em}
.prose a{color:var(--brick); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:rgba(176,90,68,.35)}
.prose a:hover{text-decoration-color:var(--brick)}
.prose img{max-width:100%; height:auto; border-radius:12px; margin:.6em 0; box-shadow:0 12px 26px -20px rgba(55,47,36,.65)}
.prose ul, .prose ol{margin:1em 0; padding-left:1.35em}
.prose li{margin:.32em 0}
.prose blockquote{margin:1.3em 0; padding:14px 18px; border-left:3px solid var(--mustard); border-radius:0 10px 10px 0; background:var(--cloth2); color:var(--ink3)}
.prose blockquote p{margin:.3em 0}
.prose code{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; font-size:.88em; padding:2px 6px; border-radius:5px; background:rgba(138,116,88,.14); color:var(--ink)}
.prose pre{margin:0; padding:18px 20px; border-radius:12px; background:#2b2721; overflow-x:auto; line-height:1.7}
.prose pre code{padding:0; background:none; color:#e8dfd0; font-size:13.5px}
/* 代码块外框 + 复制按钮 */
.code-wrap{position:relative; margin:1.3em 0}
.code-copy{
  position:absolute; top:8px; right:8px; z-index:2;
  width:26px; height:26px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14); border-radius:7px;
  background:rgba(255,255,255,.06); color:#b6ab99;
  cursor:pointer; opacity:0; transition:opacity .18s, background .18s, color .18s, border-color .18s;
}
.code-copy svg{display:block; pointer-events:none}
.code-wrap:hover .code-copy{opacity:1}
.code-copy:hover{background:rgba(255,255,255,.16); color:#fff}
.code-copy.ok{color:#a9c39f; border-color:rgba(169,195,159,.45)}
@media (hover:none){
  .code-copy{opacity:.65}
}
.prose hr{margin:2.2em 0; border:none; border-top:1.5px dashed rgba(138,116,88,.3)}
.prose table{width:100%; margin:1.3em 0; border-collapse:collapse; font-size:14.5px}
.prose th, .prose td{padding:9px 12px; border:1px solid rgba(138,116,88,.22); text-align:left}
.prose th{background:var(--cloth2); color:var(--ink); font-weight:600}
.prose iframe{max-width:100%; border-radius:12px}
.prose video, .prose audio{max-width:100%; border-radius:12px; margin:.6em 0}
.prose figure{margin:1.6em 0}
.prose figure img{margin:0}
.prose figcaption{margin-top:9px; font-size:12.5px; line-height:1.6; color:var(--ink4); text-align:center}
.prose .aligncenter{display:block; margin-left:auto; margin-right:auto}
.prose .alignright{float:right; margin:0 0 1em 1.4em}
.prose .alignleft{float:left; margin:0 1.4em 1em 0}
.prose::after{content:""; display:table; clear:both}
.paper .prose > :last-child{margin-bottom:0}
@media (max-width:640px){
  .prose{font-size:16px; line-height:1.9}
  .prose h2{font-size:21px}
  .prose h3{font-size:18px}
  .prose table{font-size:13px}
  .prose th, .prose td{padding:7px 9px}
  .prose .alignright, .prose .alignleft{float:none; margin:0 0 .8em}
}

/* 文章标签 */
.ptags{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; padding-top:20px; border-top:1.5px dashed rgba(138,116,88,.28)}
/* 没有标签时：只留一条分隔虚线，不占高度 */
.ptags:empty{display:block; margin-top:26px; padding-top:0; height:0}
.ptags a{padding:5px 11px; border-radius:8px; background:var(--cloth2); color:var(--ink3); font-family:var(--round); font-size:12.5px; text-decoration:none; border:1px solid transparent; transition:.18s}
.ptags a:hover{color:var(--ink); border-color:var(--thread-l); background:#fff}

/* 上下篇 */
.neighbor{display:flex; flex-wrap:wrap; gap:12px; margin:10px 0 0}
.neighbor > span{flex:0 1 auto; max-width:calc(50% - 6px); min-width:0}
.neighbor > span > a{display:flex; align-items:baseline; gap:5px; padding:13px 18px; background:var(--cloth); border:1px solid var(--thread-l); border-radius:12px; color:var(--ink2); font-family:var(--round); font-size:13.5px; text-decoration:none; box-shadow:var(--lift); transition:.18s; overflow:hidden}
.neighbor .prev-log{margin-right:auto}
.neighbor .next-log{margin-left:auto}
.neighbor .neighbor-dir{flex:0 0 auto}
.neighbor .neighbor-title{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.neighbor a:hover{color:var(--ink); border-color:var(--thread); transform:translateY(-1px)}

/* 正文图片放大 */
.prose img.is-zoomable{cursor:zoom-in}
.fp-lightbox{position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:4vw; background:rgba(28,24,19,.93); cursor:zoom-out}
.fp-lightbox.is-on{display:flex; animation:fpLbIn .22s ease-out}
.fp-lightbox img{max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 24px 70px -24px rgba(0,0,0,.7); will-change:transform; user-select:none; -webkit-user-drag:none}
.fp-lightbox.is-zoomed{cursor:grab}
.fp-lb-tip{position:absolute; left:50%; bottom:20px; transform:translateX(-50%); padding:6px 15px; border-radius:20px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); font-family:var(--round); font-size:11.5px; letter-spacing:.02em; color:rgba(253,250,241,.72); white-space:nowrap; pointer-events:none; user-select:none}
@keyframes fpLbIn{from{opacity:0}to{opacity:1}}

/* 评论 */
.comments{
  /* 上下留白一致，比左右略紧：标题不离顶边太远，底部也不拖一条空白 */
  margin-top:10px; padding:22px clamp(20px,3vw,30px);
  background:var(--cloth); border:1px solid var(--thread-l);
  border-radius:var(--r); box-shadow:var(--lift);
}
.comments > h3{font-family:var(--round); font-size:17px; color:var(--ink); margin-bottom:14px}
.comments > h3 span{margin-left:4px; font-size:13px; color:var(--ink4)}

/* 评论锚点：跳转时避开吸顶导航，并短暂高亮刚发的那条 */
.comment, .comment-child{scroll-margin-top:88px}
.comment:target, .comment-child:target{animation:fpFlash 1.8s ease-out}
@keyframes fpFlash{
  0%{background:rgba(176,90,68,.15)}
  65%{background:rgba(176,90,68,.06)}
  100%{background:transparent}
}

/* 主评论：紧凑排版 */
.comment{display:flex; flex-wrap:wrap; gap:9px; padding:10px 0; border-bottom:1px dashed rgba(138,116,88,.16)}
.comment:last-child{border-bottom:0; padding-bottom:0}
.comment > .avatar{flex:0 0 auto}
.comment .avatar img{width:30px; height:30px; border-radius:50%; object-fit:cover; box-shadow:0 1px 3px -2px rgba(55,47,36,.35)}
.comment .comment-infos{flex:1 1 auto; min-width:0}
.cc-name{font-family:var(--round); font-size:13px; font-weight:700; line-height:1.35; color:var(--ink)}
.comment-meta{display:flex; align-items:center; margin-top:1px; font-family:var(--round); font-size:10.5px; line-height:1.4; color:var(--ink4); letter-spacing:.01em}
.comment .comment-content{margin-top:5px; font-size:13.8px; line-height:1.62; color:var(--ink2); word-break:break-word; max-height:112px; max-height:calc(5lh); overflow-y:auto; overscroll-behavior:contain}
.comment .comment-content::-webkit-scrollbar{width:5px}
.comment .comment-content::-webkit-scrollbar-thumb{background:rgba(138,116,88,.24); border-radius:3px}
.comment .comment-content::-webkit-scrollbar-thumb:hover{background:rgba(138,116,88,.4)}

/* 回复区：浅底块，行距压紧 */
.comment-replies{flex:0 0 100%; width:100%; margin-top:8px; padding:9px 11px; background:rgba(159,176,150,.11); border-radius:9px}
.comment-child{padding:6px 0; border-bottom:1px dashed rgba(138,116,88,.1)}
.comment-child:first-child{padding-top:0}
.comment-child:last-child{padding-bottom:0; border-bottom:0}
/* 回复内容同样只露五行，超出在块内滚动 */
.cc-line{font-size:13px; line-height:1.55; color:var(--ink2); word-break:break-word; max-height:101px; max-height:calc(5lh); overflow-y:auto; overscroll-behavior:contain}
.cc-line::-webkit-scrollbar{width:4px}
.cc-line::-webkit-scrollbar-thumb{background:rgba(138,116,88,.22); border-radius:2px}
.cc-line::-webkit-scrollbar-thumb:hover{background:rgba(138,116,88,.38)}
.comment-child .cc-name{color:var(--brick); font-size:12.5px}
.cc-reply-to{margin:0 1px 0 3px; font-size:12px; font-weight:400; color:var(--ink3)}
.cc-sep{color:var(--ink4); margin-right:1px}
.cc-text{color:var(--ink2)}

/* 超过 5 条的回复折叠 */
.comment-child.cc-folded{display:none}
.comment-replies.is-open .comment-child.cc-folded{display:block}
.cc-toggle{display:block; width:100%; margin-top:2px; padding:6px 0 1px; white-space:nowrap; border:0; border-top:1px dashed rgba(138,116,88,.12); background:none; font-family:var(--round); font-size:11.5px; line-height:1.5; color:var(--ink3); text-align:center; cursor:pointer; transition:.15s}
.cc-toggle:hover{color:var(--brick)}

/* 回复按钮并入 meta 行，不单独占一行 */
.comment .com-reply{border:none; background:none; padding:0; margin-left:7px; font-family:var(--round); font-size:10.5px; line-height:1.4; color:var(--ink4); opacity:0; cursor:pointer; transition:.15s}
.comment:hover .com-reply, .comment .com-reply:focus-visible{opacity:.9}
.comment .com-reply:hover{color:var(--brick); opacity:1}
/* 触屏设备没有 hover，直接常显 */
@media (hover:none){.comment .com-reply{opacity:.7}}

/* 评论分页：跟主分页同一套视觉 */
#pagenavi{margin:20px 0 8px}
/* 评论表单在列表上方 */
.comment-post, .commentform{scroll-margin-top:88px}
.comments .comment-post{margin-bottom:18px; padding-bottom:18px; border-bottom:1px dashed rgba(138,116,88,.24)}

.commentform{display:flex; flex-direction:column; gap:12px; margin-top:6px}
.commentform textarea, .commentform input[type=text], .commentform input[type=email], .commentform input[type=url], .commentform .captcha_input{width:100%; height:44px; padding:0 14px; font-family:inherit; font-size:14px; color:var(--ink); background:var(--cloth); border:1px solid var(--thread-l); border-radius:10px; outline:none; transition:.18s}
.commentform textarea{height:128px; height:calc(5lh + 26px); min-height:128px; min-height:calc(5lh + 26px); padding:12px 14px; resize:vertical; line-height:1.8}
.commentform textarea:focus, .commentform input:focus{border-color:var(--sage); box-shadow:0 0 0 3px rgba(159,176,150,.18)}
.commentform textarea::placeholder, .commentform input::placeholder{color:var(--ink4)}
.comment-info{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.comment-info input{flex:1; min-width:150px}
.com_submit_p{display:flex; align-items:center; gap:10px}
.commentform .btn{padding:10px 22px; border:none; border-radius:10px; background:var(--ink); color:var(--cloth); font-family:var(--round); font-size:13.5px; font-weight:600; cursor:pointer; transition:.18s; box-shadow:0 6px 14px -8px rgba(55,47,36,.8)}
.commentform .btn:hover{background:var(--brick)}
.commentform .cancel-reply{display:none}
/* 提交行：左边显示「回复 @谁」，右边按钮 */
.commentform .form-actions{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px}
.commentform .com_submit_p{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-left:auto}
.reply-hint{display:none; font-family:var(--round); font-size:12px; color:var(--brick); min-width:0}
.reply-hint.is-on{display:inline-flex; align-items:center; gap:5px; max-width:60%; padding:4px 10px; border-radius:7px; background:rgba(176,90,68,.1); border:1px solid rgba(176,90,68,.22); font-weight:600; letter-spacing:.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.reply-hint.is-on::before{content:"↩"; font-size:13px; line-height:1; opacity:.85}
.captcha-container{display:flex; align-items:center; gap:10px}
.captcha-container .captcha_input{order:1; flex:0 1 210px; width:auto; min-width:120px; max-width:210px}
.captcha-container .captcha{order:2; flex:0 0 auto; height:44px; width:auto; border:0; padding:0; background:none; object-fit:contain; cursor:pointer; transition:opacity .18s}
.captcha-container .captcha:hover{opacity:.78}

/* 404 */
.nf{padding:15vh 20px 17vh; text-align:center}
.nf-num{font-family:var(--round); font-size:clamp(64px,12vw,118px); font-weight:700; line-height:1; letter-spacing:.02em; color:var(--ink); text-shadow:3px 3px 0 rgba(159,176,150,.35), 6px 6px 0 rgba(217,165,102,.18)}
.nf p{margin:22px 0 28px; font-size:15px; line-height:1.9; color:var(--ink3)}
.nf-btn{display:inline-block; padding:11px 26px; border-radius:11px; background:var(--ink); color:var(--cloth); font-family:var(--round); font-size:14px; font-weight:600; text-decoration:none; box-shadow:0 4px 0 #241d14; transition:.18s}
.nf-btn:hover{transform:translateY(2px); box-shadow:0 2px 0 #241d14; background:var(--brick)}