/* ==================================================================
   Jony Wong 歌唱技巧教室 —— 全站共用樣式 style.css（金色主題版）
   ------------------------------------------------------------------
   全部頁面都用呢一個檔案。改呢度一次，成個網站一齊變。
   用 Notepad 改完記得「另存新檔」時編碼揀 UTF-8。
   ================================================================== */


/* ------------------------------------------------------------------
   1. 顏色同字體設定  ✏️ 想換色，改呢一段就得
   ------------------------------------------------------------------ */
:root{
  /* 底色 */
  --paper:       #FFFFFF;   /* 白色：卡片、白色分區 */
  --silver:      #F5F6F8;   /* 銀灰：灰色分區背景 */
  --cream:       #FEFAEE;   /* 淺金：重點方塊底色 */
  --line:        #E8E2D2;   /* 分隔線 */
  --field-line:  #CDD1D7;   /* 輸入格邊框 */

  /* 文字 */
  --ink:         #1A1A1A;   /* 最深色字：標題、表格 */
  --text:        #333333;   /* 內文字 */
  --muted:       #5F6670;   /* 次要文字：日期、說明 */

  /* 金色 */
  --gold:        #D4AF37;   /* 主金色：邊框、圓點 */
  --gold-dark:   #AA771C;   /* 深金：小標題 */
  --gold-deep:   #8B6508;   /* 最深金：細字連結（細字用呢隻先夠清晰） */
  --gold-light:  #F3E5AB;   /* 淺金：表格標題底、底線 */

  /* 金色漸變 */
  --gold-text:  linear-gradient(135deg, #996A15 0%, #CDA434 35%, #8B6508 75%, #AA771C 100%);              /* 大標題字 */
  --gold-metal: linear-gradient(135deg, #BF953F 0%, #FCF6BA 25%, #B38728 50%, #FBF5B7 75%, #AA771C 100%); /* 按鈕、標籤、年份 */
  --gold-dark-bg: linear-gradient(135deg, #BF952E 0%, #A0701A 50%, #7E5A08 100%);                         /* 深金色行動區 */

  /* 陰影 */
  --shadow-gold: 0 10px 30px rgba(212, 175, 55, .22);
  --shadow-soft: 0 8px 24px rgba(120, 120, 120, .10);

  --radius: 16px;

  --serif: "Noto Serif HK", "Noto Serif TC", "PMingLiU", "Songti TC", serif;
  --sans:  "Noto Sans HK", "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", sans-serif;

  --maxw: 1120px;
}


/* ------------------------------------------------------------------
   2. 基本設定
   ------------------------------------------------------------------ */
*,
*::before,
*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:20px;          /* ✏️ 內文字體大小（電腦） */
  line-height:1.8;
}
@media (max-width:700px){
  body{ font-size:18px; }  /* ✏️ 內文字體大小（手機） */
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table, fieldset{ margin:0; padding:0; }
ul, ol{ list-style:none; }
img{ max-width:100%; height:auto; display:block; }
strong{ color:var(--ink); font-weight:700; }
address{ font-style:normal; }

a{ color:var(--gold-deep); font-weight:700; text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:5px; }
a:hover{ color:var(--gold-dark); }

:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:4px; }

h1, h2, h3{ font-family:var(--serif); font-weight:900; line-height:1.35; }
h2{ font-size:clamp(28px, 3.6vw, 36px); letter-spacing:.02em; }
h3{ font-size:1.2em; color:var(--ink); font-weight:700; }

/* 金色漸變字（大標題、價錢） */
.hero h1,
.page-head h1,
h2,
.price,
.total output,
.choice__price,
.site-footer__name{
  color:var(--gold-dark);
  background:var(--gold-text);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:100; }
.skip:focus{ left:8px; top:8px; }

/* 每個大分區 */
.band{ padding:84px 0; }
.band--wash{ background:var(--silver); }
.band__head{ max-width:46em; margin-bottom:40px; }
.band__head p{ margin-top:14px; }

@media (max-width:700px){
  .wrap{ padding:0 18px; }
  .band{ padding:56px 0; }
  .band__head{ margin-bottom:28px; }
}


/* ------------------------------------------------------------------
   3. 按鈕
   ------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:54px; padding:10px 30px;
  font-family:var(--sans); font-size:.9em; font-weight:700; line-height:1.3;
  color:var(--ink); background:var(--gold-metal); background-size:150% 150%; background-position:0 0;
  border:2px solid #C9A240; border-radius:999px;
  box-shadow:0 6px 18px rgba(212, 175, 55, .35);
  text-decoration:none; cursor:pointer;
  transition:background-position .3s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ color:var(--ink); background-position:100% 100%; transform:translateY(-2px); box-shadow:0 10px 24px rgba(212, 175, 55, .45); }
.btn--line{ background:var(--paper); color:var(--gold-deep); border-color:var(--gold); box-shadow:none; }
.btn--line:hover{ background:var(--cream); color:var(--gold-deep); box-shadow:var(--shadow-gold); }
.btn--block{ width:100%; }
.btn svg{ width:20px; height:20px; flex:none; }

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


/* ------------------------------------------------------------------
   4. 頁首同選單
   ------------------------------------------------------------------ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  box-shadow:0 2px 15px rgba(0, 0, 0, .06);
}
.site-header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--gold-metal); }
.site-header__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:86px; flex-wrap:wrap; }

.brand{
  display:flex; align-items:center; gap:14px;
  font-family:var(--sans); font-weight:700; font-size:22px; letter-spacing:.04em;
  color:var(--ink); text-decoration:none;
}
.brand:hover{ color:var(--gold-dark); }
.brand img{ width:65px; height:65px; border-radius:50%; }

.site-nav{ display:flex; flex-wrap:wrap; gap:4px 6px; }
.site-nav a{
  padding:8px 8px; font-size:16px; font-weight:700; color:var(--ink); text-decoration:none;
  border-bottom:3px solid transparent;
}
.site-nav a:hover{ color:var(--gold-dark); }
.site-nav a[aria-current="page"]{ color:var(--gold-dark); border-bottom-color:var(--gold); }

.nav-toggle{
  display:none; align-items:center; gap:8px;
  min-height:46px; padding:6px 14px;
  font:inherit; font-size:16px; font-weight:700; color:var(--gold-deep);
  background:var(--paper); border:2px solid var(--gold); border-radius:999px; cursor:pointer;
}
.nav-toggle__bars{ width:18px; height:2px; background:var(--gold-deep); box-shadow:0 -6px 0 var(--gold-deep), 0 6px 0 var(--gold-deep); }

@media (max-width:1060px){
  .brand{ font-size:18px; }
  .brand img{ width:52px; height:52px; }
  .site-nav a{ padding:8px 6px; font-size:15px; }
}

/* 手機：選單收埋，撳「選單」先打開 */
@media (max-width:960px){
  .site-header__in{ min-height:72px; }
  .js .nav-toggle{ display:inline-flex; }
  .js .site-nav{ display:none; width:100%; flex-direction:column; gap:0; padding:4px 0 14px; }
  .js .nav-open .site-nav{ display:flex; }
  .js .site-nav a{ padding:14px 6px; font-size:17px; border-bottom:1px solid var(--line); }
  .js .site-nav a[aria-current="page"]{ border-bottom:3px solid var(--gold); }
  .brand{ font-size:16px; gap:10px; }
  .brand img{ width:45px; height:45px; }
}
@media (max-width:450px){
  .brand{ font-size:14px; gap:8px; letter-spacing:0; }
  .brand img{ width:38px; height:38px; }
}


/* ------------------------------------------------------------------
   5. 主頁頂部（Hero）
   ------------------------------------------------------------------ */
.hero{ padding:64px 0 8px; background:linear-gradient(180deg, var(--cream) 0%, var(--paper) 85%); }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.hero h1{ font-size:clamp(56px, 9vw, 96px); font-weight:900; line-height:1.1; letter-spacing:.05em; }
.hero h1 small{
  display:block; margin-top:16px;
  font-size:clamp(24px, 2.8vw, 32px); font-weight:700; line-height:1.45; letter-spacing:.02em;
  color:var(--ink); -webkit-text-fill-color:var(--ink);
}
.hero__lead{ margin-top:22px; font-size:1.05em; max-width:28em; }
.hero .btn-row{ margin-top:30px; }
.hero__facts{
  margin-top:26px; padding:14px 18px; max-width:32em; font-size:.85em; color:var(--ink);
  background:var(--paper); border-left:5px solid var(--gold); border-radius:8px; box-shadow:var(--shadow-soft);
}
.hero__photo img{ width:100%; border-radius:var(--radius); border:6px solid var(--paper); box-shadow:0 22px 50px rgba(212, 175, 55, .35); }

@media (max-width:860px){
  .hero{ padding-top:40px; }
  .hero__grid{ grid-template-columns:1fr; gap:34px; }
}

/* 聲區圖：五條線 + 一條向上嘅金線（胸聲 → 混合聲 → 頭聲） */
.register{ position:relative; height:180px; margin-top:48px; }
.register svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.register__staff line{ stroke:#E3DCC8; stroke-width:1; vector-effect:non-scaling-stroke; }
.register__curve{ clip-path:inset(0 100% 0 0); animation:register-draw 1.8s .2s ease-out forwards; }
.register__curve path{ fill:none; stroke:var(--gold); stroke-width:4; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.register__mark{
  position:absolute; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  background:var(--gold-metal); border:3px solid var(--paper); box-shadow:0 0 0 2px var(--gold-dark);
  opacity:0; animation:register-show .4s ease-out forwards;
}
.register__label{
  position:absolute; transform:translate(-50%, 0); white-space:nowrap;
  font-family:var(--serif); font-weight:900; font-size:18px; color:var(--gold-deep);
  background:var(--paper); padding:0 10px; line-height:1.5; border-radius:999px;
  opacity:0; animation:register-show .4s ease-out forwards;
}
.register__label small{ font-family:var(--sans); font-weight:400; font-size:14px; color:var(--muted); margin-left:6px; }
.register__mark--1{ left:15%; top:77.3%; animation-delay:.5s; }
.register__mark--2{ left:50%; top:50.7%; animation-delay:1.1s; }
.register__mark--3{ left:85%; top:24%;   animation-delay:1.7s; }
.register__label--1{ left:15%; top:calc(77.3% + 16px); animation-delay:.5s; }
.register__label--2{ left:50%; top:calc(50.7% + 16px); animation-delay:1.1s; }
.register__label--3{ left:85%; top:calc(24% + 16px);   animation-delay:1.7s; }

@keyframes register-draw{ to{ clip-path:inset(0 0 0 0); } }
@keyframes register-show{ to{ opacity:1; } }

@media (max-width:700px){
  .register{ height:140px; margin-top:32px; }
  .register__label{ font-size:15px; padding:0 6px; }
  .register__label small{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .register__curve{ animation:none; clip-path:none; }
  .register__mark, .register__label{ animation:none; opacity:1; }
  .btn{ transition:none; }
}


/* ------------------------------------------------------------------
   6. 內頁頂部標題（導師、最新消息、紀錄、片段、相集、比賽）
   ------------------------------------------------------------------ */
.page-head{ position:relative; padding:56px 0 48px; background:linear-gradient(135deg, #FFFDF6 0%, #FBF0D2 100%); }
.page-head::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--gold-metal); }
.page-head h1{ font-size:clamp(40px, 6vw, 60px); font-weight:900; letter-spacing:.04em; }
.page-head p{ margin-top:16px; max-width:40em; color:var(--text); }
.crumbs{ font-size:.8em; margin-bottom:12px; }
.crumbs a{ color:var(--gold-deep); }


/* ------------------------------------------------------------------
   7. 三大發聲系統（三張卡）
   ------------------------------------------------------------------ */
.systems{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:24px; }
.systems > div{
  padding:28px 26px; background:var(--paper);
  border-top:4px solid var(--gold); border-radius:var(--radius); box-shadow:var(--shadow-gold);
}
.systems dt{ font-family:var(--serif); font-weight:900; font-size:1.15em; color:var(--gold-dark); }
.systems dd{ margin-top:10px; font-size:.9em; }
@media (max-width:860px){ .systems{ grid-template-columns:1fr; gap:18px; } }

/* 學員成就一行 */
.notice{
  margin-top:44px; padding:22px 26px;
  background:var(--cream); border-left:6px solid var(--gold); border-radius:12px; box-shadow:var(--shadow-gold);
}
.notice p{ color:var(--ink); }

/* 學員成就 + Instagram 片段（左邊文字，右邊播放器） */
.notice--media{
  display:grid; grid-template-columns:1fr minmax(326px, 420px); gap:40px; align-items:center;
  padding:36px 36px 36px 32px;
}
.notice__label{ font-size:.8em; font-weight:700; letter-spacing:.12em; color:var(--gold-deep); }
.notice--media h3{ margin-top:6px; font-size:1.35em; line-height:1.45; color:var(--ink); }
.notice__text p + p{ margin-top:10px; }
.notice__text h3 + p{ margin-top:14px; }
.notice--media .btn-row{ margin-top:26px; }
/* 播放器載入前顯示嘅方格（載入後由 Instagram 自動取代） */
.notice__media .instagram-media{
  margin:0 !important; padding:28px 20px; min-height:200px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--paper); border:2px solid var(--gold-light); border-radius:12px;
}
.notice__media iframe.instagram-media{
  display:block; min-width:0 !important; width:100% !important; max-width:100% !important;
  padding:0; border-radius:12px !important; box-shadow:var(--shadow-gold) !important;
}
@media (max-width:860px){
  .notice--media{ grid-template-columns:1fr; gap:28px; padding:26px 14px; border-left:0; border-top:6px solid var(--gold); }
  .notice__text{ padding:0 6px; }
}


/* ------------------------------------------------------------------
   8. 課程區
   ------------------------------------------------------------------ */
.course{ display:grid; grid-template-columns:.8fr 1.2fr; gap:44px; align-items:start; }
.course__media img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow-gold); }
.course__media--pair{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px; }
.teacher-line{ margin-top:10px; font-size:.9em; }
@media (max-width:860px){
  .course{ grid-template-columns:1fr; gap:28px; }
  .course__media{ max-width:480px; }
}

/* 重點清單 */
.points{ margin-top:20px; display:grid; gap:12px; }
.points li{ position:relative; padding-left:24px; }
.points li::before{ content:""; position:absolute; left:0; top:.68em; width:11px; height:11px; border-radius:50%; background:var(--gold-metal); box-shadow:0 0 0 1px var(--gold-dark); }
.points--2{ grid-template-columns:1fr 1fr; gap:16px 36px; }
@media (max-width:700px){ .points--2{ grid-template-columns:1fr; } }

/* 價錢 */
.price-line{ margin-top:24px; padding-top:20px; border-top:2px solid var(--gold-light); display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 20px; }
.price{ font-family:var(--serif); font-weight:900; font-size:1.9em; line-height:1.2; }
.price small{ font-family:var(--sans); font-weight:400; font-size:.45em; margin-left:4px; color:var(--muted); -webkit-text-fill-color:var(--muted); }


/* ------------------------------------------------------------------
   9. 表格（時間表、收費比較、得獎紀錄、評判紀錄）
   ------------------------------------------------------------------ */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:.9em; line-height:1.6;
  background:var(--paper); border-radius:12px; box-shadow:var(--shadow-soft);
}
.table caption{ text-align:left; font-family:var(--serif); font-weight:900; font-size:1.25em; color:var(--gold-dark); padding-bottom:12px; }
.table th,
.table td{ text-align:left; vertical-align:top; padding:14px 18px; border-bottom:1px solid var(--line); }
.table tr:last-child > th,
.table tr:last-child > td{ border-bottom:0; }
.table thead th{ font-size:.85em; font-weight:700; color:var(--ink); background:var(--gold-light); border-bottom:0; white-space:nowrap; }
.table thead th:first-child{ border-top-left-radius:12px; }
.table thead th:last-child{ border-top-right-radius:12px; }
.table tbody th{ font-weight:700; color:var(--ink); white-space:nowrap; }
.table td.nowrap,
.table th.nowrap{ white-space:nowrap; }
.table--compare{ min-width:860px; }
.table--sched td{ word-break:keep-all; }   /* 日期喺空格位先斷行 */

.status{
  display:inline-block; padding:2px 12px; font-size:.8em; font-weight:700; color:var(--gold-deep);
  background:var(--cream); border:2px solid var(--gold); border-radius:999px; white-space:nowrap;
}
.status--new{ color:var(--ink); background:var(--gold-metal); border-color:#C9A240; box-shadow:0 3px 10px rgba(212, 175, 55, .4); }
.status--full{ color:#4A5059; background:#E9EBEE; border-color:#B9BEC5; }

/* 得獎紀錄表：每一年嘅欄位闊度一致 */
@media (min-width:621px){
  .table--log{ table-layout:fixed; }
  .table--log th:nth-child(1){ width:140px; }
  .table--log th:nth-child(2){ width:200px; }
  .table--log th:nth-child(4){ width:250px; }
}

/* 得獎紀錄表喺手機變成一段段 */
@media (max-width:620px){
  .table--log thead{ position:absolute; left:-9999px; }
  .table--log tr{ display:block; padding:14px 16px; border-bottom:1px solid var(--line); }
  .table--log tr:last-child{ border-bottom:0; }
  .table--log td{ display:inline; padding:0; border:0; margin-right:10px; }
  .table--log td:nth-child(n+3){ display:block; margin-right:0; }
}

/* 時間表喺手機變成一格格 */
@media (max-width:620px){
  .table--sched thead{ position:absolute; left:-9999px; }
  .table--sched tr{ display:block; padding:14px 18px; border-bottom:1px solid var(--line); }
  .table--sched tr:last-child{ border-bottom:0; }
  .table--sched th,
  .table--sched td{ display:block; padding:2px 0; border:0; }
}


/* ------------------------------------------------------------------
   10. 收費方案三格
   ------------------------------------------------------------------ */
.plans{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:40px; align-items:stretch; }
.plan{
  position:relative; display:flex; flex-direction:column; padding:30px 26px;
  background:var(--paper); border-top:4px solid var(--gold); border-radius:var(--radius); box-shadow:var(--shadow-soft);
}
.plan--top{ border:2px solid var(--gold); border-top-width:6px; box-shadow:0 16px 40px rgba(212, 175, 55, .35); background:linear-gradient(180deg, var(--cream) 0%, var(--paper) 60%); }
.plan__tag{
  align-self:flex-start; margin-bottom:12px; padding:2px 14px; font-size:.75em; font-weight:700; color:var(--ink);
  background:var(--gold-metal); border-radius:999px; box-shadow:0 3px 10px rgba(212, 175, 55, .4);
}
.plan h3{ color:var(--gold-dark); }
.plan p{ margin-top:8px; font-size:.85em; }
.plan .price{ margin-top:18px; }
.plan .price small{ display:block; margin:6px 0 0; font-size:.45em; line-height:1.5; }
.plan .btn{ margin-top:22px; }
.plan__push{ flex:1; }
@media (max-width:900px){ .plans{ grid-template-columns:1fr; gap:20px; } }


/* ------------------------------------------------------------------
   11. 地點、時間等資料（三張卡）
   ------------------------------------------------------------------ */
.facts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.facts > div{ padding:24px 24px; background:var(--paper); border-top:4px solid var(--gold); border-radius:var(--radius); box-shadow:var(--shadow-gold); }
.facts dt{ font-size:.8em; font-weight:700; color:var(--gold-deep); letter-spacing:.06em; }
.facts dd{ margin-top:6px; color:var(--ink); font-weight:700; }
.facts dd small{ display:block; margin-top:4px; color:var(--muted); font-size:.8em; font-weight:400; }
@media (max-width:860px){ .facts{ grid-template-columns:1fr; gap:16px; } }
.wide-img{ margin-top:40px; }
.wide-img img{ margin:0 auto; border-radius:var(--radius); box-shadow:var(--shadow-gold); }


/* ------------------------------------------------------------------
   12. 學員感言（卡片）
   ------------------------------------------------------------------ */
.quotes{ columns:3; column-gap:24px; }
.quote{
  break-inside:avoid; margin:0 0 24px; padding:24px 24px 20px;
  background:var(--paper); border-top:4px solid var(--gold); border-radius:var(--radius); box-shadow:var(--shadow-soft);
}
.quote::before{ content:"“"; display:block; height:.55em; font-family:var(--serif); font-size:3em; line-height:1; color:var(--gold); }
.quote p{ font-size:.85em; color:var(--text); }
.quote footer{ margin-top:10px; font-size:.8em; font-weight:700; color:var(--gold-deep); }
@media (max-width:960px){ .quotes{ columns:2; } }
/* 手機：橫向滑動，唔使碌好長 */
@media (max-width:700px){
  .quotes{ columns:auto; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -18px; padding:4px 18px 18px; }
  .quote{ flex:0 0 84%; margin:0; scroll-snap-align:center; }
}
.quotes-hint{ display:none; font-size:.8em; margin-top:-16px; margin-bottom:16px; color:var(--muted); }
@media (max-width:700px){ .quotes-hint{ display:block; } }


/* ------------------------------------------------------------------
   13. 常見問題、可收合嘅年份
   ------------------------------------------------------------------ */
.faq{ max-width:52em; display:grid; gap:14px; }
.faq details{ padding:0 26px; background:var(--paper); border-left:5px solid var(--gold); border-radius:12px; box-shadow:var(--shadow-soft); }
.faq details[open]{ box-shadow:var(--shadow-gold); }
.faq summary,
.year summary{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 0; cursor:pointer; list-style:none;
  font-family:var(--serif); font-weight:900; font-size:1.05em; color:var(--ink);
}
.faq summary::-webkit-details-marker,
.year summary::-webkit-details-marker{ display:none; }
.faq summary::after,
.year summary::after{ content:"+"; flex:none; font-family:var(--sans); font-size:1.4em; font-weight:400; line-height:1; color:var(--gold-dark); }
.faq details[open] summary::after,
.year[open] summary::after{ content:"−"; }
.faq__a{ padding:0 0 22px; font-size:.9em; }
.faq__a p + p{ margin-top:10px; }

/* 年份：金屬金色長條 */
.year{ margin-bottom:14px; }
.year summary{
  padding:14px 22px; font-size:1.25em; color:var(--ink);
  background:var(--gold-metal); border-radius:10px; box-shadow:0 4px 12px rgba(0, 0, 0, .10);
}
.year summary::after{ color:var(--ink); }
.year summary small{ font-family:var(--sans); font-weight:400; font-size:.65em; color:var(--ink); margin-left:auto; }
.year__body{ padding:16px 0 18px; }
.year__body .table{ font-size:.85em; }


/* ------------------------------------------------------------------
   14. 網上報名表
   ------------------------------------------------------------------ */
.signup{ max-width:800px; }
.signup fieldset{ border:0; margin-top:40px; }
.signup fieldset:first-of-type{ margin-top:0; }
.signup legend{ padding:0; margin-bottom:16px; font-family:var(--serif); font-weight:900; font-size:1.2em; color:var(--gold-dark); }
.signup legend b{
  display:inline-block; min-width:1.9em; height:1.9em; margin-right:10px; border-radius:50%;
  background:var(--gold-metal); color:var(--ink); font-family:var(--sans); font-size:.8em; line-height:1.9em; text-align:center;
  box-shadow:0 3px 10px rgba(212, 175, 55, .4);
}

.choice{
  display:flex; align-items:flex-start; gap:14px; padding:16px 20px; margin-top:12px;
  background:var(--paper); border:2px solid var(--line); border-radius:12px; cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.choice:hover{ border-color:var(--gold-light); }
.choice input{ flex:none; width:22px; height:22px; margin:5px 0 0; accent-color:var(--gold-dark); }
.choice__text{ flex:1; }
.choice__text b{ display:block; color:var(--ink); font-weight:700; }
.choice__text span{ display:block; font-size:.8em; color:var(--muted); }
.choice__price{ flex:none; font-family:var(--serif); font-weight:900; font-size:1.2em; }
.choice:has(input:checked){ background:var(--cream); border-color:var(--gold); box-shadow:var(--shadow-gold); }

.field{ margin-top:18px; }
.field:first-of-type{ margin-top:0; }
.field label{ display:block; font-size:.9em; font-weight:700; color:var(--ink); margin-bottom:6px; }
.field input,
.field textarea{
  width:100%; padding:13px 16px;
  font:inherit; font-size:1em; color:var(--ink);
  background:var(--paper); border:2px solid var(--field-line); border-radius:10px;
}
.field input:focus,
.field textarea:focus{ border-color:var(--gold); outline:none; box-shadow:0 0 0 4px rgba(212, 175, 55, .25); }
.field textarea{ min-height:96px; resize:vertical; }
.field__hint{ font-size:.8em; margin-top:6px; color:var(--muted); }
.field__error{ display:none; font-size:.8em; font-weight:700; color:#B3261E; margin-top:6px; }
.field--bad input{ border-color:#B3261E; }
.field--bad .field__error{ display:block; }

.total{
  margin-top:30px; padding:18px 24px; display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  background:var(--cream); border:2px solid var(--gold); border-radius:12px; box-shadow:var(--shadow-gold);
}
.total span{ color:var(--ink); font-weight:700; }
.total output{ font-family:var(--serif); font-weight:900; font-size:1.6em; }

.pay{ display:none; margin-top:14px; padding:22px 24px; background:var(--paper); border:2px solid var(--line); border-radius:12px; }
.pay--on{ display:block; }
.pay ol{ list-style:decimal; padding-left:1.4em; font-size:.9em; }
.pay li + li{ margin-top:6px; }
.pay .btn{ margin-top:18px; }

.signup__send{ margin-top:34px; }
.signup__note{ margin-top:12px; font-size:.8em; color:var(--muted); }


/* ------------------------------------------------------------------
   15. 最後行動呼籲（深金色）
   ------------------------------------------------------------------ */
.closing{ padding:76px 0; background:var(--gold-dark-bg); color:#fff; }
.closing h2{ max-width:20em; color:#fff; background:none; -webkit-text-fill-color:#fff; text-shadow:0 2px 8px rgba(80, 50, 0, .35); }
.closing p{ margin-top:12px; max-width:38em; color:#fff; text-shadow:0 1px 4px rgba(60, 35, 0, .45); }
.closing a:not(.btn){ color:#fff; text-decoration-color:#fff; }
.closing .btn-row{ margin-top:26px; }
.closing .btn{ background:var(--paper); color:var(--gold-deep); border-color:var(--paper); box-shadow:0 8px 20px rgba(80, 50, 0, .3); }
.closing .btn:hover{ background:var(--cream); color:var(--gold-deep); }
.closing .btn--line{ background:transparent; color:#fff; border-color:#fff; box-shadow:none; }
.closing .btn--line:hover{ background:rgba(255, 255, 255, .15); color:#fff; }


/* ------------------------------------------------------------------
   16. 導師頁
   ------------------------------------------------------------------ */
.profile{ display:grid; grid-template-columns:.75fr 1.25fr; gap:52px; align-items:start; }
.profile__photo img{ width:100%; border-radius:var(--radius); border:6px solid var(--paper); box-shadow:0 22px 50px rgba(212, 175, 55, .35); }
.profile h2 + .points{ margin-top:18px; }
@media (max-width:860px){
  .profile{ grid-template-columns:1fr; gap:30px; }
  .profile__photo{ max-width:380px; }
}
.names{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.names a,
.names span{
  padding:7px 18px; font-size:.85em; font-weight:700; color:var(--ink); background:var(--paper);
  border:2px solid var(--gold-light); border-radius:999px; text-decoration:none; box-shadow:var(--shadow-soft);
}
.names a{ color:var(--gold-deep); border-color:var(--gold); }
.names a:hover{ background:var(--gold-metal); color:var(--ink); }
.gallery-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:36px; }
.gallery-2 img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow-gold); }
@media (max-width:620px){ .gallery-2{ grid-template-columns:1fr; } }


/* ------------------------------------------------------------------
   17. 學生片段、學生相集
   ------------------------------------------------------------------ */
.videos{ display:grid; grid-template-columns:repeat(2, 1fr); gap:28px; }
.video{ padding:16px 16px 22px; background:var(--paper); border-top:4px solid var(--gold); border-radius:var(--radius); box-shadow:var(--shadow-gold); }
.video__frame{ position:relative; aspect-ratio:16 / 9; background:var(--silver); border-radius:10px; overflow:hidden; }
.video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video h3{ margin-top:16px; padding:0 6px; color:var(--gold-dark); }
.video p{ padding:0 6px; font-size:.8em; color:var(--muted); }
@media (max-width:760px){ .videos{ grid-template-columns:1fr; } }

.photos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.photos figure{ padding:12px; background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow-gold); }
.photos figure img{ width:100%; border-radius:10px; }
.photos figcaption{ margin-top:10px; font-size:.8em; }
@media (max-width:860px){ .photos{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .photos{ grid-template-columns:1fr; } }
.album-link{ display:block; max-width:720px; }
.album-link img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow-gold); }
.page-head + .band img{ border-radius:var(--radius); }


/* ------------------------------------------------------------------
   18. 學生得獎紀錄（record.htm）
   ------------------------------------------------------------------ */
.band:has(.records),
.band:has(.event){ background:var(--silver); }
.student-section{
  margin-bottom:32px; padding:30px 28px;
  background:var(--paper); border-radius:20px; box-shadow:var(--shadow-soft);
}
.student-section:last-child{ margin-bottom:0; }
/* 學生名：金屬金色長條 */
h2.student-header{
  padding:14px 22px; font-family:var(--sans); font-weight:700; font-size:1.15em; letter-spacing:.02em;
  color:var(--ink); -webkit-text-fill-color:var(--ink); background:var(--gold-metal); -webkit-background-clip:border-box; background-clip:border-box;
  border-radius:10px; box-shadow:0 4px 12px rgba(0, 0, 0, .10);
}
.student-header span{ display:block; margin-top:2px; font-weight:400; font-size:.75em; color:#3D3D3D; -webkit-text-fill-color:#3D3D3D; }
.record-list{ margin-top:18px; display:grid; gap:12px; }
.record-list li{
  display:grid; grid-template-columns:1fr 240px 160px; gap:4px 24px; align-items:center;
  padding:14px 20px; background:var(--silver); border-left:5px solid var(--gold); border-radius:8px;
  font-size:.95em; line-height:1.6;
}
.record-info{ color:var(--ink); font-weight:700; }
.record-prize{ font-weight:700; color:var(--gold-deep); }
.record-date{ font-size:.8em; color:var(--muted); text-align:right; white-space:nowrap; }
/* 特別標示嘅獎項：紅色 */
.record-prize.highlight-prize,
.record-prize.highlight-prize a{ color:#C62828; text-decoration-color:#C62828; }
@media (max-width:760px){
  .student-section{ padding:20px 16px; border-radius:16px; }
  .record-list li{ grid-template-columns:1fr; gap:2px; padding:12px 16px; }
  .record-date{ text-align:left; margin-top:4px; padding-top:4px; border-top:1px solid #E3E5E9; }
}


/* ------------------------------------------------------------------
   19. 歌唱比賽消息（歌唱比賽.htm）
   ------------------------------------------------------------------ */
.event{
  max-width:52em; padding:44px 40px;
  background:var(--paper); border-top:4px solid var(--gold); border-radius:20px; box-shadow:var(--shadow-gold);
}
.event + .event{ margin-top:44px; }
.event h2{ font-size:clamp(26px, 3.2vw, 34px); }
.event h3{ margin-top:40px; margin-bottom:14px; padding-bottom:6px; font-size:1.2em; color:var(--gold-dark); border-bottom:2px solid var(--gold-light); }
.event p + p{ margin-top:12px; }
.event ul,
.event ol{ margin:12px 0; padding-left:1.4em; }
.event ul{ list-style:disc; }
.event ol{ list-style:decimal; }
.event li::marker{ color:var(--gold-dark); font-weight:700; }
.event li + li{ margin-top:10px; }
.event img{ margin:30px auto; border-radius:12px; box-shadow:0 4px 15px rgba(0, 0, 0, .10); }
.event__lead{ font-size:1.1em; font-weight:700; color:var(--ink); }
.event__tags{ margin-top:36px; font-size:.8em; font-weight:700; color:var(--gold-deep); }
@media (max-width:700px){ .event{ padding:30px 20px; border-radius:16px; } }


/* ------------------------------------------------------------------
   20. 頁尾（深色）
   ------------------------------------------------------------------ */
.site-footer{ position:relative; padding:56px 0 36px; background:#1E1B16; color:#D9D3C5; font-size:.85em; }
.site-footer::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--gold-metal); }
.site-footer__grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px; }
.site-footer__name{ font-family:var(--serif); font-weight:900; font-size:1.3em; background:var(--gold-metal); -webkit-background-clip:text; background-clip:text; }
.site-footer a{ color:var(--gold-light); text-decoration-color:var(--gold); }
.site-footer a:hover{ color:#fff; }
.site-footer dt{ font-size:.85em; font-weight:700; color:var(--gold); }
.site-footer dd{ color:#fff; margin-bottom:14px; }
.site-footer__links{ display:grid; gap:8px; align-content:start; }
.site-footer__copy{ margin-top:36px; padding-top:20px; border-top:1px solid #3B352B; font-size:.85em; color:#B9B2A3; }
@media (max-width:860px){ .site-footer__grid{ grid-template-columns:1fr; gap:22px; } }

/* 手機底部固定按鈕 */
.quickbar{ display:none; }
@media (max-width:700px){
  body{ padding-bottom:78px; }
  .quickbar{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--paper); box-shadow:0 -4px 16px rgba(0, 0, 0, .10);
  }
  .quickbar .btn{ min-height:50px; padding:8px 10px; font-size:16px; }
}

@media print{
  .site-header, .quickbar, .nav-toggle{ display:none; }
  body{ padding-bottom:0; }
}