/* =========================================================
   藝航文化促進會 ASCA · 設計系統 v2
   高保真原型 · 書面語 · 繁體中文 · 現代東方編輯感
   品牌色取自 Clear Water Modern Sailing Service Provision Logo.svg
   ========================================================= */

:root {
  /* 品牌色（Logo 原檔準確值） */
  --navy: #2C3892;
  /* 深海藝 */
  --blue: #3871C1;
  /* 帆藍   */
  --sky: #51ADE5;
  /* 天藍   */
  --grey: #918F8F;
  /* 浪花灰 */
  --ink: #16203A;
  /* 主文字 */
  --muted: #5B6275;
  /* 次文字 */
  --paper: #F5F7FB;
  /* 淺底   */
  --paper-2: #EEF2F9;
  --white: #FFFFFF;
  --line: rgba(44, 56, 146, .12);
  --line-strong: rgba(44, 56, 146, .22);

  /* 字體
     ⚠️ 襯線字體一律用 --font-display，呢度冇 --font-serif 呢個變數。
        曾經有 4 處（帆上文字 / 歷程年份 / 聯絡標題 / 法律小標題）寫成 var(--font-serif)，
        而該變數從未定義 → 整個 font-family 宣告 invalid at computed-value time →
        元素靜默跌落繼承（即 body 嘅無襯線體），冇任何錯誤訊息，睇落仲「好似正常」。
        加新字體變數時請一併 grep `var(--` 確認用得嘅都真係有定義。 */
  --font-display: "Noto Serif SC", Georgia, "Songti SC", "STSong", serif;
  --font-body: "Noto Sans SC", "PingFang HK", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* 形狀與陰影 */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow: 0 20px 48px -22px rgba(28, 40, 90, .40);
  --shadow-sm: 0 10px 28px -14px rgba(28, 40, 90, .30);
  --shadow-card: 0 14px 36px -18px rgba(28, 40, 90, .28);

  --maxw: 1200px;
  --gap: clamp(20px, 4vw, 40px);
  --nav-h: 72px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none
}

ul {
  list-style: none
}

/* CJK 不套 Latin 優化（用戶規範）
   覆寫值必須為 wrap；auto 不是有效的 text-wrap 值，會被靜默丟棄，
   balance / pretty 仍會對中文生效，造成詞組被切開。 */
:lang(zh) .text-balance,
:lang(zh) .text-pretty {
  text-wrap: wrap
}

.text-balance {
  text-wrap: balance
}

.text-pretty {
  text-wrap: pretty
}

/* ---------- 容器 ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px)
}

.section {
  padding: clamp(64px, 9vw, 120px) 0
}

.section--tight {
  padding: clamp(48px, 6vw, 80px) 0
}

.bg-paper {
  background: var(--paper)
}

.bg-navy {
  background: var(--navy);
  color: var(--white)
}

.bg-navy .eyebrow {
  color: var(--sky)
}

/* ---------- 字型層級 ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.28;
  color: var(--ink);
  letter-spacing: .01em
}

.display {
  font-size: clamp(34px, 5.4vw, 60px);
  font-weight: 700
}

.h2 {
  font-size: clamp(26px, 3.6vw, 40px)
}

.h3 {
  font-size: clamp(20px, 2.4vw, 26px)
}

.lead {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--muted);
  line-height: 1.85
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}

.eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, var(--sky), var(--blue));
  border-radius: 2px
}

.bg-navy .eyebrow::before {
  background: linear-gradient(90deg, var(--sky), #fff)
}

/* ---------- 按鈕 ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}

.btn--primary {
  background: linear-gradient(120deg, var(--blue), var(--sky));
  color: #fff;
  box-shadow: var(--shadow-sm)
}

.btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow)
}

.btn--primary:hover::after {
  left: 130%
}

.btn--ghost {
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
  background: rgba(255, 255, 255, .6)
}

.btn--ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px)
}

.btn--light {
  background: #fff;
  color: var(--navy)
}

.btn--light:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm)
}

.btn--outline {
  border: 1.5px solid rgba(255, 255, 255, .7);
  color: #fff;
  background: transparent
}

.btn--outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
  transform: translateY(-2px)
}

.btn .arrow {
  transition: transform .25s ease
}

.btn:hover .arrow {
  transform: translateX(4px)
}

/* ---------- 頂部導航 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  backdrop-filter: saturate(150%) blur(14px);
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 100%
}

/* 品牌名可收縮 + 截斷：英文全名（Art Sailing Culture Association）比中文長得多，
   舊版冇 nowrap / min-width:0 會被壓成兩行，令整條 header 走位。 */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  letter-spacing: 0;
  white-space: nowrap
}

.nav__brand-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.nav__brand .mark {
  width: 34px;
  height: 38px;
  flex: none
}

/* 頂列右側一整組：nav 連結 ＋ CTA ＋ 語言切換。
   桌面＝橫排；≤1180px 收合時整組變成下拉選單（見下方 breakpoint），
   所以語言掣唔會再被 space-between 推去中間。 */
.nav__panel {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  min-width: 0
}

.nav__extra {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  white-space: nowrap
}

.nav__links a {
  padding: 8px 11px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}

.nav__links a:hover {
  background: var(--paper-2);
  color: var(--blue)
}

.nav__links a.is-active {
  background: var(--navy);
  color: #fff
}

.nav__cta {
  flex: 0 0 auto;
  padding: 10px 18px;
  font-size: 14px;
  white-space: nowrap
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  align-items: center;
  justify-content: center
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  position: relative
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform .25s ease
}

.nav__toggle span::before {
  top: -7px
}

.nav__toggle span::after {
  top: 7px
}

/* 導覽列收合斷點：1180px（原本只有 760px，太低）。
   英文版導覽列（品牌全名 + 英文選單 + CTA）實測需要 ~1294px，已超過 --maxw 1200px 容器，
   所以 1180px 以下一律收合成漢堡選單 —— 任何寬度都唔會爆版 / 換行走位。 */
@media (max-width: 1180px) {

  /* 收合時：整組（連結＋CTA＋語言）隱藏，淨低品牌 ＋ 漢堡掣。
     頂列只有兩個 flex 子元素 → space-between 唔會再搵個「中間」位擺語言掣。 */
  .nav__panel {
    display: none
  }

  .nav__toggle {
    display: flex
  }

  /* 展開時：.nav__panel 變下拉選單（絕對定位喺 header 之下、全寬） */
  .nav.open .nav__panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 14px;
    box-shadow: var(--shadow);
  }

  .nav.open .nav__links {
    display: flex;
    flex-direction: column;
    gap: 4px
  }

  .nav.open .nav__links a {
    width: 100%;
    padding: 12px 14px
  }

  /* CTA ＋ 語言切換：放喺選單底部，用分隔線同導覽連結分開 */
  .nav.open .nav__extra {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line)
  }

  .nav.open .nav__cta {
    justify-content: center;
    margin: 0;
    padding: 12px 18px
  }

  .nav.open .lang-switch {
    justify-content: center
  }
}

/* 桌面（≥1181px）：品牌靠左、導覽連結置中、CTA＋語言靠右。
   .nav__panel 食晒剩餘空間，.nav__links 用左右 auto margin 吸收多出嚟嘅位 → 連結置中。
   未改之前係「品牌 ＋ （連結＋CTA＋語言）一舊啤埋右邊」：中文品牌名只得 163px 闊，
   1440 下連結中心偏離版面中心 173px、品牌同連結之間空 386px（用戶原話「側埋咗一邊」）。
   ⚠️ 唔好用「左右兩區 flex:1 1 0 對稱」去做真·版面置中：英文品牌名 310px，
      對稱後 1440 下品牌同連結只淨 3.5px，1181px 起仲會 cut 個名出省略號。 */
@media (min-width: 1181px) {
  .nav__panel {
    flex: 1 1 auto;
    min-width: 0
  }

  .nav__links {
    margin-left: auto;
    margin-right: auto
  }
}

/* 窄螢幕：英文全名（32 字）會唔夠位而變「Art Sailing Culture Associ…」，
   索性只留標誌（認得嘅品牌符號），免得顯示半截名。中文名短，唔受影響。 */
@media (max-width: 560px) {
  html:lang(en) .nav__brand-text {
    display: none
  }
}

/* 更窄：品牌名收細一級，確保中文名唔會被省略號截斷 */
@media (max-width: 420px) {
  .nav__brand {
    font-size: 15px;
    gap: 8px
  }
}

/* ---------- Hero ---------- */
/* ---------- 首屏容器：Hero + 重點，自動適應屏幕高度 ---------- */
.hero-screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-h))
}

@supports (height:100svh) {
  .hero-screen {
    min-height: calc(100svh - var(--nav-h))
  }
}

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1B2566 0%, var(--navy) 45%, #33409E 100%);
  color: #fff;
  flex: 1 1 auto;
  display: flex;
  align-items: center
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .9
}

.hero__glow {
  position: absolute;
  width: 55vw;
  height: 55vw;
  right: -8vw;
  top: -18vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(81, 173, 229, .32), transparent 60%);
  filter: blur(20px)
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  padding-top: clamp(64px, 8vw, 104px);
  padding-bottom: clamp(40px, 5vw, 64px);
  padding-left: clamp(20px, 5vw, 72px);
  padding-right: clamp(20px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  /* 上移量跟白色數據欄高度掛鈎：flex 已將內容置中喺「藍色區」（= 整個 hero 正中 − 半個白色欄），
     故額外 transform 只需再減半個白色欄，最終 = 整個 hero 正中 − 白色欄高度。
     --strip-h 由 main.js 量度 .impact-strip 實際高度並寫入，responsive 自動跟。 */
  transform: translateY(calc(var(--strip-h, 144px) * -0.5))
}

.hero .eyebrow {
  color: var(--sky)
}

.hero .eyebrow::before {
  background: linear-gradient(90deg, var(--sky), #fff)
}

.hero__content {
  max-width: 36rem
}

.hero__title {
  color: #fff;
  font-size: clamp(40px, 6.2vw, 68px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: .01em;
  margin-top: 14px
}

.hero__sub {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.6vw, 30px);
  font-weight: 500;
  color: var(--sky);
  margin-top: 12px;
  letter-spacing: .04em
}

.hero__lead {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.85;
  color: rgba(255, 255, 255, .88);
  margin-top: 20px;
  max-width: 40ch
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px
}

.hero__visual {
  position: relative
}

.hero__photo {
  position: relative;
  aspect-ratio: 16/10;
  width: 100%;
  max-width: 740px;
  margin-left: auto;
  z-index: 1;
  border-radius: 90px 24px 90px 24px;
  background: linear-gradient(160deg, rgba(81, 173, 229, .45), rgba(44, 56, 146, .6));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 三層柔和擴散陰影：緊貼接觸影 + 中段 + 大範圍深藍調柔影，令卡片懸浮於深藍背景 */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .22),
    0 16px 34px rgba(0, 0, 0, .30),
    0 48px 96px rgba(6, 12, 38, .58),
    inset 0 0 0 1px rgba(255, 255, 255, .32)
}

/* 頂部玻璃高光：模擬光線由上而下打落，帶出卡片厚度 */
.hero__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .05) 13%, transparent 34%)
}

.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .14), transparent 62%)
}

.hero__photo-tag {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 12px;
  letter-spacing: .08em;
  color: #fff;
  background: rgba(20, 28, 70, .5);
  border: 1px solid rgba(255, 255, 255, .3);
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: blur(4px)
}

/* 巨型透明帆：置於照片背後，照片遮蓋中央，帆緣若隱若現（輕擺如微風） */
.hero__sail-bg {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 150%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: .13;
  filter: drop-shadow(0 18px 46px rgba(81, 173, 229, .4));
  pointer-events: none;
  animation: sailDrift 9s ease-in-out infinite
}

@keyframes sailDrift {

  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-4deg)
  }

  50% {
    transform: translate(-50%, -50%) rotate(4deg)
  }
}

/* 波浪：以單週期 sine tile 作 background-repeat 平鋪，background-position 平移恰好一個 tile 寬度即為真正無縫循環，杜絕輪播穿崩 */
.wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(36px, 4.5vw, 56px);
  z-index: 1;
  background-repeat: repeat-x;
  background-position: 0 bottom;
  will-change: background-position
}

.wave--back {
  opacity: .5;
  background-image: url(../img/wave-back.svg);
  background-size: 360px 100%;
  animation: waveScrollBack 18s linear infinite
}

.wave--front {
  opacity: .68;
  background-image: url(../img/wave-front.svg);
  background-size: 240px 100%;
  animation: waveScrollFront 8s linear infinite;
  animation-direction: reverse;
  animation-delay: -4s
}

@keyframes waveScrollBack {
  from {
    background-position-x: 0
  }

  to {
    background-position-x: 360px
  }
}

@keyframes waveScrollFront {
  from {
    background-position-x: 0
  }

  to {
    background-position-x: 240px
  }
}

/* ---------- Impact Strip ---------- */
.impact-strip {
  position: relative;
  z-index: 3;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px rgba(20, 28, 70, .08)
}

.impact-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 22px 0;
  flex-wrap: wrap
}

.impact-item {
  display: flex;
  align-items: baseline;
  gap: 10px
}

.impact-item b {
  font-family: var(--font-en);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1
}

.impact-item span {
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap
}

.impact-sep {
  width: 1px;
  height: 26px;
  background: var(--line)
}

@media(max-width:760px) {
  .impact-sep {
    display: none
  }

  .impact-strip__inner {
    gap: 14px 22px
  }

  .impact-item {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center
  }

  /* 手機版唔推高：按自然置中（flex 已置中喺藍色區），唔加白色欄高度嘅 transform */
  .hero__inner {
    transform: none
  }
}

@media(max-width:920px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center
  }

  .hero__photo {
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 16/10
  }

  .hero__content {
    max-width: none
  }

  .hero__lead {
    margin-left: auto;
    margin-right: auto
  }

  .hero__actions {
    justify-content: center
  }
}

@media(max-width:520px) {
  .hero__title {
    font-size: clamp(34px, 9vw, 46px)
  }

  .logos--4 {
    grid-template-columns: repeat(2, 1fr)
  }

  .partner-group__title {
    margin-bottom: 14px
  }

  .logo-cell {
    height: 96px
  }

  .logo-cell--img img {
    max-height: 72px
  }
}

/* 矮屏幕（例如筆電橫置）：收細 hero 內距與圖片，確保首屏完整顯示 */
@media (max-height:720px) and (min-width:921px) {
  .hero__inner {
    padding-top: clamp(34px, 5vh, 54px);
    padding-bottom: clamp(26px, 4vh, 42px);
    gap: clamp(28px, 4vw, 56px)
  }

  .hero__title {
    font-size: clamp(34px, 4.4vw, 52px)
  }

  .hero__lead {
    margin-top: 14px;
    font-size: clamp(14px, 1.3vw, 16px)
  }

  .hero__actions {
    margin-top: 22px
  }

  .hero__photo {
    max-width: 480px
  }
}

/* ---------- 數據條 ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden
}

.stat {
  background: #fff;
  padding: 30px 26px;
  text-align: center
}

.stat__num {
  font-family: var(--font-en);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1
}

.stat__label {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted)
}

.stats--3 {
  grid-template-columns: repeat(3, 1fr)
}

@media(max-width:760px) {
  .stats--3 {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* ≤460px 單欄：要寫成 .stats.stats--3（特異性 0,2,0）先至贏到下面「響應式」區
   嗰條 .stats{repeat(2,1fr)}（0,1,0）—— 舊版寫 .stats--3 被覆寫，1 欄根本冇生效。 */
@media(max-width:460px) {
  .stats.stats--3 {
    grid-template-columns: 1fr
  }
}

/* 數據條「窿」修復：窄屏轉 2 欄後，如果數據總數係單數（例如工作與活動頁嘅 3 個），
   最後一行會淨低一格空位，露出 .stats 嘅底色（淺藍灰）＝睇落一個窿。
   做法：最後一個數據若身處單數位（即總數係單數）就跨晒全部欄填滿嗰行。
   .stats > .stat:last-child:nth-child(odd) 特異性 0,3,0，高過 .stats／.stats--3，唔受順序影響。
   雙數（例如首頁 6 個）唔會觸發，維持 2×3 正常排。 */
@media(max-width:980px) {
  .stats > .stat:last-child:nth-child(odd) {
    grid-column: 1 / -1
  }
}

/* ---------- 區塊標題 ---------- */
.sec-head {
  max-width: 62ch;
  margin-bottom: clamp(36px, 5vw, 56px)
}

.sec-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

.sec-head--center .eyebrow {
  justify-content: center
}

/* ---------- 卡片 ---------- */
.grid {
  display: grid;
  gap: var(--gap)
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr)
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr)
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: var(--line-strong)
}

.card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(81, 173, 229, .18), rgba(56, 113, 193, .18));
  margin-bottom: 18px
}

.card__icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--blue)
}

.card h3 {
  margin-bottom: 10px
}

.card p {
  color: var(--muted);
  font-size: 15px
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--blue);
  font-weight: 600;
  font-size: 14px
}

.card__link .arrow {
  transition: transform .25s ease
}

.card:hover .card__link .arrow {
  transform: translateX(4px)
}

/* 平台卡（首頁/工作頁） */
.platform {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #fff, var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column
}

.platform::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(81, 173, 229, .16), transparent 70%)
}

.platform__no {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--sky)
}

.platform h3 {
  font-size: 24px;
  margin: 8px 0 14px;
  color: var(--navy)
}

.platform p {
  color: var(--muted);
  font-size: 15px;
  flex: 1
}

.platform__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0
}

.tag {
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(44, 56, 146, .07);
  color: var(--navy);
  font-weight: 500
}

/* 篩選標籤（最新消息頁）：可點擊按鈕 + 選中狀態 */
.tag--btn {
  border: 0;
  font-family: inherit;
  font-size: 12.5px;
  line-height: inherit;
  cursor: pointer;
  transition: background .2s, color .2s
}

.tag--btn:hover {
  background: rgba(44, 56, 146, .16)
}

.tag.is-active {
  background: var(--navy);
  color: #fff
}

.tag.is-active:hover {
  background: var(--navy)
}

/* ---------- 首頁三大平臺：scroll-pin 卡片替換 ---------- */
/* 預設（安全 / 無 JS / 減動偏好）：正常三欄網格，三張卡全部可見、可點 */
.platforms__track {}

.platforms__stage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap)
}

.platforms__rail {
  display: none
}

/* 啟用 pinned：main.js 加上 .is-pinned 後才生效
   滾到該區 sticky 住，持續滾動依次替換卡片，看畢三張才解開繼續落去 */
.platforms.is-pinned .platforms__track {
  position: relative;
  height: 300vh
}

.platforms.is-pinned .platforms__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vh, 28px);
  padding: clamp(18px, 4vh, 36px) 0
}

.platforms.is-pinned .platforms__stage {
  position: relative;
  width: min(680px, 92vw);
  height: min(48vh, 370px)
}

.platforms.is-pinned .platform--stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(30px) scale(.985);
  transition: opacity .55s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none
}

.platforms.is-pinned .platform--stage.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto
}

.platforms.is-pinned .platform {
  padding: clamp(24px, 4vh, 36px)
}

/* 單卡模式：描述貼內容自然高度，連結固定貼底，避免中間留大空位 */
.platforms.is-pinned .platform--stage p {
  flex: 0 0 auto
}

.platforms.is-pinned .platform--stage .card__link {
  margin-top: auto
}

.platforms.is-pinned .platforms__rail {
  display: flex;
  gap: 10px;
  justify-content: center
}

.platforms__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: width .35s ease, background .35s ease
}

.platforms__dot.is-on {
  width: 26px;
  background: var(--navy)
}

/* 減動偏好：即使 JS 誤加 .is-pinned，也還原為正常三欄網格 */
@media (prefers-reduced-motion: reduce) {
  .platforms.is-pinned .platforms__track {
    height: auto
  }

  .platforms.is-pinned .platforms__sticky {
    position: static;
    height: auto;
    display: block;
    padding: 0
  }

  .platforms.is-pinned .platforms__stage {
    position: static;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap)
  }

  .platforms.is-pinned .platform--stage {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto
  }

  .platforms.is-pinned .platforms__rail {
    display: none
  }
}

/* 窄屏：安全網格改單欄 */
@media (max-width: 760px) {
  .platforms__stage {
    grid-template-columns: 1fr
  }

  .platforms.is-pinned .platforms__sticky {
    height: 100svh
  }
}

/* 工作與活動頁：三大平臺 scroll-pin（沿用 .platforms.is-pinned 通用機制，
   面板用 .platform-panel、指示器用 .pill，故補呢段 pinned 單卡模式） */
.platforms.is-pinned .platform-stage {
  position: relative;
  width: 100%;
  height: min(80vh, 660px);
  margin: 0 auto
}

.platforms.is-pinned .platform-panel {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: translateY(26px) scale(.99);
  transition: opacity .55s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
  animation: none;
  min-height: 0
}

.platforms.is-pinned .platform-panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto
}

/* 指示器：Pill 轉做進度點，跟住滾動高亮（is-on 由 JS toggle） */
.platforms.is-pinned .pill.is-on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 10px 22px rgba(44, 56, 146, .28)
}

.platforms.is-pinned .pill.is-on .pill__no {
  opacity: .8
}

/* 減動偏好：即使 JS 誤加 .is-pinned，三大平臺回復正常單卡堆疊（全部可見） */
@media (prefers-reduced-motion: reduce) {
  .platforms.is-pinned .platform-stage {
    position: static;
    width: auto;
    height: auto;
    margin: 0
  }

  .platforms.is-pinned .platform-panel {
    position: static;
    inset: auto;
    display: block;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    animation: none;
    margin-bottom: var(--gap)
  }

  .platforms.is-pinned .platform-panel:last-child {
    margin-bottom: 0
  }
}

/* 手機／平板（≤860px）唔做 scroll-pin，改為三塊面板正常堆疊、全部睇到。
   實測原因：390px 下面板內容高 ~893px，但釘住嘅框只得 min(80vh,660px)=660px，
   而面板係 overflow:hidden → 底部 ~230px（即最後一兩個「站點」）直接被裁走。
   呢段係 CSS 安全網——JS 亦會喺 ≤860px 移除 .is-pinned，
   就算 JS 未跑到／失效，窄屏都唔會出現內容被裁。 */
@media (max-width: 860px) {

  .platforms.is-pinned .platforms__track {
    height: auto
  }

  .platforms.is-pinned .platforms__sticky {
    position: static;
    height: auto;
    display: block;
    padding: 0
  }

  .platforms.is-pinned .platform-stage {
    position: static;
    width: auto;
    height: auto;
    margin: 0
  }

  .platforms.is-pinned .platform-panel {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    animation: none
  }

  /* 三個平臺已經全部顯示，01/02/03 捲動指示器（pinned 模式先有意義）就收起。
     要寫 .platforms .platform-tabs（0,2,0）——下面 .platform-tabs{display:flex}
     喺檔案較後位置，同特異性會蓋過呢度。 */
  .platforms .platform-tabs {
    display: none
  }

  /* 堆疊模式下面板之間要有間距。
     ⚠️ 唔可以寫喺 media query 外：pinned 模式下面板係 position:absolute + inset:0，
        margin-top 會令佢頂部落 40px、底部維持 0 → 個框由 660 縮到 620（實測），
        panel 之間高低唔一致。所以只喺窄屏堆疊模式先用。 */
  .platform-panel + .platform-panel {
    margin-top: var(--gap)
  }
}

/* ---------- 最新消息：搜尋 + 結果計數 + 分頁 ---------- */
/* 無障礙：視覺上隱藏，但仍供讀屏讀取（搜尋框的 label 用） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.news-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px
}

.news-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 420px
}

.news-search__icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--muted);
  pointer-events: none
}

.news-search input {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 42px
}

.news-search input::placeholder {
  color: var(--muted)
}

.news-search input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(56, 113, 193, .16)
}

/* 清除鈕：只有輸入了內容才出現（由 JS 切換 hidden） */
.news-search__clear {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(44, 56, 146, .08);
  color: var(--navy);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s
}

.news-search__clear:hover {
  background: rgba(44, 56, 146, .18)
}

.news-search__clear[hidden] {
  display: none
}

.news-count {
  margin: 0;
  font-size: 13px;
  color: var(--muted)
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 38px 0 0
}

.pager[hidden] {
  display: none
}

.pager__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .2s, border-color .2s
}

.pager__btn:hover:not(:disabled) {
  border-color: var(--blue);
  background: rgba(56, 113, 193, .08)
}

.pager__btn:disabled {
  opacity: .4;
  cursor: not-allowed
}

.pager__num {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s, color .2s
}

.pager__num:hover {
  background: rgba(44, 56, 146, .1)
}

.pager__num.is-active {
  background: var(--navy);
  color: #fff
}

.pager__num.is-active:hover {
  background: var(--navy)
}

.pager__gap {
  padding: 0 2px;
  font-size: 13.5px;
  color: var(--muted)
}

@media (max-width: 560px) {
  .news-search {
    flex-basis: 100%;
    max-width: none
  }

  .pager__btn {
    padding: 9px 13px;
    font-size: 13px
  }
}

/* ---------- 航行航線軸 · 平臺要點 ---------- */
.route__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 30px 0 4px
}

.route__wave {
  width: 42px;
  height: 9px;
  color: var(--sky);
  flex: none
}

.route__head span {
  font: 600 13px/1 var(--font-body);
  letter-spacing: .14em;
  color: var(--navy)
}

.route {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  position: relative
}

.route::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sky) 0%, var(--blue) 52%, var(--navy) 100%)
}

.route__stop {
  position: relative;
  padding: 0 0 22px 56px
}

.route__stop:last-child {
  padding-bottom: 0
}

.route__node {
  position: absolute;
  left: 0;
  top: -2px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 14px/1 "Inter", var(--font-body);
  color: #fff;
  background: var(--navy);
  box-shadow: 0 0 0 4px var(--white), 0 6px 16px rgba(44, 56, 146, .3);
  z-index: 1
}

.route__body {
  padding-top: 2px
}

.route__title {
  margin: 0;
  font: 700 17px/1.45 var(--font-display);
  color: var(--navy)
}

.route__desc {
  margin: 5px 0 0;
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--muted)
}

@media (max-width: 600px) {
  .route__stop {
    padding-left: 50px;
    padding-bottom: 18px
  }

  .route__node {
    width: 36px;
    height: 36px;
    font-size: 13px
  }

  .route::before {
    left: 17px
  }

  .route__title {
    font-size: 16px
  }

  .route__desc {
    font-size: 14px
  }
}

/* ---------- 平臺 Pill Tab + 融合底圖 ---------- */
.platform-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 6px 0 26px
}

.pill {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--navy);
  font: 600 14.5px/1 var(--font-body);
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease
}

.pill:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.pill__no {
  font: 700 12px/1 "Inter", var(--font-body);
  opacity: .65
}

.pill.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 10px 22px rgba(44, 56, 146, .28)
}

.pill.is-active .pill__no {
  opacity: .8
}

.pill:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px
}

.platform-stage {
  position: relative
}

.platform-panel {
  --pad: clamp(28px, 4vw, 48px);
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  overflow: hidden;
  min-height: 360px
}

/* 面板顯示由 .platform-panel（全部可見的預設堆疊）控制；pinned 模式見下方 .platforms.is-pinned 規則 */

.platform-panel__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  background-size: cover;
  background-position: center 28%;
  opacity: .65;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 58%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 58%);
  transition: opacity .6s ease
}

.platform-panel__body {
  position: relative;
  z-index: 1;
  max-width: 60%
}

@media (max-width: 820px) {
  .platform-panel {
    min-height: 0
  }

  .platform-panel__media {
    position: static;
    width: auto;
    height: 200px;
    opacity: .65;
    margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 22px;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
    mask-image: linear-gradient(180deg, #000 62%, transparent)
  }

  .platform-panel__body {
    max-width: 100%
  }
}

/* ---------- 新聞/活動卡 ---------- */
.post {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column
}

.post:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card)
}

/* 成張卡片變成連結（包住 media + body） */
.post__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit
}

.post__link:hover .post__title {
  color: var(--blue)
}

.post__media {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--blue), var(--sky));
  position: relative;
  overflow: hidden
}

.post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* 無封面圖時嘅預設佔位：品牌漸層底 + 居中線條圖標 */
.post__media__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .55)
}

.post__media__ph svg {
  width: 46px;
  height: 46px
}

.post__cat {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px
}

.post__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.post__date {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--grey);
  font-weight: 600;
  letter-spacing: .04em
}

.post__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  margin: 8px 0 10px;
  line-height: 1.4;
  color: var(--ink)
}

.post__excerpt {
  color: var(--muted);
  font-size: 14.5px;
  flex: 1
}

.post__more {
  margin-top: 16px;
  color: var(--blue);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  gap: 6px;
  align-items: center
}

/* ---------- 空狀態 ---------- */
.empty {
  text-align: center;
  padding: clamp(48px, 7vw, 80px) 24px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--muted);
}

.empty__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  opacity: .7
}

.empty h3 {
  color: var(--ink);
  font-size: 20px;
  margin-bottom: 8px
}

.empty p {
  max-width: 46ch;
  margin: 0 auto;
  font-size: 15px
}

/* ---------- 文章詳情頁（最新消息 / 活動） ---------- */
.article {
  padding-bottom: clamp(48px, 7vw, 88px)
}

.article__inner {
  max-width: 760px
}

.article__head {
  margin: 8px 0 28px
}

.article__head .post__cat {
  position: static;
  display: inline-block;
  margin-bottom: 16px
}

.article__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink)
}

.article__date {
  display: block;
  margin-top: 14px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--grey)
}

.article__cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: var(--shadow-card)
}

.article__cover img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block
}

.prose {
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink);
  /* 跟文章容器（.article__inner = 760px）同寬，令正文單圖／圖組同上方封面
     左右邊緣對齊，唔會比封面窄一截又偏側。margin:auto 係安全網，
     萬一之後改窄 max-width 都會自動居中。 */
  max-width: 100%;
  margin-left: auto;
  margin-right: auto
}

.prose p {
  margin: 0 0 1.3em
}

.prose p:last-child {
  margin-bottom: 0
}

.article__signup {
  margin-top: 32px
}

.article__back {
  display: inline-block;
  margin-top: 40px;
  font-weight: 600;
  color: var(--navy);
  font-size: 15px
}

.article__back:hover {
  color: var(--blue)
}

/* 封面 / 縮圖統一 object-fit 裁切，避免上傳任意比例圖被拉扯變形（public 站 post 卡 + 詳情封面） */
.post__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 文章詳情正文圖：單張保留原比例（唔裁切內容），限制最大寬度避免撐爆 */
.article__fig {
  margin: 1.3em 0;
}

.article__fig img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}

.article__figcap {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

/* 正文小標題：為下面的段落／圖組分段命名（例：簡介會、總結分享會、同學實習剪影） */
.article__subhead {
  margin: 2.2em 0 0.7em;
  padding-left: 12px;
  border-left: 3px solid var(--blue);
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 21px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
}

.article__subhead:first-child {
  margin-top: 0;
}

/* 圖組：兩欄 grid，縮圖統一 4:3 裁切，唔會因圖比例唔同而高低參差 */
.article__group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 1.3em 0;
}

.article__fig--group img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* 文末相集：自動填滿 grid，縮圖統一 4:3 裁切 */
.article__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.article__gitem {
  margin: 0;
}

.article__gitem img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* 灯箱觸發掣：成個縮圖可點，唔只係圖本身 */
.lb-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ---------- 文章燈箱（點擊正文／相集圖放大） ---------- */
/* 根因修復：原本 .lb 完全無 CSS → 燈箱以未定位 inline 塊渲染喺 body 尾，
   同時 body overflow 鎖死滾動，用家喺當前閱讀位乜都見唔到又滾唔動，
   感知即「網頁卡了」。補返固定全屏遮罩 + 預設隱藏 + 圖約束視口。 */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vmin;
  background: rgba(12, 22, 54, .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease
}

.lb.is-open {
  display: flex;
  opacity: 1
}

.lb__stage {
  margin: 0;
  max-width: min(92vw, 1000px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center
}

.lb__img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  background: #fff
}

.lb__cap {
  color: #fff;
  font-size: 14px;
  text-align: center;
  letter-spacing: .02em;
  max-width: 100%
}

.lb__close,
.lb__nav {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1
}

.lb__close {
  top: 16px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 22px
}

.lb__close:hover {
  background: rgba(255, 255, 255, .28)
}

.lb__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 30px
}

.lb__nav--prev {
  left: 18px
}

.lb__nav--next {
  right: 18px
}

.lb__nav:hover {
  background: rgba(255, 255, 255, .28)
}

@media (prefers-reduced-motion: reduce) {
  .lb {
    transition: none
  }
}

/* ---------- 時間線（里程碑） ---------- */
.timeline {
  display: grid;
  gap: 0;
  border-left: 2px solid var(--line);
  margin-left: 8px
}

.tl-item {
  padding: 0 0 34px 28px;
  position: relative
}

.tl-item::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sky);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--sky)
}

.tl-year {
  font-family: var(--font-en);
  font-weight: 800;
  color: var(--navy);
  font-size: 20px
}

.tl-text {
  color: var(--muted);
  font-size: 15px;
  margin-top: 2px
}

/* ---------- 引言 / 會長的話 ---------- */
.quote {
  position: relative;
  background: linear-gradient(160deg, var(--navy), #33409E);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 60px);
  overflow: hidden
}

.quote::before {
  content: "\201C";
  position: absolute;
  right: 24px;
  top: -10px;
  font-family: var(--font-display);
  font-size: 180px;
  color: rgba(255, 255, 255, .08);
  line-height: 1
}

.quote__text {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.7;
  font-weight: 500;
  position: relative;
  z-index: 1
}

.quote__by {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1
}

.quote__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky), var(--blue));
  object-fit: cover;
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  font-size: 20px
}

.quote__name {
  font-weight: 700;
  font-size: 16px
}

.quote__role {
  font-size: 13px;
  color: rgba(255, 255, 255, .72)
}

/* ---------- 管理層 ---------- */
.leader {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff
}

.leader__av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky), var(--blue));
  flex: none;
  display: grid;
  place-items: center;
  color: #fff
}

.leader__av svg {
  width: 22px;
  height: 22px;
  display: block
}

.leader__name {
  font-weight: 700;
  font-size: 16px
}

.leader__role {
  font-size: 13.5px;
  color: var(--muted)
}

/* 焦點計劃：副標題（主標 h2 太長，拆開更易讀、唔霸行） */
.featured-sub {
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 600;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.5
}

/* 只用喺焦點計劃板塊：比全站容器闊 80px、左右 padding 32→28，
   令呢一格「可用空間」更大（1440 螢幕：1136 → 1224，每邊少 44px 空白）。
   全站 --maxw 保持 1200 不變——其他板塊唔受影響。
   ⚠️ 副作用：此板塊左右邊會比其他板塊突出 ~44px（刻意嘅「焦點」處理）。 */
.featured-section .container {
  max-width: 1280px;
  padding-left: clamp(18px, 4vw, 28px);
  padding-right: clamp(18px, 4vw, 28px)
}

/* 焦點計劃：內容排三塊（頭段／輪播／尾段），用 grid-areas 控制位置。
   桌面 = 兩欄「相 ｜ 頭段＋尾段」（相短過文字時垂直居中）；
   手機單欄 = 頭段 → 輪播 → 尾段，輪播自動落喺內文中間、三個重點之前。 */
.featured-split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-areas:
    "media head"
    "media tail";
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 0;
  align-items: start
}
.featured-head { grid-area: head }
.featured-tail { grid-area: tail }
.featured-media__img {
  grid-area: media;
  align-self: center;      /* 相短過右欄時垂直居中，唔會吊高 */
  aspect-ratio: 3 / 2;
  border-radius: var(--radius)
}

/* --- 焦點計劃相片輪播（6 張） ---
   6 張相比例唔一致（1.33 ~ 1.74），所以主圖用 object-fit:contain 保證
   「整張相完整顯示、零裁切」——用 cover 會把 1.74 嘅晚宴相切走約 14% 闊度，
   兩邊嘅人同橫額都會被切。contain 留低嘅邊由同相放大模糊底墊填滿，
   所以睇落仍然係滿版，唔會出現難看嘅白邊。
   ⚠️ 相集跨度咁闊（1.33 ~ 1.74）之下，**冇任何一個固定框比例可以避免留邊**：
   框太闊 → 4:3 相左右留邊；框太窄 → 1.74 相上下留邊。數學上最優約 1.48（兩端各約 15%），
   同現時 3:2 差唔多。想完全冇留邊就一定要裁相（4:3 相可配 object-position:bottom
   只裁走天花，唔會切人）——但會違背「成張相顯示」嘅前提，要客戶決定。
   注意：.post__media img (0,1,1) 特異性高過單 class，所以呢度全部用雙 class 選擇器。 */
.featured-carousel .fc-track {
  position: absolute;
  inset: 0
}
.featured-carousel .fc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s
}
.featured-carousel .fc-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .9s ease, visibility 0s
}
/* 模糊底墊：放大 + 溢出裁走，填滿 contain 留低嘅邊。
   刻意唔壓暗（唔用 brightness）：壓暗會令留邊變成兩條深色橫條，
   睇落更似「黑邊」；保持原亮度 + 加大模糊，留邊就似相片本身嘅延伸。 */
.featured-carousel .fc-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(34px) saturate(1.15);
  transform: scale(1.22);
  transform-origin: center
}
/* 主圖：contain = 完整顯示，零裁切 */
.featured-carousel .fc-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain
}
/* 底部薄scrim：相片明暗不一，確保圓點任何時候都睇得到 */
.featured-carousel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(to top, rgba(8, 24, 48, .38), transparent);
  pointer-events: none;
  z-index: 1
}
.featured-carousel .fc-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(10px, 1.6vw, 16px);
  display: flex;
  justify-content: center;
  gap: 9px;
  z-index: 2
}
.featured-carousel .fc-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 0 0 1px rgba(12, 32, 66, .18);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease
}
.featured-carousel .fc-dot:hover {
  background: rgba(255, 255, 255, .82)
}
.featured-carousel .fc-dot.is-active {
  background: #fff;
  transform: scale(1.33)
}
.featured-carousel .fc-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px
}
/* 暫停／繼續：觸控裝置冇 hover，輪播必須有實體停止途徑（WCAG 2.2.2） */
.featured-carousel .fc-toggle {
  position: absolute;
  right: clamp(10px, 1.6vw, 16px);
  bottom: clamp(10px, 1.6vw, 16px);
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 24, 48, .42);
  color: #fff;
  cursor: pointer;
  transition: background .3s ease
}
.featured-carousel .fc-toggle:hover {
  background: rgba(8, 24, 48, .66)
}
.featured-carousel .fc-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px
}
.featured-carousel .fc-toggle svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  display: block
}
/* aria-pressed="true" = 已暫停 → 改顯示「播放」圖標 */
.featured-carousel .fc-toggle[aria-pressed="false"] .fc-toggle__play,
.featured-carousel .fc-toggle[aria-pressed="true"] .fc-toggle__pause {
  display: none
}
@media (prefers-reduced-motion: reduce) {
  .featured-carousel .fc-slide,
  .featured-carousel .fc-slide.is-active,
  .featured-carousel .fc-dot {
    transition: none
  }
  /* 減動模式下唔會自動輪播，暫停鈕無意義 → 隱藏 */
  .featured-carousel .fc-toggle {
    display: none
  }
}
.featured-head, .featured-tail { max-width: 600px }
/* 三重點：文字欄窄（~520px），橫排三卡會迫到斷詞；改直向堆疊，圖標＋文字讀得順 */
.featured-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 22px 0 26px
}
@media (max-width: 860px) {
  /* 單欄：頭段 → 輪播 → 尾段（輪播插入內文中間） */
  .featured-split {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "media"
      "tail";
    row-gap: 22px
  }
  .featured-media__img {
    max-width: 720px;
    align-self: start
  }
  .featured-head, .featured-tail { max-width: 100% }
}

/* =========================================================
   關於我們 · 組織架構（金字塔視覺 + 玻璃卡片 + 字母頭像）
   與首頁 .leader 分開，避免影響首頁 featured 名單
   ========================================================= */
.org-tier {
  margin-top: 4px
}

.org-row {
  display: grid;
  gap: var(--gap)
}

.org-row--2 {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 8px
}

.org-row--grid {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 8px
}

/* 層級連線：淡灰海浪曲線，體現同舟共濟 */
.org-connector {
  display: flex;
  justify-content: center;
  color: rgba(44, 56, 146, .18);
  margin: 4px 0
}

.org-connector svg {
  width: 120px;
  height: 22px
}

/* ---- 卡片基底：玻璃質感 + 細邊框（取代生硬左藍線） ---- */
.leader-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 22px 24px;
  border: 1px solid rgba(0, 91, 172, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease
}

.leader-card:hover,
.leader-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(0, 91, 172, .20);
  box-shadow: 0 18px 42px -18px rgba(56, 113, 193, .50);
  outline: none
}

/* ---- 字母頭像（Monogram Avatar）---- */
.leader-mono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, #9FD3F0 0%, #5C9BD9 48%, #3871C1 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 18px -10px rgba(56, 113, 193, .65)
}

.leader-mono--lg {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  font-size: 27px
}

/* ---- 雙語排版 ---- */
.leader-role-en {
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6FA8DC
}

.leader-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--ink)
}

.leader-name--lg {
  font-size: 1.85rem
}

.leader-hon {
  font-size: .8em;
  font-weight: 500;
  color: var(--muted);
  margin-left: 4px
}

.leader-role-zh {
  font-size: 13px;
  color: var(--muted)
}

/* ---- 頂層領航：會長尊貴主卡（深海藍漸層）---- */
.leader-card--flagship {
  flex-direction: row;
  align-items: center;
  gap: 26px;
  margin-top: 4px;
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid rgba(143, 203, 240, .35);
  border-radius: var(--radius-lg);
  color: #fff;
  background: linear-gradient(135deg, #1B2566 0%, var(--navy) 52%, #33409E 100%);
  box-shadow: 0 26px 60px -28px rgba(27, 37, 102, .75)
}

.leader-card--flagship .leader-name,
.leader-card--flagship .leader-role-zh {
  color: #fff
}

.leader-card--flagship .leader-role-zh {
  color: rgba(234, 244, 255, .8)
}

.leader-card--flagship .leader-hon {
  color: rgba(234, 244, 255, .72)
}

.leader-card--flagship .leader-card__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px
}

/* 右側隱約帆船流線（10% 透明度） */
.leader-card__art {
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 230px;
  max-width: 42%;
  opacity: .12;
  pointer-events: none
}

.leader-card__art svg {
  width: 100%;
  height: auto;
  display: block
}

/* 職銜金屬質感膠囊 Badge（天青藍微光） */
.leader-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  color: #EAF4FF;
  background: linear-gradient(135deg, rgba(81, 173, 229, .28), rgba(56, 113, 193, .42));
  border: 1px solid rgba(143, 203, 240, .55);
  box-shadow: 0 0 0 1px rgba(81, 173, 229, .18), 0 0 20px rgba(81, 173, 229, .30)
}

.leader-badge small {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85
}

.leader-card__brief {
  display: block;
  margin: 2px 0 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(234, 244, 255, .92)
}

/* ---- 緊湊型網格卡（執行與專項委員會）---- */
.leader-card--sm {
  padding: 18px 20px;
  gap: 6px
}

.leader-card--sm .leader-mono {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 18px
}

.leader-card--sm .leader-name {
  font-size: 1.3rem
}

/* ---- 懸停聚焦：右下角簡歷微箭頭 ---- */
.leader-card__cta {
  position: absolute;
  right: 18px;
  bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .28s ease, transform .28s ease
}

.leader-card--flagship .leader-card__cta {
  color: #BFE0FB
}

.leader-card:hover .leader-card__cta,
.leader-card:focus-visible .leader-card__cta {
  opacity: 1;
  transform: none
}

/* ---- 個人公職簡介彈窗 ---- */
.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px
}

.profile-modal[hidden] {
  display: none
}

.profile-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 54, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px)
}

.profile-modal__dialog {
  position: relative;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 34px 32px 30px;
  border: 1px solid rgba(0, 91, 172, .10);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -26px rgba(16, 24, 54, .6);
  animation: pm-in .32s cubic-bezier(.2, .7, .2, 1)
}

@keyframes pm-in {
  from { opacity: 0; transform: translateY(14px) scale(.98) }
  to { opacity: 1; transform: none }
}

.profile-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(44, 56, 146, .06);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease
}

.profile-modal__close:hover {
  background: rgba(44, 56, 146, .14)
}

.profile-modal__bio {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted)
}

/* 響應式：兩層在小屏堆疊 */
@media(max-width: 760px) {
  .org-row--2,
  .org-row--grid {
    grid-template-columns: 1fr
  }

  .leader-card--flagship {
    flex-direction: column;
    align-items: flex-start;
    text-align: left
  }

  .leader-card__art {
    width: 160px;
    opacity: .1
  }
}

/* 減弱動效偏好 */
@media (prefers-reduced-motion: reduce) {
  .leader-card,
  .leader-card__cta,
  .profile-modal__dialog {
    transition: none;
    animation: none
  }
}

/* ---------- 聯絡：整合式深色資訊卡 ---------- */
.contact-info {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #1c2560 0%, #2C3892 55%, #3a55a8 100%);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 34px);
  color: #fff;
  box-shadow: var(--shadow-card)
}

.contact-info::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(81, 173, 229, .22), transparent 70%);
  pointer-events: none
}

.contact-info__head {
  margin-bottom: 18px;
  position: relative;
  z-index: 1
}

.contact-info__eyebrow {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 6px
}

.contact-info__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 700;
  color: #fff;
  line-height: 1.25
}

.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .14)
}

.info-item:first-child {
  border-top: 0;
  padding-top: 4px
}

.info-item__icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(81, 173, 229, .16);
  color: var(--sky)
}

.info-item__icon svg {
  width: 20px;
  height: 20px;
  display: block
}

.info-item__body {
  flex: 1;
  min-width: 0;
  padding-top: 1px
}

.info-item__label {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 3px;
  letter-spacing: .02em
}

.info-item__value {
  display: block;
  font-size: 15px;
  color: #fff;
  line-height: 1.55;
  font-weight: 500
}

.info-item__action {
  flex: none;
  align-self: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s
}

.info-item__action:hover {
  background: var(--sky);
  border-color: var(--sky);
  color: #fff;
  transform: translateY(-1px)
}

.info-item__action svg {
  width: 16px;
  height: 16px;
  display: block
}

.info-copy.is-copied {
  background: var(--sky);
  border-color: var(--sky);
  color: #fff
}

.contact-info__social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  position: relative;
  z-index: 1
}

.contact-info__social-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  margin-right: 2px
}

.contact-info__social .social {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08)
}

.contact-info__social .social:hover {
  background: var(--sky);
  border-color: var(--sky);
  color: #fff;
  transform: translateY(-2px)
}

/* ---------- 合作夥伴 logo 牆 ---------- */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px
}

.logos--4 {
  grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
  justify-content: center;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  align-items: center
}

.logo-cell {
  height: 120px;
  display: grid;
  place-items: center;
  color: var(--grey);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  transition: transform .25s
}

.logo-cell:hover {
  transform: translateY(-3px)
}

.logo-cell--img {
  padding: 12px
}

.logo-cell--img img {
  display: block;
  max-width: 100%;
  max-height: 96px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: auto
}

.partner-group {
  margin-bottom: 40px
}

.partner-group:last-of-type {
  margin-bottom: 0
}

.partner-group__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--navy);
  text-align: center;
  margin-bottom: 18px;
  text-transform: uppercase
}

.partners__note {
  margin-top: 34px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7
}

/* ---------- 法律頁（私隱政策 / 使用條款） ---------- */
.legal {
  max-width: 820px;
  margin: 8px auto 0;
  color: var(--ink);
  line-height: 1.85
}

.legal h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 22px);
  color: var(--navy);
  margin: 34px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line)
}

.legal h3:first-child {
  margin-top: 0
}

.legal p {
  margin: 0 0 14px;
  font-size: 15px
}

.legal ul {
  margin: 0 0 16px;
  padding-left: 22px
}

.legal li {
  margin: 6px 0;
  font-size: 15px
}

.legal__note {
  margin-top: 26px;
  padding: 14px 18px;
  background: hsla(var(--navy-h, 222), 50%, 30%, .05);
  border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  color: var(--muted)
}

/* 最後更新日期（放在頁頭 lead 之下） */
.legal__updated {
  margin: 14px 0 0;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--muted)
}

/* 條文內的連結（聯絡秘書處） */
.legal a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px
}

.legal a:hover {
  color: var(--navy)
}

/* ---------- 公開資料（收支報表） ---------- */
.doc-year {
  font-family: var(--font-en);
  font-weight: 800;
  color: var(--navy);
  font-size: 18px;
  margin: 16px 0 10px;
  display: flex;
  align-items: center;
  gap: 12px
}

.doc-year::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line)
}

.doc-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  margin-bottom: 12px;
  transition: border-color .25s, box-shadow .25s
}

.doc-row:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm)
}

.doc-row__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(56, 113, 193, .1);
  display: grid;
  place-items: center;
  flex: none
}

.doc-row__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--blue)
}

.doc-row__title {
  flex: 1;
  font-weight: 600
}

.doc-row__sub {
  font-size: 13px;
  color: var(--muted)
}

.doc-row__dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
  flex: none;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--blue);
  background: rgba(56, 113, 193, .07);
  color: var(--navy);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s
}

.doc-row__dl:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 8px 18px rgba(56, 113, 193, .28)
}

/* 信任徽章（IRO88 註冊慈善機構） */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 11px 18px;
  border: 1px solid var(--blue);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, rgba(81, 173, 229, .06));
  box-shadow: 0 8px 20px rgba(44, 56, 146, .08)
}

.trust-badge__icon {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff
}

.trust-badge__icon svg {
  width: 18px;
  height: 18px
}

.trust-badge__txt {
  font-weight: 700;
  color: var(--navy);
  font-size: 14.5px;
  line-height: 1.3
}

.trust-badge__txt strong {
  font-family: var(--font-en);
  letter-spacing: .5px
}

.trust-badge__sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted)
}

.trust-badge--dark {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(81, 173, 229, .55);
  box-shadow: none
}

.trust-badge--dark .trust-badge__txt {
  color: #fff
}

.trust-badge--dark .trust-badge__sub {
  color: rgba(255, 255, 255, .68)
}

.trust-badge--dark .trust-badge__icon {
  background: var(--sky)
}

@media (max-width: 560px) {
  .doc-row {
    flex-wrap: wrap;
    gap: 12px
  }

  .doc-row__dl {
    margin-left: 0;
    width: 100%
  }

  .trust-badge {
    flex-wrap: wrap
  }
}

/* ---------- 表單 ---------- */
.form {
  display: grid;
  gap: 18px;
  max-width: 560px
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px
}

@media (max-width: 520px) {
  .field-row {
    grid-template-columns: 1fr
  }
}

.field label {
  font-weight: 600;
  font-size: 14px
}

.field input,
.field textarea,
.field select {
  font: inherit;
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: #005BAC;
  box-shadow: 0 0 0 4px rgba(0, 91, 172, .18)
}

.field textarea {
  resize: vertical;
  min-height: 130px
}

.form__note {
  font-size: 13px;
  color: var(--muted)
}

/* ---------- 合作夥伴 ---------- */
.partner-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
  text-align: center;
  transition: transform .2s, box-shadow .2s
}

.partner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(20, 28, 70, .08)
}

.partner-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: var(--bg, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  padding: 16px
}

.partner-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain
}

.partner-card .h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px
}

.partner-card__note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6
}

.partner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap
}

.partner-row__name {
  font-weight: 600;
  font-size: 15px
}

.partner-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.partner-row__tags .tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  background: rgba(56, 113, 193, .08);
  padding: 6px 12px;
  border-radius: 999px
}

.partner-row__disclaimer {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted)
}

.partner-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 18px;
  text-align: center;
  color: var(--muted)
}

.partner-placeholder__mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--muted);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 18px
}

@media(max-width:760px) {
  .partner-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px
  }
}

/* ---------- CTA ---------- */
.cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 68px);
  text-align: center
}

.cta h2 {
  color: #fff
}

.cta p {
  color: rgba(255, 255, 255, .85);
  max-width: 50ch;
  margin: 14px auto 28px
}

/* ---------- 頁尾 ---------- */
.footer {
  background: var(--navy);
  color: rgba(255, 255, 255, .82);
  padding: clamp(54px, 7vw, 80px) 0 30px
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.2fr;
  gap: var(--gap)
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 16px
}

.footer__brand .mark {
  width: 32px;
  height: 36px
}

.footer p {
  font-size: 14px;
  line-height: 1.8
}

.footer h4 {
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: .04em
}

.footer__links a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .78);
  transition: color .2s
}

.footer__links a:hover {
  color: var(--sky)
}

/* 手機：頁腳連結撳擊區加到 ≥ 40px（WCAG 2.5.8 目標尺寸） */
@media (max-width: 760px) {
  .footer__links a { padding: 11px 0; font-size: 15px }
  .footer__platforms-row a { padding: 8px 0; display: inline-block }
}

.footer__platforms-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, .16);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 14px
}

.footer__sublabel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .45)
}

.footer__platforms-row a {
  font-size: 13px;
  color: rgba(255, 255, 255, .62);
  transition: color .2s
}

.footer__platforms-row a:hover {
  color: var(--sky)
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  margin-top: 40px;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, .6)
}

.footer__trust {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .7)
}

.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 16px
}

.social {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .22);
  transition: transform .2s, color .2s, border-color .2s, background .2s
}

.social:hover {
  color: #fff;
  border-color: var(--sky);
  background: rgba(81, 173, 229, .16);
  transform: translateY(-2px)
}

.social svg {
  width: 20px;
  height: 20px;
  display: block
}

.social--light {
  color: var(--navy);
  border-color: var(--line)
}

.social--light:hover {
  color: #fff;
  border-color: var(--sky);
  background: var(--sky)
}

.footer__credit {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, .72)
}

.footer__credit a {
  color: var(--sky);
  font-weight: 600;
  border-bottom: 1px solid rgba(81, 173, 229, .4);
  transition: color .2s, border-color .2s
}

.footer__credit a:hover {
  color: #fff;
  border-color: var(--sky)
}

/* 平臺段落錨點跳轉：避開 sticky nav 遮擋 */
.card[id] {
  scroll-margin-top: calc(var(--nav-h) + 20px)
}

.public__trust {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  padding-left: 14px;
  border-left: 3px solid var(--sky);
  max-width: 64ch
}

.gov-row {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px
}

.gov-row b {
  color: var(--navy);
  min-width: 7em;
  flex: none;
  font-weight: 700
}

.gov-row span {
  color: var(--ink)
}

/* ---------- 我們的旅程 / Journey Line ---------- */
.journey__wrap {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
  margin-top: 36px
}

.journey__rail {
  position: relative
}

.journey__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible
}

.journey__sail {
  position: absolute;
  left: 50%;
  top: 0;
  width: 38px;
  height: 42px;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
  will-change: left, top, transform
}

.journey__sail-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible
}

.journey__path {
  stroke: var(--line-strong, #c9cdda);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 9;
  fill: none
}

.journey__node {
  fill: #fff;
  stroke: var(--line-strong, #c9cdda);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .45s ease, stroke .45s ease, transform .45s ease
}

.journey__node.is-active {
  fill: var(--blue);
  stroke: var(--blue);
  transform: scale(1.35)
}

.journey__node--end.is-active {
  fill: var(--navy);
  stroke: var(--navy)
}

.journey__sail-halo {
  fill: var(--sky);
  opacity: .16
}

.journey__sail-boat {
  fill: var(--navy)
}

.journey__sail-mast {
  stroke: var(--navy);
  stroke-width: 2.4;
  stroke-linecap: round
}

.journey__sail-cloth {
  fill: var(--blue)
}

.journey__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4vw, 44px)
}

.journey__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  opacity: .4;
  transform: translateX(6px);
  transition: opacity .5s ease, transform .5s ease
}

.journey__item.is-active {
  opacity: 1;
  transform: none
}

.journey__year {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1;
  color: var(--navy);
  letter-spacing: .01em
}

.journey__item.is-active .journey__year {
  color: var(--blue)
}

.journey__item .h3 {
  margin-bottom: 8px
}

.journey__item p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 52ch
}

/* ---------- 拼貼帆船 / Collage Sail ---------- */
.collage {
  padding-bottom: clamp(36px, 7vw, 84px);
  overflow: visible
}

.collage .sec-head {
  margin-bottom: 4px
}

/* ⚠️ 調「成形後停留」長短，就係改下面 height 呢一個數字 —— 唔需要郁 JS。
   換算（收斂距離固定係 100vh，唔跟呢個數字走）：
       停留距離 = height − 200vh
       例：320vh → 停留 120vh　300vh → 停留 100vh　250vh → 停留 50vh　200vh → 停留 0
   兩段各自嘅意思：
   · 前 200vh（＝100vh 滾動）＝散落 → 完全成形，手感同加高前一致；
   · 之後嘅高度 ＝ 停留距離：帆已成形並釘住喺畫面，但仲要滾多咁遠才離開板塊。
   貼士：200vh 係下限（等於冇停留）；離場點 = 捲到 stage 底部，所以停留越長、板塊總長越長。
   JS 側會自己把收斂距離夾落可用行程內，所以隨便改都唔會壞。 */
.collage__stage {
  position: relative;
  height: 300vh;
  margin-top: 10px;
  overflow: visible
}

.collage__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  overflow: visible
}

.collage__svg {
  width: min(84vw, 500px);
  aspect-ratio: 340 / 384;
  position: relative;
  display: block;
  overflow: visible
}

/* 相片 tile：HTML 層（非 SVG <g>）→ CSS transform 走 GPU 合成層，
   每幀只重組合唔會重 rasterize 相片，解決 294 片同時移動嘅卡頓 */
.collage__tile {
  position: absolute;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  transform: translate(-9999px, -9999px);   /* 未定位前藏起，避免首幀閃左上角 */
  will-change: transform;
  backface-visibility: hidden
}

/* 頂層輕 mask：同區 logo 色，令細相統一色調（替代舊 SVG maskRect）
   --mask  = 該片所屬 Logo 區域嘅顏色（建 tile 時寫一次）
   --mask-op = 透明度，跟收斂進度由 0（散落，睇得清相）ramp 到 0.4（成形，統一 logo 色調）。
   ⚠️ 由 main.js apply() **量化**寫入（每 0.04 一級），唔係每幀寫 —— 每幀寫會逼 280 片 ::after
      repaint（重 rasterize 相片層），係滾動卡頓元兇。改 ramp 端點／級數喺 main.js 頂部常數。 */
.collage__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mask, transparent);
  opacity: var(--mask-op, 0);   /* fallback＝散落態；JS 一跑到就會寫入真實值 */
  pointer-events: none
}

.collage__word {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 2.4vw, 20px);
  letter-spacing: .04em;
  color: var(--navy);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease
}

.collage__word.is-in {
  opacity: 1;
  transform: none
}

/* 帆上文字嘅容器（提示掣用絕對定位掛喺佢下面，所以只係一個定位錨） */
.collage__quote {
  position: relative;
  display: flex;
  justify-content: center
}

/* 可發現性：唔喺頁面加一句說明（兀突），而是做成一枚「用得到嘅」提示掣 ——
   帆成形後自動淡入一次，之後只在游標移入帆區 / 拎到焦點時出現，開過圖就收工。
   低對比、細字、膠囊形 = 操作提示而唔係文案。

   ⚠️ 絕對定位（唔佔文件流）：無論提示出唔出現，帆與文字嘅位置都一 pixel 不變。
      曾經試過同排 flex item —— 提示隱形時仍然佔位，結果把「由 2011 到現在…」推離帆嘅中軸。
      亦因為唔需要配合定位，淡入只用 opacity（冇 transform），唔使同 translateX(-50%) 打架。 */
.collage__cue {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transition: opacity .45s ease, border-color .2s ease, color .2s ease;
  pointer-events: none
}

.collage__cue svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round
}

.collage__cue.is-on {
  opacity: 1;
  pointer-events: auto
}

.collage__cue.is-on:hover {
  color: var(--navy);
  border-color: var(--navy)
}

/* 焦點：① 只要拎到焦點就要顯示（否則會出現隱形聚焦 → WCAG 2.4.7 不過），
   連「已退役」都照顯示；② 光環只在鍵盤操作時出現（:focus-visible），
   所以滑鼠用戶唔會見到多餘嘅 focus ring。 */
.collage__cue:focus {
  opacity: 1;
  pointer-events: auto
}

.collage__cue:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px
}

/* 帆已成形 → 整艘帆可點（游標先講「呢度撩得」） */
.collage__svg.is-live {
  cursor: zoom-in
}

/* 相片 tile 可點擊放大（令細相變得可探索） */
.collage__tile.is-photo {
  cursor: zoom-in
}

/* 游標指到邊片，邊片就浮起（白邊 + 陰影）。只改嗰一片 → O(1)，
   唔會為一個 hover 重寫 280 片 transform。z-index 令放大片唔會被鄰片蓋住。 */
.collage__tile.is-hot {
  z-index: 4;
  border-radius: 2px;
  outline: 2px solid rgba(255, 255, 255, .92);
  outline-offset: -2px;
  box-shadow: 0 6px 18px rgba(12, 22, 54, .38)
}

/* 點擊 tile → 放大 lightbox（停低 + 放大，解決「細相冇用」） */
.collage-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vmin;
  background: rgba(12, 22, 54, .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease
}

.collage-lightbox.is-open {
  display: flex;
  opacity: 1
}

.collage-lightbox__fig {
  margin: 0;
  max-width: min(92vw, 1000px);
  display: flex;
  flex-direction: column;
  gap: 12px
}

.collage-lightbox__img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  background: #fff
}

.collage-lightbox__cap {
  color: #fff;
  font-size: 14px;
  text-align: center;
  letter-spacing: .02em
}

.collage-lightbox__close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease
}

.collage-lightbox__close:hover {
  background: rgba(255, 255, 255, .28)
}

/* 相集瀏覽：多過一張才出現上／下一張（單張時唔顯示多餘控件） */
.collage-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: none;
  transition: background .2s ease
}

.collage-lightbox.is-multi .collage-lightbox__nav {
  display: block
}

.collage-lightbox__nav--prev {
  left: max(10px, 2.5vw)
}

.collage-lightbox__nav--next {
  right: max(10px, 2.5vw)
}

.collage-lightbox__nav:hover {
  background: rgba(255, 255, 255, .28)
}

.collage-lightbox__count {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .62)
}

body.is-locked {
  overflow: hidden
}

@media (max-width: 760px) {
  .collage__stage {
    height: auto
  }

  .collage__pin {
    position: static;
    height: auto;
    padding: 18px 0 6px
  }

  .collage__svg {
    width: min(76vw, 300px)
  }

  .collage__word {
    opacity: 1;
    transform: none
  }

  /* 觸控裝置冇 hover → 提示改為常駐（否則手機用戶完全冇線索）。
     呢度改返做流內排一行，唔用絕對定位（手機版面矮，絕對定位會壓落下一節）。 */
  .collage__quote {
    flex-direction: column;
    align-items: center;
    gap: 10px
  }

  .collage__cue,
  .collage__cue.is-on,
  .collage__cue:focus {
    position: static;
    transform: none;
    margin-top: 0;
    opacity: 1;
    pointer-events: auto
  }
}

/* ---------- 滾動進場 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1)
}

.reveal.is-in {
  opacity: 1;
  transform: none
}

.reveal[data-d="1"] {
  transition-delay: .08s
}

.reveal[data-d="2"] {
  transition-delay: .16s
}

.reveal[data-d="3"] {
  transition-delay: .24s
}

.reveal[data-d="4"] {
  transition-delay: .32s
}

/* ---------- 麵包屑 ---------- */
.crumb {
  font-size: 13px;
  color: var(--muted);
  padding: 18px 0
}

.crumb a:hover {
  color: var(--blue)
}

.crumb span {
  margin: 0 8px;
  color: var(--line-strong)
}

/* ---------- 響應式 ---------- */
@media(max-width:980px) {

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr)
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr
  }

  .stats {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:760px) {

  /* 導覽列收合規則已上移至 1180px breakpoint（見 .nav__toggle 一節之後） */

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr
  }

  .footer__grid {
    grid-template-columns: 1fr
  }

  .stats {
    grid-template-columns: repeat(2, 1fr)
  }

  .hero__inner {
    grid-template-columns: 1fr;
    padding-top: 40px;
    padding-bottom: 80px;
    text-align: center
  }

  .hero__content {
    max-width: none
  }

  .hero__lead {
    margin-left: auto;
    margin-right: auto
  }

  .hero__actions {
    justify-content: center
  }

  .hero__visual {
    order: -1;
    margin-bottom: 8px
  }

  .hero__photo {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 16/9;
    border-radius: 24px
  }

  .hero__sail-bg,
  .wave {
    display: none
  }

  .journey__wrap {
    grid-template-columns: 1fr
  }

  .journey__rail {
    display: none
  }

  .journey__item {
    opacity: 1;
    transform: none
  }
}

/* ---------- 減動偏好 ---------- */
@media(prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important
  }

  .reveal {
    opacity: 1;
    transform: none
  }

  .wave--back,
  .wave--front {
    animation: none
  }

  .sail-drift {
    animation: none
  }

  .journey__item {
    opacity: 1;
    transform: none
  }

  .journey__node {
    transition: none
  }
}