/* ═══════════════════════════════════════════════════════════════
   筆記（/notes/）排版層 — 消費 tokens.css，讓筆記跟官網同一個聲音
   2026-08-27 Mate-2・Strider：「文字大小與級距也要再跟官網做個呼應」

   🔴 為什麼是「覆蓋層」而不是重寫 19 篇的內嵌 CSS：
      那 19 篇每篇都有自己的一份、實測 16 種不同雜湊，一次全改風險太高，
      而且 4號 正要在同一批檔案上做內容瘦身。所以這層**排在內嵌樣式之後載入**，
      只接管字級／字重／行高／節奏，其餘一律不碰。
      內嵌 CSS 從今天起是**待減的舊帳**，不是可以繼續長大的地方。

   🔑 這層真正在治的是 4號 點出來的那句：
      「手機難讀的主因常常不是字多，是段落太長」——實測筆記內頁最長段落 132 字、
      段距有 4 種（14/20/0/22）＝沒有節奏。所以下面把節奏統一，比刪字更有效。
   ═══════════════════════════════════════════════════════════════ */

/* ── 標題：改成首頁那種「大而細」的聲音（原本是小而粗 26px/900）── */
article.wrap h1{
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin-bottom: 0.5em;
}
article.wrap h2{
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin-top: var(--sp-section);
  margin-bottom: 0.6em;
}
article.wrap h3{
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  margin-top: var(--sp-block);
  margin-bottom: 0.5em;
}

/* ── 正文與節奏：一種段距，不要四種 ── */
article.wrap p,
article.wrap li{
  font-family: var(--font-body);
  font-size: var(--fs-read);
  line-height: var(--lh-read);
}
article.wrap p{ margin: 0 0 var(--sp-p); }
article.wrap p:last-child{ margin-bottom: 0; }
article.wrap ul,
article.wrap ol{ margin: 0 0 var(--sp-p); padding-left: 1.4em; }
article.wrap li{ margin-bottom: 0.5em; }

/* ── 行長：中文一行超過 20 字就開始難讀 ── */
article.wrap{ max-width: var(--measure); }

/* ── 導言與解答區 ── */
article.wrap .lead{ font-size: var(--fs-lead); line-height: var(--lh-body); }
article.wrap .answer{ margin: var(--sp-block) 0; }
article.wrap .answer p{ font-size: var(--fs-read); line-height: var(--lh-read); }
article.wrap .answer .tag{ font-size: var(--fs-meta); }

/* ── meta 類 ── */
article.wrap .meta-line,
article.wrap .eyebrow,
article.wrap .foot{ font-size: var(--fs-meta); }
article.wrap .bio{ font-size: var(--fs-small); line-height: var(--lh-body); }

/* ── 孤兒字：段落用 防孤行.py 焊尾（只吃 p/li/td/figcaption），
      div 類的單行摘要（.subq/.q/.flow-title）它碰不到 ⇒ 交給瀏覽器自己平衡斷行。
      text-wrap 不支援的舊瀏覽器會直接忽略，不會壞版。 ── */
article.wrap .subq,
article.wrap .q,
article.wrap .flow-title,
article.wrap .bigquote{ text-wrap: balance; }
article.wrap p{ text-wrap: pretty; }

/* ── 🔴 FAQ 標題：flex 撞焊詞（2026-08-27 實撞、我自己造成的）──
   `.faq summary` 原本是 display:flex（為了用 space-between 把「＋」推到右邊）。
   我跑焊詞器之後，塞進去的 <span class="nb"> **每一個都變成獨立的 flex item**，
   各自獨立斷行 ⇒ 實測「的、會⏎不⏎會⏎被⏎拿⏎走？」幾乎逐字換行。
   這就是 memory feedback_cjk_linebreak_ironlaw 那條「CJK 撞 flex」的變形。
   ⇒ 改回 block 讓文字正常流動，「＋」用絕對定位釘在右邊，視覺不變。 */
article.wrap .faq summary{
  display: block;
  position: relative;
  padding-right: 1.6em;
}
article.wrap .faq summary::after{
  position: absolute;
  right: 0;
  top: 18px;
}
article.wrap .faq details[open] summary::after{ top: 18px; }

/* ── 標題防孤兒字：balance 就是為標題設計的（讓瀏覽器把各行拉齊，末行不會只剩一字）。
      防孤行.py 只吃 p/li/td/figcaption，碰不到 h1/h2/h3。 ── */
article.wrap h1,
article.wrap h2,
article.wrap h3{ text-wrap: balance; }

/* ── 筆記列表頁的分類標題：內嵌 CSS 的選擇器權重比 `article.wrap h2` 高，
      所以上面那條沒吃到（實測仍是 23px/900/Noto Serif TC）。這裡指名它。 ── */
article.wrap .catblock .ctitle,
article.wrap h2.ctitle{
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}