:root{
  --brand-ink:#123a2f;       /* 品牌主色：沉穩墨綠 */
  --brand-accent:#c7a45b;    /* 輔助色：金棕 */
  --bg:#f7f7f5;
  --card:#ffffff;
  --ink:#1f2a2a;
  --muted:#5d6b6b;
  --ring: rgba(199,164,91,.35);
  --radius:14px;
  --space: clamp(14px, 2vw, 22px);
  --maxw:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans TC",system-ui,-apple-system,"Segoe UI",Roboto,"PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.65}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:12px;top:12px;width:auto;height:auto;background:#fff;padding:8px 12px;border-radius:8px;z-index:1001}
header{
  position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #e6e6e0;
  backdrop-filter:saturate(180%) blur(6px);
}
.nav{
  max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px var(--space);
}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--brand-ink)}
.logo-badge{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand-ink),#0f5646);display:grid;place-items:center;color:#fff;font-size:18px}
.grow{flex:1}
.menu{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto}
.menu a{padding:6px 8px;border-radius:8px;white-space:nowrap;font-size:14px}
.menu a:hover{background:#f0f3f1}
.burger{display:none;border:0;background:transparent;font-size:22px}
@media (max-width:1200px){
  .menu{display:none}
  .menu.open{display:flex;flex-direction:column;background:#fff;position:absolute;left:0;right:0;top:60px;padding:14px var(--space);border-bottom:1px solid #eee}
  .burger{display:block;color:var(--brand-ink)}
}

.hero{
  background:
    url('images/campus-bg.jpg') center/cover no-repeat,
    radial-gradient(1200px 400px at 10% -10%,rgba(199,164,91,.18),transparent),
    radial-gradient(900px 420px at 110% 0%,rgba(17,58,47,.12),transparent);
  background-blend-mode: overlay;
  padding: clamp(36px, 8vw, 80px) var(--space);
  border-bottom:1px solid #ebeae6;
}
.hero .wrap{max-width:var(--maxw);margin:0 auto;display:grid;gap:22px}
.eyebrow{color:var(--brand-accent);letter-spacing:.2em;font-weight:700;text-transform:uppercase}
h1{font-size:clamp(24px, 3.4vw, 38px);margin:0;color:var(--brand-ink)}
.lead{color:var(--muted);max-width:60ch}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--brand-ink);color:#fff;background:var(--brand-ink);
  box-shadow:0 8px 20px rgba(17,58,47,.15)
}
.btn.alt{background:#fff;color:var(--brand-ink);border-color:#cfd6d3}
.btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

section{padding: clamp(28px,5vw,56px) var(--space)}
.section-head{max-width:var(--maxw);margin:0 auto 16px auto}
.kicker{color:var(--brand-accent);font-weight:700;letter-spacing:.2em;text-transform:uppercase}
h2{margin:.2em 0;color:var(--ink);font-size:clamp(20px,2.6vw,28px)}
.section-desc{color:var(--muted);max-width:70ch}

.wrap{max-width:var(--maxw);margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.cards>*{background:var(--card);border:1px solid #ecebe8;border-radius:var(--radius);padding:16px}
.cards h3{margin:0 0 6px 0;font-size:18px}
.cards p{margin:6px 0 10px 0;color:var(--muted)}
.cards .act{margin-top:8px}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;background:#f3efe7;color:#7a5a1e;font-size:12px}

/* Card layouts */
.cols-3{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cols-4{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:980px){.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.cols-3,.cols-4{grid-template-columns:1fr}}

.notice{background:#fff;border:1px dashed #d9d7cf;border-radius:var(--radius);padding:12px}
.footer{background:#0f2f28;color:#dfe7e4}
.footer a{color:#e7d6ad}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
@media (max-width:800px){.footgrid{grid-template-columns:1fr}}

/* 回到顶部按钮样式 */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--brand-ink);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 999;
  font-size: 20px;
}
.back-to-top.visible {
  opacity: 1;
}
.back-to-top:hover {
  background: var(--brand-accent);
  text-decoration: none;
}