/* ============================================================
   世纪悦读 · read21.css  设计系统（与《UI 设计方案》同源）
   色板与字号取自《视觉规范》；宣纸色与辅文色经素材实测校准
   图片一律用 <img> ＋ srcset ＋ loading="lazy"，故容器配 object-fit
   ============================================================ */
:root{
  /* —— 色 · 主色系 —— */
  --zhe:#8a5a2b;          /* 赭石：栏目名、强调、落款、链接 */
  --zhe-deep:#6f4520;     /* 深赭石：后台侧栏、按下态 */
  --jin:#c9a87c;          /* 辅金：左竖线、装饰线 */
  --jin2:#b09468;         /* 暖金：块内标签 */
  /* —— 色 · 文字 —— */
  --ink:#3f3f3f;          /* 正文（10.4:1，AAA） */
  --ink2:#2b2b2b;         /* 重点加粗 */
  --body:#5a5245;         /* 卡片内正文 */
  --muted:#7a6448;        /* 辅文 ★校准：原 #a08c6f 仅 3.24:1 不达 AA */
  --jin-text:#8a6a3f;     /* 暖金文字 ★新增：承载信息的小字用色（4.66:1 AA） */
  /* —— 色 · 底与线 —— */
  --paper:#ffffff;        /* 纸白 */
  --card:#fbf9f5;         /* 卡片底 */
  --quote:#faf7f2;        /* 米白底（典式引文） */
  --quote2:#fdf9f3;       /* 淡暖底（信式引文） */
  --line:#ece0cc;         /* 边框线 */
  --div:#ded1ba;          /* 分割线 */
  --xuan:#eee7d9;         /* ★宣纸色（采样自刊头素材，用于主视觉融合） */
  --page:#f4efe6;         /* ★页面外层底（宣纸系） */
  --ok:#2f6b3f;           /* 成功提示 */
  --err:#a33a2a;          /* 失败提示 */
  /* —— 字 —— */
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
  --mono:Consolas,"Courier New",monospace;
  /* —— 间距（8 点制） —— */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s12:48px; --s16:64px;
  /* —— 版心与留白 —— */
  --w-read:760px;   /* 正文栏 */
  --w-max:1200px;   /* 全站最大宽 */
  --w-hero:1080px;  /* 主视觉最大宽 */
  --gut:32px;       /* 文字块左右留白（两字）；手机端降至 20px */
  /* —— 圆角（忌大圆角） —— */
  --r:4px; --r-tag:8px;
  /* —— 层级 —— */
  --z-nav:100; --z-modal:200;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--serif);font-size:16.5px;line-height:1.95;text-align:justify;
}
img{border:0}
a{color:var(--zhe);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--zhe);outline-offset:2px;border-radius:2px;
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s1);z-index:999;background:var(--paper);
  padding:8px 14px;border:1px solid var(--line);border-radius:var(--r)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cover{width:100%;height:100%;object-fit:cover;display:block}

/* ── 顶栏 ───────────────────────────────── */
.nav{position:sticky;top:0;z-index:var(--z-nav);
  background:rgba(253,251,247,.96);border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(6px)}
.nav-in{max-width:var(--w-max);margin:0 auto;padding:0 var(--gut);
  height:64px;display:flex;align-items:center;gap:var(--s6)}
.brand{font-size:17px;font-weight:700;color:var(--zhe);letter-spacing:3px;
  white-space:nowrap;flex:0 0 auto}
.brand:hover{text-decoration:none}
.nav-menu{display:flex;gap:var(--s5);margin-left:auto;flex-wrap:wrap}
.nav-menu a{font-size:14.5px;color:var(--body);padding:20px 0 18px;
  border-bottom:2px solid transparent;letter-spacing:.5px}
.nav-menu a:hover,.nav-menu a[aria-current]{color:var(--zhe);border-bottom-color:var(--zhe);
  text-decoration:none}
.nav-act{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto}
.icon-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--serif);
  font-size:14px;color:var(--body);background:none;border:1px solid var(--line);
  border-radius:var(--r);padding:7px 12px;cursor:pointer}
.icon-btn:hover{color:var(--zhe);border-color:var(--jin)}
.nav-drawer{display:none;position:relative}
.nav-drawer summary{list-style:none;cursor:pointer}
.nav-drawer summary::-webkit-details-marker{display:none}
.nav-drawer .panel{position:absolute;right:0;left:auto;min-width:280px;top:calc(100% + 8px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 12px 32px rgba(70,50,20,.12);padding:var(--s3) var(--s5) var(--s5)}
.nav-drawer .panel a{display:block;padding:11px 0;font-size:15.5px;color:var(--body);
  border-bottom:1px dashed var(--line)}
.nav-drawer .panel a:last-child{border-bottom:0}
.crumb-x{font-size:12.5px;color:var(--muted)}
/* 视觉隐藏：保留语义（读屏 / 搜索引擎），不占版面 */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* hidden 属性只对应 UA 样式 display:none——作者样式里任何 display 都能压过去。
   凡以 hidden 做显隐，必须显式兜住这一条，否则「隐藏」会失效。 */
[hidden]{display:none!important}

/* ── 主视觉 ─────────────────────────────── */
.hero{background:var(--xuan)}
.hero-in{max-width:var(--w-hero);margin:0 auto}
.hero img{width:100%;display:block;height:auto}
.hero-cap{margin:0;padding:22px var(--gut) 0;text-align:center;
  color:var(--zhe);font-size:13.5px;letter-spacing:4px;background:var(--xuan)}
.hero-seam{height:34px;background:linear-gradient(var(--xuan),var(--page))}
.hero--m{display:none}

/* ── 容器 ───────────────────────────────── */
.main{max-width:var(--w-max);margin:0 auto;padding:var(--s8) var(--gut) 0}
.w-read{max-width:var(--w-read);margin:0 auto}
.sec{margin:0 0 var(--s12)}
.sec-h{display:flex;align-items:baseline;gap:var(--s3);margin:0 0 var(--s5);
  padding-left:11px;border-left:3px solid var(--jin)}
.sec-h h2{margin:0;font-size:18.5px;line-height:1.4;font-weight:700;
  color:var(--ink2);letter-spacing:1px}
.sec-h .more{margin-left:auto;font-size:13.5px;color:var(--muted)}
.sec-foot{margin:var(--s4) 0 0;text-align:right}
.sec-foot .more{font-size:13.5px;color:var(--muted)}
.sec-foot .more:hover{color:var(--zhe)}
.crumb{max-width:var(--w-max);margin:0 auto;padding:var(--s4) var(--gut) 0;
  font-size:13.5px;color:var(--muted)}
.crumb a{color:var(--muted)}
.crumb span{margin:0 7px;color:var(--div)}

/* ── 检索条 ─────────────────────────────── */
.search{margin:0 0 var(--s12);padding:var(--s5) var(--s6);
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--jin);
  border-radius:var(--r);scroll-margin-top:76px}  /* 顶栏吸顶 58px，锚点跳转不被压住 */
.search form{display:flex;gap:var(--s3);align-items:center}
.search .fld{flex:1;display:flex;align-items:center;gap:var(--s2);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:0 var(--s3)}
.search .fld:focus-within{border-color:var(--jin)}
.search input{flex:1;min-width:0;border:0;background:none;font-family:var(--serif);
  font-size:15.5px;color:var(--ink);height:44px;outline:none}
.search input::placeholder{color:#b6a68c}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--serif);font-size:15px;letter-spacing:1px;cursor:pointer;
  border:1px solid var(--zhe);border-radius:var(--r);padding:0 var(--s5);
  height:44px;background:var(--zhe);color:#fdfbf7;white-space:nowrap}
.btn:hover{background:var(--zhe-deep);border-color:var(--zhe-deep);text-decoration:none}
.btn--ghost{background:none;color:var(--zhe);border-color:var(--line)}
.btn--ghost:hover{background:var(--card);color:var(--zhe);border-color:var(--jin)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.search .hint{margin:var(--s3) 0 0;font-size:12.5px;color:var(--muted);line-height:1.8}
.search .hint em{font-style:normal;color:var(--zhe);cursor:pointer;
  border-bottom:1px dotted var(--jin);margin-right:var(--s3)}

/* ── 卡片 ───────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--jin);
  border-radius:var(--r);padding:var(--s4) 18px 14px}
.card:hover{border-left-color:var(--zhe)}
.kicker{display:block;margin:0 0 var(--s2);font-size:12.5px;color:var(--jin-text);
  letter-spacing:2px}
.t-lead{margin:0 0 var(--s3);font-size:22px;line-height:1.5;font-weight:700;
  color:var(--ink2);letter-spacing:.5px;text-align:left}
.t-lead a{color:inherit}
.t-item{margin:0 0 var(--s2);font-size:17px;line-height:1.6;font-weight:700;
  color:var(--zhe);letter-spacing:.5px;text-align:left}
.t-item a{color:inherit}
.desc{margin:0;font-size:14.5px;line-height:1.9;color:var(--body);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.meta{margin:var(--s3) 0 0;font-size:12.5px;line-height:1.7;color:var(--muted);
  letter-spacing:.5px;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.meta .dot{color:var(--div)}
.meta .sp{margin-left:auto}
/* 「看合集」2026-10-05 由 <button> 改为 <a>（真链接、新标签打开）：
   须显式 text-decoration:none，否则带浏览器默认下划线；display:inline-block
   保持行内对齐与可点区域。border:0 一并保留，兼顾日后回退为按钮的写法。 */
.album{font-size:12.5px;color:var(--muted);cursor:pointer;
  background:none;border:0;border-bottom:1px dotted var(--div);padding:0;
  font-family:var(--serif);text-decoration:none;display:inline-block}
.album:hover{color:var(--zhe);border-bottom-color:var(--jin);text-decoration:none}
.album:after{content:" \2197"}

/* 头条 */
.lead-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.lead-card .txt{padding:var(--s6) var(--s6) var(--s5)}
.lead-card .pic{border-left:1px solid var(--line);min-height:260px;
  background:var(--xuan);overflow:hidden}
.lead-card--nopic{grid-template-columns:minmax(0,1fr)}
.lead-card--nopic .pic{display:none}

/* 推荐网格 */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.grid .card{display:flex;flex-direction:column}
.grid .card .desc{-webkit-line-clamp:2}

/* 最新更新 / 通用列表 */
.list{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  overflow:hidden}
.list li{display:flex;align-items:baseline;gap:var(--s4);padding:15px 18px;
  border-bottom:1px solid var(--line);list-style:none}
.list li:last-child{border-bottom:0}
.list li:hover{background:#fdfcfa}
.list .tag{flex:0 0 auto}
.list .tag img{height:26px;width:auto;display:block}
.list .tt{flex:1;min-width:0}
.list .tt a{font-size:16px;font-weight:700;color:var(--ink2);letter-spacing:.3px}
.list .tt p{margin:2px 0 0;font-size:13.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .dt{flex:0 0 auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
ul.list,ol.list{margin:0;padding:0}

/* 栏目板块 */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.col{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.col .hd{height:150px;background:var(--xuan);border-bottom:1px solid var(--line);overflow:hidden}
.col .bd{padding:var(--s5) 18px 16px;flex:1;display:flex;flex-direction:column}
.col .nm{margin:0 0 4px;font-size:18px;font-weight:700;color:var(--zhe);
  letter-spacing:2px;text-align:left}
.col .sub{margin:0 0 var(--s3);font-size:12.5px;color:var(--jin-text);letter-spacing:1px}
/* 栏目简介显示全文：约 130 字，两列卡约 4 行。
   .desc 基类带 -webkit-box + line-clamp，须一并还原为 block，否则仍被裁 */
.col .desc{display:block;-webkit-line-clamp:unset;overflow:visible;margin-bottom:var(--s4)}
.col .ft{margin-top:auto;display:flex;align-items:center;gap:var(--s4);
  padding-top:var(--s3);border-top:1px dashed var(--line)}
.col .ft .go{font-size:14px;color:var(--zhe);font-weight:700}
.col .ft .go:after{content:" \2192"}
.col .ft .album{margin-left:auto}
.sub-tags{display:flex;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s3)}
.sub-tags img{height:24px;width:auto;display:block}
/* 标签图可点（进专栏页）：line-height:0 去掉行内基线的多余空隙 */
.sub-tags a{display:block;line-height:0;border-radius:3px;transition:opacity .18s}
.sub-tags a:hover{opacity:.8}
.sub-tags a:focus-visible{outline:2px solid var(--jin);outline-offset:2px}

/* 刊介 */
.about{margin:0 0 var(--s12);padding:var(--s6) var(--s6) var(--s5);background:var(--quote);
  border:1px solid var(--line);border-radius:var(--r)}
/* 「刊介」是独立板块，字号与 .sec-h h2（18.5px）齐平——
   原 13px 比【头条】【栏目】轻太多，收尾处显得发虚 */
.about .ttl{margin:0 0 var(--s5);text-align:left;color:var(--zhe);
  font-size:18.5px;font-weight:700;letter-spacing:4px;line-height:1.4;
  text-indent:0}
.about p{margin:0 0 var(--s4);font-size:15.5px;line-height:1.95;color:var(--body);
  text-indent:2em}
/* 只用「直接子元素」：原写法 .about p:last-child 会连 #abBox 里最后一个 p 一起
   选走，把刊介正文末段变成右对齐灰字（看上去像半句话） */
.about > p:last-child{margin-bottom:0;text-indent:0;text-align:right;color:var(--muted);font-size:13px}

/* 引文 · 附记 */
.quote{margin:22px auto;padding:var(--s4) var(--s5);max-width:var(--w-read);
  background:var(--quote);border:1px solid var(--line);border-radius:var(--r)}
.quote p{margin:0;font-size:15px;line-height:1.9;color:var(--zhe)}
.note-box{margin:var(--s8) auto var(--s6);padding:22px var(--s5) 14px;max-width:var(--w-read);
  background:var(--quote);border:1px solid var(--line);border-radius:var(--r)}
.note-box .lb{margin:0 0 var(--s4);text-align:center;color:var(--jin-text);
  font-size:13px;letter-spacing:4px}
.note-box p{margin:0 0 var(--s3);text-indent:2em;font-size:15px;line-height:1.9;color:var(--body)}
.note-box .sg{margin:var(--s4) 0 0;text-align:right;color:var(--muted);font-size:13px;text-indent:0}
.sign{margin:var(--s12) 0 0;text-align:center;color:var(--zhe);font-size:14px;letter-spacing:4px}

/* 页脚 */
.foot{margin-top:var(--s16);background:var(--xuan);border-top:1px solid var(--line)}
.foot-in{max-width:var(--w-max);margin:0 auto;padding:var(--s8) var(--gut) var(--s6);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s8);align-items:start}
.foot h3{margin:0 0 var(--s3);font-size:14px;color:var(--zhe);letter-spacing:2px;font-weight:700}
.foot p,.foot li{font-size:13px;line-height:2;color:var(--muted);margin:0}
.foot ul{margin:0;padding:0;list-style:none}
.foot ul a{color:var(--muted)}
.foot ul a:hover{color:var(--zhe)}
.foot .qr{text-align:center}
.foot .qr img{width:132px;display:block;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;padding:6px}
.foot .qr span{display:block;margin-top:var(--s2);font-size:12px;color:var(--muted);letter-spacing:1px}
.foot-bar{border-top:1px solid var(--div);margin-top:var(--s6)}
.foot-bar p{max-width:var(--w-max);margin:0 auto;padding:var(--s4) var(--gut) var(--s6);
  font-size:12.5px;color:var(--muted);text-align:center;line-height:2}
.foot-bar a{color:var(--muted);border-bottom:1px dotted var(--div)}

/* 分页 */
.pager{display:flex;gap:var(--s2);align-items:center;justify-content:center;
  margin:var(--s8) 0 0;padding:0;list-style:none;flex-wrap:wrap}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 var(--s3);font-size:14px;color:var(--body);
  border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.pager a:hover{border-color:var(--jin);color:var(--zhe);text-decoration:none}
.pager .on{background:var(--zhe);border-color:var(--zhe);color:#fdfbf7}
.pager .off{opacity:.45}

/* 栏目页头 */
.cat-hero{background:var(--xuan);border-bottom:1px solid var(--line)}
.cat-hero .img{height:210px;background:var(--xuan);overflow:hidden}
/* 专栏页（二级栏目）：紧凑型页头——不上栏头大图，消除原先 210px 空白带；
   层级与主栏目一眼分明（大图＝主栏目，紧凑＝专栏）。 */
.cat-hero--sub .img{display:none}
.cat-hero--sub .cat-head{padding-top:var(--s5);align-items:center}
.cat-hero--sub .cat-head h1{font-size:23px;letter-spacing:3px}
.cat-head{max-width:var(--w-max);margin:0 auto;padding:var(--s6) var(--gut) 0;
  display:flex;align-items:flex-end;gap:var(--s6);flex-wrap:wrap}
.cat-head h1{margin:0;font-size:27px;font-weight:700;color:var(--zhe);
  letter-spacing:4px;line-height:1.3}
.cat-head .sub{margin:var(--s2) 0 0;font-size:13.5px;color:var(--jin-text);letter-spacing:1px}
.cat-head .acts{margin-left:auto;display:flex;gap:var(--s3);align-items:center;padding-bottom:4px}
.cat-intro{max-width:var(--w-max);margin:var(--s5) auto 0;padding:0 var(--gut)}
.cat-intro p{margin:0;font-size:15.5px;line-height:1.95;color:var(--body);text-indent:2em;
  max-width:var(--w-read)}
.tabs{max-width:var(--w-max);margin:var(--s6) auto 0;padding:0 var(--gut) var(--s4);
  display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;
  border-bottom:1px solid var(--line)}
.tabs a{opacity:.55}
.tabs a:hover,.tabs .cur{opacity:1;text-decoration:none}
/* 当前项曾用 box-shadow 加一圈描边，与标签图自带的框叠成「双框」——去掉，只靠
   opacity 区分（未选中 .55 / 选中 1），框由图片自己带就够了（2026-10-05）。 */
.tabs .lb{font-size:13px;color:var(--muted);letter-spacing:1px}
.tabs img{height:24px;width:auto;display:block}

/* 空态 / 提示 / 骨架 */
.empty{padding:var(--s12) var(--s6);text-align:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r)}
.empty .t{margin:0 0 var(--s3);font-size:16px;color:var(--body);letter-spacing:1px}
.empty .d{margin:0;font-size:13.5px;color:var(--muted);line-height:1.9}
.empty .d a{color:var(--zhe)}
.grid>.empty,.cols>.empty{grid-column:1/-1}
.sk{background:linear-gradient(90deg,#f2ece1 25%,#faf6ee 37%,#f2ece1 63%);
  background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:var(--r)}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.sk-line{height:16px;margin:0 0 10px}
.sk-card{height:150px;margin:0 0 var(--s4)}
.notice{margin:0 0 var(--s5);padding:13px 18px;border-radius:var(--r);font-size:14px;
  line-height:1.85;border:1px solid var(--line);background:var(--quote)}
.notice--ok{border-left:4px solid var(--ok);color:var(--ok)}
.notice--err{border-left:4px solid var(--err);color:var(--err)}

/* 检索结果页 */
.srch-head{max-width:var(--w-max);margin:0 auto;padding:var(--s6) var(--gut) 0}
.srch-head h1{margin:0 0 var(--s2);font-size:24px;color:var(--zhe);letter-spacing:2px;font-weight:700}
.srch-head .cnt{margin:0;font-size:13.5px;color:var(--muted)}
.srch-head .cnt b{color:var(--zhe);font-weight:700}
.srch-q{color:var(--zhe)}
.srch-bar{margin:var(--s5) 0 var(--s6)}

/* 读者提示（PC 端扫码） */
dialog.qr-dlg{border:1px solid var(--line);border-radius:var(--r);padding:var(--s6);
  background:var(--paper);box-shadow:0 12px 40px rgba(70,50,20,.18);max-width:340px;
  font-family:var(--serif);color:var(--ink);text-align:justify}
dialog.qr-dlg::backdrop{background:rgba(60,45,25,.35)}
dialog.qr-dlg h3{margin:0 0 var(--s2);font-size:16px;color:var(--zhe);letter-spacing:2px;text-align:center}
dialog.qr-dlg p{margin:0 0 var(--s4);font-size:13.5px;line-height:1.9;color:var(--body);text-align:center}
dialog.qr-dlg img{width:184px;display:block;margin:0 auto var(--s4);
  border:1px solid var(--line);border-radius:var(--r)}

/* ── 响应式（移动优先：手机端为第一观察尺寸） ── */
@media (max-width:900px){
  :root{--gut:20px}
  body{font-size:16px}
  .nav-menu{display:none}
  .nav-drawer{display:block;margin-left:auto}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols{grid-template-columns:minmax(0,1fr)}
  .foot-in{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .foot .qr{text-align:left}
  .foot .qr img{width:148px}
}
@media (max-width:640px){
  .hero-pc{display:none}
  .hero--m{display:block;position:relative;height:230px;overflow:hidden}
  .hero--m .bg{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
  .hero--m .mk{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
    display:flex;justify-content:center;padding:0 var(--gut)}
  .hero--m .mk img{width:76%;max-width:280px;height:auto;display:block;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))}
  .hero-cap{padding-top:var(--s4);font-size:12.5px;letter-spacing:2px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .lead-card{grid-template-columns:minmax(0,1fr)}
  .lead-card .pic{min-height:180px;border-left:0;border-top:1px solid var(--line)}
  .t-lead{font-size:19.5px}
  .cat-hero .img{height:140px}
  .cat-head h1{font-size:22px;letter-spacing:2px}
  .cat-head .acts{margin-left:0;width:100%}
  .tab-col{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .search{padding:var(--s4)}
  .search form{flex-wrap:wrap}
  .search .btn{width:100%}
  .list li{flex-wrap:wrap;gap:var(--s2) var(--s3)}
  .list .tt{flex-basis:100%}
  .list .dt{margin-left:auto}
  .nav-drawer .panel{position:fixed;left:0;right:0;top:64px;min-width:0;border-radius:0;
    box-shadow:0 12px 32px rgba(70,50,20,.14)}
}
@media (prefers-reduced-motion:reduce){
  .sk{animation:none}
}

/* ══════════════════════════════════════════════════════════
   总目录（读者侧一期 · 2026-10-08 追加）
   —— 以下全部为新增规则；上文既有规则一条未改
   ══════════════════════════════════════════════════════════ */
.arc-lead{margin:0 0 var(--s5);font-size:13.5px;color:var(--muted)}
.arc-zone{margin:0 0 var(--s8)}
.arc-zone--old{margin-top:var(--s12)}
.arc-note{margin:calc(-1 * var(--s2)) 0 var(--s5);font-size:13px;color:var(--muted)}

.yr{border-bottom:1px solid var(--line)}
.yr:first-of-type{border-top:1px solid var(--line)}
.yr>summary{display:flex;align-items:baseline;gap:var(--s4);cursor:pointer;
  padding:var(--s4) var(--s2);list-style:none}
.yr>summary::-webkit-details-marker{display:none}
.yr>summary::after{content:"＋";margin-left:auto;color:var(--jin2);font-size:14px;
  transition:color .15s}
.yr[open]>summary::after{content:"－"}
.yr>summary:hover .y{color:var(--zhe-deep)}
.yr .y{font-size:19px;font-weight:700;color:var(--zhe);letter-spacing:3px}
.yr .mt{font-size:13px;color:var(--muted)}
.yr-bd{padding:var(--s1) var(--s2) var(--s5)}

.mo{margin:0 0 var(--s5)}
.mo:last-child{margin-bottom:0}
.mo-h{display:flex;align-items:baseline;gap:var(--s3);margin:0 0 var(--s2);
  padding-bottom:4px;font-size:14px;color:var(--zhe);letter-spacing:2px;
  border-bottom:1px dashed var(--line)}
.mo-h .n{margin-left:auto;font-size:12.5px;color:var(--muted);letter-spacing:0}

.art-list{list-style:none;margin:0;padding:0}
.art-list li{display:flex;align-items:baseline;gap:var(--s3);
  padding:6px 0;font-size:15px;border-bottom:1px dashed rgba(236,224,204,.55)}
.art-list li:last-child{border-bottom:0;padding-bottom:0}
.art-list .dt{flex:0 0 46px;font-size:12.5px;color:var(--muted);letter-spacing:.5px}
.art-list .tt{flex:1;min-width:0}
.art-list .tt a{color:var(--body)}
.art-list .tt a:hover{color:var(--zhe)}
.art-list .au{flex:0 0 auto;font-size:12.5px;color:var(--muted)}

@media (max-width:640px){
  .yr .y{font-size:17px;letter-spacing:2px}
  .art-list li{flex-wrap:wrap;gap:2px var(--s2)}
  .art-list .tt{flex-basis:100%;order:2}
  .art-list .au{margin-left:auto;order:1}
}

/* ══════════════════════════════════════════════════════════
   标签（读者侧一期 · 第 2 批 · 2026-10-08 追加）
   —— 以下全部为新增规则；上文既有规则一条未改
   ══════════════════════════════════════════════════════════ */
.tg-cloud{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--s3) var(--s3);margin:0 0 var(--s2);
  padding:var(--s5) var(--s5);border:1px solid var(--line);
  border-radius:var(--r);background:var(--card)}
.tg{display:inline-flex;align-items:baseline;gap:5px;
  padding:4px 13px;border:1px solid var(--line);border-radius:var(--r-tag);
  background:var(--paper);color:var(--zhe);line-height:1.7;
  transition:border-color .15s,background .15s,color .15s}
.tg:hover{border-color:var(--jin);background:var(--quote);text-decoration:none}
.tg .n{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tg.on{background:var(--zhe);border-color:var(--zhe);color:#fdfbf7}
.tg.on .n{color:rgba(253,251,247,.78)}
.tg--1{font-size:17px}
.tg--2{font-size:15.5px}
.tg--3{font-size:14px}
.tg--4{font-size:13px}

@media (max-width:640px){
  .tg-cloud{padding:var(--s4);gap:var(--s2) var(--s2)}
  .tg{padding:3px 11px}
  .tg--1{font-size:15.5px}
  .tg--2{font-size:14.5px}
  .tg--3{font-size:13.5px}
  .tg--4{font-size:12.5px}
}

/* ══════════════════════════════════════════════════════════
   作者（读者侧一期 · 第 3 批 · 2026-10-08 追加）
   —— 以下全部为新增规则；上文既有规则一条未改
   ══════════════════════════════════════════════════════════ */
.au-grid{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3);margin:0}
.au-card{display:inline-flex;align-items:baseline;gap:6px;
  padding:7px 15px;border:1px solid var(--line);border-radius:var(--r-tag);
  background:var(--card);color:var(--zhe);font-size:15.5px;line-height:1.7;
  transition:border-color .15s,background .15s,color .15s}
.au-card:hover{border-color:var(--jin);background:var(--quote);text-decoration:none}
.au-card .n{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.au-card.on{background:var(--zhe);border-color:var(--zhe);color:#fdfbf7}
.au-card.on .n{color:rgba(253,251,247,.78)}

@media (max-width:640px){
  .au-grid{gap:var(--s2)}
  .au-card{padding:5px 12px;font-size:14.5px}
}

/* ══════════════════════════════════════════════════════════
   阅读体验：字号 · 护眼（读者侧一期 · 第 5 批 · 2026-10-08 追加）
   —— 以下全部为新增规则；上文既有规则一条未改
   偏好由 js/reader.js 写在 <html> 的 data-rd-fs / data-rd-bg 上；
   字号选择器特异性高于 article.html 的内联 <style>，故无需 !important。
   ══════════════════════════════════════════════════════════ */
.rd-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s4);
  margin:0 0 22px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);font-size:13px;color:var(--muted);letter-spacing:.5px}
.rd-lb{color:var(--zhe);letter-spacing:2px}
.rd-grp{display:inline-flex;align-items:stretch;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--paper)}
.rd-btn{-webkit-appearance:none;appearance:none;border:0;background:none;cursor:pointer;
  padding:3px 12px;font-family:inherit;font-size:13px;line-height:1.7;color:var(--body);
  letter-spacing:.5px;transition:background .15s,color .15s}
.rd-btn+.rd-btn{border-left:1px solid var(--line)}
.rd-btn:hover{background:var(--quote);color:var(--zhe)}
.rd-btn.on{background:var(--zhe);color:#fdfbf7}

/* 字号：只作用于「简介 ＋ 正文」这层阅读主体（标题与版式保持不动） */
html[data-rd-fs="l"] .art-lead{font-size:18.5px}
html[data-rd-fs="l"] .article-body{font-size:19px}
html[data-rd-fs="s"] .art-lead{font-size:15px}
html[data-rd-fs="s"] .article-body{font-size:15.5px}

/* 护眼底色：把页面底与纸底一并调暖（纯换色，无布局变化） */
html[data-rd-bg="eye"]{--page:#e7ddc6;--paper:#f7f1e1;--card:#f3ecda}

@media (max-width:640px){
  html[data-rd-fs="l"] .art-lead{font-size:17.5px}
  html[data-rd-fs="l"] .article-body{font-size:18px}
  html[data-rd-fs="s"] .art-lead{font-size:14.5px}
  html[data-rd-fs="s"] .article-body{font-size:15px}
  .rd-bar{padding:7px 11px;gap:6px var(--s3)}
  .rd-btn{padding:3px 10px}
}