/*
Theme Name: TCS 台北室內合唱團
Theme URI: https://www.tcschoir.org.tw/
Description: 台北室內合唱團官方網站客製主題。採「一套骨架 × 三種皮膚（只變色）」的子品牌設計系統。內含：5 角色字體系統（TASA Explorer + IBM Plex TC + Fraunces + GenYoMin + Geist Mono，中文自架 cn-font-split 切片）、CPT 完整版（製作 / 出版 / 最新消息 / 人物 58 人 / 學苑團隊）、12+ 樣板頁、5 套進場動畫。
Author: Taipei Chamber Singers
Version: 1.0.195
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: tcs
*/

/* =========================================================
   母品牌 token（骨架，全站不變）— 對齊設計稿
   ========================================================= */
:root{
  /* ===== Master palette（中性層＝母品牌） ===== */
  --ink:#1c1b19;
  --paper:#ffffff;
  --paper-2:#f3f2ef;
  --rule:rgba(28,27,25,.12);
  --rule-strong:rgba(28,27,25,.30);
  --muted:rgba(28,27,25,.56);
  --muted-2:rgba(28,27,25,.72);
  --brand:#4a4338;
  --brand-deep:#2a241c;

  /* ===== Fonts（依《補藍圖》定稿）—— 中文自架 cn-font-split 切片；拉丁 GFonts CDN =====
   * 五個角色 → 五組 stack：
   *   display  主標／h-tags：TASA Explorer + IBM Plex Sans TC
   *   subhead  副標／英文翻譯：Fraunces + 源雲明體
   *   body     內文／UI：TASA Orbiter + IBM Plex Sans TC
   *   emphasis 強調明體（歌詞／引言／樂曲解說重點）：源雲明體
   *   mono     等寬／標籤／編號：Geist Mono
   * fallback：Noto Sans TC（明體情境再 fallback 到 Noto Serif TC）
   * 舊名 alias 保留：--font-serif-tc / --font-sans-tc / --font-serif-en
   */
  --font-display:"TASA Explorer","TASA Explorer Fallback","IBM Plex Sans TC","Noto Sans TC","PingFang TC",system-ui,sans-serif;
  --font-subhead:"Fraunces","Fraunces Fallback","GenYoMin TW","Noto Serif TC",serif;
  --font-body:"TASA Orbiter","TASA Orbiter Fallback","IBM Plex Sans TC","Noto Sans TC","PingFang TC",system-ui,sans-serif;
  --font-emphasis:"GenYoMin TW","Noto Serif TC",serif;
  --font-mono:"Geist Mono",ui-monospace,"IBM Plex Sans TC","Noto Sans TC",monospace;
  /* legacy aliases — 不再新增使用，沿用舊規則的 selector 仍可解析 */
  --font-serif-tc:var(--font-display);
  --font-sans-tc:var(--font-body);
  --font-serif-en:var(--font-subhead);

  /* ===== Type scale（與 _design/styles.css 同步） ===== */
  --t-eyebrow:11px;
  --t-meta:12px;
  --t-body:15px;
  --t-body-lg:17px;
  --t-h4:clamp(18px,2.4vw,22px);     /* sub-section / card titles */
  --t-h3:clamp(22px,3.2vw,28px);     /* section titles */
  --t-h2:clamp(28px,5vw,44px);       /* major section / duo-main titles */
  --t-h1:clamp(40px,9vw,88px);       /* page hero（製作單頁 / 一般 archive）*/
  --t-display:clamp(56px,14vw,140px);/* 預留：/links 等大字底頁面，目前未使用 */

  /* ===== Font weight（mono label 字重，單一來源；eyebrow＋系列共用）===== */
  --fw-eyebrow:700;

  /* ===== Spacing scale ===== */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* ===== Layout ===== */
  --gutter:clamp(20px,5vw,56px);
  --max-w:1440px;
  --container:var(--max-w);  /* 兼容舊變數名 */

  /* ===== Radii ===== */
  --r-sm:2px;
  --r-md:4px;

  /* ===== Motion ===== */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:360ms;

  /* ===== 舊式 skin layer（保留給「中性頁裡局部套皮膚」的場景） ===== */
  --skin-bg:var(--paper);
  --skin-surface:var(--paper-2);
  --skin-fg:var(--ink);
  --skin-fg-muted:var(--muted);
  --skin-rule:var(--rule);
  --skin-accent:var(--brand);
}

/* =========================================================
   FOUT / CLS 防跳字 — webfont 未載入前用「metric 對齊的系統字」頂替，
   行盒高度與 webfont 一致 → display:swap 切換時不位移（CLS≈0）。
   數值＝用 fontTools 量各 webfont 的 hhea ascent/descent ÷ em（capsize 法）。
   size-adjust 維持 100%（保守：只對齊垂直行盒，不縮寬度，避免載入時閃寬）。
   只做拉丁標題字（TASA/Fraunces）；CJK 切片載入快＋metric 均勻＋跨系統字差異大，不另設。
   ========================================================= */
@font-face {
  font-family: "TASA Explorer Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  ascent-override: 94%; descent-override: 26%; line-gap-override: 0%;
}
@font-face {
  font-family: "TASA Orbiter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  ascent-override: 94%; descent-override: 26%; line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Times New Roman"), local("Times"), local("Georgia");
  ascent-override: 97.8%; descent-override: 25.5%; line-gap-override: 0%;
}

/* =========================================================
   三皮膚（token-swap）
   作用範圍：套在任何元素上都能在那個 scope 內換 token——
     - body.skin-early     → 整頁（製作單頁用）
     - .hero.skin-early    → 只有首頁 hero 區
     - .related-card.skin-early → 只有那張卡片
   ========================================================= */
.skin-early{    /* 早期音樂・編輯殿堂 */
  --paper:#f4efe4;
  --paper-2:#e6dfd0;
  --ink:#211c17;
  --rule:rgba(33,28,23,.14);
  --rule-strong:rgba(33,28,23,.32);
  --muted:rgba(33,28,23,.55);
  --muted-2:rgba(33,28,23,.72);
  --brand:#7a2230;
  --brand-deep:#5e1a23;
}
.skin-contemp{  /* 當代音樂・當代前衛 */
  --paper:#0b0b0b;
  --paper-2:#161616;
  --ink:#f2f2f2;
  --rule:rgba(242,242,242,.14);
  --rule-strong:rgba(242,242,242,.32);
  --muted:rgba(242,242,242,.55);
  --muted-2:rgba(242,242,242,.72);
  --brand:#e8ff43;
  --brand-deep:#c0d020;
}
.skin-academy{  /* 合唱學苑・溫潤人文 */
  --paper:#f1e9da;
  --paper-2:#e7dcc6;
  --ink:#3a322b;
  --rule:rgba(58,50,43,.18);
  --rule-strong:rgba(58,50,43,.34);
  --muted:rgba(58,50,43,.55);
  --muted-2:rgba(58,50,43,.72);
  --brand:#b0573c;
  --brand-deep:#8a3f2b;
}

/* =========================================================
   reset & base（與 _design/styles.css 對齊）
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-east-asian: traditional;
  font-synthesis: style none;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; font-family: var(--font-display); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* =========================================================
   utility / primitives
   ========================================================= */
.container,
.wrap{
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.eyebrow{
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.btn{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover{ background: transparent; color: var(--ink); }
.btn .arr{ transition: transform var(--dur) var(--ease-out); }
.btn:hover .arr{ transform: translateX(4px); }

/* striped image placeholder（沒上傳海報時的後備） */
.ph{
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--ink) 6%, transparent) 0 10px,
      color-mix(in oklab, var(--ink) 12%, transparent) 10px 20px),
    var(--paper-2);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.ph::after{
  content: attr(data-label);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  background: color-mix(in oklab, var(--paper) 80%, transparent);
  backdrop-filter: blur(2px);
}

/* 皮膚化區塊（給「中性頁裡局部套皮膚」的舊式用法；新作法直接 .skin-X 即可） */
.skinned{background:var(--paper);color:var(--ink)}

/* =========================================================
   公告列（sticky header 之上的細條，可關）
   ========================================================= */
.site-announce{
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: .06em;
  text-align: center;
}
.site-announce .wrap{ padding-block: 8px; }
.site-announce a{
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.site-announce a:hover .arr{ transform: translateX(4px); }
.site-announce .arr{ transition: transform var(--dur) var(--ease-out); }

/* =========================================================
   site header（sticky + backdrop blur，搬自 _design/styles.css）
   ========================================================= */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out), color 240ms var(--ease-out);
}
/* 首頁 hero 黑底電影感（套 skin-contemp，但中和螢光黃 brand → 反白文字）*/
.hero.skin-contemp{
  --brand: #ffffff;
  --brand-deep: #ffffff;
}
/* Header 浮在深色 hero 上方時的自適應反白（由 site-chrome.js IntersectionObserver 切換 class） */
.site-header.is-over-dark{
  background: #0b0b0b;          /* 實心黑：scroll=0 時 header 透出來的是白 body bg，半透會變灰 → 用實色 */
  border-bottom-color: rgba(242,242,242,.14);
  color: #f2f2f2;
}
.site-header.is-over-dark a{ color: #f2f2f2; }
/* 下拉子選單浮出的迷你白卡有自己的白底，文字維持深色（不繼承 header 的反白）*/
.site-header.is-over-dark .sub-menu a{ color: var(--ink); }
/* Logo 治本：SVG fill="currentColor" + .wordmark color 跟著 header；無 filter:invert hack */
.site-header.is-over-dark .wordmark{ color: #f2f2f2; }
.site-header.is-over-dark .btn-burger span{ background: #f2f2f2; }
.wordmark{ color: var(--ink); transition: color 240ms var(--ease-out); }
.wordmark-logo{ transition: color 240ms var(--ease-out); }
.site-header .row{
  /* grid 3 欄 1fr auto 1fr：nav 強制畫面正中心、不受 logo/social 寬度影響
     flex justify-content:space-between 會被 3 個 items 寬度不均擠偏 */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 80px; padding-block: 8px;
  gap: var(--s-4);
}
/* 三塊各自釘死 grid 欄位：手機 .nav-desktop display:none 後，若不明確指定欄位，
   剩下的 wordmark/nav-right 會被 grid auto-place 到 col1/col2 → 漢堡跑到畫面中間。
   明確 1/2/3 才能讓 nav-right 永遠靠右。 */
.site-header .row .wordmark { grid-column: 1; justify-self: start; }
.site-header .row .nav-desktop { grid-column: 2; justify-self: center; }
.site-header .row .nav-right { grid-column: 3; justify-self: end; }
.wordmark{ display: flex; align-items: center; gap: 10px; line-height: 1; text-decoration: none; color: inherit; }
.wordmark-logo{ height: 26px; width: auto; display: block; }
.wordmark .tc{ font-family: var(--font-serif-tc); font-size: var(--t-body-lg); font-weight: 500; letter-spacing: .04em; }
.wordmark .en{ font-family: var(--font-serif-en); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted-2); display: none; }
@media (min-width: 720px){ .wordmark .en{ display: inline; } }

.nav-desktop{ display: none; }
@media (min-width: 1000px){
  .nav-desktop{ display: flex; align-items: center; gap: var(--s-6); }
  .nav-desktop .nav-list{ display: flex; align-items: center; gap: var(--s-6); list-style: none; padding: 0; margin: 0; }
  .nav-desktop .nav-list > li{ position: relative; }
  .nav-desktop a{
    font-size: 14px; font-weight: 500; letter-spacing: .06em;
    position: relative; padding: 6px 0; text-decoration: none; color: inherit;
    display: inline-block;
  }
  .nav-desktop a::after{
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: var(--ink); transition: right var(--dur) var(--ease-out);
  }
  .nav-desktop a:hover::after{ right: 0; }

  /* 子選單（關於 → 關於我們 / 大事紀 / 全部團隊）*/
  .nav-desktop .sub-menu{
    list-style: none; margin: 0; padding: var(--s-3) 0;
    position: absolute; top: 100%; left: -16px;
    min-width: 200px;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: 0 8px 24px rgba(28,27,25,.06);
    opacity: 0; visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 50;
  }
  .nav-desktop .menu-item-has-children:hover > .sub-menu,
  .nav-desktop .menu-item-has-children:focus-within > .sub-menu{
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .nav-desktop .sub-menu li{ display: block; }
  .nav-desktop .sub-menu a{
    display: block;
    padding: 8px 20px;
    font-size: 14px; font-weight: 400;
    white-space: nowrap;
  }
  .nav-desktop .sub-menu a::after{ display: none; }
  .nav-desktop .sub-menu a:hover{ background: var(--paper-2); color: var(--brand); }
}

.nav-right{ display: flex; align-items: center; gap: var(--s-3); }
.header-social{ display: none; align-items: center; gap: 14px; }
.header-social a{
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted-2);
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.header-social a:hover{ color: var(--ink); transform: translateY(-1px); }
@media (min-width: 760px){ .header-social{ display: inline-flex; } }

.btn-burger{ display: inline-flex; flex-direction: column; gap: 4px; padding: 10px; }
.btn-burger span{ width: 18px; height: 1.5px; background: var(--ink); transition: transform var(--dur) var(--ease-out); }
.btn-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(2.75px) rotate(45deg); }
.btn-burger[aria-expanded="true"] span:nth-child(2){ transform: translateY(-2.75px) rotate(-45deg); }
@media (min-width: 1000px){ .btn-burger{ display: none; } }

/* 行動側欄 drawer */
.drawer{
  position: fixed; inset: 80px 0 0 0;
  background: var(--paper);
  z-index: 49;
  transform: translateY(-12px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  overflow-y: auto;
}
.drawer.open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.drawer .inner{ padding: var(--s-6) var(--gutter) var(--s-8); display: grid; gap: var(--s-1); }
.drawer ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-1); }
.drawer a{
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--rule);
  font-family: var(--font-serif-tc); font-size: 28px; font-weight: 500;
  text-decoration: none; color: inherit;
}
/* drawer 子選單（mobile/tablet）— 縮排展開，不用 hover dropdown */
.drawer .sub-menu{ padding-left: var(--s-5); margin-block: 0 var(--s-3); border-left: 1px solid var(--rule); gap: 0; }
.drawer .sub-menu a{
  font-size: 18px; font-weight: 400;
  padding: var(--s-2) 0; border-bottom: 0;
  color: var(--muted-2);
}
.drawer .sub-menu a:hover{ color: var(--ink); }
.drawer .menu-item-has-children > a{ position: relative; }
.drawer .foot{ margin-top: var(--s-6); display: grid; gap: var(--s-4); }
.drawer-social{ display: flex; align-items: center; gap: var(--s-5); padding-block: var(--s-3); }
.drawer-social a{ display: inline-flex; color: var(--ink); padding: 0; border: 0; transition: color var(--dur) var(--ease-out); }
.drawer-social a:hover{ color: var(--brand); }
.drawer .meta{ font-family: var(--font-mono); font-size: var(--t-meta); color: var(--muted); letter-spacing: .04em; }

/* =========================================================
   site footer（4 欄：lockup / 瀏覽 / 服務 / 追蹤；搬自設計）
   ========================================================= */
.site-footer{
  background: var(--paper-2);
  color: var(--ink);
  padding-block: var(--s-8) var(--s-6);
  margin-top: var(--s-9);
}
.site-footer .grid{ display: grid; gap: var(--s-7); }
@media (min-width: 900px){
  .site-footer .grid{ grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-6); }
}
.site-footer .lockup .tc{ font-family: var(--font-serif-tc); font-size: 22px; font-weight: 500; }
.site-footer .footer-logo{ height: 80px; width: auto; display: block; }
.site-footer .footer-logo-link{ display: inline-block; }
.site-footer .lockup .en{ font-family: var(--font-serif-en); font-size: 13px; color: var(--muted-2); letter-spacing: .04em; margin-top: 4px; display: block; }
.site-footer .lockup p{ margin-top: var(--s-4); font-size: 13px; color: var(--muted-2); }
.site-footer h5{ font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-4); font-weight: 500; }
.site-footer ul{ list-style: none; padding: 0; margin: 0; }
.site-footer ul li{ padding-block: 6px; font-size: 14px; }
.site-footer ul li a{ text-decoration: none; color: inherit; }
.site-footer ul li a:hover{ color: var(--brand); }
.site-footer .social{ display: flex; gap: var(--s-3); margin-top: var(--s-2); }

.social-chip{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  font-size: var(--t-eyebrow); font-family: var(--font-mono); letter-spacing: .02em;
  text-decoration: none; color: inherit;
}
.social-chip:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* 頁尾社群欄三段（追蹤圖示／聆聽文字／LINE 按鈕）縱向均勻間距，取代原本 h5 小標題的撐高 */
.footer-social-stack{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
/* 頁尾「追蹤」改用 SVG 圖示（跟 header 一致，不再用兩字母 chip）*/
.site-footer .social-icons{ display: flex; gap: var(--s-3); align-items: center; }
.site-footer .social-icons a{ color: var(--muted-2); display: inline-flex; transition: color var(--dur) var(--ease-out); }
.site-footer .social-icons a:hover{ color: var(--ink); }
/* 頁尾「聆聽」改用文字連結（· 分隔），不再用 chip */
.site-footer .footer-listen{ display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: 13px; color: var(--muted-2); line-height: 1.6; }
.site-footer .footer-listen a{ color: inherit; text-decoration: none; }
.site-footer .footer-listen a:hover{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .footer-listen__sep{ color: var(--rule); }

.line-btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: #06c755; color: white;
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
}
.line-btn:hover{ background: #05b14c; }

.colophon{
  margin-top: var(--s-7); padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .06em;
  color: var(--muted);
}
.footer-credit a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover{ color: var(--brand); }

/* =========================================================
   front-page hero（首頁主打製作的大版面，套該製作的皮膚）
   ========================================================= */
.fp-hero{
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding-block: var(--s-5) var(--s-9);
  border-bottom: 1px solid var(--rule);
}

/* 主打製作 banner — 對齊 production hero 的橫式 14:5 比例 */
/* 對齊 _design 設計系統 §06：Hero 1980×744 · 2.66:1（橫式-1） */
.fp-banner{
  position: relative;
  width: 100%;
  aspect-ratio: 1980 / 744;
  background: var(--paper-2);
  overflow: hidden;
  margin-bottom: var(--s-7);
}
.fp-banner__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: top center;
}
.fp-banner .ph{
  position: absolute; inset: 0; height: 100%;
}

/* banner 下方：標題＋副標（左）／日期＋按鈕（右）*/
.fp-hero__body{
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 900px){
  .fp-hero__body{
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s-7);
    align-items: start;
  }
}
.fp-hero__body-l{ display: grid; gap: var(--s-3); }
.fp-hero__body-r{ display: grid; gap: var(--s-4); align-self: start; }
.fp-hero__en{
  font-family: var(--font-serif-en);
  font-style: italic;
  color: var(--muted-2);
  font-size: 18px;
  margin-top: -8px;
}
.fp-hero .when .venue{ font-family: var(--font-body); font-size: 13px; color: var(--muted-2); margin-top: 4px; }
.fp-hero .meta-eyebrow{
  font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .22em;
  text-transform: uppercase; color: var(--brand); margin-bottom: var(--s-4);
}
.fp-hero h1{
  font-family: var(--font-serif-tc);
  font-size: var(--t-h1);
  font-weight: 500; line-height: 1.04; letter-spacing: -.02em;
  text-wrap: pretty;
  margin-bottom: var(--s-4);
}
.fp-hero .tagline{
  font-size: var(--t-body-lg); line-height: 1.6;
  color: var(--muted-2); text-wrap: pretty;
  margin-bottom: var(--s-5);
}
.fp-hero .when{
  font-family: var(--font-mono); font-size: 13px;
  color: var(--muted); letter-spacing: .04em;
  margin-bottom: var(--s-5);
}
.fp-hero .when em{ font-style: normal; color: var(--ink); margin-right: 6px; }
.fp-hero .actions{ display: flex; gap: var(--s-3); flex-wrap: wrap; }
.fp-hero .btn-secondary{
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 12px 18px; font-size: 14px; font-weight: 500;
  border: 1px solid var(--rule-strong);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--dur) var(--ease-out);
}
.fp-hero .btn-secondary:hover{ border-color: var(--ink); }

/* 首頁額外段（簡單佔位） */
.fp-tease{
  padding-block: var(--s-9);
  text-align: center;
}
.fp-tease p{ color: var(--muted-2); font-size: var(--t-body); line-height: 1.7; margin: 0 auto; }

/* =========================================================
   首頁試聽（SoundCloud visual player）
   ========================================================= */
.fp-listen__player{
  max-width: 760px;
  margin: 0 auto;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.fp-listen__player iframe{
  width: 100%;
  display: block;
  border: 0;
}

/* =========================================================
   通用 section（首頁 + archive 共用）
   ========================================================= */
.fp-section{ padding-block: var(--s-8); border-top: 1px solid var(--rule); }
@media (min-width: 900px){ .fp-section{ padding-block: var(--s-9); } }
.fp-section__head{
  display: grid; gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.fp-section__head h2{
  font-family: var(--font-serif-tc);
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.1;
}
.fp-section__more{
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.btn-link{
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500; letter-spacing: .04em;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  text-decoration: none;
}
.btn-link:hover{ color: var(--brand); }
.btn-link .arr{ transition: transform var(--dur) var(--ease-out); }
.btn-link:hover .arr{ transform: translateX(4px); }

/* =========================================================
   .show-card —— 近期演出／archive 列表用（橫式-2 750×580）
   ========================================================= */
.fp-shows{
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 720px) { .fp-shows{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .fp-shows{ grid-template-columns: repeat(4, 1fr); } }

.show-card{
  display: grid;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease-out);
}
.show-card:hover{ transform: translateY(-3px); }
.show-card__img{
  aspect-ratio: 750 / 580;  /* 橫式-2 規格 */
  position: relative;
  background: var(--paper-2);
  overflow: hidden;
}
.show-card__img img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;   /* 置中框架，不裁切不填滿 */
}
/* 列表卡 metadata 一列：系列 · badge · 日期（不換行）*/
.show-card__meta{
  display: flex; align-items: baseline;
  gap: var(--s-3); flex-wrap: nowrap;
}
.show-card__series{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-weight: var(--fw-eyebrow);
  font-size: var(--t-eyebrow); letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.show-card__date{
  font-family: var(--font-mono);
  font-size: var(--t-meta); color: var(--muted-2);
  letter-spacing: .04em;
}
.show-card__title{
  font-family: var(--font-serif-tc);
  font-size: var(--t-h4); font-weight: 500;
  line-height: 1.3; letter-spacing: -.005em;
  text-wrap: pretty;
}
.show-card__venue{
  font-size: var(--t-meta); color: var(--muted-2);
}

/* =========================================================
   archive-production
   ========================================================= */
.prod-archive{ padding-block: var(--s-7) var(--s-9); }
.prod-archive__head{
  display: grid; gap: var(--s-3);
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.prod-archive__head h1{
  font-family: var(--font-serif-tc);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.05;
}
.prod-archive__desc{ color: var(--muted-2); font-size: var(--t-body); }
.prod-archive__empty{ color: var(--muted); padding-block: var(--s-9); text-align: center; }

.prod-archive__pagination{
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 13px;
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  justify-content: center; align-items: center;
}
.prod-archive__pagination .page-numbers{
  padding: 8px 12px;
  border: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
  transition: background var(--dur) var(--ease-out);
}
.prod-archive__pagination .page-numbers:hover{ background: var(--paper-2); }
.prod-archive__pagination .page-numbers.current{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.prod-archive__pagination .page-numbers.dots{ border: 0; color: var(--muted); padding: 8px 4px; }

/* taxonomy-series：詞彙頁額外的小裝飾 */
.prod-archive__eyebrow{
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
}
.prod-archive__count{
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--muted);
  letter-spacing: .04em;
}
.prod-archive__count code{
  background: var(--paper-2);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  color: var(--ink);
}
.prod-archive__back{
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

/* =========================================================
   page.php — 靜態頁通用樣板（關於 / 行動參與 / 場地租借 / 課程報名）
   ========================================================= */
.page-article{
  max-width: 760px;
  margin: 0 auto;
  padding-block: var(--s-7) var(--s-9);
}
.page-article__head{
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.page-article__head h1{
  font-family: var(--font-serif-tc);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.page-article__content{
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted-2);
}
.page-article__content p{ margin-bottom: var(--s-4); } /* 無 text-wrap:pretty：長 CJK 正文會被 WebKit 提前斷行造成右側留白 */
.page-article__content h2{
  font-family: var(--font-serif-tc);
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--ink);
  margin-top: var(--s-7);
  margin-bottom: var(--s-4);
  letter-spacing: -.01em;
}
.page-article__content a:not(.btn){
  color: var(--brand);
  border-bottom: 1px solid currentColor;
}
/* 內文裡的按鈕沿用全站 .btn 風格、置於獨立一行 */
.page-article__content a.btn{ margin-top: var(--s-2); }

/* =========================================================
   404 — 找不到頁面
   ========================================================= */
.err404{ padding-block: var(--s-9) var(--s-10); }
.err404__inner{ max-width: 640px; text-align: center; }
.err404__title{
  font-family: var(--font-serif-tc);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: var(--s-3) 0 var(--s-4);
}
.err404__lead{
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted-2);
  margin-bottom: var(--s-6);
}
.err404__actions{ display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }
.err404__btn--ghost{ background: transparent; color: var(--ink); }
.err404__btn--ghost:hover{ background: var(--ink); color: var(--paper); }

/* =========================================================
   archive-news — 最新消息列表
   ========================================================= */
.news-archive{ padding-block: var(--s-7) var(--s-9); }
.news-archive__head{
  display: grid; gap: var(--s-3);
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.news-archive__head h1{
  font-family: var(--font-serif-tc);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.05;
}
.news-archive__desc{ color: var(--muted-2); font-size: var(--t-body); }

.news-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.news-list > li{ border-bottom: 1px solid var(--rule); }
.news-list > li:first-child{ border-top: 1px solid var(--rule); }

.news-card{
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-5);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease-out);
}
@media (min-width: 720px){
  .news-card{
    grid-template-columns: 200px 1fr;
    gap: var(--s-6);
    align-items: start;
  }
}
.news-card:hover{ background: color-mix(in oklab, var(--brand) 4%, transparent); }
.news-card__thumb{
  aspect-ratio: 1200 / 800;  /* 橫式-2 規格 */
  position: relative;
  background: var(--paper-2);
  overflow: hidden;
}
.news-card__thumb img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: top center;
}
.news-card__meta{
  display: flex; gap: var(--s-3); align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow); letter-spacing: .18em;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.news-card__tag{
  background: var(--paper-2);
  padding: 3px 8px;
  text-transform: uppercase;
}
.news-card__title{
  font-family: var(--font-serif-tc);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: var(--s-2);
  text-wrap: pretty;
}
.news-card__summary{
  font-size: 14px;
  color: var(--muted-2);
  line-height: 1.6;
}

/* =========================================================
   single-news — 新聞單篇
   ========================================================= */
.news-single{
  max-width: 720px;
  margin: 0 auto;
  padding-block: var(--s-7) var(--s-9);
  padding-inline: var(--gutter);
}
.news-single__head{ margin-bottom: var(--s-6); }
.news-single__meta{
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-meta);
  color: var(--muted); letter-spacing: .06em;
  margin-bottom: var(--s-4);
}
.news-tag{
  background: var(--paper-2);
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.news-single__head h1{
  font-family: var(--font-serif-tc);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500; line-height: 1.15; letter-spacing: -.015em;
  margin-bottom: var(--s-4);
}
.news-single__summary{
  font-size: var(--t-body-lg);
  line-height: 1.6;
  color: var(--muted-2);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
  /* 無 text-wrap:pretty：長 CJK 摘要會被提前斷行 */
}
.news-single__hero{
  margin-bottom: var(--s-6);
  background: var(--paper-2);
}
.news-single__hero img{
  width: 100%; height: auto; display: block;
  aspect-ratio: 1200 / 800;
  object-fit: contain;
  object-position: top center;
}
.news-single__body{
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted-2);
}
.news-single__body p{ margin-bottom: var(--s-4); } /* 無 text-wrap:pretty：長 CJK 正文提前斷行 */
.news-single__body h2{
  font-family: var(--font-serif-tc);
  font-size: var(--t-h3);
  color: var(--ink);
  margin: var(--s-6) 0 var(--s-3);
}
.news-single__body a{
  color: var(--brand);
  border-bottom: 1px solid currentColor;
}
.news-single__external{
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 13px;
}
.news-single__external a{
  color: var(--brand);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.news-single__back{
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

/* =========================================================
   首頁的 news-card-compact（hero 下方 3 條最新消息）
   ========================================================= */
.fp-news-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.fp-news-list > li{ border-bottom: 1px solid var(--rule); }
.fp-news-list > li:first-child{ border-top: 1px solid var(--rule); }

.news-card-compact{
  display: block;
  padding-block: var(--s-5);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease-out);
}
.news-card-compact:hover{ background: color-mix(in oklab, var(--brand) 4%, transparent); }
.news-card-compact__meta{
  display: flex; gap: var(--s-3); align-items: center;
  font-family: var(--font-mono); font-size: var(--t-eyebrow);
  color: var(--muted); letter-spacing: .12em;
  margin-bottom: var(--s-2);
}
.news-card-compact__tag{
  background: var(--paper-2);
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.news-card-compact__title{
  font-family: var(--font-serif-tc);
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: var(--s-2);
}
.news-card-compact__summary{
  font-size: 14px;
  color: var(--muted-2);
  line-height: 1.6;
}

/* =========================================================
   出版品 — archive / single / 首頁 pub-grid
   ========================================================= */
.pub-archive{ padding-block: var(--s-7) var(--s-9); }
.pub-archive__head{
  display: grid; gap: var(--s-3);
  margin-bottom: var(--s-7);     /* 對齊 .prod-archive__head，避免兩邊 head→filter 間距不一致 */
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.pub-archive__head h1{
  font-family: var(--font-serif-tc);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.05;
}
.pub-archive__desc{ color: var(--muted-2); font-size: var(--t-body); }
.pub-archive__eyebrow{
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow); letter-spacing: .22em;
  text-transform: uppercase; color: var(--brand);
}

/* 通用 archive filter：方塊按鈕 + 超出往下換行（不用橫向卷軸）*/
.pub-filter,
.prod-archive__filter{
  display: flex; gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-7);
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .04em;
}
.pub-filter a,
.prod-archive__filter a{
  flex: 0 0 auto;
  height: 36px;                  /* 鎖死高度，不被 inherited line-height 或 content 影響 */
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  line-height: 1;
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.pub-filter a:hover,
.prod-archive__filter a:hover{ background: var(--paper-2); }
.pub-filter a.active,
.prod-archive__filter a.is-active{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* 過濾後共 N 場 的小字（給 production）*/
.prod-archive__count{
  font-family: var(--font-mono); font-size: var(--t-meta);
  color: var(--muted); letter-spacing: .04em;
  margin-bottom: var(--s-5);
}

.pub-grid{
  display: grid; gap: var(--s-6) var(--s-5);
}
@media (min-width: 600px){ .pub-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ .pub-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px){ .pub-grid{ grid-template-columns: repeat(4, 1fr); } }
.pub-grid--compact{ /* 首頁版：永遠 4 欄（桌機） */
  grid-template-columns: 1fr;
}
@media (min-width: 720px){ .pub-grid--compact{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .pub-grid--compact{ grid-template-columns: repeat(4, 1fr); } }

/* =========================================================
   首頁出版品橫向滑動列（pub-strip）
   ========================================================= */
/* 出版品橫條：自動漂移＋可手動滑/拖（JS assets/home-marquee.js 驅動真實 scrollLeft；
   內容複製兩組、捲到一組寬就回捲＝無縫循環；hover/拖曳/觸碰/聚焦暫停自動）。
   ⚠️ 改用真實捲動容器（overflow-x:auto）＝使用者可滑，取代純 CSS marquee（overflow:hidden 滑不動）。 */
.pub-strip{
  overflow-x: auto;
  overflow-y: hidden;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  padding-block: 4px var(--s-4);
  cursor: grab;
  scrollbar-width: none;              /* 隱藏捲軸：自動漂移時捲軸亂跳不好看，靠拖曳/滑動 */
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.pub-strip::-webkit-scrollbar{ display: none; }
.pub-strip.is-dragging{ cursor: grabbing; }
.pub-strip.is-dragging a{ pointer-events: none; }   /* 拖曳中不誤觸連結 */
.pub-strip__track{
  display: flex;
  gap: var(--s-4);
  width: max-content;
}

.pub-strip .pub-card{ flex: 0 0 130px; }
@media (min-width: 720px){  .pub-strip .pub-card{ flex: 0 0 150px; } }
@media (min-width: 1100px){ .pub-strip .pub-card{ flex: 0 0 160px; } }

/* 行動裝置上 hover transform 會造成滑動時觸發、不順——關掉 */
@media (hover: none) {
  .pub-strip .pub-card:hover { transform: none; }
}

.pub-card{
  display: grid; gap: var(--s-2);
  text-decoration: none; color: inherit;
  transition: transform var(--dur) var(--ease-out);
}
.pub-card:hover{ transform: translateY(-3px); }
.pub-card.is-soldout{ opacity: .8; }
.pub-card__cover{
  aspect-ratio: 1 / 1;   /* 出版品封面 1200×1200 */
  position: relative;
  background: var(--paper-2);
  overflow: hidden;
}
.pub-card__cover img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 舊：.pub-card__soldout / .pub-card__cat — 已被 .pub-card__eyebrow 取代
   保留 hidden 防殘留覆寫 */
.pub-card__soldout, .pub-card__cat { display: none; }

/* ===== 統一 eyebrow（製作/出版單頁 + 列表卡 / hero / archive 全站共用）=====
   標籤：系列 · 世界首演 · 委託創作 / 類別 · 絕版 / ... 用「·」串接 */
.prod-eyebrow,
.pub-eyebrow,
.show-card__eyebrow,
.pub-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55em;
  line-height: 1.4;
}
.prod-eyebrow .it,
.pub-eyebrow .it,
.show-card__eyebrow .it,
.pub-card__eyebrow .it { white-space: nowrap; }
.prod-eyebrow .dot,
.pub-eyebrow .dot,
.show-card__eyebrow .dot,
.pub-card__eyebrow .dot { opacity: .45; }
/* 列表卡的 eyebrow：字級對齊 token var(--t-eyebrow)（不寫死）、放在 series row 之下 */
.show-card__eyebrow,
.pub-card__eyebrow {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  color: var(--muted);
}
/* 製作列表／首頁卡片 eyebrow：badge 一律單行不換行 */
.show-card__eyebrow { flex-wrap: nowrap; white-space: nowrap; }
.pub-card__title{
  font-family: var(--font-serif-tc);
  font-size: 13px; font-weight: 500;
  line-height: 1.35; letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pub-card__price{
  font-family: var(--font-mono);
  font-size: 11px; color: var(--brand); letter-spacing: .04em;
}

/* single-publication */
.pub-single{ padding-block: var(--s-7) var(--s-9); }
.pub-single__grid{ display: grid; gap: var(--s-6); }
@media (min-width: 900px){
  .pub-single__grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--s-8);
    align-items: start;
  }
}
.pub-single__cover{
  aspect-ratio: 1 / 1;
  position: relative;
  background: var(--paper-2);
  overflow: hidden;
}
.pub-single__cover img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 舊：.pub-single__soldout / .pub-single__cat — 已被 .pub-eyebrow 取代 */
.pub-single__soldout, .pub-single__cat { display: none; }
.pub-single__info{ display: grid; gap: var(--s-4); }
.pub-single h1{
  font-family: var(--font-serif-tc);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500; line-height: 1.15; letter-spacing: -.015em;
}
.pub-single__price{
  display: flex; align-items: baseline; gap: var(--s-3);
  border-block: 1px solid var(--rule);
  padding-block: var(--s-3);
}
.pub-single__price .lbl{
  font-family: var(--font-mono); font-size: var(--t-eyebrow);
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.pub-single__price .val{
  font-family: var(--font-mono); font-size: 18px; color: var(--brand);
}
.pub-single__content{
  font-size: 16px; line-height: 1.85; color: var(--muted-2);
}
.pub-single__content p{ margin-bottom: var(--s-3); }
.pub-single__tracks{ margin-top: var(--s-5); }
.pub-single__tracks h2{
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow); letter-spacing: .22em;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: var(--s-3);
}
.pub-single__tracks ol{
  list-style: decimal-leading-zero;
  padding-left: 28px;
  display: grid; gap: var(--s-2);
}
.pub-single__tracks li{
  font-size: 14px;
  color: var(--muted-2);
  line-height: 1.6;
}
.pub-single__tracks li::marker{
  font-family: var(--font-mono); color: var(--muted);
}
.pub-single__back{
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

/* =========================================================
   學苑團隊 — archive / single / 首頁 acad-grid
   ========================================================= */
.acad-archive{ padding-block: var(--s-7) var(--s-9); }
.acad-archive__head{
  display: grid; gap: var(--s-3);
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.acad-archive__eyebrow{
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow); letter-spacing: .22em;
  text-transform: uppercase; color: var(--brand);
}
.acad-archive__head h1{
  font-family: var(--font-serif-tc);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.05;
}
.acad-archive__desc{ color: var(--muted-2); font-size: var(--t-body); }

.acad-grid{
  display: grid; gap: var(--s-5);
}
@media (min-width: 600px){ .acad-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .acad-grid{ grid-template-columns: repeat(3, 1fr); } }
.acad-grid--compact{
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px){ .acad-grid--compact{ grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px){ .acad-grid--compact{ grid-template-columns: repeat(7, 1fr); } }

.acad-card{
  display: grid; gap: var(--s-3);
  text-decoration: none; color: inherit;
  transition: transform var(--dur) var(--ease-out);
}
.acad-card:hover{ transform: translateY(-3px); }
.acad-card__photo{
  aspect-ratio: 460 / 290;  /* 橫式-2 重點製作小卡規格 */
  position: relative;
  background: var(--paper-2);
  overflow: hidden;
}
.acad-card__photo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.acad-card__photo .ph{ position: absolute; inset: 0; height: 100%; }
.acad-card__title{
  font-family: var(--font-serif-tc);
  font-size: var(--t-body-lg); font-weight: 500;
  line-height: 1.3;
}
.acad-card__schedule{
  font-size: 13px; color: var(--muted-2);
  line-height: 1.5;
}
.acad-card__signup{
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow); letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--brand);
  display: inline-block;
}

/* single-academy_group */
.acad-single{ padding-bottom: var(--s-9); }
.acad-single__hero{
  width: 100%;
  aspect-ratio: 1980 / 744;  /* 橫式-1 hero 規格 */
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
}
.acad-single__hero img,
.acad-single__hero .ph{
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  position: absolute; inset: 0;
}
.acad-single__head{
  padding-block: var(--s-6) var(--s-7);
  border-bottom: 1px solid var(--rule);
}
.acad-single__eyebrow{
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow); letter-spacing: .22em;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: var(--s-3);
}
.acad-single h1{
  font-family: var(--font-serif-tc);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 500; line-height: 1.1; letter-spacing: -.02em;
  margin-bottom: var(--s-5);
}
.acad-single__meta{
  display: grid; gap: var(--s-3) var(--s-5);
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  font-size: 14px;
}
.acad-single__meta dt{
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow); letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
.acad-single__meta dd{ margin: 0; color: var(--muted-2); }
.acad-single__body{
  font-size: 16px; line-height: 1.85;
  color: var(--muted-2);
  max-width: 720px;
  padding-block: var(--s-7);
}
.acad-single__body p{ margin-bottom: var(--s-4); } /* 無 text-wrap:pretty：長 CJK 正文提前斷行 */
.acad-single__back{
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

/* =========================================================
   首頁五段：對齊 _design/app.jsx 原設計
   （取代之前的 .fp-hero / .fp-section 樣式；新版用 design 的 class）
   ========================================================= */

/* ===== 通用 section-head（with marker num + label） ===== */
.section {
  padding-block: var(--s-7);
  position: relative;
}
@media (min-width: 900px) {
  .section { padding-block: var(--s-8); }
}
/* hero 之後第一個 section padding-top 收緊（避免 hero CTA 跟下一個 section 之間累積太多空白） */
.hero + .section { padding-top: var(--s-5); }
@media (min-width: 900px) {
  .hero + .section { padding-top: var(--s-6); }
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.section-head .marker {
  display: flex; align-items: baseline;
  gap: var(--s-3); flex-wrap: nowrap;
}
.section-head .num {
  font-family: var(--font-mono);
  font-size: var(--t-meta); letter-spacing: .1em;
  color: var(--brand); white-space: nowrap;
}
.section-head .label {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow); letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
.section-head h2 {
  font-family: var(--font-serif-tc);
  font-size: var(--t-h2);
  font-weight: 500; letter-spacing: -.015em;
  line-height: 1.1; text-wrap: pretty;
}
.section-more {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

/* ===== Hero carousel ===== */
.hero { position: relative; padding-block: 0 var(--s-5); background: var(--paper); color: var(--ink); }
/* ↑ padding-bottom 給 progress 條一致留白；之前 mobile 0、桌機 var(--s-9) 96px 不一致 */
/* ↑ 同層宣告 background 與 color 用 var(--paper)/var(--ink)：皮膚 class 套在 .hero 時，
     變數會在 .hero 這層重新解析，所有後代（h1、lede、btn…）自動繼承到反白色。
     治根：不依賴每個元素逐一宣告 color。 */
.hero .banner {
  width: 100%;
  aspect-ratio: 1980 / 744;
  position: relative;
  margin-bottom: var(--s-4);
  overflow: hidden;
  background: var(--paper-2);
}
.hero .banner-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
  pointer-events: none;
}
.hero .banner-slide.active { opacity: 1; pointer-events: auto; }
.hero .banner-slide { background: var(--paper-2); }
.hero .banner-slide .banner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center center;
}
.hero .banner .corner {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  background: var(--paper);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase;
  z-index: 3;
}
.hero .banner-progress {
  /* 從 banner 圖內 absolute → 移到 hero 底部黑底區，自然流跟在 .body 後
     底邊不留 margin：下個 .section 自己有 padding-block var(--s-7) ~48px，邊界不需重複 */
  display: flex; gap: 8px;
  margin: var(--s-3) auto 0;
  width: min(260px, 44vw);
}
.hero .banner-progress .seg {
  flex: 1; height: 4px;
  background: rgba(255,255,255,.28);
  position: relative; overflow: hidden;
  cursor: pointer; border: 0; padding: 0;
  display: block; border-radius: 2px;
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out);
}
/* hover 用 transform 純視覺放大、不動 layout（原本改 height 會撐高 banner-progress 跟 hero，整頁跳 2px）*/
.hero .banner-progress .seg:hover { transform: scaleY(1.5); }
.hero .banner-progress .seg.done { background: rgba(255,255,255,.85); }
.hero .banner-progress .seg .seg-fill {
  display: block; height: 100%; width: 0;
  background: rgba(255,255,255,.95);
}
.hero .banner-progress .seg.active .seg-fill {
  animation: tcs-seg-fill 7000ms linear forwards;
}
@keyframes tcs-seg-fill {
  from { width: 0; }
  to   { width: 100%; }
}
.hero .banner-controls {
  position: absolute;
  right: var(--s-4); bottom: var(--s-4);
  display: flex; align-items: center; gap: var(--s-2);
  z-index: 3; background: var(--paper);
  padding: 6px 8px 6px 12px;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow); letter-spacing: .06em;
}
.hero .banner-controls .counter { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ink); }
.hero .banner-controls .counter .sep,
.hero .banner-controls .counter .tot { color: var(--muted); }
.hero .banner-controls .arr-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-size: var(--t-meta); line-height: 1;
  background: transparent;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  border-radius: 50%;
  cursor: pointer;
}
.hero .banner-controls .arr-btn:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
@media (max-width: 600px) {
  .hero .banner-progress { width: 120px; bottom: var(--s-3); }
}

.hero .body {
  display: grid; gap: var(--s-4);
  align-content: start;
  animation: tcs-hero-rise 540ms var(--ease-out) both;
  /* 固定 height 是為了 slide 切換時頁面 100% 不跳動。
     桌面 180px 覆蓋最長 slide（H1 1 行 + EN + 副文 1 行 + CTA + gaps ≈ 168）；
     mobile 仍 220 因 .lede-cta flex 在窄寬會換行（lede 跟 CTA 上下站），content 變高。 */
  height: 180px;
  overflow: hidden;
}
@media (max-width: 720px) { .hero .body { height: 220px; } }   /* lede-cta 在窄寬會換行，保留原高度 */
@keyframes tcs-hero-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.hero .copy { display: grid; gap: var(--s-3); }
.hero .eyebrow-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.hero .eyebrow-row .dot {
  width: 6px; height: 6px;
  background: var(--brand);
  border-radius: 50%;
}
.hero h1 {
  font-family: var(--font-serif-tc);
  /* hero body 鎖死 height: 220px（避免 slide 切換時頁面跳動），故 h1 不使用 --t-h1（40-88）
   * 改用客製克制 clamp，配合 .en 副標 + .lede 副文剛好塞進 220px。
   * --t-display 與 --t-h1 保留給 /links 等不受容器高度限制的頁面 */
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -.02em; line-height: 1.1;
  margin: 0;
}
.hero h1 .en {
  display: block;
  font-family: var(--font-serif-en);
  font-style: italic; font-weight: 500;
  font-size: .42em; letter-spacing: .01em;
  color: var(--muted-2);
  margin-top: var(--s-3); line-height: 1.2;
}
.hero .lede {
  font-size: var(--t-body-lg);
  color: var(--muted-2);
  margin: 0;
  line-height: 1.4;
  /* 不再硬性限寬 — 改由 .lede-cta flex (flex:1 1 320px) + CTA 寬度自然決定換行點 */
}
.hero .factline {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.hero .fact .label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 4px;
}
.hero .fact .val { font-family: var(--font-serif-tc); font-size: var(--t-body-lg); }
.hero .cta-row {
  display: flex; gap: var(--s-3);
  align-items: center; flex-wrap: wrap;
  margin-top: var(--s-2);
}

/* 說明文字 + CTA 同列：說明撐滿、按鈕靠右 */
.hero .lede-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.hero .lede-cta .lede { flex: 1 1 320px; min-width: 0; margin: 0; }
.hero .lede-cta .btn  { flex: 0 0 auto; }

/* ===== ConcertsAndNews duo ===== */
.duo { display: grid; gap: var(--s-8); }
@media (min-width: 1000px) { .duo { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: var(--s-7); } }
@media (min-width: 1300px) { .duo { grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: var(--s-8); } }
.duo-main .section-head h2,
.duo-aside .section-head h2 { font-size: clamp(24px, 3vw, 32px); }

/* show-card 對齊原設計 markup（.poster / .meta-row） */
.shows-duo {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .shows-duo { grid-template-columns: repeat(2, 1fr); } }

.show-card {
  display: grid; gap: var(--s-3);
  background: transparent; color: var(--ink);
  font-family: var(--font-sans-tc);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out);
}
.show-card:hover { transform: translateY(-3px); }
.show-card .poster {
  aspect-ratio: 750 / 580;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}
.show-card .meta-row {
  display: flex; align-items: baseline;
  gap: var(--s-3); flex-wrap: nowrap;
}
.show-card .meta-row .series {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--t-eyebrow);
  font-weight: var(--fw-eyebrow);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.show-card .meta-row .date {
  font-family: var(--font-mono); font-size: var(--t-eyebrow);
  letter-spacing: .04em; color: var(--muted);
}
.show-card h3 {
  font-family: var(--font-serif-tc);
  font-size: var(--t-h4); font-weight: 500;
  line-height: 1.25; letter-spacing: -.01em;
  color: var(--ink); text-wrap: pretty;
}

/* news-compact 在 duo-aside */
/* aside 跟 main 同高；news-compact 用 flex:1 撐滿 aside 剩餘高度。
   不用 grid + gap（會跟 section-head margin-bottom 疊加導致跟 .duo-main 不對齊） */
.duo-aside { display: flex; flex-direction: column; min-height: 0; }
.news-compact {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 0;
  /* 最新消息＝獨立淺色面板，與左側「近期演出」的開放紙底分開 */
  background: var(--paper-2);
  padding: var(--s-5);
  border-radius: var(--r-md);
}
.news-c-item {
  display: grid; gap: var(--s-3);
  text-decoration: none; color: inherit;
  transition: transform var(--dur) var(--ease-out);
}
.news-c-item:hover { transform: translateY(-3px); }
.news-c-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;          /* 從 16/7 扁平改回正常比例 */
  background: var(--paper);       /* 比面板(paper-2)亮：影像像裱進框 */
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
}
.news-c-thumb .news-c-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;          /* 等比例符合框架、不裁切 */
  object-position: center center;
}
.news-c-row {
  display: flex; align-items: baseline;
  gap: var(--s-3); flex-wrap: wrap;
}
.news-c-row .tag {
  font-family: var(--font-mono); font-size: var(--t-eyebrow);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand);
}
.news-c-row .date {
  font-family: var(--font-mono); font-size: var(--t-eyebrow);
  letter-spacing: .04em; color: var(--muted);
}
.news-c-item h4 {
  font-family: var(--font-serif-tc);
  font-size: var(--t-body-lg); font-weight: 500;   /* 比「近期演出」h3(t-h4) 小一階＝次要層級 */
  line-height: 1.4; letter-spacing: -.01em;
  color: var(--ink); text-wrap: pretty;
  /* 限 2 行避免長標題撐破 row 高度 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Listen ===== */
/* ===== Listen 區塊新版：YT 橫向滑動（上）+ SC shell（下，內部左右）===== */
.listen-stack { display: grid; gap: var(--s-6); }

/* 每個 block (精選影音 / 精選錄音) 標題與內容同層級 */
.listen-block { display: grid; gap: var(--s-3); }
.listen-block .block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.listen-block .block-head .ttl {
  font-family: var(--font-serif-tc);
  font-size: var(--t-h3); font-weight: 500;
  color: var(--ink);
}
.listen-block .block-head .sub {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow); letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.listen-block .block-head a.sub:hover,
.listen-block .block-head a.sub:focus-visible {
  color: var(--brand);
  outline: none;
}

/* YT 橫向 strip — 借 pub-strip 同款互動 */
.yt-strip {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block: 4px var(--s-3);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}
.yt-strip::-webkit-scrollbar { height: 6px; }
.yt-strip::-webkit-scrollbar-track { background: transparent; }
.yt-strip::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 3px;
}
.yt-strip::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.yt-strip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}
.yt-strip .yt-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
}
@media (min-width: 720px) { .yt-strip .yt-card { flex: 0 0 300px; } }
@media (min-width: 1100px){ .yt-strip .yt-card { flex: 0 0 320px; } }
.sc-shell {
  min-width: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-4);
}
.sc-shell .head {
  display: flex; align-items: baseline; justify-content: space-between;
}
.sc-shell .head .ttl {
  font-family: var(--font-serif-tc);
  font-size: var(--t-h3); font-weight: 500;
}
.sc-shell .head .sub {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow); letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245,241,232,.5);
}
.sc-shell .sc-embed iframe { width: 100%; display: block; border: 0; }

/* ----- 自訂 SC 播放器 UI（接 SC Widget API，與設計稿一致） ----- */
.sc-iframe-hidden { display: block; position: absolute; left: -9999px; width: 1px; height: 1px; visibility: hidden; }
/* SC shell 內部左右版型：left（feature + player）/ right（tracks）*/
.sc-shell__body {
  display: grid;
  gap: var(--s-3);
  align-items: start;
}
@media (min-width: 900px) {
  .sc-shell__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-4);
  }
}
/* 左欄：sc-feature + sc-player 上下堆 */
.sc-shell__left {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

/* sc-player：極簡單列 [play | info(title + progress)] */
.sc-player {
  background: #131210;
  border: 1px solid rgba(245,241,232,.12);
  padding: 14px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.sc-player .play {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--paper); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur) var(--ease-out);
  cursor: pointer; border: 0;
}
.sc-player .play:hover { transform: scale(1.05); }
.sc-player .play .sc-icon { display: block; }
.sc-player .play .sc-icon--play  { margin-left: 1px; }
.sc-player .play .sc-icon--pause { display: none; }
.sc-player .play.is-playing .sc-icon--play  { display: none; }
.sc-player .play.is-playing .sc-icon--pause { display: block; }

.sc-player__info {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.sc-player__info .ttl {
  font-family: var(--font-serif-tc);
  font-size: var(--t-body);
  color: var(--paper);
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 進度條 inline 緊湊 */
.sc-player .sc-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.sc-player .sc-progress .cur,
.sc-player .sc-progress .dur {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow); letter-spacing: 0;
  color: rgba(245,241,232,.6);
  min-width: 2.8em;
}
.sc-player .sc-progress .dur { text-align: right; }
.sc-player .sc-progress .bar {
  position: relative;
  height: 5px;
  background: rgba(245,241,232,.18);
  border-radius: 2px;
  cursor: pointer;
  transition: height var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.sc-player .sc-progress .bar:hover,
.sc-player .sc-progress .bar:focus-visible {
  height: 7px;
  background: rgba(245,241,232,.28);
  outline: none;
}
.sc-player .sc-progress .fill {
  position: absolute; left: 0; top: 0;
  height: 100%;
  width: 0%;
  background: #e8ff43;
  border-radius: 2px;
  transition: width 120ms linear;
  pointer-events: none;
}

/* ===== 最新專輯 feature 卡（在 SC player 上方）===== */
.sc-feature {
  display: grid;
  grid-template-columns: 144px 1fr;
  gap: var(--s-5);
  align-items: center;
  background: rgba(245,241,232,.06);
  border: 1px solid rgba(245,241,232,.12);
  padding: 14px;
  text-decoration: none;
  color: var(--paper);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.sc-feature:hover {
  background: rgba(245,241,232,.10);
  border-color: rgba(245,241,232,.22);
}
.sc-feature__cover {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  overflow: hidden;
}
.sc-feature__cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sc-feature__cover .ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(28,27,25,.4);
}
.sc-feature__body { min-width: 0; display: grid; gap: 2px; }
.sc-feature__body .eyebrow {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(245,241,232,.5);
  line-height: 1;
}
.sc-feature__body h3 {
  font-family: var(--font-serif-tc);
  font-size: 19px; font-weight: 500; line-height: 1.25;
  color: var(--paper);
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-feature__body .cta {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .1em;
  color: #e8ff43;
  margin-top: 1px;
}
.sc-feature__body .cta .arr {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}
.sc-feature:hover .cta .arr { transform: translateX(2px); }

.sc-shell .tracks {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1px;
  background: rgba(245,241,232,.1);
  /* 不讓 tracks 撐高整個 sc-shell 暗盒；cap 在跟左欄相近高度，內部 scroll */
  max-height: 300px;
  overflow-y: auto;
  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(245,241,232,.28) transparent;
}
/* 內容溢出時（scroll 啟動），底部加 mask 漸層 hint「還有更多」 */
.sc-shell .tracks {
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
          mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
}
/* 內容沒超出時拿掉漸層（避免假性「下面還有」誤導）— 用 :has 偵測 */
.sc-shell:has(.tracks:not([style*="display: none"])) .tracks {
  /* 留 mask */
}
/* Webkit scrollbar：暗底細條 */
.sc-shell .tracks::-webkit-scrollbar { width: 4px; }
.sc-shell .tracks::-webkit-scrollbar-track { background: transparent; }
.sc-shell .tracks::-webkit-scrollbar-thumb {
  background: rgba(245,241,232,.28);
  border-radius: 2px;
}
.sc-shell .tracks::-webkit-scrollbar-thumb:hover {
  background: rgba(245,241,232,.45);
}
.sc-shell .tracks:empty { display: none; }
.sc-shell .sc-track {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  font-size: 13px;
  align-items: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.sc-shell .sc-track:hover { background: #2a2926; }
.sc-shell .sc-track .n {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  color: rgba(245,241,232,.4);
}
.sc-shell .sc-track .t {
  font-family: var(--font-serif-tc);
  color: rgba(245,241,232,.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-shell .sc-track .d {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  color: rgba(245,241,232,.55);
}
.sc-shell .sc-track.active .n { color: #e8ff43; }
.sc-shell .sc-track.active .t { color: var(--paper); }

/* ===== YouTube cards — 資訊預設可見 + YT 紅 play 鈕辨識度 =====
 * 痛點對應：(a) 紅鈕找回 YT 識別 (d) 資訊預設顯示 (e) 不依賴 hover
 * (f) 縮圖 + 資訊區雙層 + 邊框增加視覺重量，平衡 SC 暗 shell */
.yt-list { display: grid; gap: var(--s-4); }
.yt-card {
  display: block;
  text-decoration: none; color: inherit;
  background: var(--paper);
  border: 1px solid var(--rule);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.yt-card:hover,
.yt-card:focus-visible {
  border-color: var(--ink);
}

.yt-card .thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--paper-2);
  overflow: hidden;
}
.yt-card .thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
  will-change: transform;
}
.yt-card:hover .thumb img,
.yt-card:focus-visible .thumb img { transform: scale(1.04); }

/* YT 官方原始 play 鈕 SVG — always visible
 * SVG 本身就是紅 shield+三角，外層只負責 size / shadow / hover scale */
.yt-card .play-orb {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 48px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.32));
  transition: transform 320ms var(--ease-out);
  z-index: 2;
  pointer-events: none;
}
.yt-card:hover .play-orb,
.yt-card:focus-visible .play-orb {
  transform: translate(-50%, -50%) scale(1.06);
}
.yt-card .play-orb svg { width: 100%; height: 100%; display: block; }

/* 資訊區：always visible，在縮圖下方獨立 panel */
.yt-card .info {
  padding: var(--s-3) var(--s-4) var(--s-4);
  display: grid;
  gap: 6px;
}
.yt-card .info .meta {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yt-card .info h4 {
  font-family: var(--font-serif-tc);
  font-size: 16px; font-weight: 500; line-height: 1.3;
  color: var(--ink); margin: 0;
  transition: color var(--dur) var(--ease-out);
}
.yt-card:hover .info h4,
.yt-card:focus-visible .info h4 { color: var(--brand); }

/* ===== Support (dark CTA section) ===== */
/* 首頁簡潔贊助 CTA（對齊現網） */
.fp-support-cta .wrap{ padding-block: var(--s-9); }
.fp-support-cta__inner{
  max-width: 680px; margin: 0 auto; text-align: center;
  display: grid; gap: var(--s-4); justify-items: center;
}
.fp-support-cta__inner h2{
  font-family: var(--font-serif-tc);
  font-size: var(--t-h2); font-weight: 500; letter-spacing: -0.01em;
}
.fp-support-cta__inner p{
  font-size: var(--t-body-lg); line-height: 1.9; color: var(--muted-2);
}
.fp-support-cta__actions{ display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-2); }
/* 暗底版（.support 黑底）：內文與按鈕改成亮色才看得見 */
.fp-support-cta.support .fp-support-cta__inner p{ color: rgba(245,241,232,.72); }
.fp-support-cta.support .btn{ background: var(--paper); color: var(--ink); border-color: var(--paper); }
.fp-support-cta.support .btn:hover{ background: transparent; color: var(--paper); }
.fp-support-cta.support .btn.fp-cta-btn--ghost{ background: transparent; color: var(--paper); border-color: rgba(245,241,232,.45); }
.fp-support-cta.support .btn.fp-cta-btn--ghost:hover{ background: var(--paper); color: var(--ink); border-color: var(--paper); }

.support { background: var(--ink); color: var(--paper); }
.support .wrap { padding-block: var(--s-9); display: grid; gap: var(--s-6); }
.support .section-head {
  border-bottom-color: rgba(245,241,232,.18);
  margin-bottom: 0;
}
.support .section-head .num { color: #e8ff43; }
.support .section-head .label { color: rgba(245,241,232,.55); }
.support .section-head h2 {
  font-family: var(--font-serif-tc);
  font-size: var(--t-h1); font-weight: 500;
  letter-spacing: -.02em; line-height: 1.05;
  color: var(--paper);
}
.support .grid { display: grid; gap: var(--s-5); }
@media (min-width: 900px) {
  .support .grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
}
.support .tier {
  border-top: 1px solid rgba(245,241,232,.18);
  padding-top: var(--s-4);
  display: grid; gap: var(--s-3);
}
.support .tier .n {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow); letter-spacing: .2em; color: #e8ff43;
}
.support .tier h3 {
  font-family: var(--font-serif-tc);
  font-size: var(--t-h3); font-weight: 500;
}
.support .tier p {
  font-size: 14px;
  color: rgba(245,241,232,.72);
}
.support .tier .price {
  font-family: var(--font-body);     /* 內容含中文（如「NT$ 30,000 起」），用 Noto Sans TC */
  font-style: normal; font-weight: 500;
  font-size: 24px;
  color: #e8ff43;
}
.support .tier .cta {
  margin-top: var(--s-2);
  font-size: 13px; font-weight: 500;
  border-bottom: 1px solid var(--paper);
  padding-bottom: 3px;
  align-self: start; justify-self: start;
  color: var(--paper); text-decoration: none;
}

/* =========================================================
   動畫 5 招（依《補藍圖》）
     ① 進場淡入上移   — .rise / .rise-now （JS in-view 加 class）
     ② 皮膚色平滑轉場 — body / .skin-* 容器（已 transition 在 token swap）
     ③ 連結底線繪入   — .underline-draw （CSS hover）
     ④ 可變字重微動   — .wght-shift（fallback：font-weight jump）
     ⑤ 灰階→彩色      — .gs-reveal （CSS + JS in-view trigger）
   原則：一頁只用一兩個招牌動作 + 全部尊重 prefers-reduced-motion
   ========================================================= */

/* ① 進場淡入上移：預設「藏起來」，加 .in-view 後才顯出（JS IO observer 切換）*/
.rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.rise.in-view { opacity: 1; transform: none; }
/* 群組錯開 stagger — 在父層加 .rise-stagger，子的 .rise 會依 nth-child 延遲 */
.rise-stagger > .rise.in-view:nth-child(2) { transition-delay: 80ms; }
.rise-stagger > .rise.in-view:nth-child(3) { transition-delay: 160ms; }
.rise-stagger > .rise.in-view:nth-child(4) { transition-delay: 240ms; }
.rise-stagger > .rise.in-view:nth-child(5) { transition-delay: 320ms; }
.rise-stagger > .rise.in-view:nth-child(6) { transition-delay: 400ms; }

/* ② 皮膚色平滑轉場：body 與 .skin-* 容器在背景／文字色切換時 ease */
body, [class*="skin-"] {
  transition: background-color .9s var(--ease-out), color .9s var(--ease-out);
}

/* ③ 連結底線繪入：給「需要強調」的連結加 .underline-draw class */
.underline-draw {
  position: relative;
  display: inline-block;
}
.underline-draw::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease-out);
}
.underline-draw:hover::after,
.underline-draw:focus-visible::after { transform: scaleX(1); }

/* ④ 可變字重微動 — TASA Explorer 載入變數軸 wght@400..700 後，font-weight 可連續插值。
       hover / in-view 從元素原本字重平滑加重到 600（變數字體才連續，不再離散跳一下）。 */
.wght-shift { transition: font-weight 400ms var(--ease-out); }
.wght-shift:hover,
.wght-shift.in-view {
  font-weight: 600;
}

/* ⑤ 灰階→彩色：圖片預設 grayscale，in-view / hover 才彩色 */
.gs-reveal img,
img.gs-reveal {
  filter: grayscale(1);
  transition: filter 600ms var(--ease-out);
}
.gs-reveal.in-view img,
.gs-reveal:hover img,
img.gs-reveal.in-view,
img.gs-reveal:hover { filter: grayscale(0); }

/* 全域：尊重 prefers-reduced-motion — 動畫全部退場 */
@media (prefers-reduced-motion: reduce) {
  .rise, .rise.in-view { opacity: 1; transform: none; transition: none; }
  .underline-draw::after { transition: none; transform: scaleX(1); }
  .wght-shift { transition: none; }
  .gs-reveal img, img.gs-reveal { filter: none; transition: none; }
  body, [class*="skin-"] { transition: none; }
}

/* =========================================================
   /links Linktree 入口頁 — 純 CSS scroll-snap、手機優先
   ========================================================= */
.links-page { background: var(--paper); }
.links-deck {
  height: 100svh;          /* svh：手機瀏覽器列工具列收合時更穩 */
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.links-deck::-webkit-scrollbar { display: none; }

.links-screen {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--s-7) var(--gutter);
  background: var(--paper);
  color: var(--ink);
  position: relative;
  transition: background .9s var(--ease-out), color .9s var(--ease-out);
}
.links-inner {
  align-self: center;
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: var(--s-5);
  text-align: center;
}
.links-counter {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: .22em;
  color: var(--muted);
  text-transform: uppercase;
}
.links-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 9vw, 80px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
}
.links-sub {
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  line-height: 1.6;
  color: var(--muted-2);
  margin: 0;
}
.links-cta {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: var(--s-3);
  margin: var(--s-4) auto 0;
  padding: 16px 28px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 999px;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.links-cta:hover { transform: translateY(-2px); background: var(--brand); }
.links-cta .arr { font-family: var(--font-mono); }

/* 下一屏指示（在每屏底部）*/
.links-down {
  display: grid; place-items: center;
  height: 44px;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--muted-2);
  text-decoration: none;
  animation: links-bounce 1.8s var(--ease-out) infinite;
}
.links-down:hover { color: var(--ink); }
@keyframes links-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .links-deck { scroll-behavior: auto; }
  .links-down { animation: none; }
  .links-cta:hover { transform: none; }
}

/* =========================================================
   場地租借辦法（venue 內嵌價目表＋說明）
   ========================================================= */
.vn-rental { margin-block: var(--s-8, 4rem); }
.vn-rental-head { border-bottom: 1px solid var(--rule, #ddd); padding-bottom: .6rem; margin-bottom: 1.6rem; }
.vn-rental-head h2 { font-family: var(--font-display); }
.vn-rental-eff { color: var(--muted, #777); font-size: var(--t-meta, .85rem); margin-top: .3rem; }
.vn-rental-bld { margin-bottom: 2.2rem; }
.vn-rental-bld h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: .8rem; }
.vn-rental-addr { font-size: var(--t-meta, .85rem); color: var(--muted, #777); font-weight: 400; }
.vn-rental-tablewrap { overflow-x: auto; }
.vn-rental-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vn-rental-table th, .vn-rental-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--rule, #e6e2d8); text-align: center; white-space: nowrap; }
.vn-rental-table thead th { background: var(--surface, #f4efe4); font-weight: 500; }
.vn-rental-table tbody th[scope="row"] { text-align: left; font-weight: 500; }
.vn-rental-unit { display: block; font-size: var(--t-meta, .78rem); color: var(--muted, #888); font-weight: 400; }
.vn-rental-note { font-size: var(--t-meta, .82rem); color: var(--muted, #777); margin-top: .5rem; text-align: right; }
.vn-rental-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; margin-top: 1.5rem; }
.vn-rental-block h4 { margin-bottom: .6rem; }
.vn-rental-block ul { padding-left: 1.1rem; }
.vn-rental-block li { margin-bottom: .4rem; line-height: 1.55; }
.vn-rental-flow { margin-top: 2rem; }
.vn-rental-steps { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding-left: 1.1rem; margin-bottom: 1.2rem; }
.vn-rental-steps li { line-height: 1.5; }
@media (max-width: 720px) {
  .vn-rental-cols { grid-template-columns: 1fr; }
}

/* 房間相片輪播：左右暗角 + 圓形箭頭 */
.vn-gallery-wrap { position: relative; border-radius: var(--r-md, 4px); overflow: hidden; }
.vn-gallery {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.vn-gallery::-webkit-scrollbar { display: none; }
.vn-gallery-slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
.vn-gallery-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* 左右暗角（不擋點擊與滑動） */
.vn-gallery-wrap.has-nav::before,
.vn-gallery-wrap.has-nav::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 64px; pointer-events: none; z-index: 1;
}
.vn-gallery-wrap.has-nav::before { left: 0;  background: linear-gradient(to right, rgba(0,0,0,.34), transparent); }
.vn-gallery-wrap.has-nav::after  { right: 0; background: linear-gradient(to left,  rgba(0,0,0,.34), transparent); }
/* 箭頭 */
.vn-gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; padding: 0; border: none; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.85); color: var(--ink, #222); font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 6px rgba(0,0,0,.25); transition: opacity .25s, background .2s;
}
.vn-gal-arrow:hover { background: #fff; }
.vn-gal-prev { left: 10px; }
.vn-gal-next { right: 10px; }
.vn-gal-arrow.is-off { opacity: 0; pointer-events: none; }
.vn-v2-facil { margin-top: .6rem; font-size: var(--t-meta, .85rem); color: var(--muted, #555); }
.vn-facil-label {
  display: inline-block; margin-right: .5rem; padding: 1px 7px; border-radius: 999px;
  background: var(--surface, #f0ece2); font-size: .72rem; color: var(--ink, #333);
}
@media (prefers-reduced-motion: reduce) { .vn-gallery { scroll-behavior: auto; } }

/* =========================================================
   合唱學苑 — 課程報名（page-academy.php）
   ========================================================= */
.acad-section { margin-block: var(--s-8, 4rem); }
.acad-section > .section-head { margin-bottom: 1.6rem; }
.acad-course-list { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .acad-course-list { grid-template-columns: 1fr 1fr; } }
.acad-course {
  border: 1px solid var(--rule, #e6e2d8); border-radius: var(--r-md, 6px);
  padding: 1.4rem 1.5rem; background: var(--paper, #fff);
  display: flex; flex-direction: column; height: 100%;   /* 等高卡片 */
}
.acad-course .btn, .acad-course__pending { margin-top: auto; align-self: flex-start; }  /* 報名鈕靠底對齊 */
.acad-course__title { font-family: var(--font-display); font-size: var(--t-h4, 1.25rem); margin-bottom: .6rem; }
.acad-course__desc { color: var(--ink, #333); line-height: 1.7; margin-bottom: 1rem; }
/* 練唱時間表（團名可點 ｜ 時間）*/
.acad-course__sublabel { font-family: var(--font-mono, monospace); font-size: var(--t-meta, .76rem); letter-spacing: .14em; text-transform: uppercase; color: var(--brand, #4a4338); margin: 0 0 .5rem; }
.acad-sched { width: 100%; border-collapse: collapse; margin-bottom: 1.1rem; }
.acad-sched th, .acad-sched td { padding: .45rem .2rem; border-bottom: 1px solid var(--rule, #e6e2d8); text-align: left; vertical-align: baseline; font-size: .92rem; }
.acad-sched th[scope="row"] { font-weight: 500; white-space: nowrap; padding-right: 1rem; }
.acad-sched th[scope="row"] a { color: var(--ink, #1c1b19); text-decoration: none; border-bottom: 1px solid var(--rule, #ccc); }
.acad-sched th[scope="row"] a:hover { border-color: var(--ink, #333); }
.acad-sched td { color: var(--muted, #555); font-variant-numeric: tabular-nums; text-align: right; }
/* 一般資訊（上課地點/收費/師資/班別）*/
.acad-course__info { margin: 0 0 1.1rem; display: grid; gap: .4rem; }
.acad-course__row { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .9rem; align-items: baseline; }
.acad-course__row dt { font-weight: 500; color: var(--muted, #777); font-size: var(--t-meta, .85rem); white-space: nowrap; }
.acad-course__row dd { margin: 0; }
.acad-course__row dd.full { grid-column: 1 / -1; color: var(--muted, #555); }
.acad-course__pending { display: inline-block; color: var(--muted, #999); font-size: var(--t-meta, .85rem); font-style: italic; }
@media (max-width: 520px) { .acad-course__row { grid-template-columns: 1fr; gap: 0; } .acad-sched td { text-align: left; } }

/* =========================================================
   學苑團隊內頁 — 指揮/鋼琴師資 + 聲部成員
   ========================================================= */
.t-people { margin-block: var(--s-7, 3rem); }
.t-faculty { display: grid; gap: 1.4rem; margin-bottom: 2rem; }
@media (min-width: 760px) { .t-faculty { grid-template-columns: 1fr 1fr; } }
.t-person { border-top: 2px solid var(--ink, #1c1b19); padding-top: .9rem; }
.t-person.has-photo { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: start; }
.t-person-photo img { width: 96px; height: 120px; object-fit: cover; object-position: top center; display: block; border-radius: 3px; }
.t-person-role { font-family: var(--font-mono, monospace); font-size: var(--t-meta, .78rem); letter-spacing: .14em; color: var(--brand, #4a4338); text-transform: uppercase; }
.t-person-name { font-family: var(--font-display); font-size: var(--t-h4, 1.25rem); font-weight: 500; margin: .25rem 0 .5rem; }
.t-person-name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule, #ccc); }
.t-person-name a:hover { border-color: var(--ink, #333); }
.t-person-bio { color: var(--muted, #555); line-height: 1.75; font-size: .95rem; }
.t-roster { list-style: none; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 600px) { .t-roster { grid-template-columns: 1fr 1fr; } }
.t-roster-item { display: flex; gap: .8rem; align-items: baseline; border-bottom: 1px solid var(--rule, #e6e2d8); padding-bottom: .45rem; }
.t-roster-role { font-family: var(--font-mono, monospace); font-size: var(--t-meta, .78rem); color: var(--brand, #4a4338); min-width: 3.5em; }
.t-roster-name { font-weight: 500; }
.t-roster-name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule, #ccc); }
/* 演出大紀事換頁器 */
.t-acts-pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.3rem; }
.t-pg { min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid var(--rule, #ddd); background: var(--paper, #fff); color: var(--ink, #222); font: inherit; font-size: .9rem; line-height: 1; border-radius: 4px; cursor: pointer; transition: background .15s, color .15s; }
.t-pg:hover:not(:disabled):not(.is-active) { background: var(--surface, #f0ece2); }
.t-pg.is-active { background: var(--ink, #1c1b19); color: var(--paper, #fff); border-color: var(--ink, #1c1b19); }
.t-pg:disabled { opacity: .35; cursor: default; }

/* =========================================================
   區段入口頁（page-section-landing.php：/about, /action）
   ========================================================= */
.section-landing { padding-block: var(--s-7) var(--s-8); }
.section-landing__head { text-align: center; margin-bottom: var(--s-7); }
.section-landing__head h1 {
  font-family: var(--font-serif-tc);
  font-size: var(--t-h1);
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0 0 var(--s-3);
}
.section-landing__lead {
  font-size: var(--t-body-lg);
  color: var(--muted-2);
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.5;
}
.section-landing__grid { display: grid; gap: var(--s-5); }
@media (min-width: 720px) {
  .section-landing__grid { grid-template-columns: repeat(3, 1fr); }
}
.section-landing__card {
  display: grid;
  grid-template-rows: auto 1fr;     /* 圖 + 內文 */
  border: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.section-landing__card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: 0 18px 36px -24px rgba(0,0,0,.4);
}
/* 裝飾圖（沿用目的頁主視覺；沒有就底紋佔位，不會一片白）*/
.section-landing__card-media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--paper-2);
  overflow: hidden;
}
.section-landing__card-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.section-landing__card:hover .section-landing__card-media img { transform: scale(1.04); }
.section-landing__card-media .ph-stripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    135deg,
    color-mix(in oklab, var(--ink) 6%, transparent) 0 8px,
    color-mix(in oklab, var(--ink) 12%, transparent) 8px 16px
  );
}
.section-landing__card-body {
  display: grid; gap: var(--s-3);
  padding: var(--s-5);
}
.section-landing__card-title {
  font-family: var(--font-serif-tc);
  font-size: var(--t-h3, 1.5rem); font-weight: 500;
  margin: 0; letter-spacing: -.01em;
}
.section-landing__card-desc {
  color: var(--muted-2);
  font-size: var(--t-body);
  line-height: 1.6;
  margin: 0;
}
.section-landing__card-arr {
  font-family: var(--font-mono);
  justify-self: end;
  font-size: var(--t-h4, 1.25rem);
  color: var(--brand);
  transition: transform var(--dur) var(--ease-out);
}
.section-landing__card:hover .section-landing__card-arr { transform: translateX(4px); }

/* =========================================================
   刊物 / 文獻（document）— PDF 檢視器單頁 + /library 列表
   ========================================================= */
.doc-single { padding-block: var(--s-7) var(--s-9); }
.doc-single__head { max-width: 760px; margin-bottom: var(--s-6); }
.doc-single__head h1 {
  font-family: var(--font-display); font-size: var(--t-h1);
  font-weight: 500; line-height: 1.06; letter-spacing: -.02em;
  margin: var(--s-3) 0 var(--s-4);
}
.doc-single__summary { color: var(--muted-2); font-size: var(--t-body-lg); line-height: 1.6; margin-bottom: var(--s-5); }
.doc-single__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.doc-single__viewer {
  margin-top: var(--s-6);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  overflow: hidden; background: var(--paper-2);
}
.doc-single__viewer iframe { display: block; width: 100%; height: min(85vh, 1100px); border: 0; }
@media (max-width: 680px) { .doc-single__viewer iframe { height: 78vh; } }
/* PDF.js 檢視器（上傳到媒體庫的 PDF）：連續捲動的 canvas，無彈出/下載鈕 */
.doc-single__viewer--pdfjs { overflow-y: auto; max-height: min(85vh, 1100px); -webkit-overflow-scrolling: touch; }
@media (max-width: 680px) { .doc-single__viewer--pdfjs { max-height: 78vh; } }
.doc-pdfjs { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-3); }
.doc-pdfjs__page { display: block; width: 100%; height: auto; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.doc-pdfjs__err { color: var(--muted); padding: var(--s-7) 0; text-align: center; font-family: var(--font-mono); letter-spacing: .04em; }
.doc-single__cover img { display: block; width: 100%; max-width: 560px; margin-top: var(--s-6); border: 1px solid var(--rule); }
.doc-single__empty { color: var(--muted); padding: var(--s-7) 0; font-family: var(--font-mono); letter-spacing: .04em; }
.doc-single__back { margin-top: var(--s-6); }
.doc-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .doc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .doc-grid { grid-template-columns: repeat(4, 1fr); } }