/* 《以諾一書》讀者站──子頁共用樣式：/enoch/sources/、/enoch/service/、/editor/
   2026-10-16 以諾：sources 頁的大標、小標先改（原名 sources.css），看過後裁定
   讀者服務頁原樣套、編譯者頁不加圖只放大頁首、編譯者頁不編號 ⇒ 三頁共用這一支。
   只在這三頁多掛一個 <link>（build.py 的 extra_css），style.css 與其他頁的 HTML 完全沒改。
   顏色、字型全部沿用 style.css 的 :root 變數。CSP 是 style-src 'self'，同源檔案可載，inline <style> 不行。 */

/* ---------- 橫帶主視覺（sources、service）：大標 ----------
   原本 h1 走瀏覽器預設 2em（34px），和副標差距太小。
   現在：金色小引（書名＋英文）→ 64px 粗體大標 → 金色短線 → 放大副標。 */
.pagehero > .pagehero-b { padding-top: 84px; padding-bottom: 76px; }
.pagehero .kicker {
  margin: 0 0 16px; color: var(--gold); font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.pagehero .kicker span {
  display: inline-block; margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(201,168,92,.55);
  font-size: 12.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--on-dark); }
.pagehero h1 {
  font-size: clamp(40px, 5.4vw, 64px); font-weight: 800; line-height: 1.18; letter-spacing: .03em;
  text-shadow: 0 2px 20px rgba(0,0,0,.38); }
.pagehero h1::after {
  content: ""; display: block; width: 76px; height: 4px; margin-top: 24px; background: var(--gold); border-radius: 2px; }
.pagehero .sub { margin: 22px 0 0; max-width: 34em; font-size: 21px; line-height: 1.6; color: var(--paper); }
/* 讀者服務專區的歡迎詞（10-25）：與到達頁那句購書讀者說明同一個淺金灰，前後呼應成同一個聲音 */
.pagehero .sub.welcome { color: #d2c6a6; font-size: 19px; line-height: 1.75; max-width: 24em; }
/* max-width 24em：原本 34em 會一路延伸到畫面 59%，壓在遮罩變淡處的亮色校樣紙上，對比只剩 3.7:1（見 style.css .hero-svc） */
/* 編譯者頁（10-25）：副標換成較長的內容摘要後延伸到畫面 65%，壓到右側的亮窗，實測最差 2% 只剩 4.0:1。
   收窄 24em 讓文字留在照片暗的左半邊 ⇒ 8.3:1（單點 5.1），遮罩不必動。 */
.pagehero.hero-ed .sub { max-width: 24em; }
/* 目錄頁（10-22）：這張圖的主體偏中央，34em 的副標在 1009px 寬的視窗上會延伸到畫面 74%，
   整段壓在五疊紙上。要讓它讀得到只能整片加重遮罩，紙就全暗了。改把副標收窄，字留在左半，
   最壞情況（800px 左右）只到 62%，落在 style.css .hero-toc 那組漸層驗過的範圍內。 */
.pagehero.hero-toc .sub { max-width: 22em; }
.pagehero .muted { margin: 18px 0 0; }

/* ---------- 無圖頁首（editor）：同一套字級與收尾，淺底配色 ----------
   以諾 10-16 裁定：編譯者頁先不補主視覺圖，只把頁首放大到和另外兩頁一致；
   之後有合適的圖再改成橫幅，這裡的規則不必重寫。 */
.pagehead { padding: 64px 0 8px; }
.pagehead .kicker {
  margin: 0 0 16px; color: var(--sub); font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.pagehead .kicker span {
  display: inline-block; margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--rule);
  font-size: 12.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--soft); }
.pagehead h1 {
  margin: 0; font-size: clamp(40px, 5.4vw, 64px); font-weight: 800; line-height: 1.18; letter-spacing: .03em; }
.pagehead h1::after {
  content: ""; display: block; width: 76px; height: 4px; margin-top: 24px; background: var(--gold); border-radius: 2px; }
.pagehead .sub { margin: 22px 0 0; max-width: 34em; font-size: 21px; line-height: 1.6; color: var(--ink); }
.pagehead .muted { margin: 18px 0 0; }

/* ---------- 本頁目錄膠囊：稍微壓重一點，和大標成組 ---------- */
.toc { margin-top: 1.7rem; }
.toc a { font-weight: 600; color: var(--title); }
.toc a:hover, .toc a:focus-visible { border-color: var(--title); background: var(--white); }

/* ---------- 區塊大標 h2.dual ----------
   原本：中文 30px，英文灰色小字排同一行，掃過去像一行內文。
   現在：英文小標在上（加字距），中文 40px 粗體在下，底下一條細線、左端一段酒紅粗線收尾。
   markup 不動：仍是 <h2 class="dual">中文<span>ENGLISH</span></h2>，用 flex column-reverse 把 <span> 翻到上面。
   編號章 01、02…只給**帶 id 的區塊**（sources、service 這種查資料的頁，區塊都有 id）；
   編譯者頁的區塊沒有 id，自然不編號——介紹頁不是目錄，這是以諾 10-16 的裁定。 */
main#main { counter-reset: src-sec; }
.blk { margin-top: 4.2rem; scroll-margin-top: 1.5rem; }
.blk[id] { counter-increment: src-sec; }
h2.dual {
  position: relative; flex-direction: column-reverse; align-items: flex-start; gap: 8px;
  margin: 0 0 1.1rem; padding-bottom: 16px; border-bottom: 1px solid var(--rule);
  font-size: 40px; font-weight: 800; line-height: 1.25; letter-spacing: .02em; }
h2.dual::before {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 76px; height: 4px;
  background: var(--title); border-radius: 2px; }
h2.dual span {
  display: inline-flex; align-items: center; gap: .9em;
  font-size: 13px; font-weight: 700; letter-spacing: .26em; color: var(--sub); }
.blk[id] h2.dual span::before {
  content: counter(src-sec, decimal-leading-zero);
  padding: 2px 9px 2px 10px; border-radius: 3px; background: var(--title); color: var(--paper);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 1.5; }
/* 大標底下第一段當導言，字級略放大 */
h2.dual + p { font-size: 18px; line-height: 1.85; }

/* ---------- 小標 h3 ----------
   原本：瀏覽器預設 1.17em（約 20px），和內文 17px 幾乎分不出來。
   現在：24px 粗體，前面一顆金色菱形記號，上方留白拉開。 */
.blk h3 {
  position: relative; margin: 2.5rem 0 .55rem; padding-left: 22px;
  font-size: 24px; font-weight: 700; line-height: 1.35; color: var(--title); }
.blk h3::before {
  content: ""; position: absolute; left: 1px; top: .52em; width: 10px; height: 10px;
  background: var(--gold); transform: rotate(45deg); }
.blk h3 + p { margin-top: 0; }

/* ---------- 全書目錄 /enoch/contents/（以諾 10-22）----------
   ⚠ 這裡的 .toc-* 與上面的 .toc（本頁目錄膠囊）無關，只是同字首；選擇器不會互相命中。
   🔴 第二版（以諾指正）：目錄是條目，不是表格。
     ・最多兩欄，**縱向**排（columns：左欄排完才接右欄）。第一版用 grid 左右跳著填，那是表格的讀法。
     ・框線只分隔大部分（卷首／導論／正文五部分／卷末），條目不加框。
   哪幾組排兩欄由書稿決定：書稿的 ul.toc-intro／toc-main 在這裡輸出成 ul.two，卷首、卷末單欄。 */
.toc-sum {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px;
  margin: 40px 0 0; padding: 22px 28px;
  border: 1px solid var(--rule); border-top: 4px solid var(--title); background: var(--white); }
.toc-sum dl { display: flex; flex-wrap: wrap; gap: 10px 44px; margin: 0; }
.toc-sum dl > div { display: flex; align-items: baseline; gap: 12px; }
.toc-sum dt { color: var(--soft); font-size: 16px; font-weight: 600; letter-spacing: .06em; }
.toc-sum dd {
  margin: 0; color: var(--title); font-size: 38px; font-weight: 800; line-height: 1;
  font-family: "Enoch Display", "Noto Serif TC", "Source Han Serif TC", "Songti TC", serif; }
.toc-date { margin: 0 0 0 auto; color: var(--soft); font-size: 14px; }
.toc-note { margin: 12px 0 0; color: var(--soft); font-size: 14px; }

.toc-book { margin-top: 36px; }
.toc-sec { padding: 34px 0 30px; border-top: 1px solid var(--rule); scroll-margin-top: 46px; }
.toc-sec:last-child { border-bottom: 1px solid var(--rule); }
.toc-sec h3 { margin: 0 0 14px; font-size: 24px; font-weight: 700; letter-spacing: .04em; }
.toc-sec ul { margin: 0; padding: 0; list-style: none; }
.toc-sec ul + ul { margin-top: 18px; }          /* 卷首兩組之間空一段，同書稿 */
.toc-sec ul.two { columns: 2; column-gap: 56px; }
.toc-sec li { break-inside: avoid; padding: 4px 0; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.toc-sec li a { color: var(--title); }
/* 第四版（以諾 10-22）：部標題列左邊是標題＋章節範圍，右邊三個**直排欄頭**
   「導讀譯註共42條／關連經文共42條／關連文獻共20條」，各自立在底下那一欄數字的正上方。
   🔴 欄頭與數字欄共用同一組尺寸變數（字級、欄寬、分隔符間距），右緣才會逐欄對齊；
   手機只改變數，不另寫一套。 */
.toc-sec { --nf: 15px; --nw: 22px; --sm: 4.5px; }
.toc-head { display: flex; align-items: flex-end; gap: 16px; margin: 0 0 14px; }
/* 標題與章節範圍另包一層：與高的直排欄頭同列時，基線對齊會把標題推到頂端，要讓它坐在底線上 */
.toc-tl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; flex: 1 1 auto; min-width: 0; }
.toc-head h3 { margin: 0; }
.toc-head .rng { color: var(--soft); font-size: 15px; font-weight: 600; }
.toc-sec .sep { margin: 0 var(--sm); color: var(--rule); }
.vhs { display: flex; align-items: flex-end; flex: 0 0 auto; font-size: var(--nf); }
.vhs .sep { visibility: hidden; }            /* 只佔位，讓欄頭與底下的數字欄同寬同距 */
.vhs .vh {
  width: var(--nw); writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 15px; line-height: 1; letter-spacing: .1em; color: var(--soft); }   /* 與數字同級，照以諾示意圖 */
.vhs .tcy { text-combine-upright: all; font-weight: 700; color: var(--title); }   /* 42 橫躺在一格（直中橫） */
/* 三位數（導論補充註釋 113）擠進一格會窄到讀不清：逐字直立，1／1／3 由上往下 */
.vhs .up { text-orientation: upright; font-weight: 700; color: var(--title); }
/* 逐章：章號｜章名｜虛線引導｜三欄數字。數字欄固定寬、靠右，上下對得齊；0 留白但保留位置。
   單欄寬 1056px，數字離章名遠，用一條淡虛線把視線帶過去（書的目錄引導線同理）。 */
.toc-sec li.ch { display: flex; align-items: baseline; gap: 0 12px; }
.toc-sec li.ch .tn { flex: 0 0 2.2em; text-align: right; color: var(--sub); font-variant-numeric: tabular-nums; }
.toc-sec li.ch .tt { flex: 0 1 auto; min-width: 0; }
.toc-sec li.ch .dots { flex: 1 1 24px; align-self: center; height: 0; border-bottom: 1px dotted var(--rule); }
.toc-sec li.ch .nums { flex: 0 0 auto; white-space: nowrap; font-size: var(--nf); color: var(--title); font-variant-numeric: tabular-nums; }
.toc-sec li.ch .nums > span:not(.sep) { display: inline-block; width: var(--nw); text-align: right; }
/* 卷末「收錄」欄（210 條、12 份抄本（含《巨人之書》）……）：單位留在格子裡，所以比數字欄寬。
   寬度以最長的那格為準（--ww），各列靠右；直排欄頭「收錄」同寬，立在它正上方。 */
.toc-sec { --ww: 204px; }   /* 10-22 實測最長那格自然寬 201px */
.toc-sec li.ch .nums > span.w { width: var(--ww); display: inline-flex; justify-content: flex-end; align-items: baseline; }
/* 虛線引導延伸進格子、一路接到文字前面：否則「210 條」這種短格靠右後，虛線與數字之間會空一大段。
   負的左距補上 li 的 12px 欄間距，與前面那段虛線接成一條。 */
.toc-sec li.ch .nums > span.w::before {
  content: ""; flex: 1 1 auto; align-self: center; height: 0; margin: 0 12px 0 -12px;
  border-bottom: 1px dotted var(--rule);
  position: relative; top: -1px; }   /* 格子中線比前段虛線低 1–2px（瀏覽器捨入不同），交接處會出現台階；-2px 在 Edge 反而偏高 */
.vhs .vh.w { width: var(--ww); }
/* 書稿的「以諾一書正文」大標：置中，上方是分隔線，底下一小段金線收尾；緊接的第一部分不再畫線 */
.toc-mid {
  margin: 0; padding: 40px 0 26px; border-top: 1px solid var(--rule);
  text-align: center; font-size: 30px; font-weight: 800; letter-spacing: .08em; }
.toc-mid::after { content: ""; display: block; width: 64px; height: 3px; margin: 18px auto 0; background: var(--gold); border-radius: 2px; }
.toc-mid + .toc-sec { border-top: 0; padding-top: 18px; }

/* ---------- 760px 以下 ---------- */
@media (max-width: 760px) {
  .pagehero > .pagehero-b { padding-top: 56px; padding-bottom: 52px; }
  .pagehead { padding-top: 40px; }
  .pagehero .kicker span, .pagehead .kicker span { display: block; margin: 6px 0 0; padding: 0; border: 0; }
  .pagehero h1, .pagehead h1 { font-size: 38px; }
  .pagehero h1::after, .pagehead h1::after { width: 56px; margin-top: 18px; }
  .pagehero .sub, .pagehead .sub { font-size: 18px; }
  .blk { margin-top: 3.2rem; }
  h2.dual { font-size: 31px; }
  h2.dual + p { font-size: 17px; }
  .blk h3 { font-size: 21px; margin-top: 2rem; }
  .blk h3::before { width: 9px; height: 9px; }
  .toc-sum { padding: 18px 18px; gap: 10px 24px; }
  /* 三組在手機上橫排放不下，會折成「兩組＋一組」參差不齊；改成三欄、標籤疊在數字上方 */
  .toc-sum dl { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 12px 34px; }  /* 四項：兩兩一列 */
  .toc-sum dl > div { flex-direction: column; align-items: flex-start; gap: 6px; }
  .toc-sum dt { font-size: 14px; }
  .toc-sum dd { font-size: 30px; }
  .toc-date { margin-left: 0; }
  .toc-sec ul.two { columns: 1; }
  .toc-sec h3 { font-size: 21px; }
  .toc-mid { font-size: 25px; }
  /* 手機：章名自己折行，數字固定靠右；空間小，不畫虛線。
     數字欄收緊（約 115→90px）讓章名多一兩個字的寬度——只改共用變數，直排欄頭跟著同步縮。 */
  .toc-sec { --nf: 14px; --nw: 18px; --sm: 1.5px; --ww: 96px; }
  /* 收錄欄在手機上放不下「12 份抄本（含《巨人之書》）」一行：在格內折行、靠右 */
  .toc-sec li.ch .nums > span.w { display: inline-block; text-align: right; white-space: normal; line-height: 1.45; }
  .toc-sec li.ch .nums > span.w::before { display: none; }   /* 手機本來就不畫虛線 */
  .vhs .vh { font-size: 12.5px; letter-spacing: .08em; }
  .toc-sec li.ch .tt { flex: 1 1 auto; }
  .toc-sec li.ch .dots { display: none; }
  .toc-sec li.ch { gap: 0 8px; }
  .toc-sec li.ch .tn { flex-basis: 1.8em; }
}