/* 橙皮书可读版 —— 版式参考官方 orange-books 详情页：
   奶油纸底 / 衬线大标题 / 大写微标签 / 发丝分隔 / 封面卡在左。
   约束：无 CDN、无外部字体、无构建。 */

:root{
  --paper:#f7f4ec;          /* 页面底：暖奶油纸 */
  --card:#fdfbf7;
  --ink:#1a1815;
  --dim:#8b8378;
  --faint:#a9a196;
  --line:#e4ddd0;           /* 发丝线 */
  --line2:#efe9dd;
  --brand:#b03a1a;          /* 锈红（封面主色） */
  --brand-soft:#f6ece6;
  --dark:#16150f;
  --measure:44rem;
  --narrow:48rem;          /* 阅读版心：约 47–49 字/行，与官方章节页实测一致 */
  --serif:Georgia,"Times New Roman","Songti SC","Noto Serif SC",STSong,SimSun,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",
         "PingFang SC","Hiragino Sans GB",sans-serif;
  --mono:ui-monospace,"Cascadia Code",Consolas,Menlo,monospace;
  color-scheme:light;
}
html[data-skin="dark"]{
  --paper:#14130f;
  --card:#1b1a15;
  --ink:#eae5db;
  --dim:#9c948a;
  --faint:#7d766d;
  --line:#302d26;
  --line2:#26241e;
  --brand:#e07a56;
  --brand-soft:#2b201a;
  --dark:#eae5db;
  color-scheme:dark;
}

*{box-sizing:border-box;}
/* 标题里的拉丁短语：不可拆分（见 tools/book_site.py::_title_html 的说明） */
.nw{white-space:nowrap;}
html,body{margin:0;}
body{
  background:var(--paper); color:var(--ink);
  font:16px/1.9 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
img{max-width:100%;display:block;}

/* ---------------- 顶部条 ---------------- */
.nav{
  position:sticky; top:0; z-index:30;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav .in{
  max-width:var(--measure); margin:0 auto; padding:0 22px;
  height:56px; display:flex; align-items:center; gap:18px;
  font-size:13px;
}
.nav .logo{font-weight:700;letter-spacing:.01em;font-size:14px;}
.nav .logo em{
  font-style:normal; color:var(--faint); font-weight:500;
  letter-spacing:.16em; font-size:10.5px; margin-left:8px;
}
.nav .sp{margin-left:auto;}
.nav a{color:var(--dim);}
.nav a:hover{color:var(--ink);text-decoration:none;}
/* 外链标记：跟官方蓝皮书导航一致，右上角一个小箭头 */
.nav a.ext::after{
  content:"↗"; font-size:10px; margin-left:3px;
  vertical-align:super; opacity:.55; font-weight:400;
}
.nav a.ext:hover::after{opacity:.9;}
.nav .cta{
  border:1px solid var(--ink); border-radius:999px;
  padding:6px 16px; color:var(--ink); font-weight:600; font-size:12.5px;
  background:var(--dark); color:var(--paper);
}
html[data-skin="dark"] .nav .cta{background:var(--card);color:var(--ink);
  border-color:var(--line);}
#themeBtn{
  font:inherit; font-size:13px; line-height:1; padding:6px 9px;
  border:1px solid var(--line); border-radius:8px; background:transparent;
  color:var(--dim); cursor:pointer;
}
#themeBtn:hover{color:var(--ink);border-color:var(--faint);}

/* ---------------- 容器 ---------------- */
/* 版心比阅读页宽：详情页要放「封面 + 文字栏」两列，44rem 时文字栏只剩 444px，
   标题会被挤成「Hermes Agent 从 / 入门到精通」这种把词劈开的断行，
   目录行里的英文副题也会被孤零零推到第二行。 */
.wrap{max-width:52rem;margin:0 auto;padding:0 22px 80px;}

/* 面包屑 */
.crumb{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); padding:20px 0 34px; display:flex;
  gap:9px; flex-wrap:wrap; align-items:center;
}
.crumb a{color:var(--faint);}
.crumb a:hover{color:var(--ink);text-decoration:none;}
.crumb .sepc{color:var(--line);}

/* 微标签：截图里那种「— NO. 01 · RANKED BY STARS」 */
.eyebrow{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); font-weight:600; margin:0 0 14px;
}
.eyebrow::before{content:"— ";letter-spacing:0;}

/* ---------------- 书详情：封面 + 主信息 ---------------- */
.bhero{
  display:grid; grid-template-columns:216px 1fr; gap:44px;
  align-items:start; padding-bottom:44px;
  border-bottom:1px solid var(--line);
}
.cover{
  margin:0; border-radius:3px; overflow:hidden;
  box-shadow:0 1px 2px rgba(40,30,20,.10), 0 12px 30px rgba(40,30,20,.12);
  background:var(--brand);
}
.cover img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.cover .fallback{
  aspect-ratio:3/4; display:flex; flex-direction:column;
  justify-content:space-between; padding:18px 16px; color:#fff;
  background:linear-gradient(160deg,#b84424,#962f14);
}
.cover .fallback b{font-family:var(--serif);font-size:19px;line-height:1.3;}
.cover .fallback span{font-size:11px;letter-spacing:.1em;opacity:.85;}

h1{
  font-family:var(--serif); font-weight:700;
  font-size:40px; line-height:1.24; letter-spacing:-.015em;
  margin:0 0 14px;
  /* 这里**刻意不用** text-wrap:balance：实测它会在"本来放得下"的情况下
     主动配平、硬断成两行（Hermes Agent 从入门到精通 因此被劈开）。
     详情页标题通常一行放得下，就让它一行。 */
}
.bsub{
  font-family:var(--serif); font-style:italic; font-size:15.5px;
  color:var(--dim); margin:0 0 22px;
}
.bmeta{
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin:0 0 26px; display:flex; gap:10px;
  align-items:center; flex-wrap:wrap;
}
.bmeta .chip{
  border:1px solid var(--line); border-radius:3px; padding:1px 8px;
  text-transform:none; letter-spacing:0; font-size:11.5px;
  color:var(--dim);
}
.bbtns{display:flex;gap:9px;flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 17px; border:1px solid var(--line); border-radius:4px;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  background:var(--card); color:var(--ink);
}
.btn:hover{border-color:var(--faint);text-decoration:none;}
.btn.dark{background:var(--dark);border-color:var(--dark);color:var(--paper);}
html[data-skin="dark"] .btn.dark{background:var(--card);color:var(--ink);
  border-color:var(--line);}
.btn.p{background:var(--brand);border-color:var(--brand);color:#fff;}

/* ---------------- 区块 ---------------- */
.sec{padding:42px 0;border-bottom:1px solid var(--line);}
.sec:last-of-type{border-bottom:0;}
.sec h2{
  font-family:var(--serif); font-size:22px; font-weight:700;
  margin:0 0 16px; letter-spacing:-.01em;
}
.about{
  font-size:14.5px; color:var(--dim); line-height:1.95;
  max-width:var(--narrow); margin:0;
}

/* ---------------- 目录：编号 + 标题 + 英文 ---------------- */
.toc{list-style:none;padding:0;margin:0;border-top:1px solid var(--line2);}
.toc li{border-bottom:1px solid var(--line2);}
.toc a{
  display:grid; grid-template-columns:44px 1fr 16px;
  gap:14px; align-items:baseline; padding:15px 2px;
  transition:background .12s;
}
.toc a:hover{background:var(--brand-soft);text-decoration:none;}
.toc .num{
  font-family:var(--mono); font-size:11.5px; color:var(--faint);
  letter-spacing:.06em;
}
.toc .t{font-size:15px;font-weight:600;line-height:1.5;}
.toc .en{
  color:var(--dim); font-weight:400; font-size:13px; margin-left:8px;
  font-family:var(--serif); font-style:italic;
}
.toc .ch{color:var(--line);font-size:11px;align-self:center;}

/* ---------------- 书架（首页） ---------------- */
.hero{padding:34px 0 46px;border-bottom:1px solid var(--line);}
.hero h1{font-size:46px;line-height:1.16;}
.hero .sub{
  font-family:var(--serif); font-size:16.5px; color:var(--dim);
  max-width:33rem; margin:0 0 26px;
}
/* 一句话定位：官方那句「写给每一个想用 AI 做事的人」 */
.hero .tag{
  font-family:var(--serif); font-size:20px; color:var(--ink);
  line-height:1.5; max-width:33rem; margin:0 0 12px;
}
/* hero 附注：免费 / PDF 领取 / 许可边界 */
.hero .note{
  font-size:12.5px; color:var(--faint); line-height:1.9;
  max-width:33rem; margin:18px 0 0;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.bcard{display:grid;grid-template-columns:112px 1fr;gap:18px;
       align-items:start;padding:24px 0;border-bottom:1px solid var(--line2);}
.bcard .cover{box-shadow:0 1px 2px rgba(40,30,20,.08),
                        0 6px 16px rgba(40,30,20,.10);}
.bcard h3{
  font-family:var(--serif); font-size:20px; font-weight:700;
  margin:2px 0 6px; line-height:1.32;
}
.bcard .bd{font-size:13.5px;color:var(--dim);margin:0 0 12px;line-height:1.7;}
.bcard .meta{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); display:flex; gap:9px; flex-wrap:wrap;
  align-items:center; margin-bottom:12px;
}

/* ---------------- 其余橙皮书：汇总卡 + 目录页 ---------------- */
/* 首页只放**一张**汇总卡（不是每本一张）：首页是"能读什么"的入口，
   16 张不可读的卡会把能读的两本淹掉。
   封面照橙皮书模板做 —— 锈红外框 + 奶油内页，与旁边两本真封面同构，
   一眼就认出是"同一系列的第 N 本"，而不是一块死板的占位符。 */
.catcard{
  background:var(--card); border:1px solid var(--line);
  border-radius:6px; padding:20px 22px; margin-top:14px;
}
.catcover{
  aspect-ratio:3/4; border-radius:3px; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto; gap:6px;
  padding:9px; color:#fff;
  background:linear-gradient(160deg,#b84424,#922d12);
  box-shadow:0 1px 2px rgba(40,30,20,.10), 0 6px 16px rgba(40,30,20,.12);
}
.cc-top{font-size:10.5px; letter-spacing:.16em; text-align:center; opacity:.95;}
.cc-panel{
  background:var(--paper); color:var(--brand); border-radius:2px;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1px;
}
.cc-panel b{font-family:var(--serif); font-size:26px; line-height:1;}
.cc-panel em{font-style:normal; font-size:10px; letter-spacing:.12em;}
.cc-bot{font-size:9.5px; letter-spacing:.1em; text-align:center; opacity:.9;}
.catcard h3{font-family:var(--serif); font-size:19px; margin:2px 0 6px;}
.catcard .bd{margin:0 0 10px;}
/* 书名一览：让读者知道这 16 本到底是什么，而不是一句"另有 16 本" */
.catnames{
  font-size:12px; line-height:2; color:var(--dim);
  border-top:1px solid var(--line2); border-bottom:1px solid var(--line2);
  padding:10px 0; margin:0;
}
.xmore{color:var(--faint);}

/* 目录页的行：序号 / 标题+一句话 / 页数+链接
   注意这里给 **li** 上网格，不是 a —— 一行里有三个各自独立的外链，
   不能整行套一个 <a>（嵌套 <a> 是非法 HTML）。 */
.toc.cat li{
  display:grid; grid-template-columns:34px 1fr auto;
  gap:16px; align-items:baseline;
  padding:15px 2px; border-bottom:1px solid var(--line2);
}
.toc.cat .meta2{
  font-size:11.5px; color:var(--faint); text-align:right;
  white-space:nowrap; display:flex; gap:10px; align-items:baseline;
}
.toc.cat .lk{display:inline-flex; gap:9px;}
.toc.cat .lk a{font-size:11.5px; color:var(--brand);}
.toc.cat .lk a:hover{text-decoration:underline;}
.plain{list-style:none;padding:0;margin:0;font-size:13.5px;color:var(--dim);}
.plain li{padding:8px 0;border-bottom:1px solid var(--line2);}

/* ---------------- 章节阅读页 ----------------
   对齐官方章节页（图一）：**紧凑的粗体标题**，不是大号衬线。
   之前用 31px 衬线做章标题，配上窄版心显得又挤又像详情页，不是阅读页。 */
main.read{max-width:var(--narrow);margin:0 auto;padding:0 22px 80px;}
.chlabel{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brand); font-weight:700; margin:34px 0 12px;
}
main.read h1{
  font-family:var(--sans); font-size:21px; line-height:1.5;
  font-weight:700; margin:0 0 6px; letter-spacing:0;
}
main.read h1 .chnum{
  color:var(--faint); font-weight:700; margin-right:8px;
  font-variant-numeric:tabular-nums;
}
.chen{
  font-family:var(--serif); font-style:italic; font-size:13.5px;
  color:var(--dim); margin:0 0 26px;
}
main.read h2{
  font-family:var(--sans); font-size:17px; font-weight:700;
  margin:44px 0 12px; letter-spacing:0;
}
main.read h2::before{
  content:""; display:block; width:22px; height:2px;
  background:var(--brand); margin-bottom:12px; opacity:.9;
}
main.read p{margin:0 0 20px;}
main.read .lede{
  font-family:var(--serif); font-size:17px; line-height:1.85;
  color:var(--ink); border-left:2px solid var(--brand);
  padding-left:16px; margin:0 0 32px;
}
main.read strong{font-weight:700;color:var(--ink);}
main.read blockquote{
  margin:0 0 18px; padding:13px 17px;
  background:var(--line2); border-radius:4px;
  font-family:var(--mono); font-size:13.5px; line-height:1.7;
  color:var(--dim); white-space:pre-wrap; word-break:break-word;
}
main.read .small{font-size:13px;color:var(--dim);line-height:1.7;}
mark{background:#f6e6a8;color:inherit;padding:0 2px;}
html[data-skin="dark"] mark{background:#4a3f14;}
code{
  background:var(--line2); padding:1px 5px; border-radius:3px;
  font-size:.9em; font-family:var(--mono);
}
.tblwrap{margin:0 0 22px;overflow-x:auto;}
table{border-collapse:collapse;width:100%;font-size:13.5px;line-height:1.6;}
th,td{border:1px solid var(--line);padding:8px 11px;text-align:left;
      vertical-align:top;}
th{background:var(--brand-soft);color:var(--brand);font-weight:700;
   white-space:nowrap;}
td:first-child{font-weight:650;white-space:nowrap;}

.chnav{
  display:flex;gap:10px;align-items:stretch;
  margin-top:52px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;
}
.chnav a{
  flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:4px;
  background:var(--card);line-height:1.5;
}
.chnav a:hover{border-color:var(--faint);text-decoration:none;}
.chnav .up{flex:0 0 auto;color:var(--dim);text-align:center;}
.chnav .next{text-align:right;}

/* ---------------- 页脚 ---------------- */
footer{
  border-top:1px solid var(--line); padding:30px 0 46px;
  font-size:12px; color:var(--faint); line-height:1.9;
}
footer .in{max-width:var(--measure);margin:0 auto;padding:0 22px;}
footer p{margin:0 0 7px;}
footer a{color:var(--dim);text-decoration:underline;
         text-underline-offset:3px;}

@media (max-width:720px){
  :root{--measure:100%;}
  body{font-size:15px;}
  .bhero{grid-template-columns:132px 1fr;gap:22px;}
  .cover{max-width:132px;}
  h1{font-size:27px;}
  .hero h1{font-size:33px;}
  .grid2{grid-template-columns:1fr;}
  main.read h1{font-size:25px;}
  .toc a{grid-template-columns:34px 1fr;}
  .toc .ch{display:none;}
  .chnav{flex-direction:column;}
  .chnav .next{text-align:left;}
}
@media (max-width:520px){
  .bhero{grid-template-columns:1fr;}
  .cover{max-width:150px;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}