/* 下一站文創：鯨魚島｜全站共用
   色票依 design/品牌視覺規範.md 第 2 節。全站統一深色舞台風（2026-10-20 決定）。
   .site-* 是每一頁都有的導覽列與頁尾；.pg-* 只用在首頁、關於、常見問題。 */
:root {
  --s-night: #06111f;      /* 深海夜 */
  --s-night-2: #0c1d30;
  --s-night-3: #1d3249;
  --s-sea: #0e3350;        /* 台江深海 */
  --s-red: #8c1d1f;        /* 府城紅 */
  --s-red-deep: #4e0f12;   /* 府城深紅 */
  --s-gold: #e8c57e;       /* 金鯨金 */
  --s-gold-dark: #8a6424;  /* 金鯨暗金 */
  --s-pearl: #f6efe2;      /* 珍珠白 */
  --s-mist: #a8b2c1;       /* 霧灰 */
  --s-ink: #1b1a22;        /* 墨黑 */
  /* 微明度分層：表面只比深海夜亮 1–3%，配髮絲線（規範 9.5） */
  --s-l1: #0a1727;
  --s-l2: #0e1c2e;
  --s-l3: #152539;
  --s-hair: rgba(246, 239, 226, .08);
  --s-hair-2: rgba(246, 239, 226, .16);
  --s-title: "Noto Serif TC", "Songti TC", serif;
  --s-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --s-display: "Big Shoulders Display", "Noto Sans TC", system-ui, sans-serif;
  color-scheme: dark;
}

/* ---------- 全站導覽列（每一頁最上方，不固定，往下捲會離開畫面） ---------- */
.site-strip { background: var(--s-night); border-bottom: 1px solid var(--s-hair); font-family: var(--s-sans); }
.site-strip-in { max-width: 1080px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)); height: 44px; display: flex; align-items: center; gap: 12px; }
.site-mark { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--s-pearl); flex: none; }
.site-mark img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--s-gold); display: block; }
.site-mark span { font-family: var(--s-title); font-weight: 900; font-size: 14px; letter-spacing: .06em; white-space: nowrap; }
.site-links { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.site-links::-webkit-scrollbar { display: none; }
.site-links a { flex: none; color: var(--s-mist); text-decoration: none; font-size: 13.5px; padding: 6px 8px; border-radius: 8px; white-space: nowrap; }
.site-links a:hover { color: var(--s-pearl); }
.site-links a[aria-current="page"] { color: var(--s-gold); font-weight: 700; background: var(--s-night-2); }
@media (max-width: 520px) { .site-mark span { display: none; } .site-links a { padding: 6px 7px; font-size: 13px; } }

/* ---------- 全站頁尾 ---------- */
.site-foot { border-top: 1px solid color-mix(in srgb, var(--s-gold) 22%, transparent); padding: 22px 16px 40px; font-size: 13px; color: var(--s-mist); text-align: center; line-height: 1.8; font-family: var(--s-sans); }
.site-foot a { color: var(--s-gold); }

/* ---------- 首頁、關於、常見問題（v2：獲獎水準改版，2026-10-26） ----------
   五個細節：
   1. 微明度分層：表面只比底色亮 1–3%（--s-l1／--s-l2），用髮絲線分界，不用粗邊框和色條。
   2. 暗色字重：深底上的白字視覺會變粗，內文用 350、標題用 700，金色大標維持 900。
   3. 水墨漸顯：標題逐字從高斯模糊浮現（ink.js），每組 ≤500ms。
   4. 等寬數字＋Grid 展開：數字放固定寬度格子；常見問題用 grid-template-rows 0fr→1fr 展開，不跳版。
   5. 兩種動效：拖曳、捲動乾脆不回彈；回饋提示（toast、按鈕）帶 Q 彈，提示 2.5 秒自動消失。 */
.pg { margin: 0; background: var(--s-night); color: var(--s-pearl); font-family: var(--s-sans); font-size: 16px; line-height: 1.8; font-weight: 350;
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.pg *, .pg *::before, .pg *::after { box-sizing: border-box; }
.pg :focus-visible { outline: 2px solid var(--s-gold); outline-offset: 3px; border-radius: 4px; }
.pg img { display: block; max-width: 100%; }
.pg :where(h1, h2, h3) { margin: 0; line-height: 1.25; font-family: var(--s-title); font-weight: 700; letter-spacing: .02em; text-wrap: balance; }
.pg :where(p) { margin: 0; text-wrap: pretty; }
.pg b, .pg strong { font-weight: 600; }
.keep { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.dg { display: inline-block; width: .52em; text-align: center; font-style: normal; }

/* 導覽列：這三頁固定在上方，毛玻璃 */
.pg .site-strip { position: sticky; top: 0; z-index: 40; background: rgba(6, 17, 31, .62); border-bottom: 1px solid var(--s-hair);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }

/* 版心：12 欄，最寬 1200 */
.pg-wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 900px) { .pg-wrap { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)); } }
.pg-main { padding-bottom: 0; }
.pg-band { padding-block: 72px; }
@media (min-width: 900px) { .pg-band { padding-block: 128px; } }
/* 金線：每一段的分隔線第一次出現時，從左畫出一條金線再退成髮絲線，延續開場劃過海平線的金線 */
.pg-band + .pg-band { position: relative; border-top: 1px solid var(--s-hair); }
.pg-band + .pg-band::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--s-gold); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
.pg-band.line-on::before { animation: goldline 1.4s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes goldline { 0% { transform: scaleX(0); opacity: 1; } 50% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* 字級 */
.pg-eyebrow { display: block; font-family: var(--s-display); font-weight: 800; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--s-gold); }
.pg-h2 { font-size: clamp(28px, 4.6vw, 48px); margin-top: 16px; }
.pg-lead { color: var(--s-mist); margin-top: 16px; max-width: 34em; }
.pg-statement { font-family: var(--s-title); font-weight: 700; font-size: clamp(36px, 6.4vw, 80px); line-height: 1.2; letter-spacing: .02em; max-width: 22em; text-wrap: balance; }
.pg-statement em { font-style: normal; color: var(--s-gold); }
.pg-sub { font-size: 17px; margin-top: 32px; max-width: 30em; }
.pg-muted { color: var(--s-mist); }
.pg-mock { display: inline-block; font-size: 12px; color: var(--s-mist); border: 1px dashed var(--s-hair-2); border-radius: 4px; padding: 0 8px; }
.pg-head { padding-block: 72px 48px; }
@media (min-width: 900px) { .pg-head { padding-block: 128px 72px; } }
.pg-head h1 { font-size: clamp(40px, 8vw, 88px); font-weight: 900; color: var(--s-gold); letter-spacing: .06em; margin-top: 16px; line-height: 1.15; }
.pg-head .pg-lead { margin-top: 24px; }
.pg-head + .pg-band, .pg-head + .pg-split { padding-top: 24px; border-top: 0; }
@media (min-width: 900px) { .pg-head + .pg-band { padding-top: 48px; } }
.pg-head .pg-lead { font-size: 17px; max-width: 36em; }

/* 左標題、右內容的兩欄 */
.pg-split { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .pg-split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 32px; }
  .pg-split > :first-child { grid-column: 1 / span 5; align-self: start; position: sticky; top: 96px; }
  .pg-split > :last-child { grid-column: 7 / span 6; }
  .pg-split .pg-h2 { font-size: clamp(28px, 3.2vw, 44px); }
}

/* 按鈕 */
.pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.pg-btn.gold { background: var(--s-gold); color: var(--s-ink); }
.pg-btn.gold:hover { background: var(--s-pearl); }
.pg-btn.ghost { border: 1px solid var(--s-hair-2); color: var(--s-pearl); }
.pg-btn.ghost:hover { border-color: var(--s-gold); color: var(--s-gold); }
.pg-btn .ar { transition: translate .2s; }
.pg-btn:hover .ar { translate: 3px 0; }

/* 兩站：微明度分層的大面板 */
.pg-stations { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 900px) { .pg-stations { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 72px; } }
.pg-station { position: relative; overflow: hidden; display: grid; gap: 24px; align-content: start; isolation: isolate; padding: 32px 24px; border-radius: 24px; background: var(--s-l1); border: 1px solid var(--s-hair); transition: background-color .3s; }
.pg-station:hover { background: var(--s-l2); }
@media (min-width: 900px) { .pg-station { padding: 48px 40px; } }
.pg-station .num { position: absolute; right: 20px; top: 12px; font-family: var(--s-display); font-weight: 900; font-size: clamp(88px, 9vw, 128px); line-height: 1; color: var(--s-l3); pointer-events: none; transition: color .3s; }
.pg-station:hover .num { color: color-mix(in srgb, var(--s-gold) 14%, var(--s-l2)); }
.pg-station > * { position: relative; }
.pg-station .num { position: absolute; z-index: -1; }
.pg-station .no { font-family: var(--s-display); font-weight: 800; font-size: 12px; letter-spacing: .3em; color: var(--s-gold); }
.pg-station h3 { font-size: clamp(24px, 2.6vw, 32px); max-width: calc(100% - 5rem); }
.pg-station .no { max-width: calc(100% - 5rem); }
@media (min-width: 900px) { .pg-station h3, .pg-station .no { max-width: calc(100% - 8.5rem); } }
.pg-station h3 small { display: block; font-family: var(--s-sans); font-weight: 350; font-size: 14px; color: var(--s-mist); letter-spacing: 0; margin-top: 8px; }
.pg-facts { display: grid; gap: 0; margin: 0; }
.pg-facts div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 16px; padding-block: 12px; border-top: 1px solid var(--s-hair); }
.pg-facts dt { font-size: 13px; color: var(--s-mist); padding-top: 2px; }
.pg-facts dd { margin: 0; font-size: 15px; }
.pg-station .acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* 晉級路線：長條寬度等於人數比例 */
.pg-route { list-style: none; margin: 0; padding: 0; display: grid; }
.pg-route li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 4px 16px; align-items: center; padding-block: 16px; border-top: 1px solid var(--s-hair); }
.pg-route li:last-child { border-bottom: 1px solid var(--s-hair); }
.pg-route .n { grid-row: span 2; font-family: var(--s-display); font-weight: 900; font-size: 40px; line-height: 1; color: var(--s-pearl); text-align: right; }
.pg-route .bar { height: 4px; border-radius: 2px; background: var(--s-l3); position: relative; margin-top: 8px; }
.pg-route .bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--n) / 70 * 100%); min-width: 4px; border-radius: 2px; background: var(--s-mist); transform-origin: left; }
/* 長條第一次捲到時從 0 長到人數比例（只播一次，乾脆不回彈） */
.pg-route.grow-wait .bar i { transform: scaleX(0); }
.pg-route.grow-on .bar i { animation: grow .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k, 0) * 50ms); }
@keyframes grow { from { transform: scaleX(0); } }
.pg-route li:hover .n { color: var(--s-gold); }
.pg-route .n { transition: color .2s; }
.pg-route .t { display: grid; gap: 2px; }
.pg-route .t b { font-weight: 600; }
.pg-route .t span { color: var(--s-mist); font-size: 14px; }
.pg-route .p1 .bar i { background: var(--s-red); }
.pg-route .p2 .bar i { background: #48a8ff; }
.pg-route .join .n, .pg-route .end .n { color: var(--s-gold); }
.pg-route .join .bar i, .pg-route .end .bar i { background: var(--s-gold); }
.pg-route .stage { grid-column: 2; font-family: var(--s-display); font-weight: 800; font-size: 11px; letter-spacing: .24em; color: var(--s-mist); }

/* 索引式連結列 */
.pg-index { display: grid; margin-top: 32px; }
.pg-index a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding-block: 24px; border-top: 1px solid var(--s-hair); text-decoration: none; color: inherit; }
.pg-index a:last-child { border-bottom: 1px solid var(--s-hair); }
.pg-index b { font-family: var(--s-title); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); transition: color .2s; }
.pg-index span { grid-column: 1; color: var(--s-mist); font-size: 14px; }
.pg-index .ar { grid-row: 1 / span 2; grid-column: 2; font-size: 24px; color: var(--s-gold); transition: translate .25s cubic-bezier(.2, .8, .2, 1); }
.pg-index a:hover b { color: var(--s-gold); }
.pg-index a:hover .ar { translate: 6px 0; }

/* 定義列（關於頁） */
.pg-dl { margin: 0; display: grid; }
.pg-dl > div { display: grid; gap: 4px; padding-block: 20px; border-top: 1px solid var(--s-hair); }
.pg-dl > div:last-child { border-bottom: 1px solid var(--s-hair); }
@media (min-width: 640px) { .pg-dl > div { grid-template-columns: 9em minmax(0, 1fr); gap: 24px; } }
.pg-dl dt { color: var(--s-gold); font-weight: 500; font-size: 14px; padding-top: 3px; }
.pg-dl dd { margin: 0; }
.pg-dl dd small { display: block; color: var(--s-mist); font-size: 14px; margin-top: 4px; }

.pg-cards { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 640px) { .pg-cards.c2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pg-cards.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1099px) { .pg-cards.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pg-cards.c5 { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } .pg-cards.c5::-webkit-scrollbar { display: none; } .pg-cards.c5 > * { scroll-snap-align: start; } }
.pg-card { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 16px; background: var(--s-l1); border: 1px solid var(--s-hair); }
.pg-card h3 { font-size: 20px; }
.pg-card p { color: var(--s-mist); font-size: 15px; }
.pg-card .meta { display: grid; gap: 2px; font-size: 14px; color: var(--s-mist); }
.pg-card .meta b { color: var(--s-pearl); font-weight: 500; }
.pg-card .k { font-family: var(--s-display); font-weight: 800; font-size: 11px; letter-spacing: .24em; color: var(--s-gold); }

.pg-note { margin-top: 24px; padding: 16px 20px; border-radius: 12px; background: var(--s-l1); border: 1px solid color-mix(in srgb, var(--s-gold) 28%, transparent); font-size: 15px; }
.pg-note b { color: var(--s-gold); font-weight: 600; }

/* 常見問題：Grid 展開 */
/* 常見問題側邊欄（10/26 依使用者側邊欄提示詞：內容、配色、捲動定位不變）
   - 圓角 16px 和全站面板 .pg-card 一致；面板內留 8px，選項不貼邊；標題、分組小標和選項文字同一條左緣（12px）
   - 圖示 14px，略小於 15px 字，圖文間 10px；每列 44px 高，好點又有呼吸
   - 同組選項間 2px，不同組之間 16px＋髮絲線
   - 手機（<900px）維持橫向膠囊列，標題和分組小標收起 */
.pg-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pg-cats-title, .pg-cats-label { display: none; }
.pg-cats-group { display: contents; }
.pg-cats a { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--s-pearl); text-decoration: none; padding: 8px 16px; border-radius: 999px; background: var(--s-l1); border: 1px solid var(--s-hair); transition: background-color .2s, border-color .2s, color .2s; }
.pg-cats .ic { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.pg-cats a:hover { background: var(--s-l2); border-color: var(--s-hair-2); }
.pg-cats a[aria-current="true"] { color: var(--s-gold); border-color: color-mix(in srgb, var(--s-gold) 45%, transparent); background: var(--s-l2); }
.pg-cats a[aria-current="true"] .ic { opacity: 1; }
@media (max-width: 899px) { .pg-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); } .pg-cats::-webkit-scrollbar { display: none; } .pg-cats a { flex: none; } }
@media (min-width: 900px) {
  .pg-cats { display: grid; gap: 16px; margin-top: 4px; padding: 8px; border-radius: 16px; background: var(--s-l1); border: 1px solid var(--s-hair); max-width: 280px; }
  .pg-cats .pre { display: none; }
  .pg-cats-title { display: block; padding: 8px 12px 0; font-family: var(--s-display); font-weight: 800; font-size: 12px; letter-spacing: .32em; color: var(--s-mist); }
  .pg-cats-group { display: grid; gap: 2px; }
  .pg-cats-group + .pg-cats-group { padding-top: 16px; border-top: 1px solid var(--s-hair); }
  .pg-cats-label { display: block; padding: 0 12px 6px; font-size: 12px; letter-spacing: .12em; color: var(--s-mist); }
  .pg-cats a { min-height: 44px; padding: 10px 12px; font-size: 15px; border-radius: 8px; background: transparent; border-color: transparent; }
  .pg-cats a:hover { background: var(--s-l2); border-color: transparent; }
  .pg-cats a[aria-current="true"] { background: var(--s-l2); border-color: color-mix(in srgb, var(--s-gold) 30%, transparent); }
}
.pg-faq-group + .pg-faq-group { margin-top: 72px; }
.pg-faq-group h2 { font-size: clamp(22px, 2.4vw, 28px); scroll-margin-top: 96px; }
.pg-faq { display: grid; margin-top: 16px; }
.pg-faq details { border-top: 1px solid var(--s-hair); }
.pg-faq details:last-child { border-bottom: 1px solid var(--s-hair); }
.pg-faq summary { cursor: pointer; padding: 20px 48px 20px 0; font-weight: 500; font-size: 17px; position: relative; list-style: none; transition: color .2s; }
.pg-faq summary:hover { color: var(--s-gold); }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::before, .pg-faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 1.5px; background: var(--s-gold); transition: rotate .25s cubic-bezier(.2, .8, .2, 1); }
.pg-faq summary::after { rotate: 90deg; }
.pg-faq details[open]:not(.closing) summary::after { rotate: 0deg; }
.pg-faq .a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s cubic-bezier(.2, .8, .2, 1); }
.pg-faq .a > div { overflow: hidden; min-height: 0; }
.pg-faq .a > div > :first-child { margin-top: 0; }
.pg-faq .a > div > :last-child { padding-bottom: 24px; }
.pg-faq details.opening .a, .pg-faq details.closing .a { grid-template-rows: 0fr; }
.pg-faq .a p { margin: 0 0 12px; color: var(--s-pearl); max-width: 40em; }
.pg-faq .a a { color: var(--s-gold); }
.pg-faq-tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--s-gold); margin-right: 8px; }

/* 水墨漸顯：逐字從模糊浮現（只在 ink.js 加上 .ink 時才有） */
.ink-ch { display: inline; }
.ink-on .ink-ch { animation: ink .34s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * var(--ink-step, 22ms)); }
.ink-wait .ink-ch { opacity: 0; filter: blur(8px); }
@keyframes ink { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }

/* 頁尾 */
.pg-foot { border-top: 1px solid var(--s-hair); padding-block: 72px 48px; background: var(--s-night); }
.pg-foot .mark { font-family: var(--s-title); font-weight: 900; font-size: clamp(56px, 12vw, 160px); line-height: 1; letter-spacing: .06em; color: var(--s-l3); }
.pg-foot .en { font-family: var(--s-display); font-weight: 800; letter-spacing: .32em; font-size: 12px; color: var(--s-mist); margin-top: 16px; }
.pg-foot .cols { display: grid; gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--s-hair); }
@media (min-width: 900px) { .pg-foot .cols { grid-template-columns: repeat(12, minmax(0, 1fr)); } .pg-foot .cols > :nth-child(1) { grid-column: span 4; } .pg-foot .cols > :nth-child(2) { grid-column: span 4; } .pg-foot .cols > :nth-child(3) { grid-column: span 4; } }
.pg-foot h4 { margin: 0 0 12px; font-family: var(--s-display); font-weight: 800; font-size: 11px; letter-spacing: .3em; color: var(--s-gold); }
.pg-foot nav { display: grid; gap: 8px; }
.pg-foot nav a { color: var(--s-pearl); text-decoration: none; font-size: 15px; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s; }
.pg-foot nav a:hover { background-size: 100% 1px; }
.pg-foot p { color: var(--s-mist); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .pg *, .pg *::before, .pg *::after { transition: none !important; animation: none !important; }
  .ink-wait .ink-ch { opacity: 1; filter: none; }
}

/* 五戰隊圖騰（關於頁，暫代線稿）：只有金線，設計公司定稿後換掉 symbol 即可 */
.pg-card .tot { display: block; width: 56px; height: 56px; margin-bottom: 20px; color: var(--s-gold); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ====== 形象片風格（10/26）：粒子、寬字距明體＋英文小副標、毛玻璃膠囊 ====== */
/* 懸浮粒子：蓋在畫面最上層但不擋點擊，用 screen 疊色只會變亮不會蓋字 */
.wi-dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; mix-blend-mode: screen; }
/* 標題：形象片的寬字距明體 */
.pg .pg-h2, .pg .pg-statement, .pg .pg-head h1 { letter-spacing: .1em; }
.pg .pg-statement { letter-spacing: .14em; }
/* 英文小副標：放在中文標題下面，寬字距金色 */
.pg .pg-eyebrow.under { display: block; margin-top: 10px; margin-bottom: 0; font-size: 12px; letter-spacing: .42em; color: var(--s-gold); }
/* 重點資訊：毛玻璃膠囊條（細節仍用卡片） */
.pg-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-pills > * { padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; letter-spacing: .12em; color: var(--s-pearl);
  background: rgba(246, 239, 226, .06); border: 1px solid rgba(246, 239, 226, .16); box-shadow: inset 0 1px 0 rgba(246, 239, 226, .1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* 標語段：形象片的句子，置中、寬字距 */
.pg-motto { text-align: center; display: grid; gap: 12px; justify-items: center; }
.pg-motto p { margin: 0; font-family: var(--s-title); font-weight: 900; font-size: clamp(26px, 5vw, 44px); line-height: 1.5; letter-spacing: .16em; color: var(--s-gold); text-wrap: balance; }
.pg-motto span { font-family: var(--s-display); font-weight: 800; font-size: 12px; letter-spacing: .42em; color: var(--s-mist); }
/* 形象片：直式影片，靜音自動播 */
.pg-film { display: grid; gap: 24px; justify-items: center; }
.pg-film video { width: min(100%, 400px); aspect-ratio: 9 / 16; height: auto; border-radius: 24px; border: 1px solid var(--s-hair-2); background: var(--s-l1); display: block; }
.pg-film .cap { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; color: var(--s-mist); font-size: 14px; }
.pg-film-copy { display: grid; gap: 16px; justify-items: center; text-align: center; min-width: 0; }
@media (min-width: 900px) { .pg-film { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 64px; } .pg-film-copy { justify-items: start; text-align: left; } .pg-film .cap { justify-content: flex-start; } }