/* ============================================================
   吳政昌 Andy Wu — 編輯風骨架 ＋ 學院風榮譽榜
   黑 / 磚紅 / 古銅金（金只用在榮譽榜）
   ============================================================ */
:root{
  --bg:     #0A0A0A;
  --bg-2:   #121211;
  --fg:     #F2F0EC;
  --gray:   #8C8985;
  --gray-2: #5A5854;
  --red:    #B03A32;   /* 磚紅 */
  --red-lt: #C9584F;
  --red-d:  #7E2823;
  --gold:   #C9A24D;   /* 只出現在榮譽榜 */
  --gold-lt:#E3C67E;
  --line:   #242423;

  --f-en: 'Archivo', 'Noto Sans TC', sans-serif;
  --f-cn: 'Noto Sans TC', sans-serif;
  --f-sr: 'Noto Serif TC', serif;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 64px);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f-cn); font-size:16px; line-height:1.8; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; line-height:1; }
:focus-visible{ outline:2px solid var(--red-lt); outline-offset:3px; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }

.num{ font-family:var(--f-en); font-size:12px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gray); display:flex; align-items:center; gap:12px; margin:0; }
.num b{ color:var(--red-lt); font-weight:600; }
.num i{ font-style:normal; flex:1; height:1px; background:var(--line); max-width:80px; }

/* ===== 頁首 ===== */
.nav{ position:sticky; top:0; z-index:50; background:rgba(10,10,10,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav__in{ display:flex; align-items:center; gap:28px; height:64px; }
.mark{ text-decoration:none; margin-right:auto; font-family:var(--f-en); font-weight:900; font-size:17px; letter-spacing:-.02em; text-transform:uppercase; }
.mark span{ color:var(--red-lt); }
.nav__links{ display:flex; gap:26px; }
.nav__links a{ text-decoration:none; font-size:14.5px; color:var(--gray); }
.nav__links a:hover{ color:var(--fg); }
.nav__cta{ font-family:var(--f-en); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; border:1px solid var(--line); padding:9px 18px; }
.nav__cta:hover{ border-color:var(--red); color:var(--red-lt); }
@media (max-width:900px){ .nav__links{ display:none; } }

/* ===== 主視覺 ===== */
.hero{ padding:clamp(40px,6vw,80px) 0 clamp(48px,7vw,90px); }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px); align-items:end; }
@media (max-width:900px){ .hero__grid{ grid-template-columns:1fr; align-items:start; } }
.hero__kicker{ font-family:var(--f-en); font-size:12.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gray); margin:0 0 26px; }
.hero__kicker s{ color:var(--red-lt); text-decoration:none; }
.hero h1{ font-family:var(--f-en); font-weight:900; text-transform:uppercase;
  font-size:clamp(58px,12vw,150px); letter-spacing:-.045em; line-height:.84; }
.hero h1 span{ display:block; }
.hero h1 .r{ color:var(--red); }
.hero__cn{ font-family:var(--f-cn); font-weight:900; font-size:clamp(22px,3vw,32px); letter-spacing:.28em; margin:24px 0 0; }
.hero__roles{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 10px; }
.hero__roles li{ font-size:13.5px; color:var(--gray); border:1px solid var(--line); padding:6px 13px; }
.hero__pic{ margin:0; position:relative; }
.hero__pic img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 20%; filter:grayscale(1) contrast(1.08); }
.hero__pic::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(10,10,10,.55)); pointer-events:none; }

/* ===== 數字牆 ===== */
.stats{ border-block:1px solid var(--line); }
.stats__in{ display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:760px){ .stats__in{ grid-template-columns:repeat(2,1fr); } }
.stat{ padding:clamp(24px,3.5vw,40px) 0 clamp(24px,3.5vw,40px) clamp(14px,2vw,28px); border-left:1px solid var(--line); }
.stat:first-child{ border-left:0; padding-left:0; }
@media (max-width:760px){ .stat:nth-child(3){ border-left:0; padding-left:0; } .stat:nth-child(n+3){ border-top:1px solid var(--line); } }
.stat b{ font-family:var(--f-en); font-weight:900; font-size:clamp(38px,6vw,64px); letter-spacing:-.04em; display:block; line-height:.9; }
.stat b em{ font-style:normal; color:var(--red); }
.stat span{ display:block; font-size:13.5px; color:var(--gray); margin-top:12px; }

/* ===== 區塊 ===== */
.sec{ padding:clamp(56px,8vw,110px) 0; border-bottom:1px solid var(--line); }
.sec__grid{ display:grid; grid-template-columns:220px 1fr; gap:clamp(24px,4vw,60px); }
@media (max-width:860px){ .sec__grid{ grid-template-columns:1fr; gap:24px; } }
.sec__t{ font-family:var(--f-cn); font-weight:900; font-size:clamp(22px,2.6vw,28px); letter-spacing:.06em; margin:16px 0 0; }
.sec__t em{ font-style:normal; display:block; font-family:var(--f-en); font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gray); margin-top:8px; }

.claim{ font-family:var(--f-cn); font-weight:900; font-size:clamp(28px,5vw,58px); line-height:1.28; letter-spacing:-.01em; margin:0 0 34px; }
.claim em{ font-style:normal; color:var(--red-lt); }
.lede{ color:var(--gray); font-size:17px; line-height:2; max-width:52ch; margin:0 0 26px; }
.lede strong{ color:var(--fg); font-weight:500; }

/* ===== 榮譽榜（唯一使用金色的地方）===== */
.board{ background:var(--bg-2); }
.board__frame{ border:1px solid rgba(201,162,77,.5); padding:clamp(26px,4vw,52px); position:relative; }
.board__frame::before{ content:""; position:absolute; inset:7px; border:1px solid rgba(201,162,77,.24); pointer-events:none; }
.board__hd{ text-align:center; margin-bottom:clamp(24px,4vw,40px); }
.board__hd p{ font-family:var(--f-en); font-size:11.5px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin:0; }
.board__hd h2{ font-family:var(--f-sr); font-weight:900; font-size:clamp(22px,3.2vw,32px); letter-spacing:.2em; text-indent:.2em; color:var(--gold-lt); margin:14px 0 0; }
.board__rule{ width:64px; height:4px; margin:18px auto 0; border-top:2px solid var(--gold); border-bottom:1px solid rgba(201,162,77,.45); }
.board__list{ list-style:none; margin:0; padding:0; columns:2; column-gap:clamp(28px,5vw,64px); }
@media (max-width:640px){ .board__list{ columns:1; } }
.board__list li{ break-inside:avoid; }
.board__row{ display:flex; align-items:baseline; gap:8px; padding:10px 0; border-bottom:1px solid rgba(201,162,77,.14);
  color:#F0E6D4; font-family:var(--f-sr); font-size:16.5px; font-weight:500; }
.board__dots{ flex:1; height:1px; background:repeating-linear-gradient(to right, rgba(201,162,77,.5) 0 2px, transparent 2px 6px); }
.board__role{ font-family:var(--f-en); font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.board__ft{ text-align:center; margin-top:clamp(22px,4vw,34px); }
.board__ft p{ font-family:var(--f-en); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-2); margin:0; }

/* ===== 條列 ===== */
.rows{ border-top:1px solid var(--line); }
.row{ display:grid; grid-template-columns:180px 1fr; gap:clamp(14px,3vw,32px); padding:20px 0; border-bottom:1px solid var(--line); }
@media (max-width:700px){ .row{ grid-template-columns:1fr; gap:6px; } }
.row__k{ font-family:var(--f-en); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gray); padding-top:5px; }
.row ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.row li{ font-size:16px; line-height:1.7; }
.row li small{ display:block; color:var(--gray); font-size:13.5px; }
.row .tag{ display:inline-block; font-family:var(--f-en); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--red-lt); border:1px solid var(--red-d); padding:3px 8px; margin-left:8px; vertical-align:2px; }

/* 榮譽 */
.aw{ display:flex; align-items:baseline; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); font-size:16px; flex-wrap:wrap; }
.aw__y{ font-family:var(--f-en); font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--gray); min-width:72px; }
.aw__n{ flex:1; min-width:220px; }
.aw__p{ font-family:var(--f-en); font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--red-lt); }

/* 現場照片 */
.field{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,20px); }
@media (max-width:760px){ .field{ grid-template-columns:1fr; } }
.field figure{ margin:0; }
.field img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.field figcaption{ font-family:var(--f-en); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gray-2); padding-top:10px; }

/* 影音 */
.films{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,20px); }
@media (max-width:820px){ .films{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .films{ grid-template-columns:1fr; } }
.film{ aspect-ratio:16/9; background:var(--bg-2); border:1px solid var(--line); display:grid; place-items:center; text-align:center; }
.film span{ font-family:var(--f-en); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-2); line-height:2; }

/* 公益 */
.give{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); align-items:center; }
@media (max-width:820px){ .give{ grid-template-columns:1fr; } }
.give img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

/* 頁尾 */
.foot{ padding:clamp(56px,8vw,100px) 0 36px; }
.foot__claim{ font-family:var(--f-cn); font-weight:900; font-size:clamp(24px,3.8vw,42px); letter-spacing:.01em; line-height:1.4; margin:0 0 16px; }
.foot__claim em{ font-style:normal; color:var(--red-lt); }
.foot__cn{ font-family:var(--f-en); font-size:13.5px; letter-spacing:.1em; color:var(--gray-2); margin:0 0 38px; }
.foot__links{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; }
.foot__links a{ font-family:var(--f-en); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border:1px solid var(--line); padding:12px 22px; }
.foot__links a:hover{ border-color:var(--red); color:var(--red-lt); }
.foot__bar{ border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family:var(--f-en); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-2); }

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ===== 追加：內頁 ===== */
.phead{ padding:clamp(44px,7vw,88px) 0 clamp(30px,4vw,48px); border-bottom:1px solid var(--line); }
.crumb{ font-family:var(--f-en); font-size:11.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-2); margin:0 0 20px; }
.crumb a{ text-decoration:none; }
.crumb a:hover{ color:var(--red-lt); }
.phead h1{ font-family:var(--f-cn); font-weight:900; font-size:clamp(28px,4.6vw,46px); letter-spacing:.06em; }
.phead p{ color:var(--gray); font-size:17px; max-width:46ch; margin:22px 0 0; }

/* 學期時程 */
.term{ border-top:1px solid var(--line); }
.phase{ display:grid; grid-template-columns:170px 1fr; gap:clamp(16px,3vw,36px); padding:24px 0; border-bottom:1px solid var(--line); }
@media (max-width:760px){ .phase{ grid-template-columns:1fr; gap:8px; } }
.phase__w{ font-family:var(--f-en); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--red-lt); padding-top:5px; }
.phase h3{ font-family:var(--f-cn); font-size:19px; font-weight:900; letter-spacing:.04em; margin-bottom:8px; }
.phase p{ margin:0; color:var(--gray); font-size:15.5px; }

/* 四聲部 */
.parts{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:900px){ .parts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .parts{ grid-template-columns:1fr; } }
.part{ background:var(--bg); padding:26px 22px 24px; }
.part__en{ font-family:var(--f-en); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--red-lt); }
.part h3{ font-family:var(--f-cn); font-size:19px; font-weight:900; letter-spacing:.04em; margin:10px 0 12px; }
.part p{ margin:0; font-size:14.5px; color:var(--gray); line-height:1.85; }

/* 給家長的信 */
.letter{ max-width:40rem; }
.letter p{ font-size:17px; line-height:2.1; margin:0 0 28px; color:#DEDAD4; }
.letter .pull{ font-family:var(--f-cn); font-weight:900; font-size:clamp(21px,3vw,30px); line-height:1.65;
  color:var(--fg); border-left:2px solid var(--red); padding:6px 0 6px 26px; margin:40px 0; }
.letter .pull em{ font-style:normal; color:var(--red-lt); }
.letter .sign{ font-family:var(--f-en); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-2); margin-top:44px; }

/* 問答 */
.faq{ max-width:780px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative; font-weight:700; font-size:17px; line-height:1.6; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--red-lt); }
.faq summary::after{ content:"+"; position:absolute; right:6px; top:20px; font-family:var(--f-en); font-size:24px; color:var(--red-lt); line-height:1; }
.faq details[open] summary::after{ content:"\2013"; }
.faq p{ margin:0 0 26px; color:var(--gray); font-size:16px; line-height:2; }

/* 聯絡 */
.cbox{ border:1px solid var(--line); padding:30px clamp(22px,3vw,34px) 32px; }
.cbox h3{ font-family:var(--f-cn); font-size:19px; font-weight:900; letter-spacing:.04em; margin:12px 0 18px; }
.cbox dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:14px 22px; font-size:16px; }
.cbox dt{ font-family:var(--f-en); font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--red-lt); padding-top:6px; }
.cbox dd{ margin:0; }
.cbox ol{ margin:0; padding-left:20px; color:var(--gray); font-size:15.5px; display:grid; gap:10px; }

/* ============================================================
   顆粒質感：固定在畫面上的一層雜訊，蓋住整個網站（含照片）
   想調整強度只要改 --grain 這個數字，0 = 關閉
   ============================================================ */
:root{ --grain:.055; }

body::after{
  content:"";
  position:fixed; inset:-50%; z-index:999; pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

/* 照片再多加一點顆粒，讓它跟版面融在一起 */
.hero__pic::before, .field figure::before, .give::before{ content:none; }
.hero__pic img, .field img, .give img{ filter:contrast(1.04) saturate(.94); }
.hero__pic img{ filter:grayscale(1) contrast(1.1); }

/* 邊角壓暗，加深空間感 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:998; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.42) 100%);
}

/* ===== 追加：第一把樂器 ===== */
.qc{ counter-reset:qc; border-top:1px solid var(--line); }
.qc li{ list-style:none; counter-increment:qc; display:grid; grid-template-columns:64px 1fr;
  gap:clamp(12px,2vw,24px); padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.qc li::before{ content:counter(qc,decimal-leading-zero); font-family:var(--f-en); font-weight:900;
  font-size:20px; letter-spacing:-.02em; color:var(--red); }
.qc li span{ font-size:16.5px; }
.qc{ margin:0; padding:0; }

.formlinks{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:26px; }
@media (max-width:860px){ .formlinks{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .formlinks{ grid-template-columns:1fr; } }
.formlinks a{ text-decoration:none; border:1px solid var(--line); padding:20px 14px; text-align:center; }
.formlinks a:hover{ border-color:var(--red); }
.formlinks b{ display:block; font-family:var(--f-cn); font-size:17px; font-weight:700; }
.formlinks i{ font-style:normal; display:block; font-family:var(--f-en); font-size:10.5px;
  font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-2); margin-top:7px; }
.formlinks a:hover i{ color:var(--red-lt); }

.note{ border-left:2px solid var(--red); padding:4px 0 4px 22px; margin:28px 0 0;
  color:var(--gray); font-size:15.5px; line-height:1.95; max-width:52ch; }
.todo{ color:var(--gray-2); font-size:15px; }

/* ===== 影片：點擊才載入，不拖慢首頁 ===== */
.video{ border-block:1px solid var(--line); padding:clamp(28px,4vw,52px) 0; }
.video__frame{ position:relative; aspect-ratio:16/9; background:var(--bg-2); border:1px solid var(--line); overflow:hidden; cursor:pointer; }
.video__frame img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.04) saturate(.92); }
.video__frame::after{ content:""; position:absolute; inset:0; background:rgba(10,10,10,.34); transition:background .25s; }
.video__frame:hover::after{ background:rgba(10,10,10,.16); }
.video__play{ position:absolute; inset:0; margin:auto; width:clamp(64px,7vw,88px); height:clamp(64px,7vw,88px);
  border:2px solid var(--fg); border-radius:50%; display:grid; place-items:center; z-index:2;
  background:rgba(10,10,10,.42); transition:background .25s, border-color .25s; }
.video__frame:hover .video__play{ background:var(--red); border-color:var(--red); }
.video__play::before{ content:""; border-left:16px solid var(--fg); border-block:10px solid transparent; margin-left:5px; }
.video__cap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:14px; }
.video__cap b{ font-family:var(--f-cn); font-size:16.5px; font-weight:700; }
.video__cap span{ font-family:var(--f-en); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gray-2); }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* 相簿式影片：小尺寸的播放鍵 */
.films .video__frame{ margin:0; }
.films .video__play{ width:clamp(44px,5vw,56px); height:clamp(44px,5vw,56px); border-width:1.5px; }
.films .video__play::before{ border-left-width:11px; border-block-width:7px; margin-left:3px; }
.films figure{ margin:0; }
.films figcaption{ font-family:var(--f-en); font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gray-2); padding-top:10px; }

/* 內頁的滿版橫幅照片 */
.bandimg{ margin:0; border-block:1px solid var(--line); }
/* 用原始比例顯示，完全不裁切；人物在畫面上半部，故裁切基準靠上以防萬一 */
.bandimg img{ width:100%; height:auto; object-fit:cover; object-position:center 22%; }
@media (min-width:1600px){
  .bandimg img{ aspect-ratio:21/9; max-height:72vh; }
}
@media (max-width:700px){
  .bandimg img{ aspect-ratio:4/5; object-position:72% 20%; }
}
.bandimg figcaption{ font-family:var(--f-en); font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gray-2); padding:12px var(--gut) 0; max-width:var(--wrap); margin:0 auto; }