:root{
  /* ── 皇家书房色板：暖象牙纸 + 鎏金 + 深酒红 ── */
  --paper:#fbf8f1; --paper2:#f4efe2; --paper3:#efe7d3;
  --ink:#141210; --ink2:#3a352e;
  --muted:#8a8377; --rule:#e3dcc9;
  --gold:#c9a227; --gold2:#a8801a; --goldl:#e6d5a0; --goldfaint:#f0e6c8;
  --accent:#96262a; --accent2:#c9a227;
  --royal:#1c1512; --royal2:#2a201a;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",STSong,"SimSun",Georgia,serif;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  --display:"Playfair Display","Noto Serif SC",Georgia,serif;
  --script:"Great Vibes","Playfair Display",cursive;
  --wrap:1220px;
}
*{box-sizing:border-box}
/* overflow-x:clip 是横向溢出的兜底：它【不】创建滚动容器，
   所以 position:sticky 的导航栏照常工作（用 overflow-x:hidden 会把 sticky 弄坏）。
   老 Safari（<16）会忽略这一条，不影响其它样式。 */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;color:var(--ink);font-family:var(--serif);
     font-size:17px;line-height:1.95;font-weight:400;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
     background:
       radial-gradient(1200px 520px at 50% -120px, #fffdf7 0%, rgba(255,253,247,0) 62%),
       linear-gradient(180deg,#fbf8f1 0%,#f8f4ea 100%);
     background-attachment:fixed}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.lbl{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
     color:var(--muted);font-weight:600}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ── 鎏金饰件 ─────────────────────────────────────── */
/* 双细金线 + 中央菱形，用于章节分隔 */
.orn{display:flex;align-items:center;gap:16px;margin:0 0 30px}
.orn::before,.orn::after{content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,var(--gold) 35%,var(--gold) 65%,transparent)}
.orn i{font-style:normal;color:var(--gold);font-size:13px;letter-spacing:.5em;
  text-indent:.5em;line-height:1}
.orn.wide{margin:0 auto 34px;max-width:460px}
/* 金色角饰框：套在封面图与重点区块上 */
.gframe{position:absolute;inset:16px;border:1px solid rgba(201,162,39,.55);
  pointer-events:none;z-index:3}
.gframe::before,.gframe::after{content:"";position:absolute;width:16px;height:16px;
  border:2px solid var(--gold);}
.gframe::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.gframe::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
/* 金线标题：章节标题下方一道渐隐金线 */
.gline{height:2px;border:0;margin:0 0 34px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 42px,var(--rule) 42px,var(--rule) 100%)}


/* ── masthead ── */
.mast{background:linear-gradient(180deg,#fffdf8,#fbf8f1);position:relative;z-index:20}
.mast::after{content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--gold) 0%,#e3d7ab 22%,var(--rule) 50%,#e3d7ab 78%,var(--gold) 100%)}
.mast-in{max-width:var(--wrap);margin:0 auto;padding:22px 28px;
         display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.brand .mk{flex:0 0 auto;display:block}
.brand .bt{display:flex;flex-direction:column;gap:3px}
.brand b{font-size:23px;letter-spacing:.09em;font-weight:700;line-height:1.1}
.brand i{font-style:normal;font-family:var(--display);font-size:10.5px;letter-spacing:.32em;
         text-transform:uppercase;color:var(--muted);line-height:1}
.mast .lbl{display:none}
@media(min-width:900px){.mast .lbl{display:block}}
@media(max-width:520px){.brand b{font-size:19px}.brand{gap:10px}.brand i{letter-spacing:.2em}}

nav.main{border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:30;
         background:rgba(251,248,241,.93);backdrop-filter:blur(10px) saturate(1.2)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 28px;display:flex;flex-wrap:wrap;gap:4px}
.nav-in>a,.grp>button{font-family:var(--sans);font-size:13.5px;letter-spacing:.06em;
  padding:15px 15px;border:0;background:none;cursor:pointer;color:var(--ink2);
  border-bottom:2px solid transparent;transition:.18s;font-weight:500}
.nav-in>a:hover,.grp>button:hover{color:var(--accent);border-bottom-color:var(--gold)}
.grp{position:relative}
.grp>button::after{content:"▾";font-size:9px;margin-left:6px;color:var(--gold)}
/* ⚠️ 收起时必须用 display:none，不能只用 opacity/visibility。
   visibility:hidden 的元素【仍然占布局空间】，下拉层会向右伸出屏幕，
   把整页撑宽、可以左右拖动（2026-10-08 实测：430px 视口下 scrollWidth=473）。
   用 display:none 后不占位；开合动效改用 @keyframes，观感不变。 */
.dd{position:absolute;left:0;top:100%;min-width:210px;background:#fffdf8;
    border:1px solid var(--rule);border-top:2px solid var(--gold);
    box-shadow:0 18px 40px rgba(30,24,12,.14);
    padding:8px 0;display:none}
.grp:hover .dd,.grp:focus-within .dd{display:block;animation:ddIn .18s ease both}
@keyframes ddIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dd a{display:block;padding:9px 18px;font-family:var(--sans);font-size:13.5px;color:var(--ink2)}
.dd a:hover{background:var(--paper2);color:var(--accent)}
.dd a small{display:block;font-size:10.5px;letter-spacing:.12em;color:var(--muted);
            text-transform:uppercase;margin-top:1px}

/* ── 封面 hero · 左右分栏（杂志封面式）─────────────────────────────
   ⚠️ 两条硬约束，改版式前务必读：
   1) hero 整体是 <a>：2026-10-08 杨老师反馈「封面故事点不动」，
      原来是个纯 <div>，整块没有任何链接。现在整块可点 + 显式「阅读全文」按钮。
   2) 形象照是 941×1672 竖构图（9:16）。**不能**拿它做全幅背景 ——
      横向 2.7:1 的横幅里 object-fit:cover 会裁掉约 85% 高度，头一定被切。
      所以改成左右分栏：左边文字、右边形象照（3:4 顶部对齐裁切，保住头肩）。
   ──────────────────────────────────────────────────────────────── */
.hero{position:relative;display:block;overflow:hidden;background:var(--royal);
  text-decoration:none;color:inherit}
/* 底色：深皇家褐 + 左上酒红晕 + 右上金色晕 + 极淡金色网格（皇家书房质感） */
.hero .hbg{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(820px 560px at 80% 26%,rgba(201,162,39,.13),rgba(201,162,39,0) 62%),
    radial-gradient(1100px 680px at 8% 92%,rgba(150,38,42,.26),rgba(150,38,42,0) 62%),
    linear-gradient(135deg,#251b16 0%,#1c1512 48%,#110c09 100%)}
/* 金色「冲击波」同心环：从人像背后向外扩散，呼应品牌名。
   参考 impactenglish.online 大横幅的环形能量线，但换成金色、不用蓝。 */
.hero .hbg::before{content:"";position:absolute;right:-14%;bottom:-42%;
  width:min(1150px,92vw);aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(201,162,39,.20) 0 1px,transparent 1px 76px);
  -webkit-mask-image:radial-gradient(circle,#000 22%,rgba(0,0,0,.55) 48%,transparent 74%);
  mask-image:radial-gradient(circle,#000 22%,rgba(0,0,0,.55) 48%,transparent 74%)}
.hero .hbg::after{content:"";position:absolute;inset:0;opacity:.15;
  background-image:linear-gradient(rgba(201,162,39,.55) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(201,162,39,.55) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(640px 460px at 18% 42%,#000,transparent 72%);
  mask-image:radial-gradient(640px 460px at 18% 42%,#000,transparent 72%)}
.hero .frame{position:absolute;inset:18px;z-index:7;pointer-events:none;
  border:1px solid rgba(201,162,39,.42);transition:border-color .5s}
/* ⚠️ 画框必须盖在人像【之上】（z-index 7 > .in 的 5）。
   2026-10-08 实测：画框在下层时，人像面板把下边线整段吃掉 ——
   y=621 那一行，x=900 处 ΔR=+26（金线在），x=930..1260 处 ΔR≈+0.5（金线没了），
   直到 x>1270 才恢复，等于头版的金色内框被挖掉 355px。 */
.hero:hover .frame{border-color:rgba(201,162,39,.90)}
.hero .frame::before,.hero .frame::after{content:"";position:absolute;width:22px;height:22px;
  border:2px solid var(--gold)}
.hero .frame::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.hero .frame::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.hero .in{position:relative;z-index:5;max-width:var(--wrap);margin:0 auto;
  min-height:min(78vh,640px);display:grid;grid-template-columns:1.05fr .95fr;
  gap:56px;align-items:center;padding:56px 60px}
/* 文字列 */
.hero .kicker{display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--goldl);font-weight:600}
.hero .kicker::before{content:"";width:38px;height:1px;background:var(--gold)}
.hero h1{color:#fffdf7;font-size:clamp(26px,3.1vw,41px);line-height:1.26;
  margin:18px 0 0;font-weight:700;letter-spacing:.01em;max-width:17em;
  text-wrap:balance;   /* 防止折行后只剩一个字（「…开场策」/「略」）落在末行 */
  text-shadow:0 2px 30px rgba(0,0,0,.45);transition:color .35s}
.hero:hover h1{color:var(--goldl)}
.hero .fl{width:96px;height:3px;margin:22px 0 0;
  background:linear-gradient(90deg,var(--gold),rgba(201,162,39,0));border-radius:2px}
.hero p{color:rgba(255,253,247,.84);max-width:34em;margin:20px 0 0;font-size:16px;
  line-height:1.92;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.hero .meta{color:rgba(255,253,247,.62);margin-top:20px;font-family:var(--sans);
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.hero .meta b{color:var(--goldl);font-weight:600}
/* 「阅读全文」按钮：把「可点击」这件事显式说出来 */
.hero .cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  padding:11px 26px;border:1px solid var(--gold);border-radius:2px;
  font-family:var(--sans);font-size:12.5px;letter-spacing:.2em;
  color:var(--goldl);background:rgba(201,162,39,.08);
  transition:background .35s,color .35s,letter-spacing .35s}
.hero .cta span{transition:transform .35s;font-size:14px;line-height:1}
.hero:hover .cta{background:var(--gold);color:#1c1512;letter-spacing:.26em}
.hero:hover .cta span{transform:translateX(5px)}
/* 人像列：抠图合成（参考 impactenglish.online 大横幅 —— 人像从绿幕抠出后
   直接站在设计好的背景里，不加相框，底部切齐头版下沿）。
   源图是 G3 绿幕（ChatGPT Image Aug 14 …(3).png），色度键抠图。
   ⚠️ 用【半身像】不用全身：2026-10-08 杨老师反馈「很难看、不需要整个身躯」——
      全身抠图（带摊开的手）在手机上很别扭，手悬空、身体在胯部被硬切。
      裁切范围：y 0..700（头顶到上胸），见 _cut/mr-yang-bust.png。
   尺寸只用 width:100%+height:auto，不要同时写 height 和 max-width，
   否则 replaced element 会被压变形。 */
.hero .pt{position:relative;justify-self:end;align-self:end;display:flex;
  align-items:flex-end;justify-content:flex-end;width:100%;max-width:480px;
  margin-bottom:-56px}   /* 抵掉 .in 的下内边距 → 半身像落到底边，被头版下沿收住 */
.hero .pt img{display:block;width:100%;height:auto;
  animation:heroIn 1.5s cubic-bezier(.2,.7,.3,1) both;
  transition:transform .9s cubic-bezier(.2,.7,.3,1);
  /* ⚠️ 不要再加 drop-shadow：2026-10-08 换成 T01 真实照后，人像不再是抠图，
     而是一块【底色已调成与头版底色一致】的照片板。drop-shadow 会沿着这块
     矩形的 alpha 边缘投出一圈暗晕（实测面板外 3~8 个色阶），矩形边就露出来了。
     ⚠️ 也不要再加 contrast()：2026-10-09 实测 contrast(1.02) 会把面板压暗
     ~1.8 个色阶，而【头版背景不受这个滤镜影响】→ 面板整体比周围暗，边就显出来了。
     滤镜只能做【亮度中性】的（saturate 用的是保持亮度的矩阵，可以用）。 */
  filter:saturate(1.03)}
.hero:hover .pt img{transform:translateY(-6px)}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* ── 头版底部压暗（.hscrim）─────────────────────────────────────────────
   ⚠️ 这一层是【署名可读性】的保险，不能删。
   事故复盘（2026-10-08，杨老师两次反馈「字体完全出不来」「怎么成这样？」）：
   署名锁定在右下角，而人像的胸口/浅蓝衬衫正好在那里。白字打在浅蓝衬衫
   （rgb≈180,200,215）上对比度只有 1.3:1 —— 肉眼等于看不见；而同一行右边
   几个字落在暗背景上正常。于是看起来像「字体只加载了一半」，极具迷惑性。
   ⚠️ 试过两个错解，都别走回头路：
     ① 只给署名加一团居中柔光 → 第三行「冲击波英语 创始人 · IMPACT ENGLISH」
        有 26 字符铺满 234px，左半截落在柔光之外，照样读不出来。
     ② 给署名加矩形底衬 → 边缘露出来，像胸口贴了块黑补丁，很丑。
   ✅ 最终方案：全幅底部渐变 + 斜向 mask 只压右半边（人像与署名）
      + 右下角柔光（无硬边）。层次：.hbg(1) → .in(5) → .hscrim(6) → .frame(7) → .sig2(8)。
   ⚠️ mask 不能省：不加 mask 的话底部渐变会连左列的「阅读全文」按钮一起压暗，
      按钮从亮金变成灰金（实测肉眼可辨，观感立刻"脏"）。mask 用 100deg 斜向过渡，
      30% 处完全透明（左列不受影响）、80% 处完全生效（署名区满压），且是斜的、不出竖直硬边。
   判据（可复测）：_verify/measure_sig_contrast.py 会量出「文字背后底色」，
   最亮 20% 像素与白字的对比度必须 ≥ 4.5:1。 */
.hero .hscrim{position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,8,6,0) 44%,rgba(11,8,6,.34) 64%,rgba(11,8,6,.70) 82%,
    rgba(11,8,6,.88) 94%,rgba(11,8,6,.92) 100%);
  -webkit-mask-image:linear-gradient(100deg,transparent 30%,rgba(0,0,0,.55) 55%,#000 80%);
  mask-image:linear-gradient(100deg,transparent 30%,rgba(0,0,0,.55) 55%,#000 80%)}
/* 署名锁定：手写体英文名 + 中文名 + 头衔（照搬参考横幅右下角的做法） */
.hero .sig2{position:absolute;right:60px;bottom:46px;z-index:8;text-align:right;
  pointer-events:none;text-shadow:0 2px 22px rgba(0,0,0,.7)}
/* 右下角柔光：只负责「把最亮的那块衬衫再压一档」，边缘完全羽化，不出硬边 */
.hero .sig2::before{content:"";position:absolute;z-index:-1;
  inset:-52px -40px -40px -150px;
  background:radial-gradient(64% 92% at 86% 70%,rgba(9,6,4,.62),rgba(9,6,4,0) 82%)}
.hero .sig2 .sc{font-family:var(--script);font-weight:400;
  font-size:clamp(27px,3vw,44px);line-height:1;color:var(--goldl);letter-spacing:.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.92),0 0 34px rgba(0,0,0,.62)}
.hero .sig2 .cn{font-size:clamp(16px,1.5vw,21px);font-weight:700;color:#fffdf7;
  letter-spacing:.2em;margin-top:7px;
  text-shadow:0 2px 16px rgba(0,0,0,.92),0 0 28px rgba(0,0,0,.60)}
.hero .sig2 .ro{font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;
  color:rgba(255,253,247,.86);margin-top:6px;text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.95),0 0 22px rgba(0,0,0,.72)}
.hero .sig2 .ro i{font-style:normal;color:var(--gold);margin:0 6px}
@media(max-width:900px){
  /* 手机端：文字在上、半身像在最下方与头版下沿齐平（与桌面构图一致）。
     这样半身像的裁切边被头版下沿收住，不需要再叠一层渐隐。 */
  .hero .in{grid-template-columns:1fr;gap:0;min-height:0;padding:34px 26px 0}
  .hero .pt{order:0;justify-self:center;max-width:none;width:100%;
    margin-top:4px;margin-bottom:0}
  .hero .pt img{width:min(100%,320px);margin:0 auto}
  /* 手机端隐藏右下角大字署名：半身像占满底部，署名会压在他的西装/领带上，
     金字被身体挡住读不清（2026-10-08 杨老师截图反馈「怎么成这样？」）。
     署名信息不丢 —— meta 行本来就有「杨斯毅 著」。 */
  .hero .sig2{display:none}
  .hero h1{font-size:clamp(25px,6.4vw,36px)}
  .hero .frame{inset:10px}
  .hero .cta{margin-top:18px;padding:9px 20px}
  .hero .hbg::before{right:-40%;bottom:-26%}
}

/* ── section ── */
section{padding:72px 0}
.shead{margin-bottom:36px}
.shead .row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:14px}
.shead h2{font-size:26px;margin:0;letter-spacing:.05em;font-weight:700;
  display:flex;align-items:center;gap:14px}
.shead h2::before{content:"";width:6px;height:22px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--gold),var(--accent));border-radius:1px}
.shead .lbl{margin-left:2px}
.shead a{font-family:var(--sans);font-size:12.5px;color:var(--muted);letter-spacing:.06em}
.shead a:hover{color:var(--accent)}
.shead .bar{height:2px;background:var(--rule);
  background-image:linear-gradient(90deg,var(--gold) 0,var(--gold) 96px,var(--rule) 96px)}

/* ── column cards ── */
.cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.cc{display:block;border:1px solid var(--rule);border-top:2px solid var(--gold);
  background:#fffdf8;overflow:hidden;transition:.26s;position:relative}
.cc:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(40,30,10,.14);
  border-color:#e0d5b4;border-top-color:var(--accent)}
/* 配图占位（.cc 与 .ac 共用）：服务器较慢时图片要等一会儿才到。
   原来是死灰 #eceae4，滚动时看着像「图坏了」。
   改成暖纸底 + 一道静态金色斜光，读作「待载入」而不是「坏图」。 */
.cc .ph{aspect-ratio:8/5;overflow:hidden;
  background:linear-gradient(140deg,#f6f2e9 0%,#ece6d9 46%,#f4efe5 100%)}
.cc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.cc:hover .ph img{transform:scale(1.06)}
.cc .bd{padding:20px 22px 22px}
.cc .bd h3{margin:0 0 5px;font-size:19px;letter-spacing:.03em}
.cc .bd .en{font-family:var(--display);font-size:11px;letter-spacing:.2em;
            text-transform:uppercase;color:var(--gold2)}
.cc .bd p{margin:10px 0 0;font-size:13.5px;line-height:1.78;color:var(--ink2);
          font-family:var(--sans)}
.cc .bd .n{float:right;font-family:var(--display);font-size:12px;color:var(--gold2)}

/* ── article grid (asymmetric editorial) ── */
.grid{display:grid;gap:42px 34px;grid-template-columns:1fr}
@media(min-width:680px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.grid{grid-template-columns:repeat(3,1fr)}}
.ac{display:block;transition:.22s;position:relative}
.ac .ph{aspect-ratio:3/2;overflow:hidden;margin-bottom:16px;position:relative;
  background:linear-gradient(140deg,#f6f2e9 0%,#ece6d9 46%,#f4efe5 100%)}
.ac .ph::after{content:"";position:absolute;inset:0;border:1px solid rgba(201,162,39,.0);
  transition:.3s}
.ac:hover .ph::after{border-color:rgba(201,162,39,.65)}
.ac .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.ac:hover .ph img{transform:scale(1.05)}
.ac h3{margin:0 0 10px;font-size:19.5px;line-height:1.5;letter-spacing:.01em;font-weight:600;
  transition:.2s}
.ac:hover h3{color:var(--accent)}
.ac p{margin:0;font-size:13.5px;line-height:1.82;color:var(--ink2);font-family:var(--sans)}
.ac .mt{margin-top:12px;display:flex;gap:12px;align-items:center;
  padding-top:11px;border-top:1px solid var(--rule)}
.ac .mt span{font-family:var(--sans);font-size:11px;letter-spacing:.13em;color:var(--muted);
             text-transform:uppercase}
.ac.big{grid-column:span 2}
.ac.big .ph{aspect-ratio:16/9}
.ac.big h3{font-size:27px;line-height:1.42}
.ac.big p{font-size:15px;line-height:1.85}
@media(max-width:1019px){.ac.big{grid-column:span 2}}
@media(max-width:679px){.ac.big{grid-column:span 1}.ac.big .ph{aspect-ratio:3/2}.ac.big h3{font-size:21px}}

/* ── 正文内嵌插图 ── */
.body figure{margin:2.6em 0}
.body figure img{width:100%;aspect-ratio:4/3;object-fit:cover;
  box-shadow:0 10px 30px rgba(40,30,10,.12)}
.body figure figcaption{font-family:var(--sans);font-size:11.5px;color:var(--muted);
  margin-top:12px;letter-spacing:.05em;padding-top:10px;
  border-top:1px solid var(--rule)}

/* ── 朗读音频条 ── */
.listen{max-width:760px;margin:0 auto;padding:0 28px}
.listen-in{border:1px solid var(--rule);border-left:3px solid var(--gold);
           border-top:2px solid var(--gold);background:#fffdf8;padding:18px 22px 20px;
           box-shadow:0 8px 24px rgba(40,30,10,.07)}
.listen .hd{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.listen .hd b{font-size:15.5px;letter-spacing:.02em}
.listen .hd .tag{flex:0 0 auto}
.listen audio{width:100%;height:38px;display:block}
.listen .ft{font-family:var(--sans);font-size:11.5px;color:var(--muted);margin-top:9px;
            letter-spacing:.04em}
@media(max-width:640px){.listen{padding:0 18px}}

/* ── tags ── */
.tag{display:inline-block;font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;
     padding:2px 8px;border:1px solid currentColor;border-radius:2px;text-transform:uppercase}
/* 标签配色全部收进「皇家书房」色板：不再用绿色(#2f6b4f) —— 它属于旧配色，
   在一片象牙纸+鎏金+酒红里显得突兀（2026-10-08 截图肉眼发现） */
.tag-own{color:#8a6a1f;background:var(--goldfaint)}
.tag-co{color:#6b6152;background:#f1ece0}
.tag-ext{color:#8a3a3a;background:#f7ecea}
.tag-e{color:var(--accent);border-style:dashed}

/* ── column hero ── */
.chero{position:relative;height:min(52vh,430px);overflow:hidden;background:var(--royal)}
/* ⚠️ 这两条是栏目页头图「发灰/发糊」的正解，别改回纯竖直渐变。
   2026-10-08 杨老师反馈「横幅好像又淡了些，模糊了太多」。实测：
     · 原来 .chero img{opacity:.72} → 整图 28% 透明，跟深底一混就"洗白"了；
     · 原来 .ov 是【纯竖直】渐变 (.30→.90)，而人脸正好在画面中部，
       被压掉 48%~72% 亮度 —— 脸区最亮处只剩 161（正常应接近 255）。
   低对比度在人眼里就读作"糊"（实测该区 Laplacian 方差仅 8.2，>200 才算清晰）。
   → 改法：图片不透明；遮罩改成【横向为主】，左暗右亮 ——
     左边文字区仍然压到 .90 保证白字可读，右侧人像区几乎不压，脸就"提"出来了。
     再叠一层很轻的竖直渐变，只负责把底边收住。 */
.chero img{width:100%;height:100%;object-fit:cover}
.chero .ov{position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(96deg,rgba(16,10,7,.84) 0%,rgba(16,10,7,.74) 26%,
      rgba(16,10,7,.56) 44%,rgba(16,10,7,.30) 60%,
      rgba(16,10,7,.09) 78%,rgba(16,10,7,0) 100%),
    linear-gradient(180deg,rgba(20,14,10,.12) 0%,rgba(16,10,7,0) 48%,
      rgba(16,10,7,.28) 100%),
    /* ③ 很轻的整体压暗（12%）：去掉 opacity 后照片是全亮度的，
          像「成语与翻译」那种整页外文报纸会太抢眼、跟站点的克制调性冲。
          只压 12%，右侧人像仍有 88% 亮度（实测 211→186），够清晰。 */
    linear-gradient(rgba(16,10,7,.12),rgba(16,10,7,.12))}
.chero .frame{position:absolute;inset:14px;z-index:3;pointer-events:none;
  border:1px solid rgba(201,162,39,.45)}
.chero .frame::before,.chero .frame::after{content:"";position:absolute;width:16px;height:16px;
  border:2px solid var(--gold)}
.chero .frame::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.chero .frame::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.chero .in{position:absolute;inset:0;z-index:4;display:flex;align-items:flex-end}
.chero .in>div{max-width:var(--wrap);margin:0 auto;padding:0 60px 44px;width:100%;color:#fffdf7}
.chero .en{font-family:var(--display);font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;
           color:var(--goldl);display:flex;align-items:center;gap:12px;
           text-shadow:0 1px 12px rgba(0,0,0,.85)}
.chero .en::before{content:"";width:34px;height:1px;background:var(--gold)}
.chero h1{margin:14px 0 0;font-size:clamp(30px,4.8vw,52px);letter-spacing:.05em;font-weight:700;
  text-shadow:0 2px 26px rgba(0,0,0,.45),0 1px 8px rgba(0,0,0,.55)}
.chero p{margin:14px 0 0;color:rgba(255,253,247,.86);max-width:46em;font-size:15px;line-height:1.9;
  text-shadow:0 1px 14px rgba(0,0,0,.90),0 0 24px rgba(0,0,0,.60)}
@media(max-width:640px){.chero .in>div{padding:0 26px 32px}.chero .frame{inset:9px}
/* 手机专用竖构图横幅（.chero--art，目前只有「关于我」用）。
   ⚠️ 让盒子比例与手机图 900x990 一致，裁切才是可预测的。
   ⚠️ width:100% 不能省：只写 aspect-ratio+max-height 时，一旦 max-height 生效，
      浏览器会反过来由高度推宽度，横幅会缩成 473px 宽而不是铺满（640px 视口实测）。
   max-height 兜住平板竖屏：640 宽按比例会是 704 高，太高；压到 520 后
   可见纵向区间仍是 y 13%~87%，人像（y 31%~83%）完整落在里面。 */
.chero--art{width:100%;height:auto;aspect-ratio:900/990;max-height:520px}}

/* ── article page ── */
.art-head{padding:62px 0 0}
.art-head .inner{max-width:760px;margin:0 auto;padding:0 28px}
.crumb{font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--muted);margin-bottom:24px}
.crumb a:hover{color:var(--accent)}
.art-head h1{font-size:clamp(28px,4vw,45px);line-height:1.32;margin:0 0 22px;
             letter-spacing:.01em;font-weight:700}
/* 导语 .stand —— 与正文首字下沉 .lede 分开命名，避免语义撞车 */
.art-head .stand{font-size:18.5px;color:var(--ink2);line-height:1.9;margin:0 0 28px;
  padding-left:20px;border-left:3px solid var(--gold)}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  padding:16px 0;font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--muted);
  border-top:1px solid var(--rule);
  border-bottom:2px solid var(--rule);
  background-image:linear-gradient(90deg,var(--gold) 0,var(--gold) 0);
  background-repeat:no-repeat;background-position:0 100%;background-size:96px 2px}
.art-fig{margin:44px 0 0}
.art-fig img{width:100%;aspect-ratio:3/2;max-height:72vh;object-fit:cover;
  box-shadow:0 14px 40px rgba(40,30,10,.14)}
.art-fig figcaption{font-family:var(--sans);font-size:11.5px;color:var(--muted);
  margin-top:11px;letter-spacing:.04em;padding-top:10px;border-top:1px solid var(--rule)}

.body{max-width:760px;margin:0 auto;padding:46px 28px 10px}
.body p{margin:0 0 1.55em;text-align:justify;text-justify:inter-ideograph;
  font-size:17.5px;line-height:2.02}
/* 纯标点行 → 鎏金分隔符 */
.body .sep{display:flex;align-items:center;justify-content:center;gap:16px;margin:2.6em 0}
.body .sep::before,.body .sep::after{content:"";height:1px;width:72px;
  background:linear-gradient(90deg,transparent,var(--gold))}
.body .sep::after{background:linear-gradient(90deg,var(--gold),transparent)}
.body .sep span{color:var(--gold);font-size:11px;line-height:1}
.body p.lede::first-letter{float:left;font-size:3.9em;line-height:.82;font-weight:700;
  padding:8px 14px 0 0;color:var(--accent);
  text-shadow:1px 1px 0 var(--goldfaint)}
.body h3{font-size:20.5px;margin:2.3em 0 .9em;padding-left:15px;position:relative;
  letter-spacing:.02em}
.body h3::before{content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:3px;
  background:linear-gradient(180deg,var(--gold),var(--accent));border-radius:1px}
.pq{margin:48px 0;padding:30px 0 30px 32px;position:relative;
  font-size:23px;line-height:1.72;color:var(--ink)}
.pq::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold),rgba(201,162,39,.15))}
.pq::after{content:"❖";position:absolute;left:-8px;top:-6px;color:var(--gold);
  font-size:14px;background:var(--paper);padding:4px 0;line-height:1}
.pq b,.pq strong{color:var(--accent);font-weight:700}

.note{max-width:760px;margin:0 auto 30px;padding:0 28px}
.note-in{border:1px solid var(--rule);border-top:2px solid var(--gold);
  background:#fffdf8;padding:24px 26px;box-shadow:0 8px 24px rgba(40,30,10,.06)}
.note-in h4{margin:0 0 14px;font-family:var(--sans);font-size:12px;letter-spacing:.18em;
            text-transform:uppercase;color:var(--gold2)}
.note-in dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14px}
.note-in dt{font-family:var(--sans);color:var(--muted);font-size:13px;white-space:nowrap}
.note-in dd{margin:0;color:var(--ink2)}

.rel{background:linear-gradient(180deg,var(--paper2),var(--paper3));
  border-top:2px solid var(--gold);margin-top:60px;padding:56px 0}
.sig{max-width:760px;margin:0 auto;padding:36px 28px 0;text-align:right}
.sig .who{font-size:16px;letter-spacing:.08em}
.sig .sub{font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:5px;letter-spacing:.08em}

footer.ft{position:relative;margin-top:20px;padding:56px 0 64px;
  background:linear-gradient(180deg,var(--royal),var(--royal2));color:#e8e0d2}
footer.ft::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),#e3d7ab 28%,#fff6dd 50%,#e3d7ab 72%,var(--gold))}
.ft-in{max-width:var(--wrap);margin:0 auto;padding:0 28px;
  display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.ft .brand b{font-size:19px;color:#fbf8f1}
.ft .brand i{color:rgba(201,162,39,.9)}
.ft .brand .mk{opacity:.95}
.ft nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--sans);font-size:13px;
  color:rgba(232,224,210,.76)}
.ft nav a:hover{color:var(--goldl)}
.ft .cp{font-family:var(--sans);font-size:11.5px;color:rgba(232,224,210,.42);
  letter-spacing:.06em;width:100%;
  border-top:1px solid rgba(201,162,39,.24);padding-top:22px;margin-top:10px}
.empty{padding:70px 0;text-align:center;color:var(--muted);font-family:var(--sans)}
/* ── 音乐播放器（左下角悬浮）── */
.mp{position:fixed;left:20px;bottom:20px;z-index:60;width:300px;font-family:var(--sans)}
.mp .aplayer{border-radius:4px;box-shadow:0 12px 30px rgba(18,20,24,.22);margin:0}
.mp .aplayer .aplayer-info .aplayer-music{color:#333}
@media(max-width:640px){.mp{left:10px;right:10px;bottom:10px;width:auto}}
.pbar{position:fixed;top:0;left:0;height:2px;background:var(--accent);width:0;z-index:99}
img{animation:fade .7s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(max-width:640px){.wrap,.mast-in,.nav-in,.ft-in{padding-left:18px;padding-right:18px}
  .body,.art-head .inner,.note,.sig{padding-left:18px;padding-right:18px}}