@charset "utf-8";
/* ==========================================================================
   Kittel 固態物理 — 設計系統
   概念：把 Kittel 拆成規格卡，再沿 C(T) 曲線重新排列
   色相只用 2 個：indigo H268（結構）／ember H45（溫度暖端），兩者永不直接相鄰
   所有樣式只准引用 token
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* 表面 */
  --paper:      oklch(0.930 0.012 265);
  --paper-sunk: oklch(0.900 0.016 265);
  --card:       oklch(1.000 0.000 265);
  --card-hi:    oklch(1.000 0.000 265);

  /* 反轉板面（全頁 1–2 個） */
  --plate:      oklch(0.330 0.105 268);
  --on-plate:   oklch(0.975 0.012 265);
  --on-plate-2: oklch(0.855 0.030 265);
  /* 板面上的 ember：不可用 --ember（對深靛板對比不足），此值對板面 ≥4.5:1 */
  --ember-on-plate: oklch(0.845 0.085 50);

  /* 界線（Radix 6/7/8 對照） */
  --line:        oklch(0.870 0.018 265);
  --line-hover:  oklch(0.800 0.028 265);
  --line-strong: oklch(0.680 0.040 265);

  /* 結構色 indigo */
  --indigo:      oklch(0.475 0.135 268);
  --indigo-deep: oklch(0.365 0.115 268);
  --indigo-wash: oklch(0.945 0.028 268);

  /* 溫度暖端 ember（面積 ≤5%） */
  --ember:       oklch(0.545 0.145 45);
  --ember-deep:  oklch(0.455 0.125 43);
  --ember-wash:  oklch(0.950 0.032 48);

  /* 文字三階 */
  --ink:     oklch(0.290 0.018 265);
  --ink-2:   oklch(0.500 0.024 265);
  --ink-3:   oklch(0.570 0.022 265);
  --ink-inv: oklch(0.975 0.012 265);

  /* 陰影：單一變數交付（不可用 var 拼接） */
  --sh-card:    0 1px 2px 0 oklch(0.30 0.03 268 / .15), 0 1px 3px 1px oklch(0.30 0.03 268 / .08);
  --sh-card-hi: 0 1px 2px 0 oklch(0.30 0.03 268 / .17), 0 2px 6px 2px oklch(0.30 0.03 268 / .10);
  --sh-flat:    none;

  /* 間距 / 字級 / 尺寸 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:160px;

  --f-hero: clamp(34px, 6vw, 52px);
  --f-lead: 34px;
  --f-h2:   28px;
  --f-h3:   20px;
  --f-body: 17px;
  --f-num:  15px;
  --f-label:13px;

  --w-narrow: 640px;
  --w-text:   960px;
  --w-wide:   1180px;

  --radius: 3px;
  --rail: 4px;

  --font-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
}

/* ---------- 深色：換階，不反轉 ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      oklch(0.175 0.012 265);
    --paper-sunk: oklch(0.145 0.010 265);
    --card:       oklch(0.245 0.014 265);
    --card-hi:    oklch(0.285 0.016 265);
    --plate:      oklch(0.280 0.075 268);
    --on-plate:   oklch(0.970 0.012 265);
    --on-plate-2: oklch(0.845 0.028 265);
    --ember-on-plate: oklch(0.845 0.090 50);
    --line:        oklch(0.330 0.020 265);
    --line-hover:  oklch(0.420 0.030 265);
    --line-strong: oklch(0.560 0.045 265);
    --indigo:      oklch(0.760 0.095 268);
    --indigo-deep: oklch(0.860 0.070 268);
    --indigo-wash: oklch(0.285 0.045 268);
    --ember:       oklch(0.775 0.105 48);
    --ember-deep:  oklch(0.860 0.075 50);
    --ember-wash:  oklch(0.295 0.045 45);
    --ink:     oklch(0.945 0.010 265);
    --ink-2:   oklch(0.740 0.020 265);
    --ink-3:   oklch(0.670 0.020 265);
    --ink-inv: oklch(0.175 0.012 265);
    --sh-card:    inset 0 1px 0 oklch(1 0 0 / .10);
    --sh-card-hi: inset 0 1px 0 oklch(1 0 0 / .16);
    --sh-flat:    inset 0 1px 0 oklch(1 0 0 / .07);
  }
}
:root[data-theme="dark"] {
  --paper:      oklch(0.175 0.012 265);
  --paper-sunk: oklch(0.145 0.010 265);
  --card:       oklch(0.245 0.014 265);
  --card-hi:    oklch(0.285 0.016 265);
  --plate:      oklch(0.280 0.075 268);
  --on-plate:   oklch(0.970 0.012 265);
  --on-plate-2: oklch(0.845 0.028 265);
  --ember-on-plate: oklch(0.845 0.090 50);
  --line:        oklch(0.330 0.020 265);
  --line-hover:  oklch(0.420 0.030 265);
  --line-strong: oklch(0.560 0.045 265);
  --indigo:      oklch(0.760 0.095 268);
  --indigo-deep: oklch(0.860 0.070 268);
  --indigo-wash: oklch(0.285 0.045 268);
  --ember:       oklch(0.775 0.105 48);
  --ember-deep:  oklch(0.860 0.075 50);
  --ember-wash:  oklch(0.295 0.045 45);
  --ink:     oklch(0.945 0.010 265);
  --ink-2:   oklch(0.740 0.020 265);
  --ink-3:   oklch(0.670 0.020 265);
  --ink-inv: oklch(0.175 0.012 265);
  --sh-card:    inset 0 1px 0 oklch(1 0 0 / .10);
  --sh-card-hi: inset 0 1px 0 oklch(1 0 0 / .16);
  --sh-flat:    inset 0 1px 0 oklch(1 0 0 / .07);
}

/* ---------- 基礎 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; font-family: var(--font-zh); font-size: var(--f-body);
  line-height: 1.75; letter-spacing: 0; color: var(--ink); background: var(--paper);
  line-break: strict; overflow-wrap: anywhere; word-break: normal;
}

:where(a) { color: var(--indigo-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(a):hover { color: var(--ember-deep); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 { letter-spacing: 0; font-weight: 600; }
h1 { font-size: var(--f-hero); line-height: 1.15; margin: 0; }
h2 { font-size: var(--f-h2); line-height: 1.30; margin: var(--s8) 0 var(--s5); }
h3 { font-size: var(--f-h3); line-height: 1.45; margin: var(--s6) 0 var(--s3); max-width: 36em; }
h4 { font-size: var(--f-num); line-height: 1.5; margin: var(--s5) 0 var(--s2); color: var(--ink-2); }
p  { margin: 0 0 var(--s3); max-width: 36em; }
b, strong { font-weight: 600; }
sub, sup { font-size: var(--f-label); line-height: 0; }

.num { font-variant-numeric: tabular-nums; }
code, .mono { font-family: var(--font-mono); font-size: 1em; font-variant-numeric: tabular-nums; }

.wrap        { width: min(100% - var(--s6), var(--w-wide)); margin-inline: auto; }
.wrap--text  { width: min(100% - var(--s6), var(--w-text)); margin-inline: auto; }
.wrap--narrow{ width: min(100% - var(--s6), var(--w-narrow)); margin-inline: auto; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--ember); color: var(--ink-inv); padding: var(--s2) var(--s4); }
.skip:focus { left: var(--s4); top: var(--s4); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- 頂條 ---------- */
.topbar { border-bottom: 1px solid var(--line); background: var(--card); box-shadow: var(--sh-flat); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s2); flex-wrap: wrap; }
.topbar__id { font-size: var(--f-label); font-weight: 500; color: var(--ink-2); }
.topbar__id a { color: inherit; text-decoration: none; }
.topbar__id a:hover { color: var(--ember-deep); }
.topbar__sep { color: var(--indigo); padding-inline: var(--s2); }
.topbar__nav { display: flex; gap: var(--s4); font-size: var(--f-label); }
.topbar__nav a { color: var(--ink-2); text-decoration: none; }
.topbar__nav a[aria-current="page"] { color: var(--indigo-deep); font-weight: 500; }
.tbtn { font-family: var(--font-zh); font-size: var(--f-label); color: var(--ink-2); background: var(--paper);
  cursor: pointer; border: 1px solid var(--line-hover); border-radius: 2px; padding: 2px var(--s3); }
.tbtn:hover { border-color: var(--line-strong); color: var(--ember-deep); }

/* ---------- Hero ---------- */
.kicker { font-size: var(--f-label); font-weight: 500; color: var(--indigo-deep); margin: 0 0 var(--s3); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.kicker::before { content: ""; width: 22px; height: var(--rail); background: var(--ember); flex: none; }
.hero { padding-block: var(--s8) var(--s7); }
.hero__lede { font-size: var(--f-h3); line-height: 1.7; color: var(--ink-2); margin: var(--s5) 0 0; max-width: 34em; }
.hero__claim { margin: var(--s6) 0 0; padding-left: var(--s4); border-left: var(--rail) solid var(--ember);
  font-size: var(--f-h3); line-height: 1.6; color: var(--ink); max-width: 28em; }
.anchors__cap { font-size: var(--f-label); color: var(--ink-3); margin: var(--s7) 0 var(--s3); }
.anchors { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s8); margin: 0; padding: 0; list-style: none; }
.anchors li { margin: 0; }
.anchors .v { display: block; font-size: var(--f-lead); line-height: 1.15; font-weight: 600; color: var(--ember); font-variant-numeric: tabular-nums; }
.anchors .k { display: block; font-size: var(--f-label); color: var(--ink-2); margin-top: var(--s1); }

/* ---------- 招牌時刻 A：22 格章節刻度尺 ---------- */
.layout { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s6); padding-block: var(--s6) var(--s9); }
@media (min-width: 1000px) {
  .layout { grid-template-columns: 128px minmax(0,1fr); gap: var(--s8); align-items: start; }
  .scale { position: sticky; top: var(--s4); }
}
.scale { font-size: var(--f-label); min-width: 0; }
.scale__title { font-size: var(--f-label); color: var(--ink-3); margin: 0 0 var(--s3); }
.scale ol { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: 2px; }
.scale a {
  display: grid; grid-template-columns: 1.6em 1fr; align-items: center; gap: var(--s2);
  text-decoration: none; color: var(--ink-3); font-variant-numeric: tabular-nums; padding: 1px 0;
}
.scale a:hover { color: var(--ember-deep); }
.scale .bar { height: 9px; border-radius: 1px; transition: width .08s ease-out; }
@media (prefers-reduced-motion: reduce) { .scale .bar { transition: none; } }
.scale .g-direct   .bar { width: 100%; background: var(--ember); }
.scale .g-indirect .bar { width: 56%;  background: var(--indigo); }
.scale .g-none     .bar { width: 22%;  background: var(--line-strong); }
.scale a:hover .bar { width: 100%; }
.scale__key { display: grid; gap: var(--s1); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--f-label); color: var(--ink-3); }
.scale__key span { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: var(--s2); }
.scale__key i { height: 8px; border-radius: 1px; display: block; }

/* ---------- 章節規格卡 ---------- */
.chap {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s5) var(--s5) var(--s4); margin-bottom: var(--s5); box-shadow: var(--sh-card);
  scroll-margin-top: var(--s4);
}
.chap__head { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.chap__no { font-size: var(--f-lead); font-weight: 600; line-height: 1.15; color: var(--indigo); font-variant-numeric: tabular-nums; }
.chap--direct .chap__no { color: var(--ember); }
.chap__t { margin: 0; font-size: var(--f-h3); line-height: 1.4; }
.chap__t .en { line-height: 1.5; }
.chap__t .en { display: block; color: var(--ink); }
.chap__meta { margin: var(--s1) 0 0; font-size: var(--f-label); color: var(--ink-3); display: flex; gap: var(--s4); flex-wrap: wrap; font-variant-numeric: tabular-nums; }

.facet { padding-top: var(--s4); }
.facet__k { font-size: var(--f-label); color: var(--ink-3); margin: 0 0 var(--s2); display: flex; align-items: baseline; gap: var(--s2); }
.facet__k b { color: var(--indigo); font-weight: 600; font-family: var(--font-mono); }
.facet p { font-size: var(--f-num); line-height: 1.8; margin-bottom: var(--s2); }
.facet ul { margin: 0; padding-left: 1.2em; font-size: var(--f-num); line-height: 1.8; max-width: 36em; }
.facet li { margin-bottom: var(--s1); }

/* 公式：右對齊式號與頁碼，仿 Kittel 的式號慣例 */
.eqs { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s2); margin: var(--s2) 0 0; }
.eq {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s2) var(--s4); align-items: baseline;
  background: var(--card); border: 1px solid var(--line); border-left: var(--rail) solid var(--indigo);
  border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s3) var(--s4); box-shadow: var(--sh-card);
}
.eq__l { font-size: var(--f-label); color: var(--ink-3); grid-column: 1 / -1; margin: 0; }
.eq__f { font-family: var(--font-mono); font-size: var(--f-num); line-height: 1.7; color: var(--ink); overflow-x: auto; margin: 0; max-width: 62ch; }
.eq__r { font-family: var(--font-mono); font-size: var(--f-label); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums;
  /* 式號欄在 auto 欄寬裡：nowrap 加上舊資料裡的長註記（如「(10) j=−(c/4πλ_L²)A；curl j 形式為…」）
     會把整張卡撐到 474px。允許換行並設上限。 */
  white-space: normal; max-width: 16em; overflow-wrap: anywhere; }
.eq__s { grid-column: 1 / -1; font-size: var(--f-label); color: var(--ink-2); line-height: 1.7; margin: 0; max-width: 36em; }

.quote { border-left: 2px solid var(--line-strong); padding-left: var(--s4); margin: var(--s3) 0 0; font-size: var(--f-label); color: var(--ink-2); line-height: 1.8; }
.quote p { margin: 0 0 var(--s1); max-width: 62ch; }

/* 關聯徽章 */
.tag { display: inline-block; font-size: var(--f-label); font-weight: 600; padding: 1px var(--s2); border-radius: 2px; border: 1px solid transparent; }
.tag--direct   { background: var(--ember-deep); color: var(--ink-inv); }
.tag--indirect { background: var(--indigo-wash); color: var(--indigo-deep); border-color: var(--indigo); }
.tag--none     { color: var(--ink-3); border-color: var(--line-hover); }
.mine { font-size: var(--f-label); color: var(--ink-3); }

/* ---------- 反轉板面 ---------- */
.plate { background: var(--plate); color: var(--on-plate); padding-block: var(--s9); margin-block: var(--s8); }
.plate h2 { margin-top: 0; color: var(--on-plate); }
.plate p { color: var(--on-plate-2); }
.plate strong { color: var(--ember-on-plate); }
.plate a { color: var(--on-plate); }
.plate .lead { display: block; font-size: var(--f-lead); line-height: 1.15; font-weight: 600; color: var(--on-plate); margin-bottom: var(--s3); font-variant-numeric: tabular-nums; }
.plate__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: var(--s6); margin-top: var(--s6); }
.plate__n { font-size: var(--f-lead); font-weight: 600; line-height: 1.15; color: var(--ember-on-plate); font-variant-numeric: tabular-nums; display: block; }
.plate__k { font-size: var(--f-label); color: var(--on-plate-2); margin-top: var(--s1); }

/* ---------- 表格（Kittel 資料表：極細線、無斑馬紋） ---------- */
/* color 要寫死成 --ink：表格自帶 --card 白底，放進 .plate 時若讓 td 繼承
   --on-plate（淺色，為深底而設）就會變成白底淺字，整張表讀不到。 */
.tablewrap { overflow-x: auto; margin: var(--s5) 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: var(--sh-flat); }
.tablewrap--narrow { max-width: 42em; }
/* 文字欄（.wrap--text，960px）裡的表格若撐滿整欄，裝句子的那一欄會超過 38em 的
   行長門檻——ch-03「哪些小節要精讀」表量到 38.7em。收到 48em（816px）讓彈性欄
   回到 30em 以內；數字欄有 min-content 撐著不會被壓扁，真的裝不下時 .tablewrap
   本來就有 overflow-x: auto 可橫向捲動。 */
.wrap--text .tablewrap { max-width: 48em; }
table { width: 100%; border-collapse: collapse; font-size: var(--f-num); }
th, td { text-align: left; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--plate); color: var(--on-plate); font-weight: 500; font-size: var(--f-label);
  /* 表頭原為 nowrap：「等效載子數／原子」這種長表頭會把欄撐寬、把最關鍵的末欄推到橫捲後面。
     改為可換行；keep-all 讓中文詞不被拆成單字，只在空白與標點處斷。 */
  white-space: normal; word-break: keep-all; overflow-wrap: normal; }
tbody th { font-weight: 500; color: var(--ink-2); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
td { font-variant-numeric: tabular-nums;
  /* body 的 overflow-wrap: anywhere 會把 min-content 算成單一字元寬，表格自動排版
     因此能把欄壓到比數字還窄，把「−2.619」拆成「−2.61／9」、「1.2×10⁴」拆成「1.2×1／0⁴」。
     儲存格改 normal：數字與英文詞保持完整，中文仍可字間換行；放不下就在 .tablewrap 內橫捲。 */
  overflow-wrap: normal; }
td.mono, th.mono { font-family: var(--font-mono); white-space: nowrap; }
/* keep-all 只適合公式本體：保護符號串不被拆斷。
   .eq__s 是中文符號說明，keep-all 會讓中日韓文字不在字間斷行，
   幾乎無空格的中文整段變成不可斷長串，在窄螢幕把公式卡撐破（ch-03-s3/s5）。 */
.eq__f { overflow-wrap: normal; word-break: keep-all; }
.eq__s { word-break: normal; overflow-wrap: anywhere; }
/* 公式的換行與連續空白是排版資訊，不是原始碼縮排：JSON 裡的分段矩陣、6×6 剛度
   矩陣、piecewise 大括號都靠它們對齊（ch-03 的式 (19)(57)(69) 是代表案例）。
   讓瀏覽器把換行摺成空白會把 2×2 行列式印成一長串「| a b | | c d |」。
   pre-wrap 保留換行與空白，但仍在空白處自動斷行，配上既有的 overflow-x: auto，
   超寬的式子橫向捲動而不撐破版面。 */
.eq__f { white-space: pre-wrap; }

/* ---------- 段落區塊 ---------- */
.sect { padding-block: var(--s7) 0; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--sh-card); }
.panel h3 { margin-top: 0; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--s5); align-items: start; }

/* ---------- 頁尾 ---------- */
.foot { border-top: 1px solid var(--line); padding-block: var(--s7) var(--s9); font-size: var(--f-label);
  color: var(--ink-3); background: var(--paper-sunk); margin-top: var(--s8); }
.foot p { max-width: 36em; margin-bottom: var(--s2); }
.foot a { color: var(--indigo-deep); }
.foot .lvl { display: grid; gap: var(--s3); margin: var(--s5) 0 0; padding: 0; list-style: none; max-width: 36em; }
.foot .lvl li { display: grid; grid-template-columns: 108px 1fr; gap: var(--s4); background: var(--card);
  border: 1px solid var(--line); border-left: var(--rail) solid var(--line-strong);
  border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s3) var(--s4); box-shadow: var(--sh-flat); }
.foot .lvl b { color: var(--ink-2); font-weight: 500; }
.foot .lvl .is-book { border-left-color: var(--indigo); }
.foot .lvl .is-mine { border-left-color: var(--ember); }
.foot__tail { margin-top: var(--s5); }
@media (max-width: 640px) { .foot .lvl li { grid-template-columns: 1fr; gap: var(--s1); } }

/* ---------- 章節頁：頁首與導覽 ---------- */
.crumb { font-size: var(--f-label); color: var(--ink-2); padding-block: var(--s5) 0; }
.crumb a { color: var(--indigo-deep); }
.uhead { padding-block: var(--s5) var(--s6); border-bottom: 1px solid var(--line); }
.uhead__no { font-size: var(--f-lead); font-weight: 600; color: var(--indigo); line-height: 1.15;
  font-variant-numeric: tabular-nums; display: block; margin-bottom: var(--s2); }
.uhead h1 { font-size: clamp(28px, 4.2vw, 40px); line-height: 1.2; }
.uhead__en { font-size: var(--f-h3); line-height: 1.5; color: var(--ink-2); margin: var(--s2) 0 0; max-width: 36em; }
.quote__k { font-size: var(--f-label); color: var(--ink-3); margin: 0 0 var(--s1); }
.facet { padding-top: var(--s6); scroll-margin-top: var(--s4); }
.facet:first-child { padding-top: var(--s5); }
.stepnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--s4);
  padding-block: var(--s7); border-top: var(--rail) solid var(--indigo); margin-top: var(--s7); }
.stepnav a { display: block; text-decoration: none; color: inherit; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--sh-card); }
.stepnav a:hover { border-color: var(--line-hover); box-shadow: var(--sh-card-hi); }
.stepnav .dir { display: block; font-size: var(--f-label); color: var(--ink-3); margin-bottom: var(--s1); }
.stepnav .t { font-size: var(--f-h3); font-weight: 600; color: var(--ink); line-height: 1.45; }
.stepnav .t .n { color: var(--indigo); }
.scale a[aria-current="page"] { color: var(--ember-deep); font-weight: 600; }
.scale a[aria-current="page"] .bar { width: 100%; }


/* ---------- 章節頁的 ⑤⑥：兩欄判讀給獨立表面 ---------- */
.facet--rel {
  background: var(--card); border: 1px solid var(--line);
  border-left: var(--rail) solid var(--line-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s4) var(--s5); margin-top: var(--s6); box-shadow: var(--sh-card);
}
.facet--rel .facet__k { margin-top: 0; }
/* ⑥ 是每頁的重點所在：全頁唯一的反轉表面 */
.facet--cth {
  background: var(--plate); color: var(--on-plate); border-radius: var(--radius);
  padding: var(--s6) var(--s5); margin-top: var(--s5); box-shadow: var(--sh-flat);
}
.facet--cth .facet__k { color: var(--on-plate-2); }
.facet--cth .facet__k b { color: var(--ember-on-plate); }
.facet--cth p { color: var(--on-plate); }
.facet--cth strong { color: var(--ember-on-plate); }
.facet--cth .tag--direct { background: var(--ember-on-plate); color: var(--plate); }

.plate .facet__k { color: var(--on-plate-2); margin-bottom: var(--s3); }
.plate .facet__k b { color: var(--ember-on-plate); }

/* ---------- 招牌時刻 B：Debye 熱容曲線導覽 ---------- */
.curve { margin: 0; }
.curve__svg { display: block; width: 100%; height: auto; }
.c-axis  { stroke: var(--on-plate-2); stroke-width: 1.2; fill: none; }
.c-guide { stroke: var(--on-plate-2); stroke-width: 1; stroke-dasharray: 3 4; opacity: .6; }
.c-asym  { stroke: var(--ember-on-plate); stroke-width: 1.4; stroke-dasharray: 6 4; }
.c-curve { stroke: var(--on-plate); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.c-zone-lo { fill: var(--ember-on-plate); opacity: .10; }
.c-tick text, .c-lab { fill: var(--on-plate-2); font-family: var(--font-mono); font-size: 13px; }
.c-tick line { stroke: var(--on-plate-2); stroke-width: 1; }
.c-lab--warm { fill: var(--ember-on-plate); }
.c-band-lo  { fill: var(--ember-on-plate); opacity: .22; }
.c-band-mid { fill: var(--on-plate); opacity: .14; }
.c-band-hi  { fill: var(--on-plate); opacity: .08; }
.c-band-t   { fill: var(--on-plate); font-family: var(--font-zh); font-size: 13px; font-weight: 500; }
.c-drop line { stroke: var(--on-plate-2); stroke-width: 1; stroke-dasharray: 2 3; opacity: .5; }

/* 主題晶片：依溫區分組 */
.zones { display: grid; gap: var(--s5); margin-top: var(--s6); }
@media (min-width: 860px) { .zones { grid-template-columns: 1fr 1fr 1fr; } }
.zone__t { font-size: var(--f-label); color: var(--on-plate-2); margin: 0 0 var(--s3); }
.zone ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.zone a {
  display: block; text-decoration: none; padding: var(--s2) var(--s3);
  border: 1px solid var(--on-plate-2); border-radius: 2px; color: var(--on-plate);
  font-size: var(--f-num); line-height: 1.5;
}
.zone a:hover { border-color: var(--ember-on-plate); color: var(--ember-on-plate); }
.zone a .n { font-family: var(--font-mono); font-size: var(--f-label); color: var(--on-plate-2); margin-right: var(--s2); }
.zone--base { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--on-plate-2); }
.zone--base ul { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }

/* ---------- 熱容主題規格卡 ---------- */
.topic { scroll-margin-top: var(--s4); padding-block: var(--s7) 0; }
.topic__head { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start;
  padding-bottom: var(--s4); border-bottom: var(--rail) solid var(--indigo); }
.topic__n { font-size: var(--f-lead); font-weight: 600; line-height: 1.15; color: var(--indigo); font-variant-numeric: tabular-nums; }
.topic__t { margin: 0; font-size: var(--f-h2); line-height: 1.3; }
.topic__zone { font-size: var(--f-label); color: var(--ink-3); margin: var(--s2) 0 0; }
.aspect { padding-top: var(--s5); }
.aspect__k { font-size: var(--f-label); color: var(--ink-3); margin: 0 0 var(--s2); display: flex; align-items: baseline; gap: var(--s2); }
.aspect__k b { color: var(--indigo); font-weight: 600; font-family: var(--font-mono); }
.aspect p { font-size: var(--f-num); line-height: 1.8; }
.aspect ul { margin: 0; padding-left: 1.2em; font-size: var(--f-num); line-height: 1.8; max-width: 36em; }
.aspect li { margin-bottom: var(--s2); }
.aspect--limit ul li::marker { color: var(--ember); }
.ext { background: var(--ember-wash); border-left: var(--rail) solid var(--ember);
  border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s3) var(--s4); margin: var(--s3) 0; }
.ext p { margin: 0; font-size: var(--f-num); line-height: 1.8; }
.ext__k { font-size: var(--f-label); font-weight: 600; color: var(--ember-deep); display: block; margin-bottom: var(--s1); }
.srcs { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.srcs li { font-family: var(--font-mono); font-size: var(--f-label); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 2px; padding: 1px var(--s2); background: var(--card); }

/* 知識地圖 */
.mapgrid { display: grid; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 780px) { .mapgrid { grid-template-columns: repeat(3, 1fr); } }
.maplane { border: 1px solid var(--on-plate-2); border-radius: var(--radius); padding: var(--s4); }
.maplane h3 { margin: 0 0 var(--s3); font-size: var(--f-h3); color: var(--on-plate); }
.maplane ol { margin: 0; padding-left: 1.3em; font-size: var(--f-num); line-height: 1.75; color: var(--on-plate-2); }
.maplane li { margin-bottom: var(--s2); }
.maplane b { color: var(--ember-on-plate); font-weight: 600; }

.curve__cap { margin-top: var(--s4); }
.curve__cap p { color: var(--on-plate-2); font-size: var(--f-label); line-height: 1.8; max-width: 42em; margin-bottom: var(--s2); }
.curve__cap strong { color: var(--ember-on-plate); }

/* 窄螢幕：曲線不縮到標籤看不清，改為可橫向捲動 */
@media (max-width: 760px) {
  .curve { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .curve__svg { min-width: 700px; }
  .curve__cap { padding-right: var(--s4); }
}


/* ============================================================
   深度章節頁（data/deep/ch-NN.json）
   一章兩萬字以上，節奏靠三件事撐住：小節的重分界、推導的獨立表面、
   非「書中」內容的層級標籤。
   ============================================================ */

/* 左欄放得下小節標題，比六欄版的 128px 寬 */
@media (min-width: 1000px) {
  /* 文字欄不超過量度，否則右側會留下一整條死空白（實測縮圖發現） */
  .layout--deep { grid-template-columns: 208px minmax(0, 660px); justify-content: center; }
}

/* ---- 本章小節目錄 ---- */
.secnav { font-size: var(--f-label); margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line); }
.secnav__t { font-size: var(--f-label); color: var(--ink-3); margin: 0 0 var(--s3); }
.secnav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); counter-reset: sn; }
/* 只套用在清單項目，不要套到標題裡的連結（會把標題擠成直書） */
.secnav ol a { display: grid; grid-template-columns: 1.5em 1fr; gap: var(--s2);
  text-decoration: none; color: var(--ink-2); line-height: 1.45; }
.secnav ol a:hover { color: var(--indigo); }
.secnav .n { color: var(--indigo); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- 小節 ---- */
.sec { padding-top: var(--s8); scroll-margin-top: var(--s4); }
.sec:first-of-type { padding-top: var(--s5); }
.sec__h { display: grid; gap: var(--s1); margin: 0 0 var(--s4);
  padding-top: var(--s4); border-top: var(--rail) solid var(--indigo); }
.sec__t { font-size: var(--f-h2); line-height: 1.45; margin: 0; }
.sec__t .n { color: var(--indigo); font-family: var(--font-mono); margin-right: .4em; }
.sec__en { font-size: var(--f-label); color: var(--ink-3); margin: 0; font-style: italic; }
.sec__p  { font-size: var(--f-label); color: var(--ink-3); margin: 0; font-variant-numeric: tabular-nums; }
.sec__lede { font-size: var(--f-h3); line-height: 1.6; color: var(--ink-2);
  max-width: 31em; margin: 0 0 var(--s5); }

/* ---- 講解單元 ---- */
.blk { margin-bottom: var(--s7); }
.blk__h { font-size: var(--f-h3); line-height: 1.4; margin: 0 0 var(--s3);
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.blk p { font-size: var(--f-body); line-height: 1.85; max-width: 34em; margin: 0 0 var(--s4); }
.blk p:last-child { margin-bottom: 0; }
.blk ul, .blk ol { font-size: var(--f-body); line-height: 1.85; max-width: 34em;
  margin: 0 0 var(--s4); padding-left: 1.3em; }
.blk li { margin-bottom: var(--s2); }

/* ---- 散文裡的 Markdown 小標與分隔線（prose() 產生） ----
   刻意沿用 --f-body，不引入新字級：小標靠字重與間距分層，不靠放大。
   行高 1.5 是標題元素在 <32px 時的上限，不可再放寬。 */
.prose__h { font-size: var(--f-body); line-height: 1.5; font-weight: 600;
  color: inherit; letter-spacing: 0; max-width: 34em;
  margin: var(--s6) 0 var(--s3); }
.prose__h:first-child { margin-top: 0; }
/* color: inherit／currentColor 是必要的：這兩者同時出現在淺色卡片與深色 plate 上，
   寫死 --ink 會讓 plate 上的小標變成深色壓深色。 */
.prose__hr { border: 0; border-top: 1px solid currentColor; opacity: .25;
  max-width: 34em; margin: var(--s6) 0; }

/* ---- 層級標籤：只標非「書中」的內容，未標示者即書中 ---- */
.tier { font-size: 11px; font-weight: 600; white-space: nowrap;   /* 中文不加字距 */
  padding: 2px var(--s2); border-radius: 2px; border: 1px solid; }
.tier--derived { color: var(--indigo-deep); border-color: var(--indigo); background: var(--indigo-wash); }
.tier--mine    { color: var(--ink-2);      border-color: var(--line-strong); background: var(--paper-sunk); }
.tier--ext     { color: var(--ember-deep); border-color: var(--ember); background: var(--ember-wash); }

/* ---- 推導：獨立表面，與敘述一眼分得開 ---- */
.deriv { background: var(--indigo-wash); border: 1px solid var(--line);
  border-left: var(--rail) solid var(--indigo); border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s5); margin-bottom: var(--s8); }
.deriv .blk__h { margin-bottom: var(--s4); }
.deriv p { max-width: 34em; }
.deriv__steps { list-style: none; counter-reset: st; margin: var(--s4) 0; padding: 0;
  display: grid; gap: var(--s3); max-width: 530px;
  /* 隱式軌道是 auto，會被步驟內表格的 min-content 撐寬，連帶同一 ol 的所有 li 一起
     超出 ol（ch-06-s4 的 6 欄 τ／ℓ 表把軌道撐到 659px，文字步驟量到 44em）。
     鎖成 minmax(0, 1fr)：軌道不超過 ol，裝不下的表格交給 .tablewrap 橫向捲動。 */
  grid-template-columns: minmax(0, 1fr); }
/* 步驟卡內只剩約 440px 可用：表頭改為可換行、左右留白減半，6 欄數值表才放得下，
   不必讓讀者橫向捲動才看到最後兩欄的計算結果。 */
.deriv__steps thead th { white-space: normal; word-break: keep-all; overflow-wrap: normal; }
.deriv__steps th, .deriv__steps td { padding-inline: var(--s2); }
/* li 不可以是 grid container：步驟文字裡只要夾了 <strong>，每個子節點都會各自
   變成 grid item，正文就掉進 1.9em 的編號欄一行一個字直落（全站 861 步中 534 步中招）。
   改用 block ＋ 絕對定位的編號。 */
.deriv__steps > li { counter-increment: st; display: block; position: relative;
  padding: var(--s3) var(--s4) var(--s3) 3.1em;
  font-size: var(--f-num); line-height: 1.75; margin: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--sh-card); }
.deriv__steps > li::before { content: counter(st); color: var(--indigo); font-weight: 600;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  position: absolute; left: var(--s4); top: var(--s3); }

/* ---- 公式：補上出處／極限／數值三列 ---- */
.eq__meta { grid-column: 1 / -1; display: grid; gap: var(--s2); margin: var(--s3) 0 0;
  padding-top: var(--s3); border-top: 1px solid var(--line); }
.eq__row { display: grid; grid-template-columns: 4.5em minmax(0,1fr); gap: var(--s3);
  font-size: var(--f-label); line-height: 1.7; }
.eq__rk { color: var(--ink-3); }
.eq__rv { color: var(--ink-2); max-width: 34em; }

/* ---- 常見誤解 ---- */
.misc { margin-top: var(--s7); }
.misc__l { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s4); list-style: none; margin: var(--s4) 0 0; padding: 0; }
.misc__i { background: var(--card); border: 1px solid var(--line);
  border-left: var(--rail) solid var(--ember); border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s4) var(--s5); box-shadow: var(--sh-card); }
.misc__w { font-size: var(--f-num); font-weight: 600; line-height: 1.6; margin: 0 0 var(--s2);
  color: var(--ember-deep); max-width: 34em; }
.misc__w::before { content: "✗ "; }
.misc__r { font-size: var(--f-num); line-height: 1.75; margin: var(--s2) 0 0; max-width: 34em; }
.misc__r::before { content: "✓ "; color: var(--indigo); font-weight: 600; }
.misc__why { font-size: var(--f-num); line-height: 1.75; margin: 0; color: var(--ink-2); max-width: 34em; }

/* ---- 章首的規模標示 ---- */
.chap__meta .big { color: var(--ember-deep); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .sec { padding-top: var(--s7); }
  .deriv { padding: var(--s4); }
  .deriv__steps > li { padding: var(--s3) var(--s3) var(--s3) 2.7em; }
  .eq__row { grid-template-columns: minmax(0,1fr); gap: var(--s1); }
}

/* ---- 章總覽的小節導覽卡（放在反轉板面上，替整頁提供一條暗帶） ---- */
.plate__lede { color: var(--on-plate-2); font-size: var(--f-num); line-height: 1.8;
  max-width: 34em; margin: 0 0 var(--s6); }
.seclist { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s4); }
@media (min-width: 720px)  { .seclist { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .seclist { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.seccard { display: grid; gap: var(--s2); align-content: start; text-decoration: none;
  background: var(--card); border: 1px solid transparent; border-radius: var(--radius);
  padding: var(--s5); box-shadow: var(--sh-card); }
.seccard:hover { box-shadow: var(--sh-card-hi); border-color: var(--line-hover); }
.seccard__n { font-size: var(--f-h2); line-height: 1.5; color: var(--indigo); }
.seccard__t { font-size: var(--f-h3); line-height: 1.45; font-weight: 600; color: var(--ink); }
.seccard__en { font-size: var(--f-label); line-height: 1.5; color: var(--ink-3); font-style: italic; }
.seccard__p { font-size: var(--f-label); line-height: 1.6; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.seccard__l { font-size: var(--f-num); line-height: 1.75; color: var(--ink-2); max-width: 30em; }

.secnav__t a { color: var(--ink-3); text-decoration: none; }
.secnav__t a:hover { color: var(--indigo); }
.secnav ol a[aria-current="page"] { color: var(--ember-deep); font-weight: 600; }

/* 小節頁的 h1 沿用小節標題樣式，但字級升一階 */
article > .sec__h .sec__t { font-size: var(--f-lead); line-height: 1.25; }
@media (max-width: 760px) { article > .sec__h .sec__t { font-size: var(--f-h2); line-height: 1.45; } }

/* 小節頁的推導區塊改用 <section>，padding 與 .sec 不同款，也讓版面多一種區塊節奏 */
section.deriv { padding: var(--s5) var(--s5) var(--s6); }
@media (max-width: 760px) { section.deriv { padding: var(--s4); } }


/* ---- 小節頁的頁首做成全幅反轉板面：長頁需要一條明確的起始帶 ---- */
.plate--sec { padding-block: var(--s7) var(--s8); }
.plate--sec .sec__h { border-top: 0; padding-top: 0; margin-bottom: var(--s4); }
.plate--sec .sec__t { color: var(--on-plate); }
.plate--sec .sec__t .n { color: var(--ember-on-plate); }
.plate--sec .sec__en,
.plate--sec .sec__p { color: var(--on-plate-2); }
.plate--sec .sec__lede { color: var(--on-plate); margin-bottom: 0; }

/* ---- 小節頁的閱讀欄給獨立卡面：長頁需要一個明確的「紙面」邊界 ---- */
.layout--deep article {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s6) var(--s7) var(--s8); box-shadow: var(--sh-card);
}
/* 公式在白紙面上改為內凹，靠明度差而非陰影與紙面區隔 */
.layout--deep article .eq { background: var(--paper-sunk); box-shadow: var(--sh-flat); }
.layout--deep article .deriv__steps > li { background: var(--card); }
@media (max-width: 760px) {
  .layout--deep article { padding: var(--s5) var(--s4) var(--s6); }
}

/* 概念標題前留一段空白，讓 32 屏的長頁出現可辨識的分段呼吸 */
.layout--deep article .blk__h { margin-top: var(--s6); }
.layout--deep article > .sec > :first-child .blk__h { margin-top: 0; }
.eqs { margin-block: var(--s5) var(--s7); }

/* 含表格的公式 meta 列改為單欄，否則 6 欄表會擠進 1fr 的窄格變成跑馬燈 */
.eq__row--wide { grid-template-columns: minmax(0,1fr); gap: var(--s2); }
/* 行長上限是給散文用的；表格要能用滿整列，否則 6 欄表被壓到 442px */
.eq__row--wide .eq__rv { max-width: none; }
/* prose() 在 li／卡片內會包 <p>，首尾的外距要收掉才不會撐開容器 */
.deriv__steps > li > p:first-child, .misc__i > div > p:first-child,
.eq__rv > p:first-child { margin-top: 0; }
.deriv__steps > li > p:last-child, .misc__i > div > p:last-child,
.eq__rv > p:last-child { margin-bottom: 0; }
.eq__rv .tablewrap { margin-block: var(--s2); }

/* ---- prose() 產生的清單 ---- */
.prose__ul, .prose__ol { margin: 0 0 var(--s4); padding-left: 1.4em; max-width: 34em; }
.prose__ul { list-style: disc; }
.prose__ol { list-style: decimal; }
.prose__ul > li, .prose__ol > li { margin-bottom: var(--s2); padding-left: var(--s1); }
.prose__ul > li:last-child, .prose__ol > li:last-child { margin-bottom: 0; }
.prose__ul:last-child, .prose__ol:last-child { margin-bottom: 0; }
/* 步驟卡、誤解卡、公式 meta 裡的清單字級跟著容器走，不另設 */
.deriv__steps > li > .prose__ul, .deriv__steps > li > .prose__ol { margin-top: var(--s2); }
.plate .prose__ul, .plate .prose__ol { color: var(--on-plate); }

/* 窄螢幕：公式卡改單欄，式號移到公式下方靠左，不再與公式搶寬度 */
@media (max-width: 760px) {
  .eq { grid-template-columns: minmax(0,1fr); }
  .eq__r { text-align: left; max-width: none; }
}