/* ============================================================
   AI 社會研究中心 — 深空科技版
   設計語言：深空藍 · 電光青 · 星雲紫 · 等寬資料標籤
   ============================================================ */

:root {
  --bg:      #060a18;   /* 深空底 */
  --bg2:     #0a1126;
  --panel:   #0d1530;   /* 卡片面板 */
  --panel2:  #111a3a;
  --bright:  #eef2ff;   /* 標題白 */
  --txt:     #c9d4ef;   /* 內文 */
  --dim:     #8a96c0;   /* 弱化 */
  --faint:   #5d6890;
  --cyan:    #4ee1e6;   /* 主色：電光青 */
  --violet:  #9d7bff;   /* 星雲紫 */
  --blue:    #3e7bfa;
  --hair:    #1c2749;   /* 細線 */
  --hair2:   #2a3768;
  --grad:    linear-gradient(90deg, var(--cyan), var(--violet));

  --sans: 'Noto Sans TC', -apple-system, 'PingFang TC', sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-ink: cubic-bezier(.19,1,.22,1);
  --sheet: 1440px;
  --pad-x: clamp(20px, 4.5vw, 60px);
  --edge: max(var(--pad-x), calc((100% - var(--sheet)) / 2));
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(900px 560px at 85% -10%, rgba(157,123,255,.16), transparent 60%),
    radial-gradient(760px 520px at 0% 12%, rgba(78,225,230,.10), transparent 55%),
    radial-gradient(900px 700px at 50% 115%, rgba(62,123,250,.12), transparent 60%);
  background-attachment: fixed;
  color: var(--txt);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(78,225,230,.35); color: #fff; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; padding-inline: var(--edge); }

/* ---------- 進場薄紗 ---------- */
.veil {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  pointer-events: none;
  animation: veil-lift .9s var(--ease-ink) .1s forwards;
}
@keyframes veil-lift { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .veil { display: none; } }

/* ---------- 導覽列 ---------- */
#nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--edge);
  background: rgba(6,10,24,.78);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hair);
}
#nav.is-scrolled { border-bottom-color: var(--hair2); }

.brand { display: flex; align-items: baseline; gap: 10px; }
.brand,
.brand :first-child { font-weight: 700; font-size: 1.13rem; color: #fff; letter-spacing: .02em; }
.brand :first-child { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand .en {
  font-family: var(--mono);
  font-size: .66rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
}

.navlinks { list-style: none; display: flex; align-items: center; gap: 1.6rem; margin: 0; padding: 0; }
.navlinks a {
  font-size: .875rem; color: var(--dim);
  position: relative; padding-block: .35em;
  transition: color .3s var(--ease);
}
.navlinks a:hover { color: var(--cyan); }
.navlinks a.lang {
  font-family: var(--mono);
  font-size: .75rem; letter-spacing: .1em;
  color: var(--cyan);
  border: 1px solid rgba(78,225,230,.4);
  border-radius: 999px;
  padding: .3em 1em;
}
.navlinks a.lang:hover { background: rgba(78,225,230,.08); box-shadow: 0 0 18px -6px var(--cyan); }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 32px; height: 24px; padding: 0;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span {
  display: block; height: 1.5px; width: 100%;
  background: var(--txt);
  transition: transform .4s var(--ease-ink), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.center-hero {
  position: relative;
  padding: clamp(64px, 8vw, 110px) var(--edge) clamp(44px, 5.5vw, 64px);
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
}
.center-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(78,225,230,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,225,230,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(720px 480px at 30% 20%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(720px 480px at 30% 20%, #000 30%, transparent 75%);
  pointer-events: none;
}
.center-hero > * { position: relative; }
.center-hero .est {
  font-family: var(--mono);
  font-size: .78rem; letter-spacing: .22em;
  color: var(--cyan); text-transform: uppercase;
  margin: 0 0 1.2rem;
}
.center-hero h1 {
  font-weight: 800;
  font-size: clamp(1.9rem, 4.8vw, 3.4rem);
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--bright);
  margin: 0 0 .5rem;
}
.center-hero h1 .accent {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.center-hero .en-name {
  font-family: var(--mono);
  font-size: clamp(.82rem, 1.4vw, .95rem);
  letter-spacing: .08em;
  color: var(--faint);
  margin: 0 0 1.6rem;
}
.center-hero .hero-sub { max-width: 46em; color: var(--dim); margin: 0; font-size: 1.02rem; }

.anchor-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2rem; }
.anchor-row a {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--cyan);
  border: 1px solid rgba(78,225,230,.35);
  border-radius: 999px;
  padding: .38em 1.05em;
  background: rgba(78,225,230,.04);
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.anchor-row a:hover {
  background: rgba(78,225,230,.12);
  border-color: var(--cyan);
  box-shadow: 0 0 22px -8px var(--cyan);
}

/* ---------- 章節通用 ---------- */
.chapter { padding: clamp(44px, 5.5vw, 60px) 0 24px; }
.chapter > .wrap { padding-inline: var(--edge); }

.sec-index {
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 .8rem;
}
.sec-index::before { content: '// '; color: var(--faint); }
.sec-title {
  font-weight: 700;
  font-size: clamp(1.55rem, 2.6vw, 1.95rem);
  line-height: 1.35;
  color: var(--bright);
  margin: 0 0 1.1rem;
}
.sec-title .en {
  display: block;
  font-family: var(--mono);
  font-size: .72rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--faint);
  margin-top: .55rem;
}
.sec-body { font-size: 1rem; color: var(--dim); margin: 0 0 1.1rem; max-width: 62em; }
.sec-body:last-of-type { margin-bottom: 1.8rem; }
h3 { color: var(--bright); }

/* 焦點清單 */
.focus-list {
  list-style: none; padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px 28px;
}
.focus-list li {
  font-size: .93rem; line-height: 1.85; color: var(--txt);
  padding-left: 1.5em; position: relative;
}
.focus-list li::before {
  content: '▸'; position: absolute; left: 0; top: 0;
  color: var(--cyan);
}

.note-line { font-size: .85rem; color: var(--faint); margin-top: 1.4rem; }
.note-line a, .sec-body a { color: var(--cyan) !important; border-bottom: 1px solid rgba(78,225,230,.3); }
.note-line a:hover, .sec-body a:hover { border-bottom-color: var(--cyan); }

/* ---------- 執行長 ---------- */
.director {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  background: linear-gradient(160deg, rgba(157,123,255,.08), rgba(13,21,48,.85));
  border: 1px solid var(--hair2);
  border-radius: 16px;
  padding: clamp(24px, 3.5vw, 44px);
  margin-top: 2rem;
  position: relative;
}
.director::before {
  content: '';
  position: absolute; inset: -1px auto auto -1px; width: 100%; height: 2px;
  background: var(--grad);
  border-radius: 16px 16px 0 0;
}
.director .photo img {
  width: 100%; max-width: 320px;
  border-radius: 14px;
  display: block;
  border: 1px solid var(--hair2);
  box-shadow: 0 0 44px -18px rgba(78,225,230,.55);
}
.director h3 { font-size: 1.6rem; font-weight: 700; margin: 0 0 .2rem; color: var(--bright); }
.director .title { color: var(--faint); font-size: .88rem; font-family: var(--mono); margin: 0 0 1.1rem; }
.director p { font-size: .95rem; line-height: 1.95; color: var(--txt); margin: 0 0 1rem; }
.director a { color: var(--cyan); border-bottom: 1px solid rgba(78,225,230,.3); }
.director a:hover { border-bottom-color: var(--cyan); }
@media (max-width: 720px) { .director { grid-template-columns: 1fr; } }

/* ---------- 成員卡片 ---------- */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: 2rem;
}
.person {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 24px 24px 22px;
  position: relative;
  overflow: hidden;
}
.person::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent 70%);
}
.person:nth-child(2n)::before { background: linear-gradient(90deg, var(--violet), transparent 70%); }
.person:nth-child(3n)::before { background: linear-gradient(90deg, var(--blue), transparent 70%); }
.person .role {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .18em;
  color: var(--cyan);
  margin: 0 0 .7rem;
}
.person:nth-child(2n) .role { color: var(--violet); }
.person h4 { font-size: 1.22rem; font-weight: 700; margin: 0 0 .15rem; color: var(--bright); }
.person .title { font-size: .82rem; color: var(--faint); font-family: var(--mono); margin: 0 0 .85rem; }
.person p.bio { font-size: .9rem; line-height: 1.85; color: var(--dim); margin: 0; }
.person p.bio a { color: var(--cyan); border-bottom: 1px solid rgba(78,225,230,.3); }
.person p.bio a:hover { border-bottom-color: var(--cyan); }

/* ---------- 課程卡片 ---------- */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
  margin-top: 2rem;
}
.ccard {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.ccard::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent 75%);
}
.ccard:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--violet), transparent 75%); }
.ccard:nth-child(3n)::before   { background: linear-gradient(90deg, var(--blue), transparent 75%); }
.ccard:hover { border-color: var(--hair2); box-shadow: 0 14px 44px -22px rgba(78,225,230,.4); transform: translateY(-2px); }
.ccard .cno {
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .1em;
  color: var(--faint);
  margin: 0 0 .55rem;
}
.ccard h4 { font-size: 1.12rem; font-weight: 700; margin: 0 0 .3rem; color: var(--bright); }
.ccard .who { font-size: .8rem; color: var(--cyan); font-family: var(--mono); margin: 0 0 .7rem; }
.ccard p { font-size: .88rem; line-height: 1.85; color: var(--dim); margin: 0; }

/* ---------- 模組流程 ---------- */
.module-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 1.6rem;
  counter-reset: step;
}
.module-step {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 22px 24px;
}
.module-step .mno {
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .18em;
  color: var(--violet);
  margin: 0 0 .5rem;
}
.module-step h5 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; color: var(--bright); }
.module-step p { font-size: .86rem; line-height: 1.85; color: var(--dim); margin: 0; }

/* ---------- 表格 ---------- */
.table-scroll { overflow-x: auto; margin-top: 1.6rem; border: 1px solid var(--hair); border-radius: 12px; }
table.center-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  line-height: 1.75;
  min-width: 520px;
}
table.center-table th {
  font-family: var(--mono);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  text-align: left;
  color: var(--cyan);
  background: var(--panel2);
  padding: .7em 1em;
  border-bottom: 1px solid var(--hair2);
  white-space: nowrap;
}
table.center-table td {
  padding: .7em 1em;
  border-bottom: 1px solid var(--hair);
  color: var(--dim);
  vertical-align: top;
  background: rgba(13,21,48,.4);
}
table.center-table tr:last-child td { border-bottom: 0; }
table.center-table td.job { font-weight: 600; color: var(--bright); white-space: nowrap; }

/* ---------- 年度數字帶 ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 2rem;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.stat::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent 70%);
}
.stat:nth-child(2)::before { background: linear-gradient(90deg, var(--violet), transparent 70%); }
.stat:nth-child(3)::before { background: linear-gradient(90deg, var(--blue), transparent 70%); }
.stat:nth-child(4)::before { background: linear-gradient(90deg, var(--cyan), transparent 70%); }
.stat:nth-child(5)::before { background: linear-gradient(90deg, var(--violet), transparent 70%); }
.stat .num {
  font-family: var(--mono);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.15;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .lbl { font-size: .84rem; color: var(--dim); line-height: 1.6; margin-top: .3rem; }

/* ---------- 系列標籤 ---------- */
.series-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--cyan);
  border: 1px solid rgba(78,225,230,.35);
  border-radius: 999px;
  padding: .12em .8em;
  white-space: nowrap;
  background: rgba(78,225,230,.05);
}

/* ---------- 實驗室特寫框 ---------- */
.lab-box {
  background: linear-gradient(170deg, rgba(157,123,255,.10), rgba(13,21,48,.9) 45%);
  border: 1px solid var(--hair2);
  border-radius: 18px;
  padding: clamp(24px, 3.5vw, 42px);
  margin-top: 2.4rem;
  position: relative;
  overflow: hidden;
}
.lab-box::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: var(--grad);
}
.lab-box .lab-kicker {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .2em;
  color: var(--violet);
  margin: 0 0 .7rem;
}
.lab-box h3 { font-size: 1.45rem; font-weight: 700; margin: 0 0 .3rem; color: var(--bright); }
.lab-box .lab-en {
  font-family: var(--mono);
  font-size: .78rem; letter-spacing: .1em;
  color: var(--faint);
  margin: 0 0 1.3rem;
}
.lab-box p { font-size: .93rem; line-height: 1.9; color: var(--dim); margin: 0 0 1rem; }
.lab-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 1.4rem;
}
.lab-col {
  background: rgba(6,10,24,.55);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 18px 20px;
}
.lab-col h6 { font-size: .98rem; font-weight: 700; margin: 0 0 .5rem; color: var(--cyan); }
.lab-col ul { margin: 0; padding-left: 1.2em; }
.lab-col li { font-size: .86rem; line-height: 1.85; color: var(--dim); }
.lab-col li::marker { color: var(--cyan); }

/* ---------- 活動卡片 ---------- */
.activity {
  border-left: 2px solid rgba(78,225,230,.5);
  padding: 6px 0 6px 24px;
  margin-top: 2rem;
  position: relative;
}
.activity::before {
  content: '';
  position: absolute; left: -5px; top: 12px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}
.activity .when {
  font-family: var(--mono);
  font-size: .74rem; letter-spacing: .12em;
  color: var(--cyan);
  margin: 0 0 .4rem;
}
.activity h4 { font-size: 1.18rem; font-weight: 700; margin: 0 0 .45rem; color: var(--bright); }
.activity p { font-size: .92rem; line-height: 1.9; color: var(--dim); margin: 0 0 .4rem; }
.activity a { color: var(--cyan); border-bottom: 1px solid rgba(78,225,230,.3); }
.activity a:hover { border-bottom-color: var(--cyan); }

/* ---------- 清單群組 ---------- */
.pub-group { margin-bottom: 3.2rem; }
.pub-group > h3 {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-size: 1.4rem; font-weight: 700;
  color: var(--bright);
  margin: 0 0 .4rem;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--cyan), transparent 60%) 1;
  padding-top: 16px;
}
.pub-group:nth-of-type(2n) > h3 { border-image: linear-gradient(90deg, var(--violet), transparent 60%) 1; }
.pub-group > h3 .en {
  font-family: var(--mono);
  font-size: .66rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint);
}
.pub-list { list-style: none; margin: 0; padding: 0; }
.pub-list li {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 20px;
  padding: 15px 0;
  border-top: 1px solid var(--hair);
}
.pub-list li:first-child { border-top: 0; }
.pub-list .yr {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--cyan);
  padding-top: .25em;
}
.pub-list p { margin: 0; font-size: .94rem; line-height: 1.85; color: var(--txt); }
.pub-list .venue { color: var(--faint); }
.pub-list a { color: var(--cyan); border-bottom: 1px solid rgba(78,225,230,.3); }
.pub-list a:hover { border-bottom-color: var(--cyan); }

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .08em;
  color: #06131a;
  background: var(--cyan);
  border-radius: 5px;
  padding: 2px 8px;
  margin-left: .5em;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- CTA ---------- */
.cta {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--mono);
  font-size: .8rem; letter-spacing: .06em;
  color: var(--cyan);
  transition: gap .3s var(--ease);
}
.cta:hover { gap: 1em; text-decoration: underline; text-underline-offset: 5px; }
.cta .arrow { transition: transform .35s var(--ease-ink); }
.cta:hover .arrow { transform: translateX(3px); }
.page-cta { margin: 3rem 0 0; }

/* ---------- 頁尾 ---------- */
footer {
  padding: 34px var(--edge);
  border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  margin-top: 48px;
}
footer .wrap { padding-inline: 0; display: contents; }
footer .f-name {
  font-size: .95rem; font-weight: 600;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
footer .f-links { display: flex; gap: 22px; }
footer a { font-size: .81rem; color: var(--dim); transition: color .3s var(--ease); }
footer a:hover { color: var(--cyan); }
footer .f-copy {
  width: 100%;
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .1em;
  color: var(--faint);
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hair);
}

/* ---------- 捲動揭露（同原站機制：內容預設可見，.js 才隱藏） ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-ink), transform .9s var(--ease-ink);
}
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 響應式 ---------- */
@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .navlinks {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start;
    gap: 0;
    background: #0a1126;
    border-bottom: 1px solid var(--hair2);
    box-shadow: 0 24px 48px -28px rgba(0,0,0,.8);
    padding: 10px 20px 24px;
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .35s var(--ease), transform .35s var(--ease-ink), visibility .35s;
  }
  .navlinks.is-open { opacity: 1; visibility: visible; transform: none; }
  .navlinks li { width: 100%; border-bottom: 1px solid var(--hair); list-style: none; }
  .navlinks li:last-child { border-bottom: 0; }
  .navlinks a { display: block; padding: .95em 0; font-size: .94rem; }
  .navlinks a.lang { display: inline-block; margin-top: 1rem; }

  body { font-size: 15.5px; }
  .pub-list li { grid-template-columns: 1fr; gap: .35rem; }
  .pub-list .yr { padding-top: 0; }
  footer { flex-direction: column; align-items: flex-start; }
}

/* ---------- 多頁版：內頁頭部 ---------- */
.page-head { padding: clamp(44px, 6vw, 72px) 0 0; }
.page-head .wrap { padding-inline: var(--edge); }
.page-head h1 {
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.25;
  color: var(--bright);
  margin: .9rem 0 1.1rem;
}
.page-head h1 .en {
  display: block;
  font-family: var(--mono);
  font-size: .72rem; font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--cyan);
  margin-top: .8rem;
}
.page-head .lede {
  max-width: 760px;
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.13rem);
  line-height: 1.95;
  color: var(--dim);
}
.back-link {
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
}
.back-link:hover { color: var(--cyan); }
.page-head + section.chapter { padding-top: clamp(28px, 4vw, 44px); }
.navlinks a.is-current { color: var(--cyan); font-weight: 600; }

/* ---------- 首頁導覽卡 ---------- */
.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
  margin-top: 2rem;
}
.home-cards a {
  display: block;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 24px 26px 22px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.home-cards a::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent 75%);
}
.home-cards a:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--violet), transparent 75%); }
.home-cards a:nth-child(3n)::before   { background: linear-gradient(90deg, var(--blue), transparent 75%); }
.home-cards a:hover { border-color: var(--hair2); box-shadow: 0 16px 48px -22px rgba(78,225,230,.45); transform: translateY(-3px); }
.home-cards .no {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .2em;
  color: var(--cyan);
}
.home-cards a:nth-child(3n+2) .no { color: var(--violet); }
.home-cards h3 {
  font-size: 1.28rem; font-weight: 700;
  color: var(--bright);
  margin: .65rem 0 .55rem;
}
.home-cards p { font-size: .89rem; line-height: 1.85; color: var(--dim); margin: 0 0 1rem; }
.home-cards .go {
  font-family: var(--mono);
  font-size: .74rem; letter-spacing: .08em;
  color: var(--cyan);
}