/* ========================================
   PneumaTheorem landing page
   Top banner: bronze + dark, brand identity
   Main body:  white, learned/clean
   ======================================== */

/* ========================================
   ⚠⚠ 2026-07-30：字型改為自架

   【為何】舊版自 fonts.googleapis.com 載入字型，
     而那會把訪客 IP 傳給第三方。德國曾有相關裁判，
     而本站正要進英德法市場。
     → 自架之後，privacy.html 的 cookie 段才能說
       【無第三方請求】。在那之前不得那樣寫。

   【字型檔】assets/fonts/ 下使用 Google 的原始檔名（轉 woff2）：
     CormorantGaramond-Regular.woff2    → weight 400
     CormorantGaramond-Medium.woff2     → weight 500
     CormorantGaramond-SemiBold.woff2   → weight 600
     CormorantGaramond-Bold.woff2       → weight 700
     Montserrat-Regular.woff2           → weight 400
     Montserrat-Medium.woff2            → weight 500
     Montserrat-SemiBold.woff2          → weight 600
     Montserrat-Bold.woff2              → weight 700

   ⚠ 保留 Google 原名而非改成數字，因為原名自帶說明；
     對應關係寫在這裡即可。
   ⚠ Montserrat-Regular（400）舊 Google 請求中沒有，
     但檔案已在，一併宣告 —— 若 CSS 某處用到正常字重的
     Montserrat，不宣告會讓瀏覽器合成。
   ⚠ 【不含斜體】—— 與舊的 Google 請求一致。
     若日後需要斜體，須另下載 Italic 檔並新增 @font-face。

   ⚠⚠ 【已子集化】2026-07-30：八個檔自 1.07 MB 降至 268 KB
     （每個 28–40 KB）。以 pyftsubset 取 latin 子集。
     → 比一般估的 15–30 KB 略高，因為
       --layout-features='*' 保留了全部 OpenType 特性
       （連字、舊體數字等）。
     ⚠ 這個取捨是刻意的 —— 舊體數字一類的設定需要它們。
       若日後要再壓，可改為只保留用得到的特性，
       但需先確認哪些在用。

   【latin 子集的範圍】德文與法文的重音字全在 U+0000-00FF 內
     （ä ö ü ß é è à ç 都是），英德法市場夠用。
     ⚠ 若日後要顯示波蘭、捷克、匈牙利的客戶名，
       才需要 latin-ext。

   ⚠ 字型檔未就位時會退回 Georgia 與 Helvetica Neue
     （見下方 --font-* 的備援清單）—— 是合理的降級，
     不是壞掉。
   ======================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/CormorantGaramond-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/CormorantGaramond-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/CormorantGaramond-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Montserrat-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Montserrat-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Montserrat-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Montserrat-Bold.woff2') format('woff2');
}

:root {
  /* ⚠⚠ 2026-07-31（修正）：【本區塊是淺色值，也是舊瀏覽器的退路】。

     【問題】light-dark() 是 2024 年才進 Baseline
       （Chrome 123 / Safari 17.5 / Firefox 120）。
       在更舊的瀏覽器上，--btn-bg: light-dark(...)
       這個宣告本身合法（自訂屬性接受任意 token），
       壞的是使用端：background: var(--btn-bg) 展開成
       background: light-dark(...)，對 background 是無效值，
       整條宣告在 computed-value 階段失效。
     【實際後果】--bg 失效 → 背景透明；--border 失效 →
       border 簡寫整條失效，border-style 回到 none，
       【卡片邊框整組消失】；最要命的是 .btn 底色變透明、
       字色也失效而繼承深色 ——
       【通往 Stripe 與 PDF 的按鈕會看起來像壞掉的連結】。
       ⚠ iOS 16 的 Safari 就落在這個範圍，
         企業裡的舊 iPad 不少。

     ⚠⚠ 【寫兩行不管用】—— 自訂屬性在解析期一律合法，
       所以後宣告的一定覆蓋前者，舊瀏覽器照樣拿到
       light-dark()。正確的工具是 @supports（見下方）。

     ⚠ 這違反了【一個顏色只寫一行】的原則，
       但重複被關在一個 @supports 區塊裡、上下相鄰，
       漂移風險遠低於之前踩過的
       @media (prefers-color-scheme) 兩地分離。
     ⚠⚠ 【改顏色時兩個區塊都要改】。

     【底色不帶彩度】（Kevin）底色純灰或純白；
       顏色由【字與線】承擔。 */
  color-scheme: light dark;

  --bronze:        #B87355;
  --bronze-deep:   #8a4f3a;

  /* 深色帶（導覽列、橫幅）兩種模式共用 ——
     它們本來就是深的。 */
  --banner-bg:     #161616;
  --banner-text:   #ffffff;
  --banner-muted:  rgba(255, 255, 255, 0.70);

  /* ⚠ 內文色：近黑，【帶一點橘紅】。
     R 最高、B 最低，幅度極小 ——
     大到看得出是棕色就過了。
     不夠橘紅改 #241814，太明顯改 #1e1816。 */
  --text:          #201714;
  --text-muted:    #57504d;
  /* ⚠⚠ 2026-07-31（修正）：【只有最底層的底色不帶色】。
     前一版把所有底色都去彩度，過頭了 ——
     卡片與強調帶是【跳色】，帶一點暖調反而有層次。
     【規則】--bg 與 --footer-bg 純灰（它們是底）；
       --card-bg 與 --accent-band 可帶色。 */
  --bg:            #ffffff;
  --footer-bg:     #eaeaea;
  --card-bg:       #fdfcfc;
  /* ⚠⚠ 2026-07-31（修正）：強調帶加深。
     舊值 #f7f6f5 與 --bg 的 #ffffff 只差約 3% ——
     在一般筆電、亮環境、或色偏偏冷的面板上
     幾乎等於不存在，
     那條 box-shadow + clip-path 的滿版技巧等於白做。
     → 加深並帶一點暖調。依規則（--bg 純灰、
       --accent-band 可帶色）這是合規的。
     ⚠ 不要用 border-top / border-bottom 代替 ——
       邊框屬於元素本身的 1020px 盒子，
       而底色是靠 box-shadow 滿版出去的，
       兩者寬度對不上，會出現兩條懸在半空的短線。 */
  --accent-band:   #f2eeea;
  --border:        #e2e2e2;

  /* ⚠ 按鈕：暗色模式下底色提亮，白字對比會下降，
     故字色反過來用深色。 */
  /* ⚠⚠ 2026-07-31：按鈕底色單獨一個變數。
     【無障礙】白字在 #B87355 上只有約 3.5:1，
       而按鈕是 13px 粗體（不算 large text），
       需要 4.5:1。#8a4f3a 約 5.8:1，過關。
     ⚠ 深淺兩模式的 hover 方向相反：
       淺色時 hover 要更深，暗色時要更亮。 */
  --btn-bg:        #8a4f3a;
  --btn-text:      #ffffff;
  --btn-hover:     #6f3e2d;
  --footer-copy:   #888888;
  /* ⚠ 頁尾的不透明色塊。它是【底】，故不帶色，
     與 --bg 同一條規則。定義已移到上方一組。 */

  /* ⚠⚠ 2026-07-31：chip —— 小型深色按鈕。
     工具座的切換鈕與頁尾的條款／隱私共用同一個樣式。
     【兩種模式都是深底白字】—— 它是功能元件，
     不參與內文的深淺切換，讓它在兩種模式下都是同一個東西。 */
  --chip-bg:       #1c1c1c;
  --chip-bg-hover: #2c2c2c;
  --chip-text:     #ffffff;
  /* ⚠⚠ 2026-07-31：青銅色細線拉成變數。
     舊版同一組 rgba(184,115,85,0.55) 硬寫在三處：
     .nav 的 border-bottom、.banner 的 border-bottom、
     --chip-border。
     而它是 --bronze 【淺色模式值】的半透明版，
     不會跟著 light-dark() 走 —— 暗色模式下
     --bronze 已變成 #c98a6a，這三條線卻還是舊的。
     → 依【一個顏色只寫一行】的規則，拉出來。 */
  --bronze-rule:   rgba(184, 115, 85, 0.55);
  --chip-border:   var(--bronze-rule);
  /* ⚠ 2026-07-31：--side-veil 已刪除 —— 兩側底圖放棄。 */

  /* ⚠⚠ 2026-07-31：圖紙的陰影顏色。
     舊版硬寫 rgba(0,0,0,0.10) —— 在暗色底上
     黑色陰影等於不存在，那一行是純粹的空轉。
     → 暗色模式改為淡亮邊，讓白底圖紙浮起來。 */
  --plan-ring:     rgba(0, 0, 0, 0.10);
  /* ⚠⚠ 2026-07-31：三種寬度，而非一種。

     【問題】舊版從 hero 到 Engagement 每一區塊都是同一個
       820px、同一個白底、同一個段距 —— 縱向節奏完全平坦，
       讀了三千字視覺上像在讀同一張紙。

     【解法】不是分欄（網頁沒有紙張高度，讀者得捲到底再
       捲回來，而本站的段落是連續推進的論證），
       而是【同一頁上出現兩種寬度】：
         內文窄（720px）—— 保護行寬，約 70 字元
         卡片與三格寬（1080px）—— 製造節奏

     ⚠ 舊版 820px 扣掉 padding 約 760px，Georgia 17px
       一行接近 90 字元，比理想的 65–75 長。
       → 方向是【收窄內文】，不是拉寬或切開。 */
  --max-width:     1080px;   /* nav / banner / cards */
  --text-width:    720px;    /* prose only */
  --font-brand: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: Georgia, 'Times New Roman', serif;
  --font-accent: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* ========================================
   深淺色 —— 只在支援 light-dark() 的瀏覽器上生效
   ======================================== */
/* ⚠⚠ 2026-07-31：本區塊是【暗色值的唯一位置】。

   上方 :root 的是淺色值（也是舊瀏覽器的退路），
   這裡完整覆寫成 light-dark()。

   【為何用 @supports 而不是寫兩行】
     自訂屬性在解析期一律合法，
     兩行都會被接受而後者永遠贏 ——
     舊瀏覽器照樣拿到 light-dark()。
     @supports 是唯一能真正分支的工具。

   ⚠⚠ 【改任何顏色時，上下兩個區塊都要改】。
     它們上下相鄰是刻意的 ——
     之前踩過 @media (prefers-color-scheme) 兩地分離的坑。

   ⚠ --banner-* 與 --chip-text 不在這裡 ——
     它們兩種模式共用同一個值。 */
@supports (color: light-dark(#000, #fff)) {
  :root {
    --bronze:        light-dark(#B87355, #c98a6a);
    --bronze-deep:   light-dark(#8a4f3a, #d9a184);
    --text:          light-dark(#201714, #ece5e1);
    --text-muted:    light-dark(#57504d, #a09a97);
    --bg:            light-dark(#ffffff, #131313);
    --footer-bg:     light-dark(#eaeaea, #0e0e0e);
    --card-bg:       light-dark(#fdfcfc, #1c1a19);
    --accent-band:   light-dark(#f2eeea, #1e1c1a);
    --border:        light-dark(#e2e2e2, #333333);
    --btn-bg:        light-dark(#8a4f3a, #c98a6a);
    --btn-text:      light-dark(#ffffff, #151515);
    --btn-hover:     light-dark(#6f3e2d, #e0b295);
    --footer-copy:   light-dark(#888888, #7c7c7c);
    --chip-bg:       light-dark(#1c1c1c, #262626);
    --chip-bg-hover: light-dark(#2c2c2c, #363636);
    --bronze-rule:   light-dark(rgba(184, 115, 85, 0.55), rgba(201, 138, 106, 0.50));
    --plan-ring:     light-dark(rgba(0, 0, 0, 0.10), rgba(255, 255, 255, 0.14));
  }
}

/* ⚠⚠ 2026-07-31：原本的 @media (prefers-color-scheme: dark)
   整塊已移除。【不得再加回來】：
   暗色值只得寫在上方的 @supports 區塊裡。 */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
}

/* ⚠⚠ 2026-07-31（修正）：字級由 17px 改為 106.25%。

   【為何】px 不影響縮放，但會【忽略使用者在瀏覽器裡
     設定的預設字級】。百分比以那個設定為基準，
     16px 預設時等效 17px，而使用者調大時會跟著變。
   ⚠ 本站沒有用 rem，所以這個改動不會連鎖影響別處。
   ⚠ 歐洲採購的無障礙問卷有時會問到這一項。 */
html { font-size: 106.25%; }

/* ⚠⚠ 2026-07-31：-webkit-font-smoothing: antialiased 已移除。
   它會讓 macOS 上的文字變細 ——
   而前面正是為了 Cormorant 在深底上【視覺變細】
   才把字重從 600 提到 700。
   兩個設定在互相拉扯 —— 拿掉這一行，
   讓系統自己做平滑，襯線內文通常更好讀。
   ⚠ 這是視覺判斷 —— 兩邊各截一張圖比較再定。 */

/* ⚠ 2026-07-31：底色只給 html。
   舊的理由是兩側底圖的 body::before / ::after 用了
   負值 z-index，需要 body 透明。那組元素已刪，
   但這行留著也無害 —— html 的背景會傳遞到畫布。 */
html { background: var(--bg); }

/* ⚠⚠ 2026-07-31（修正）：選取器加上 :not([class])。

   【為何】舊版的全域 a 規則會碰到 .btn 與 .chip，
     於是那兩個元件各用了兩個 !important 來打贏它 ——
     四個 !important 全部是這條規則造成的。
   【修正】讓全域規則一開始就不要碰到元件。
   ⚠ 代價：以後【任何帶 class 的連結都要自己管顏色】。
     對元件很少的本站是劃算的，
     而且它會逼人在加新元件時想清楚樣式歸屬。

   【無障礙】連結顏色用 --bronze-deep 而非 --bronze：
     #B87355 在白底上約 3.73:1，未過 AA 的 4.5:1。
     底線滿足的是 1.4.1（不單靠顏色傳達資訊），
     而對比度是另一條 1.4.3，兩者不互相抵免。 */
a:not([class]) {
  color: var(--bronze-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ⚠⚠ hover 【不得降低對比】—— 舊值 hover 改成 --bronze，
   對比從 6.2:1 掉到 3.73:1。只拿掉底線就夠了。 */
a:not([class]):hover { text-decoration: none; }

/* ⚠⚠ 2026-07-31：全域焦點樣式。

   【問題】舊版只有 .nav-links a 與 .chip 做了 :focus-visible，
     而 .btn（border: none）與內文連結都靠瀏覽器預設外框。
   ⚠ scroll-margin-top 是為了 WCAG 2.4.11：
     固定導覽列會遮住剛取得焦點的元件。
   ⚠ :where() 的專一性為零 ——
     不會蓋掉元件自己的焦點樣式。 */
:where(a, button):focus-visible {
  outline: 2px solid var(--bronze-deep);
  outline-offset: 2px;
  scroll-margin-top: 74px;
}

/* ⚠⚠ 2026-07-31：跳過導覽的連結。
   固定導覽列有 logo 加七個連結 ——
   鍵盤使用者每次進站要按八次 Tab 才碰得到內容。
   平常隱藏，取得焦點時才出現。
   ⚠ 不用 display: none 或 visibility: hidden ——
     那兩者會讓它從 tab 順序裡消失。 */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-family: var(--font-accent);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 8px;
}

/* ========================================
   PAGE SIDES —— 已放棄
   ======================================== */
/* ⚠⚠ 2026-07-31：兩側底圖整組刪除（Kevin）。

   曾經試過六個版本：垂直尺寸線 → 等角斜線 →
   不規則斜線 → 菱形網格 → 全畫面粗梁 →
   bg-2.webp 半透明（含向內霧化遮罩）。

   【結論】兩側留白不需要填。
     內容區已經有兩種寬度、#limits 的強調帶、
     圖面區、頁尾色塊 —— 縱向節奏已經夠了。

   ⚠ assets/bg-2.webp 不再被引用。不刪檔，
     但若確定不用了，可以一併清掉。
   ⚠ 若日後又想加回來，兩個已知的坑要記得：
     （1）body 不得有不透明背景（負值 z-index）
     （2）寬度小於約 100px 時，100vw 的圖會變成
         一條被拉伸的隨機色帶 —— 需要 min-width 閘門。 */

/* ========================================
   TOP BANNER —— slim brand band
   ======================================== */
/* ⚠⚠ 2026-07-31 重做。三個問題：

   【一、它本來是名片不是橫幅】舊版裝了 email、
     創辦人姓名、公司註冊地 —— 那三項都是 footer 的內容，
     卻佔住首屏最上方。訪客第一眼看到的是聯絡方式，
     而不是這套框架在主張什麼。
     → 聯絡資訊整組移到 footer。

   【二、兩條深色帶疊在一起】nav 與 banner 的接縫處
     紋理與亮度對不上。
     → 3px 粗線改為 1px 半透明，不再像兩張貼紙黏著。
     ⚠⚠ 2026-07-31（修正）：背景圖【改回 banner-bg.webp】。
       曾短暫改用 nav 的 bg.webp 以求連續，
       但 Kevin 要原圖 —— 連續感改由【點遮罩與邊線】達成，
       不靠用同一張圖。

   【三、品牌名與 h1 撞在一起】兩個大標題連續出現，
     讀者不知道哪個是主張。
     → 品牌名降到 26px，hero 的 h1 才是首屏的重音。

   ⚠ logo 已在導覽列左上，本帶不再重複一個。 */
.banner {
  background-color: var(--banner-bg);
  background-image:
    linear-gradient(rgba(16, 16, 16, 0.58), rgba(16, 16, 16, 0.78)),
    url('assets/banner-bg.webp');
  background-size: cover;
  background-position: center;
  color: var(--banner-text);
  border-bottom: 1px solid var(--bronze-rule);
}
.banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 26px 30px 28px 30px;
  text-align: center;
}
/* ⚠⚠ 2026-07-31：字型宣告已併回元件本身。
   舊版在檔尾另有一段 FONT OVERRIDES 重複覆寫字級與顏色，
   使這裡的宣告與註解都成了謊言 —— 已解散。
   【規則】一個元素的字型、字級、顏色只寫在一處。 */
.banner-brand .brand-name {
  font-family: var(--font-brand);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--banner-text);
  line-height: 1.15;
}
.banner-brand .brand-tagline {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--banner-muted);
  margin-top: 6px;
}

/* ⚠ 2026-07-31：.banner-right / .contact-row / .contact-sub 已刪除。
   聯絡資訊搬到 footer 之後，兩個 HTML 都不再使用它們 ——
   保留只會讓下一個讀這份 CSS 的人以為還有那個結構。 */

/* ========================================
   NAV BAR —— fixed, minimal
   ======================================== */
/* ⚠⚠ 2026-07-30（第二版）：由 sticky 改為 fixed。

   【行為】position: fixed —— 永遠在最上方，內容從下方滑過。
     （第一版是 sticky，會先隨頁面捲走再吸附。）

   ⚠⚠ fixed 脫離文件流，必須給 body 一個 padding-top，
     否則導覽列會蓋住 banner 頂端。
     兩個數值【綁在一起】，改高度就要改 padding。

   【背景】bg.webp（44 KB）加一層深色遮罩。
     遮罩是必要的 —— 導覽字是白的，
     背景圖若有亮部就讀不到。

   ⚠ 檔名是【bg.webp】全小寫。2026-07-30 由 Bg.webp 改名。
     macOS 不區分大小寫，伺服器區分 —— 全小寫比較不易出錯。
     ⚠ 本檔是唯一引用處，HTML 沒有提到它。

   【按鈕】白字，選取時下方浮出一條細線（::after 的 scaleX）。
     不用 border-bottom 切換，因為那會讓文字位置跳動。 */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: #101010;
  background-image:
    linear-gradient(rgba(12, 12, 12, 0.74), rgba(12, 12, 12, 0.74)),
    url('assets/bg.webp');
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--bronze-rule);
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 30px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ========================================
   ⚠⚠ 2026-08-01：logo 改為 SVG + filter
   ======================================== */
/* 【舊狀】.nav-logo img 指向 assets/logo-3.png（黑底白標），
     而那個檔已於 2026-08-01 刪除 —— 死連結。

   【問題】ptlogo.svg 是【純黑】的。深色導覽列上看不見。

   【曾經用過 mask，已放棄】
     -webkit-mask: url('assets/ptlogo.svg') …
     ⚠⚠ 在 file:// 下【完全不顯示】——
       Chrome 與 Safari 把 file:// 的 CSS mask 外部 SVG
       當成跨來源擋掉，而且【不報錯】。
       2026-08-01 實際發生過：導覽列 logo 一片空白。
     ⚠ 上線後（https）mask 會正常 ——
       但【本機看不到的東西不能用】。

   【現行】<img> 加 filter：
     brightness(0) 先把所有非透明像素壓成黑，
     invert(1) 再翻成白。alpha 不受影響。
     → 【不管原圖是什麼顏色，結果都是純白】。

   ⚠ 好處一：file:// 下正常，支援度遠大於 mask。
   ⚠ 好處二：<img> 有 alt，無障礙比 <span> 好。
   ⚠ 代價：只能給白（或黑），給不了青銅色。
     導覽列只需要白的，所以不是問題。
     ⚠ 若日後真的要青銅色 logo，那時再回來看 mask，
       而且要在【已上線的網址】上驗，不是本機。 */
.nav-logo img {
  height: 28px;
  width: auto;
  display: block;
  /* ⚠⚠ 導覽列的 logo 【永遠是白的】。
     導覽列本身兩種模式都是深的（#101010 加遮罩），
     所以標誌不參與深淺色切換。 */
  filter: brightness(0) invert(1);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: nowrap;
}
.nav-links a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffffff;
  text-decoration: none;
  opacity: 0.80;
  transition: opacity 0.15s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible {
  opacity: 1;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

/* ⚠⚠ fixed 導覽列的高度補償。與 .nav-inner 的 height 同步。 */
body { padding-top: 54px; }

/* 錨點跳轉時的上方預留。
   ⚠ 須大於導覽列高度（54px）。 */
section[id] { scroll-margin-top: 74px; }
/* ⚠⚠ 2026-07-31：#top 是 <header> 不是 <section>，
   不在上一條規則的選取器裡，所以沒有 scroll-margin。
   而 body 有 padding-top: 54px，於是點 logo 跳到 #top
   只捲到 54px 而不是頁首 —— 看起來像沒反應。
   → 給它 60px 的 scroll-margin，落點回到 0。 */
#top { scroll-margin-top: 60px; }
html { scroll-behavior: smooth; }

/* ⚠⚠ 2026-07-31：尊重【減少動畫】的系統設定。

   【為何】平滑捲動與過場動畫對前庭功能障礙者
     可能引發暈眩與生理不適。
     作業系統有一個【減少動態】開關，該尊重它。
   ⚠ 不是全部關掉動畫，而是縮到實質為零 ——
     transition 仍存在，只是瞬間完成，
     這樣不會讓依賴 transitionend 的程式壞掉。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   MAIN CONTENT
   ======================================== */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px 30px 80px 30px;
}

/* ⚠⚠ 2026-07-31（修正）：散文欄 720px，【置中】。

   【前一版的錯】欄寬收到 720 卻靠左對齊，
     放在 1080 的容器裡 —— 文字全部貼左、右邊一片空，
     點進來左右重量不均。
   【修正】margin 左右 auto。欄寬不變，但在頁面上對稱。
   ⚠ 代價是段落與卡片的左緣不齊（段落內縮約 180px）。
     那比右邊一片空白好 —— 內縮是有意圖的，
     貼左看起來像排版壞掉。 */
section > h2,
section > p,
section > ul,
.hero h1,
.hero .lede {
  max-width: var(--text-width);
  margin-left: auto;
  margin-right: auto;
}

section { margin-top: 60px; }
section:first-child { margin-top: 0; }
/* ⚠ 字型、字級、顏色全部寫在這裡，不另設覆寫段。 */
section h2 {
  font-family: var(--font-brand);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 auto 22px auto;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

/* ⚠⚠ 2026-07-31：h1 與 h2 的顏色是【近黑】，不是 bronze。
   舊版這裡寫 bronze-deep、檔尾又覆寫成 --text，
   實際渲染是後者 —— 現已合併。
   【理由】全頁全棕色單調，且暖褐帶古典聯想，
     與主題錯位。bronze 只留給小 accent 與 CTA。
   ⚠ h3（.doc-card / .grid-item）保留 bronze-deep，
     否則全頁沒有色彩層次。 */
.hero h1 {
  font-family: var(--font-brand);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 auto 24px auto;
  color: var(--text);
}
/* ⚠ 2026-07-31：hero 的段落也要置中對齊，
   否則 h1 與內文的左緣對不上。
   ⚠ 文字本身【靠左】，只是欄位置中。 */
.hero > p {
  max-width: var(--text-width);
  margin-left: auto;
  margin-right: auto;
}
.hero .lede {
  font-size: 19px;
  line-height: 1.55;
  margin-bottom: 22px;
}
.hero p { margin-bottom: 18px; }

/* ----- Documents ----- */
/* ⚠⚠ 2026-07-31：寬螢幕改為兩欄。

   【理由】五張結構完全相同的卡片垂直堆疊，
     高度相近、都是 label + h3 + sub + meta + 按鈕 ——
     全站最單調的地方。
   【做法】兩欄，而【最後一張（付費版）跨兩欄】——
     跨欄本身就是強調，不需另外加樣式。
   ⚠ h2 也要跨兩欄，否則標題會被擠到左半邊。 */
@media (min-width: 900px) {
  .documents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
  .documents > h2 { grid-column: 1 / -1; }
  .documents > .doc-card { margin-bottom: 0; }
  /* ⚠⚠ 2026-07-31：:last-of-type → :last-child。
     舊值比對的是【最後一個 div 兄弟】—— 現在剛好成立，
     但哪天在卡片後面加一個 <div class="note">，
     跨欄就會跳到那個 note 上（而它沒有 .doc-card，
     於是付費卡片失去跨欄）。
     這與浮水印那個【剛好成立而非設計成立】是同一類問題。 */
  .documents > .doc-card:last-child { grid-column: 1 / -1; }
}

.doc-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 22px 26px;
  margin-bottom: 20px;
  background: var(--card-bg);
}
/* ⚠ 小標籤：字型、字級、顏色全寫在這裡。
   ⚠⚠ 顏色用 --bronze-deep 而非 --bronze：
     #B87355 在白底上對比約 3.7:1，未過 WCAG AA 的 4.5:1，
     而本元素是 12px 粗體，小字級更需要對比。
     #8a4f3a 約 6.2:1，過關。 */
.doc-label {
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--bronze-deep);
  margin-bottom: 6px;
}
.doc-card h3 {
  font-family: var(--font-brand);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 4px 0;
  line-height: 1.3;
  color: var(--bronze-deep);
}
.doc-sub {
  margin: 0 0 8px 0;
  font-style: italic;
  color: var(--text-muted);
}
.doc-meta {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 14px 0;
}
.doc-pending {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
}

.btn {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-text);
  text-decoration: none;
  padding: 11px 24px;
  border-radius: 3px;
  font-family: var(--font-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: background 0.15s ease;
  border: none;
}
.btn:hover { background: var(--btn-hover); }

/* ----- Three application domains ----- */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px) {
  .grid { grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
}
.grid-item {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 20px;
  background: var(--card-bg);
}
.grid-item h3 {
  font-family: var(--font-brand);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 10px 0;
  color: var(--bronze-deep);
}
.grid-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

/* ----- Engagement ----- */
.engagement p { margin-bottom: 16px; }

/* ========================================
   SECTION ACCENT —— “Where the framework stops”
   ======================================== */
/* ⚠⚠ 2026-07-31 新增。

   【為何只挑這一節】它是全站唯一在講【限制】的區塊。
     視覺上獨立出來，在內容上反而顯得坦率 ——
     而坦率正是這個框架在賣的東西。
   【做法】box-shadow + clip-path 的 full-bleed 技巧：
     底色向兩側滿出到視窗邊緣，而內容維持原寬度。
     → 不需要改 HTML 結構。
   ⚠ 若日後加了水平捲動的元素，clip-path 可能要重評。 */
#limits {
  background: var(--accent-band);
  padding: 46px 0 48px 0;
  box-shadow: 0 0 0 100vmax var(--accent-band);
  clip-path: inset(0 -100vmax);
}

/* ========================================
   SITE PLAN —— 圖面區
   ======================================== */
/* ⚠⚠ 2026-07-31 新增（骨架，圖尚未就位）。

   【為何放在 hero 之後】hero 講完「從圖面讀出答案」，
     緊接著就給一張圖面。全站唯一的視覺焦點。

   【白底不去背】技術圖面的白底本身是對的 ——
     它讀起來就是一張圖紙。
     ⚠⚠ 更要緊的理由：這張圖必須與【交付物裡的那張一致】。
       為了暗色模式重新配色會產生同一張圖的兩個版本，
       而圖例的顏色是【有語意的】（座位／避難節點／連結）。
     → 兩種模式下都是白底圖紙。
     ⚠ 2026-07-31：陰影顏色已改為 --plan-ring，
       暗色模式是淡亮邊而非黑色陰影（舊值在深底上等於空轉）。

   ⚠ 圖滿版寬（1080），而說明文字維持 720 ——
     與全站的兩種寬度一致。 */
/* ⚠⚠ 2026-07-31（二）：圖已改為【橫式】，寬度放回滿版。

   【經過】舊版 379.66 × 462.12（直式，比例 0.82），
     滿版 1020px 時圖高約 1241px ——
     而扣掉導覽列後的可視高度約 750–850px，
     核心圖面沒有任何一刻是完整可見的。
     曾縮到 580px 救急，但那個寬度下標註只有 7–8px 高，
     而且圖比內文（720）還窄，讀起來像插頁。

   【根本解】修了 site_plan.tex：圖例由平面圖下方
     兩欄改為右側單欄，比例尺上移。
     新尺寸 553.98 × 397.58（橫式，比例 1.393）。
     → 滿版 1020px 時圖高約 732px，加內距約 768px。
       比舊版少了四成，且標註大得多。
     ⚠ 交付 PDF 裡的那一張也一併改善了。

   【寬度】920px（約為內容容器 1020 的 90%）。
     ⚠⚠ 2026-07-31（三）：曾短暫回到滿版 1020，
       但那樣圖與下方的卡片【寬度完全一樣】，
       讀起來像另一張卡片而不像一張圖紙 ——
       相等的寬度會抹掉層次。
     → 縮 10% 並置中，圖紙就【浮】在內容寬度之上。
     ⚠ 這確實引入了第三種寬度（720 / 920 / 1020），
       是刻意的例外：圖紙是單一物件，
       不屬於內文也不屬於卡片網格。
     → 920px 時圖高約 660px，加內距約 696px ——
       比滿版更容易進得了一個畫面。

   ⚠ 【Open the drawing】連結是想細看時的出口。 */
.plan-figure {
  max-width: 920px;
  margin: 34px auto 0 auto;
  padding: 0;
}
/* ⚠⚠ 2026-07-31：圖紙加【浮水印】與最低限度的複製阻力。

   【防護的極限】這些只擋隨手右鍵存檔與截圖裁切。
     會去解包的人照樣拿得到 SVG —— 那是既定事實，
     不值得為它犧牲可用性。
   【真正有用的是浮水印】它在圖上，截圖會一起帶走。

   ⚠ ::after 而非插在 HTML 裡：浮水印是呈現層的事，
     不應該進文件結構，也不應該被螢幕閱讀器念出來。
   ⚠ pointer-events: none 加在圖上 —— 右鍵選單拿不到它；
     同時也避免浮水印擋到選取。

   ⚠⚠ 浮水印用 favicon-512.png（圓外透明）。
     舊版用 logo.png —— 它有白底，而圖紙底色恰好也是
     #ffffff，所以看不出來。那是【剛好成立】而非
     【設計成立】—— .plan-sheet 的底色一改就會冒出方塊。 */
.plan-sheet {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 18px;
  box-shadow: 0 2px 18px var(--plan-ring);
}
.plan-sheet::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/ptlogo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34%;
  opacity: 0.07;
  pointer-events: none;
}
/* ⚠⚠ 2026-07-31：圖需要 aspect-ratio，否則載入前
   瀏覽器留不住版位，整塊內容會在載入瞬間往下跳（CLS）。
   數值取自 SVG 的 viewBox：553.98 × 397.58 pt（橫式）。
   ⚠⚠ 換圖時【這兩個數字必須跟著改】——
     對不上的話，CLS 會反過來出現（預留了錯的版位）。 */
.plan-sheet img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 553.98 / 397.58;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* ⚠ 佔位階段已結束（2026-07-31）：site_plan.svg 已就位。
   .plan-placeholder 的規則已移除。 */
/* ⚠ 2026-07-31：圖說靠左，寬度收到 720。
   四行的文字置中時每行起點都不同，
   眼睛要重新找行首 —— 比靠左費力。
   ⚠ 圖已回到滿版 1020，而圖說是散文 ——
     收到 720 保護行寬，與全站一致。 */
.plan-figure figcaption {
  max-width: var(--text-width);
  margin: 16px 0 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: left;
}

/* ⚠ 看大圖的出口。
   圖縮到 580px 後實際寬約 544px，
   而圖上的標註在那個寬度下只有 7–8px 高。
   而 pointer-events: none 把右鍵與點擊都關掉了 ——
   沒有這一行，想細看的人沒有任何一條路。
   ⚠ 這不削弱複製阻力 —— SVG 的網址本來就在
     <img src> 裡，看原始碼就拿得到。
     這一行改變的是【邀請】不是【防護】。 */
.plan-open {
  margin: 10px 0 0 0;
  font-size: 14px;
}

/* 三個編號要點 —— 告訴讀者你在圖上做了什麼。 */
.plan-points {
  list-style: none;
  padding: 0;
  margin: 30px 0 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 820px) {
  .plan-points { grid-template-columns: repeat(3, 1fr); gap: 26px; }
}
.plan-points li {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  font-size: 15px;
  line-height: 1.55;
}
.plan-points .num {
  display: block;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.6px;
  color: var(--bronze-deep);
  margin-bottom: 6px;
}

/* ========================================
   CHIP —— 小型深色按鈕
   ======================================== */
/* ⚠⚠ 2026-07-31 新增。
   用於：右下角工具座的切換鈕、頁尾的條款與隱私。
   【一致性】這些都是【功能入口】而非內文連結，
     所以長相一樣、不隨深淺色改變。
   ⚠ 舊版工具座的樣式寫在 inline，現已搬進這裡 ——
     因為現在不只一個按鈕了。 */
.chip {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid var(--chip-border);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chip:hover,
.chip:focus-visible {
  background: var(--chip-bg-hover);
  border-color: var(--bronze);
  color: var(--chip-text);
}

/* 工具座（右下角）。日後加客服等按鈕就放進來。 */
.pt-dock {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

/* 頁尾的兩顆 chip，置中並排 —— 左右對稱。 */
.footer-chips {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 6px 0;
  flex-wrap: wrap;
}

/* ========================================
   FOOTER
   ======================================== */
/* ⚠⚠ 2026-07-31：改為【不透明色塊】，並加底部留白。

   【問題一】拉到底時頁尾完全貼地，沒有呼吸空間。
     → padding-bottom 56px。

   【問題二】頁尾透明，兩側的斜線會穿過去 ——
     頁面沒有「結束了」的訊號。
     → 給不透明底色，而且因為 <footer> 在 <main> 之外、
       沒有 max-width，色塊自然滿版 —— 視覺上是一道地基。

   ⚠ .footer-inner 才給 max-width，否則文字會拉到螢幕兩邊。
   ⚠ 右下角的工具座按鈕會浮在頁尾上 —— 那是正常的，
     它是 fixed。若遮到文字，加 padding-bottom 即可。 */
footer {
  margin-top: 90px;
  padding: 36px 30px 56px 30px;
  border-top: 1px solid var(--border);
  background: var(--footer-bg);
}
/* ⚠ 2026-07-31：頁尾置中，與橫幅、hero 同一個軸。 */
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
}

/* ⚠⚠ 2026-07-31：公司法定名稱用【品牌字體】。

   【問題】<strong> 預設是 Georgia 粗體，
     而橫幅的品牌名是 Cormorant ——
     同一個公司名在同一頁上兩種字體。
     頁尾變成色塊之後就更明顯。

   【依據】LaTeX 樹的 \PT 巨集是用 \brandfont
     （Cormorant Garamond）渲染的。
     【公司法定名稱永遠是品牌字體】——
     網站與文件要一致。

   ⚠ 需要 font-feature-settings，否則 Th 連字不會出現；
     而 Th 連字是品牌識別的一部分。 */
.footer-inner strong {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--text);
  font-feature-settings: "liga" 1, "dlig" 1, "kern" 1;
}
.footer-line {
  margin: 4px 0;
}
/* ⚠ .footer-line 裡的 a 本身沒有 class，
   所以 a:not([class]) 也會碰到它 ——
   兩者專一性相同（0,1,1），本規則在後面所以贏。 */
.footer-line a { color: var(--bronze-deep); }

.footer-copyright {
  margin-top: 22px;
  font-size: 12px;
  color: var(--footer-copy);
  text-align: center;
}

/* ========================================
   NAV —— 窄螢幕橫向滑動
   ======================================== */
/* ⚠⚠ 2026-07-31（修正）：斷點由 700px 拉到 900px。

   【問題】加了第七個項目（Plan）之後，
     七個連結加字距約 490px、六個 26px 間隙 156px，
     再加 logo 與 34px 間隙 —— 接近 780px。
     扣掉 .nav-inner 左右各 30px 內距，
     要到約 840px 的視窗才容得下。
   【舊版的洞】橫向捲動那組規則掛在 max-width: 700px，
     於是【701–860 這個區間兩邊都不管】：
     nowrap 不換行、overflow-x 沒開，
     內容直接撐出去，可能連帶讓整頁出現水平捲軸。
     ⚠ 小尺寸 iPad 橫向、分割視窗、
       以及沒全螢幕的桌機瀏覽器都落在這個區間。

   ⚠⚠ 【不能直接把整個 700px 區塊改成 900】——
     那裡還有手機字級與內距，
     900px 就套用手機字級是錯的。
     → 導覽規則單獨分出來。 */
@media (max-width: 900px) {
  .nav-inner {
    padding: 0 18px;
    gap: 14px;
  }
  /* ⚠ 2026-08-01：回到 <img>（mask 在 file:// 下不顯示）。 */
  .nav-logo img { height: 24px; }
  /* ⚠ 不換行，改為【橫向滑動】。
     換行會讓 fixed 導覽列變高，
     而 body 的 padding-top 會對不上。
     ⚠ 右緣漸層遮罩是可滑動的提示 ——
       沒有它，使用者不知道右邊還有項目。 */
  .nav-links {
    position: relative;
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    font-size: 10.5px;
    letter-spacing: 1px;
  }
}

/* ========================================
   MOBILE TWEAKS
   ======================================== */
@media (max-width: 700px) {
  /* ⚠ 2026-07-31：導覽規則已移至上方的 900px 區塊。
     這裡只留真正屬於手機的字級與內距。 */

  /* ⚠ 2026-07-31：banner 已改為單欄置中，
     舊的 flex-direction / text-align 規則不再適用。 */
  .banner-inner {
    padding: 20px 22px 22px 22px;
  }

  main { padding: 40px 22px 60px 22px; }
  /* ⚠⚠ 2026-07-31：手機字級已合併至此。
     舊版這裡與檔尾各有一組（hero h1 寫 28px 與 30px，
     section h2 寫 20px 與 22px），實際生效的是檔尾那組。
     → 取實際生效的值，別處不再重複。 */
  .banner-brand .brand-name { font-size: 22px; }
  .hero h1 { font-size: 30px; }
  section h2 { font-size: 22px; }
  .hero .lede { font-size: 17px; }
  .doc-card { padding: 18px 20px; }
}

/* ========================================
   TYPOGRAPHY FEATURES
   ======================================== */
/* ⚠⚠ 2026-07-31：原本的 FONT OVERRIDES 整段已解散。

   【為何】那一段本來只打算放 Google Fonts 相關的
     font-family 覆寫，但後來連字級與顏色也寫進去，
     於是上方各元件的宣告與註解全部失準 ——
     改了上面沒反應，而原因在一百行之外。
   【現行規則】一個元素的字型、字級、顏色只寫在一處：
     它自己的區塊裡。
   ⚠ 本段【只】處理 OpenType 特性，不得再放其他宣告。

   ⚠⚠ dlig 【必須保留】（Kevin 2026-07-31）。
     Cormorant 的 Th 連字是品牌識別的一部分，
     不是渲染錯誤。
   ⚠ text-rendering: optimizeLegibility 已移除 ——
     部分瀏覽器有已知的渲染與效能問題，
     而 feature settings 已明確宣告，那一行是冗餘的。 */
.hero h1,
section h2,
.doc-card h3,
.grid-item h3,
.banner-brand .brand-name,
.brand-name,
.doc-sub {
  font-feature-settings:
    "liga" 1,
    "dlig" 1,
    "kern" 1,
    "calt" 1;
  -webkit-font-feature-settings: "liga", "dlig", "kern";
}