/* ==========================================================================
   CYWO — 設計系統（白色版）
   白紙（節目單）、墨黑（文字）、銅管金（點綴）、朱紅（狀態與重點）
   ========================================================================== */

:root {
	--bg: #fbfaf7;
	--bg-2: #f3f0ea;
	--bg-3: #e9e4da;
	--card: #ffffff;
	--ink: #16140f;
	--ink-2: #57524a;
	--ink-3: #8b857a;
	--line: rgba(22, 20, 15, .12);
	--line-2: rgba(22, 20, 15, .22);
	--brass: #a8823f;
	--brass-ink: #86652b;
	--red: #c4432b;
	--on-photo: #fbfaf7;
	--brass-light: #e5cf9f;

	/* 照片上的共用暗化層（設計規範第二節）：放在所有照片上層，切換照片時不動 */
	--scrim-hero:
		radial-gradient(62% 46% at 50% 48%, rgba(14, 12, 9, .62) 0%, rgba(14, 12, 9, .34) 48%, rgba(14, 12, 9, 0) 100%),
		linear-gradient(180deg, rgba(14, 12, 9, .5) 0%, rgba(14, 12, 9, .16) 26%, rgba(14, 12, 9, .2) 62%, rgba(14, 12, 9, .72) 100%);
	--scrim-side: linear-gradient(90deg, rgba(22, 20, 15, .78) 0%, rgba(22, 20, 15, .35) 55%, rgba(22, 20, 15, .08) 100%);

	--serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
	--sans: "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
	--latin: "Cormorant Garamond", "Times New Roman", serif;

	--step--1: clamp(.82rem, .79rem + .15vw, .9rem);
	--step-0: clamp(1rem, .96rem + .2vw, 1.1rem);
	--step-1: clamp(1.18rem, 1.08rem + .5vw, 1.45rem);
	--step-2: clamp(1.45rem, 1.25rem + 1vw, 2rem);
	--step-3: clamp(1.85rem, 1.45rem + 2vw, 3rem);
	--step-4: clamp(2.3rem, 1.6rem + 3.4vw, 4.6rem);
	--step-5: clamp(2.8rem, 1.6rem + 5.6vw, 7.5rem);

	--gutter: clamp(20px, 4vw, 56px);
	--max: 1320px;
	--read: 700px;
	--radius: 22px;
	--radius-sm: 12px;
	--ease: cubic-bezier(.22, 1, .36, 1);
	--header-h: 68px;
	--shadow: 0 1px 2px rgba(22, 20, 15, .04), 0 12px 32px -12px rgba(22, 20, 15, .18);
	--shadow-lg: 0 2px 6px rgba(22, 20, 15, .05), 0 30px 70px -24px rgba(22, 20, 15, .3);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--step-0);
	line-height: 1.85;
	letter-spacing: .02em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .04em;
	text-wrap: balance;
}

p { margin: 0 0 1.2em; text-wrap: pretty; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 6px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed; z-index: 1000; top: 12px; left: 12px;
	width: auto; height: auto; clip: auto;
	padding: 10px 16px; border-radius: 10px;
	background: var(--ink); color: var(--bg);
}

.wrap {
	width: 100%;
	max-width: calc(var(--max) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--read { max-width: calc(var(--read) + var(--gutter) * 2); }

/* ---------- 文字元件 ---------- */

.eyebrow {
	display: inline-flex;
	align-items: baseline;
	gap: .8em;
	margin: 0 0 1.1rem;
	color: var(--brass-ink);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: .22em;
}

.eyebrow em {
	font-family: var(--latin);
	font-size: 1.25em;
	font-style: italic;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--ink-3);
}

.lead { font-size: var(--step-1); line-height: 1.85; color: var(--ink-2); }
.num { font-family: var(--latin); font-weight: 500; letter-spacing: 0; font-feature-settings: "lnum" 1; }

/* ---------- 按鈕 ---------- */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 48px;
	padding: .7em 1.4em;
	border-radius: 999px;
	border: 1px solid var(--ink);
	color: var(--ink);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: .12em;
	overflow: hidden;
	isolation: isolate;
	transition: color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease);
}

.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ink);
	transform: translateY(101%);
	transition: transform .5s var(--ease);
}

.btn:active { transform: scale(.97); }
.btn .arrow { transition: transform .45s var(--ease); }

@media (hover: hover) {
	.btn:hover { color: var(--bg); }
	.btn:hover::before { transform: translateY(0); }
	.btn:hover .arrow { transform: translateX(4px); }
}

.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid::before { background: var(--brass-ink); }
.btn--solid:hover { border-color: var(--brass-ink); }
.btn--light { border-color: rgba(251, 250, 247, .7); color: var(--on-photo); }
.btn--light::before { background: var(--on-photo); }
@media (hover: hover) { .btn--light:hover { color: var(--ink); } }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-height: 44px;
	color: var(--ink);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: .12em;
}

.link-arrow span { background: linear-gradient(currentColor 0 0) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .5s var(--ease), color .3s; }
@media (hover: hover) {
	.link-arrow:hover span { background-size: 0 1px; background-position: 100% 100%; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.chips a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 1.1em;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	font-size: var(--step--1);
	color: var(--ink-2);
	transition: all .35s var(--ease);
}

.chips a:hover { border-color: var(--ink); color: var(--ink); }
.chips a[aria-current="true"], .chips a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.status {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .25em .85em;
	border-radius: 999px;
	background: rgba(196, 67, 43, .1);
	color: var(--red);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .16em;
}

.status--upcoming::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s infinite; }
.status--past { background: var(--bg-2); color: var(--ink-2); }
.status--undated { background: var(--bg-2); color: var(--ink-3); }
@keyframes pulse { 50% { opacity: .25; } }

/* 五線譜 */
.staff { display: grid; gap: 7px; width: 100%; }
.staff span { display: block; height: 1px; background: var(--line); transform-origin: left center; }

/* ==========================================================================
   頁首
   ========================================================================== */

.site-header {
	position: fixed;
	z-index: 100;
	inset: 0 0 auto;
	height: var(--header-h);
	transition: transform .55s var(--ease), background-color .4s, box-shadow .4s;
}

.site-header.is-scrolled {
	background: rgba(251, 250, 247, .8);
	-webkit-backdrop-filter: saturate(170%) blur(18px);
	backdrop-filter: saturate(170%) blur(18px);
	box-shadow: 0 1px 0 var(--line);
}

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { width: clamp(136px, 13vw, 164px); height: auto; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }

.nav__list {
	display: flex;
	gap: clamp(16px, 2.2vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: .16em;
}

.nav__list a { position: relative; display: block; padding-block: 8px; color: var(--ink-2); transition: color .3s; }
.nav__list a::after { content: ""; position: absolute; left: 0; right: .16em; bottom: 2px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav__list a:hover, .nav__list .current-menu-item > a { color: var(--ink); }
.nav__list a:hover::after, .nav__list .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }
.nav .btn { min-height: 40px; padding: .4em 1.15em; }

.menu-toggle { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; }
.menu-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform .45s var(--ease); }
.menu-toggle span:nth-child(1) { top: 17px; }
.menu-toggle span:nth-child(2) { top: 26px; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-menu {
	position: fixed;
	z-index: 90;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: calc(var(--header-h) + 24px) var(--gutter) 32px;
	background: var(--bg);
	overflow-y: auto;
	overscroll-behavior: contain;
	clip-path: inset(0 0 100% 0);
	visibility: hidden;
	transition: clip-path .7s var(--ease), visibility 0s .7s;
}

.menu-open .mobile-menu { clip-path: inset(0); visibility: visible; transition: clip-path .7s var(--ease), visibility 0s; }
.mobile-menu ul { margin: 0 0 auto; padding: 0; list-style: none; }
.mobile-menu li { overflow: hidden; border-bottom: 1px solid var(--line); }

.mobile-menu li > a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 14px 0 6px;
	font-family: var(--serif);
	font-size: clamp(1.7rem, 7.5vw, 2.3rem);
	font-weight: 700;
	letter-spacing: .1em;
	transform: translateY(105%);
	transition: transform .8s var(--ease);
}

.mobile-menu li > a::after { content: attr(data-en); font-family: var(--latin); font-style: italic; font-weight: 500; font-size: 1rem; color: var(--brass-ink); }
.menu-open .mobile-menu li > a { transform: none; }
.menu-open .mobile-menu li:nth-child(2) > a { transition-delay: .05s; }
.menu-open .mobile-menu li:nth-child(3) > a { transition-delay: .1s; }
.menu-open .mobile-menu li:nth-child(4) > a { transition-delay: .15s; }
.menu-open .mobile-menu li:nth-child(5) > a { transition-delay: .2s; }
/* 第二層：大字下方一排小連結，手機不必先點進去再找 */
.mobile-menu__sub { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0 0 14px; opacity: 0; transition: opacity .6s var(--ease) .25s; }
.menu-open .mobile-menu__sub { opacity: 1; }
.mobile-menu__sub a { display: inline-flex; align-items: center; min-height: 36px; font-size: .95rem; color: var(--ink-2); }
.mobile-menu__foot { display: grid; gap: 14px; margin-top: 28px; }
.mobile-menu__foot .btn { width: 100%; }
.mobile-menu__social { display: flex; gap: 20px; color: var(--ink-2); font-size: var(--step--1); }

/* ==========================================================================
   首頁：主視覺（全螢幕「開幕」）
   白幕上寫出標準字 → 照片像舞台幕從中間打開 → 標準字轉白、五線譜像聲波起伏
   ========================================================================== */

.hero {
	position: relative;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
	background: var(--ink);
	color: var(--on-photo);
	isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; isolation: isolate; }
.hero__slide { position: absolute; inset: 0; opacity: 0; background: var(--ink) center 55% / cover no-repeat; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transform: scale(1.06); will-change: transform; }

.hero__shade {
	position: absolute;
	z-index: 5;
	inset: 0;
	background: var(--scrim-hero);
	pointer-events: none;
}

.hero__waves {
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	bottom: 6%;
	width: 100%;
	height: clamp(120px, 22vh, 220px);
	overflow: visible;
	pointer-events: none;
}

.hero__waves path { fill: none; stroke: var(--brass-light); stroke-opacity: .55; stroke-width: 1.4; vector-effect: non-scaling-stroke; }

.hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 2.4vh, 24px);
	padding: var(--header-h) var(--gutter) clamp(120px, 18vh, 200px);
	text-align: center;
}

.hero__eyebrow { display: flex; gap: .9em; align-items: baseline; margin: 0; color: rgba(251, 250, 247, .92); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); font-size: var(--step--1); letter-spacing: .24em; }
.hero__eyebrow em { font-family: var(--latin); font-size: 1.25em; font-style: italic; letter-spacing: .04em; }
.hero__title { width: min(1000px, 86vw); }
.hero__word { width: 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)) drop-shadow(0 8px 36px rgba(0, 0, 0, .5)); }
.hero__tagline { margin: 0; font-family: var(--serif); font-size: var(--step-2); font-weight: 500; letter-spacing: .42em; padding-left: .42em; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 24px rgba(0, 0, 0, .55); }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(4px, 1.5vh, 16px); }
.btn--white { border-color: var(--on-photo); background: var(--on-photo); color: var(--ink); }
.btn--white::before { background: var(--brass-light); }
@media (hover: hover) { .btn--white:hover { color: var(--ink); border-color: var(--brass-light); } }

.hero__dots { position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(30px, 5vh, 52px); display: flex; gap: 6px; }
.hero__dots button { display: grid; place-items: center; width: 40px; height: 32px; }
.hero__dots i { position: relative; display: block; width: 28px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(251, 250, 247, .35); }
.hero__dots i::after { content: ""; position: absolute; inset: 0; background: var(--on-photo); transform: scaleX(0); transform-origin: left; }
.hero__dots button[aria-current="true"] i::after { animation: dot 7s linear forwards; }
@keyframes dot { to { transform: scaleX(1); } }

/* 開幕白幕（只在有動態時出現） */
.hero__curtain { display: none; }

.has-motion .hero__curtain {
	position: fixed;
	z-index: 300;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 0 8vw;
	background: var(--bg);
	pointer-events: none;
}

.has-motion .hero__curtain img { width: min(1000px, 86vw); clip-path: inset(0 100% 0 0); }
.has-motion .hero__content > *,
.has-motion .hero__dots { opacity: 0; }
.intro-done .hero__curtain { display: none; }

/* 頁首在照片上時改白字 */
.brand { position: relative; }
.brand__light { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
.brand__dark { transition: opacity .4s; }
.site-header.is-over .brand__light { opacity: 1; }
.site-header.is-over .brand__dark { opacity: 0; }
.site-header.is-over .nav__list a { color: rgba(251, 250, 247, .85); text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.site-header.is-over .nav__list a::after { background: var(--on-photo); }
.site-header.is-over .nav__list a:hover, .site-header.is-over .nav__list .current-menu-item > a { color: var(--on-photo); }
.site-header.is-over .nav .btn { border-color: rgba(251, 250, 247, .7); color: var(--on-photo); }
.site-header.is-over .nav .btn::before { background: var(--on-photo); }
@media (hover: hover) { .site-header.is-over .nav .btn:hover { color: var(--ink); } }
.site-header.is-over .menu-toggle span { background: var(--on-photo); }
.menu-open .site-header.is-over .brand__light { opacity: 0; }
.menu-open .site-header.is-over .brand__dark { opacity: 1; }
.menu-open .site-header.is-over .menu-toggle span { background: var(--ink); }

/* ==========================================================================
   首頁：區塊共用
   ========================================================================== */

.section { padding-block: clamp(80px, 13vh, 150px); }
.section--tint { background: var(--bg-2); }
.section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; margin-bottom: clamp(32px, 5vh, 56px); }
.section__title { font-size: var(--step-4); font-weight: 900; letter-spacing: .05em; line-height: 1.15; }

/* 下一場演出（推廣） */
.promo { overflow: clip; }
.promo__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 104px); align-items: center; }
.promo__art { position: relative; perspective: 1400px; }
.promo__glow { position: absolute; inset: -14% -18%; z-index: -1; background: radial-gradient(closest-side, rgba(168, 130, 63, .32), rgba(168, 130, 63, 0)); filter: blur(30px); pointer-events: none; }
.promo__frame { display: block; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-3); box-shadow: var(--shadow-lg); transform-origin: center bottom; will-change: transform; }
.promo__frame img { width: 100%; }
.promo__art:not(.is-poster) .promo__frame { aspect-ratio: 4 / 5; }
.promo__art:not(.is-poster) .promo__frame img { height: 100%; object-fit: cover; }
.promo__count { display: flex; align-items: baseline; gap: .35em; margin: 0 0 10px; color: var(--ink-2); font-size: var(--step-1); letter-spacing: .1em; }
.promo__count b { font-family: var(--latin); font-size: clamp(3.2rem, 2rem + 4vw, 5.6rem); font-weight: 500; line-height: 1; color: var(--brass-ink); letter-spacing: 0; }
.promo__title { font-size: var(--step-4); font-weight: 900; letter-spacing: .04em; line-height: 1.2; }
.promo__sub { margin: 14px 0 0; color: var(--ink-2); font-size: var(--step-1); }
.promo__info .facts { margin-top: 28px; }
.promo__more { margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.promo__more a { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); }
.promo__more .num { min-width: 3.4em; color: var(--brass-ink); font-size: 1.15rem; }
.promo__empty { max-width: 760px; }
.promo__empty .lead { margin-top: 18px; }

.facts { margin: 0 0 32px; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.facts li { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: var(--step-0); }
.facts span { color: var(--ink-3); font-size: var(--step--1); letter-spacing: .2em; padding-top: .15em; }

/* 下一場演出：照片為主（電腦：一大四小；平板：兩欄；手機：左右滑） */
.shows__rail { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.shows__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vh, 44px) clamp(16px, 2vw, 28px); }
.show { display: flex; flex-direction: column; min-width: 0; }
.show__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-3); }
.show__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
@media (hover: hover) { .show:hover .show__img img { transform: scale(1.04); } }
.show--feature { grid-column: span 2; grid-row: span 2; }
.show--feature .show__img { flex: 1; aspect-ratio: auto; min-height: 320px; }
.show__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; color: var(--ink-3); font-size: .8rem; letter-spacing: .12em; }
.show__meta span + span { color: var(--brass-ink); }
.show__title { margin-top: 6px; font-family: var(--serif); font-size: var(--step-1); font-weight: 600; line-height: 1.5; }
.show--feature .show__title { font-size: var(--step-2); }
.show__venue { margin: 4px 0 0; color: var(--ink-2); font-size: var(--step--1); }

/* 消息卡 */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.news-card { display: flex; flex-direction: column; }
.news-card__img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-3); }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
@media (hover: hover) { .news-card:hover .news-card__img img { transform: scale(1.04); } }
.news-card__body { min-width: 0; }
.news-card__meta { display: flex; gap: 12px; margin-top: 16px; color: var(--ink-3); font-size: .8rem; letter-spacing: .12em; }
.news-card__meta b { color: var(--brass-ink); font-weight: 500; }
.news-card__title { margin-top: 6px; font-family: var(--serif); font-size: var(--step-1); font-weight: 600; line-height: 1.55; }

/* 關於：文字＋照片，數字在下方 */
.about__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.about__text .btn-row { margin-top: 36px; }
.about__img { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--bg-3); }
.about__img img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }

/* 關於：宣言＋數字 */
.manifesto__text { max-width: 24em; font-family: var(--serif); font-size: clamp(1.4rem, 1rem + 1.5vw, 2.3rem); font-weight: 500; line-height: 1.7; letter-spacing: .06em; }
.manifesto__text .w { color: rgba(22, 20, 15, .3); transition: color .35s ease-out; }
.manifesto__text .w.is-lit { color: var(--ink); }
.manifesto__text em { font-style: normal; }
.manifesto__text em .w.is-lit { color: var(--brass-ink); }

.numbers__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 8vh, 88px); border-top: 1px solid var(--line-2); }
.stat { padding: 26px 20px 6px 0; border-right: 1px solid var(--line); }
.stat + .stat { padding-left: clamp(16px, 2vw, 28px); }
.stat:last-child { border-right: 0; }
.stat__value { display: flex; align-items: baseline; gap: .1em; font-family: var(--latin); font-size: clamp(2.8rem, 1.5rem + 4.4vw, 6rem); font-weight: 500; line-height: 1; }
.stat__value small { font-family: var(--sans); font-size: var(--step--1); letter-spacing: .1em; color: var(--brass-ink); }
.stat__label { margin-top: 12px; color: var(--ink-2); font-size: var(--step--1); letter-spacing: .14em; }
.numbers__note { margin-top: 24px; color: var(--ink-3); font-size: .78rem; letter-spacing: .08em; }

/* 三個信念：圓角照片卡依序疊上 */
.pillars { padding-bottom: clamp(40px, 8vh, 80px); }

.pillar {
	position: sticky;
	top: calc(var(--header-h) + 16px);
	height: calc(100svh - var(--header-h) - 32px);
	min-height: 460px;
	margin: 0 var(--gutter) 24px;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--ink);
	color: var(--on-photo);
	transform-origin: center top;
}

.pillar__media { position: absolute; inset: 0; }
.pillar__media img { width: 100%; height: 100%; object-fit: cover; }
.pillar__media::after { content: ""; position: absolute; inset: 0; background: var(--scrim-side); }
.pillar__dim { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; }
.pillar__body { position: relative; display: grid; align-content: end; height: 100%; padding: clamp(28px, 5vw, 72px); max-width: 760px; }
.pillar__index { margin-bottom: 14px; font-family: var(--latin); font-style: italic; font-size: var(--step-1); color: var(--brass-light); }
.pillar__title { font-size: var(--step-5); font-weight: 900; letter-spacing: .1em; line-height: 1.05; color: var(--on-photo); }
.pillar__en { display: block; margin: 12px 0 22px; font-family: var(--latin); font-size: var(--step-2); font-style: italic; color: rgba(251, 250, 247, .75); }
.pillar__text { max-width: 30em; margin: 0; color: rgba(251, 250, 247, .88); }

/* 成員 */
.faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.face { display: block; }
.face__img { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-3); }
.face__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: filter .8s var(--ease), transform 1.1s var(--ease); }
@media (hover: hover) { .face:hover .face__img img { transform: scale(1.04); } }
.face__role { margin-top: 14px; color: var(--brass-ink); font-size: .78rem; letter-spacing: .18em; }
.face__name { font-family: var(--serif); font-size: var(--step-1); font-weight: 700; letter-spacing: .1em; }

/* 加入我們 */

.marquee { display: flex; overflow: hidden; margin-top: clamp(56px, 9vh, 96px); border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; flex-shrink: 0; gap: 2.2em; padding: 20px 1.1em; font-family: var(--serif); font-size: var(--step-2); color: var(--ink-3); white-space: nowrap; animation: marquee 50s linear infinite; }
.marquee__track span::after { content: "♪"; margin-left: 2.2em; color: var(--brass); font-size: .6em; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ==========================================================================
   內頁
   ========================================================================== */

.page-hero { padding: calc(var(--header-h) + clamp(48px, 10vh, 120px)) 0 clamp(36px, 6vh, 64px); }
.page-hero__title { font-size: var(--step-5); font-weight: 900; letter-spacing: .08em; line-height: 1.1; }
.page-hero__lead { max-width: 34em; margin: 24px 0 0; }

.sub-nav { position: sticky; z-index: 20; top: var(--header-h); padding: 12px 0; background: rgba(251, 250, 247, .8); -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px); border-bottom: 1px solid var(--line); transition: top .55s var(--ease); }
.sub-nav .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.sub-nav .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-right: 24px; }
.sub-nav .chips::-webkit-scrollbar { display: none; }
.sub-nav .chips a { white-space: nowrap; }

/* 即將演出（大列） */
.upcoming-row { display: grid; grid-template-columns: 8em minmax(0, 1fr) 300px; gap: 24px clamp(24px, 4vw, 56px); align-items: center; padding: 28px 0; border-top: 1px solid var(--line-2); }
.upcoming-row:last-child { border-bottom: 1px solid var(--line-2); }
.upcoming-row__date b { display: block; font-family: var(--latin); font-size: var(--step-4); font-weight: 500; line-height: .95; }
.upcoming-row__date small { color: var(--ink-2); font-size: var(--step--1); letter-spacing: .14em; }
.upcoming-row__title { font-size: var(--step-2); margin: 10px 0 6px; }
.upcoming-row__venue { color: var(--ink-2); font-size: var(--step--1); }
.upcoming-row__img { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; }
.upcoming-row__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
@media (hover: hover) { .upcoming-row:hover .upcoming-row__img img { transform: scale(1.04); } }

.archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 5vh, 56px) clamp(18px, 2vw, 28px); padding-block: clamp(36px, 5vh, 56px) clamp(80px, 14vh, 140px); }
.card { display: flex; flex-direction: column; }
.card__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-3); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
@media (hover: hover) { .card:hover .card__img img { transform: scale(1.045); } }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; color: var(--ink-3); font-size: .8rem; letter-spacing: .12em; }
.card__title { margin-top: 6px; font-family: var(--serif); font-size: var(--step-1); font-weight: 600; line-height: 1.55; }
.card__series { color: var(--brass-ink); }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-bottom: 120px; }
.pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--step--1); }
.pagination .current { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.empty-note { padding: 40px 0; color: var(--ink-3); }

/* 單場演出 */
.event-head { padding: calc(var(--header-h) + clamp(40px, 8vh, 96px)) 0 clamp(28px, 4vh, 44px); }
.event-head__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 22px; color: var(--ink-3); font-size: var(--step--1); }
.event-head__crumbs a:hover { color: var(--ink); }
.event-head__title { max-width: 20em; font-size: var(--step-4); font-weight: 900; letter-spacing: .04em; }
.event-head__sub { margin-top: 14px; color: var(--ink-2); font-size: var(--step-1); }
.event-cover { aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--radius); background: var(--bg-3); }
.event-cover img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }

.event-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(40px, 6vw, 96px); padding-block: clamp(48px, 8vh, 88px); }
.event-aside__sticky { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 24px; }
.info-card { padding: 24px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.info-card h2 { font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .22em; color: var(--ink-3); margin-bottom: 10px; }
.sessions { margin: 0; padding: 0; list-style: none; }
.session { padding: 16px 0; border-top: 1px solid var(--line); }
.session:first-child { border-top: 0; padding-top: 4px; }
.session__date { font-family: var(--latin); font-size: 1.7rem; font-weight: 500; line-height: 1.1; }
.session__date small { margin-left: .4em; font-family: var(--sans); font-size: var(--step--1); color: var(--ink-2); letter-spacing: .1em; }
.session__line { margin: 6px 0 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.7; }
.session .btn { width: 100%; margin-top: 14px; }
.session--cancelled .session__date { text-decoration: line-through; color: var(--ink-3); }
.poster-frame { display: block; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); cursor: zoom-in; }

.block-title { display: flex; align-items: baseline; gap: 14px; margin: clamp(48px, 8vh, 80px) 0 22px; font-size: var(--step-2); }
.block-title:first-child { margin-top: 0; }
.block-title .num { font-style: italic; color: var(--brass-ink); font-size: .8em; }

.prose { font-size: var(--step-0); line-height: 2; color: #2b2822; }
.prose > * + * { margin-top: 1.1em; }
.prose > p { margin-bottom: 0; }
.prose h2, .prose h3 { margin-top: 2em; color: var(--ink); }
.prose h2 { font-size: var(--step-2); }
.prose h3 { font-size: var(--step-1); }
.prose a { color: var(--brass-ink); background: linear-gradient(currentColor 0 0) 0 100% / 100% 1px no-repeat; }
.prose img, .prose figure { margin-block: 1.8em; border-radius: var(--radius-sm); overflow: hidden; }
.prose figcaption { margin-top: .6em; color: var(--ink-3); font-size: var(--step--1); }
.prose blockquote { margin-inline: 0; padding-left: 1.2em; border-left: 2px solid var(--brass); font-family: var(--serif); font-size: var(--step-1); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }

.program { margin: 0; padding: 0; list-style: none; counter-reset: piece; border-top: 1px solid var(--line-2); }
.program li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); counter-increment: piece; }
.program li::before { content: counter(piece, decimal-leading-zero); font-family: var(--latin); font-style: italic; color: var(--brass-ink); }
.program__title { font-family: var(--serif); font-size: var(--step-1); }
.program__composer { color: var(--ink-2); font-size: var(--step--1); text-align: right; }
.program__note { grid-column: 2; color: var(--ink-3); font-size: var(--step--1); }

.credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 28px; margin: 0; }
.credits div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.credits dt { color: var(--ink-3); font-size: .78rem; letter-spacing: .18em; }
.credits dd { margin: 4px 0 0; font-family: var(--serif); font-size: var(--step-1); }

.gallery { columns: 3 240px; column-gap: 12px; }
.gallery a { display: block; margin-bottom: 12px; overflow: hidden; border-radius: 10px; break-inside: avoid; cursor: zoom-in; }
.gallery img { width: 100%; transition: transform .9s var(--ease); }
@media (hover: hover) { .gallery a:hover img { transform: scale(1.04); } }

.lightbox { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 6vh 4vw; background: rgba(251, 250, 247, .97); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; touch-action: pan-y; }
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.lightbox img { max-height: 86vh; width: auto; border-radius: 8px; box-shadow: var(--shadow-lg); }
.lightbox__btn { position: absolute; display: grid; place-items: center; min-width: 48px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-size: var(--step--1); letter-spacing: .12em; }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-family: var(--latin); font-style: italic; color: var(--ink-2); }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-2); }
.post-nav a { display: block; padding: 40px 0; }
.post-nav a + a { text-align: right; border-left: 1px solid var(--line); padding-left: 28px; }
.post-nav small { display: block; margin-bottom: 6px; color: var(--ink-3); letter-spacing: .18em; font-size: .78rem; }
.post-nav span { font-family: var(--serif); font-size: var(--step-1); }
@media (hover: hover) { .post-nav a:hover span { color: var(--brass-ink); } }

/* 成員頁 */
.people-group { padding-block: clamp(48px, 8vh, 96px); border-top: 1px solid var(--line); }
.people-group__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 32px; }
.people-group__title { font-size: var(--step-3); }
.people-group__count { font-family: var(--latin); font-style: italic; color: var(--brass-ink); font-size: var(--step-1); }
.faces--lg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.faces--sm { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 14px; }
.faces--sm .face__name { font-size: var(--step-0); }
.section-label { margin: 36px 0 16px; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--step-0); font-weight: 600; letter-spacing: .2em; color: var(--ink-2); }
.section-label:first-of-type { margin-top: 0; }
.people-note { max-width: 40em; margin: -12px 0 28px; color: var(--ink-3); font-size: .92rem; }
.name-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.name-grid li { padding: 12px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: var(--step-1); }

/* 歷任團員名錄：依聲部收合，手機不必捲過六百多個名字 */
.roster-search { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 20px; }
.roster-search input { width: min(100%, 320px); min-height: 48px; padding: 0 20px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); font: inherit; font-size: 1rem; color: var(--ink); }
.roster-search input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.roster-search__result { margin: 0; color: var(--ink-3); font-size: .92rem; }
.roster-group { border-top: 1px solid var(--line); }
.roster-group:last-child { border-bottom: 1px solid var(--line); }
.roster-group summary { display: flex; align-items: baseline; gap: 12px; min-height: 56px; padding: 16px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-size: var(--step-1); }
.roster-group summary::-webkit-details-marker { display: none; }
.roster-group summary small { font-family: var(--sans); font-size: .9rem; color: var(--ink-3); }
.roster-group summary::after { content: "展開"; flex: none; margin-left: auto; padding-left: 16px; font-family: var(--sans); font-size: .8rem; letter-spacing: .15em; color: var(--brass-ink); }
.roster-group[open] summary::after { content: "收合"; }
.roster-group[open] { padding-bottom: 24px; }
.roster { columns: 4 170px; column-gap: 28px; margin: 0; padding: 0; list-style: none; }
.roster li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.roster li[hidden] { display: none; }
.roster__code { flex: none; width: 3em; font-family: var(--latin); font-size: .85rem; color: var(--ink-3); }
.roster a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.roster small { margin-left: auto; color: var(--ink-3); font-size: .8rem; text-align: right; }

.timeline { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line-2); }
.timeline li { position: relative; padding: 0 0 28px 28px; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: .7em; width: 9px; height: 9px; border-radius: 50%; background: var(--brass); }
.timeline b { display: block; font-family: var(--serif); font-size: var(--step-1); }
.timeline__role { margin-left: .8em; font-family: var(--sans); font-size: .85rem; font-weight: 500; letter-spacing: .1em; color: var(--brass-ink); }
.timeline small { display: block; color: var(--ink-3); }

/* 歷年演出年表 */
.chronicle { padding-block: clamp(32px, 6vh, 72px) clamp(64px, 10vh, 120px); }
.chronicle__year { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 3fr); gap: 16px clamp(24px, 5vw, 72px); padding-block: 40px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 72px); }
.chronicle__head { align-self: start; position: sticky; top: calc(var(--header-h) + 88px); }
.chronicle__num { margin: 0; font-family: var(--latin); font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 500; line-height: 1; }
.chronicle__note { margin: 12px 0 0; color: var(--ink-2); font-size: .92rem; }
.chronicle__count { margin: 8px 0 0; color: var(--brass-ink); font-size: .85rem; letter-spacing: .08em; }
.chronicle__list { margin: 0; padding: 0; list-style: none; }
.chronicle__list li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) minmax(0, .6fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.chronicle__date { font-family: var(--latin); color: var(--ink-3); }
.chronicle__title a { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.chronicle__venue { color: var(--ink-3); font-size: .92rem; }
.chronicle__venue a { color: inherit; }
@media (max-width: 900px) {
	.chronicle__year { grid-template-columns: 1fr; }
	.chronicle__head { position: static; }
	.chronicle__list li { grid-template-columns: 3.6em minmax(0, 1fr); }
	.chronicle__venue { grid-column: 2; }
}


/* 文章與一般頁 */
.article-hero { padding: calc(var(--header-h) + clamp(48px, 10vh, 120px)) 0 36px; }
.article-hero__title { font-size: var(--step-4); font-weight: 900; letter-spacing: .04em; }
.article-hero__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; color: var(--ink-3); font-size: var(--step--1); letter-spacing: .12em; }
.article-cover { margin-bottom: clamp(40px, 7vh, 72px); border-radius: var(--radius); overflow: hidden; }
.article-cover img { width: 100%; max-height: 76vh; object-fit: cover; }
.article-body { padding-bottom: clamp(80px, 14vh, 140px); }

.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); padding-bottom: clamp(56px, 9vh, 96px); }
.contact-card { display: block; padding: 26px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
@media (hover: hover) { a.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } }
.contact-card small { display: block; margin-bottom: 8px; color: var(--ink-3); letter-spacing: .2em; font-size: .78rem; }
.contact-card b { font-family: var(--serif); font-size: var(--step-1); font-weight: 600; word-break: break-word; }

/* ==========================================================================
   頁尾
   ========================================================================== */

.site-footer { padding-top: clamp(72px, 12vh, 120px); background: var(--bg); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 32px; }
.footer-grid h3 a { color: inherit; }
.footer-grid h3 { margin-bottom: 16px; font-family: var(--sans); font-size: .76rem; font-weight: 500; letter-spacing: .22em; color: var(--ink-3); }
.footer-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--step--1); }
.footer-grid li a { display: inline-block; padding: 6px 0; color: var(--ink-2); transition: color .3s; }
.footer-grid li a:hover { color: var(--ink); }
.footer-intro { color: var(--ink-2); font-size: var(--step--1); max-width: 24em; }
.footer-word { margin-top: clamp(56px, 10vh, 110px); padding-bottom: 16px; }
.footer-word img { width: 100%; height: auto; opacity: .92; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 22px 0 28px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .78rem; letter-spacing: .08em; }

/* ==========================================================================
   動態初始狀態（JS 啟用且未要求減少動態時）
   ========================================================================== */

.has-motion [data-reveal],
.has-motion [data-stagger] > * { opacity: 0; }
.has-motion [data-reveal="lines"] { clip-path: inset(0% 0% 100% 0%); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.marquee__track { animation: none; }
}

/* 登入時的 WordPress 管理列 */
.admin-bar .site-header, .admin-bar .mobile-menu { top: var(--ab, 32px); }
.admin-bar .sub-nav { top: calc(var(--header-h) + var(--ab, 32px)); }
.admin-bar .ms__rail ol { top: calc(var(--header-h) + 85px + var(--ab, 32px)); }
.admin-bar .deck__card { top: calc(var(--header-h) + 77px + var(--ab, 32px) + var(--i) * 12px); }

/* ==========================================================================
   響應式：平板與手機
   ========================================================================== */

@media (max-width: 1080px) {
	.shows__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.show--feature { grid-row: auto; }
	.show--feature .show__img { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.faces--sm { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.faces--lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.event-layout { grid-template-columns: 1fr; }
	.event-aside { order: -1; }
	.event-aside__sticky { position: static; grid-template-columns: minmax(0, 1fr) 220px; align-items: start; }
}

@media (max-width: 900px) {
	:root { --header-h: 60px; }
	.promo__grid { grid-template-columns: 1fr; }
	.promo__art { max-width: 380px; width: 82%; margin-inline: auto; }
	.about__grid { grid-template-columns: 1fr; }
	.about__img { aspect-ratio: 4 / 3; }
	/* 三個信念：手機與平板改為左右滑動的卡片 */
	.pillars { padding-block: 8px clamp(56px, 9vh, 96px); }
	.pillars__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); scrollbar-width: none; }
	.pillars__track::-webkit-scrollbar { display: none; }
	.pillar { position: relative; top: auto; flex: 0 0 84%; height: min(72svh, 620px); min-height: 420px; margin: 0; scroll-snap-align: center; }
	.pillar__title { font-size: var(--step-4); }
	.nav__list, .nav > .btn { display: none; }
	.menu-toggle { display: block; }
	.numbers__grid { grid-template-columns: 1fr 1fr; }
	.stat { padding: 22px 12px 18px 0; border-bottom: 1px solid var(--line); }
	.stat:nth-child(2n) { border-right: 0; }
	.stat:nth-child(2n + 1) { padding-left: 0; }
	.news-grid { grid-template-columns: 1fr 1fr; }
	.faces, .faces--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.faces--sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.upcoming-row { grid-template-columns: 6em minmax(0, 1fr); }
	.upcoming-row__img { grid-column: 1 / -1; }
	.contact-cards { grid-template-columns: 1fr; }
	.event-cover { aspect-ratio: 16 / 10; }
}

@media (max-width: 600px) {
	/* 近期演出：左右滑 */
	.shows__rail { padding-inline: 0; }
	.shows__grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); scrollbar-width: none; }
	.shows__grid::-webkit-scrollbar { display: none; }
	.show, .show--feature { flex: 0 0 80%; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
	.show--feature .show__img { aspect-ratio: 3 / 2; }
	.show--feature .show__title { font-size: var(--step-1); }
	/* 消息：縮圖在左、標題在右，一眼看完三則 */
	.news-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; }
	.news-card__img { aspect-ratio: 1; }
	.news-card__meta { margin-top: 0; }
	.news-card__title { font-size: var(--step-0); }
	.promo__count b { font-size: 3.4rem; }
	.hero__content { justify-content: flex-end; padding-bottom: 96px; }
	.hero__title { width: 90vw; }
	.hero__tagline { font-size: var(--step-1); letter-spacing: .3em; padding-left: .3em; }
	.hero__dots { top: calc(var(--header-h) + 8px); bottom: auto; right: 12px; }
	.hero__waves { bottom: 40px; height: 110px; }
	.poster-frame { max-width: 240px; }
	.news-grid { grid-template-columns: 1fr; gap: 20px; }
	.archive-grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: 28px; }
	.event-aside__sticky { grid-template-columns: 1fr; }
	.program li { grid-template-columns: 2em minmax(0, 1fr); }
	.program__composer { grid-column: 2; text-align: left; }
	.post-nav { grid-template-columns: 1fr; }
	.post-nav a + a { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; text-align: left; }
	.pillar__body { padding: 24px; }
	.facts li { grid-template-columns: 4.5em minmax(0, 1fr); }
}

/* 左標題、右內容的兩欄 */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(28px, 6vw, 96px); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* =========================================================
   網站架構重整（2026-10-29）：紀錄、消息、行事曆、關於、聯繫
   ========================================================= */

/* 第二層下方的篩選列（年份、年代）：不固定在頁首，避免兩排固定列 */
.filter-row { padding-top: 20px; }
.chips--sm a { min-height: 34px; padding: 0 14px; font-size: .85rem; }
.filter-row .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.filter-row .chips::-webkit-scrollbar { display: none; }
.filter-row .chips a { white-space: nowrap; }

/* 紀錄 */
.event-lead { max-width: 34em; margin: clamp(28px, 5vh, 48px) 0 0; font-family: var(--serif); font-size: var(--step-2); font-weight: 500; line-height: 1.7; }
.event-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); gap: clamp(28px, 6vw, 96px); align-items: start; padding-block: clamp(40px, 7vh, 72px) 8px; }
.event-info .poster-frame { position: sticky; top: calc(var(--header-h) + 24px); }
.facts--compact { margin: 12px 0 0; border-top: 0; }
.facts--compact li { padding: 9px 0; }
.event-info .btn-row { margin-top: 24px; }
.event-body { padding-top: clamp(32px, 6vh, 56px); }
.event-body__inner { max-width: var(--read); }
.event-people, .event-gallery, .event-news { padding-block: clamp(32px, 6vh, 56px) 0; }
.event-news { padding-bottom: clamp(48px, 8vh, 80px); }
.event-news__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.event-news__list a { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.event-news__list .num { color: var(--ink-3); }
.program__sub { display: block; font-family: var(--latin); font-style: italic; font-size: .95rem; color: var(--ink-3); }
.program__more { margin-top: 16px; }

/* 消息 */
/* ---------- 單篇消息（新聞稿） ---------- */
.nr-head { padding-top: calc(var(--header-h) + clamp(40px, 8vh, 96px)); padding-bottom: clamp(26px, 4vh, 40px); }
.nr-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 20px 0 18px; color: var(--ink-3); font-size: var(--step--1); letter-spacing: .12em; }
.nr-badge, .news-tag { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font-weight: 700; letter-spacing: .16em; background: var(--bg-3); color: var(--ink); }
.nr-badge { padding: 7px 16px; }
.nr--preview .nr-badge, .news-tag--preview { background: var(--brass); color: #fff; }
.nr--report .nr-badge, .news-tag--report { background: var(--ink); color: var(--bg); }
.nr--press .nr-badge, .news-tag--press { background: var(--red); color: #fff; }
.nr-badge.is-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: nr-pulse 1.8s ease-out infinite; }
@keyframes nr-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); } 80%, 100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
.nr-title { font-size: clamp(1.9rem, 1.35rem + 2.6vw, 3.6rem); font-weight: 900; line-height: 1.28; letter-spacing: .03em; }

.nr-hero { margin-bottom: clamp(30px, 6vh, 56px); }
.nr-hero--wide { max-width: 1280px; margin-inline: auto; }
.nr-hero--wide .nr-hero__frame { max-height: 78vh; }
.nr-hero__frame { display: block; aspect-ratio: var(--ar, 1.778); overflow: hidden; border-radius: var(--radius); background: var(--bg-3); }
.nr-hero__frame img { width: 100%; height: 110%; object-fit: cover; }
.nr-hero--poster { position: relative; display: grid; place-items: center; padding: clamp(32px, 7vw, 80px) var(--gutter); overflow: hidden; isolation: isolate; background: var(--ink); }
.nr-hero__blur { position: absolute; inset: -60px; z-index: -1; }
.nr-hero__blur img { width: 100%; height: 100%; object-fit: cover; filter: blur(48px) saturate(1.4) brightness(.62); }
.nr-hero__poster { display: block; width: min(calc(560px * var(--ar, .7)), 600px, 82vw); border-radius: 8px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.nr-hero__poster img { display: block; width: 100%; height: auto; }

.nr-when { display: grid; gap: clamp(18px, 3vh, 28px); margin: 0 0 clamp(32px, 6vh, 52px); padding: 0; list-style: none; }
.nr-when li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(18px, 4vw, 40px); }
.nr-when__date b { display: block; font-size: clamp(3.2rem, 2.2rem + 4.4vw, 5.6rem); line-height: .9; color: var(--brass-ink); }
.nr-when__date small { display: block; margin-top: 8px; color: var(--ink-3); font-size: var(--step--1); letter-spacing: .14em; }
.nr-when__info { display: flex; flex-direction: column; gap: 4px; }
.nr-when__info b { font-size: var(--step-2); line-height: 1.1; }
.nr-when__info span { font-size: var(--step-0); font-weight: 700; }
.nr-when__info small { color: var(--ink-2); font-size: var(--step--1); letter-spacing: .06em; }
.nr-when-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 clamp(26px, 5vh, 40px); color: var(--ink-3); font-size: var(--step--1); letter-spacing: .1em; }
.nr-when-line b { margin-right: 14px; color: var(--ink); font-weight: 600; letter-spacing: .04em; }

.nr-body > * + * { margin-top: 1.1em; }
.nr-lead p { font-size: var(--step-1); font-weight: 500; line-height: 1.9; color: var(--ink); }
.nr-video { margin: 2em 0 !important; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.nr-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.prose .nr-photos { display: grid; gap: clamp(10px, 2vw, 18px); margin-block: 2.2em; }
.nr-photos figure, .nr-photos img { margin: 0 !important; }
.nr-photos figure { border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-3); }
.nr-photos img { display: block; width: 100%; height: auto; }
.nr-photos--2 { grid-template-columns: 1.25fr 1fr; align-items: start; }
.prose .nr-photos--2 figure:nth-child(2) { margin-top: clamp(28px, 7vw, 72px) !important; }
@media (min-width: 1000px) {
	.prose .nr-photos { margin-inline: calc(min(9vw, 130px) * -1); }
}

.nr-cta-wrap { margin-top: clamp(44px, 8vh, 80px); margin-bottom: clamp(56px, 10vh, 112px); }
/* 沒有「詳細資訊」的文章（公告）：內文結尾和下面的區塊留出同樣的距離 */
.nr > .nr-body:last-child { padding-bottom: clamp(64px, 11vh, 120px); }
.nr-cta { position: relative; display: grid; align-content: end; gap: 22px; min-height: 280px; padding: clamp(26px, 5vw, 48px); overflow: hidden; isolation: isolate; border-radius: var(--radius); background: var(--ink); color: var(--on-photo); }
.nr-cta__bg { position: absolute; inset: 0; z-index: -1; }
.nr-cta__bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.nr-cta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 20, 15, .15) 0%, rgba(22, 20, 15, .82) 62%), linear-gradient(90deg, rgba(22, 20, 15, .55), rgba(22, 20, 15, 0) 70%); }
@media (hover: hover) { .nr-cta:hover .nr-cta__bg img { transform: scale(1.05); } }
.nr-cta__text small { color: var(--brass-light); font-size: var(--step--1); letter-spacing: .2em; }
.nr-cta__text b { display: block; margin: 6px 0 8px; font-size: var(--step-2); font-weight: 900; line-height: 1.4; }
.nr-cta__text span { opacity: .85; font-size: var(--step--1); }
.nr-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.nr-cta__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: .8em 2.2em; overflow: hidden; border: 1px solid rgba(251, 250, 247, .7); border-radius: 999px; color: var(--on-photo); font-size: var(--step-0); font-weight: 700; letter-spacing: .24em; transition: transform .3s var(--ease), background-color .4s var(--ease), color .4s var(--ease); }
.nr-cta__btn:active { transform: scale(.97); }
.nr-cta__btn.is-main { border-color: var(--brass-light); background: var(--brass-light); color: #16140f; box-shadow: 0 10px 30px rgba(229, 207, 159, .3); }
.nr-cta__btn.is-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-130%); animation: nr-shine 3.6s var(--ease) 1.2s infinite; }
@keyframes nr-shine { 0% { transform: translateX(-130%); } 40%, 100% { transform: translateX(130%); } }
@media (hover: hover) {
	.nr-cta__btn:hover { background: var(--on-photo); color: var(--ink); }
	.nr-cta__btn.is-main:hover { background: #fbf6ea; }
}
.news-card__img, .nh-img { position: relative; }
.news-tag { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 4px 11px; font-size: .72rem; box-shadow: 0 2px 8px rgba(22, 20, 15, .18); }
/* 公告沒有底色，放在照片上時用近白底（顏色寫在類型上，避免蓋掉預告、報導的底色） */
.news-tag--notice { background: rgba(251, 250, 247, .94); }
@media (max-width: 600px) {
	.nr-hero--wide { padding: 0; }
	.nr-hero__frame { border-radius: 0; }
	.nr-cta { min-height: 340px; margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
	.nr-cta__btn { flex: 1 1 auto; }
	.news-tag { top: 6px; left: 6px; padding: 3px 8px; font-size: .66rem; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
	.nr-badge.is-live::before, .nr-cta__btn.is-main::after { animation: none; }
}

/* 活動行事曆 */
.calendar { padding-block: 28px clamp(64px, 10vh, 120px); }
.calendar__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.calendar__month { margin: 0; font-family: var(--serif); font-size: var(--step-2); }
.calendar__filter { margin-bottom: 20px; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-bottom: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
.calendar__wd { padding: 10px; background: var(--bg-2); color: var(--ink-3); font-size: .8rem; text-align: center; letter-spacing: .2em; }
.calendar__cell { display: flex; flex-direction: column; gap: 4px; min-height: 128px; padding: 8px; background: var(--bg); }
.calendar__cell.is-empty { background: var(--bg-2); }
.calendar__cell.is-today .calendar__day { background: var(--ink); color: var(--bg); }
.calendar__day { align-self: flex-start; min-width: 26px; padding: 0 6px; border-radius: 999px; font-size: .95rem; text-align: center; }
/* 月曆格：有活動的日子整格是主視覺，下方漸層上壓標題；一天兩場就上下各半。整格可點。 */
.calendar__cell { position: relative; }
.calendar__cell:has(.cal-ev:not([hidden])) { gap: 2px; padding: 0; }
.cal-ev { flex: 1 1 0; }
.calendar__cell:has(.cal-ev:not([hidden])) .calendar__day { position: absolute; z-index: 3; top: 7px; left: 7px; min-width: 28px; line-height: 26px; background: rgba(251, 250, 247, .78); -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(22, 20, 15, .08); }
.calendar__cell.is-today:has(.cal-ev:not([hidden])) .calendar__day { background: var(--ink); color: var(--bg); }
.cal-ev { position: relative; display: flex; align-items: flex-end; min-height: 0; overflow: hidden; padding: 34px 10px 9px; background: linear-gradient(160deg, #3b352b, #16140f); color: #fff; isolation: isolate; }
.cal-ev.is-own.no-img { background: linear-gradient(160deg, #c9a45f, #86652b); }
/* 其他團體：小海報＋名稱，淡底，不搶本團演出的版面 */
.cal-ext { display: flex; flex: none; align-items: center; gap: 6px; min-width: 0; padding: 3px 7px 3px 3px; border-radius: 8px; background: var(--bg-2); color: var(--ink-2); font-size: .72rem; line-height: 1.3; transition: background-color .3s, color .3s; }
.cal-ext__img { flex: none; width: 22px; height: 29px; overflow: hidden; border-radius: 4px; background: var(--bg-3); }
.cal-ext__img img { width: 100%; height: 100%; object-fit: cover; }
.cal-ext__t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-ext--more { justify-content: center; padding: 3px 7px; background: transparent; color: var(--ink-3); }
@media (hover: hover) { a.cal-ext:hover { background: var(--bg-3); color: var(--ink); } }
.calendar__cell:has(.cal-ev:not([hidden])) .cal-ext { margin: 0 4px 4px; }
.calendar__cell:has(.cal-ev:not([hidden])) .cal-ext:first-of-type { margin-top: 2px; }
.cal-ev__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .5s; }
.cal-ev:not(.no-img)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 20, 15, .05) 10%, rgba(22, 20, 15, .55) 52%, rgba(22, 20, 15, .9) 100%); }
.cal-ev.is-own:not(.no-img)::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 3px; background: var(--brass-light); }
.cal-ev__text { display: grid; gap: 1px; min-width: 0; }
.cal-ev__text small { opacity: .85; font-size: .7rem; letter-spacing: .06em; }
.cal-ev__text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; font-weight: 700; line-height: 1.4; }
.calendar__cell:has(.cal-ev:not([hidden]) + .cal-ev:not([hidden])) .cal-ev { padding-top: 10px; }
.calendar__cell:has(.cal-ev:not([hidden]) + .cal-ev:not([hidden])) .cal-ev:first-of-type { padding-left: 44px; }
.calendar__cell:has(.cal-ev:not([hidden]) + .cal-ev:not([hidden])) .cal-ev__text b { -webkit-line-clamp: 1; }
.calendar__cell.is-past .cal-ev__img { filter: saturate(.75); }
@media (hover: hover) {
	a.cal-ev:hover .cal-ev__img { transform: scale(1.08); filter: none; }
	a.cal-ev:hover { box-shadow: inset 0 0 0 2px var(--brass-light); }
}
.agenda { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.agenda__day { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.agenda__date b { display: block; font-size: 1.5rem; line-height: 1.1; }
.agenda__date small { color: var(--ink-3); }
.agenda ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.agenda__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
.agenda__item a::after { content: ""; position: absolute; inset: 0; }
.agenda__img { position: relative; display: block; overflow: hidden; background: var(--bg-2); }
.agenda__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
/* 本團演出：主視覺緊貼標題左側，3:2 */
.agenda__item.is-own .agenda__img { width: 200px; aspect-ratio: 3 / 2; border-radius: 12px; }
.agenda__item.is-own .agenda__img.is-empty { background: linear-gradient(160deg, #c9a45f, #86652b); }
.agenda__own { display: inline-block; margin-bottom: 4px; padding: 2px 9px; border-radius: 999px; background: rgba(229, 207, 159, .5); color: #5b431a; font-size: .72rem; font-style: normal; font-weight: 700; letter-spacing: .12em; box-shadow: inset 0 0 0 1px rgba(134, 101, 43, .3); }
/* 其他團體：小海報，文字較小較淡 */
.agenda__item.is-ext .agenda__img { width: 46px; aspect-ratio: 3 / 4; border-radius: 6px; }
.agenda__item.is-ext a, .agenda__item.is-ext .agenda__text > span { font-family: var(--sans); font-size: var(--step-0); font-weight: 600; color: var(--ink-2); text-decoration: none; }
.agenda__out { margin-left: 8px; padding: 1px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: .7rem; letter-spacing: .08em; }
.agenda__text small { display: block; margin-top: 2px; }
@media (hover: hover) {
	.agenda__item:hover .agenda__img img { transform: scale(1.06); }
	.agenda__item.is-ext:hover a { color: var(--ink); }
}
.agenda__item.is-own { border-left-color: var(--brass); }
.agenda__item a, .agenda__item > span { display: block; font-family: var(--serif); font-size: var(--step-1); font-weight: 600; }
.agenda__item a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.agenda__item small { color: var(--ink-3); }
.calendar__note { margin-top: 28px; color: var(--ink-3); font-size: .92rem; }
.calendar__note a { text-decoration: underline; }

/* 聯繫：依目的分卡 */
.contact-purposes { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 16px; padding-block: clamp(28px, 5vh, 48px); }
.purpose { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.purpose__num { color: var(--brass-ink); font-style: italic; }
.purpose__title { margin: 0; font-family: var(--serif); font-size: var(--step-2); }
.purpose__lead { margin: 0; color: var(--ink-2); }
.purpose__need { margin: 4px 0 0; color: var(--ink-2); font-size: .92rem; line-height: 1.8; }
.purpose__need b { display: block; color: var(--ink-3); font-size: .78rem; font-weight: 500; letter-spacing: .2em; }
.purpose__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.contact-ways { padding-bottom: clamp(56px, 9vh, 96px); }
.contact-ways .btn-row { margin-top: 20px; }

/* 關於 */
.about-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-block: clamp(32px, 6vh, 56px); }
.about-block { padding-block: clamp(56px, 10vh, 120px); }
.about-block--tint { background: var(--bg-2); }
.about-block__title { margin: 0 0 clamp(24px, 4vh, 40px); font-family: var(--serif); font-size: var(--step-4); line-height: 1.2; }
.about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 6vw, 96px); }
.about-intro__text p { font-size: var(--step-1); line-height: 1.95; }
.aims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.aims li { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--radius-sm); background: var(--bg); }
.aims__num { font-size: 2.4rem; font-style: italic; color: var(--brass); line-height: 1; }
.aims p { margin: 0; font-size: var(--step-0); line-height: 1.8; }
.ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.idea { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.idea summary { display: flex; flex-direction: column; gap: 10px; padding: 24px; list-style: none; cursor: pointer; }
.idea summary::-webkit-details-marker { display: none; }
.idea__num { color: var(--brass-ink); font-style: italic; }
.idea__title { margin: 0; font-family: var(--serif); font-size: var(--step-2); line-height: 1.35; }
.idea__first { margin: 0; color: var(--ink-2); }
.idea__more { align-self: flex-start; margin-top: 6px; font-size: .8rem; letter-spacing: .2em; color: var(--brass-ink); }
.idea[open] .idea__more { display: none; }
.idea__full { margin: 0; padding: 0 24px 24px; color: var(--ink-2); line-height: 1.95; }
.about-block--dark { background: #16140f; color: #f3ecdc; }
.about-block--dark .lead { color: #d8d0bf; }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.stage__legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.stage__legend button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(243, 236, 220, .25); border-radius: 999px; background: none; color: #f3ecdc; font: inherit; font-size: .9rem; cursor: pointer; transition: background .3s, border-color .3s; }
.stage__legend button .num { color: var(--brass-light); }
.stage__legend button[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); }
.stage__legend button[aria-pressed="true"] .num { color: #fff; }
.stage__note { margin-top: 16px; color: #8f8775; font-size: .85rem; }
.stage__svg { width: 100%; height: auto; }
.stage__svg circle { fill: rgba(243, 236, 220, .32); transition: fill .4s var(--ease), opacity .4s var(--ease); }
.stage__svg.has-focus circle { opacity: .25; }
.stage__svg.has-focus circle.is-on { opacity: 1; fill: var(--brass-light); }
.stage__podium { fill: var(--brass); }
.about-next { padding-top: 0; }
.about-next__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.about-next__card { display: flex; flex-direction: column; gap: 6px; padding: 28px; border-radius: var(--radius-sm); background: var(--bg-2); transition: background .4s var(--ease); }
.about-next__card small { font-family: var(--latin); font-style: italic; color: var(--brass-ink); }
.about-next__card b { font-family: var(--serif); font-size: var(--step-2); }
.about-next__card span { color: var(--ink-2); }
@media (hover: hover) { .about-next__card:hover { background: var(--bg-3); } }

@media (max-width: 900px) {
	.event-info { grid-template-columns: 1fr; }
	.event-info .poster-frame { position: static; max-width: 260px; }
	.calendar__grid { display: none; }
	.about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.about-intro, .stage { grid-template-columns: 1fr; }
	.aims { grid-template-columns: 1fr 1fr; }
	.about-next__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.aims { grid-template-columns: 1fr; }
	.aims li { flex-direction: row; align-items: baseline; }
	.agenda__day { grid-template-columns: 1fr; gap: 8px; }
	.agenda__item { gap: 14px; }
	.agenda__item.is-own .agenda__img { width: 108px; border-radius: 10px; }
	.agenda__item.is-ext .agenda__img { width: 40px; }
	.agenda__date b { display: inline; margin-right: 8px; }
	.calendar__bar .btn { padding-inline: 14px; }
	.event-news__list a { grid-template-columns: 1fr; gap: 2px; }
}

/* =========================================================
   首頁「下一場演出」（2026-10-29）：四種版型，見 template-parts/next-show.php
   共同：只放最近一場；有售票直接購票；底部「更多演出與活動」
   ========================================================= */

.nx-a__title, .nx-b__title, .nx-c__title, .nx-d__title { text-wrap: balance; }
.nx-b__price, .nx-c__date small, .nx-d__mon { font-feature-settings: "lnum" 1; }
.nx-count { margin: 0; color: var(--ink-2); font-size: var(--step--1); letter-spacing: .14em; white-space: nowrap; }
.nx-count b { margin: 0 .2em; color: var(--brass-ink); font-size: 1.9em; font-weight: 500; line-height: 1; }
.btn--brass { border-color: var(--brass-light); background: var(--brass-light); color: #16140f; }
.btn--brass::before { background: #fbf6ea; }
@media (hover: hover) { .btn--brass:hover { color: #16140f; } }
.nx-demo-label { padding: 12px 0; background: var(--ink); color: var(--bg); font-size: .9rem; letter-spacing: .2em; }
.nx-demo-label small { margin-left: 1.2em; opacity: .6; letter-spacing: .08em; }

/* A 海報：海報為主角，右側大日期 */
.nx-a__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.nx-a__art { display: block; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-3); box-shadow: var(--shadow-lg); }
.nx-a__art img { width: 100%; }
.nx-a__when { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; margin-bottom: 22px; }
.nx-a__date { font-size: clamp(4rem, 2.4rem + 5vw, 7.4rem); line-height: .82; }
.nx-a__meta { display: grid; gap: 2px; color: var(--ink-2); font-size: 1.15rem; letter-spacing: .16em; line-height: 1.3; }
.nx-a__when .nx-count { margin-left: auto; }
.nx-a__title { font-size: var(--step-3); font-weight: 900; line-height: 1.35; letter-spacing: .03em; }
.nx-a__sub { margin: 12px 0 0; color: var(--ink-2); font-size: var(--step-1); }
.nx-a__info .facts { margin: 28px 0; }

/* B 票根：整張票，右側撕線後是票價與購票 */
.nx-b__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.nx-b__shadow { filter: drop-shadow(0 26px 34px rgba(22, 20, 15, .14)) drop-shadow(0 2px 3px rgba(22, 20, 15, .06)); }
.nx-b__ticket {
	--stub: 270px;
	--notch: 15px;
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr) var(--stub);
	overflow: hidden;
	border-radius: 18px;
	background: var(--card);
	-webkit-mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
	mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.nx-b__art { display: block; min-height: 100%; background: var(--bg-3); }
.nx-b__art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.nx-b__main { display: flex; flex-direction: column; gap: 10px; padding: clamp(26px, 3vw, 44px); }
.nx-b__series { margin: 0; color: var(--brass-ink); font-size: var(--step--1); letter-spacing: .22em; }
.nx-b__title { font-size: var(--step-3); font-weight: 900; line-height: 1.3; letter-spacing: .03em; }
.nx-b__sub { margin: 0; color: var(--ink-2); }
.nx-b__facts { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 16px 32px; margin: auto 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.nx-b__facts dt { color: var(--ink-3); font-family: var(--latin); font-style: italic; font-size: .95rem; letter-spacing: .06em; }
.nx-b__facts dd { margin: 0; font-size: var(--step-0); line-height: 1.5; }
.nx-b__facts .num { font-size: 1.3rem; }
.nx-b__stub { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 28px; border-left: 2px dashed var(--line-2); background: #f7f1e4; }
.nx-b__price { display: grid; margin: 0; font-family: var(--latin); font-size: 2.6rem; font-weight: 500; line-height: 1.1; }
.nx-b__price small { font-family: var(--sans); font-size: .78rem; letter-spacing: .22em; color: var(--ink-3); }
.nx-b__price.is-free { font-family: var(--serif); font-size: var(--step-1); font-weight: 700; line-height: 1.5; }
.nx-b__buy { width: 100%; }
.nx-b__info { align-self: flex-start; padding: 6px 0; font-size: var(--step--1); letter-spacing: .12em; background: linear-gradient(currentColor 0 0) 0 100% / 100% 1px no-repeat; }

/* C 夜場：深色滿版，像劇院大廳的看板 */
.nx--c { padding-block: clamp(80px, 13vh, 150px) clamp(36px, 6vh, 60px); background: #13110d; color: #f3ecdc; }
.nx--c .eyebrow { color: var(--brass-light); }
.nx--c .eyebrow em { color: #8f8775; }
.nx-c__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 7vw, 120px); align-items: center; }
.nx-c__date { display: grid; margin: 0 0 18px; }
.nx-c__date .num { color: var(--brass-light); font-size: clamp(3.8rem, 2.2rem + 5vw, 7rem); line-height: .9; }
.nx-c__date small { margin-top: 10px; color: #a59c88; font-family: var(--latin); font-size: 1.1rem; letter-spacing: .3em; }
.nx-c__title { color: #fbf6ea; font-size: var(--step-3); font-weight: 900; line-height: 1.25; letter-spacing: .03em; }
.nx-c__lead { max-width: 30em; margin: 22px 0 0; color: #cfc6b3; font-family: var(--serif); font-size: var(--step-1); line-height: 1.8; }
.nx-c__facts { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 28px 0 32px; padding: 0; list-style: none; color: #e4dccb; }
.nx-c__facts li { padding-right: 18px; }
.nx-c__facts li + li { padding-left: 18px; border-left: 1px solid rgba(243, 236, 220, .25); }
.nx-c__facts b { color: var(--brass-light); font-size: 1.5em; font-weight: 500; }
.nx-c__poster { display: block; overflow: hidden; border-radius: 6px; outline: 1px solid rgba(229, 207, 159, .35); outline-offset: 14px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85); }
.nx-c__poster img { width: 100%; }

/* D 日期：撕頁日曆的大日期＋節目單式的點線列表 */
.nx-d__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 280px); gap: clamp(28px, 4vw, 64px); align-items: start; }
.nx-d__day { display: grid; justify-items: center; min-width: 10rem; overflow: hidden; padding-bottom: 18px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.nx-d__mon { justify-self: stretch; padding: 7px 0; background: var(--red); color: #fff; font-family: var(--latin); font-size: 1rem; letter-spacing: .3em; text-align: center; }
.nx-d__num { margin-top: 6px; font-size: clamp(5rem, 3rem + 5vw, 8rem); line-height: 1; }
.nx-d__wd { color: var(--ink-2); font-size: .9rem; letter-spacing: .4em; padding-left: .4em; }
.nx-d__series { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0 0 10px; color: var(--brass-ink); font-size: var(--step--1); letter-spacing: .22em; }
.nx-d__series span { color: var(--ink-2); letter-spacing: .14em; }
.nx-d__series b { color: var(--brass-ink); font-size: 1.7em; font-weight: 500; }
.nx-d__title { font-size: var(--step-3); font-weight: 900; line-height: 1.35; letter-spacing: .03em; }
.nx-d__list { margin: 26px 0 30px; }
.nx-d__list div { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; }
.nx-d__list dt { order: 1; flex: none; color: var(--ink-3); font-size: var(--step--1); letter-spacing: .2em; }
.nx-d__list div::after { content: ""; order: 2; flex: 1; min-width: 24px; border-bottom: 1px dotted var(--ink-3); transform: translateY(-5px); }
.nx-d__list dd { order: 3; max-width: 70%; margin: 0; text-align: right; }
.nx-d__list dd.num { font-size: 1.3rem; }
.nx-d__art { display: block; overflow: hidden; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.nx-d__art img { width: 100%; }

@media (max-width: 1080px) {
	.nx-b__ticket { --stub: 230px; grid-template-columns: 180px minmax(0, 1fr) var(--stub); }
	.nx-b__facts { grid-template-columns: auto minmax(0, 1fr); }
	.nx-b__facts .is-wide { grid-column: 1 / -1; }
	.nx-d__grid { grid-template-columns: auto minmax(0, 1fr); }
	.nx-d__art { grid-column: 2; grid-row: 1; max-width: 220px; justify-self: end; }
	.nx-d__body { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
	.nx-a__grid, .nx-c__grid { grid-template-columns: 1fr; }
	.nx-a__art { max-width: 560px; }
	.nx-c__poster { order: -1; max-width: 560px; outline: 0; }
}

@media (max-width: 760px) {
	.nx-b__ticket {
		--stub-h: 156px;
		grid-template-columns: 1fr;
		-webkit-mask: radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub-h)), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub-h)), #0000 97%, #000) right / 51% 100% no-repeat;
		mask: radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub-h)), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub-h)), #0000 97%, #000) right / 51% 100% no-repeat;
	}
	.nx-b__art { height: 240px; min-height: 0; }
	.nx-b__main { padding: 24px 22px 26px; }
	.nx-b__stub { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 6px 16px; height: var(--stub-h); padding: 0 22px; border-left: 0; border-top: 2px dashed var(--line-2); }
	.nx-b__stub .nx-b__price { grid-row: span 2; }
	.nx-b__buy { width: auto; }
	.nx-b__info { justify-self: end; }
	.nx-b__price { font-size: 2.2rem; }
}

@media (max-width: 600px) {
	/* 手機：海報與照片貼齊螢幕兩側，不再留白 */
	.nx-a__art, .nx-c__poster { margin-inline: calc(var(--gutter) * -1); max-width: none; border-radius: 0; box-shadow: none; }
	.nx-a__when .nx-count { margin-left: 0; width: 100%; }
	.nx-c__facts li, .nx-c__facts li + li { width: 100%; padding: 6px 0; border-left: 0; border-bottom: 1px solid rgba(243, 236, 220, .14); }
	.nx-d__day { min-width: 8rem; }
	.nx-d__art { max-width: none; width: 100%; }
	.nx-d__list dd { max-width: 74%; }
	.nx .btn-row .btn { flex: 1 1 auto; }
}

/* =========================================================
   手機與平板的照片邊距（2026-10-29）
   螢幕小時，左右留白縮小；封面、內文照片、相簿貼齊螢幕兩側，文字仍保留邊距。
   ========================================================= */

@media (max-width: 900px) {
	:root { --gutter: 24px; }
	.event-info .poster-frame { max-width: 360px; }
}

@media (max-width: 600px) {
	:root { --gutter: 16px; }
	.event-cover, .article-cover, .article-cover--news, .about__img { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
	.event-cover { aspect-ratio: 4 / 3; }
	.event-gallery .gallery { margin-inline: calc(var(--gutter) * -1); columns: 2; column-gap: 3px; }
	.event-gallery .gallery a { margin-bottom: 3px; border-radius: 0; }
	.event-info .poster-frame { max-width: none; }
	.show, .show--feature { flex-basis: 86%; }
	.pillar { flex-basis: 90%; }
	.pillars__track { gap: 8px; }
}

/* =========================================================
   首頁重整（2026-10-29 第二輪）
   順序：主視覺、下一場演出、最新消息、近期紀錄、關於、數字、三個信念、樂團成員、聯繫我們、頁尾
   每個區塊最後都用同一個「前往」按鈕（.sec-foot／.sec-more）
   ========================================================= */

/* 手機與平板：第二層分頁不固定，跟著頁面捲走，畫面上方只保留一條頁首 */
@media (max-width: 900px) {
	.sub-nav { position: relative; top: auto; }
	.site-header.is-scrolled { background: rgba(251, 250, 247, .9); }
}

/* 共用：區塊最後的「前往」按鈕 */
.sec-foot { display: flex; justify-content: flex-end; margin-top: clamp(40px, 7vh, 72px); padding-top: 20px; border-top: 1px solid var(--line-2); }
.sec-more { position: relative; display: inline-flex; align-items: center; gap: 16px; min-height: 52px; padding: 0 22px 0 26px; overflow: hidden; isolation: isolate; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font-size: var(--step--1); font-weight: 500; letter-spacing: .14em; transition: color .45s var(--ease); }
.sec-more::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .5s var(--ease); }
.sec-more::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.sec-more:active { transform: scale(.98); }
@media (hover: hover) {
	.sec-more:hover { color: var(--bg); }
	.sec-more:hover::before { transform: translateY(0); }
	.sec-more:hover::after { width: 44px; }
}
.nx--c .sec-foot { border-top-color: rgba(243, 236, 220, .18); }
.nx--c .sec-more { border-color: rgba(243, 236, 220, .6); color: #f3ecdc; }
.nx--c .sec-more::before { background: #f3ecdc; }
@media (hover: hover) { .nx--c .sec-more:hover { color: #16140f; } }
.section__lead { max-width: 26em; margin: 0; color: var(--ink-2); }

/* 下一場演出 A：進場時海報像布幕拉開、日期數字逐字升起、光線掃過海報 */
.nx-a__art { position: relative; }
.nx-a__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 65%); transform: translateX(-130%); pointer-events: none; }
.nx-a__art.is-lit::after { transform: translateX(130%); transition: transform 1.8s var(--ease); }
.nx-ch { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: .9; padding-bottom: .04em; }
.nx-ch i { display: inline-block; font-style: normal; }

/* 最新消息：最新一則放大，另兩則在旁；背後有隨捲動緩慢移動的大字 */
.news-home { position: relative; overflow: clip; }
.news-home__mark { position: absolute; z-index: 0; top: clamp(20px, 5vh, 56px); right: -3vw; font-family: var(--latin); font-size: clamp(7rem, 3rem + 15vw, 21rem); font-style: italic; font-weight: 500; line-height: .8; color: var(--ink); opacity: .05; white-space: nowrap; pointer-events: none; user-select: none; }
.news-home .wrap { position: relative; z-index: 1; }
.news-home__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.nh-img { overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-3); aspect-ratio: 3 / 2; }
.nh-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.nh-img--lead { aspect-ratio: 16 / 10; }
@media (hover: hover) { .nh-lead:hover .nh-img img, .nh-row:hover .nh-img img { transform: scale(1.045); } }
.nh-meta { display: flex; gap: 12px; margin-top: 18px; color: var(--ink-3); font-size: .8rem; letter-spacing: .12em; }
.nh-meta b { color: var(--brass-ink); font-weight: 500; }
.nh-lead { display: block; }
.nh-lead__title { margin-top: 8px; font-family: var(--serif); font-size: var(--step-3); font-weight: 700; line-height: 1.4; text-wrap: balance; }
.nh-lead__text { max-width: 36em; margin: 12px 0 0; color: var(--ink-2); }
.nh-list { display: grid; gap: clamp(20px, 3vh, 32px); margin: 0; padding: 0; list-style: none; }
.nh-row { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 20px; align-items: start; padding-bottom: clamp(20px, 3vh, 32px); border-bottom: 1px solid var(--line); }
.nh-row .nh-img { aspect-ratio: 3 / 2; }
.nh-row .news-tag { top: 8px; left: 8px; padding: 3px 9px; font-size: .66rem; }
.nh-row .nh-meta { margin-top: 0; }
.nh-row__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-family: var(--serif); font-size: var(--step-1); font-weight: 600; line-height: 1.5; }

/* 關於：三行短句＋演出後的大合照（橫式，完整呈現） */
.about__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.about__img { aspect-ratio: 3 / 2; }
.about__img img { height: 100%; }
.about .manifesto__text { max-width: none; font-size: clamp(1.6rem, 1rem + 1.9vw, 2.6rem); line-height: 1.6; }

/* 數字：深色帶，數字像計數器一樣轉到定位 */
.numbers { position: relative; overflow: hidden; padding-block: clamp(64px, 11vh, 120px); background: #13110d; color: #f3ecdc; }
.numbers::before { content: ""; position: absolute; inset: 50% 0 auto; height: 88px; margin-top: -44px; background: linear-gradient(rgba(229, 207, 159, .07) 1px, transparent 1px) 0 0 / 100% 22px; pointer-events: none; }
.numbers .numbers__grid { position: relative; gap: clamp(20px, 3vw, 48px); margin-top: 0; border-top: 0; }
.numbers .stat, .numbers .stat + .stat { padding: 0; border: 0; }
.numbers .stat__value { gap: .12em; color: var(--brass-light); font-size: clamp(3.2rem, 1.8rem + 5vw, 7rem); }
.numbers .stat__value small { color: #cfc6b3; }
.numbers .stat__label { margin-top: 0; color: #cfc6b3; }
.stat__line { display: block; height: 1px; margin: 18px 0 14px; background: rgba(229, 207, 159, .45); transform-origin: left; }
.has-motion .stat__line { transform: scaleX(0); }
.odo { display: inline-flex; line-height: 1.2; font-feature-settings: "lnum" 1; }
.odo__col { display: inline-block; height: 1.2em; overflow: hidden; }
.odo__strip { display: flex; flex-direction: column; }
.odo__strip span { display: block; height: 1.2em; line-height: 1.2; }

/* 三個信念：電腦左邊文字、右邊照片固定並完整呈現，捲到哪一段就換哪一張；手機照片在上、文字在下 */
.beliefs__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); }
.belief { display: flex; flex-direction: column; justify-content: center; min-height: 54vh; padding: 3vh 0 3vh clamp(20px, 2vw, 32px); border-left: 2px solid var(--line); opacity: .3; transition: opacity .6s var(--ease), border-color .6s var(--ease); }
.belief.is-active { opacity: 1; border-left-color: var(--brass); }
.belief__img { display: none; margin: 0; }
.belief__en { font-family: var(--latin); font-size: var(--step-1); font-style: italic; color: var(--brass-ink); }
.belief__title { margin: 4px 0 16px; font-size: var(--step-4); font-weight: 900; letter-spacing: .08em; line-height: 1.15; }
.belief__text { max-width: 26em; margin: 0; color: var(--ink-2); font-size: var(--step-1); line-height: 1.85; }
.beliefs__stage { position: sticky; top: calc(var(--header-h) + 8vh); align-self: start; }
.beliefs__frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--bg-3); box-shadow: var(--shadow-lg); }
.beliefs__photo { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .9s var(--ease), transform 1.8s var(--ease); }
.beliefs__photo.is-active { opacity: 1; transform: none; }
.beliefs__photo img { width: 100%; height: 100%; object-fit: cover; }
.beliefs__steps { display: flex; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.beliefs__steps li { flex: 1; padding-top: 12px; border-top: 2px solid var(--line); color: var(--ink-3); font-size: var(--step--1); letter-spacing: .2em; transition: color .5s, border-color .5s; }
.beliefs__steps li.is-active { color: var(--ink); border-top-color: var(--brass); }

/* 樂團成員：彩色照片，不依賴滑鼠 */
.people-home .face__img { box-shadow: var(--shadow); }

/* 聯繫我們 */
.contact-home { overflow: hidden; padding-top: clamp(96px, 15vh, 170px); background: var(--bg); }
.contact-home__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.contact-home__title { font-size: var(--step-4); font-weight: 900; letter-spacing: .05em; line-height: 1.25; }
.contact-home .lead { max-width: 24em; margin: 20px 0 0; }
.contact-home__ways { margin: 0; border-top: 1px solid var(--line-2); }
.contact-home__ways div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-home__ways dt { color: var(--ink-3); font-size: var(--step--1); letter-spacing: .2em; }
.contact-home__ways dd { margin: 0; font-family: var(--serif); font-size: var(--step-1); overflow-wrap: anywhere; }
.contact-home__ways dd a { background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .5s var(--ease); }
.contact-home__ways dd a.num { font-family: var(--latin); font-size: 1.35em; }
@media (hover: hover) { .contact-home__ways dd a:hover { background-size: 100% 1px; } }
.contact-home .marquee { margin-top: clamp(56px, 9vh, 96px); }

/* 頁尾（深色）：品牌與聯絡在左、網站地圖在右，最下方版權 */
.site-footer { padding-top: clamp(56px, 9vh, 96px); border-top: 0; background: #13110d; color: #cfc6b3; }
.footer-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); padding-bottom: clamp(40px, 7vh, 72px); }
.footer-brand__mark { display: inline-block; }
.footer-brand__mark img { width: min(280px, 64vw); height: auto; }
.site-footer .footer-intro { max-width: 24em; margin: 18px 0 22px; color: #cfc6b3; font-size: var(--step--1); }
.footer-contact { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.footer-contact li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.footer-contact span { color: #8f8775; font-size: .76rem; letter-spacing: .16em; }
.footer-contact a { color: #f3ecdc; overflow-wrap: anywhere; }
.footer-contact .num { font-size: 1.1rem; }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.footer-social a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid rgba(243, 236, 220, .22); border-radius: 999px; color: #f3ecdc; font-size: .82rem; letter-spacing: .1em; transition: background .4s var(--ease), color .4s var(--ease); }
@media (hover: hover) { .footer-social a:hover { background: #f3ecdc; color: #16140f; } }
.footer-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.footer-nav h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 1.05rem; font-weight: 700; letter-spacing: .12em; }
.footer-nav h2 a { color: #f3ecdc; }
.footer-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: .88rem; }
.footer-nav li a { display: inline-block; padding: 5px 0; color: #a59c88; transition: color .3s; }
@media (hover: hover) { .footer-nav li a:hover { color: #f3ecdc; } }
.site-footer .footer-base { padding: 18px var(--gutter) 24px; border-top: 1px solid rgba(243, 236, 220, .12); color: #8f8775; }
.site-footer .footer-base a { color: #cfc6b3; }

@media (max-width: 1080px) {
	.footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.news-home__grid { grid-template-columns: 1fr; }
	.about__grid { grid-template-columns: 1fr; }
	.about__img { aspect-ratio: 3 / 2; }
	.numbers .numbers__grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
	.beliefs__grid { grid-template-columns: 1fr; }
	.beliefs__stage { display: none; }
	.belief { min-height: 0; padding: 0 0 44px; border-left: 0; opacity: 1; }
	.belief__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; margin: 0 calc(var(--gutter) * -1) 22px; }
	.belief__img img { width: 100%; height: 100%; object-fit: cover; }
	.contact-home__grid { grid-template-columns: 1fr; }
	.footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
}

@media (max-width: 600px) {
	.sec-foot { justify-content: stretch; }
	.sec-more { width: 100%; justify-content: space-between; }
	.nh-img--lead { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
	.nh-row { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
	.nh-row .nh-img { aspect-ratio: 1; }
	.nh-lead__title { font-size: var(--step-2); }
	.numbers .stat__value { font-size: 3.4rem; }
	.contact-home__ways div { grid-template-columns: 5em minmax(0, 1fr); }
	.footer-nav { grid-template-columns: 1fr 1fr; }
	.site-footer .footer-base { flex-direction: column; }
}

/* =========================================================
   紀錄列表：即將登場（深色）與已結束（淺色）明確分開
   ========================================================= */
.rec-upcoming { margin-top: clamp(28px, 5vh, 48px); padding-block: clamp(48px, 8vh, 88px); background: #13110d; color: #f3ecdc; }
.rec-upcoming .eyebrow { color: var(--brass-light); }
.rec-upcoming .eyebrow em { color: #8f8775; }
.rec-upcoming__head { margin-bottom: clamp(20px, 4vh, 36px); }
.rec-upcoming__title { display: flex; align-items: center; gap: 14px; color: #fbf6ea; font-size: var(--step-3); font-weight: 900; letter-spacing: .04em; }
.rec-upcoming__title small { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; border-radius: 999px; background: var(--brass-light); color: #16140f; font-size: 1.1rem; font-weight: 600; }
.rec-upcoming .upcoming-row { grid-template-columns: 260px 7.5em minmax(0, 1fr); align-items: start; padding: 26px 0; border-top: 1px solid rgba(243, 236, 220, .16); }
.rec-upcoming .upcoming-row:last-child { border-bottom: 1px solid rgba(243, 236, 220, .16); }
.rec-upcoming .upcoming-row__img { display: block; aspect-ratio: 3 / 2; }
.rec-upcoming .upcoming-row__date b { color: var(--brass-light); font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); line-height: 1; }
.rec-upcoming .upcoming-row__date small { color: #a59c88; }
.upcoming-row__kind { color: var(--brass-light); font-size: .8rem; letter-spacing: .22em; }
.rec-upcoming .upcoming-row__title { margin: 6px 0; color: #fbf6ea; font-size: var(--step-2); line-height: 1.4; }
.rec-upcoming .upcoming-row__venue { margin: 0; color: #cfc6b3; }
.upcoming-row__buy { margin-top: 16px; }
.rec-past { padding-top: clamp(48px, 8vh, 88px); }
.rec-past__head .eyebrow { margin-bottom: .6rem; }
.rec-past__title { font-size: var(--step-3); font-weight: 900; letter-spacing: .04em; }

@media (max-width: 900px) {
	.rec-upcoming .upcoming-row { grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; padding: 0 0 28px; border-top: 0; }
	.rec-upcoming .upcoming-row + .upcoming-row { padding-top: 28px; border-top: 1px solid rgba(243, 236, 220, .16); }
	.rec-upcoming .upcoming-row:last-child { border-bottom: 0; }
	.rec-upcoming .upcoming-row__img { grid-column: 1 / -1; margin-inline: calc(var(--gutter) * -1); border-radius: 0; aspect-ratio: 16 / 9; }
	.rec-upcoming .upcoming-row__date b { font-size: 2.4rem; }
}

/* =========================================================
   紀錄內頁：資訊表、圖文交錯的內容、演出者卡、演出名單
   ========================================================= */
.info-table { margin: 18px 0 0; border-top: 1px solid var(--line-2); }
.info-table__row { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.info-table dt { color: var(--ink-3); font-size: var(--step--1); letter-spacing: .2em; }
.info-table dd { margin: 0; }
.info-table dd b.num { font-size: 1.35rem; }
.info-table dd span.num { margin-left: .5em; font-size: 1.2rem; }
.info-table dd small { display: block; color: var(--ink-3); font-size: .88rem; }
.info-table dd a { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }

.story { padding-top: clamp(48px, 8vh, 96px); }
.story__intro { max-width: var(--read); margin-bottom: clamp(24px, 4vh, 40px); }
.story__intro p { font-size: var(--step-1); line-height: 1.9; }
.story__block { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(28px, 5vh, 56px); }
.story__block.is-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.story__block.is-flip .story__img { order: 2; }
.story__block.is-text { grid-template-columns: minmax(0, 1fr); max-width: var(--read); }
.story__img { display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radius); background: var(--bg-3); cursor: zoom-in; }
.story__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
@media (hover: hover) { .story__img:hover img { transform: scale(1.03); } }
.story__title { margin: 0 0 14px; font-size: var(--step-2); font-weight: 900; letter-spacing: .04em; line-height: 1.4; }
.story__text .prose p { margin: 0 0 1em; font-size: var(--step-1); line-height: 1.9; color: var(--ink-2); }
.story__text .prose p:last-child { margin-bottom: 0; }

.artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.artist { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 20px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
@media (hover: hover) { .artist:hover { border-color: var(--line-2); box-shadow: var(--shadow); } }
.artist__img { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; background: var(--bg-3); }
.artist__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.artist__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.artist__text small { color: var(--brass-ink); font-size: .78rem; letter-spacing: .18em; }
.artist__text b { font-family: var(--serif); font-size: var(--step-1); }
.artist__bio { display: -webkit-box; overflow: hidden; color: var(--ink-2); font-size: .9rem; line-height: 1.75; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.artist__more { margin-top: auto; padding-top: 8px; font-size: .8rem; letter-spacing: .14em; text-decoration: underline; text-underline-offset: 4px; }

.event-crew { padding-top: clamp(32px, 6vh, 56px); }
.crew { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.crew__col:only-child { grid-column: 1 / -1; max-width: var(--read); }
.crew__title { margin: 0 0 10px; color: var(--ink-3); font-size: var(--step--1); font-weight: 500; letter-spacing: .22em; }
.crew__list { margin: 0; border-top: 1px solid var(--line-2); }
.crew__list div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.crew__list dt { color: var(--ink-3); font-size: .88rem; }
.crew__list dd { margin: 0; line-height: 1.8; }

@media (max-width: 900px) {
	.story__block, .story__block.is-flip { grid-template-columns: 1fr; gap: 20px; padding-block: 24px; }
	.story__block.is-flip .story__img { order: 0; }
	.story__img { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
	.crew { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.artists { grid-template-columns: 1fr; }
	.artist { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 14px; }
	.crew__list div { grid-template-columns: 6em minmax(0, 1fr); }
}

/* 紀錄內頁：演出者（大字名單＋直式照片，捲動時照片由下往上揭開、名字升起） */
.performers { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.performer { border-bottom: 1px solid var(--line); }
.performer__link { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(24px, 4vh, 40px); }
.performer__img { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-3); }
.performer__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 1.2s var(--ease); }
.performer__role { display: block; color: var(--brass-ink); font-size: var(--step--1); letter-spacing: .24em; }
.performer__name { display: block; overflow: hidden; margin: 6px 0 14px; padding-bottom: .08em; font-family: var(--serif); font-size: var(--step-4); font-weight: 900; letter-spacing: .08em; line-height: 1.15; }
.performer__name > span { display: inline-block; background: linear-gradient(var(--brass) 0 0) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease); }
.performer__bio { display: -webkit-box; max-width: 40em; overflow: hidden; color: var(--ink-2); line-height: 1.85; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.performer__more { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; font-size: var(--step--1); font-weight: 500; letter-spacing: .14em; }
.performer__more::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width .5s var(--ease); }
@media (hover: hover) {
	.performer__link:hover .performer__img img { transform: scale(1.05); }
	.performer__link:hover .performer__name > span { background-size: 100% 2px; }
	.performer__link:hover .performer__more::after { width: 48px; }
}

/* 紀錄內頁：更多照片固定三張（一大兩小），捲動時依序揭開、照片各自以不同速度移動 */
.trio { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: clamp(8px, 1vw, 14px); height: clamp(360px, 46vw, 640px); }
.trio__item { position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-3); cursor: zoom-in; }
.trio__item:first-child { grid-row: 1 / 3; }
.trio__item img { width: 100%; height: 116%; object-fit: cover; will-change: transform; transition: filter .6s var(--ease); }
@media (hover: hover) { .trio__item:hover img { filter: brightness(1.06) saturate(1.05); } }
.trio--2 { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; }
.trio--2 .trio__item:first-child { grid-row: auto; }
.trio--1 { grid-template: 1fr / 1fr; }

@media (max-width: 900px) {
	.trio { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; gap: 4px; margin-inline: calc(var(--gutter) * -1); }
	.trio__item { border-radius: 0; aspect-ratio: 1; }
	.trio__item:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 3 / 2; }
	.trio__item img { height: 100%; }
}
@media (max-width: 600px) {
	.performer__link { grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: start; }
	.performer__name { margin: 4px 0 8px; font-size: var(--step-2); }
	.performer__bio { -webkit-line-clamp: 4; font-size: .92rem; }
	.performer__more { margin-top: 10px; }
}
.trio__all { display: flex; justify-content: flex-end; margin-top: 20px; }
.crew__title small { margin-left: 1em; color: var(--ink-3); font-size: .78rem; letter-spacing: .08em; }
@media (max-width: 600px) { .trio__all { justify-content: stretch; } .trio__all .sec-more { width: 100%; justify-content: space-between; } }

/* =========================================================
   成員：照片暫代、團員編號、現任團員依聲部編號排列、組織架構圖
   ========================================================= */
.photo-ph { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); color: var(--ink-3); font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 3vw, 4rem); font-weight: 700; }
.performer__img .photo-ph, .ep-artist__img .photo-ph, .org__photo .photo-ph { font-size: 1.6rem; }
.face__code { display: block; margin-top: 2px; color: var(--ink-3); font-size: .85rem; font-weight: 400; letter-spacing: .08em; }


/* =========================================================
   標題區（2026-10-29）：標題縮小、旁邊放照片；手機第二層分頁換行不被裁切
   ========================================================= */
.page-hero { padding: calc(var(--header-h) + clamp(32px, 6vh, 72px)) 0 clamp(28px, 4vh, 48px); }
.page-hero__title { font-size: var(--step-4); letter-spacing: .06em; }
/* 標題背景照片：照片在右側，往左與往下淡出到底色，左側留給標題；照片稍微調淡 */
.page-hero:has(.page-hero__photo) { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(320px, 44vh, 480px); }
.page-hero:has(.page-hero__photo) .wrap { position: static; }
.page-hero:has(.page-hero__photo) .wrap > :not(.page-hero__photo) { position: relative; z-index: 1; max-width: min(34em, 52%); }
.page-hero__photo { position: absolute; z-index: -1; top: var(--header-h); right: 0; bottom: 0; width: 68%; margin: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 22%, #000 58%), linear-gradient(180deg, #000 62%, transparent 100%);
	-webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 22%, #000 58%), linear-gradient(180deg, #000 62%, transparent 100%); mask-composite: intersect; }
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .82; filter: saturate(.9); will-change: transform; }
.has-motion .page-hero__photo img { animation: hero-photo-img 1.4s var(--ease) both; }
/* 同一目錄內切換分頁：標題直接顯示，照片只淡入 */
.nav-sibling .page-hero [data-reveal] { opacity: 1; clip-path: none; }
.has-motion.nav-sibling .page-hero__photo img { animation: hero-photo-fade .6s ease-out both; }
@keyframes hero-photo-fade { from { opacity: 0; } to { opacity: .82; } }
@keyframes hero-photo-img { from { opacity: 0; transform: scale(1.12); } to { opacity: .82; transform: none; } }

@media (max-width: 900px) {
	/* 手機：照片在標題上方整片當背景，往下淡出，標題落在淡出的部分 */
	.page-hero:has(.page-hero__photo) { display: block; min-height: 0; padding-top: calc(var(--header-h) + 170px); }
	.page-hero:has(.page-hero__photo) .wrap > :not(.page-hero__photo) { max-width: none; }
	.page-hero__photo { top: 0; left: 0; bottom: auto; width: 100%; height: calc(var(--header-h) + 250px);
		-webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
	.page-hero__photo img { opacity: .9; }
	.sub-nav .chips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; }
}

/* =========================================================
   成員・組織架構：團長在上、顧問以虛線連在旁邊，四個部門各一欄；捲到時連接線畫出、卡片依序出現
   ========================================================= */
.org__date { color: var(--ink-3); font-size: var(--step--1); letter-spacing: .12em; }
.org__chart { --org-gap: 48px; --line-c: var(--line-2); }
.org__crown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; max-width: 920px; margin: 0 auto var(--org-gap); align-items: stretch; }
.org__root, .org__council { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 24px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-lg); text-align: center; }
.org__root { justify-content: center; }
.org__root .org__photo { width: 112px; height: 112px; margin-bottom: 10px; }
.org__root small, .org__council > small { color: var(--brass-ink); font-size: .8rem; letter-spacing: .24em; }
.org__council > small { font-family: var(--latin); font-style: italic; font-size: .95rem; letter-spacing: .04em; }
.org__root b { font-family: var(--serif); font-size: var(--step-3); }
.org__root::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: var(--org-gap); background: var(--line-c); transform-origin: top; }
.org__council::before { content: ""; position: absolute; right: 100%; top: 50%; width: 64px; border-top: 1px dashed var(--line-2); }
.org__council h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: var(--step-2); font-weight: 900; letter-spacing: .16em; }
.org__council h3 .num { color: var(--brass-ink); font-size: 1rem; letter-spacing: 0; }
.org__council-names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; width: 100%; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; font-family: var(--serif); font-size: var(--step-0); }
.org__council-more { margin-top: auto; padding-top: 14px; color: var(--ink-2); font-size: .82rem; letter-spacing: .12em; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.org__lead { display: flex; align-items: center; gap: 14px; }
.org__lead-text { display: grid; gap: 2px; }
.org__lead small, .org__group > small { color: var(--brass-ink); font-size: .78rem; letter-spacing: .2em; }
.org__lead b { font-family: var(--serif); font-size: var(--step-1); }
.org__lead a, .org__reps a, .org__chip a { background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
@media (hover: hover) { .org__lead a:hover, .org__reps a:hover, .org__chip a:hover { background-size: 100% 1px; } }
.org__photo { display: block; flex: none; width: 60px; height: 60px; overflow: hidden; border-radius: 50%; background: var(--bg-3); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--line); }
.org__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.org__photo .photo-ph { font-size: 1.4rem; }
.org__depts { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: var(--org-gap); }
.org__depts::before { content: ""; position: absolute; top: 0; left: 12.5%; right: 12.5%; height: 1px; background: var(--line-c); transform-origin: center; }
.org__dept { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px 22px 22px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.org__dept::before { content: ""; position: absolute; left: 50%; top: calc(var(--org-gap) * -1 - 1px); width: 1px; height: var(--org-gap); background: var(--line-c); transform-origin: top; }
/* 連接線與部門卡相接處的節點 */
.org__dept::after { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--bg); }
.org__dept-head { text-align: center; }
.org__dept-head small { display: block; color: var(--ink-3); font-family: var(--latin); font-style: italic; font-size: .9rem; }
.org__dept-head h3 { margin: 0; font-size: var(--step-1); font-weight: 900; letter-spacing: .14em; }
.org__group { display: grid; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--line); }
.org__group > small { display: flex; align-items: baseline; gap: 8px; }
.org__group > small .num { color: var(--ink-3); font-size: .78rem; letter-spacing: 0; }
/* 部門成員：同一種小頭像列；人多（聲部代表）排兩欄 */
.org__minis { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.org__minis.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.org__mini { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--lg-light, none), rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(22, 20, 15, .07), 0 2px 8px -4px rgba(22, 20, 15, .18); transition: background-color .3s, box-shadow .3s, transform .3s var(--ease); }
.org__mini-photo { flex: none; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: var(--bg-3); }
.org__mini-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.org__mini-photo .photo-ph { font-size: .95rem; }
.org__mini-text { display: grid; min-width: 0; line-height: 1.25; }
.org__mini-text a, .org__mini-text b { overflow: hidden; font-family: var(--serif); font-size: var(--step-0); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.org__mini-text a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.org__mini-text small { overflow: hidden; color: var(--ink-3); font-size: .72rem; letter-spacing: .08em; white-space: nowrap; text-overflow: ellipsis; }
@media (hover: hover) { .org__mini:has(a):hover { background-color: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 1px 0 #fff, 0 0 0 1px rgba(22, 20, 15, .14), 0 6px 16px -8px rgba(22, 20, 15, .3); } }
.org__mini:has(a):active { transform: scale(.97); }

/* 組織圖用玻璃材質：後面鋪一層暖色光暈，卡片是半透明玻璃，看得出層次 */
.org { position: relative; isolation: isolate; }
.org::before { content: ""; position: absolute; z-index: -1; inset: 8% -5% 0; background: radial-gradient(38% 42% at 18% 62%, rgba(229, 207, 159, .55), transparent 70%), radial-gradient(34% 40% at 82% 70%, rgba(168, 130, 63, .2), transparent 70%), radial-gradient(28% 30% at 52% 18%, rgba(229, 207, 159, .35), transparent 72%); filter: blur(24px); pointer-events: none; }
.org__root, .org__council, .org__dept { border-color: transparent; background: rgba(255, 255, 255, .52); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(22, 20, 15, .06), 0 22px 48px -28px rgba(22, 20, 15, .38); }
.org__photo { box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 0 4px rgba(22, 20, 15, .08), 0 6px 16px -8px rgba(22, 20, 15, .35); }
.org__dept::after { box-shadow: 0 0 0 4px rgba(251, 250, 247, .9); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
	.org::before { display: none; }
	.org__root, .org__council, .org__dept, .org__mini { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
}
.has-motion [data-org] .org__root::after, .has-motion [data-org] .org__dept::before { transform: scaleY(0); }
.has-motion [data-org] .org__depts::before { transform: scaleX(0); }
.has-motion [data-org] .org__dept, .has-motion [data-org] .org__root, .has-motion [data-org] .org__council { opacity: 0; }

/* 歷任團長：接力棒，長度依任期 */
.relay { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.relay__item { flex: var(--span) 1 150px; min-width: 0; display: grid; align-content: start; gap: 4px; padding: 0 16px 0 0; }
.relay__bar { position: relative; display: block; height: 10px; margin-bottom: 18px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.relay__bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ink-3), var(--ink-2)); transform-origin: left; }
.relay__item.is-now .relay__bar::after { background: linear-gradient(90deg, var(--brass-ink), var(--brass-light)); }
.has-motion [data-relay] .relay__bar::after { transform: scaleX(0); }
.relay__photo { position: relative; display: block; width: min(100%, 180px); aspect-ratio: 3 / 4; margin-bottom: 18px; border-radius: calc(var(--radius) * .7); overflow: hidden; background: var(--bg-3); box-shadow: var(--shadow-lg); }
.relay__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.relay__photo .photo-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-3); font-family: var(--serif); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); background: linear-gradient(160deg, var(--bg-2), var(--bg-3)); }
/* 現任：金框＋柔和金色光暈，照片緩慢呼吸般放大 */
.relay__item.is-now .relay__photo { outline: 2px solid var(--brass-light); outline-offset: 4px; box-shadow: 0 0 0 10px rgba(232, 205, 150, .14), 0 24px 48px -16px rgba(168, 130, 63, .55); }
.relay__item.is-now .relay__photo img { animation: relay-now 6s ease-in-out infinite alternate; }
@keyframes relay-now { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (hover: hover) { .relay__item:not(.is-now):hover .relay__photo img { transform: scale(1.04); } }
.relay__no { position: absolute; left: 12px; bottom: 6px; color: #fbfaf7; font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); line-height: 1; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.relay__photo .photo-ph + .relay__no { color: var(--brass-ink); text-shadow: none; }
.relay__role { color: var(--ink-3); font-size: .8rem; letter-spacing: .16em; }
.relay__name { font-family: var(--serif); font-size: var(--step-2); }
.relay__name a { background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
@media (hover: hover) { .relay__name a:hover { background-size: 100% 1px; } }
.relay__years { color: var(--ink-2); font-size: 1.1rem; }
.relay__years em { margin-left: .4em; font-family: var(--sans); font-style: normal; font-size: .85rem; color: var(--brass-ink); }
.relay__note { color: var(--ink-3); font-size: .85rem; }

/* 現任團員：聲部索引在捲到名單時才出現，固定在頁首下方並標出目前的聲部 */
.members { padding-top: clamp(16px, 3vh, 32px); }
.member-sec { padding-top: clamp(28px, 4vh, 44px); scroll-margin-top: calc(var(--header-h) + 120px); }
.member-sec:first-child { padding-top: 0; }
.member-sec:first-child .member-sec__title { padding-top: 0; border-top: 0; }
.member-sec__title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; padding-top: 18px; border-top: 1px solid var(--line-2); font-size: var(--step-2); font-weight: 900; letter-spacing: .06em; }
.member-sec__title .num { color: var(--brass-ink); font-size: 1rem; letter-spacing: .1em; }
.member-sec__title small { margin-left: auto; color: var(--ink-3); font-family: var(--sans); font-size: .85rem; font-weight: 400; letter-spacing: .1em; }
.member-index { position: fixed; z-index: 30; left: 0; right: 0; top: var(--index-top, var(--header-h)); background: rgba(251, 250, 247, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transform: translate3d(0, -110%, 0); opacity: 0; pointer-events: none; transition: transform .45s var(--ease), opacity .3s; will-change: transform; backface-visibility: hidden; }
.member-index.is-on { transform: translate3d(0, 0, 0); opacity: 1; pointer-events: auto; }
/* 手機：固定列不用毛玻璃（iOS 捲動時毛玻璃會讓固定列抖動），改用實色 */
@media (max-width: 900px) { .member-index { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.member-index ol { display: flex; gap: 4px; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 8px var(--gutter); overflow-x: auto; list-style: none; scrollbar-width: none; }
.member-index ol::-webkit-scrollbar { display: none; }
.member-index a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 999px; white-space: nowrap; color: var(--ink-2); font-size: .88rem; transition: background .3s, color .3s; }
.member-index a .num { color: var(--ink-3); font-size: .8rem; }
.member-index a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.member-index a[aria-current="true"] .num { color: var(--brass-light); }

@media (max-width: 1080px) {
	.org__depts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.org__depts::before, .org__dept::before { display: none; }
	.org__root::after, .org__dept::after { display: none; }
	.org__depts { padding-top: 0; }
}
@media (max-width: 760px) {
	.org__crown { grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; }
	.org__council::before { display: none; }
	.org__council-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.org__depts { grid-template-columns: 1fr; gap: 12px; }
	.relay { flex-direction: column; gap: 0; }
	.relay__item { position: relative; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 0 0 22px 22px; }
	.relay__item > *:not(.relay__bar) { grid-column: 2; }
	.relay__photo { grid-column: 1 !important; grid-row: 1 / span 4; width: 88px; margin: 0; }
	.relay__no { left: 8px; bottom: 4px; font-size: 1.6rem; }
	.relay__bar { position: absolute; left: 0; top: 4px; bottom: 0; width: 6px; height: auto; margin: 0; }
	.relay__bar::after { transform-origin: top; }
	.has-motion [data-relay] .relay__bar::after { transform: scaleY(0); }
	.member-sec__title { font-size: var(--step-1); }
}

[data-org] .org__root::after { transition: transform .5s var(--ease); }
[data-org] .org__depts::before { transition: transform .7s var(--ease) .4s; }
[data-org] .org__dept::before { transition: transform .5s var(--ease) .9s; }
[data-org].is-drawn .org__root::after, [data-org].is-drawn .org__dept::before, [data-org].is-drawn .org__depts::before { transform: none; }
[data-relay] .relay__bar::after { transition: transform 1.2s var(--ease) calc(var(--i) * .25s); }
[data-relay].is-drawn .relay__bar::after { transform: none; }

/* =========================================================
   現任團員最下方「加入樂團」：深色圓角面板，照片在右側往左淡出，文字在左；手機照片在上方往下淡出
   ========================================================= */
.join-band { padding-block: clamp(56px, 10vh, 112px) clamp(64px, 11vh, 128px); }
.join-band__panel { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(420px, 56vh, 560px); padding: clamp(32px, 5vw, 64px); border-radius: var(--radius); background: #16140f; color: #f3ecdc; }
.join-band__photo { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 70%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 30%, #000 65%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 30%, #000 65%); }
.join-band__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .62; filter: saturate(.85); transform: scale(1.06); transition: transform 1.6s var(--ease); }
.join-band__panel.is-in .join-band__photo img, .join-band__panel:hover .join-band__photo img { transform: none; }
.join-band__text { position: relative; max-width: 30em; }
.join-band .eyebrow { color: var(--brass-light); }
.join-band .eyebrow em { color: rgba(243, 236, 220, .6); }
.join-band__title { margin: 0; font-size: var(--step-5); font-weight: 900; letter-spacing: .06em; line-height: 1.1; }
.join-band__lead { margin: 20px 0 0; color: #d8d0bf; font-size: var(--step-1); line-height: 1.8; }
.join-band__facts { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 28px 0 32px; padding-top: 20px; border-top: 1px solid rgba(243, 236, 220, .18); }
.join-band__facts dt { color: rgba(243, 236, 220, .55); font-size: var(--step--1); letter-spacing: .22em; }
.join-band__facts dd { margin: 4px 0 0; font-family: var(--serif); font-size: var(--step-1); }
@media (max-width: 900px) {
	.join-band__panel { display: block; min-height: 0; padding: 220px 24px 32px; }
	.join-band__photo { inset: 0 0 auto 0; width: 100%; height: 300px;
		-webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 40%, transparent 100%); }
	.join-band__photo img { opacity: .7; }
}

/* =========================================================
   換頁轉場：頁首與第二層分頁固定不動，標題照片交叉淡換，其餘內容快速淡入（支援的瀏覽器才有）
   ========================================================= */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.sub-nav { view-transition-name: sub-nav; }
.page-hero__photo { view-transition-name: page-photo; }
::view-transition-group(*) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root) { animation: vt-out .25s ease-in both; }
::view-transition-new(root) { animation: vt-in .4s ease-out both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* =========================================================
   成員內頁：深色舞台（照片＋放大模糊的同一張照片當背景）→ 職務 → 介紹 → 學經歷 → 演出 → 同聲部 → 上一位／下一位
   ========================================================= */
.pp { padding-bottom: clamp(64px, 10vh, 120px); }
.pp-stage { padding-top: calc(var(--header-h) + clamp(12px, 2vh, 24px)); }
.pp-stage__panel { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text photo"; align-items: end; gap: clamp(28px, 4vw, 64px); min-height: clamp(520px, 74vh, 760px); padding: clamp(28px, 4vw, 64px); border-radius: var(--radius); background: #14120e; color: #f3ecdc; }
.pp-stage__bg { position: absolute; z-index: -2; inset: -10%; }
.pp-stage__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(48px) saturate(1.3) brightness(.55); transform: scale(1.1); }
.pp-stage__panel::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(120% 90% at 85% 10%, transparent 0%, rgba(20, 18, 14, .55) 55%, #14120e 100%), linear-gradient(90deg, rgba(20, 18, 14, .85), rgba(20, 18, 14, .2) 70%); }
.pp-stage__mark { position: absolute; z-index: -1; left: clamp(12px, 3vw, 40px); top: clamp(-10px, -1vw, 0px); color: transparent; -webkit-text-stroke: 1px rgba(232, 205, 150, .22); font-family: var(--latin); font-size: clamp(7rem, 4rem + 14vw, 17rem); font-weight: 500; line-height: .9; letter-spacing: -.02em; pointer-events: none; user-select: none; }
.pp-stage__photo { grid-area: photo; position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: calc(var(--radius) * .8); overflow: hidden; background: #221f19; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(243, 236, 220, .08); }
.pp-stage__photo img { width: 100%; height: 100%; object-fit: cover; }
.pp-stage__photo .photo-ph { background: radial-gradient(circle at 50% 35%, #3a3328, #1b1914 70%); color: rgba(232, 205, 150, .55); font-size: clamp(5rem, 3rem + 8vw, 10rem); }
.pp-stage__text { grid-area: text; display: grid; align-content: end; gap: 0; padding-bottom: 8px; }
.pp-crumbs { position: absolute; z-index: 2; top: clamp(24px, 3vw, 44px); left: clamp(28px, 4vw, 64px); display: flex; gap: 10px; color: rgba(243, 236, 220, .6); font-size: .85rem; letter-spacing: .14em; }
.pp-crumbs a:hover { color: #f3ecdc; }
.pp-stage__role { margin: 0 0 10px; color: var(--brass-light); font-size: var(--step-0); letter-spacing: .28em; }
.pp-stage__name { margin: 0; font-family: var(--serif); font-size: clamp(3.2rem, 2rem + 6vw, 7.5rem); font-weight: 900; line-height: 1.02; letter-spacing: .06em; }
.pp-stage__alt { margin: 12px 0 0; color: rgba(243, 236, 220, .7); font-family: var(--latin); font-size: var(--step-2); font-style: italic; }
.pp-facts { display: flex; flex-wrap: wrap; gap: 16px 36px; margin: clamp(28px, 5vh, 48px) 0 0; padding-top: 22px; border-top: 1px solid rgba(243, 236, 220, .16); }
.pp-facts dt { color: rgba(243, 236, 220, .5); font-size: .78rem; letter-spacing: .24em; }
.pp-facts > div { display: grid; grid-template-rows: auto auto; gap: 8px; }
.pp-facts dd { margin: 0; font-family: var(--serif); font-size: var(--step-1); line-height: 1.3; }
.pp-facts dd .num { font-family: var(--latin); font-size: 1.12em; line-height: 1; }
.pp-stage__years { margin: 22px 0 0; color: rgba(243, 236, 220, .6); font-size: .9rem; letter-spacing: .2em; }
.pp-stage__years .num { margin: 0 .15em; color: var(--brass-light); font-family: var(--latin); font-size: 2.2em; letter-spacing: 0; vertical-align: -.12em; }
.has-motion .pp-stage__photo { clip-path: inset(100% 0 0 0); animation: pp-photo 1.1s var(--ease) .1s forwards; }
.has-motion .pp-stage__photo img { transform: scale(1.18); animation: pp-photo-img 1.6s var(--ease) .1s forwards; }
.has-motion .pp-stage__bg img { opacity: 0; animation: pp-bg 1.6s ease-out forwards; }
@keyframes pp-photo { to { clip-path: inset(0 0 0 0); } }
@keyframes pp-photo-img { to { transform: none; } }
@keyframes pp-bg { to { opacity: 1; } }

/* 段落標題：小字＋數量，放在左欄 */
.pp-label { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--ink); font-size: var(--step-1); font-weight: 900; letter-spacing: .14em; }
.pp-label .num { color: var(--brass-ink); font-family: var(--latin); font-size: 1rem; font-weight: 500; letter-spacing: 0; }

.pp-roles { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px clamp(24px, 4vw, 64px); align-items: start; padding-top: clamp(48px, 8vh, 88px); }
.pp-roles__list { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pp-roles__list li { display: grid; gap: 2px; padding: 14px 22px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); }
.pp-roles__list b { font-family: var(--serif); font-size: var(--step-1); }
.pp-roles__list .num { color: var(--brass-ink); font-family: var(--latin); font-size: 1.05rem; }

.pp-intro { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px clamp(24px, 4vw, 64px); padding-top: clamp(48px, 8vh, 96px); }
.pp-intro > .pp-label, .pp-roles > .pp-label, .pp-mates > .pp-label { align-self: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.pp-intro__text { max-width: 40em; }
.pp-intro.has-photos .pp-intro__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.pp-intro__text p { margin: 0 0 1.2em; color: var(--ink-2); font-size: var(--step-0); line-height: 2; }
.pp-intro__text .pp-intro__lead { color: var(--ink); font-family: var(--serif); font-size: clamp(1.2rem, 1rem + .9vw, 1.65rem); line-height: 1.85; }
.pp-english { margin-top: 8px; border-top: 1px solid var(--line); }
.pp-english summary { padding: 14px 0; color: var(--ink-3); font-family: var(--latin); font-size: 1.1rem; font-style: italic; cursor: pointer; list-style: none; }
.pp-english summary::after { content: "+"; margin-left: 10px; font-style: normal; }
.pp-english[open] summary::after { content: "−"; }
.pp-english p { font-size: .95rem; line-height: 1.8; }
.pp-intro__photos { display: grid; gap: 12px; position: sticky; top: calc(var(--header-h) + 24px); }
.pp-intro__photos figure { margin: 0; border-radius: calc(var(--radius) * .7); overflow: hidden; background: var(--bg-3); }
.pp-intro__photos img { width: 100%; height: 100%; object-fit: cover; }
.pp-intro__photos.is-1 figure { aspect-ratio: 4 / 5; }
.pp-intro__photos.is-2 figure:first-child { aspect-ratio: 4 / 3; } .pp-intro__photos.is-2 figure:last-child { aspect-ratio: 4 / 3; width: 78%; justify-self: end; }
.pp-intro__photos.is-3 { grid-template-columns: 1fr 1fr; } .pp-intro__photos.is-3 figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } .pp-intro__photos.is-3 figure:not(:first-child) { aspect-ratio: 1; }

/* 學歷、經歷：左欄標題，右欄條列；年份開頭的改成年表 */
.pp-dossier { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px clamp(24px, 4vw, 64px); padding-top: clamp(40px, 7vh, 72px); }
.pp-dossier > .pp-label { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.pp-dossier__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.pp-dossier__list li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); line-height: 1.85; }
.pp-dossier__list.is-timeline li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 20px; align-items: baseline; }
.pp-dossier__year { color: var(--brass-ink); font-family: var(--latin); font-size: 1.35rem; line-height: 1.2; white-space: nowrap; }
.pp-more summary { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 22px; border: 1px solid var(--ink); border-radius: 999px; font-size: var(--step--1); letter-spacing: .12em; cursor: pointer; list-style: none; transition: background .3s, color .3s; }
.pp-more summary::-webkit-details-marker, .pp-english summary::-webkit-details-marker { display: none; }
.pp-more summary::after { content: "+"; font-size: 1.1em; }
@media (hover: hover) { .pp-more summary:hover { background: var(--ink); color: var(--bg); } }
.pp-more[open] summary { display: none; }
.pp-more[open] .pp-dossier__list { border-top: 0; animation: pp-open .5s var(--ease); }
@keyframes pp-open { from { opacity: 0; transform: translateY(-8px); } }

/* 參與的演出：橫向卡片列 */
.pp-events { padding-top: clamp(56px, 9vh, 104px); }
.pp-events__track { --edge: max(var(--gutter), calc((100vw - var(--max)) / 2)); display: flex; gap: 16px; margin-top: 22px; padding: 4px var(--edge) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: thin; }
.pp-event { flex: 0 0 clamp(220px, 24vw, 300px); display: grid; gap: 8px; scroll-snap-align: start; }
.pp-event__img { display: block; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: var(--bg-3); }
.pp-event__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
@media (hover: hover) { .pp-event:hover .pp-event__img img { transform: scale(1.06); } }
.pp-event__date { color: var(--brass-ink); font-family: var(--latin); font-size: 1rem; }
.pp-event__role { color: var(--ink-3); font-size: var(--step--1); letter-spacing: .06em; }
.name-link { color: inherit; background: linear-gradient(var(--brass) 0 0) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; transition: color .3s var(--ease), background-size .3s var(--ease); }
@media (hover: hover) { .name-link:hover { color: var(--brass-ink); background-size: 100% 2px; } }
.name-lead { color: var(--brass-ink); margin-right: 1px; }
.name-note { color: var(--ink-3); font-size: .86em; }
.pp-event__title { font-family: var(--serif); font-size: var(--step-0); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 同聲部的團員 */
.pp-mates { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px clamp(24px, 4vw, 64px); padding-top: clamp(56px, 9vh, 104px); }
.pp-mates__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.pp-mate { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px 12px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: border-color .3s, transform .4s var(--ease); }
.pp-mate__text { display: grid; gap: 2px; min-width: 0; }
.pp-mate__text em, .pp-mate__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-mate__text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.pp-mate__text em { color: var(--ink-3); font-family: var(--latin); font-size: .8rem; font-style: normal; letter-spacing: .02em; }
@media (hover: hover) { .pp-mate:hover { border-color: var(--ink); transform: translateY(-2px); } }
.pp-mate__img { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.pp-mate__img img { width: 100%; height: 100%; object-fit: cover; }
.pp-mate__img .photo-ph { font-size: 1rem; }
.pp-mate b { display: block; font-family: var(--serif); font-size: 1rem; }
.pp-mate small { color: var(--ink-3); font-size: .78rem; letter-spacing: .08em; }

/* 上一位／下一位＋回到名單 */
.pp-nav { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "prev back next"; align-items: center; gap: 16px; margin-top: clamp(64px, 10vh, 120px); padding-top: 28px; }
.pp-nav::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line-2); }
.pp-nav__card.is-prev { grid-area: prev; } .pp-nav__card.is-next { grid-area: next; flex-direction: row-reverse; text-align: right; }
.pp-nav__card { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 10px; border-radius: 18px; transition: background .3s; }
.pp-nav__card:nth-of-type(2).is-empty { grid-area: next; }
@media (hover: hover) { .pp-nav__card:not(.is-empty):hover { background: var(--bg-2); } }
.pp-nav__img { flex: none; width: 72px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--bg-3); }
.pp-nav__img img { width: 100%; height: 100%; object-fit: cover; }
.pp-nav__img .photo-ph { font-size: 1.4rem; }
.pp-nav__text { display: grid; gap: 2px; min-width: 0; }
.pp-nav__text small { color: var(--ink-3); font-size: .78rem; letter-spacing: .2em; }
.pp-nav__text b { font-family: var(--serif); font-size: var(--step-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-nav__text em { color: var(--ink-3); font-size: .82rem; font-style: normal; }
.pp-nav__back { grid-area: back; position: relative; display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; overflow: hidden; isolation: isolate; border: 1px solid var(--ink); border-radius: 999px; font-size: var(--step--1); letter-spacing: .14em; transition: color .45s var(--ease); }
.pp-nav__back::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform .45s var(--ease); }
@media (hover: hover) { .pp-nav__back:hover { color: var(--bg); } .pp-nav__back:hover::before { transform: none; } }

@media (max-width: 900px) {
	.pp-stage__panel { grid-template-columns: 1fr; grid-template-areas: "photo" "text"; min-height: 0; padding: 0 0 28px; gap: 0; }
	.pp-stage__photo { aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
	.pp-stage__text { position: relative; z-index: 1; margin-top: -72px; padding: 0 22px; }
	.pp-crumbs { top: 16px; left: 18px; color: rgba(243, 236, 220, .9); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
	.pp-stage__role { margin-top: 0; }
	.pp-stage__mark { top: auto; bottom: 0; left: auto; right: -8px; font-size: 7rem; }
	.pp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
	.pp-roles, .pp-intro, .pp-intro.has-photos .pp-intro__body, .pp-dossier, .pp-mates { grid-template-columns: 1fr; }
	.pp-dossier > .pp-label { position: static; }
	.pp-intro__photos { position: static; }
	.pp-dossier__list.is-timeline li { grid-template-columns: 1fr; gap: 4px; }
	.pp-mates__list { grid-template-columns: 1fr 1fr; }
	.pp-mate { padding: 10px; }
	.pp-nav { grid-template-columns: 1fr 1fr; grid-template-areas: "prev next" "back back"; }
	.pp-nav__card { flex-direction: column; align-items: flex-start; } .pp-nav__card.is-next { flex-direction: column; align-items: flex-end; }
	.pp-nav__back { justify-self: center; }
}

/* =========================================================
   關於（簡介、沿革、大事紀要）與聯繫（聯絡、加入、支持）：同一套結構
   - 每頁：標題照片 → 第二層分頁 → 編號段落（左欄小標 01、02…，右欄內容）
   - 段落之間穿插整頁寬的氛圍照片（調暗、捲動時微動），文字疊在上面
   - 頁尾前用大張照片卡片連到下一頁
   ========================================================= */
.ch { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px clamp(24px, 4vw, 64px); padding-block: clamp(56px, 9vh, 112px) 0; }
.ch--wide { grid-template-columns: 1fr; }
.ch__label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 0; padding-top: 16px; border-top: 2px solid var(--ink); font-size: var(--step-1); font-weight: 900; letter-spacing: .14em; align-self: start; }
.ch__label .num { color: var(--brass-ink); font-family: var(--latin); font-size: 1.1rem; font-weight: 500; letter-spacing: 0; }
.ch__label--light { border-color: rgba(243, 236, 220, .8); color: #f3ecdc; }
.ch__label--light .num { color: var(--brass-light); }
.ch__sub { margin-left: auto; color: var(--ink-2); font-size: var(--step-0); font-weight: 500; letter-spacing: .08em; }
.ch__statement { margin: 0 0 1em; font-family: var(--serif); font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem); font-weight: 700; line-height: 1.75; }
.ch__text { max-width: 40em; margin: 0 0 1em; color: var(--ink-2); line-height: 2; }
.ch__text--lg { font-size: var(--step-1); line-height: 1.9; }
.ch--wide > .ch__indent, .ch__indent { margin-left: calc(25% + clamp(6px, 1vw, 16px)); max-width: 40em; }

/* 整頁寬的氛圍照片 */
.band { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(56px, 9vh, 112px); padding-block: clamp(96px, 18vh, 200px); background: #14120e; color: #f3ecdc; }
.atmo { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.atmo img { width: 100%; height: 120%; object-fit: cover; transform: translateY(-8%); }
.band .atmo::after, .next-card .atmo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 14, .55), rgba(20, 18, 14, .78)); }
.band .atmo img { filter: saturate(.85) contrast(1.05); }
.band__inner { position: relative; }
.band__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; margin: 0; }
.band__stats dt { color: rgba(243, 236, 220, .6); font-size: .85rem; letter-spacing: .24em; }
.band__stats dd { margin: 10px 0 0; display: flex; align-items: baseline; gap: 6px; }
.band__stats .num { font-family: var(--latin); font-size: clamp(3.4rem, 2rem + 5vw, 6.5rem); line-height: .9; color: #f8f1e0; }
.band__stats small { color: var(--brass-light); font-size: 1rem; letter-spacing: .1em; }

/* 足跡 */
.places { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.places li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); }
.places b { font-family: var(--serif); font-size: var(--step-1); }
.places .num { color: var(--brass-ink); font-family: var(--latin); font-size: 1.1rem; }

/* 成立宗旨 */
.aims2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: a; }
.aims2 li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 24px 24px 24px 0; border-bottom: 1px solid var(--line); }
.aims2__no { color: transparent; -webkit-text-stroke: 1px var(--brass-ink); font-family: var(--latin); font-size: 3.2rem; line-height: .9; }
.aims2 p { margin: 0; font-family: var(--serif); font-size: var(--step-1); line-height: 1.75; }


/* 下一頁卡片 */
.next-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-block: clamp(72px, 12vh, 140px) clamp(48px, 8vh, 96px); }
.next-cards--one { grid-template-columns: 1fr; }
.next-cards:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.next-card { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(200px, 30vh, 300px); padding: 26px; overflow: hidden; border-radius: var(--radius); background: #1d1a15; color: #f3ecdc; }
.next-card .atmo img { height: 100%; transform: scale(1.04); transition: transform 1.2s var(--ease); }
@media (hover: hover) { .next-card:hover .atmo img { transform: scale(1.12); } }
.next-card__text { display: grid; gap: 6px; }
.next-card__text b { font-family: var(--serif); font-size: var(--step-3); }
.next-card__text small { color: rgba(243, 236, 220, .75); letter-spacing: .1em; }
.next-card::after { content: ""; position: absolute; right: 26px; bottom: 30px; width: 44px; height: 1px; background: var(--brass-light); transform-origin: right; transition: transform .5s var(--ease); }
@media (hover: hover) { .next-card:hover::after { transform: scaleX(1.8); } }

/* 沿革：成立緣起四步 */
.prelude { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 12px 0 0; padding: 0; list-style: none; }
.prelude li { position: relative; padding: 34px 28px 0 0; }
.prelude li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line-2); }
.prelude li::after { content: ""; position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--brass-ink); box-shadow: 0 0 0 5px var(--bg); }
.prelude li:last-child::after { background: var(--ink); width: 16px; height: 16px; top: -7px; }
.prelude__year { display: block; color: var(--ink); font-family: var(--latin); font-size: clamp(2.8rem, 2rem + 2.4vw, 4.4rem); line-height: 1; }
.prelude h3 { margin: 14px 0 10px; font-size: var(--step-1); }
.prelude p { margin: 0; color: var(--ink-2); line-height: 1.9; font-size: .95rem; }
.has-motion [data-prelude] li::before { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) calc(var(--i) * .2s); }
.has-motion [data-prelude].is-in li::before { transform: none; }

/* 沿革：名稱的變遷（捲動時一張疊上一張） */
.names { padding-top: clamp(56px, 9vh, 112px); }

/* 沿革：歷任團長 */
.heads2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 12px 0 0; padding: 0; list-style: none; }
.heads2 li { display: grid; gap: 4px; }
.heads2__photo { display: block; aspect-ratio: 3 / 4; margin-bottom: 12px; border-radius: calc(var(--radius) * .7); overflow: hidden; background: var(--bg-3); }
.heads2__photo img { width: 100%; height: 100%; object-fit: cover; }
.heads2 li.is-now .heads2__photo { outline: 2px solid var(--brass-light); outline-offset: 4px; }
.heads2 small { color: var(--ink-3); font-size: .8rem; letter-spacing: .16em; }
.heads2 b { font-family: var(--serif); font-size: var(--step-2); }
.heads2 .num { color: var(--ink-2); font-family: var(--latin); font-size: 1.1rem; }
.heads2 em { margin-left: .4em; color: var(--brass-ink); font-family: var(--sans); font-size: .85rem; font-style: normal; }

/* 沿革：組織與團務（中線兩側交錯） */
.flow { position: relative; margin: 12px 0 0; padding: 0; list-style: none; }
.flow::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line-2); }
.flow li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding: 22px 0; }
.flow li::after { content: ""; position: absolute; top: 34px; left: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brass-ink); }
.flow__when { justify-self: end; color: var(--brass-ink); font-family: var(--latin); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1.2; }
.flow h3 { margin: 4px 0 6px; font-size: var(--step-1); }
.flow p { margin: 0; color: var(--ink-2); line-height: 1.85; }
.flow li:nth-child(even) .flow__when { order: 2; justify-self: start; }
.flow li:nth-child(even) > div { text-align: right; }

/* 沿革：團練場地 */
.venues { display: flex; flex-wrap: wrap; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; }
.venues li { flex: 1 1 160px; display: grid; gap: 8px; padding: 22px 18px 22px 0; border-top: 1px solid var(--line-2); }
.venues .num { color: var(--ink-3); font-family: var(--latin); font-size: 1.2rem; }
.venues b { font-family: var(--serif); font-size: var(--step-1); }
.venues li.is-now { border-top: 3px solid var(--brass-ink); }
.venues li.is-now .num { color: var(--brass-ink); }

/* 大事紀要 */
.ms__chips { margin-bottom: 28px; }
.ms__chips button { min-height: 36px; padding: 6px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: .88rem; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.ms__chips button.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ms__layout { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding-block: 40px clamp(64px, 10vh, 120px); }
.ms__rail ol { position: sticky; top: calc(var(--header-h) + 85px); display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; max-height: calc(100vh - var(--header-h) - 110px); overflow-y: auto; scrollbar-width: none; }
.ms__rail a { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 10px; border-radius: 8px; color: var(--ink-3); transition: background .25s, color .25s; }
.ms__rail a .num { font-family: var(--latin); font-size: 1.15rem; }
.ms__rail a small { font-size: .72rem; }
.ms__rail a:hover, .ms__rail a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.ms__rail a.is-empty { opacity: .3; pointer-events: none; }
.ms-year { padding-bottom: 40px; scroll-margin-top: calc(var(--header-h) + 85px); content-visibility: auto; contain-intrinsic-size: auto 600px; }
.ms-year[hidden] { display: none; }
.ms-year__head { display: flex; align-items: baseline; gap: 16px; padding: 8px 0; }
.ms-year__num { margin: 0; font-family: var(--latin); font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4rem); font-weight: 500; line-height: 1; }
.ms-year__roc { color: var(--ink-3); font-size: .85rem; letter-spacing: .12em; }
.ms-year__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.ms-item { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ms-item.is-more { display: none; }
.ms-year.is-open .ms-item.is-more, .ms.is-filtering .ms-item.is-more { display: grid; }
.ms-item[hidden] { display: none !important; }
.ms-item__date { color: var(--ink-3); font-family: var(--latin); font-size: 1.1rem; }
.ms-item h3 { margin: 0; font-family: var(--sans); font-size: var(--step-0); font-weight: 700; line-height: 1.6; }
.ms-item h3 a { background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
@media (hover: hover) { .ms-item h3 a:hover { background-size: 100% 1px; } }
.ms-item p { margin: 4px 0 0; color: var(--ink-2); font-size: .92rem; line-height: 1.85; }
.ms-item__tag { align-self: start; padding: 2px 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-3); font-size: .72rem; letter-spacing: .1em; white-space: nowrap; }
.ms-item.is-key { position: relative; padding-left: 0; }
.ms-item.is-key .ms-item__date { color: var(--brass-ink); }
.ms-item.is-key h3 { font-family: var(--serif); font-size: var(--step-1); }
.ms-item.is-key .ms-item__tag { border-color: var(--brass-ink); background: var(--brass-ink); color: #fff; }
.ms-year__more { margin-top: 14px; padding: 8px 20px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; font: inherit; font-size: .88rem; letter-spacing: .1em; cursor: pointer; }
.ms-year.is-open .ms-year__more, .ms.is-filtering .ms-year__more { display: none; }

/* 聯絡我們 */
.band--social { padding-block: clamp(72px, 12vh, 140px); }
.social { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
/* 加入我們 */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 12px; }
.role { display: grid; align-content: start; gap: 10px; }
.role__img { position: relative; margin: 0 0 8px; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: #1d1a15; }
.role__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.88); transition: transform 1s var(--ease); }
@media (hover: hover) { .role:hover .role__img img { transform: scale(1.06); } }
.role__no { position: absolute; left: 16px; bottom: 10px; color: #f3ecdc; font-family: var(--latin); font-size: 2.6rem; line-height: 1; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.role h3 { margin: 0; font-family: var(--serif); font-size: var(--step-2); }
.role p { margin: 0; color: var(--ink-2); line-height: 1.85; }
.role__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.role__tags li { padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .82rem; }

/* 支持我們 */
.band--story { padding-block: clamp(96px, 20vh, 220px); }
.support-story { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.support-story__years { display: grid; justify-items: start; }
.support-story__years .num { font-family: var(--latin); font-size: clamp(7rem, 4rem + 10vw, 13rem); line-height: .85; color: transparent; -webkit-text-stroke: 1.5px var(--brass-light); }
.support-story__years small { margin-top: -8px; color: var(--brass-light); font-size: 1.2rem; letter-spacing: .2em; }
.support-story__years em { margin-top: 12px; color: rgba(243, 236, 220, .6); font-size: .85rem; font-style: normal; letter-spacing: .16em; }
.support-story__title { margin: 0 0 24px; font-family: var(--serif); font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3rem); line-height: 1.45; }
.support-story p { max-width: 36em; margin: 0 0 1em; color: rgba(243, 236, 220, .86); font-size: var(--step-1); line-height: 1.95; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 12px 0 0; padding: 0; list-style: none; }
.ways li { display: grid; align-content: start; gap: 10px; padding: 28px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); }
.ways__no { color: transparent; -webkit-text-stroke: 1px var(--brass-ink); font-family: var(--latin); font-size: 3rem; line-height: 1; }
.ways h3 { margin: 0; font-family: var(--serif); font-size: var(--step-2); }
.ways p { margin: 0; color: var(--ink-2); line-height: 1.85; }

/* 共用聯絡人區塊 */
.cta-contact { margin-top: clamp(64px, 10vh, 120px); padding-block: clamp(56px, 9vh, 96px); background: #1c1914; color: #f3ecdc; border-bottom: 1px solid rgba(243, 236, 220, .08); }
.cta-contact__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: end; }
.cta-contact__label { margin: 0 0 10px; color: var(--brass-light); font-size: .85rem; letter-spacing: .24em; }
.cta-contact__name { margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.cta-contact__ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cta-contact__ways a { display: grid; gap: 6px; padding: 20px 22px; border: 1px solid rgba(243, 236, 220, .2); border-radius: 16px; transition: background .3s, border-color .3s; }
@media (hover: hover) { .cta-contact__ways a:hover { background: rgba(243, 236, 220, .08); border-color: rgba(243, 236, 220, .5); } }
.cta-contact__ways small { color: rgba(243, 236, 220, .6); font-size: .8rem; letter-spacing: .2em; }
.cta-contact__ways span { font-size: var(--step-1); overflow-wrap: anywhere; }
.cta-contact__ways .num { font-family: var(--latin); font-size: 1.6rem; }

@media (max-width: 900px) {
	.ch { grid-template-columns: 1fr; }
	.ch__indent, .ch--wide > .ch__indent { margin-left: 0; }
	.aims2, .reach, .social, .roles, .ways, 	.prelude { grid-template-columns: 1fr; }
	.prelude li { padding: 0 0 32px 28px; }
	.prelude li::before { top: 0; bottom: 0; left: 5px; right: auto; width: 2px; height: auto; }
	.prelude li::after { top: 4px; }
	.has-motion [data-prelude] li::before { transform: scaleY(0); transform-origin: top; }
		.heads2 { grid-template-columns: 1fr 1fr; }
	.flow::before { left: 7px; }
	.flow li { grid-template-columns: 1fr; gap: 4px; padding-left: 32px; }
	.flow li::after { left: 1px; top: 30px; }
	.flow__when, .flow li:nth-child(even) .flow__when { order: 0; justify-self: start; }
	.flow li:nth-child(even) > div { text-align: left; }
	.ms__layout { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
	.ms__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 20px calc(var(--gutter) * -1) 20px; padding: 0 var(--gutter); }
	.ms__chips button { flex: none; min-height: 32px; padding: 4px 12px; }
	.ms__rail { position: sticky; z-index: 14; top: var(--header-h); min-width: 0; margin: 0 calc(var(--gutter) * -1); background: var(--bg); border-bottom: 1px solid var(--line); }
	.ms__rail ol { position: static; display: flex; max-height: none; overflow-x: auto; padding: 6px var(--gutter); }
	.ms__rail a { flex: none; gap: 4px; padding: 6px 12px; border-radius: 999px; }
	.ms__rail a .num { font-size: 1.05rem; }
	.ms__rail a small { font-size: .68rem; opacity: .7; }
	.ms-year { scroll-margin-top: calc(var(--header-h) + 56px); }
	.ms-item { grid-template-columns: 3.8em minmax(0, 1fr); row-gap: 6px; }
	.ms-item__body { grid-row: 1 / span 2; }
	.ms-item__tag { grid-column: 1; grid-row: 2; justify-self: start; padding: 1px 8px; }
	.support-story__years .num { font-size: 6rem; }
}

/* 足跡：整片照片底，左側加深讓文字清楚，城市名稱大字 */
.band--places { padding-block: clamp(88px, 16vh, 180px); }
.atmo--left img { object-position: center 35%; }
.band .atmo--left::after { background: linear-gradient(90deg, rgba(20, 18, 14, .92) 0%, rgba(20, 18, 14, .72) 45%, rgba(20, 18, 14, .45) 100%), linear-gradient(180deg, rgba(20, 18, 14, .4), transparent 30%, transparent 70%, rgba(20, 18, 14, .6)); }
.places-band { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px clamp(24px, 4vw, 64px); }
.places-band__text { max-width: 34em; margin: 0 0 32px; color: rgba(243, 236, 220, .86); font-size: var(--step-1); line-height: 1.9; }
.places-band__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(243, 236, 220, .22); }
.places-band__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 0; border-bottom: 1px solid rgba(243, 236, 220, .14); }
.places-band__list b { font-family: var(--serif); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); font-weight: 700; }
.places-band__list .num { color: var(--brass-light); font-family: var(--latin); font-size: 1.15rem; }

/* 經營理念：捲動時一張蓋上一張的照片卡片 */
.deck { padding-top: clamp(56px, 9vh, 112px); }
.deck__cards { margin-top: 28px; }
.deck__card { position: sticky; top: calc(var(--header-h) + 77px + var(--i) * 12px); height: min(calc(100vh - var(--header-h) - 120px), 640px); width: min(var(--max), 100% - var(--gutter) * 2); margin: 0 auto 28px; }
.deck__card:last-child { margin-bottom: 0; }
.deck__face { position: relative; isolation: isolate; height: 100%; overflow: hidden; border-radius: var(--radius); background: #1d1a15; color: #f3ecdc; box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, .5); transform-origin: 50% 0; will-change: transform; }
.deck__face .atmo img { height: 100%; transform: scale(1.12); }
.deck__face .atmo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 14, .2) 0%, rgba(20, 18, 14, .35) 40%, rgba(20, 18, 14, .88) 100%); }
.deck__face::after { content: ""; position: absolute; z-index: 2; inset: 0; background: #0d0c0a; opacity: var(--dim, 0); pointer-events: none; }
.deck__inner { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 4vw, 56px); }
.deck__no { display: block; margin-bottom: 14px; color: var(--brass-light); font-family: var(--latin); font-size: 1.8rem; line-height: 1; }
.deck__no small { color: rgba(243, 236, 220, .5); font-size: 1rem; }
.deck__title { margin: 0; font-family: var(--serif); font-size: clamp(1.9rem, 1.2rem + 3vw, 4rem); line-height: 1.2; letter-spacing: .04em; }
.deck__text { max-width: 34em; margin: 16px 0 0; color: rgba(243, 236, 220, .88); font-size: var(--step-1); line-height: 1.85; }
@media (max-width: 900px) {
	.places-band { grid-template-columns: 1fr; }
	.places-band__list { grid-template-columns: 1fr; }
	.band .atmo--left::after { background: linear-gradient(180deg, rgba(20, 18, 14, .78), rgba(20, 18, 14, .9)); }
	.deck__card { top: calc(var(--header-h) + 10px + var(--i) * 8px); height: min(72svh, 560px); margin-bottom: 18px; }
	.deck__text { font-size: var(--step-0); }
}

/* 登入時（上方有 WordPress 管理列）：手機上的第二層分頁不固定，不可再往下位移；固定的元素讓出管理列實際佔的高度（--ab，由 JS 量測） */
@media (max-width: 900px) {
	.admin-bar .sub-nav { top: auto; }
	.admin-bar .ms__rail { top: calc(var(--header-h) + var(--ab, 32px)); }
	.admin-bar .deck__card { top: calc(var(--header-h) + 10px + var(--ab, 32px) + var(--i) * 8px); }
}

/* 聯絡方式：大字一列一項（標籤｜內容｜動作），細線分隔；按下或滑過時底線由左畫出 */
.reach { margin-top: 12px; border-top: 1px solid var(--line-2); }
.reach__row { position: relative; display: grid; grid-template-columns: 7em minmax(0, 1fr) auto; align-items: baseline; gap: 24px; padding: clamp(22px, 3.5vh, 36px) 0; border-bottom: 1px solid var(--line-2); }
.reach__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brass-ink); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.reach__row:hover::after, .reach__row:focus-visible::after, .reach__row:active::after { transform: none; }
.reach__row small { color: var(--ink-3); font-size: .85rem; letter-spacing: .24em; }
.reach__row b { font-family: var(--serif); font-size: clamp(1.5rem, 1rem + 2.2vw, 2.8rem); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; transition: color .4s; }
.reach__row b.num { font-family: var(--latin); font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem); font-weight: 500; letter-spacing: .02em; }
.reach__row > span { color: var(--brass-ink); font-size: .85rem; letter-spacing: .16em; white-space: nowrap; }
@media (hover: hover) { .reach__row:hover b { color: var(--brass-ink); } }

/* 社群媒體：直接用各平台的代表色 */
.social__card { display: grid; gap: 6px; padding: 28px; border: 1px solid rgba(243, 236, 220, .18); border-radius: var(--radius); background: rgba(20, 18, 14, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .5s var(--ease), border-color .4s; }
@media (hover: hover) { .social__card:hover { transform: translateY(-4px); border-color: rgba(243, 236, 220, .5); } }
.social__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 16px; color: #fff; }
.social__icon svg { width: 28px; height: 28px; }
.social__card.is-facebook .social__icon { background: #1877f2; box-shadow: 0 10px 30px -8px rgba(24, 119, 242, .7); }
.social__card.is-instagram .social__icon { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); box-shadow: 0 10px 30px -8px rgba(214, 36, 159, .7); }
.social__card.is-youtube .social__icon { background: #ff0000; box-shadow: 0 10px 30px -8px rgba(255, 0, 0, .65); }
.social__card b { font-family: var(--latin); font-size: var(--step-2); font-weight: 500; }
.social__card small { color: rgba(243, 236, 220, .7); letter-spacing: .12em; }

/* 加入我們：每週團練用大字排在一列，中間細線分隔，不用色塊 */
.rehearsal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 12px 0 40px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.rehearsal > div { padding: clamp(24px, 4vh, 40px) 0; }
.rehearsal > div + div { padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid var(--line-2); }
.rehearsal dt { color: var(--brass-ink); font-size: .85rem; letter-spacing: .24em; }
.rehearsal dd { margin: 12px 0 0; font-family: var(--serif); font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.4rem); font-weight: 700; line-height: 1.25; }

/* 樂團沿革：名稱的變遷，三列大字；舊名較淡，現名全黑並標「現名」 */
.names { padding-top: clamp(56px, 9vh, 112px); }
.names__list { margin-top: 12px; }
.names__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 4fr); align-items: baseline; gap: 24px; padding: clamp(24px, 4vh, 40px) 0; border-bottom: 1px solid var(--line-2); }
.names__row:first-child { border-top: 1px solid var(--line-2); }
.names__year { color: transparent; -webkit-text-stroke: 1px var(--ink-3); font-family: var(--latin); font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.4rem); line-height: 1; }
.names__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0; color: var(--ink-3); font-family: var(--serif); font-size: clamp(1.5rem, 1rem + 1.8vw, 2.6rem); line-height: 1.3; }
.names__note { margin: 0; color: var(--ink-3); line-height: 1.8; font-size: .95rem; }
.names__row.is-now .names__year { color: var(--brass-ink); -webkit-text-stroke: 0; }
.names__row.is-now .names__name { color: var(--ink); }
.names__row.is-now .names__note { color: var(--ink-2); }
.names__tag { padding: 2px 10px; border: 1px solid var(--brass-ink); border-radius: 999px; color: var(--brass-ink); font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .14em; }

@media (max-width: 900px) {
	.reach__row { grid-template-columns: 1fr; gap: 6px; }
	.reach__row b { font-size: 1.45rem; overflow-wrap: normal; }
	.reach__row b.num { font-size: 2.2rem; }
	.rehearsal { grid-template-columns: 1fr; }
	.rehearsal > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-2); }
	.names__row { grid-template-columns: 1fr; gap: 8px; }
}

/* 首頁：下一場還沒排定日期時，改放預告消息（照片＋標題＋說明） */
.promo-ann { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.promo-ann__img { display: block; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--bg-3); }
.promo-ann__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .promo-ann__img:hover img { transform: scale(1.04); } }
.promo-ann__p { margin: 18px 0 0; color: var(--ink-2); line-height: 1.95; }
.promo-ann .btn-row { margin-top: 28px; }
@media (max-width: 900px) { .promo-ann { grid-template-columns: 1fr; } }

/* ==========================================================================
   按鈕：玻璃材質（參考 Apple Liquid Glass）
   Liquid Glass 的玻璃本身幾乎是透明的：看到的是底下的內容，加上一圈細細的亮邊與一點光澤，
   不是上亮下暗的立體漸層。選中與主要按鈕是「上了顏色的玻璃」（平塗的品牌色＋細亮邊），不做反光球面。
   - 亮邊與細框都畫在按鈕內側，捲動的分頁列不會把按鈕上下切掉；外側只留很淡的陰影。
   - 游標經過時，一小片光跟著游標移動；按下時輕微縮小。不做上下位移，文字才不會糊。
   - 系統開「減少透明度」或「增加對比」時改成實心與清楚的邊框。
   ========================================================================== */
:root {
	--lg-rim: inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .95);
	--lg-edge: inset 0 0 0 1px rgba(22, 20, 15, .1);
	--lg-shadow: 0 1px 2px rgba(22, 20, 15, .05), 0 4px 14px -6px rgba(22, 20, 15, .14);
	--lg-light: radial-gradient(90px circle at var(--mx, 50%) var(--my, -60%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
}
:is(.btn, .chips a, .ms__chips button, .ms-year__more, .sec-more, .pp-nav__back, .pagination .page-numbers, .nr-cta__btn) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-color: transparent;
	background: var(--lg-light), rgba(255, 255, 255, .42);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	backdrop-filter: blur(12px) saturate(180%);
	box-shadow: var(--lg-rim), var(--lg-edge), var(--lg-shadow);
	color: var(--ink);
	transition: transform .45s var(--ease), background-color .3s, box-shadow .3s, color .3s;
}
:is(.btn, .sec-more, .pp-nav__back)::before { content: none; }
:is(.btn, .chips a, .ms__chips button, .ms-year__more, .sec-more, .pp-nav__back, .pagination .page-numbers, .nr-cta__btn):is(:hover, :focus-visible) {
	border-color: transparent;
	color: var(--ink);
	background: var(--lg-light), rgba(255, 255, 255, .7);
	box-shadow: var(--lg-rim), inset 0 0 0 1px rgba(22, 20, 15, .16), var(--lg-shadow);
}
:is(.btn, .chips a, .ms__chips button, .ms-year__more, .sec-more, .pp-nav__back, .pagination .page-numbers, .nr-cta__btn):active { transform: scale(.97); transition-duration: .12s; }
:is(.btn, .chips a, .ms__chips button, .ms-year__more, .sec-more, .pp-nav__back, .pagination .page-numbers, .nr-cta__btn):focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* 選中的分頁、篩選、頁碼：淡金色的玻璃（像 Apple 分段控制的選取片），字用深金色加粗 */
:is(.chips a[aria-current="true"], .chips a[aria-current="page"], .ms__chips button.is-on, .pagination .current),
:is(.chips a[aria-current="true"], .chips a[aria-current="page"], .ms__chips button.is-on, .pagination .current):is(:hover, :focus-visible) {
	background: radial-gradient(90px circle at var(--mx, 50%) var(--my, -60%), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%), rgba(229, 207, 159, .5);
	color: #5b431a;
	font-weight: 700;
	box-shadow: inset 0 0 0 1px rgba(134, 101, 43, .38), inset 0 1px 0 rgba(255, 255, 255, .85), 0 4px 14px -6px rgba(168, 130, 63, .35);
}
/* 主要按鈕：上了墨色的玻璃（平塗＋內側細亮邊） */
.btn--solid, .btn--solid:is(:hover, :focus-visible) {
	background: radial-gradient(90px circle at var(--mx, 50%) var(--my, -60%), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%), rgba(22, 20, 15, .9);
	color: var(--bg);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .22), var(--lg-shadow);
}

/* 金色：上了金色的玻璃，保留一道掃過的光 */
:is(.btn--brass, .nr-cta__btn.is-main),
:is(.btn--brass, .nr-cta__btn.is-main):is(:hover, :focus-visible) {
	background: radial-gradient(90px circle at var(--mx, 50%) var(--my, -60%), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%), rgba(229, 207, 159, .94);
	color: #16140f;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .85), 0 6px 20px -8px rgba(168, 130, 63, .5);
}

/* 照片上的按鈕：真正透明的玻璃，看得到後面的照片 */
:is(.btn--light, .nr-cta__btn:not(.is-main), .site-header.is-over .nav .btn),
:is(.btn--light, .nr-cta__btn:not(.is-main), .site-header.is-over .nav .btn):is(:hover, :focus-visible) {
	background: radial-gradient(90px circle at var(--mx, 50%) var(--my, -60%), rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%), rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	color: var(--on-photo);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 20px -10px rgba(0, 0, 0, .4);
}
:is(.btn--light, .nr-cta__btn:not(.is-main), .site-header.is-over .nav .btn):is(:hover, :focus-visible) { background-color: rgba(255, 255, 255, .22); }
.btn--white, .btn--white:is(:hover, :focus-visible) { background: var(--lg-light), rgba(255, 255, 255, .9); color: var(--ink); }

/* 捲動的分頁列：留出上下空間，按鈕的亮邊與陰影不會被切掉 */
.sub-nav .chips, .filter-row .chips { padding-block: 4px; margin-block: -4px; }

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
	:is(.btn, .chips a, .ms__chips button, .ms-year__more, .sec-more, .pp-nav__back, .pagination .page-numbers, .nr-cta__btn) {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--bg);
		box-shadow: inset 0 0 0 1px var(--ink);
	}
	:is(.btn--light, .nr-cta__btn:not(.is-main), .site-header.is-over .nav .btn) { background: rgba(22, 20, 15, .85); box-shadow: inset 0 0 0 1px var(--on-photo); }
}
@media (prefers-reduced-motion: reduce) {
	:is(.btn, .chips a, .ms__chips button, .ms-year__more, .sec-more, .pp-nav__back, .pagination .page-numbers, .nr-cta__btn):active { transform: none; }
}

/* ---------- 樂團之友：分組、篩選、搜尋 ---------- */
.friends-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.friends-bar .ms__chips { margin: 0; }
.ms__chips button .num { margin-left: 6px; opacity: .6; font-size: .8em; }
.friends-search input { width: min(280px, 100%); min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(22, 20, 15, .12), inset 0 1px 0 #fff; font: inherit; font-size: .9rem; }
.friends-search input:focus { outline: 2px solid var(--brass); outline-offset: 2px; }
.friends .people-note { margin: 18px 0 0; }
.friends-sec { margin-top: clamp(40px, 6vh, 64px); }
.friends-sec__title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); font-size: var(--step-2); font-weight: 900; letter-spacing: .12em; }
.friends-sec__title .num { color: var(--brass-ink); font-size: 1rem; letter-spacing: 0; }
.friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 18px 16px; margin: 0; padding: 0; list-style: none; }
.friend__link { display: grid; align-content: start; gap: 10px; height: 100%; }
.friend__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: linear-gradient(150deg, var(--bg-2), var(--bg-3)); box-shadow: inset 0 0 0 1px rgba(22, 20, 15, .06); }
.friend__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .9s var(--ease); }
.friend__img .photo-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-3); font-family: var(--serif); font-size: 2.6rem; }
.friend__text { display: grid; align-content: start; gap: 2px; min-width: 0; }
.friend__text em { overflow: hidden; color: var(--ink-3); font-family: var(--latin); font-size: .82rem; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.friend__text b { font-family: var(--serif); font-size: var(--step-0); font-weight: 700; line-height: 1.4; }
.friend__text small { color: var(--ink-2); font-size: .8rem; line-height: 1.5; }
.friend__last { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 4px; color: var(--brass-ink); font-size: .76rem; letter-spacing: .02em; }
@media (hover: hover) { .friend__link:hover .friend__img img { transform: scale(1.05); } .friend__link:hover b { color: var(--brass-ink); } }
@media (max-width: 600px) {
	.friend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
	.friends-search, .friends-search input { width: 100%; }
}

/* 照片和名字是同一個連結：名字的連結往外撐滿整張卡片，點照片也會進個人頁（手機上照片比名字好點） */
.org__lead, .relay__item, .heads2 li { position: relative; }
.org__lead a::after, .org__root a::after, .relay__name a::after, .heads2 b a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.org__lead a:focus-visible, .org__root a:focus-visible, .relay__name a:focus-visible, .heads2 b a:focus-visible { outline: none; }
.org__lead a:focus-visible::after, .org__root a:focus-visible::after, .relay__name a:focus-visible::after, .heads2 b a:focus-visible::after { outline: 2px solid var(--brass); outline-offset: 4px; border-radius: 12px; }
.heads2__photo img, .org__photo img { transition: transform .8s var(--ease); }
@media (hover: hover) {
	.relay__item:has(a:hover) .relay__photo img, .heads2 li:has(a:hover) .heads2__photo img, .org__lead:has(a:hover) .org__photo img, .org__root:has(a:hover) .org__photo img { transform: scale(1.06); }
	.relay__item:has(a:hover) .relay__name a, .heads2 li:has(a:hover) b a, .org__lead:has(a:hover) b a, .org__root:has(a:hover) b a { background-size: 100% 1px; }
}

/* 內文自動連結的人名、活動名：顏色跟內文一樣，只用一條細虛線提示可以點 */
a.auto-link, .prose a.auto-link { color: inherit; background: none; text-decoration: underline dotted var(--brass); text-decoration-thickness: 1.5px; text-underline-offset: .28em; transition: color .2s, text-decoration-color .2s; }
a.auto-link:hover, .prose a.auto-link:hover { color: var(--brass-ink); text-decoration-style: solid; }

/* 紀錄頁的數字帶：沿用首頁「樂團數字」的深色五線譜底；欄數依數字多寡 */
.numbers--record { margin-block: clamp(48px, 8vh, 96px); }
.numbers--record .numbers__grid { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.numbers__head { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(32px, 5vh, 56px); }
.numbers__title { margin: 0; color: #f3ecdc; font-size: var(--step-3); font-weight: 900; letter-spacing: .14em; }
.numbers--record .numbers__note { color: rgba(243, 236, 220, .5); }
@media (max-width: 900px) { .numbers--record .numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; } }
/* 30 週年：主視覺的黑底金星。三顆星放在標題前，背景散落小星，星點隨捲動慢慢亮起 */
.numbers--earth30 { background: #000; }
.numbers--earth30::before { opacity: .55; }
.numbers--earth30::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
	background:
		radial-gradient(1.5px 1.5px at 12% 22%, #f2dfb5 50%, transparent 51%),
		radial-gradient(1px 1px at 27% 68%, #c9a36a 50%, transparent 51%),
		radial-gradient(2px 2px at 41% 30%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 58% 78%, #c9a36a 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 72% 18%, #f2dfb5 50%, transparent 51%),
		radial-gradient(1px 1px at 86% 60%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 93% 32%, #c9a36a 50%, transparent 51%); }
.numbers--earth30 .wrap { position: relative; z-index: 1; }
.numbers--earth30 .stat__value small, .numbers--earth30 .stat__label { color: #c9a36a; }
.stars3 { display: block; flex: none; width: clamp(72px, 9vw, 120px); line-height: 0; }
.stars3 svg { width: 100%; height: auto; overflow: visible; }
.has-motion .stars3 path { transform-box: fill-box; transform-origin: center; animation: stars3-in 1.6s var(--ease) both; }
.has-motion .stars3 path:nth-child(2) { animation-delay: .15s; }
.has-motion .stars3 path:nth-child(3) { animation-delay: .3s; }
@keyframes stars3-in { from { opacity: 0; transform: scaleY(.2); } }
@media (prefers-reduced-motion: reduce) { .has-motion .stars3 path { animation: none; } }
.numbers--record .stat__value { font-size: clamp(2.6rem, 1.2rem + 3.6vw, 5.2rem); }

/* 紀錄頁的電子節目冊入口：整張卡片可點（連結撐滿卡片） */
.ep-card-wrap { margin-block: clamp(32px, 6vh, 64px); }
.ep-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(20px, 4vw, 56px); overflow: hidden; padding: clamp(24px, 4vw, 48px); border-radius: var(--radius); background: #16140f; color: #f3ecdc; box-shadow: 0 30px 60px -30px rgba(22, 20, 15, .55); isolation: isolate; }
.ep-card__art { justify-self: center; width: min(100%, 260px); }
.ep-card__art img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 20px 40px -20px #000; transition: transform .8s var(--ease); }
.ep-card__kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--brass-light); font-family: var(--latin); font-size: 1.1rem; font-style: italic; letter-spacing: .1em; }
.ep-card__kicker .stars3 { width: 44px; }
.ep-card__title { margin: 0 0 26px; color: #fff; font-size: var(--step-3); font-weight: 900; letter-spacing: .14em; }
.ep-card__btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 28px; border-radius: 999px; background: linear-gradient(135deg, #e5cf9f, #a8823f); color: #16140f; font-weight: 700; letter-spacing: .14em; }
.ep-card__btn::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ep-card__btn:focus-visible { outline: none; }
.ep-card__btn:focus-visible::after { outline: 2px solid var(--brass-light); outline-offset: -4px; border-radius: var(--radius); }
@media (hover: hover) { .ep-card:hover .ep-card__art img { transform: scale(1.03) translateY(-4px); } }
/* 30 週年：黑底、封面標題字、背景星點 */
.ep-card--earth30 { background: #000; }
.ep-card--earth30::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .8; pointer-events: none;
	background:
		radial-gradient(1.5px 1.5px at 8% 20%, #f2dfb5 50%, transparent 51%),
		radial-gradient(1px 1px at 22% 80%, #fff 50%, transparent 51%),
		radial-gradient(2px 2px at 46% 12%, #c9a36a 50%, transparent 51%),
		radial-gradient(1px 1px at 63% 70%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 81% 30%, #f2dfb5 50%, transparent 51%),
		radial-gradient(1px 1px at 92% 86%, #c9a36a 50%, transparent 51%); }
.ep-card--earth30 .ep-card__art { width: min(100%, 420px); }
.ep-card--earth30 .ep-card__art img { border-radius: 0; box-shadow: none; mix-blend-mode: screen; }
@media (max-width: 700px) {
	.ep-card { grid-template-columns: 1fr; text-align: left; }
	.ep-card__art { width: min(70%, 220px); }
	.ep-card--earth30 .ep-card__art { width: 100%; margin: -8px 0 -12px; }
	.ep-card__btn { width: 100%; justify-content: center; }
}

/* 活動行事曆清單：本團活動用淡金底、細金框，偶爾有一道光緩緩掠過（不閃爍、不跳動） */
.agenda__item.is-own { isolation: isolate; overflow: hidden; margin: 2px 0; padding: 14px; border-radius: 18px; background: linear-gradient(115deg, rgba(229, 207, 159, .26), rgba(229, 207, 159, .08) 55%, rgba(229, 207, 159, .02)); box-shadow: inset 0 0 0 1px rgba(168, 130, 63, .24), 0 14px 30px -24px rgba(134, 101, 43, .55); transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.agenda__item.is-own::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255, 248, 230, .55) 48%, transparent 66%) no-repeat; background-size: 260% 100%; background-position: 160% 0; animation: own-sheen 9s var(--ease) infinite; pointer-events: none; }
@keyframes own-sheen { 0%, 62% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.agenda__item.is-own .agenda__img { box-shadow: 0 10px 24px -14px rgba(22, 20, 15, .55); }
.agenda__own { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; box-shadow: none; color: var(--brass-ink); letter-spacing: .16em; }
.agenda__own i { width: 9px; height: 9px; background: var(--brass); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
@media (hover: hover) { .agenda__item.is-own:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(168, 130, 63, .4), 0 18px 36px -22px rgba(134, 101, 43, .6); } }
@media (prefers-reduced-motion: reduce) { .agenda__item.is-own::before { animation: none; } }
@media (max-width: 600px) { .agenda__item.is-own { padding: 10px; border-radius: 14px; gap: 12px; } }

/* 其他紀錄：沒有標題，年份按鍵直接接在分頁下方 */
.rec-past { padding-top: clamp(28px, 5vh, 48px); }
.rec-past.has-upcoming { padding-top: clamp(40px, 7vh, 72px); }

/* 紀錄內頁：每一段（演出者、曲目、名單、照片、相關消息）上方留一樣的距離，標題不會貼著上一段 */
.event-people, .event-program, .event-crew, .event-gallery, .event-news { padding-top: clamp(64px, 10vh, 112px); }
.numbers--record + .event-people, .numbers--record + .event-program { padding-top: 0; }

/* =========================================================
   活動紀錄・即將登場（淺色）：最近一場是聚光主卡——後面是放大模糊的主視覺，
   左邊完整的主視覺（滑鼠移動時微微傾斜），右邊毛玻璃資訊卡；其餘排成小卡。
   ========================================================= */
.rec-upcoming { position: relative; margin-top: 0; padding-block: clamp(40px, 7vh, 80px) clamp(20px, 4vh, 40px); background: none; color: var(--ink); }
.rec-upcoming .eyebrow { color: var(--brass-ink); }
.rec-upcoming .eyebrow em { color: var(--ink-3); }
.rec-upcoming__title { color: var(--ink); }
.spot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); overflow: hidden; padding: clamp(28px, 4.5vw, 64px); border-radius: 28px; isolation: isolate; background: var(--bg-2); box-shadow: 0 0 0 1px rgba(22, 20, 15, .06), 0 40px 80px -48px rgba(22, 20, 15, .45); }
.spot__bg { position: absolute; inset: -12%; z-index: -2; }
.spot__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(48px) saturate(1.5); opacity: .55; transform: scale(1.1); animation: spot-drift 22s ease-in-out infinite alternate; }
.spot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(251, 250, 247, .25), rgba(251, 250, 247, .7) 70%); }
@keyframes spot-drift { from { transform: scale(1.1) translate(-2%, -1%); } to { transform: scale(1.18) translate(2%, 2%); } }
.spot__media { --rx: 0deg; --ry: 0deg; display: block; justify-self: center; width: min(100%, 560px); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(22, 20, 15, .6), 0 0 0 1px rgba(255, 255, 255, .5); transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.spot__media img { display: block; width: 100%; height: auto; }
.spot__info { position: relative; padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 20px 50px -30px rgba(22, 20, 15, .35); }
.spot__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
.spot__md { color: var(--ink); font-family: var(--latin); font-size: clamp(3.2rem, 2rem + 4vw, 5.6rem); font-weight: 500; line-height: .9; letter-spacing: .01em; }
.spot__wd { color: var(--ink-2); font-size: .95rem; letter-spacing: .12em; }
.spot__wd .num { margin-right: .3em; }
.spot__count { display: inline-flex; align-items: baseline; gap: .35em; margin: 14px 0 0; padding: 4px 14px; border-radius: 999px; background: rgba(229, 207, 159, .45); color: #5b431a; font-size: .88rem; letter-spacing: .1em; box-shadow: inset 0 0 0 1px rgba(168, 130, 63, .25); }
.spot__count b { font-family: var(--latin); font-size: 1.25rem; font-weight: 600; }
.spot__kind { margin: 22px 0 6px; color: var(--brass-ink); font-size: .8rem; letter-spacing: .22em; }
.spot__title { margin: 0 0 18px; font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); line-height: 1.45; }
.spot__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.spot__facts { display: grid; gap: 8px; margin: 0 0 24px; padding-top: 16px; border-top: 1px solid rgba(22, 20, 15, .1); }
.spot__facts div { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 10px; }
.spot__facts dt { color: var(--ink-3); font-size: .82rem; letter-spacing: .2em; }
.spot__facts dd { margin: 0; }
.spot__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
@media (hover: hover) { .spot:hover .spot__media { box-shadow: 0 40px 70px -30px rgba(22, 20, 15, .65), 0 0 0 1px rgba(255, 255, 255, .6); } }
/* 其餘的即將登場：小卡 */
.up-next { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.up-next__card { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 18px 36px -30px rgba(22, 20, 15, .4); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.up-next__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--bg-3); }
.up-next__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.up-next__text { display: grid; gap: 3px; min-width: 0; }
.up-next__date { display: flex; align-items: baseline; gap: 8px; }
.up-next__date b { color: var(--brass-ink); font-family: var(--latin); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.up-next__date small { color: var(--ink-3); font-size: .8rem; }
.up-next__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--serif); font-size: 1.02rem; line-height: 1.45; }
.up-next__venue { color: var(--ink-3); font-size: .82rem; }
@media (hover: hover) { .up-next__card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line-2), 0 24px 40px -28px rgba(22, 20, 15, .5); } .up-next__card:hover .up-next__img img { transform: scale(1.06); } }
@media (max-width: 900px) {
	.spot { grid-template-columns: 1fr; padding: 20px; border-radius: 22px; }
	.spot__media { width: min(100%, 420px); }
	.spot__actions .btn { flex: 1; justify-content: center; }
	.up-next { grid-template-columns: 1fr; }
	.up-next__card { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .spot__bg img { animation: none; } }

/* =========================================================
   頁首與分頁列：液態玻璃。標題照片從頁面最上緣開始，延伸到頁首後面，
   透過玻璃看得到模糊的照片，不會在頁首下緣被切成一條直線。
   首頁大圖上（is-over）維持全透明。
   ========================================================= */
.page-hero__photo { top: 0; }
.site-header:not(.is-over) {
	background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(251, 250, 247, .32));
	-webkit-backdrop-filter: blur(22px) saturate(1.8);
	backdrop-filter: blur(22px) saturate(1.8);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .55), 0 1px 0 rgba(22, 20, 15, .05);
}
.site-header.is-scrolled {
	background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(251, 250, 247, .6));
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(22, 20, 15, .07), 0 10px 30px -24px rgba(22, 20, 15, .35);
}
.site-header.is-over { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.sub-nav {
	background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(251, 250, 247, .36));
	-webkit-backdrop-filter: blur(22px) saturate(1.8);
	backdrop-filter: blur(22px) saturate(1.8);
	border-bottom: 1px solid rgba(22, 20, 15, .07);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
@media (prefers-reduced-transparency: reduce) {
	.site-header:not(.is-over), .site-header.is-scrolled, .sub-nav { background: rgb(251, 250, 247); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 沒有照片的紀錄卡片：只顯示年份 */
.card__img--none { display: grid; place-items: center; background: linear-gradient(160deg, var(--bg-2), var(--bg-3)); }
.card__img--none span { font-family: var(--latin); font-variant-numeric: lining-nums; font-size: clamp(44px, 9vw, 72px); letter-spacing: .04em; color: var(--ink-3); opacity: .55; }

/* 沒有照片的人：通用紙張背景＋姓氏大字＋名字；色調與線條位置依名字固定變化 */
.photo-ph { position: relative; container-type: size; display: grid; place-content: center; justify-items: center; gap: .1em; width: 100%; height: 100%; overflow: hidden; background: #f7f3ec url(../img/person-generic.webp) var(--ph-x, 50%) var(--ph-y, 100%) / 170% auto no-repeat; color: hsl(var(--ph-h, 32) 28% 36%); font-family: var(--serif); font-weight: 700; line-height: 1; text-align: center; }
.photo-ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 85% at 28% 18%, hsl(var(--ph-h, 32) 55% 72% / .22), transparent 62%), linear-gradient(180deg, transparent 55%, hsl(var(--ph-h, 32) 40% 60% / .08)); pointer-events: none; }
.photo-ph b, .photo-ph i { position: relative; }
.photo-ph b { font-weight: 700; }
.photo-ph i { font-style: normal; font-weight: 500; font-family: var(--sans); font-size: max(.24em, 11px); letter-spacing: .4em; padding-left: .4em; color: var(--ink-3); }
@container (max-width: 120px) { .photo-ph i { display: none; } }
.pp-stage__photo .photo-ph i { color: rgba(232, 205, 150, .6); }

/* 沒有照片的紀錄：通用封面＋年份 */
.cover-generic { position: relative; display: block; width: 100%; height: 100%; background: #f7f3ec; }
.cover-generic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-generic__year { position: absolute; right: 7%; bottom: 9%; font-family: var(--latin); font-variant-numeric: lining-nums; font-size: clamp(28px, 4.2vw, 56px); letter-spacing: .06em; color: rgba(134, 101, 43, .72); }
.event-cover--generic { aspect-ratio: 3 / 1; }
.event-cover--generic .cover-generic img { object-position: 30% 50%; }

/* 歷屆團員：聲部索引＋收合；標題旁疊放有照片的人，展開後照片帶＋多欄名單 */
.alumni-bar { display: grid; gap: 16px; margin-bottom: clamp(20px, 3vw, 32px); }
.alumni-index { display: flex; flex-wrap: wrap; gap: 8px; }
.alumni-index a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; color: var(--ink-2); background: var(--bg); }
.alumni-index a:hover { border-color: var(--brass); color: var(--brass-ink); }
.alumni-bar .roster-search { margin-bottom: 0; }
.alumni-sec { scroll-margin-top: calc(var(--header-h, 72px) + 64px); }
.alumni-sec summary { align-items: center; gap: 16px; }
.alumni-ledger { columns: 5 200px; column-gap: 28px; }
.alumni-ledger li { display: grid; grid-template-columns: 2.8em 26px auto minmax(0, 1fr); gap: 0 10px; align-items: center; height: 44px; padding: 0; overflow: hidden; }
.alumni-ledger li > :not(.roster__code) { white-space: nowrap; }
.alumni-ledger li > small { grid-column: 4; margin: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.alumni-ava:empty { background: none; box-shadow: none; }
.alumni-ava { width: 26px; height: 26px; overflow: hidden; border-radius: 50%; background: var(--bg-3); box-shadow: 0 0 0 1px var(--line); }
.alumni-ava img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.alumni-ledger li > span:not(.roster__code) { color: var(--ink-2); }
.alumni-ledger li.has-page a { color: var(--ink); text-decoration-color: var(--brass); }
@media (max-width: 600px) {
	.alumni-index { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter, 16px) * -1); padding-inline: var(--gutter, 16px); scrollbar-width: none; }
	.alumni-index a { flex: none; }
	.alumni-ledger { columns: 2; column-gap: 16px; }
	.alumni-ledger li { grid-template-columns: 2.1em 20px minmax(0, 1fr); gap: 1px 6px; align-content: center; height: 48px; }
	.alumni-ledger .roster__code { font-size: .75rem; }
	.alumni-ledger li > .roster__code { grid-column: 1; grid-row: 1; }
	.alumni-ledger li > .alumni-ava { grid-column: 2; grid-row: 1; }
	.alumni-ledger li > :is(a, span):not(.roster__code, .alumni-ava) { grid-column: 3; grid-row: 1; padding-bottom: 2px; font-size: 1rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
	.alumni-ledger li > small { grid-column: 3; grid-row: 2; font-size: .72rem; line-height: 1.2; letter-spacing: 0; text-align: left; }
	.alumni-ledger li:has(> small) > :is(.roster__code, .alumni-ava) { grid-row: 1 / span 2; }
	.alumni-ava { width: 20px; height: 20px; }
}

/* 人物頁沒有照片：名牌（金色姓氏＋樂器英文＋深色五線） */
.pp-plate { display: grid; place-content: center; justify-items: center; gap: clamp(10px, 1.6vw, 18px); background: radial-gradient(70% 55% at 50% 42%, rgba(168, 130, 63, .18), transparent 70%), #1a1712; }
.pp-plate::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: url(../img/person-generic.webp) center bottom / 100% auto no-repeat; filter: invert(1) hue-rotate(180deg) saturate(1.5) brightness(.85); mix-blend-mode: lighten; opacity: .8; -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%); pointer-events: none; }
.pp-plate__glyph { position: relative; z-index: 1; font-family: var(--serif); font-weight: 900; font-size: clamp(8rem, 5rem + 10vw, 15rem); line-height: 1; background: linear-gradient(180deg, #f1dfb6 0%, #c9a463 55%, #8a6a31 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.pp-plate__en { position: relative; z-index: 1; font-family: var(--latin); font-style: italic; font-size: clamp(1.1rem, .9rem + .8vw, 1.6rem); letter-spacing: .12em; color: rgba(232, 205, 150, .75); }
.pp-plate__en::before, .pp-plate__en::after { content: ""; display: inline-block; width: 28px; height: 1px; margin: 0 14px; vertical-align: .35em; background: rgba(232, 205, 150, .35); }
@media (max-width: 900px) {
	.pp-stage__photo.pp-plate { aspect-ratio: auto; padding: 56px 0 104px; }
	.pp-plate__glyph { font-size: clamp(7rem, 30vw, 10rem); }
}