/* 博客样式（2026-10-21）—— 与 app / 落地页同一套设计令牌。
   ⚠️ 这是第三份调色板副本；`tests/contrast.test.ts` 已把它纳入「与 tailwind token 逐值相等」的断言，防漂移。 */

:root{
  --ink:#2C2926; --ink2:#5E574F; --ink3:#6A6359;
  --line:#E7E0D5; --line2:#D6CCBE; --bg:#FBF8F4; --bg2:#F4EFE8; --bg3:#EBE4DA;
  --surface:#FFFFFF;
  --accent:#B4441F; --accent-soft:#FCEDE7; --accent-line:#F2C9B8;
  --green:#41603F; --green-b:#E7EFE4;
  --amber:#8A5F28; --amber-b:#F7EDDD;
  --red:#9E4A42; --red-b:#F8E9E6;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink); overflow-x:clip;
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 顶栏 ---------- */
.topbar-wrap{
  position:sticky; top:0; z-index:30;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.topbar{
  max-width:640px; margin:0 auto;
  padding:0 20px; min-height:68px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
/* 390px 放不下「品牌 + Articles + Send feedback + 语言」→ 窄屏隐藏反馈（页脚仍有） */
@media(max-width:430px){
  .nav-inline{gap:10px}
  .lang a{padding:7px 8px}
}
.brand{font-size:14px; font-weight:780; color:var(--ink); text-decoration:none; letter-spacing:.01em}
/* 语言切换器（2026-10-21 加）：只为存在译文的语言出链接 */
.lang{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; flex-shrink:0}
.lang a{
  font-size:12px; font-weight:650; padding:7px 11px; color:var(--ink3);
  text-decoration:none; min-height:32px; display:inline-flex; align-items:center;  white-space:nowrap;
}
.lang a.on{background:var(--bg3); color:var(--ink)}
.lang a:hover{color:var(--accent)}

/* 页头右侧：导航 + 语言切换，**单行**右对齐（2026-10-21 第二轮） */
.topbar-right{display:flex; align-items:center; gap:16px; min-width:0}
.nav-inline{display:flex; align-items:center; gap:14px}
.nav-inline a{
  font-size:12.5px; font-weight:650; color:var(--ink2); text-decoration:none;
  display:inline-flex; align-items:center; min-height:32px; white-space:nowrap;
}
.nav-inline a:hover{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
@media(max-width:400px){ .nav-inline{gap:10px} .nav-inline a{font-size:12px} }

main{max-width:640px; margin:0 auto; padding:10px 20px 40px}

/* ---------- 文章列表 ---------- */
.list h1{font-size:30px; font-weight:800; line-height:1.22; letter-spacing:-.015em; margin:18px 0 10px}
.lead{font-size:15px; color:var(--ink2); margin-bottom:26px}
.posts{list-style:none}
.post-item{border-top:1px solid var(--line)}
.post-item:last-child{border-bottom:1px solid var(--line)}
.post-item a{display:block; padding:20px 0; text-decoration:none; color:inherit}
.post-date{font-size:11.5px; font-weight:650; color:var(--ink3); font-variant-numeric:tabular-nums}
.post-item h2{font-size:18px; font-weight:780; line-height:1.4; margin:5px 0 6px; letter-spacing:-.005em}
.post-item a:hover h2{color:var(--accent)}
.post-item p{font-size:13.5px; color:var(--ink2); line-height:1.65}

/* ---------- 文章页 ---------- */
.post{max-width:100%}
.back{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:12.5px; font-weight:650; color:var(--ink3); text-decoration:none;
}
.back:hover{color:var(--accent)}
.post h1{font-size:29px; font-weight:800; line-height:1.24; letter-spacing:-.015em; margin:6px 0 10px}
.meta{font-size:12px; color:var(--ink3); margin-bottom:24px; font-variant-numeric:tabular-nums}

/* 正文排版：行高 1.8、段间距 18px —— 长文可读性优先 */
.prose{font-size:15.5px; line-height:1.8; color:var(--ink2)}
.prose p{margin:0 0 18px}
.prose h2{
  font-size:21px; font-weight:780; line-height:1.35; color:var(--ink);
  margin:34px 0 12px; letter-spacing:-.01em;
}
.prose h2::before{
  content:''; display:block; width:26px; height:3px; border-radius:2px;
  background:var(--accent); margin-bottom:12px;
}
.prose h3{font-size:17px; font-weight:750; line-height:1.4; color:var(--ink); margin:26px 0 10px}
.prose ul,.prose ol{margin:0 0 18px; padding-left:22px}
.prose li{margin:7px 0}
.prose li::marker{color:var(--ink3)}
.prose strong{color:var(--ink); font-weight:700}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.prose blockquote{
  margin:20px 0; padding:12px 16px; border-left:3px solid var(--accent-line);
  background:var(--bg2); border-radius:0 10px 10px 0; color:var(--ink2); font-size:14.5px;
}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em; background:var(--bg3); padding:1px 5px; border-radius:5px; color:var(--ink);
}
.prose hr{border:0; border-top:1px solid var(--line); margin:30px 0}
.prose table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14px}
.prose th,.prose td{border-bottom:1px solid var(--line); padding:9px 8px; text-align:left}
.prose th{font-weight:750; color:var(--ink); background:var(--bg2)}

/* 文章尾 CTA：整页唯一实心按钮 */
.cta{
  margin-top:40px; padding:20px; border-radius:16px;
  background:var(--accent-soft); border:1px solid var(--accent-line);
}
.cta p{font-size:14.5px; font-weight:650; color:var(--ink); margin:0 0 14px}
.cta-btn{
  display:block; text-align:center; text-decoration:none;
  padding:15px 18px; border-radius:14px;
  background:var(--accent); color:#fff; font-size:15.5px; font-weight:750;
  box-shadow:0 10px 22px -10px rgba(180,68,31,.55);
}
.cta-btn:active{transform:scale(.985)}
.cta .cta-note{font-size:12px; font-weight:400; color:var(--ink2); margin:12px 0 0; text-align:center}

/* ---------- 页脚 ---------- */
footer{
  max-width:640px; margin:0 auto; padding:26px 20px 44px;
  border-top:1px solid var(--line); text-align:center;
}
/* 页脚导航行（2026-10-21）：博客也把导航放在页脚，顶栏只留品牌 + 语言 */
.foot-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;
  margin-bottom:14px;
}
.foot-nav a{
  font-size:12.5px; font-weight:650; color:var(--ink2); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
}
.foot-nav a:hover{color:var(--accent); text-decoration:underline; text-underline-offset:2px}

footer p{font-size:12.5px; color:var(--ink2); line-height:1.7}
footer a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
footer .muted{color:var(--ink3); font-size:11.5px; margin-top:8px}
footer .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

@media(min-width:560px){
  .list h1{font-size:34px}
  .post h1{font-size:33px}
}