/* ==========================================================================
   專文版型（single-feature.php）：人物專文、樂曲故事
   內文元件（在文章裡用 HTML 區塊寫）：
   .fs-root[data-fs-theme]            風格：paper 紙本（人物）、sea 海洋（與鯨同行）、record 唱片（吳平如前團長）
   section.fs-chapter[data-title]     章節；裡面的 h2.fs-h 會自動加上章節編號
   p.fs-lead                          開頭導言
   figure.fs-photo(.is-wide|.is-tall)  單張照片，is-wide 滿版並跟著捲動微微移動
   div.fs-pair > figure*2              兩張並排
   div.fs-album > figure*n            老照片：像相簿一樣散放，捲到時一張張落下
   div.fs-strip > figure*n            一排照片，手機左右滑、電腦捲動時橫向移動
   ol.fs-timeline > li[data-year]     時間軸，捲動時線條往下長、年份亮起
   blockquote.fs-quote                大字引文
   figure.fs-scan                     紙本文件掃描
   div.fs-listen[data-yt]             聆聽段落：按了才載入影片，點時間跳到那一段
   figure.fs-ill                       插畫
   ========================================================================== */

.fs {
	--fs-bg: #f3eee4;
	--fs-bg-2: #e9e1d2;
	--fs-ink: #2a251f;
	--fs-ink-2: #5d554a;
	--fs-line: rgba(42, 37, 31, .18);
	--fs-accent: #9c4f2a;
	--fs-card: #fffdf8;
	--fs-read: 680px;
	position: relative;
	background: var(--fs-bg);
	color: var(--fs-ink);
}
.fs--paper {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .34 0 0 0 0 .26 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
		var(--fs-bg);
}
.fs--sea {
	--fs-bg: #06192a;
	--fs-bg-2: #0b2a42;
	--fs-ink: #e8f1f5;
	--fs-ink-2: #a9c1cd;
	--fs-line: rgba(232, 241, 245, .2);
	--fs-accent: #f39a5b;
	--fs-card: #0e2f48;
	background: linear-gradient(180deg, #0a2236 0%, #06192a 30%, #041322 70%, #020b14 100%);
}

/* ---------- 開頭 ---------- */
.fs-hero { position: relative; display: grid; align-items: end; min-height: max(560px, 100svh); padding: calc(var(--header-h) + 40px) var(--gutter) clamp(48px, 9vh, 96px); overflow: hidden; color: #fbfaf7; background: #1a1712; }
.fs-hero__media { position: absolute; inset: 0; }
.fs-hero__media img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.fs--paper .fs-hero__media img { filter: sepia(.18) contrast(1.02); }
.fs-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 9, 7, .45) 0%, rgba(10, 9, 7, .05) 30%, rgba(10, 9, 7, .25) 55%, rgba(10, 9, 7, .82) 100%); pointer-events: none; }
.fs--sea .fs-hero::after { background: linear-gradient(180deg, rgba(4, 18, 32, .5) 0%, rgba(4, 18, 32, .05) 32%, rgba(4, 18, 32, .3) 58%, #0a2236 100%); }
.fs-hero__text { position: relative; z-index: 1; width: min(100%, 980px); margin: 0 auto; }
.fs-kicker { display: flex; gap: .4em; margin: 0 0 18px; font-size: var(--step--1); letter-spacing: .14em; opacity: .9; }
.fs-kicker a { color: inherit; }
.fs-title { margin: 0; font-family: var(--serif); font-weight: 900; font-size: clamp(2.6rem, 1.4rem + 6.4vw, 6.4rem); line-height: 1.12; letter-spacing: .04em; text-wrap: balance; }
.fs-title .ch { display: inline-block; }
.fs-title__w { display: inline-block; white-space: nowrap; }
.fs-dek { max-width: 34em; margin: 22px 0 0; font-size: var(--step-1); line-height: 1.8; opacity: .92; }
.fs-date { margin: 18px 0 0; font-size: var(--step--1); letter-spacing: .1em; opacity: .7; }
.fs-hero__cue { position: absolute; z-index: 1; right: var(--gutter); bottom: clamp(48px, 9vh, 96px); width: 40px; height: 40px; border: 1px solid rgba(251, 250, 247, .5); border-radius: 50%; display: grid; place-items: center; }
.fs-hero__cue svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: fs-bob 2.2s ease-in-out infinite; }
@keyframes fs-bob { 50% { transform: translateY(5px); } }

/* ---------- 章節導覽 ---------- */
.fs-nav { position: fixed; z-index: 40; left: 0; right: 0; top: var(--header-h); height: 3px; pointer-events: none; }
.fs-nav__bar { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--fs-accent); }
.fs-nav__now { position: absolute; left: var(--gutter); top: 10px; padding: 4px 12px; border-radius: 99px; background: color-mix(in srgb, var(--fs-bg) 88%, transparent); color: var(--fs-ink); font-size: 13px; letter-spacing: .08em; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; }
.fs-nav.is-on .fs-nav__now { opacity: 1; transform: none; }
@media (min-width: 1100px) {
	.fs-nav { left: auto; right: auto; top: 50%; left: 28px; height: auto; transform: translateY(-50%); pointer-events: auto; }
	.fs-nav__bar, .fs-nav__now { display: none; }
	.fs-nav ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; opacity: 0; transition: opacity .4s; }
	.fs-nav.is-on ol { opacity: 1; }
	.fs-nav a { display: flex; align-items: center; gap: 10px; color: var(--fs-ink-2); font-size: 13px; letter-spacing: .06em; }
	.fs-nav a::before { content: ""; width: 18px; height: 1px; background: currentColor; transition: width .3s; }
	.fs-nav a span { opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; white-space: nowrap; }
	.fs-nav:hover a span, .fs-nav a.is-now span { opacity: 1; transform: none; }
	.fs-nav a.is-now { color: var(--fs-accent); }
	.fs-nav a.is-now::before { width: 34px; }
}
@media (max-width: 1099px) { .fs-nav ol { display: none; } }

/* ---------- 內文 ---------- */
.fs-body { position: relative; padding: clamp(56px, 10vh, 120px) var(--gutter) clamp(64px, 12vh, 140px); font-size: clamp(1.04rem, 1rem + .25vw, 1.16rem); line-height: 2.05; }
.fs-body > *, .fs-root > *, .fs-chapter > * { max-width: var(--fs-read); margin-inline: auto; }
.fs-root > * + *, .fs-chapter > * + * { margin-top: 1.25em; }
.fs-body p { margin-bottom: 0; }
.fs-body a { color: var(--fs-accent); background: linear-gradient(currentColor 0 0) 0 100% / 100% 1px no-repeat; }
.fs-lead { font-size: 1.12em; line-height: 2; }
.fs-lead::first-letter { float: left; margin: .12em .14em 0 0; font-family: var(--serif); font-weight: 900; font-size: 3.4em; line-height: .9; color: var(--fs-accent); }
.fs-chapter { margin-top: clamp(80px, 14vh, 160px); }
.fs-h { display: grid; gap: 6px; margin-bottom: 1.6em !important; font-family: var(--serif); font-weight: 900; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); line-height: 1.3; letter-spacing: .04em; }
.fs-h__no { font-family: var(--latin); font-weight: 500; font-style: italic; font-size: .62em; letter-spacing: .08em; color: var(--fs-accent); }
.fs-h small { display: block; font-family: var(--sans); font-weight: 500; font-size: var(--step--1); letter-spacing: .14em; color: var(--fs-ink-2); }
.fs-body h3 { margin-top: 2em; font-family: var(--serif); font-size: var(--step-1); }
.fs-body figure { margin-block: 2.2em; }
.fs-body figure img { display: block; width: 100%; height: auto; }
.fs-body figcaption { margin-top: .8em; color: var(--fs-ink-2); font-size: var(--step--1); line-height: 1.7; }
.fs-body figure img[data-fs-zoom] { cursor: zoom-in; }

.fs-photo img { border-radius: 6px; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .55); }
.fs-photo.is-tall { max-width: min(var(--fs-read), 460px); }
.fs-photo.is-wide { max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); }
.fs-photo.is-wide .fs-photo__frame { overflow: hidden; aspect-ratio: var(--ar, 3 / 2); max-height: min(80svh, 760px); width: 100%; }
@media (min-width: 900px) { .fs-photo.is-wide .fs-photo__frame { aspect-ratio: 21 / 9; } }
.fs-photo.is-wide img { height: 118%; object-fit: cover; border-radius: 0; box-shadow: none; will-change: transform; }
.fs-photo.is-wide figcaption { max-width: var(--fs-read); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 1000px) { .fs-photo.is-big { max-width: 940px; } }

.fs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2.4vw, 26px); align-items: start; max-width: 940px !important; }
.fs-pair figure { margin: 0; }
.fs-pair figure:nth-child(2) { margin-top: clamp(30px, 8vw, 90px); }
.fs-pair img { border-radius: 6px; box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .6); }

.fs-album { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: 18px 14px; max-width: 980px !important; margin-block: 3em; padding: 10px 0; }
@media (min-width: 760px) { .fs-album { grid-template-columns: repeat(3, 1fr); gap: 28px 26px; } }
.fs-album figure { margin: 0 !important; padding: 10px 10px 0; background: #fffdf8; box-shadow: 0 18px 30px -18px rgba(40, 30, 20, .55), 0 1px 2px rgba(40, 30, 20, .2); transform: rotate(var(--r, 0deg)); transition: transform .5s var(--ease); }
.fs-album figure:nth-child(3n+1) { --r: -2.6deg; }
.fs-album figure:nth-child(3n+2) { --r: 1.8deg; margin-top: 22px !important; }
.fs-album figure:nth-child(3n) { --r: -1deg; }
.fs-album figure:hover { transform: rotate(0deg) scale(1.03); z-index: 2; }
.fs-album img { aspect-ratio: 4 / 3; object-fit: cover; }
.fs-album figure.is-portrait img { aspect-ratio: 3 / 4; }
.fs-album figcaption { margin: 0 !important; padding: 8px 2px 10px; color: #6b6156 !important; font-size: 12.5px !important; line-height: 1.5 !important; }
.fs--sea .fs-album figure { background: #e8f1f5; }

.fs-strip { max-width: none !important; width: 100vw; margin-inline: calc(50% - 50vw) !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-block: 3em; }
.fs-strip::-webkit-scrollbar { display: none; }
.fs-strip__track { display: flex; gap: 14px; width: max-content; padding: 0 var(--gutter); }
.fs-strip figure { flex: 0 0 auto; width: min(76vw, 420px); margin: 0 !important; scroll-snap-align: center; }
.fs-strip img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
@media (min-width: 1000px) { .fs-strip.is-pinned { overflow: hidden; } .fs-strip figure { width: 440px; } }

.fs-timeline { position: relative; margin-block: 2.6em; padding: 0 0 0 30px; list-style: none; }
.fs-timeline::before, .fs-timeline__fill { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--fs-line); }
.fs-timeline__fill { background: var(--fs-accent); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.fs-timeline li { position: relative; padding: 0 0 1.4em; opacity: .38; transition: opacity .5s; }
.fs-timeline li::before { content: ""; position: absolute; left: -30px; top: .72em; width: 14px; height: 14px; border: 2px solid var(--fs-line); border-radius: 50%; background: var(--fs-bg); transition: border-color .4s, background .4s, transform .4s var(--ease); }
.fs-timeline li.is-lit { opacity: 1; }
.fs-timeline li.is-lit::before { border-color: var(--fs-accent); background: var(--fs-accent); transform: scale(1.15); }
.fs-timeline b { display: block; font-family: var(--latin); font-size: 1.6em; line-height: 1.2; color: var(--fs-accent); letter-spacing: .02em; }
.fs-timeline p { margin: .1em 0 0; line-height: 1.85; }

.fs-quote { position: relative; max-width: 760px !important; margin-block: 3.2em !important; padding: 0 0 0 1.2em; border-left: 3px solid var(--fs-accent); font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); line-height: 1.9; }
.fs-quote p { margin: 0; }
.fs-quote cite { display: block; margin-top: 1em; font-family: var(--sans); font-style: normal; font-size: var(--step--1); color: var(--fs-ink-2); line-height: 1.7; }
.fs-quote .w { opacity: .14; transition: opacity .35s; }
.fs-quote .w.is-on { opacity: 1; }

.fs-scan { max-width: 560px !important; }
.fs-scan .fs-scan__paper { position: relative; padding: 10px; background: #fffdf8; box-shadow: 0 30px 60px -32px rgba(40, 30, 20, .7); transform: rotate(-1.2deg); }
.fs-scan .fs-scan__mark { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 2px solid var(--fs-accent); border-radius: 4px; box-shadow: 0 0 0 9999px rgba(30, 24, 18, 0); transition: box-shadow .8s; pointer-events: none; }
.fs-scan.is-in .fs-scan__mark { box-shadow: 0 0 0 9999px rgba(30, 24, 18, .28); }

.fs-ill img { border-radius: 18px; }

/* 聆聽段落 */
.fs-listen { max-width: 760px !important; margin-block: 3em !important; padding: clamp(16px, 3vw, 26px); border-radius: 18px; background: var(--fs-card); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .6); }
.fs-listen__title { margin: 0 0 14px; font-family: var(--serif); font-weight: 700; font-size: var(--step-1); }
.fs-listen__player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; }
.fs-listen__player img, .fs-listen__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.fs-listen__play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: rgba(0, 0, 0, .25); cursor: pointer; }
.fs-listen__play span { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--fs-accent); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6); }
.fs-listen__play svg { width: 26px; margin-left: 4px; fill: #fff; }
.fs-listen ol { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.fs-listen li button { display: grid; grid-template-columns: 4.2em 1fr; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: .95em; line-height: 1.7; text-align: left; cursor: pointer; transition: background .25s; }
.fs-listen li button:hover { background: color-mix(in srgb, var(--fs-accent) 12%, transparent); }
.fs-listen li button b { font-family: var(--latin); font-size: 1.1em; color: var(--fs-accent); }
.fs-listen li.is-now button { background: color-mix(in srgb, var(--fs-accent) 22%, transparent); }

/* 進場：一進入畫面就開始，跟著捲動的位置慢慢出現（支援捲動動畫的瀏覽器）；不支援的用 IntersectionObserver 加 .is-in */
.has-motion .fs-body [data-fs-in] { opacity: 0; translate: 0 28px; transition: opacity .7s var(--ease), translate .8s var(--ease); }
.has-motion .fs-body [data-fs-in].is-in { opacity: 1; translate: none; }
.has-motion .fs-album figure[data-fs-in] { translate: 0 -36px; scale: 1.05; transition: opacity .5s var(--ease) var(--d, 0s), translate .8s cubic-bezier(.34, 1.3, .64, 1) var(--d, 0s), scale .8s var(--ease) var(--d, 0s); }
.has-motion .fs-album figure[data-fs-in].is-in { scale: 1; }
.has-motion .fs-photo:not(.is-wide)[data-fs-in] img { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); }
.has-motion .fs-photo:not(.is-wide)[data-fs-in].is-in img { clip-path: inset(0 0 0 0); }
@supports (animation-timeline: view()) {
	.has-motion .fs-body [data-fs-in], .has-motion .fs-album figure[data-fs-in], .has-motion .fs-photo:not(.is-wide)[data-fs-in] img { transition: none; }
	.has-motion .fs-body [data-fs-in] { opacity: 1; translate: none; animation: fs-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
	.has-motion .fs-album figure[data-fs-in] { scale: 1; animation-name: fs-drop; animation-range: entry 0% entry 70%; }
	.has-motion .fs-photo:not(.is-wide)[data-fs-in] img { clip-path: none; animation: fs-wipe linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
}
@keyframes fs-in { from { opacity: 0; translate: 0 36px; } }
@keyframes fs-drop { from { opacity: 0; translate: 0 -40px; scale: 1.06; } 60% { opacity: 1; } }
@keyframes fs-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* 放大看照片 */
.fs-lb { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 56px 16px 24px; background: rgba(12, 10, 8, .94); opacity: 0; transition: opacity .3s; }
.fs-lb.is-on { opacity: 1; }
.fs-lb figure { margin: 0; max-width: min(1200px, 100%); }
.fs-lb img { display: block; max-width: 100%; max-height: calc(100svh - 160px); margin: 0 auto; object-fit: contain; }
.fs-lb figcaption { max-width: 760px; margin: 14px auto 0; color: #e8e2d6; font-size: 14px; line-height: 1.7; text-align: center; }
.fs-lb__x { position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); cursor: pointer; }
.fs-lb__x::before, .fs-lb__x::after { content: ""; position: absolute; left: 12px; right: 12px; top: 21px; height: 2px; background: #fff; transform: rotate(45deg); }
.fs-lb__x::after { transform: rotate(-45deg); }

/* ---------- 海洋風格的裝飾 ---------- */
.fs-wave { position: relative; max-width: none !important; width: 100vw; margin-inline: calc(50% - 50vw) !important; height: 70px; overflow: hidden; margin-block: 3em; }
.fs-wave svg { position: absolute; left: 0; width: 200%; height: 100%; animation: fs-wave 14s linear infinite; }
.fs-wave svg + svg { animation-duration: 22s; animation-direction: reverse; opacity: .5; }
.fs-wave path { fill: none; stroke: rgba(127, 211, 209, .55); stroke-width: 1.5; }
@keyframes fs-wave { to { transform: translateX(-50%); } }
.fs-orca { position: absolute; z-index: 0; width: clamp(160px, 30vw, 360px); opacity: .16; pointer-events: none; left: 0; will-change: transform; }
.fs-orca .k { fill: #cfe6ee; }
.fs-orca .w { fill: var(--fs-bg); }
.fs-orca__b { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease); }
.fs-orca.is-back .fs-orca__b { transform: scaleX(-1); }
.fs-bubbles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fs-bubbles i { position: absolute; bottom: -20px; width: var(--s); height: var(--s); border: 1px solid rgba(207, 230, 238, .35); border-radius: 50%; animation: fs-rise var(--t) linear var(--d) infinite; }
@keyframes fs-rise { to { transform: translate(var(--x), -110vh); } }
.fs--sea .fs-body, .fs--sea .fs-cta { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.fs-hero__cue svg, .fs-wave svg, .fs-bubbles i { animation: none; }
	.fs-timeline li { opacity: 1; }
}

/* 結尾的活動資訊卡：留在專文的底色裡，跟頁尾之間不要露出白邊 */
.fs > .fs-cta { margin: 0 auto; padding-top: 0; padding-bottom: clamp(64px, 10vh, 120px); }
.fs::after { content: ""; display: table; clear: both; }

/* ==========================================================================
   分層封面場景 .fs-scene（放在內文，版型會把它移到開頭）
   <div class="fs-scene" data-fx="53" data-horizon="50.27"> 各層 <img class="fs-L" data-depth> … </div><!--/fs-scene-->
   data-depth：捲動與滑鼠的遠近（0 最遠，1 最近）；.fs-L--sea 會用 WebGL 做水波；.fs-sun 往下捲會沉到海平面；.fs-dive 是會潛水的背鰭
   ========================================================================== */
.fs-hero__media { container-type: size; overflow: hidden; }
.fs-scene { position: absolute; left: calc(var(--fx, 50) * 1%); top: 50%; width: max(100cqw, calc(100cqh * 1672 / 941)); aspect-ratio: 1672 / 941; transform: translate(calc(var(--fx, 50) * -1%), -50%); }
.fs-L { position: absolute; display: block; height: auto; margin: 0; pointer-events: none; user-select: none; }
.fs-L img, img.fs-L { display: block; width: 100%; height: auto; }
.fs-L--sea canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs-clip { overflow: hidden; }
.fs-glow { position: absolute; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 150, 90, .55), rgba(255, 170, 120, .18) 55%, transparent); mix-blend-mode: screen; animation: fs-breathe 7s ease-in-out infinite; pointer-events: none; }
@keyframes fs-breathe { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .75; } }
.fs-dusk { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 24, 58, .75), rgba(70, 30, 60, .35) 48%, rgba(4, 18, 32, .4)); opacity: 0; pointer-events: none; }
.fs-drift { animation: fs-drift var(--t, 40s) ease-in-out infinite alternate; }
@keyframes fs-drift { from { transform: translateX(calc(var(--a, 3%) * -1)); } to { transform: translateX(var(--a, 3%)); } }
.fs-bob { transform-origin: 50% 85%; animation: fs-bob2 5.5s ease-in-out infinite; }
@keyframes fs-bob2 { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(2.5%) rotate(1.2deg); } }
.fs-dive img { animation: fs-dive 11s ease-in-out infinite; }
@keyframes fs-dive { 0%, 30% { transform: translate(0, 0); } 42%, 70% { transform: translate(18%, 105%); } 82%, 100% { transform: translate(0, 0); } }
.has-motion .fs-hero .fs-scene { animation: fs-scene-in 2.2s var(--ease) both; }
/* 直式螢幕看不到整個場景：鏡頭在場景裡慢慢左右移動（--fx 從 30 到 85） */
@property --fx { syntax: '<number>'; inherits: true; initial-value: 50; }
@media (max-aspect-ratio: 1/1) {
	.has-motion .fs-hero .fs-scene { animation: fs-scene-in 2.2s var(--ease) both, fs-pan 34s ease-in-out infinite alternate both; }
}
@keyframes fs-pan { from { --fx: 32; } to { --fx: 84; } }
@keyframes fs-scene-in { from { opacity: 0; transform: translate(calc(var(--fx, 50) * -1%), -50%) scale(1.06); } }

/* ==========================================================================
   出海 .fs-voyage：滿版畫面固定在畫面上，往下捲時一場一場換（海浪由下往上漫過），文字卡片從上面捲過，底下的樂曲時間軸跟著走
   <div class="fs-voyage" data-end="總秒數">
     <div class="fs-voyage__stage"><figure class="fs-vs" data-h="地平線0–1" data-amp="浪"><div class="fs-vs__in"><img>特效 span.fx…</div></figure>…
       <div class="fs-voyage__bar">…button.fs-voyage__seg[data-seek]… span.fs-voyage__head</div></div>
     <div class="fs-voyage__steps"><section class="fs-vstep" data-t="秒"><div class="fs-vstep__card">…</div></section>…</div>
   </div>
   ========================================================================== */
.fs-voyage { --stage: calc(100svh - var(--header-h)); position: relative; max-width: none !important; width: 100vw; margin: 3em calc(50% - 50vw) 2em !important; }
.fs-voyage__stage { position: sticky; top: var(--header-h); z-index: 0; height: var(--stage); overflow: hidden; background: #06192a; }
.fs-vs { position: absolute; inset: 0; margin: 0 !important; visibility: hidden; }
.fs-vs:first-child { visibility: visible; }
.fs-vs__in { position: absolute; inset: 0; transform-origin: 50% 60%; will-change: transform; }
.fs-vs img, .fs-water { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0 !important; box-shadow: none !important; }
.fs-voyage__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--fs-bg) 0, transparent 14%, transparent 62%, rgba(6, 25, 42, .55) 82%, var(--fs-bg) 100%); }
@media (min-width: 900px) { .fs-voyage__shade { background: linear-gradient(180deg, var(--fs-bg) 0, transparent 12%, transparent 80%, var(--fs-bg) 100%), linear-gradient(90deg, rgba(4, 18, 32, .62), rgba(4, 18, 32, .18) 42%, transparent 60%); } }

/* 每一場的特效 */
.fx { position: absolute; z-index: 1; pointer-events: none; }
.fx-glow { width: 34%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 168, 110, .6), rgba(255, 180, 130, .18) 55%, transparent); mix-blend-mode: screen; animation: fs-glow 6s ease-in-out infinite; }
@keyframes fs-glow { 50% { scale: 1.15; opacity: .7; } }
.fx-motes { inset: 0; background-image: radial-gradient(2px 2px at 12% 72%, #ffe1c2, transparent), radial-gradient(1.6px 1.6px at 28% 64%, #ffd2a8, transparent), radial-gradient(2.4px 2.4px at 46% 80%, #ffe6cc, transparent), radial-gradient(1.4px 1.4px at 61% 58%, #ffd9b5, transparent), radial-gradient(2px 2px at 77% 69%, #ffe1c2, transparent), radial-gradient(1.8px 1.8px at 90% 76%, #ffd2a8, transparent), radial-gradient(1.4px 1.4px at 36% 52%, #fff0dd, transparent), radial-gradient(2px 2px at 55% 88%, #ffe1c2, transparent); mix-blend-mode: screen; animation: fs-motes 9s ease-in-out infinite alternate; }
@keyframes fs-motes { from { translate: 0 0; opacity: .35; } to { translate: -2% -6%; opacity: .95; } }
.fx-rain { inset: -10%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg stroke='rgba%28235%2C244%2C248%2C0.55%29' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M58 27l-6 26'/%3E%3Cpath d='M117 13l-6 26'/%3E%3Cpath d='M96 66l-6 26'/%3E%3Cpath d='M10 91l-6 26'/%3E%3Cpath d='M7 78l-6 26'/%3E%3Cpath d='M13 16l-6 26'/%3E%3Cpath d='M76 149l-6 26'/%3E%3Cpath d='M22 40l-6 26'/%3E%3Cpath d='M113 171l-6 26'/%3E%3Cpath d='M104 71l-6 26'/%3E%3Cpath d='M176 8l-6 26'/%3E%3Cpath d='M155 52l-6 26'/%3E%3Cpath d='M26 21l-6 26'/%3E%3Cpath d='M56 147l-6 26'/%3E%3Cpath d='M33 105l-6 26'/%3E%3Cpath d='M115 67l-6 26'/%3E%3C/g%3E%3C/svg%3E"); rotate: 4deg; animation: fs-rain .55s linear infinite; opacity: .8; }
.fx-rain--b { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg stroke='rgba%28235%2C244%2C248%2C0.35%29' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M142 16l-9 40'/%3E%3Cpath d='M15 54l-9 40'/%3E%3Cpath d='M177 111l-9 40'/%3E%3Cpath d='M82 152l-9 40'/%3E%3Cpath d='M118 78l-9 40'/%3E%3Cpath d='M207 182l-9 40'/%3E%3Cpath d='M63 149l-9 40'/%3E%3Cpath d='M137 228l-9 40'/%3E%3Cpath d='M190 75l-9 40'/%3E%3Cpath d='M255 31l-9 40'/%3E%3C/g%3E%3C/svg%3E"); animation-duration: .9s; opacity: .55; }
@keyframes fs-rain { from { background-position: 0 0; } to { background-position: -40px 180px; } }
.fx-rain--b { animation-name: fs-rain2; }
@keyframes fs-rain2 { to { background-position: -58px 260px; } }
.fx-flash { inset: 0; background: radial-gradient(120% 80% at 70% 0%, rgba(235, 244, 255, .75), rgba(200, 220, 240, .15) 60%, transparent); mix-blend-mode: screen; opacity: 0; animation: fs-flash 8s linear infinite 2s; }
@keyframes fs-flash { 0%, 86% { opacity: 0; } 87% { opacity: .9; } 88% { opacity: .15; } 89.5% { opacity: .7; } 92%, 100% { opacity: 0; } }
.fs-vs--storm { animation: fs-sway 5.5s ease-in-out infinite; }
@keyframes fs-sway { 0%, 100% { rotate: -.5deg; scale: 1.03; translate: 0 0; } 50% { rotate: .6deg; scale: 1.03; translate: 0 -1%; } }
.fx-rays { inset: -20% -10% 0; background: repeating-conic-gradient(from 168deg at var(--rx, 60%) -8%, transparent 0deg 5deg, rgba(255, 228, 170, .2) 5deg 7.5deg, transparent 7.5deg 12deg); -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 75%); mask-image: linear-gradient(180deg, #000 10%, transparent 75%); mix-blend-mode: screen; animation: fs-rays 12s ease-in-out infinite alternate; transform-origin: var(--rx, 60%) 0; }
@keyframes fs-rays { from { rotate: -2.5deg; opacity: .65; } to { rotate: 2.5deg; opacity: 1; } }

/* 文字卡片 */
.fs-voyage__steps { position: relative; z-index: 3; margin-top: calc(var(--stage) * -1); }
.fs-vstep { --v: 0; display: flex; align-items: flex-end; min-height: 125svh; padding: 0 var(--gutter) 22svh; }
.fs-vstep:first-child { min-height: 100svh; }
.fs-vstep__card { width: 100%; max-width: 480px; padding: 22px 22px 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(5, 22, 37, .66); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); opacity: calc(.25 + var(--v) * .75); translate: 0 calc((1 - var(--v)) * 26px); }
.fs-vstep__k { display: flex; align-items: baseline; gap: 12px; margin: 0 0 .1em !important; font-family: var(--latin); font-style: italic; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem) !important; line-height: 1 !important; color: var(--fs-accent); letter-spacing: .01em; }
.fs-vstep__k .num { font-style: normal; font-size: .38em; color: var(--fs-ink-2); letter-spacing: .08em; }
.fs-vstep h3 { margin: .25em 0 .4em !important; font-family: var(--serif); font-size: var(--step-2); }
.fs-vstep p { margin: .5em 0 0; }
@media (min-width: 900px) {
	.fs-vstep { align-items: center; padding: 0 0 0 max(6vw, calc(50vw - 600px)); }
	.fs-vstep__card { padding: 30px 32px 26px; }
}
.fs-seek { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 99px; background: rgba(255, 255, 255, .06); color: var(--fs-ink); font: inherit; font-size: .9em; cursor: pointer; transition: background .25s, border-color .25s; }
.fs-seek:hover { background: color-mix(in srgb, var(--fs-accent) 25%, transparent); border-color: var(--fs-accent); }
.fs-seek b { font-family: var(--latin); color: var(--fs-accent); }
.fs-seek::before { content: ""; border-left: 8px solid var(--fs-accent); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* 樂曲時間軸 */
.fs-voyage__bar { position: absolute; z-index: 4; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); width: min(920px, calc(100% - 2 * var(--gutter))); translate: -50% 0; }
.fs-voyage__track { position: relative; display: flex; gap: 3px; height: 34px; }
.fs-voyage__seg { position: relative; flex: var(--w) 1 0; min-width: 0; padding: 0; border: 0; background: none; color: var(--fs-ink-2); font: 500 12px/1 var(--sans); letter-spacing: .04em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.fs-voyage__seg::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .22); transition: background .4s, height .4s; }
.fs-voyage__seg span { position: absolute; left: 0; bottom: 12px; transition: color .4s; }
.fs-voyage__seg.is-past::before { background: color-mix(in srgb, var(--fs-accent) 55%, transparent); }
.fs-voyage__seg.is-on::before { height: 5px; background: var(--fs-accent); }
.fs-voyage__seg.is-on span { color: #fff; }
.fs-voyage__seg--pre { flex: var(--w) 1 0; pointer-events: none; }
.fs-voyage__head { position: absolute; bottom: -4px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--fs-accent) 45%, transparent), 0 0 18px rgba(255, 200, 150, .8); pointer-events: none; }
.fs-voyage__clock { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, .45); color: #fff; font: 600 11px/1 var(--latin); letter-spacing: .06em; }
@media (max-width: 699px) {
	.fs-voyage__seg span { display: none; }
	.fs-voyage__seg.is-on span { display: block; }
	.fs-voyage__track { height: 28px; }
}

/* 路線地圖 .fs-map：捲到時依序畫出路線、亮起地點 */
.fs-map { max-width: 980px !important; }
.fs-map svg { display: block; width: 100%; height: auto; }
.fs-map .land { fill: color-mix(in srgb, var(--fs-ink) 20%, transparent); stroke: color-mix(in srgb, var(--fs-ink) 30%, transparent); stroke-width: .6; }
.fs-map .route { fill: none; stroke: var(--fs-accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.6s var(--ease) var(--d, 0s); }
.fs-map .pt circle { fill: var(--fs-accent); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s cubic-bezier(.34, 1.6, .64, 1) var(--d, 0s); }
.fs-map .pt circle.ring { fill: none; stroke: var(--fs-accent); stroke-width: 1.5; }
.fs-map .pt text { fill: var(--fs-ink); font: 600 22px var(--sans); opacity: 0; transition: opacity .6s var(--d, 0s); paint-order: stroke; stroke: var(--fs-bg); stroke-width: 6px; }
.fs-map .pt text.yr { fill: var(--fs-accent); font: italic 500 18px var(--latin); }
.fs-map.is-in .route { stroke-dashoffset: 0; }
.fs-map.is-in .pt circle { transform: scale(1); }
.fs-map.is-in .pt circle.ring { animation: fs-ping 2.4s ease-out var(--d, 0s) infinite; }
.fs-map.is-in .pt text { opacity: 1; }
@keyframes fs-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }

/* 大小比較 .fs-size：捲到時虎鯨游進來、比例尺拉開 */
.fs-size { max-width: 860px !important; }
.fs-size svg { display: block; width: 100%; height: auto; border-radius: 18px; }
.fs-size .swim { transform: translateX(-28%); opacity: 0; transition: transform 2.2s var(--ease), opacity 1.2s; }
.fs-size .bar { stroke: var(--fs-accent); stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.6s var(--ease) .6s; }
.fs-size .lbl { opacity: 0; transition: opacity .8s 1.6s; }
.fs-size.is-in .swim, .fs-size.is-in .bar { transform: none; opacity: 1; }
.fs-size.is-in .lbl { opacity: 1; }
.fs-size text { fill: #eaf3f5; font: 500 22px var(--sans); }

@media (prefers-reduced-motion: reduce) {
	.fs-drift, .fs-bob, .fs-dive img, .fs-glow, .fx, .fs-vs--storm { animation: none !important; }
	.fx-rain { display: none; }
	.fs-map .route { stroke-dashoffset: 0; } .fs-map .pt circle { transform: none; } .fs-map .pt text { opacity: 1; }
	.fs-size .swim, .fs-size .bar { transform: none; opacity: 1; } .fs-size .lbl { opacity: 1; }
}

/* ==========================================================================
   唱片風格 data-fs-theme="record"（吳平如前團長）：華燈初上的廟口音樂會、老唱片
   深暖色夜晚、燈籠金與紅、浮起的燈火光點；照片捲到時從泛黃慢慢「顯影」成彩色；角落的唱片機跟著捲動轉。
   這個風格專用的元件：ol.fs-homes（練習場地的路線）、div.fs-discs（唱片＋歌單）、div.fs-setlist（節目單）、section.fs-coda（尾聲）
   ========================================================================== */
.fs--record {
	--fs-bg: #16100d;
	--fs-bg-2: #221813;
	--fs-ink: #f0e5d2;
	--fs-ink-2: #b9a68c;
	--fs-line: rgba(240, 229, 210, .16);
	--fs-accent: #e2a656;
	--fs-red: #c8553d;
	--fs-card: #241a15;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(1100px 620px at 85% 0%, rgba(226, 166, 86, .12), transparent 62%),
		radial-gradient(900px 520px at 0% 45%, rgba(200, 85, 61, .09), transparent 62%),
		radial-gradient(900px 600px at 100% 85%, rgba(226, 166, 86, .07), transparent 60%),
		var(--fs-bg);
}
.fs--record .fs-body { z-index: 1; }
.fs--record .fs-hero { background: var(--fs-bg); }
.fs--record .fs-hero::after { background: radial-gradient(120% 70% at 50% 30%, transparent 40%, rgba(22, 16, 13, .55) 100%), linear-gradient(180deg, rgba(22, 16, 13, .55) 0%, rgba(22, 16, 13, .05) 30%, rgba(22, 16, 13, .35) 60%, #16100d 100%); }
.fs--record .fs-hero__media img { animation: fs-develop-in 3.6s cubic-bezier(.3, .7, .2, 1) .2s both; }
@keyframes fs-develop-in { from { filter: sepia(1) saturate(.25) brightness(1.25) contrast(.85) blur(3px); } to { filter: sepia(.12) saturate(1.05) brightness(1) contrast(1.02) blur(0); } }
.fs--record .fs-title { color: #fff3dd; text-shadow: 0 0 40px rgba(226, 166, 86, .35); }
.fs--record .fs-kicker, .fs--record .fs-date { color: #f3d9ae; }
.fs--record .fs-lead::first-letter { color: var(--fs-accent); text-shadow: 0 0 24px rgba(226, 166, 86, .45); }

/* 章節標題：Track 01 */
.fs--record .fs-h__no { font-style: normal; font-size: .42em; letter-spacing: .32em; }
.fs--record .fs-h__no::before { content: "TRACK "; }
.fs--record .fs-h::after { content: ""; display: block; width: 72px; height: 2px; margin-top: 14px; background: linear-gradient(90deg, var(--fs-accent), transparent); }

/* 照片：相簿是泛黃的相紙；捲到時從老照片的顏色慢慢顯影 */
.fs--record .fs-album figure { background: #efe3cc; }
.fs--record .fs-album figcaption { color: #5b4a3a !important; }
.fs--record .fs-photo img, .fs--record .fs-pair img, .fs--record .fs-strip img { box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .8); }
@keyframes fs-develop { from { filter: sepia(.95) saturate(.35) brightness(1.18) contrast(.88); } to { filter: none; } }
@supports (animation-timeline: view()) {
	.has-motion .fs--record .fs-album img, .has-motion .fs--record .fs-pair img, .has-motion .fs--record .fs-strip img, .has-motion .fs--record .fs-coda__reel img { animation: fs-develop linear both; animation-timeline: view(); animation-range: entry 5% cover 45%; }
	.has-motion .fs--record .fs-photo:not(.is-wide)[data-fs-in] img { animation: fs-wipe linear both, fs-develop linear both; animation-timeline: view(), view(); animation-range: entry 0% entry 80%, entry 10% cover 50%; }
}

/* 引文：像歌詞卡，燈籠的光在後面 */
.fs--record .fs-quote { max-width: 820px !important; margin-block: 4em !important; padding: 2.4em 1em 1.6em; border: 0; text-align: center; background: radial-gradient(closest-side, rgba(226, 166, 86, .16), transparent); }
.fs--record .fs-quote::before { content: "“"; position: absolute; left: 50%; top: -.1em; translate: -50% 0; font-family: Georgia, serif; font-size: 4.6em; line-height: 1; color: var(--fs-accent); opacity: .7; }
.fs--record .fs-quote cite { margin-top: 1.4em; }
.fs--record .fs-listen { background: linear-gradient(160deg, #2b1f19, #1d1511); border: 1px solid rgba(226, 166, 86, .18); }
.fs--record .fs-timeline b { font-family: var(--latin); }

/* 燈火：浮起的光點 */
.fs-lights { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fs-lights i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 68%); opacity: 0; mix-blend-mode: screen; animation: fs-float var(--t) ease-in-out var(--d) infinite; }
@keyframes fs-float { 0% { transform: translate(0, 40px) scale(.8); opacity: 0; } 25% { opacity: var(--o); } 75% { opacity: var(--o); } 100% { transform: translate(var(--x), -160px) scale(1.1); opacity: 0; } }

/* 唱片機：角落的唱片跟著捲動轉，唱臂跟著讀到哪裡移動，旁邊寫現在是第幾軌 */
.fs-player { position: fixed; z-index: 45; left: 22px; bottom: 22px; display: none; align-items: center; gap: 14px; max-width: 320px; padding: 9px 18px 9px 9px; border: 1px solid rgba(240, 229, 210, .14); border-radius: 999px; background: rgba(22, 16, 13, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--fs-ink); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); opacity: 0; translate: 0 16px; transition: opacity .5s, translate .5s var(--ease); }
.fs-player.is-on { opacity: 1; translate: none; }
.fs-player__deck { position: relative; flex: 0 0 auto; width: 58px; height: 58px; }
.fs-player__disc { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, var(--fs-accent) 0 18%, #2a1d16 18.5% 21%, transparent 21.5%), repeating-radial-gradient(circle, #121010 0 1.6px, #1f1b1a 1.6px 3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 4px 10px rgba(0, 0, 0, .6); }
.fs-player__disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 18%, rgba(255, 255, 255, .12) 22%, transparent 30% 68%, rgba(255, 255, 255, .08) 72%, transparent 80%); }
.fs-player__arm { position: absolute; right: -6px; top: -4px; width: 4px; height: 40px; border-radius: 4px; background: linear-gradient(#e9dcc6, #9d8f7b); transform-origin: 50% 4px; rotate: var(--a, 8deg); transition: rotate .4s var(--ease); }
.fs-player__arm::before { content: ""; position: absolute; left: -4px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #d8c9b1; }
.fs-player__arm::after { content: ""; position: absolute; left: -3px; bottom: -4px; width: 10px; height: 8px; border-radius: 2px; background: #cbb99c; }
.fs-player__txt { display: grid; min-width: 0; line-height: 1.35; }
.fs-player__txt small { font-family: var(--latin); font-size: 11px; letter-spacing: .26em; color: var(--fs-accent); }
.fs-player__txt b { overflow: hidden; font-family: var(--serif); font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
.fs-player__list { position: absolute; left: 0; bottom: calc(100% + 10px); min-width: 240px; margin: 0; padding: 10px; list-style: none; border-radius: 16px; background: rgba(22, 16, 13, .94); border: 1px solid rgba(240, 229, 210, .14); opacity: 0; translate: 0 8px; pointer-events: none; transition: opacity .3s, translate .3s; }
.fs-player:hover .fs-player__list, .fs-player:focus-within .fs-player__list { opacity: 1; translate: none; pointer-events: auto; }
.fs-player__list a { display: flex; gap: 10px; padding: 6px 10px; border-radius: 8px; color: var(--fs-ink-2); font-size: 14px; }
.fs-player__list a span { font-family: var(--latin); color: var(--fs-accent); }
.fs-player__list a:hover, .fs-player__list a.is-now { background: rgba(226, 166, 86, .12); color: var(--fs-ink); }
@media (min-width: 1100px) {
	.fs-player { display: flex; }
	.fs--record .fs-nav { display: none; }
}

/* 練習場地的路線：一盞燈沿著路線走，經過的地方亮起來 */
.fs-homes { --p: 0; position: relative; max-width: 940px !important; margin-block: 3.2em !important; padding: 0 0 0 54px; list-style: none; }
.fs-homes::before, .fs-homes::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--fs-line); }
.fs-homes::after { background: linear-gradient(var(--fs-accent), var(--fs-red)); transform-origin: 50% 0; transform: scaleY(var(--p)); }
.fs-homes__dot { position: absolute; z-index: 2; left: 22px; top: calc(22px + (100% - 44px) * var(--p)); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #ffe2a8; box-shadow: 0 0 0 6px rgba(226, 166, 86, .25), 0 0 26px 8px rgba(226, 166, 86, .55); }
.fs-homes li { position: relative; padding: 0 0 1.8em; opacity: .4; transition: opacity .6s; }
.fs-homes li.is-lit { opacity: 1; }
.fs-homes i { position: absolute; left: -54px; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fs-card); border: 1px solid var(--fs-line); color: var(--fs-ink-2); transition: background .5s, color .5s, border-color .5s; }
.fs-homes i svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fs-homes li.is-lit i { background: #3a2a1d; color: #ffd796; border-color: var(--fs-accent); }
.fs-homes b { display: block; font-family: var(--serif); font-size: 1.25em; line-height: 1.5; }
.fs-homes small { display: block; font-family: var(--latin); letter-spacing: .14em; color: var(--fs-accent); }
.fs-homes p { margin: .3em 0 0; color: var(--fs-ink-2); font-size: .95em; line-height: 1.8; }
@media (min-width: 820px) {
	.fs-homes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 0; }
	.fs-homes::before, .fs-homes::after { left: 12.5%; right: 12.5%; top: 31px; bottom: auto; width: auto; height: 2px; }
	.fs-homes::after { transform-origin: 0 50%; transform: scaleX(var(--p)); }
	.fs-homes__dot { top: 31px; left: calc(12.5% + 75% * var(--p)); }
	.fs-homes li { padding: 0; text-align: center; }
	.fs-homes i { position: relative; left: auto; width: 62px; height: 62px; margin: 0 auto 14px; }
	.fs-homes i svg { width: 30px; height: 30px; }
}

/* 唱片＋歌單 */
.fs-discs { display: grid; gap: 28px; width: min(980px, calc(100vw - 2 * var(--gutter))); max-width: none !important; margin: 3.4em calc(50% - min(490px, 50vw - var(--gutter))) !important; align-items: center; }
.fs-discs__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fs-disc { position: relative; margin: 0 !important; }
.fs-disc__spin { position: relative; border-radius: 50%; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); }
.fs-disc__spin img { display: block; width: 100%; height: auto; border-radius: 50%; }
.has-motion .fs-disc__spin { animation: fs-spin 26s linear infinite; }
.fs-disc:nth-child(2) .fs-disc__spin { animation-duration: 32s; animation-direction: reverse; }
.fs-disc__spin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 14%, rgba(255, 255, 255, .22) 18%, transparent 24% 62%, rgba(255, 255, 255, .14) 66%, transparent 72%); mix-blend-mode: screen; pointer-events: none; }
@keyframes fs-spin { to { rotate: 1turn; } }
.fs-disc figcaption { text-align: center; }
.fs-tracks { padding: 22px 24px; border-radius: 18px; background: linear-gradient(160deg, #2b1f19, #1c1410); border: 1px solid rgba(226, 166, 86, .18); }
.fs-tracks ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 26px; counter-reset: tr; }
.fs-tracks h3 { margin: 0 0 .6em !important; font-family: var(--serif); font-size: 1.05em; color: var(--fs-accent); }
.fs-tracks li { counter-increment: tr; display: flex; align-items: baseline; gap: 10px; padding: 5px 0; break-inside: avoid; border-bottom: 1px dashed rgba(240, 229, 210, .1); font-size: .95em; }
.fs-tracks li::before { content: counter(tr, decimal-leading-zero); font-family: var(--latin); font-size: .82em; color: var(--fs-ink-2); }
.fs-tracks li.is-hl { color: #ffd796; font-weight: 700; }
.fs-tracks li.is-hl::after { content: ""; width: 18px; height: 12px; margin-left: auto; background: linear-gradient(var(--fs-accent) 0 0) 0 100% / 3px 40% no-repeat, linear-gradient(var(--fs-accent) 0 0) 5px 100% / 3px 90% no-repeat, linear-gradient(var(--fs-accent) 0 0) 10px 100% / 3px 60% no-repeat, linear-gradient(var(--fs-accent) 0 0) 15px 100% / 3px 80% no-repeat; animation: fs-eq 1.1s ease-in-out infinite alternate; }
@keyframes fs-eq { 0% { background-size: 3px 40%, 3px 90%, 3px 60%, 3px 80%; } 50% { background-size: 3px 90%, 3px 30%, 3px 100%, 3px 45%; } 100% { background-size: 3px 55%, 3px 75%, 3px 35%, 3px 100%; } }
@media (min-width: 860px) { .fs-discs { grid-template-columns: 1.1fr 1fr; } }
@media (max-width: 480px) { .fs-tracks ol { columns: 1; } }

/* 節目單：2012 年追思專輯，一行一行亮起 */
.fs-setlist { max-width: 620px !important; margin-block: 3em !important; padding: 30px clamp(20px, 5vw, 44px) 26px; background: #efe3cc; color: #2b211b; border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); outline: 1px solid rgba(43, 33, 27, .25); outline-offset: -10px; rotate: -.6deg; }
.fs-setlist header { text-align: center; margin-bottom: 1.2em; }
.fs-setlist header small { display: block; font-family: var(--latin); letter-spacing: .3em; font-size: 12px; color: #8a6a3e; }
.fs-setlist header b { display: block; margin-top: .3em; font-family: var(--serif); font-size: 1.3em; }
.fs-setlist header span { display: block; font-size: .9em; color: #6b5946; }
.fs-setlist ol { margin: 0; padding: 0; list-style: none; }
.fs-setlist li { display: grid; grid-template-columns: 4.2em 1fr; gap: 12px; padding: 9px 0; border-top: 1px dotted rgba(43, 33, 27, .3); }
.fs-setlist li b { font-family: var(--serif); color: #8a3b28; }
.fs-setlist li span { font-size: .95em; line-height: 1.7; }
.has-motion .fs-setlist li { opacity: 0; translate: 0 10px; transition: opacity .6s, translate .7s var(--ease); transition-delay: calc(var(--i) * .16s + .3s); }
.has-motion .fs-setlist.is-in li { opacity: 1; translate: none; }

/* 尾聲：照片像回憶一樣慢慢流過，最後一句亮起 */
.fs-coda { position: relative; max-width: none !important; width: 100vw; margin: clamp(90px, 16vh, 180px) calc(50% - 50vw) 0 !important; padding: clamp(150px, 26vh, 260px) var(--gutter); overflow: hidden; text-align: center; background: radial-gradient(70% 55% at 50% 50%, rgba(226, 166, 86, .14), transparent 70%); }
.fs-coda > .fs-coda__reel { max-width: none !important; margin: 0 !important; }
.fs-coda__reel { position: absolute; left: 0; width: max-content; display: flex; gap: 14px; opacity: .28; pointer-events: none; }
.fs-coda__reel--a { top: 26px; animation: fs-reel 90s linear infinite; }
.fs-coda__reel--b { bottom: 26px; animation: fs-reel 110s linear infinite reverse; }
.fs-coda__reel img { width: auto !important; height: clamp(90px, 14vw, 150px) !important; border-radius: 4px; }
@keyframes fs-reel { to { translate: -50% 0; } }
.fs-coda::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--fs-bg) 0%, transparent 22%, transparent 78%, var(--fs-bg) 100%), linear-gradient(90deg, var(--fs-bg) 0%, transparent 12%, transparent 88%, var(--fs-bg) 100%); z-index: 1; pointer-events: none; }
.fs-coda > .fs-coda__text { position: relative; z-index: 2; max-width: 620px; margin: 0 auto !important; }
.fs-coda__text p { margin: 0 0 1.3em; }
.fs-coda__end { margin-top: 1.6em !important; font-family: var(--serif); font-weight: 900; font-size: clamp(2rem, 1.3rem + 3.6vw, 3.6rem); letter-spacing: .1em; color: #ffe0a8; text-shadow: 0 0 36px rgba(226, 166, 86, .55); }
.has-motion .fs-coda__text > * { opacity: 0; translate: 0 18px; filter: blur(4px); transition: opacity 1.2s, translate 1.4s var(--ease), filter 1.2s; transition-delay: calc(var(--i) * .5s); }
.has-motion .fs-coda.is-in .fs-coda__text > * { opacity: 1; translate: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
	.fs-lights, .fs-coda__reel { display: none; }
	.fs-disc__spin, .fs--record .fs-hero__media img, .fs-tracks li.is-hl::after { animation: none !important; }
}