/* =====================================================================
   燼與痕 — 與德希達《Mal d'archive》的在地對話
   視覺系統 style.css  v2.0「焦夜公文」（Nocturne × Bureau of Traces）

   概念：從火場裡搶救出來的公文。
   整站是燒過的檔案室之夜（焦黑底、餘燼光、幽靈法文字），
   內容是一張張攤在黑暗中的公文紙、索引卡與解密戳記。
   arkheîon 本來就是官署——德希達被歸檔在他批判的官僚美學裡。

   雙重語境規則：
   · 「暗語境」＝直接寫在焦黑底上的字（hero、導言、章節導讀正文）
   · 「紙語境」＝公文紙元件上的字（.sheet、.chapter-card、.principle、
     .trilingual-block、.terms-table、.questions li、.callout）
   元件樣式已各自處理兩種語境，頁面作者不需手動切換。

   無障礙:對比皆過 WCAG AA、語意化、可鍵盤操作、respect reduced-motion
   ===================================================================== */

/* ---------- 變數 ---------- */
:root {
  /* 焦夜（暗語境） */
  --char:      #141110; /* 焦黑底 */
  --char-2:    #1d1916; /* 碳化面板 */
  --char-3:    #28211b; /* 碳化邊 */
  --ash-text:  #d9d1c0; /* 灰燼字 — 暗底主文 */
  --ash-dim:   #9a9082; /* 暗燼 — 暗底次要字（小字 AA ≈ 5.9:1） */
  --ember:     #d4622a; /* 餘燼 */
  --ember-hot: #f08a4b; /* 燒紅 — 暗底強調 */

  /* 公文（紙語境） */
  --paper:     #f4ecd9; /* 公文紙 */
  --paper-2:   #fbf6e8; /* 索引卡 */
  --rule:      #cdbfa2; /* 卡片橫線 */
  --red:       #b3261e; /* 公文紅框／印泥紅 */
  --red-dim:   #8f2a24; /* 印泥暗紅 */
  --ink:       #26201a; /* 紙上墨 */
  --ink-soft:  #4a4036; /* 紙上柔墨 */

  /* 三語色帶（紙語境用原色，暗語境用 glow 變體） */
  --fr-blue:   #2A3D5C; --fr-glow: #8fb0e0;
  --en-green:  #3D5C3A; --en-glow: #93c08a;
  --cn-red:    #8B2500; --cn-glow: #e08a6a;

  --maxw:       720px;
  --maxw-wide:  1040px;

  --serif: "Noto Serif TC", "Songti TC", Georgia, "Times New Roman", serif;
  --sans:  "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --gar:   "EB Garamond", "Cormorant Garamond", Garamond, Georgia, serif;
  --mono:  "IBM Plex Mono", "Courier New", monospace;

  --step--1: clamp(0.84rem, 0.80rem + 0.2vw, 0.92rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.3vw, 1.14rem);
  --step-1:  clamp(1.22rem, 1.12rem + 0.5vw, 1.42rem);
  --step-2:  clamp(1.48rem, 1.30rem + 0.9vw, 1.90rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.5vw, 2.65rem);
  --step-4:  clamp(2.25rem, 1.80rem + 2.6vw, 3.60rem);

  --shadow-sheet: 0 14px 50px rgba(0,0,0,.5);
  --ghost-word: "mal d’archive"; /* 各頁可用 body style 覆寫 */
}

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.95;
  color: var(--ash-text);
  background: var(--char);
  background-image:
    radial-gradient(ellipse 60% 40% at 82% 0%, rgba(212,98,42,.08), transparent 60%),
    radial-gradient(ellipse 50% 55% at 8% 100%, rgba(212,98,42,.05), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* 幽靈法文字：漂浮在焦黑深處的巨型字 */
body::before {
  content: var(--ghost-word);
  position: fixed; top: 16%; left: -3%; z-index: 0;
  font-family: var(--gar); font-style: italic;
  font-size: 15vw; white-space: nowrap; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212,98,42,.13);
  transform: rotate(-6deg);
  pointer-events: none; user-select: none;
  animation: smoulder 9s ease-in-out infinite alternate;
}
@keyframes smoulder {
  from { -webkit-text-stroke-color: rgba(212,98,42,.09); }
  to   { -webkit-text-stroke-color: rgba(240,138,75,.22); }
}
main, .site-header, .site-footer, .movement-nav { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ember-hot); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: #ffb07a; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ember-hot);
  outline-offset: 2px;
  border-radius: 2px;
}
::selection { background: var(--ember); color: var(--char); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- 視覺隱藏 ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 略過導覽 ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--red); color: #fff; padding: .6em 1em;
  font-family: var(--sans); border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ---------- 容器 ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }
.wrap-wide { width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding-inline: 1.25rem; }

/* =====================================================================
   頁首與導覽（暗語境：檔案盒上的燙印標籤）
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(20,17,16,.88);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--char-3);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-weight: 700; letter-spacing: .1em;
  color: var(--ash-text); text-decoration: none; font-size: var(--step-1);
}
.brand:hover { color: #fff; }
.brand .cinder-mark { flex: 0 0 auto; }
.brand small {
  display: block; font-weight: 400; font-size: .56em; letter-spacing: .06em;
  color: var(--ash-dim); margin-top: .1em;
}
.nav-links {
  display: flex; align-items: center; flex-wrap: wrap; gap: .1rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--sans); font-size: var(--step--1);
}
.nav-links a {
  display: inline-block; padding: .5em .55em; border-radius: 4px;
  color: var(--ash-dim); text-decoration: none; letter-spacing: .06em;
  transition: background .15s ease, color .15s ease, text-shadow .3s ease;
}
.nav-links a:hover { color: var(--ember-hot); text-shadow: 0 0 14px rgba(240,138,75,.55); }
.nav-links a[aria-current="page"] { background: var(--char-3); color: var(--ember-hot); }
.nav-toggle {
  display: none; appearance: none; border: 1px solid var(--char-3);
  background: var(--char-2); color: var(--ash-text); border-radius: 8px;
  width: 2.8rem; height: 2.8rem; cursor: pointer; padding: 0;
}
.nav-toggle .bar { display: block; width: 1.2rem; height: 2px; margin: .28rem auto; background: var(--ash-text); transition: .2s; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(.52rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-.52rem) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; inset: 4rem 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--char); border-bottom: 1px solid var(--char-3);
    padding: .5rem 1.25rem 1rem;
    box-shadow: 0 14px 40px rgba(0,0,0,.6);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .8em .4em; border-bottom: 1px solid var(--char-3); border-radius: 0; }
  .nav-links li:last-child a { border-bottom: 0; }
}

/* =====================================================================
   HERO（暗語境：黑暗中的標題與檔號）
   ===================================================================== */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2.5rem, 6vw, 5rem);
}
.hero-trace { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .8; filter: brightness(1.9); }
.hero .wrap { position: relative; z-index: 2; }
.eyebrow {
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .45em;
  text-transform: uppercase; color: var(--ember); margin: 0 0 1rem;
}
.hero h1 {
  font-size: var(--step-4); line-height: 1.12; margin: 0 0 .35em;
  letter-spacing: .08em; font-weight: 900;
  background: linear-gradient(115deg, var(--ash-text) 35%, var(--ember-hot) 62%, var(--ash-text) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .subtitle {
  font-family: var(--gar); font-style: italic;
  font-size: var(--step-1); color: var(--ash-dim); margin: 0 0 1.6em;
  font-weight: 400; max-width: 40ch;
}
.hero .lede { font-size: var(--step-0); max-width: 56ch; color: #bfb5a4; }
.hero .docno {
  position: absolute; right: 1.5rem; top: .5rem; z-index: 2; text-align: right;
  font-family: var(--mono); font-size: .7rem; line-height: 1.8;
  color: var(--ash-dim); letter-spacing: .08em;
}
@media (max-width: 760px) { .hero .docno { display: none; } }
.site-badge {
  display: inline-flex; align-items: center; gap: .55em; margin-top: 1.2em;
  font-family: var(--sans); font-size: var(--step--1); color: var(--ash-dim);
  background: var(--char-2); border: 1px solid var(--char-3);
  border-radius: 999px; padding: .45em 1.1em;
}
.site-badge strong { color: var(--ember-hot); }
.site-badge .dot {
  width: .55em; height: .55em; border-radius: 50%;
  background: var(--ember-hot); box-shadow: 0 0 8px rgba(240,138,75,.9);
  animation: badgepulse 3.5s ease-in-out infinite;
}
@keyframes badgepulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* =====================================================================
   通用版式（暗語境預設）
   ===================================================================== */
main { display: block; }
section { margin-block: clamp(2.5rem, 6vw, 4.5rem); }

h2, h3, h4 { font-family: var(--serif); line-height: 1.28; color: var(--ash-text); }
h2 { font-size: var(--step-3); margin: 0 0 .7em; letter-spacing: .03em; font-weight: 600; }
h3 { font-size: var(--step-2); margin: 2em 0 .6em; }
h4 { font-size: var(--step-1); margin: 1.8em 0 .5em; color: var(--ember-hot); font-weight: 500; }
p { margin: 0 0 1.15em; }
section > .wrap > p, section.wrap > p { color: #bfb5a4; }
strong { font-weight: 700; }
em { font-style: italic; }

.section-label {
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .42em;
  text-transform: uppercase; color: var(--ember); margin: 0 0 .6rem;
  display: flex; align-items: center; gap: .8rem;
}
.section-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(212,98,42,.6), transparent);
}

.lead { font-size: var(--step-1); color: var(--ash-dim); line-height: 1.75; }

blockquote {
  margin: 1.6em 0; padding: .2em 0 .2em 1.4em;
  border-left: 3px solid var(--ember);
  color: var(--ash-dim); font-style: italic;
}
blockquote cite { display: block; font-style: normal; font-family: var(--sans);
  font-size: var(--step--1); color: var(--ash-dim); margin-top: .5em; }

/* 分隔線：一道還在發紅的裂縫 */
hr.cinder {
  border: 0; height: 1px; margin: 3.2rem auto; max-width: min(86%, 880px);
  background: linear-gradient(90deg, transparent, #3a2c20 12%, var(--ember) 47%, var(--ember-hot) 52%, #3a2c20 88%, transparent);
  box-shadow: 0 0 16px rgba(212,98,42,.5);
  animation: scarbreath 6s ease-in-out infinite alternate;
}
@keyframes scarbreath {
  from { box-shadow: 0 0 10px rgba(212,98,42,.3); }
  to   { box-shadow: 0 0 22px rgba(240,138,75,.6); }
}

/* =====================================================================
   公文元素：戳記、檔號、塗黑顯影
   ===================================================================== */
/* 解密戳記：JS 加上 .stamped 時砸下來 */
.stamp {
  display: inline-block; transform: rotate(-8deg);
  font-family: var(--sans); font-weight: 900; color: var(--red);
  border: 3px double var(--red); border-radius: 6px;
  padding: .25em .85em; letter-spacing: .35em; font-size: var(--step-0);
  text-indent: .35em; /* 平衡 letter-spacing 末端 */
  mix-blend-mode: normal; opacity: .92;
  background: rgba(244,236,217,.04);
}
.stamp small {
  display: block; font-family: var(--mono); font-weight: 400;
  font-size: .55em; letter-spacing: .14em; text-indent: .14em; text-align: center;
}
/* 暗語境上的戳記用亮紅 */
.stamp.on-dark { color: #e8533f; border-color: #e8533f; }
/* 入場動畫 */
.stamp.stamp-in { opacity: 0; transform: rotate(-8deg) scale(2.4); }
.stamp.stamp-in.stamped {
  opacity: .92; transform: rotate(-8deg) scale(1);
  transition: transform .28s cubic-bezier(.2, 1.4, .4, 1), opacity .22s ease;
}

/* 檔號（mono 元資料塊） */
.docno { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; line-height: 1.8; }

/* 塗黑檔案：hover／focus／點按 顯影（解密裝置） */
.redacted {
  background: #050403; color: transparent; border-radius: 2px;
  box-shadow: 0 0 0 1px #050403;
  cursor: help; transition: color 1.1s ease, background 1.1s ease;
  text-shadow: none;
}
.redacted:hover, .redacted:focus-visible, .redacted.revealed {
  background: transparent; color: var(--ember-hot);
  box-shadow: none;
}
/* 紙語境的塗黑：顯影為印泥紅 */
.sheet .redacted:hover, .sheet .redacted:focus-visible, .sheet .redacted.revealed,
.chapter-card .redacted:hover, .principle .redacted:hover { color: var(--red); }

/* =====================================================================
   公文紙面板 .sheet（紙語境的母容器）
   ===================================================================== */
.sheet {
  position: relative;
  background: var(--paper); color: var(--ink);
  border: 2.5px solid var(--red);
  outline: 1px solid var(--red); outline-offset: 4px;
  padding: 2.2rem 2.4rem 2.4rem 3rem;
  margin-block: clamp(2.2rem, 5vw, 3.4rem);
  box-shadow: var(--shadow-sheet);
}
/* 騎縫虛線 */
.sheet::before {
  content: ""; position: absolute; left: 1rem; top: 0; bottom: 0; width: 0;
  border-left: 2px dotted #b9ab8c; pointer-events: none;
}
/* 燒焦的右上角：火舌舔過的痕跡 */
.sheet::after {
  content: ""; position: absolute; right: -6px; top: -6px; width: 88px; height: 72px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(20,17,16,.92) 18%, rgba(58,40,24,.6) 38%, rgba(139,69,19,.28) 55%, transparent 72%);
  pointer-events: none;
}
.sheet, .sheet p { color: var(--ink); }
.sheet h2, .sheet h3 { color: var(--ink); }
.sheet h4 { color: var(--red-dim); }
.sheet a { color: var(--red-dim); }
.sheet a:hover { color: var(--red); }
.sheet .lead { color: var(--ink-soft); }
.sheet blockquote { border-left-color: var(--red); color: var(--ink-soft); }
.sheet .docno { position: absolute; right: 1.4rem; top: 1.1rem; text-align: right; color: var(--red-dim); }
.sheet .section-label { color: var(--red-dim); }
.sheet .section-label::after { background: linear-gradient(90deg, rgba(179,38,30,.5), transparent); }
/* 紙面交錯微傾，像疊在桌上 */
.sheet:nth-of-type(even) { transform: rotate(.2deg); }
.sheet:nth-of-type(odd)  { transform: rotate(-.15deg); }
@media (max-width: 760px) { .sheet { padding: 1.6rem 1.3rem 1.8rem 2rem; } }

/* 公文「主旨」鍵 */
.subject-key {
  font-family: var(--sans); font-weight: 700; border: 1.5px solid var(--ink);
  padding: .05em .5em; margin-right: .8em; font-size: .85em; white-space: nowrap;
}

/* =====================================================================
   全書地圖（首頁總目）
   ===================================================================== */
.part-block { margin-block: 3rem; }
.part-head {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding-bottom: .6rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--char-3);
}
.part-head .part-no {
  font-family: var(--mono); font-weight: 700; letter-spacing: .2em;
  color: var(--ember); font-size: var(--step--1);
}
.part-head h3 { margin: 0; font-size: var(--step-2); color: var(--ash-text); }
.part-head .part-en { font-family: var(--gar); font-style: italic; color: var(--ash-dim); font-size: var(--step-0); }

.chapter-grid {
  display: grid; gap: 1.7rem 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* 章節卡：黑暗桌面上的索引卡（附標籤耳） */
.chapter-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper-2); color: var(--ink);
  background-image: repeating-linear-gradient(transparent 0 1.7em, rgba(205,191,162,.5) 1.7em calc(1.7em + 1px));
  border: 1px solid var(--rule);
  padding: 1.5rem 1.3rem 1.2rem;
  text-decoration: none;
  box-shadow: 0 10px 34px rgba(0,0,0,.45);
  transition: transform .18s ease, box-shadow .25s ease;
}
.chapter-card:hover {
  transform: translateY(-4px) rotate(-.4deg);
  box-shadow: 0 14px 44px rgba(0,0,0,.5), 0 0 36px rgba(212,98,42,.22);
}
/* 標籤耳 */
.chapter-card .ch-no {
  position: absolute; top: -1.05em; left: 1rem;
  background: var(--red); color: var(--paper);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  padding: .25em .8em; border-radius: 3px 3px 0 0;
}
.chapter-card:hover .ch-no { background: var(--ember); }
.chapter-card .ch-title { font-size: var(--step-1); line-height: 1.4; margin: 0 0 .1rem; color: var(--ink); font-weight: 700; font-family: var(--sans); }
.chapter-card .ch-fr { font-family: var(--gar); font-style: italic; font-size: var(--step--1); color: #6b5d49; }
.chapter-card .ch-desc { font-size: var(--step--1); color: var(--ink-soft); margin: .6rem 0 0; line-height: 1.75; }
.chapter-card[aria-disabled="true"] { opacity: .68; pointer-events: none; }
.chapter-card .ch-soon {
  margin-top: .7rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  color: var(--red-dim); border: 1px dashed var(--red-dim); border-radius: 3px;
  padding: .12em .7em; align-self: flex-start; transform: rotate(-2deg);
}

/* =====================================================================
   章節頁：章首（暗語境）
   ===================================================================== */
.chapter-hero {
  padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--char-3);
}
.chapter-hero .ch-kicker {
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .4em;
  text-transform: uppercase; color: var(--ember); margin: 0 0 .8rem;
}
.chapter-hero h1 {
  font-size: var(--step-3); margin: 0 0 .3em; line-height: 1.18; font-weight: 900;
  background: linear-gradient(115deg, var(--ash-text) 40%, var(--ember-hot) 70%, var(--ash-text) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chapter-hero .ch-fr-title { font-family: var(--gar); font-style: italic; font-size: var(--step-1); color: var(--ash-dim); margin: 0 0 .6em; }
.chapter-hero .ch-sub {
  font-family: var(--sans); font-size: var(--step-0); color: var(--ash-dim);
  letter-spacing: .04em; font-weight: 500;
}

/* 樂章導引（章內錨點，暗語境 sticky） */
.movement-nav {
  position: sticky; top: 4rem; z-index: 40;
  background: rgba(20,17,16,.9); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--char-3);
  font-family: var(--sans); font-size: var(--step--1);
}
.movement-nav ol {
  display: flex; flex-wrap: wrap; gap: .2rem .4rem; list-style: none;
  margin: 0; padding: .6rem 0;
}
.movement-nav a {
  display: inline-block; padding: .35em .7em; border-radius: 999px;
  color: var(--ash-dim); text-decoration: none; letter-spacing: .03em;
}
.movement-nav a:hover { color: var(--ember-hot); text-shadow: 0 0 12px rgba(240,138,75,.5); }
.movement-nav a[aria-current="true"] { background: var(--ember); color: var(--char); }

/* 樂章（通常包在 .sheet 內＝紙語境） */
.movement { scroll-margin-top: 7.5rem; }
.movement-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
/* 樂章編號：印泥紅圈（官印） */
.movement-num {
  flex: 0 0 auto; width: 2.7rem; height: 2.7rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--sans); font-weight: 900; font-size: var(--step-0);
  color: var(--red); border: 2px solid var(--red);
  transform: rotate(-6deg); opacity: .9;
}
.movement-head h2 { margin: .2rem 0 .1rem; font-size: var(--step-2); }
.movement-head .mv-en {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--red-dim);
}

/* =====================================================================
   原文詞標記（雙語境）
   ===================================================================== */
.term { font-family: var(--gar); font-style: italic; color: var(--fr-glow); white-space: nowrap; }
.zh-term { font-weight: 700; color: var(--ember-hot); }
.sheet .term, .chapter-card .term, .principle .term, .terms-table .term,
.trilingual-block .term, .questions .term, .callout .term { color: var(--fr-blue); }
.sheet .zh-term, .chapter-card .zh-term, .principle .zh-term, .callout .zh-term { color: var(--red-dim); }
.para-ref { font-family: var(--mono); font-size: .72em; color: inherit; opacity: .65; letter-spacing: .04em; vertical-align: super; }

/* 討論題綱（紙語境卡片） */
.questions { counter-reset: q; list-style: none; margin: 1.2em 0; padding: 0; }
.questions li {
  position: relative; counter-increment: q;
  background: var(--paper-2); color: var(--ink);
  background-image: repeating-linear-gradient(transparent 0 1.7em, rgba(205,191,162,.4) 1.7em calc(1.7em + 1px));
  border: 1px solid var(--rule);
  padding: 1rem 1.2rem 1rem 3.4rem; margin-bottom: .9rem;
  box-shadow: 0 8px 26px rgba(0,0,0,.35);
}
.questions li::before {
  content: counter(q); position: absolute; left: 1rem; top: 1rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--sans); font-weight: 700; font-size: .85rem;
  color: var(--red); border: 1.5px solid var(--red); transform: rotate(-6deg);
}
/* sheet 內的 questions 不需要自身陰影 */
.sheet .questions li { box-shadow: none; }

/* =====================================================================
   三語窗口：三聯單（正本／副本／存查）
   ===================================================================== */
.trilingual-block {
  margin: 1.8em 0;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.trilingual-block .tri-head {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  padding: .7rem 1.2rem; border-bottom: 2.5px solid var(--red);
  background: var(--paper);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em;
}
.trilingual-block .tri-head .tri-loc { font-weight: 700; color: var(--red-dim); letter-spacing: .12em; }
.trilingual-block .tri-head .tri-theme { color: var(--ink-soft); font-family: var(--sans); }

.tri-fr, .tri-en, .tri-cn {
  position: relative; margin: 0;
  padding: 1.05rem 1.3rem 1.05rem 1.5rem;
  border-left: 4px solid; border-bottom: 1px solid var(--rule);
}
.tri-fr { border-left-color: var(--fr-blue); font-family: var(--gar); font-size: 1.08em; line-height: 1.7; color: var(--fr-blue); font-style: italic; }
.tri-en { border-left-color: var(--en-green); font-family: Georgia, "Times New Roman", serif; line-height: 1.7; color: #2f3d2c; }
.tri-cn { border-left-color: var(--cn-red); color: var(--ink); }

.tri-label {
  display: inline-block; margin: 0 .6em .35rem 0;
  font-family: var(--mono); font-style: normal; font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; border-radius: 2px; padding: .12em .6em; color: #fff;
}
.tri-fr .tri-label { background: var(--fr-blue); }
.tri-en .tri-label { background: var(--en-green); }
.tri-cn .tri-label { background: var(--cn-red); }

.tri-note {
  padding: .85rem 1.3rem; border-top: 2.5px solid var(--red);
  background: var(--paper);
  font-family: var(--mono); font-size: .76rem; color: var(--red-dim); line-height: 1.85;
}
.tri-note .tri-note-tag { font-weight: 700; letter-spacing: .2em; margin-right: .6em; }

/* =====================================================================
   關鍵詞表（紙語境文件）
   ===================================================================== */
.terms-table {
  width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: var(--step-0);
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule);
  box-shadow: 0 10px 34px rgba(0,0,0,.4);
}
.sheet .terms-table { box-shadow: none; }
.terms-table th, .terms-table td { text-align: left; padding: .7em .9em; border-bottom: 1px solid var(--rule); vertical-align: top; }
.terms-table thead th {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
  color: var(--paper); background: var(--red); font-weight: 600;
}
.terms-table .t-fr { font-family: var(--gar); font-style: italic; color: var(--fr-blue); }
.terms-table .t-en { font-family: Georgia, serif; font-style: italic; color: var(--en-green); }
.terms-table .t-zh { font-weight: 700; color: var(--ink); white-space: nowrap; }
.terms-table .t-note { font-size: var(--step--1); color: var(--ink-soft); }
.terms-table a { color: var(--red-dim); }

/* 概念星叢 tag：暗桌上的小紙籤 */
.tag-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2em 0; }
.tag {
  font-family: var(--sans); font-size: var(--step--1); letter-spacing: .04em;
  background: var(--paper-2); color: var(--ink-soft);
  padding: .35em .9em; text-decoration: none;
  border: 1px solid var(--rule); border-radius: 2px;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  transition: transform .15s, box-shadow .2s, background .15s, color .15s;
}
.tag:nth-child(3n)   { transform: rotate(-1.2deg); }
.tag:nth-child(3n+1) { transform: rotate(.8deg); }
.tag:hover {
  background: var(--red); color: #fff; border-color: var(--red);
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 24px rgba(212,98,42,.3);
}

/* 延伸線索清單（雙語境） */
.thread-list { list-style: none; margin: 1em 0; padding: 0; }
.thread-list li { position: relative; padding-left: 1.6rem; margin-bottom: .7em; }
.thread-list li::before {
  content: ""; position: absolute; left: .15rem; top: .85em;
  width: .8rem; height: 1px; background: var(--ember);
}
.thread-list .src { font-family: var(--mono); font-size: .72rem; color: var(--ash-dim); letter-spacing: .04em; }
.sheet .thread-list .src { color: var(--ink-soft); }

/* 在地接線「不服貼」標記:文件上的燒穿處 */
.tension {
  position: relative;
  background: var(--char-2); color: var(--ash-text);
  border: 1px solid var(--char-3); border-left: 3px solid var(--ember);
  padding: 1.1rem 1.3rem; margin: 1.6em 0;
  box-shadow: inset 0 0 30px rgba(0,0,0,.55), 0 0 22px rgba(212,98,42,.14);
}
.tension p { color: var(--ash-text); }
.tension .tension-tag {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .3em;
  color: var(--ember-hot); font-weight: 700; display: block; margin-bottom: .4rem;
}
.tension a { color: var(--ember-hot); }
.tension .term { color: var(--fr-glow); }

/* 章節間 上一章／下一章（暗語境） */
.chapter-pager {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin: 3rem 0 1rem; padding-top: 1.6rem; border-top: 1px solid var(--char-3);
  font-family: var(--sans);
}
.chapter-pager a {
  flex: 1 1 220px; text-decoration: none; color: var(--ash-text);
  background: var(--char-2); border: 1px solid var(--char-3);
  padding: .9rem 1.1rem;
  transition: border-color .2s, transform .15s, box-shadow .25s;
}
.chapter-pager a:hover { border-color: var(--ember); transform: translateY(-2px); box-shadow: 0 0 28px rgba(212,98,42,.18); }
.chapter-pager .dir { display: block; font-family: var(--mono); font-size: .7rem; color: var(--ash-dim); letter-spacing: .18em; margin-bottom: .25rem; }
.chapter-pager .t { font-family: var(--serif); font-size: var(--step-0); color: var(--ember-hot); }
.chapter-pager .next { text-align: right; }

/* =====================================================================
   一般卡片／關於頁
   ===================================================================== */
.callout {
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule); border-left: 4px solid var(--red);
  padding: 1.4rem 1.6rem; margin: 1.6em 0;
  box-shadow: 0 10px 34px rgba(0,0,0,.4);
}
.callout h4 { margin-top: 0; color: var(--red-dim); }
.callout p { color: var(--ink); }
.callout a { color: var(--red-dim); }

.principle-grid {
  display: grid; gap: 1.4rem; margin: 1.8em 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* 原則卡：索引卡＋印泥紅圈編號 */
.principle {
  background: var(--paper-2); color: var(--ink);
  background-image: repeating-linear-gradient(transparent 0 1.7em, rgba(205,191,162,.4) 1.7em calc(1.7em + 1px));
  border: 1px solid var(--rule);
  padding: 1.5rem 1.4rem 1.3rem; position: relative;
  box-shadow: 0 10px 34px rgba(0,0,0,.45);
  transition: transform .18s ease;
}
.principle:nth-child(even) { transform: rotate(.35deg); }
.principle:nth-child(odd)  { transform: rotate(-.3deg); }
.principle:hover { transform: rotate(0deg) translateY(-3px); }
.principle .p-no {
  font-family: var(--sans); font-weight: 900; color: var(--red);
  width: 2.2rem; height: 2.2rem; border: 2px solid var(--red); border-radius: 50%;
  display: grid; place-items: center; font-size: var(--step-0);
  transform: rotate(-8deg); margin-bottom: .6rem; opacity: .9;
}
.principle h4 { margin: 0 0 .5rem; color: var(--ink); font-family: var(--sans); font-weight: 700; }
.principle p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.8; }
.principle a { color: var(--red-dim); }

/* 術語表頁：主題分組（紙語境 sheet 內使用） */
.glossary-group { margin-block: 2.4rem; scroll-margin-top: 6rem; }
.glossary-group > h3 {
  display: flex; align-items: baseline; gap: .8rem;
  padding-bottom: .5rem; border-bottom: 2px solid var(--rule);
}
.glossary-group > h3 .g-count { font-family: var(--mono); font-size: .72rem; color: var(--red-dim); font-weight: 400; letter-spacing: .1em; }
dl.glossary-list { margin: 1.2em 0; }
dl.glossary-list dt { font-weight: 700; margin-top: 1.2em; scroll-margin-top: 6rem; }
dl.glossary-list dt .g-fr { font-family: var(--gar); font-style: italic; color: var(--fr-blue); font-weight: 400; }
dl.glossary-list dt .g-en { font-family: Georgia, serif; font-style: italic; color: var(--en-green); font-weight: 400; }
dl.glossary-list dd { margin: .3em 0 0 0; padding-left: 1.2em; border-left: 2px solid var(--rule); color: var(--ink-soft); font-size: var(--step--1); line-height: 1.85; }

/* =====================================================================
   頁尾（暗語境，公文紅上框）
   ===================================================================== */
.site-footer {
  margin-top: clamp(3rem, 7vw, 5rem);
  background: #0e0c0b; color: #c9c1b2;
  border-top: 2.5px solid var(--red);
  position: relative;
}
.site-footer::before { /* 紅框的外線，呼應公文雙線框 */
  content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 1px;
  background: var(--red); opacity: .55;
}
.site-footer a { color: var(--ember-hot); }
.site-footer a:hover { color: #ffb07a; }
.footer-grid {
  display: grid; gap: 2rem; padding: 2.6rem 0 1.4rem;
  grid-template-columns: 1.4fr 1fr 1fr;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 1.2rem; } }
.footer-grid h5 {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ember); margin: 0 0 .6rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .4em; font-size: var(--step--1); font-family: var(--sans); }
.footer-brand { font-family: var(--sans); font-weight: 900; font-size: var(--step-1); letter-spacing: .12em; margin: 0 0 .5rem; color: var(--ash-text); }
.footer-note { font-size: var(--step--1); color: var(--ash-dim); line-height: 1.85; margin: 0; }
.license-bar {
  border-top: 1px solid #221d19;
  padding: 1.1rem 0 1.4rem;
  font-family: var(--mono); font-size: .72rem; color: #847b6d; line-height: 1.9; letter-spacing: .02em;
}
.license-bar strong { color: #b5ac9c; }

/* =====================================================================
   列印：回到純紙
   ===================================================================== */
@media print {
  .site-header, .movement-nav, .nav-toggle, .site-footer, .chapter-pager, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .sheet { box-shadow: none; }
  .redacted { background: transparent; color: #000; }
  a { color: #000; text-decoration: none; }
}
