/* ════════════════════════════════════════════════════════════════
   元燼界誌 · 連載站 — 沉浸電影感深色閱讀系統（hi-fi elevation）
   零外部依賴(系統字)、file:// 相容、深色 only、與 story.html 同調性。
   共用於：閱讀頁 read.html + 連載目錄 index.html。
   ════════════════════════════════════════════════════════════════ */
:root{
  --ink:#04060e; --ink-deep:#010206; --ink-soft:#0a0e1a; --ink-panel:#0d1322;
  --stage:#06080e;                       /* 邊緣融底 / hero 落地色 */
  --paper:#ece7db; --paper-soft:#c6bfae; --paper-dim:#8b8576;
  --gold:#f0b454; --gold-bright:#ffd089; --gold-dim:#7d5f30;
  --cyan:#a8d6ff; --ember:#e0512f; --jade:#7fd3a8;
  --line:rgba(240,180,84,.16); --line-soft:rgba(236,231,219,.10);
  --zhu:#743029; --zhu-line:rgba(176,84,66,.26); --zhu-ink:#e2cdbd;
  /* 反覆使用的金漸層 */
  --gold-grad:linear-gradient(168deg,#ffe2b0,#f0b454 52%,#cc923e 86%,#7d5f30 100%);
  --gold-fill:linear-gradient(160deg,#ffd089,#f0b454 55%,#d59a3e);
  --glass:rgba(8,11,20,.82);
  --serif:"Songti TC","Songti SC","STSong","Source Han Serif TC","Noto Serif CJK TC","Shippori Mincho",serif;
  --sans:"Optima","Avenir Next","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --col:40rem;                            /* 正文欄寬（hi-fi：max-width 40rem 置中）*/
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--stage); color:var(--paper); font-family:var(--serif);
  line-height:2.0; overflow-x:hidden; min-height:100vh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body::before{ /* 全域暈影 + 暖頂光 */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(140% 70% at 50% -10%, rgba(240,180,84,.05), transparent 50%),
    radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(0,0,0,.55));
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:rgba(240,180,84,.28);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(240,180,84,.18);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* ════════════════════════════════════════════════════════════════
   裝飾母題（CSS-drawn，無圖檔依賴）
   ════════════════════════════════════════════════════════════════ */
/* 朱印（seal）：圓角方塊 + 內描邊 + 宋體白字 */
.seal-brick{flex:none;display:grid;place-items:center;border-radius:4px;
  background:linear-gradient(150deg,#82342b,#5e2620);
  box-shadow:inset 0 0 0 1px rgba(226,205,189,.3);
  font-family:var(--serif);font-weight:600;color:var(--zhu-ink)}
/* 界線（divider）：兩道漸層細線 + 中央旋轉 45° 金菱形 */
.rule{display:flex;align-items:center;justify-content:center;gap:15px}
.rule i{display:block;width:90px;height:1px;background:linear-gradient(90deg,transparent,rgba(240,180,84,.5));border:0}
.rule i:last-child{background:linear-gradient(90deg,rgba(240,180,84,.5),transparent)}
.rule b{display:block;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}

/* ════════════════════════════════════════════════════════════════
   閱讀頁 read.html
   ════════════════════════════════════════════════════════════════ */
/* —— 頂部閱讀進度條（3px 金，sticky 返回列上緣）—— */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:50;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  box-shadow:0 0 12px rgba(240,180,84,.55);transition:width .12s linear}

/* —— 返回列（sticky；捲動 >40px 轉實心毛玻璃）—— */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:14px;min-height:52px;padding:14px 28px;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease}
.topbar.solid{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(240,180,84,.12)}
.topbar a.home{font-family:var(--sans);font-size:13.5px;letter-spacing:.14em;color:var(--paper-soft);
  display:inline-flex;align-items:center;gap:.55em;transition:color .25s;white-space:nowrap}
.topbar a.home .chev{font-family:var(--serif);font-size:17px;color:var(--gold)}
.topbar a.home:hover{color:var(--gold-bright)}
.topbar .crumb{font-family:var(--serif);font-size:14.5px;letter-spacing:.14em;color:var(--paper-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.topbar a.idx{font-family:var(--sans);font-size:13px;letter-spacing:.16em;color:var(--paper-dim);
  transition:color .25s;white-space:nowrap}
.topbar a.idx:hover{color:var(--gold-bright)}

/* —— 章首海報 hero（480px；返回列以負 margin 拉到其上重疊）—— */
.hero{position:relative;height:480px;margin-top:-52px;overflow:hidden;z-index:1}
.hero video,.hero .hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::before{ /* 多層 scrim：中心暖暈 + 上下壓暗，確保任一幀標題清晰並融底 */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(46% 70% at 62% 26%, rgba(240,180,84,.16), transparent 60%),
    radial-gradient(36% 60% at 24% 70%, rgba(224,81,47,.10), transparent 62%)}
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,14,.55) 0%,transparent 26%,rgba(6,8,14,.55) 64%,var(--stage) 100%)}
.hero-inner{position:absolute;left:0;right:0;bottom:58px;z-index:3;text-align:center;padding:0 40px;
  animation:rise 1.5s var(--ease) both}
.hero .eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.5em;color:var(--gold-dim);
  text-transform:uppercase;padding-left:.5em}
.hero h1{margin:18px 0 0;font-family:var(--serif);font-size:64px;font-weight:600;letter-spacing:.16em;
  padding-left:.16em;line-height:1;background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 26px rgba(240,180,84,.18))}
.hero .sub{margin-top:20px;font-family:var(--serif);font-size:17px;letter-spacing:.16em;color:var(--paper-soft)}
.hero .meta{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:14px;
  font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;color:var(--paper-dim)}
.hero .meta b{font-weight:400;display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--gold-dim)}
.scroll-cue{position:absolute;left:0;right:0;bottom:20px;z-index:3;display:flex;justify-content:center}
.scroll-cue span{width:1px;height:24px;background:linear-gradient(180deg,rgba(240,180,84,.5),transparent);
  animation:bob 2.4s ease-in-out infinite}

/* —— 正文 —— */
.reader{position:relative;z-index:2;background:var(--stage)}
.chapter-body{max-width:var(--col);margin:0 auto;padding:54px 32px 0}
.chapter-body p{margin:0 0 1.7em;font-family:var(--serif);font-size:19px;line-height:2.0;
  letter-spacing:.02em;color:var(--paper);text-wrap:pretty}
/* 首段首字下沉（float 金漸層 clip-text，~4.4em）*/
.chapter-body .first-real::first-letter{float:left;font-family:var(--serif);font-size:4.4em;line-height:.82;
  font-weight:600;padding:.06em .14em 0 0;
  background:linear-gradient(165deg,#ffe2b0,#f0b454 55%,#cc923e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}
/* 短行（獨句）節奏 */
.chapter-body p.solo{text-align:center;color:var(--paper-soft);letter-spacing:.14em}

/* —— 正文插圖 figure：16:9，邊緣羽化融底（水平+垂直雙遮罩交集），caption 兩側金線 —— */
figure.feather{margin:48px 0 0}
figure.feather .frame{position:relative;aspect-ratio:16/9;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),
    linear-gradient(to bottom,transparent,#000 11%,#000 89%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),
    linear-gradient(to bottom,transparent,#000 11%,#000 89%,transparent);
  mask-composite:intersect}
figure.feather .frame img{width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.02)}
figure.feather figcaption{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:13px;
  font-style:normal}
figure.feather figcaption span{font-family:var(--serif);font-size:14.5px;letter-spacing:.04em;
  color:var(--paper-dim);text-align:center}
figure.feather figcaption i{flex:none;display:block;width:24px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,180,84,.5))}
figure.feather figcaption i:last-child{background:linear-gradient(90deg,rgba(240,180,84,.5),transparent)}

/* —— 章末導覽 —— */
.chapter-foot{max-width:var(--col);margin:0 auto;padding:72px 32px 0}
.chapter-foot .fin{text-align:center;margin-top:22px;font-family:var(--serif);font-size:15px;
  letter-spacing:.16em;color:var(--paper-dim)}
.nextbar{display:flex;gap:16px;margin-top:32px}
/* 上一章卡（暗、不可點時 .dim）；下一章金框主卡 */
.navcard{flex:1;padding:20px 22px;border-radius:9px;text-decoration:none;
  border:1px solid rgba(198,191,174,.1);background:rgba(236,231,219,.015);
  transition:border-color .22s ease,background .22s ease,transform .22s ease;display:block}
.navcard .k{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim)}
.navcard .t{margin-top:9px;font-family:var(--serif);font-size:18px;letter-spacing:.06em;color:var(--paper-dim)}
.navcard.prev{}
.navcard.dim{opacity:.65;pointer-events:none}
.navcard.next{flex:1.4;text-align:right;border-color:rgba(240,180,84,.32);
  background:linear-gradient(160deg,rgba(240,180,84,.1),rgba(240,180,84,.02))}
.navcard.next .k{color:var(--gold-dim)}
.navcard.next .t{font-size:21px;font-weight:600;color:var(--gold-bright);letter-spacing:.05em}
.navcard.next .d{margin-top:5px;font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--paper-dim)}
.navcard.next:hover{border-color:rgba(240,180,84,.6);
  background:linear-gradient(160deg,rgba(240,180,84,.16),rgba(240,180,84,.04));transform:translateY(-2px)}
/* 下一章為 soon → 吊胃口鎖定樣式（不可點）*/
.navcard.next.locked{pointer-events:none;border-color:rgba(240,180,84,.2);
  background:linear-gradient(160deg,rgba(240,180,84,.05),rgba(236,231,219,.012))}
.navcard.next.locked .t{color:var(--paper-dim);filter:blur(5px);user-select:none;letter-spacing:.2em}
.navcard.next.locked .sub{margin-top:5px;font-family:var(--serif);font-size:13px;color:var(--paper-soft);letter-spacing:.02em}
.navcard.next.locked .pend{margin-top:9px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:12px;letter-spacing:.16em;color:var(--gold-dim);
  border:1px solid rgba(240,180,84,.24);border-radius:999px;padding:6px 14px}
/* 章末底部連結列 回目錄 ｜ 索引 */
.foot-links{display:flex;align-items:center;justify-content:center;gap:22px;
  margin-top:30px;padding-bottom:60px;font-family:var(--sans);font-size:13px;letter-spacing:.16em}
.foot-links a{color:var(--paper-soft);transition:color .25s}
.foot-links a:hover{color:var(--gold-bright)}
.foot-links i{display:block;width:1px;height:13px;background:rgba(198,191,174,.25)}

/* CSS-drawn lock（鎖：圓角 body + 半圓 shackle）—— 章末/目錄共用 */
.lock-ico{position:relative;display:inline-block;width:12px;height:14px}
.lock-ico::before{content:"";position:absolute;bottom:0;left:0;width:12px;height:8px;border-radius:2px;background:currentColor}
.lock-ico::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:8px;height:8px;border:1.5px solid currentColor;border-bottom:none;border-radius:5px 5px 0 0}

/* —— 失敗態（卷軸殘缺）—— */
.fail{max-width:var(--col);margin:0 auto;text-align:center;padding:120px 32px 80px}
.fail .gly{font-family:var(--serif);font-size:30px;color:var(--gold-dim);margin-bottom:18px}
.fail h2{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:.2em;color:#fff;padding-left:.2em}
.fail .sub{margin-top:14px;font-family:var(--sans);font-size:13px;letter-spacing:.2em;color:var(--paper-dim)}

/* —— 通用按鈕 —— */
.lnk{font-family:var(--sans);font-size:13px;letter-spacing:.22em;padding:13px 26px;
  border:1px solid var(--line);border-radius:4px;color:var(--paper-soft);
  transition:all .3s var(--ease);background:rgba(240,180,84,.02);cursor:pointer;display:inline-block}
.lnk:hover{border-color:var(--gold);color:var(--gold-bright);background:rgba(240,180,84,.08);
  box-shadow:0 0 24px rgba(240,180,84,.12);transform:translateY(-2px)}
.lnk.ghost{border-color:var(--line-soft);color:var(--paper-dim)}
.lnk.ghost:hover{color:var(--paper);border-color:var(--line)}

/* —— X-Ray 正文觸發詞（restyle：金亮 + 上標小圈 ◦；高特異度覆蓋 codex.css）—— */
/* 詞卡本體 .xcard 由 codex-card.js 建、codex.css 定樣（卷宗式 anchored popover），此處只調觸發詞外觀 */
.reader .chapter-body .xray{color:var(--gold-bright);font-weight:600;border-bottom:0;
  position:relative;cursor:pointer;border-radius:2px;padding:0 1px;
  transition:color .2s,text-shadow .2s}
.reader .chapter-body .xray::after{content:"◦";font-family:var(--sans);font-size:.52em;
  color:var(--gold);vertical-align:super;margin-left:1px}
.reader .chapter-body .xray:hover{color:#fff;text-shadow:0 0 16px rgba(240,180,84,.5);background:transparent}
.reader .chapter-body .xray.cx-active{color:#fff;text-shadow:0 0 16px rgba(240,180,84,.5)}
/* 「鬼」類危詞：另加金虛線底線（spec）*/
.reader .chapter-body .xray.peril{border-bottom:1px dashed rgba(240,180,84,.45)}

/* ════════════════════════════════════════════════════════════════
   連載目錄 index.html
   ════════════════════════════════════════════════════════════════ */
/* 目錄頁返回列：站標朱印 + 站名 + nav（捲動轉實心毛玻璃，沿用 .topbar.solid）*/
.topbar .brand{display:flex;align-items:center;gap:13px}
.topbar .brand .seal-brick{width:28px;height:28px;font-size:14px}
.topbar .brand .name{font-family:var(--serif);font-size:17px;letter-spacing:.22em;color:var(--paper-soft)}
.topbar nav.tnav{display:flex;gap:30px;font-family:var(--sans);font-size:13.5px;letter-spacing:.2em}
.topbar nav.tnav a{color:var(--paper-dim);transition:color .25s}
.topbar nav.tnav a.on{color:var(--gold-bright)}
.topbar nav.tnav a:hover{color:var(--gold-bright)}

/* —— 電影感插圖 hero（372px；降低 blur、保留電影感，底部漸層銜接列表）—— */
.index-hero{position:relative;height:372px;overflow:hidden;z-index:1;margin-top:-52px}
.hero-slideshow{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.04);will-change:opacity,transform;filter:saturate(1.04) brightness(.9)}
.hero-slide.on{opacity:1}
.index-hero .blur{position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 56% 42%,transparent 40%,#000 100%);
  mask-image:radial-gradient(ellipse 72% 70% at 56% 42%,transparent 40%,#000 100%)}
.index-hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(42% 64% at 70% 34%,rgba(240,180,84,.18),transparent 60%),
    radial-gradient(34% 52% at 26% 62%,rgba(168,214,255,.08),transparent 62%)}
.index-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,19,.3) 0%,transparent 28%,rgba(7,10,19,.62) 76%,var(--stage) 100%)}
.index-hero .overlay{position:absolute;left:34px;right:34px;bottom:34px;z-index:3;animation:rise 1.4s var(--ease) both}
.index-hero .eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.5em;color:var(--gold-dim);text-transform:uppercase}
.index-hero h1{margin:14px 0 0;font-family:var(--serif);font-size:40px;font-weight:600;letter-spacing:.08em;
  line-height:1.2;color:var(--paper);text-shadow:0 2px 24px rgba(0,0,0,.6)}
.index-hero .subline{margin-top:12px;font-family:var(--serif);font-size:16px;letter-spacing:.06em;color:var(--paper-soft)}
.index-hero .dots{position:absolute;right:34px;bottom:38px;z-index:3;display:flex;gap:7px}
.index-hero .dots span{width:7px;height:4px;border-radius:2px;background:rgba(236,231,219,.3);transition:width .4s,background .4s}
.index-hero .dots span.on{width:22px;background:var(--gold)}

/* —— 列表標頭 + 圖例 —— */
.toc-wrap{position:relative;z-index:2;background:var(--stage)}
.toc{max-width:980px;margin:0 auto;padding:0 16px 34px}
.toc-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:30px 18px 12px}
.toc-head .left{display:flex;align-items:baseline;gap:14px}
.toc-head .ttl{font-family:var(--serif);font-size:23px;letter-spacing:.14em;color:var(--paper)}
.toc-head .total{font-family:var(--sans);font-size:13px;letter-spacing:.16em;color:var(--paper-dim)}
.toc-head .legend{display:flex;align-items:center;gap:18px;font-family:var(--sans);font-size:12.5px;
  letter-spacing:.1em;color:var(--paper-dim)}
.toc-head .legend span{display:inline-flex;align-items:center;gap:7px}
.toc-head .legend i{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.toc-head .legend i.off{background:rgba(198,191,174,.3)}
@media(max-width:680px){.toc-head .legend{display:none}}

/* —— 章節列 —— */
.toc-list{padding:4px 0 0}
.ch-row{display:flex;align-items:center;gap:24px;padding:21px 18px;text-decoration:none;
  border-radius:7px;border-bottom:1px solid rgba(236,231,219,.06);
  transition:background .2s ease,box-shadow .2s ease}
/* 已開放（可點）hover：底光 + 內側金左緣 */
a.ch-row:hover{background:rgba(240,180,84,.05);box-shadow:inset 3px 0 0 var(--gold)}
/* 序號磚：序章=朱印；第N章=金邊磚 */
.ch-row .tile{flex:none;width:54px;height:62px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:27px;font-weight:600}
.ch-row .tile.zhu{background:linear-gradient(150deg,#82342b,#5e2620);
  border:1px solid rgba(226,205,189,.28);color:var(--zhu-ink);box-shadow:0 4px 14px rgba(116,48,41,.3)}
.ch-row .tile.open{background:linear-gradient(155deg,rgba(240,180,84,.16),rgba(240,180,84,.04));
  border:1px solid rgba(240,180,84,.38);color:var(--gold)}
.ch-row .tile.lock{background:rgba(236,231,219,.02);border:1px solid rgba(198,191,174,.15);color:#6f6a5d}
.ch-row .tile.lock span{opacity:.7}
.ch-row .body{flex:1;min-width:0}
.ch-row .eyebrow{font-family:var(--sans);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dim)}
.ch-row .nm{margin:6px 0 0;display:flex;align-items:center;gap:12px;
  font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:.05em;color:var(--paper)}
.ch-row .nm .new{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;font-weight:600;color:#1c1305;
  background:var(--gold-fill);padding:2px 9px;border-radius:3px}
.ch-row .sub{margin-top:6px;font-family:var(--serif);font-size:15px;line-height:1.6;letter-spacing:.02em;
  color:var(--paper-dim)}
.ch-row .right{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ch-row .right .w{font-family:var(--sans);font-size:14px;letter-spacing:.04em;color:var(--paper-soft)}
.ch-row .right .dt{font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--paper-dim)}
.ch-row .chev{flex:none;font-family:var(--serif);font-size:22px;color:var(--gold-dim)}
/* 鎖定（soon，不可點 div）：序號磚暗、章名朦朧剪影、副標保持清晰吊胃口、敬請期待膠囊 */
.ch-row.locked{cursor:default}
.ch-row.locked .eyebrow{color:var(--paper-dim)}
.ch-row.locked .nm{color:var(--paper-dim);filter:blur(5px);letter-spacing:.2em;user-select:none}
.ch-row.locked .sub{color:var(--paper-soft);opacity:.82}
.ch-row .pend{flex:none;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;color:var(--gold-dim);
  border:1px solid rgba(240,180,84,.24);border-radius:999px;padding:7px 15px}

/* —— 章末頁腳 —— */
.toc-foot{text-align:center;padding:8px 22px 80px;position:relative;z-index:2}
.toc-foot .links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.toc-foot .note{font-family:var(--sans);font-size:11px;letter-spacing:.3em;color:var(--paper-dim);opacity:.7}

/* ════════════════════════════════════════════════════════════════
   動畫（克制：靜止態一律可見，動畫只作增強）
   ════════════════════════════════════════════════════════════════ */
.reveal{opacity:1;translate:0 0}                          /* 預設可見（無 JS / reduced-motion 也安全）*/
/* 進場只做 slide-up translate,★絕不歸零 opacity —— content 永遠可見,任何環境(IO 不觸發/
   transition 不完成/JS 失敗)都不可能把列卡在隱形(尤其鎖定章 teaser)。動效純增強。 */
.reveal.anim{translate:0 18px;transition:translate .8s var(--ease)}
.reveal.anim.in{translate:0 0}
@keyframes rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}

/* —— 索引「跳回正文」高亮 —— */
.chapter-body p.cx-hl{background:linear-gradient(90deg,rgba(240,180,84,.16),rgba(240,180,84,.03));
  box-shadow:inset 4px 0 0 var(--gold);border-radius:2px;
  transition:background 1s var(--ease),box-shadow 1s var(--ease)}

@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.anim{opacity:1!important;translate:none!important;transition:none!important}
  *{animation:none!important;scroll-behavior:auto}
}

/* ════════════════════════════════════════════════════════════════
   手機（≤680px）
   ════════════════════════════════════════════════════════════════ */
@media(max-width:680px){
  body{line-height:1.95}

  /* 閱讀頁 */
  .topbar{padding:14px 22px}
  .topbar .crumb{font-size:13px;letter-spacing:.1em;max-width:46vw}
  .hero{height:400px;margin-top:-72px}
  .hero-inner{bottom:42px;padding:0 26px}
  .hero .eyebrow{font-size:10.5px;letter-spacing:.46em}
  .hero h1{margin-top:13px;font-size:46px;letter-spacing:.14em;padding-left:.14em}
  .hero .sub{margin-top:15px;font-size:14px;letter-spacing:.12em}
  .hero .meta{margin-top:13px;font-size:11px}
  .chapter-body{padding:34px 24px 0}
  .chapter-body p{font-size:17px;line-height:1.95;letter-spacing:.01em;margin-bottom:1.6em}
  .chapter-body .first-real::first-letter{font-size:3.8em;line-height:.84;padding:.04em .12em 0 0}
  figure.feather{margin-top:38px}
  figure.feather figcaption{flex-direction:column;gap:8px}
  figure.feather figcaption i{display:none}
  figure.feather figcaption span{font-size:12.5px;line-height:1.6}
  .chapter-foot{padding-top:56px}
  /* 下一章 / 上一章卡改直排（next 在上）*/
  .nextbar{flex-direction:column;gap:13px;margin-top:24px}
  .navcard,.navcard.next{flex:none;text-align:left}
  .navcard.next .t{font-size:19px}

  /* 目錄頁 */
  .index-hero{height:300px;margin-top:-52px}
  .index-hero .overlay{left:24px;right:24px;bottom:26px}
  .index-hero .eyebrow{font-size:10.5px;letter-spacing:.42em}
  .index-hero h1{font-size:26px;line-height:1.3}
  .index-hero .subline{display:none}
  .toc-head{padding:24px 14px 10px}
  .toc-head .ttl{font-size:20px}
  .ch-row{align-items:flex-start;gap:14px;padding:16px 8px;flex-wrap:wrap}
  .ch-row .tile{width:44px;height:50px;font-size:20px}
  .ch-row .body{flex:1 1 0;order:1}
  .ch-row .nm{font-size:17px;letter-spacing:.04em}
  .ch-row.locked .nm{filter:blur(4px);letter-spacing:.16em}
  .ch-row .sub{font-size:12.5px;line-height:1.55}
  .ch-row .chev{display:none}
  /* meta 改置標題下方橫排（換行落於序號磚右側，與 body 同列下方）*/
  .ch-row .right{order:2;flex-basis:100%;flex-direction:row;align-items:center;gap:12px;
    margin:8px 0 0;padding-left:58px}
  .ch-row .right .w,.ch-row .right .dt{font-size:11px}
  /* 敬請期待膠囊同樣落於標題下方（整列換行，靠左對齊副標）*/
  .ch-row .pend{order:2;flex-basis:100%;width:max-content;margin:10px 0 0 58px;font-size:11px;padding:5px 12px}
}