/* ============================================================
   TCS · all-page styles (層次在 styles.css 之上)
   每個 deliverable 頁面的 component-scoped 樣式都集中在這裡, 用
   class prefix 區隔: .p-* (archive-person), .d-* (single-person),
   .a-* (home-artists), .ac-* (home-academy), .t-* (single-team),
   .hs-* (history), .vn-* (venue), .mb-* (member), .sp-* (support),
   .pt-* (patron), .nx-* (news).
   ============================================================ */

/* ---- Page hero ---- */
.persons-hero {
  padding-block: var(--s-7) var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.persons-h1 {
  font-family: var(--font-serif-tc);
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}
.persons-h1 .en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-weight: 400;
  font-size: 0.36em;
  letter-spacing: 0;
  color: var(--muted-2);
}
.persons-hero .hero-meta {
  display: flex;
  gap: var(--s-6);
  flex-wrap: wrap;
  padding-top: var(--s-5);
  margin-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.persons-hero .hero-meta .meta-pair {
  display: grid;
  gap: 4px;
}
.persons-hero .hero-meta .mk {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.persons-hero .hero-meta .mv {
  font-family: var(--font-serif-tc);
  font-size: 17px;
  color: var(--ink);
}

/* ---- Breadcrumb ---- */
.p-crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-block: var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
.p-crumbs a { color: var(--muted); }
.p-crumbs a:hover { color: var(--ink); }
.p-crumbs .sep { color: var(--rule-strong); }
.p-crumbs .cur { color: var(--ink); }

/* ============================================================
   PersonCard — striped portrait + serif name lockup
   ============================================================ */
.p-card {
  display: grid;
  gap: var(--s-3);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out);
}
.p-card:hover { transform: translateY(-3px); }

.p-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  overflow: hidden;
}
.p-photo .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
  );
}
.p-photo-meta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in oklab, var(--paper) 78%, transparent);
  backdrop-filter: blur(2px);
}
.p-card:hover .p-photo-meta { color: var(--ink); }

.p-body {
  display: grid;
  gap: 4px;
}
.p-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}
.p-name {
  display: grid;
  gap: 2px;
}
.p-name-zh {
  font-family: var(--font-serif-tc);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--ink);
}
.p-name-en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--muted-2);
  line-height: 1.3;
}
.p-multi {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.p-multi-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}

/* Size variants */
.p-card-sm .p-name-zh { font-size: 16px; }
.p-card-sm .p-name-en { font-size: 11px; }
.p-card-lg .p-photo { aspect-ratio: 4 / 5; }
.p-card-lg .p-name-zh { font-size: 22px; }
.p-card-lg .p-name-en { font-size: 13px; }


/* ============================================================
   PersonRow — text-only credits row (no photo)
   Used for the 工作團隊 / staff list where headshots aren't on file.
   ============================================================ */
.p-list-wrap {
  border-top: 1px solid var(--rule);
}
.p-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s-7);
}
@container (max-width: 800px) {
  .p-list { grid-template-columns: 1fr; }
}
/* 工作團隊名冊：每一欄內部都是單欄、由上到下照現網順序 */
.p-list.staff-roster { grid-template-columns: 1fr; }
.staff-roster .staff-sep { color: var(--muted-2); margin: 0 2px; }
/* 兩欄：左＝顧問/團長/藝術群，右＝行政總監（含）以下的行政團隊 */
.staff-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s-7);
  align-items: start;
}
@media (max-width: 800px) { .staff-cols { grid-template-columns: 1fr; } }
.p-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.p-row-title {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-left: 6px;
}
.p-row-name {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.p-row-zh {
  font-family: var(--font-serif-tc);
  font-size: var(--t-body-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.p-row-en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: var(--t-meta);
  color: var(--muted-2);
}

/* Staff band header — same rhythm as featured/rest bands */
.staff-band {
  display: grid;
  gap: var(--s-5);
}

/* ============================================================
   FilterChip · style A (Mono inline)
   Used by archive-person 合作藝術家 篩選列, and any future chip-style
   filter in this design system. Pure text, no container.
   ============================================================ */
.chip-a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur) var(--ease-out);
}
.chip-a:hover { color: var(--ink); }
.chip-a .label { color: inherit; }
.chip-a .n { color: var(--rule-strong); }
.chip-a.is-active { color: var(--ink); }
.chip-a.is-active .label { border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }
.chip-a.is-active .n { color: var(--brand); }

/* ============================================================
   Editorial layout (V3) — AD hero + featured row + grid
   ============================================================ */
.persons-v3-shell {
  padding-block: var(--s-6) var(--s-9);
  display: grid;
  gap: var(--s-8);
}

/* AD hero */
.ad-hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-7);
  align-items: stretch;
}
.ad-hero .ad-photo {
  position: relative;
  background: var(--paper-2);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.ad-hero .ad-photo .ph-stripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(28,27,25,0.06) 0 10px,
    rgba(28,27,25,0.12) 10px 20px
  );
}
.ad-hero .ad-photo-meta {
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
  padding: 6px 10px;
}
.ad-copy {
  display: grid;
  gap: var(--s-4);
  align-content: center;
  padding-block: var(--s-3);
}
.ad-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand);
}
.ad-name {
  font-family: var(--font-serif-tc);
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  display: grid;
  gap: var(--s-2);
}
.ad-name .en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--muted-2);
  font-weight: 400;
}
.ad-bio {
  font-size: var(--t-body-lg);
  color: var(--muted-2);
  max-width: 48ch;
}
.ad-cta-row {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

/* Featured row */
.featured-band {
  display: grid;
  gap: var(--s-5);
}
.featured-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.featured-head h3 {
  font-family: var(--font-serif-tc);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.rest-band-head {
  display: grid;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.rest-band-head h3 {
  font-family: var(--font-serif-tc);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.rest-band-head .chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--s-4);
}

.staff-band-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.staff-band-head h3 {
  font-family: var(--font-serif-tc);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.staff-band-head .count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* ============================================================
   PERSON DETAIL — single-person page (#2)
   ============================================================ */

/* ---- Shared detail bits ---- */
.d-role-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
}
.d-role-strip .sep { color: var(--rule-strong); }
.d-role-strip .role { color: var(--brand); }

.d-name {
  font-family: var(--font-serif-tc);
  font-size: clamp(48px, 6.2vw, 88px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.96;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}
.d-name .en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-weight: 400;
  font-size: 0.36em;
  letter-spacing: 0.005em;
  color: var(--muted-2);
}

.d-title {
  font-family: var(--font-serif-tc);
  font-size: 18px;
  color: var(--muted-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

.d-bio {
  display: grid;
  gap: var(--s-3);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}
.d-bio p { margin: 0; }

.d-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.d-section-head h2 {
  font-family: var(--font-serif-tc);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.d-section-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* Credits list — pure text rows: year | title | role.
   Default = single column with comfortable row height.
   .is-dense  = same shape but tighter padding + two columns. */
.d-credits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--rule);
}
.d-credit-row {
  display: grid;
  grid-template-columns: 80px 1fr 220px;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 680px) {
  .d-credit-row {
    grid-template-columns: 64px 1fr;
    grid-template-areas: "year title" "year role";
    row-gap: 2px;
  }
  .d-credit-row .d-credit-year { grid-area: year; }
  .d-credit-row .d-credit-title { grid-area: title; }
  .d-credit-row .d-credit-role { grid-area: role; text-align: left; font-size: 11px; color: var(--muted); }
}
.d-credit-year {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.d-credit-title {
  font-family: var(--font-serif-tc);
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.d-credit-role {
  font-family: var(--font-sans-tc);
  font-size: 13px;
  color: var(--muted-2);
  text-align: right;
}

.d-credits.is-dense {
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s-7);
}
@media (max-width: 680px) { .d-credits.is-dense { grid-template-columns: 1fr; } }  /* 手機不擠兩欄 */
.d-credits.is-dense .d-credit-row {
  grid-template-columns: 64px 1fr;
  grid-template-areas: "year title" "year role";
  row-gap: 2px;
  padding: var(--s-3) 0;
}
.d-credits.is-dense .d-credit-year { grid-area: year; }
.d-credits.is-dense .d-credit-title { grid-area: title; font-size: 17px; }
.d-credits.is-dense .d-credit-role {
  grid-area: role;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.d-credits-empty {
  padding: var(--s-7) 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.d-back {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.d-back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur) var(--ease-out), gap var(--dur) var(--ease-out);
}
.d-back-link:hover { color: var(--ink); gap: 14px; }
.d-back-link .arr { font-family: var(--font-mono); font-size: 14px; }

/* ============================================================
   V1 · Asymmetric — portrait left, content right（桌機）
   手機自動單欄：照片在上、文字在下；照片限寬避免吃滿螢幕
   ============================================================ */
.d-v1-shell {
  padding-block: var(--s-7) var(--s-8);
  display: grid;
  gap: var(--s-8);
}
.d-v1-hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 768px) {
  .d-v1-hero {
    grid-template-columns: 1fr;        /* 單欄 */
    gap: var(--s-5);
  }
  .d-v1-photo {
    max-width: 360px;                  /* 照片限寬置中、不吃整個螢幕 */
    margin-inline: auto;
    width: 100%;
  }
}
.d-v1-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  overflow: hidden;
}
.d-v1-photo .ph-stripes {
  position: absolute; inset: 0;
  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
  );
}
.d-v1-photo-meta {
  position: absolute;
  left: 12px; bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
  padding: 6px 10px;
}
.d-v1-text {
  display: grid;
  gap: var(--s-5);
  padding-top: var(--s-2);
}


/* ============================================================
   HOME · 合作藝術家 (homepage section block #4)
   ============================================================ */

/* 圓形頭像・自動漂移牆（借出版品條 marquee：複製一組、track translateX 0→-50% 無縫循環）。
   取代舊的手動 scroll-rail＋左右箭頭；查看團隊連結改到 .section-head 右上、與其他區塊對齊。 */
/* 自動漂移＋可手動滑/拖（JS assets/home-marquee.js 驅動真實 scrollLeft，同出版品條）。
   ⚠️ 真實捲動容器（overflow-x:auto）＝使用者可滑，取代純 CSS marquee（滑不動）。 */
.artist-wall {
  overflow-x: auto;
  overflow-y: hidden;
  margin-inline: calc(var(--gutter) * -1);   /* 抵銷 .wrap 內距 → 漂移牆貼到容器邊 */
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  padding-block: var(--s-2) var(--s-3);
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  /* 左右柔和淡出，暗示「還有更多」、收掉硬邊 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.artist-wall::-webkit-scrollbar{ display: none; }
.artist-wall.is-dragging{ cursor: grabbing; }
.artist-wall.is-dragging a{ pointer-events: none; }
.artist-wall__track {
  display: flex;
  gap: var(--s-5);
  width: max-content;
}

.artist-orb {
  flex: 0 0 auto;
  width: 132px;
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  text-align: center;
  color: var(--ink);
  text-decoration: none;
}
.artist-orb__photo {
  position: relative;
  width: 116px; height: 116px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 0 0 1px var(--rule) inset;   /* 細描邊讓圓更乾淨 */
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.artist-orb__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;               /* 偏上＝保住人臉、少切到頭 */
}
.artist-orb__photo .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
  );
}
.artist-orb:hover .artist-orb__photo {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--brand) inset, 0 10px 24px -12px rgba(0,0,0,.35);
}
.artist-orb__name {
  font-family: var(--font-serif-tc);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.artist-orb__role {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  line-height: 1.3;
}
@media (max-width: 720px) {
  .artist-orb { width: 104px; }
  .artist-orb__photo { width: 92px; height: 92px; }
  .artist-orb__name { font-size: 14px; }
}

/* ============================================================
   HOME · 合唱學苑 (homepage section block #5)
   ============================================================ */


/* V2 · 4-card grid */
.ac-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5) var(--s-4);
}
@media (max-width: 1000px) {
  .ac-grid { grid-template-columns: repeat(2, 1fr); }
}

.ac-card {
  display: grid;
  gap: var(--s-3);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out);
}
.ac-card:hover { transform: translateY(-3px); }

.ac-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--paper-2);
  overflow: hidden;
}
.ac-photo .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
  );
}
.ac-photo-meta {
  position: absolute;
  inset: auto 8px 8px auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
  padding: 4px 8px;
}
.ac-card-body { display: grid; gap: 6px; }
.ac-card-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.ac-card-name { display: grid; gap: 2px; }
.ac-card-zh {
  font-family: var(--font-serif-tc);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.ac-card-en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: 12px;
  color: var(--muted-2);
}
.ac-card-blurb {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-2);
}

/* ============================================================
   ACADEMY · single-team page
   ============================================================ */
.team-page { background: var(--paper); }
.team-page main { padding-bottom: var(--s-8); }

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand);
}
.t-name {
  font-family: var(--font-serif-tc);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.96;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.t-name .zh { font-size: clamp(40px, 6.5vw, 88px); }
.t-name .en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted-2);
  font-size: clamp(18px, 2.4vw, 28px);
}
.t-tagline {
  margin: var(--s-4) 0 0;
  font-family: var(--font-serif-tc);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 21px);
  color: var(--muted-2);
  max-width: 36ch;
  line-height: 1.5;
}

.t-photo-meta {
  position: absolute;
  left: 16px; bottom: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
  padding: 6px 10px;
}

/* Facts table */
.t-facts { margin: 0; display: grid; gap: 0; }
.t-fact {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.t-fact:first-child { border-top: 1px solid var(--rule); }
.t-fact dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.t-fact dd {
  margin: 0;
  font-family: var(--font-serif-tc);
  font-size: 15px;
  color: var(--ink);
}

/* Activities list */
.t-acts {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.t-act {
  display: grid;
  grid-template-columns: 80px 1fr 240px;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}
/* 手機：演出大紀事 3 欄 → 2 欄 grid-areas（年份在左欄、標題/備註堆右欄）*/
@media (max-width: 680px) {
  .t-act {
    grid-template-columns: 64px 1fr;
    grid-template-areas: "yr ttl" "yr note";
    row-gap: 2px;
    gap: var(--s-3);
  }
  .t-act-yr { grid-area: yr; }
  .t-act-ttl { grid-area: ttl; }
  .t-act-note { grid-area: note; text-align: left; font-size: 12px; color: var(--muted); }
}
.t-act-yr {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
.t-act-ttl {
  font-family: var(--font-serif-tc);
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.t-act-note {
  font-family: var(--font-sans-tc);
  font-size: 13px;
  color: var(--muted-2);
  text-align: right;
}

/* Intro lead */
.t-intro-lead {
  font-family: var(--font-serif-tc);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  letter-spacing: -0.005em;
}

/* ============================================================
   V1 · Editorial magazine
   ============================================================ */
.t-v1-hero {
  display: grid;
  gap: var(--s-6);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--rule);
}
.t-v1-hero-photo {
  position: relative;
  width: 100%;
  height: 540px;
  background: var(--paper-2);
  overflow: hidden;
}
/* 手機：橫式 banner 用 aspect-ratio 取代固定 540px（避免變超高）*/
@media (max-width: 768px) {
  .t-v1-hero-photo { height: auto; aspect-ratio: 16 / 9; }
}
.t-v1-hero-photo .ph-stripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    135deg,
    color-mix(in oklab, var(--ink) 6%, transparent) 0 12px,
    color-mix(in oklab, var(--ink) 12%, transparent) 12px 24px
  );
}
.t-v1-hero-meta { display: grid; gap: var(--s-4); }

.t-v1-body {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-7);
  padding-block: var(--s-8);
  border-bottom: 1px solid var(--rule);
}
/* 手機：intro + facts 改單欄堆疊 */
@media (max-width: 768px) {
  .t-v1-body {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding-block: var(--s-6);
  }
}
.t-v1-intro {
  display: grid;
  gap: var(--s-3);
  font-size: 16px;
  line-height: 1.75;
}
.t-v1-intro p { margin: 0; }
.t-v1-facts {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  padding-top: var(--s-2);
}

.t-v1-acts {
  padding-block: var(--s-8);
}


/* ============================================================
   /history · 大事紀
   ============================================================ */
.history-page { background: var(--paper); }
.history-page main { padding-bottom: var(--s-9); }

/* 行動參與三頁 hero banner（保留原圖比例，不裁切，避免裁掉圖內文字）*/
.pg-banner-wrap { margin-top: var(--s-5); }
.pg-banner { width: 100%; overflow: hidden; border-radius: var(--r-md); background: var(--paper-2); }
.pg-banner img { width: 100%; height: auto; display: block; }
.hs-banner-wrap { margin-top: var(--s-5); }
.hs-banner {
  width: 100%;
  aspect-ratio: 1980 / 744;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.hs-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-hero {
  padding-block: var(--s-7) var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.hs-h1 {
  font-family: var(--font-serif-tc);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}
.hs-h1 .en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-weight: 400;
  font-size: 0.34em;
  letter-spacing: 0;
  color: var(--muted-2);
}
.hs-lead {
  margin: var(--s-5) 0 0;
  font-family: var(--font-serif-tc);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.6;
  color: var(--muted-2);
  max-width: 56ch;
}

/* ============================================================
   V1 · Vertical timeline with sticky decade rail
   ============================================================ */
.hs-v1-shell {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s-7);
  padding-block: var(--s-7) var(--s-8);
  align-items: start;
}
@media (max-width: 900px) {
  .hs-v1-shell { grid-template-columns: 1fr; }
  .hs-rail { display: none; }
}

.hs-rail {
  position: sticky;
  top: 80px;
  align-self: start;
  padding-top: var(--s-2);
}
.hs-rail-label {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.hs-rail ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px;
  position: relative;
}
.hs-rail-indicator {
  position: absolute;
  left: -18px;
  top: 0;
  width: 3px;
  background: var(--brand);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
              height 260ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, height;
  pointer-events: none;
}
.hs-rail a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: 10px;
  font-family: var(--font-serif-tc);
  font-size: var(--t-body);   /* 15px：原 18px 太大、跟旁邊的 count 擠在一起 */
  color: var(--muted-2);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hs-rail a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.hs-rail a.is-active { color: var(--ink); }
/* override 全域 .d-name（line 421 是給 single-person hero 用的 clamp 48-88px）*/
.hs-rail .d-name { font-size: var(--t-body); font-weight: 500; letter-spacing: -0.005em; line-height: 1; }
.hs-rail .d-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.hs-rail a.is-active .d-count { color: var(--brand); }

.hs-main {
  display: grid;
  gap: var(--s-8);
}

.hs-decade { scroll-margin-top: 80px; }
.hs-decade-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.hs-decade-head h2 {
  font-family: var(--font-serif-tc);
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.hs-decade-head .suf {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-weight: 400;
  color: var(--muted-2);
  font-size: 0.5em;
  letter-spacing: 0;
}
.hs-decade-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* Timeline list — left rule + dots */
.hs-timeline {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: var(--s-5);
  position: relative;
}
.hs-timeline::before {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px;
  left: 88px;
  width: 1px;
  background: var(--rule);
}
.hs-event {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-5);
  position: relative;
  padding-left: 0;
}
.hs-dot {
  position: absolute;
  left: 84px;
  top: 10px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--brand);
}
.hs-year {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-top: 4px;
}
.hs-body {
  padding-left: 28px;
  display: grid;
  gap: 4px;
}
.hs-title {
  font-family: var(--font-serif-tc);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.3;
}
.hs-line {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted-2);
}


/* ============================================================
   /venue · 場地介紹
   ============================================================ */
.venue-page { background: var(--paper); }

.vn-photo {
  position: relative;
  background: var(--paper-2);
  overflow: hidden;
  width: 100%;
}
.vn-photo .ph-stripes {
  position: absolute; inset: 0;
  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
  );
}
.vn-photo-meta {
  position: absolute;
  left: 12px; bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
  padding: 6px 10px;
}

/* Specs key-value list (used across V1 + V2) */
.vn-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.vn-spec {
  display: grid;
  gap: 4px;
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.vn-spec dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.vn-spec dd {
  margin: 0;
  font-family: var(--font-serif-tc);
  font-size: 15px;
  color: var(--ink);
}


/* ============================================================
   V2 · Photo-led catalog
   ============================================================ */
/* 2 欄等高格線，無空白：大排練室左側挑高、兩個中排練室右側上下相疊、琴房底列 */
.vn-v2-wall {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 240px;
  gap: var(--s-3);
  padding-block: var(--s-6);
}
.vn-tile {
  position: relative;
  display: block;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  min-height: 0;
}
.vn-tile-0 { grid-column: 1; grid-row: 1 / span 2; }  /* 大排練室 — 左側挑高 */
.vn-tile-1 { grid-column: 2; grid-row: 1; }           /* 中排練室（潮州） */
.vn-tile-4 { grid-column: 2; grid-row: 2; }           /* 中排練室（敦南）— 緊接其上 */
.vn-tile-2 { grid-column: 1; grid-row: 3; }           /* 琴房 A */
.vn-tile-3 { grid-column: 2; grid-row: 3; }           /* 琴房 B */
.vn-tile .vn-tile-photo { aspect-ratio: auto; width: 100%; height: 100%; }
.vn-tile .vn-tile-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) {
  .vn-v2-wall { grid-auto-rows: 150px; }
}
.vn-tile-cap {
  position: absolute;
  left: 12px; bottom: 12px;
  display: grid; gap: 2px;
  background: var(--paper);
  padding: 8px 10px;
}
.vn-tile-bldg {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}
.vn-tile-name {
  font-family: var(--font-serif-tc);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.vn-v2-rows {
  display: grid;
  gap: var(--s-8);
  padding-block: var(--s-8);
  border-top: 1px solid var(--rule);
}
.vn-v2-row {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--s-7);
  align-items: start;
  scroll-margin-top: 80px;
}
.vn-v2-row:nth-child(even) { grid-template-columns: 6fr 6fr; direction: rtl; }
.vn-v2-row:nth-child(even) > * { direction: ltr; }
@media (max-width: 800px) { .vn-v2-row, .vn-v2-row:nth-child(even) { grid-template-columns: 1fr; direction: ltr; } }

.vn-v2-info { display: grid; gap: var(--s-4); padding-top: var(--s-2); }
.vn-v2-bldg {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}
.vn-v2-info h3 {
  font-family: var(--font-serif-tc);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 0;
  display: grid;
  gap: 4px;
}
.vn-v2-info h3 .en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-weight: 400;
  font-size: 0.4em;
  color: var(--muted-2);
}
.vn-v2-use {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
.vn-v2-equip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vn-v2-equip-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  color: var(--muted-2);
}

.vn-v2-contact {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: var(--s-6);
  padding-block: var(--s-8);
  border-top: 1px solid var(--rule);
}
@media (max-width: 900px) { .vn-v2-contact { grid-template-columns: 1fr; } }
.vn-v2-bldg-card h4 {
  font-family: var(--font-serif-tc);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
  display: grid;
  gap: 2px;
}
.vn-v2-bldg-card h4 .en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-weight: 400;
  font-size: 0.55em;
  color: var(--muted-2);
}
.vn-v2-rental p {
  margin: var(--s-3) 0 var(--s-4);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-2);
}

/* ============================================================
   /member · 加入會員 (compact, verbatim source copy)
   ============================================================ */
.member-page { background: var(--paper); }

.mb-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand);
}

.mb-join {
  display: inline-flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--font-sans-tc);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background var(--dur) var(--ease-out), gap var(--dur) var(--ease-out);
  width: 100%;
}
.mb-join:hover { background: var(--brand); gap: 16px; }
.mb-join .arr { font-family: var(--font-mono); font-size: 14px; }
.mb-join-lg { padding: 16px 22px; font-size: 15px; }

/* Hero (compact) */
.mb-hero {
  padding-block: var(--s-6) var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.mb-hero .mb-eyebrow { margin-bottom: var(--s-3); }
.mb-h1 {
  font-family: var(--font-serif-tc);
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}
.mb-tagline {
  margin: var(--s-4) 0 0;
  font-family: var(--font-serif-tc);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  max-width: 52ch;
}

/* Two-column shell */
.mb-shell {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-7);
  padding-block: var(--s-6) var(--s-8);
  align-items: start;
}
@media (max-width: 900px) {
  .mb-shell { grid-template-columns: 1fr; }
}

/* Content blocks */
.mb-content { display: grid; gap: var(--s-7); }
.mb-block { display: grid; gap: var(--s-4); }
.mb-h2 {
  font-family: var(--font-serif-tc);
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.mb-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted-2);
}

/* Bullets — numbered, verbatim source text */
.mb-bullets {
  list-style: none; margin: 0; padding: 0;
}
.mb-bullet {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
}
.mb-bullet:first-child { border-top: 1px solid var(--rule); }
.mb-bullet-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--brand);
}
.mb-bullet-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
}

/* Notes */
.mb-privacy {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted-2);
}
.mb-disclaimer-bold {
  margin: var(--s-3) 0 0;
  font-family: var(--font-serif-tc);
  font-size: 14px;
  color: var(--ink);
}

/* Sticky CTA panel */
.mb-aside {
  position: sticky;
  top: 80px;
  align-self: start;
}
.mb-sticky {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
}
.mb-sticky-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.55);
}
.mb-sticky-tagline {
  margin: 0;
  font-family: var(--font-serif-tc);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(245,241,232,0.9);
}
.mb-sticky .mb-join {
  background: var(--paper);
  color: var(--ink);
}
.mb-sticky .mb-join:hover { background: #fff4a8; color: var(--ink); }

/* ============================================================
   /support · 支持室內 (donation tiers)
   Shares .member-page base.
   ============================================================ */
.support-page { background: var(--paper); }

.sp-hero {
  padding-block: var(--s-7) var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.sp-hero .mb-eyebrow { margin-bottom: var(--s-3); }
.sp-h1 {
  font-family: var(--font-serif-tc);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
}
.sp-program {
  margin: var(--s-4) 0;
  font-family: var(--font-serif-tc);
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 500;
  color: var(--brand);
  letter-spacing: 0.04em;
}
.sp-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink);
  max-width: 70ch;
}


/* ============================================================
   V2 · 卡片網格 grid
   ============================================================ */
.sp-grid-wrap { padding-block: var(--s-7); }
.sp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 1100px) { .sp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .sp-grid { grid-template-columns: 1fr; } }

.sp-card {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--rule);
  background: var(--paper);
}
.sp-card-head {
  display: grid;
  gap: 6px;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.sp-card-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--brand);
}
.sp-card-amount {
  font-family: var(--font-serif-tc);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sp-card-cn {
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--font-serif-tc);
  font-size: 13px;
  color: var(--muted-2);
}
.sp-card-cn .note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  padding: 2px 7px;
}
.sp-card-perks {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: 6px;
}
.sp-card-perks li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
}
.sp-card-perks li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 10px;
  height: 1px;
  background: var(--brand);
}

.sp-grid-cta {
  margin-top: var(--s-6);
  display: flex;
  justify-content: center;
}
.sp-grid-cta .mb-join { width: auto; min-width: 240px; }

/* ============================================================
   贊助方式 — shared
   ============================================================ */
.sp-methods {
  padding-block: var(--s-7) var(--s-9);
  border-top: 1px solid var(--rule);
}
.sp-bank {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: var(--s-6);
  border-top: 1px solid var(--rule);
}
@media (max-width: 700px) { .sp-bank { grid-template-columns: 1fr; } }
.sp-bank-row {
  display: grid;
  gap: 4px;
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}
.sp-bank-row dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.sp-bank-row dd {
  margin: 0;
  font-family: var(--font-serif-tc);
  font-size: 16px;
  color: var(--ink);
}
.sp-bank-row dd.acct {
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.04em;
}

.sp-methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 800px) { .sp-methods-grid { grid-template-columns: 1fr; } }
.sp-method {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--rule);
  align-content: start;
}
.sp-method-label {
  font-family: var(--font-serif-tc);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.sp-method p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted-2);
}
.sp-method .mb-join {
  margin-top: var(--s-2);
  width: auto;
  justify-self: start;
}

/* ============================================================
   /感謝基地 · 基地贊助感謝 (patron wall)
   ============================================================ */
.patron-page { background: var(--paper); }

.pt-hero {
  padding-block: var(--s-8) var(--s-7);
  border-bottom: 1px solid var(--rule);
}
.pt-hero .mb-eyebrow { margin-bottom: var(--s-4); }
.pt-h1 {
  font-family: var(--font-serif-tc);
  font-size: clamp(34px, 4.8vw, 54px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}
.pt-h1 .en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-weight: 400;
  font-size: 0.36em;
  letter-spacing: 0;
  color: var(--muted-2);
}
.pt-intro {
  margin: var(--s-5) 0 0;
  font-family: var(--font-serif-tc);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.75;
  color: var(--muted-2);
  max-width: 64ch;
}

.pt-cta {
  padding-block: var(--s-8) var(--s-9);
  border-top: 1px solid var(--rule);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--s-5);
}
.pt-cta p {
  margin: 0;
  font-family: var(--font-serif-tc);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--muted-2);
}

/* ============================================================
   V1 · Editorial wall
   ============================================================ */
.pt-v1-wall {
  padding-block: var(--s-8) var(--s-7);
  display: grid;
  gap: var(--s-9);
}

.pt-v1-tier {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--rule);
}
.pt-v1-tier:last-child { border-bottom: 0; padding-bottom: 0; }
.pt-v1-tier-head {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}
.pt-v1-tier-amount {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  color: var(--brand);
}
/* 致謝牆字級統一吃 type token（不再逐級放大）*/
.pt-v1-tier-head h2 {
  font-family: var(--font-serif-tc);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}
.pt-v1-tier-period {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: var(--s-2);
  line-height: 1.5;
}
.pt-v1-tier-count {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}

.pt-v1-names {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0 var(--s-7);
  align-content: start;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.pt-v1-names li {
  font-family: var(--font-serif-tc);
  font-size: var(--t-body-lg);
  letter-spacing: -0.005em;
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--rule) 50%, transparent);
}
@media (max-width: 800px) {
  .pt-v1-tier { grid-template-columns: 1fr; }
}

/* 第二區塊：基地計畫贊助人（與上方分級名單以粗線分隔的獨立致謝牆）*/
.pt-base {
  padding-block: var(--s-8) var(--s-7);
  border-top: 3px solid var(--ink);
}
.pt-base-banner { margin-bottom: var(--s-6); }
.pt-base-head h2 {
  font-family: var(--font-serif-tc);
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pt-base-intro {
  margin-top: var(--s-2);
  color: var(--muted);
  font-size: var(--t-body);
  line-height: 1.7;
}
.pt-base-group { margin-top: var(--s-7); }
.pt-base-sub {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  color: var(--brand);
  margin: 0 0 var(--s-2);
}
.pt-base-count { color: var(--muted); margin-left: 6px; }

/* ============================================================
   購票・優惠總覽（page-tickets.php）
   ============================================================ */
.tickets-page .tk-list { display: grid; gap: var(--s-6); padding-block: var(--s-7) var(--s-9); }
.tk-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-6);
  align-items: start;
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 720px) { .tk-card { grid-template-columns: 1fr; gap: var(--s-4); } }
.tk-card__media {
  display: block;
  aspect-ratio: 14 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.tk-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-card__title { font-family: var(--font-serif-tc); font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.015em; margin: 0; }
.tk-card__title a { color: var(--ink); text-decoration: none; }
.tk-card__title a:hover { color: var(--brand); }
.tk-card__date { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.04em; color: var(--muted); margin-top: 4px; }
.tk-plans { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 0; }
.tk-plan {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--s-4);
  align-items: center;
  padding: var(--s-3) 0;
  border-top: 1px solid color-mix(in oklab, var(--rule) 55%, transparent);
}
.tk-plan__name { font-family: var(--font-sans-tc); font-weight: 500; color: var(--ink); }
.tk-plan__summary { color: var(--brand); margin-left: 8px; }
.tk-plan__deadline { grid-column: 1; font-family: var(--font-mono); font-size: var(--t-meta); color: var(--muted); }
.tk-plan__cta {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; white-space: nowrap;
  font-family: var(--font-sans-tc); font-size: var(--t-meta); font-weight: 500;
  color: var(--brand); border: 1px solid var(--brand); padding: 8px 14px; text-decoration: none;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.tk-plan__cta:hover { background: var(--brand); color: var(--paper); }
.tk-card__more {
  display: inline-block; margin-top: var(--s-4);
  font-family: var(--font-sans-tc); font-size: var(--t-meta); color: var(--ink);
  border-bottom: 1px solid var(--rule-strong); text-decoration: none;
}
.tk-card__more:hover { color: var(--brand); border-bottom-color: var(--brand); }
.tk-empty { padding: var(--s-8) 0; color: var(--muted); font-family: var(--font-serif-tc); }


/* ============================================================
   News archive · 最新消息
   ============================================================ */
.news-page { background: var(--paper); }

.nx-shell { padding-block: var(--s-6) var(--s-9); }

/* Filter bar */
.nx-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.nx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-4);
}
.nx-tab {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur) var(--ease-out);
  border-bottom: 1.5px solid transparent;
}
.nx-tab:hover { color: var(--ink); }
.nx-tab.is-active { color: var(--ink); border-bottom-color: var(--brand); }

.nx-year {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.nx-year label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.nx-year select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  padding: 6px 28px 6px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.nx-year select:focus { outline: 0; border-color: var(--ink); }
.nx-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-left: var(--s-3);
  border-left: 1px solid var(--rule);
}

/* Shared bits */
.nx-thumb {
  position: relative;
  width: 100%;
  background: var(--paper-2);
  overflow: hidden;
}
.nx-thumb .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
  );
}
.nx-thumb-meta {
  position: absolute;
  inset: auto 8px 8px auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
  padding: 4px 8px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.nx-card-row:hover .nx-thumb-meta { opacity: 1; }

.nx-card-body { display: grid; gap: var(--s-3); }
.nx-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--brand);
}
.nx-title {
  font-family: var(--font-serif-tc);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0;
  line-height: 1.3;
}
.nx-summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted-2);
}

.nx-empty {
  padding: var(--s-8) 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}


/* V2 · 2-col row list, horizontal thumb */
.nx-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s-6);
  row-gap: 0;
}
@media (max-width: 900px) { .nx-rows { grid-template-columns: 1fr; } }
.nx-card-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  align-items: start;
  transition: background var(--dur) var(--ease-out);
}
.nx-card-row:nth-child(-n+2) { border-top: 1px solid var(--rule); }
.nx-card-row:hover { background: color-mix(in oklab, var(--ink) 2%, transparent); }
.nx-card-row .nx-thumb { aspect-ratio: 4 / 3; }
.nx-card-row .nx-title { font-size: 18px; line-height: 1.35; }
.nx-card-row .nx-summary { font-size: 14px; line-height: 1.65; }
.nx-arr {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur) var(--ease-out);
}
.nx-card-row:hover .nx-arr { color: var(--brand); }
@media (max-width: 700px) {
  .nx-card-row { grid-template-columns: 1fr; }
  .nx-card-row:nth-child(-n+2) { border-top: 0; }
  .nx-card-row:first-child { border-top: 1px solid var(--rule); }
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5) var(--s-4);
}

/* ============================================================
   /about-us · 關於我們 minimal layout
   ============================================================ */
.about-shell {
  display: grid;
  gap: var(--s-7);
  padding-block: var(--s-6) var(--s-9);
  max-width: 880px;
}
.about-hero {
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  background: var(--paper-2);
}
.about-hero img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.about-title h1 {
  font-family: var(--font-serif-tc);
  font-size: var(--t-h1);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.about-title h1 .en {
  display: block;
  font-family: var(--font-serif-en);
  font-style: italic;
  font-weight: 500;
  font-size: .38em;
  letter-spacing: 0.01em;
  color: var(--muted-2);
  margin-top: var(--s-3);
}
.about-body {
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  line-height: 1.85;
  color: var(--ink);
}
.about-body p { margin: 0 0 var(--s-5) 0; }
.about-body p:last-child { margin-bottom: 0; }

/* Rest band (after AD + featured) */
.rest-band {
  display: grid;
  gap: var(--s-5);
}

/* ============================================================
   合作藝術家 grid（design canvas 沒交付這條，在 WP 補上）
   ============================================================ */
.persons-grid-wrap { width: 100%; }
.persons-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-5) var(--s-4);
  align-items: start;
}
@media (max-width: 1100px) { .persons-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width:  800px) { .persons-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  520px) { .persons-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); } }

/* 無照片的合作藝術家：grid 下方純文字列表收容（不漏人）*/
.persons-textlist {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.persons-textlist__h {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-4);
}

/* ── 合作藝術家分頁器（純前端、手機友善）────────────────────── */
.persons-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-7);
}
.persons-pager:empty { display: none; }
.pg-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 var(--s-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.pg-btn:hover:not(:disabled):not(.is-active) { border-color: var(--rule-strong); }
.pg-btn.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  cursor: default;
}
.pg-btn:disabled { opacity: .35; cursor: default; }
.pg-gap {
  min-width: 24px;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
}

/* 真實照片在 .p-photo 容器內：1:1 正方形，cover 填滿、頭部優先（直式照不切到臉）*/
.p-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.p-card--noclick { cursor: default; opacity: .92; }
.p-card--noclick:hover { transform: none; }

/* AD hero / single-person hero 真照片：頭部優先（直式照不切到臉）*/
.ad-photo img,
.d-v1-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ============================================================
   防呆：所有圖容器的 img 都要鎖死大小，避免 source 太大撐爆容器
   依 [[feedback-design-merge-checks]] 教訓
   ============================================================ */
.ac-photo img,         /* 首頁學苑卡 + archive */
.t-v1-hero-photo img,  /* single-team hero banner */
.vn-photo img {        /* venue 房間照（牆 + 長 row）*/
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 上方既有 .vn-photo / .t-v1-hero-photo 已經 position: relative + overflow: hidden */