/* ===========================================================
   元件樣式：nav / hero / chapter cards / object modal / footer
   =========================================================== */

/* ----- 頂部導覽 ----- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--pad-x);
  background: linear-gradient(180deg, rgba(20,17,15,.92) 0%, rgba(20,17,15,.6) 70%, rgba(20,17,15,0) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--t-mid) var(--ease);
}
.nav.is-scrolled {
  background: rgba(20,17,15,.96);
  border-bottom: 1px solid var(--line);
}
.nav__brand {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .02em;
}
.nav__brand small {
  display: block;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: .68rem;
  color: var(--fg-2);
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-top: .15rem;
}
.nav__menu {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  font-size: .9rem;
}
.nav__menu a {
  position: relative;
  padding: .25rem 0;
  color: var(--fg-1);
}
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--c-oil);
  transition: width var(--t-mid) var(--ease);
}
.nav__menu a:hover::after,
.nav__menu a.is-active::after { width: 100%; }
.nav__toggle {
  display: none;
  width: 28px; height: 22px;
  position: relative;
}
.nav__toggle span {
  display: block;
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--fg-0);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav__toggle span:nth-child(1) { top: 2px; }
.nav__toggle span:nth-child(2) { top: 10px; }
.nav__toggle span:nth-child(3) { top: 18px; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav__menu {
    position: fixed;
    inset: 60px 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: 1rem var(--pad-x) 2rem;
    background: rgba(20,17,15,.98);
    border-bottom: 1px solid var(--line);
    transform: translateY(-110%);
    transition: transform var(--t-mid) var(--ease);
  }
  .nav__menu li { padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .nav__menu li:last-child { border-bottom: 0; }
  .nav.is-open .nav__menu { transform: translateY(0); }
  .nav__toggle { display: block; }
}

/* ----- Hero ----- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: var(--pad-x);
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(13,11,9,0) 0%, rgba(13,11,9,.55) 55%, rgba(13,11,9,.95) 100%),
    linear-gradient(90deg, rgba(13,11,9,.55) 0%, rgba(13,11,9,.15) 50%, rgba(13,11,9,.65) 100%),
    url("../img/hero.png") center/cover no-repeat,
    #0d0b09;
}
.hero__bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.020) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity: .25;
  pointer-events: none;
}
.hero__bg::after {
  /* 油燈光斑 — 浮在實圖之上 */
  content: "";
  position: absolute;
  width: 50vmin; height: 50vmin;
  top: 30%; left: 70%;
  background: radial-gradient(circle, rgba(212,160,74,.28) 0%, transparent 65%);
  filter: blur(28px);
  animation: flicker 4.2s var(--ease) infinite alternate;
  pointer-events: none;
}
@keyframes flicker {
  0%   { opacity: .85; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.04); }
  100% { opacity: .8;  transform: scale(.98); }
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
}
.hero__eyebrow {
  margin-bottom: 1.6rem;
  color: var(--c-oil);
}
.hero__title {
  font-size: clamp(3rem, 11vw, 9rem);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.03em;
}
.hero__title em {
  font-style: normal;
  color: var(--c-oil);
}
.hero__sub {
  margin-top: 1.5rem;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--fg-1);
  font-family: var(--f-serif);
  font-weight: 400;
  font-style: italic;
  max-width: 38ch;
}
.hero__meta {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  font-family: var(--f-mono);
  font-size: .82rem;
  letter-spacing: .15em;
  color: var(--fg-2);
  text-transform: uppercase;
}
.hero__meta span strong {
  display: block;
  color: var(--fg-0);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .05em;
  margin-top: .25rem;
}
.hero__cta {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ----- 按鈕 ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding: .9em 1.6em;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .05em;
  border: 1px solid var(--fg-0);
  border-radius: 999px;
  transition: all var(--t-fast) var(--ease);
}
.btn:hover {
  background: var(--fg-0);
  color: var(--bg-0);
  transform: translateY(-2px);
}
.btn--primary {
  background: var(--c-oil);
  border-color: var(--c-oil);
  color: var(--bg-0);
}
.btn--primary:hover {
  background: var(--fg-0);
  border-color: var(--fg-0);
}
.btn--ghost { color: var(--fg-1); border-color: var(--fg-2); }
.btn .arrow {
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }

/* ----- 區段標題 ----- */
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gap);
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.section-head__num {
  font-family: var(--f-mono);
  color: var(--fg-2);
  letter-spacing: .25em;
  font-size: .8rem;
  text-transform: uppercase;
}
.section-head__title { margin-top: .8rem; }
.section-head__lead {
  color: var(--fg-1);
  font-family: var(--f-serif);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
}
@media (max-width: 760px) {
  .section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* ----- 章節牆（Patagonia 議題卡）----- */
.chapter-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.ch-card {
  position: relative;
  display: block;
  aspect-ratio: 4/5;
  padding: 1.8rem;
  background: var(--bg-1);
  color: var(--fg-0);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-mid) var(--ease);
}
.ch-card__bg {
  position: absolute; inset: 0; z-index: -1;
  background: var(--ch-color, var(--bg-2));
  background-image:
    linear-gradient(135deg, var(--ch-color, var(--bg-2)) 0%, var(--bg-1) 80%);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-slow) var(--ease);
  overflow: hidden;
}
.ch-card__bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ch-card__bg::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,17,15,.15) 0%, rgba(20,17,15,.55) 60%, rgba(20,17,15,.85) 100%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.06), transparent 40%);
}
.ch-card:hover .ch-card__bg img { transform: scale(1.06); transition: transform var(--t-slow) var(--ease); }
.ch-card__num {
  font-family: var(--f-mono);
  font-size: .8rem;
  letter-spacing: .25em;
  color: rgba(255,255,255,.55);
}
.ch-card__title {
  position: absolute;
  left: 1.8rem; bottom: 4.5rem;
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.ch-card__sub {
  position: absolute;
  left: 1.8rem; bottom: 1.8rem;
  font-size: .88rem;
  color: rgba(255,255,255,.7);
  font-family: var(--f-serif);
  font-style: italic;
  max-width: calc(100% - 3.6rem);
}
.ch-card__sdg {
  position: absolute;
  top: 1.8rem; right: 1.8rem;
  display: flex;
  gap: .35rem;
}
.ch-card__sdg span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  font-family: var(--f-mono);
  font-size: .68rem;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px;
}
.ch-card__arrow {
  position: absolute;
  bottom: 1.8rem; right: 1.8rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  display: grid;
  place-items: center;
  transition: all var(--t-fast) var(--ease);
}
.ch-card:hover { transform: translateY(-4px); }
.ch-card:hover .ch-card__bg { transform: scale(1.04); }
.ch-card:hover .ch-card__arrow {
  background: var(--fg-0);
  color: var(--bg-0);
  border-color: var(--fg-0);
}

/* ----- 附錄卡（拾壹／拾貳） ----- */
.ch-card--supp {
  background: var(--bg-1);
}
.ch-card__bg--supp {
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.02) 0 8px,
      transparent 8px 16px),
    radial-gradient(ellipse at 70% 30%, var(--ch-color) 0%, transparent 65%),
    linear-gradient(160deg, var(--bg-2) 0%, var(--bg-1) 100%);
}
.ch-card--supp .ch-card__bg::after {
  background:
    linear-gradient(180deg, rgba(20,17,15,.3) 0%, rgba(20,17,15,.65) 60%, rgba(20,17,15,.9) 100%);
}
.ch-card__glyph {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: clamp(7rem, 14vw, 11rem);
  line-height: .9;
  color: var(--ch-color);
  opacity: .35;
  text-shadow: 0 0 30px rgba(0,0,0,.4);
  pointer-events: none;
  transition: transform var(--t-slow) var(--ease), opacity var(--t-fast) var(--ease);
}
.ch-card--supp:hover .ch-card__glyph {
  transform: translate(-50%, -50%) rotate(-6deg) scale(1.08);
  opacity: .5;
}
.ch-card--supp .ch-card__num {
  color: var(--ch-color);
}
.ch-card--supp .ch-card__sub {
  color: rgba(255,255,255,.78);
}

/* ----- 章節詳情頁（chapters.html）----- */
.chapters-nav {
  position: sticky;
  top: 60px;
  z-index: 30;
  display: flex;
  overflow-x: auto;
  gap: .5rem;
  padding: 1rem var(--pad-x);
  background: rgba(20,17,15,.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.chapters-nav::-webkit-scrollbar { display: none; }
.chapters-nav a {
  flex-shrink: 0;
  padding: .4rem .9rem;
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--fg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all var(--t-fast) var(--ease);
}
.chapters-nav a:hover,
.chapters-nav a.is-active {
  color: var(--bg-0);
  background: var(--c-oil);
  border-color: var(--c-oil);
}

.ch-section {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(4rem, 8vw, 7rem);
  position: relative;
}
.ch-section__hero {
  position: relative;
  height: clamp(280px, 45vh, 480px);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  background: var(--ch-color, var(--bg-2));
}
.ch-section__hero img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease);
}
.ch-section.is-visible .ch-section__hero img { transform: scale(1); }
.ch-section__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,17,15,.25) 0%, rgba(20,17,15,.7) 100%),
    radial-gradient(circle at 30% 70%, rgba(0,0,0,.25), transparent 60%);
}
.ch-section__hero-label {
  position: absolute;
  bottom: 1.5rem; left: var(--pad-x);
  z-index: 1;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .25em;
  color: rgba(243,236,224,.7);
  text-transform: uppercase;
}
.ch-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
@media (max-width: 880px) {
  .ch-section__inner { grid-template-columns: 1fr; }
}
.ch-section__head .eyebrow { color: var(--c-oil); }
.ch-section__head h2 {
  margin-top: .8rem;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}
.ch-section__quote {
  margin-top: 2rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--c-oil);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--fg-1);
  line-height: 1.55;
  max-width: 32ch;
}
.ch-section__visual {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ch-color, var(--bg-2));
  background-image: linear-gradient(135deg, var(--ch-color, var(--bg-2)) 0%, var(--bg-1) 90%);
}
.ch-section__visual::after {
  content: attr(data-label);
  position: absolute;
  bottom: 1rem; left: 1rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .15em;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
}
.ch-section__body {
  margin-top: 2rem;
  font-size: 1.02rem;
  color: var(--fg-1);
  line-height: 1.85;
}
.ch-section__body p + p { margin-top: 1rem; }

.ch-section__sdgs {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.sdg-pill {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .35em .9em;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  border: 1px solid var(--fg-mute);
  border-radius: 999px;
  color: var(--fg-1);
}
.sdg-pill::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-oil);
}

/* 衝突軸（左右光譜） */
.conflict {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.conflict__label {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .15em;
  color: var(--fg-2);
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.conflict__bar {
  position: relative;
  height: 4px;
  background: linear-gradient(90deg, var(--c-oil), var(--c-future));
  border-radius: 2px;
}
.conflict__handle {
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--fg-0);
  cursor: grab;
  box-shadow: 0 0 0 4px rgba(243,236,224,.15);
  transition: transform var(--t-fast);
}
.conflict__handle:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.1); }

/* ----- 推測展廳（exhibit.html）----- */
.exhibit-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 3rem;
  font-family: var(--f-mono);
}
.exhibit-toggle button {
  padding: .55rem 1.4rem;
  font-size: .82rem;
  letter-spacing: .15em;
  color: var(--fg-2);
  border-radius: 999px;
  transition: all var(--t-fast) var(--ease);
}
.exhibit-toggle button.is-active {
  background: var(--c-oil);
  color: var(--bg-0);
}
.exhibit-toggle small {
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .7;
  margin-left: .5em;
}

.exhibit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.obj-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
  text-align: left;
  width: 100%;
}
.obj-card:hover {
  transform: translateY(-6px);
  border-color: var(--c-oil);
}
.obj-card[data-year="2086"]:hover { border-color: var(--c-future); }
.obj-card__visual {
  aspect-ratio: 16/10;
  background: var(--obj-color, var(--bg-2));
  background-image: linear-gradient(135deg, var(--obj-color, var(--bg-2)) 0%, var(--bg-2) 90%);
  position: relative;
  overflow: hidden;
}
.obj-card__visual img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform var(--t-slow) var(--ease);
}
.obj-card:hover .obj-card__visual img { transform: scale(1.06); }
.obj-card__visual::before {
  content: attr(data-num);
  position: absolute;
  z-index: 2;
  top: 1rem; left: 1rem;
  font-family: var(--f-mono);
  font-size: 4rem;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.obj-card__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,17,15,.15) 0%, rgba(20,17,15,.5) 65%, rgba(20,17,15,.85) 100%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,.25), transparent 60%);
}
.obj-card__body { padding: 1.5rem; }
.obj-card__year {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .25em;
  color: var(--c-oil);
}
.obj-card[data-year="2086"] .obj-card__year { color: var(--c-future); }
.obj-card__title {
  margin-top: .5rem;
  font-family: var(--f-serif);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}
.obj-card__conflict {
  margin-top: 1rem;
  font-family: var(--f-mono);
  font-size: .78rem;
  color: var(--fg-2);
}
.obj-card__cta {
  margin-top: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .9rem;
  color: var(--fg-1);
  border-bottom: 1px solid var(--c-oil);
  padding-bottom: 2px;
}
.obj-card__cta .arrow { transition: transform var(--t-fast) var(--ease); }
.obj-card:hover .obj-card__cta .arrow { transform: translateX(4px); }

/* ----- Modal：兩欄佈局，左文 / 右完整圖 ----- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: rgba(8,6,5,.92);
  backdrop-filter: blur(4px);
}
.modal.is-open {
  display: grid;
  grid-template-columns: minmax(420px, 580px) 1fr;
  animation: fadeIn .35s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal__panel {
  background: var(--bg-1);
  overflow-y: auto;
  border-right: 1px solid var(--line);
  animation: slideInLeft .45s var(--ease);
  position: relative;
}
@keyframes slideInLeft {
  from { transform: translateX(-40px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.modal__close-btn {
  position: sticky;
  top: 1rem;
  float: right;
  margin: 1rem 1rem 0 1rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-0);
  display: grid;
  place-items: center;
  z-index: 5;
  transition: all var(--t-fast) var(--ease);
}
.modal__close-btn:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
}

.modal__body {
  padding: 1rem clamp(1.5rem, 3vw, 2.6rem) 4rem;
  clear: both;
}

.modal__year-band {
  margin-top: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

/* 右半邊：完整圖片 */
.modal__visual {
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, var(--obj-color, transparent) 0%, transparent 70%),
    var(--bg-0);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  overflow: auto;
  animation: slideInRight .55s var(--ease);
}
.modal__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 32px);
  pointer-events: none;
}
.modal__visual img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  filter: drop-shadow(0 25px 50px rgba(0,0,0,.55));
  border-radius: 4px;
}
.modal__visual--empty {
  background: var(--bg-2);
}
.modal__visual--empty::after {
  content: "（無圖片）";
  font-family: var(--f-mono);
  font-size: .8rem;
  letter-spacing: .25em;
  color: var(--fg-mute);
}

@keyframes slideInRight {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (max-width: 880px) {
  .modal.is-open {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(40vh, 50vh) 1fr;
  }
  .modal__visual {
    order: -1;
    padding: 1.5rem;
    border-bottom: 1px solid var(--line);
    animation: fadeIn .55s var(--ease);
  }
  .modal__panel {
    border-right: 0;
  }
}
.modal__year {
  font-family: var(--f-mono);
  font-size: .8rem;
  letter-spacing: .25em;
  color: var(--c-oil);
}
.modal__title {
  margin-top: .5rem;
  font-family: var(--f-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.15;
  font-weight: 700;
}
.modal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 1.5rem;
  padding-block: 1.2rem;
  border-block: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: .78rem;
}
.modal__meta dt {
  color: var(--fg-2);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.modal__meta dd { color: var(--fg-0); }
.modal__section { margin-top: 2rem; }
.modal__section h4 {
  margin-bottom: .8rem;
  color: var(--c-oil);
  letter-spacing: .1em;
}
.modal__section p, .modal__section li {
  color: var(--fg-1);
  line-height: 1.75;
}
.modal__section ul { padding-left: 1.2rem; }
.modal__section li { margin-bottom: .3rem; }

.diegetic {
  margin-top: 1rem;
  padding: 1.5rem;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c-oil);
  border-radius: 2px;
  /* CJK 等寬字型回退：MingLiU(Win) / Osaka-Mono(macOS) / 確保 1 CJK = 2 ASCII */
  font-family: "Sarasa Mono TC", "Noto Sans Mono CJK TC", "Source Han Mono TC",
               "MingLiU", "PMingLiU", "細明體", "新細明體",
               "Osaka-Mono", "MS Gothic",
               "IBM Plex Mono", "Courier New", monospace;
  font-feature-settings: "fwid" 1;
  font-variant-east-asian: full-width;
  font-size: .78rem;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--fg-1);
  white-space: pre;            /* 不換行，避免破壞框線 */
  overflow-x: auto;
  tab-size: 2;
}
/* 細捲軸樣式 */
.diegetic::-webkit-scrollbar { height: 6px; }
.diegetic::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.diegetic::-webkit-scrollbar-thumb:hover { background: var(--c-oil); }

@media (max-width: 720px) {
  .diegetic { font-size: .72rem; padding: 1rem; }
}
.diegetic--cert {
  background: linear-gradient(180deg, #f5ebd9 0%, #ede1ca 100%);
  color: #3a2a18;
  border-color: #c8a06a;
  font-family: var(--f-mono);
}
.diegetic--card {
  background: linear-gradient(135deg, #1a1004 0%, #2a1a08 60%, #5a3010 100%);
  color: #f0d9a4;
  border-color: var(--c-oil);
}
.diegetic--stone {
  background: linear-gradient(180deg, #2c2620 0%, #1a1410 100%);
  color: #d8cfbe;
  border-color: #6b5a45;
  text-align: center;
}

/* ----- 推測展廳 hero ----- */
.exhibit-hero {
  position: relative;
  padding: 8rem var(--pad-x) 4rem;
  background:
    linear-gradient(180deg, rgba(13,11,9,.65) 0%, rgba(13,11,9,.85) 80%, rgba(13,11,9,1) 100%),
    linear-gradient(90deg, rgba(13,11,9,.55), rgba(13,11,9,.25)),
    url("../img/exhibit-hero.png") center/cover no-repeat,
    var(--bg-0);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.exhibit-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(107,78,159,.20), transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(212,160,74,.10), transparent 65%);
  pointer-events: none;
  z-index: -1;
}

/* ----- About page ----- */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.about-card {
  padding: 2rem;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color var(--t-fast) var(--ease);
}
.about-card:hover { border-color: var(--c-oil); }
.about-card__num {
  font-family: var(--f-serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--c-oil);
  line-height: 1;
}
.about-card h3 {
  margin: .5rem 0 .8rem;
  font-size: 1.15rem;
}
.about-card p { color: var(--fg-2); font-size: .9rem; }

/* ===========================================================
   SDG icons（聯合國 17 項標誌）
   =========================================================== */

/* 通用：圖示縮圖 */
.sdg-icon {
  display: inline-block;
  width: var(--sdg-size, 40px);
  height: var(--sdg-size, 40px);
  border-radius: 3px;
  overflow: hidden;
  background: var(--sdg-color, var(--bg-2));
  position: relative;
  flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease);
}
.sdg-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.sdg-icon--mute img {
  filter: grayscale(1) brightness(.55);
  opacity: .55;
}

/* 章節 hero 的 SDG 圖示列 */
.ch-section__sdgs {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.ch-section__sdgs .sdg-icon {
  --sdg-size: 88px;
  cursor: help;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.ch-section__sdgs .sdg-icon:hover { transform: translateY(-2px) scale(1.05); }

/* 訪談題目卡內的 SDG tag — 加上小 icon */
.q-card__tag.q-card__tag--sdg {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding-left: .25em;
}
.q-card__tag.q-card__tag--sdg .sdg-icon {
  --sdg-size: 22px;
  border-radius: 2px;
}

/* About 頁 17 格 SDG 牆 */
.sdg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.sdg-cell {
  padding: 1.2rem;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.sdg-cell:hover { transform: translateY(-3px); border-color: var(--sdg-color, var(--c-oil)); }
.sdg-cell--inactive {
  background: var(--bg-0);
  opacity: .55;
}
.sdg-cell--inactive:hover { transform: none; opacity: .8; }
.sdg-cell .sdg-icon {
  --sdg-size: 88px;
  border-radius: 4px;
}
.sdg-cell strong {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .15em;
  color: var(--sdg-color, var(--c-oil));
}
.sdg-cell--inactive strong { color: var(--fg-mute); }
.sdg-cell h4 { font-size: .95rem; line-height: 1.3; }
.sdg-cell p { font-size: .8rem; color: var(--fg-2); line-height: 1.55; }
.sdg-cell .badge-na {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: .15em;
  color: var(--fg-mute);
  text-transform: uppercase;
}

/* 首頁 SDG strip：17 格圖示牆，9 + 8 兩排或自動 */
.sdg-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 2.5rem;
}
.sdg-strip__cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  cursor: help;
  transition: transform var(--t-fast) var(--ease);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.sdg-strip__cell img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
}
.sdg-strip__cell--inactive img {
  filter: grayscale(1) brightness(.5);
  opacity: .55;
}
.sdg-strip__cell:hover { transform: translateY(-3px) scale(1.06); z-index: 2; }
.sdg-strip__cell:hover .sdg-strip__tip {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-8px);
}
.sdg-strip__tip {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translate(-50%, -100%);
  background: var(--bg-0);
  border: 1px solid var(--line);
  padding: .5em .8em;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--fg-0);
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 5;
}
.sdg-strip__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.5rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .15em;
  color: var(--fg-2);
  text-transform: uppercase;
}
.sdg-strip__legend span {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.sdg-strip__legend i {
  width: 14px; height: 14px;
  display: inline-block;
  background: var(--c-oil);
  border-radius: 2px;
}
.sdg-strip__legend i.is-mute { background: var(--fg-mute); opacity: .55; }

@media (max-width: 720px) {
  .sdg-strip { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; }
}
@media (max-width: 480px) {
  .sdg-strip { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 4px; }
}

/* About 頁 SDG 圖示也加大 */
.sdg-cell .sdg-icon {
  --sdg-size: 110px !important;
}

/* ----- Footer ----- */
.footer {
  padding: 4rem var(--pad-x) 2rem;
  background: #0c0a08;
  border-top: 1px solid var(--line);
}
.footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}
.footer h4 {
  margin-bottom: 1rem;
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.footer ul { list-style: none; }
.footer li { margin-bottom: .5rem; font-size: .9rem; color: var(--fg-1); }
.footer a:hover { color: var(--c-oil); }
.footer__bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--fg-mute);
}

/* ===========================================================
   推測物件生態系（Object Network）— 取代原 ASCII 圖
   =========================================================== */
.ecosystem {
  position: relative;
  margin: 2.5rem auto 0;
  max-width: 880px;
  aspect-ratio: 4/3;
  background:
    radial-gradient(circle at 50% 50%, rgba(212,160,74,.06) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.ecosystem::before {
  /* 細網格紋 */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.ecosystem__svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.eco-edge {
  fill: none;
  stroke: var(--fg-mute);
  stroke-width: .25;
  stroke-dasharray: none;
  transition: stroke var(--t-fast), stroke-width var(--t-fast);
}
.eco-edge--axis { stroke: var(--c-oil); stroke-width: .35; opacity: .55; }
.eco-edge--soft { stroke: var(--fg-mute); stroke-width: .15; stroke-dasharray: 1 1; opacity: .4; }

.eco-hub {
  fill: var(--bg-0);
  stroke: var(--c-oil);
  stroke-width: .35;
}
.eco-hub__label {
  font-family: var(--f-serif);
  font-size: 2.2px;
  font-weight: 700;
  fill: var(--c-oil);
  letter-spacing: .12em;
}

/* 節點 */
.eco-node {
  position: absolute;
  top: var(--top);
  left: var(--left);
  transform: translate(-50%, -50%);
  z-index: 3;
  text-align: center;
  width: 130px;
  text-decoration: none;
  color: inherit;
}
.eco-node__avatar {
  width: 78px;
  height: 78px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 2px solid var(--node-color, var(--c-oil));
  box-shadow: 0 0 0 4px var(--bg-0), 0 6px 16px rgba(0,0,0,.5);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.eco-node__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.eco-node__num {
  position: absolute;
  top: -2px; right: -2px;
  z-index: 2;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--node-color, var(--c-oil));
  color: var(--bg-0);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: .72rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg-0);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.eco-node__name {
  margin-top: .6rem;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: .92rem;
  color: var(--node-color, var(--fg-0));
  line-height: 1.2;
}
.eco-node__theme {
  margin-top: .15rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--fg-2);
}

/* hover：節點放大、相連邊變粗 */
.eco-node:hover .eco-node__avatar {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px var(--bg-0), 0 0 0 6px var(--node-color), 0 8px 24px rgba(0,0,0,.6);
}
.ecosystem:has(.eco-node[data-id="1"]:hover) .eco-edge[data-from="1"],
.ecosystem:has(.eco-node[data-id="1"]:hover) .eco-edge[data-to="1"],
.ecosystem:has(.eco-node[data-id="2"]:hover) .eco-edge[data-from="2"],
.ecosystem:has(.eco-node[data-id="2"]:hover) .eco-edge[data-to="2"],
.ecosystem:has(.eco-node[data-id="3"]:hover) .eco-edge[data-from="3"],
.ecosystem:has(.eco-node[data-id="3"]:hover) .eco-edge[data-to="3"],
.ecosystem:has(.eco-node[data-id="4"]:hover) .eco-edge[data-from="4"],
.ecosystem:has(.eco-node[data-id="4"]:hover) .eco-edge[data-to="4"],
.ecosystem:has(.eco-node[data-id="5"]:hover) .eco-edge[data-from="5"],
.ecosystem:has(.eco-node[data-id="5"]:hover) .eco-edge[data-to="5"] {
  stroke: var(--fg-0);
  stroke-width: .55;
  opacity: 1;
}

/* 軸線標籤 */
.eco-axis-label {
  position: absolute;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .15em;
  color: var(--fg-mute);
  text-transform: uppercase;
  background: var(--bg-1);
  padding: .15em .6em;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.eco-axis-label--mid    { top: 38%;  left: 50%; transform: translate(-50%, -50%); }
.eco-axis-label--bottom { top: 62%;  left: 50%; transform: translate(-50%, -50%); }

/* 圖例 */
.ecosystem__legend {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--fg-2);
  z-index: 4;
}
.ecosystem__legend span {
  display: inline-flex;
  align-items: center;
  gap: .35em;
}
.ecosystem__legend .dot {
  width: 18px; height: 2px;
  display: inline-block;
}
.ecosystem__legend .dot--strong { background: var(--fg-mute); }
.ecosystem__legend .dot--axis   { background: var(--c-oil); opacity: .7; }
.ecosystem__legend .dot--soft   { background: repeating-linear-gradient(90deg, var(--fg-mute) 0 2px, transparent 2px 4px); opacity: .6; }

@media (max-width: 720px) {
  .ecosystem {
    aspect-ratio: 3/4;
    max-width: 420px;
  }
  .eco-node { width: 110px; }
  .eco-node__avatar { width: 64px; height: 64px; }
  .eco-node__name { font-size: .82rem; }
  .eco-node__theme { font-size: .62rem; }
  .ecosystem__legend { font-size: .6rem; gap: .5rem; bottom: .5rem; }
}

/* ===========================================================
   建議受訪對象 / 視覺素材清單 / 共通收尾題
   =========================================================== */
.interviewees__list {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.interviewees__pill {
  display: inline-flex;
  align-items: center;
  padding: .4em .9em;
  font-family: var(--f-sans);
  font-size: .82rem;
  line-height: 1.5;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--c-oil);
  border-radius: 2px;
  color: var(--fg-1);
  max-width: 100%;
  word-break: break-word;
}

.deliverables__list {
  margin-top: 1rem;
  list-style: none;
  display: grid;
  gap: .8rem;
  counter-reset: deliv;
}
.deliverables__list li {
  position: relative;
  padding: 1rem 1.2rem 1rem 3.2rem;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c-future);
  border-radius: 2px;
  counter-increment: deliv;
}
.deliverables__list li::before {
  content: counter(deliv, decimal-leading-zero);
  position: absolute;
  left: 1rem; top: 1rem;
  font-family: var(--f-mono);
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-future);
  letter-spacing: .1em;
}
.deliverables__list li strong {
  display: block;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: .25rem;
  color: var(--fg-0);
}
.deliverables__list li span {
  font-size: .82rem;
  color: var(--fg-2);
  line-height: 1.55;
  word-break: break-word;
}

/* 共通收尾題區塊 */
.ch-section--closing {
  background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  border-bottom: 0;
}
.closing-list {
  list-style: none;
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  counter-reset: ce;
}
.closing-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c-oil);
  border-radius: 2px;
}
.closing-list__num {
  font-family: var(--f-mono);
  font-size: .82rem;
  letter-spacing: .15em;
  color: var(--c-oil);
  align-self: start;
  font-weight: 500;
}
.closing-list__text {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--fg-0);
}

@media (max-width: 600px) {
  .closing-list li {
    padding: 1rem 1.1rem;
    gap: .6rem;
    grid-template-columns: 1fr;
  }
  .closing-list__num {
    font-size: .68rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--line);
  }
  .closing-list__text { font-size: .92rem; }

  .deliverables__list li { padding: 2.2rem 1rem 1rem; }
  .deliverables__list li::before { left: 1rem; top: .7rem; font-size: .78rem; }
  .deliverables__list li strong { font-size: .95rem; }
  .deliverables__list li span { font-size: .78rem; }

  .interviewees__list { gap: .35rem; }
  .interviewees__pill { font-size: .76rem; padding: .35em .7em; }
}

@media (max-width: 380px) {
  .closing-list li { padding: .9rem 1rem; }
  .closing-list__text { font-size: .88rem; }
  .interviewees__pill { font-size: .72rem; }
}

/* ===========================================================
   訪談題目集（Question cards）
   =========================================================== */
.q-list {
  margin-top: 2rem;
  display: grid;
  gap: .8rem;
}
.q-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1.1rem 1.3rem;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--q-accent, var(--c-oil));
  border-radius: 2px;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.q-card:hover {
  transform: translateX(4px);
  border-left-color: var(--fg-0);
}
.q-card__num {
  font-family: var(--f-mono);
  font-size: .82rem;
  color: var(--fg-mute);
  letter-spacing: .15em;
  padding-top: .15rem;
  min-width: 1.4rem;
}
.q-card__text {
  font-family: var(--f-serif);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg-0);
}
.q-card__role {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .15em;
  color: var(--q-accent, var(--c-oil));
  margin-bottom: .5rem;
  font-weight: 500;
}
.q-card__tag {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  padding: .15em .55em;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-2);
  white-space: nowrap;
  align-self: start;
}
.q-card__tag[data-tag="情"] { color: #ff8a7e; border-color: #6a3530; }
.q-card__tag[data-tag="議"] { color: #8aaee0; border-color: #344b6b; }
.q-card__tag[data-tag="未"] { color: #b89eef; border-color: #4a3a72; }
.q-card__tag[data-tag="S"]  { color: #8ed3a0; border-color: #305a3f; }

/* 角色快速篩選 */
.role-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.role-filter button {
  padding: .35em .85em;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .15em;
  color: var(--fg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
}
.role-filter button:hover { color: var(--fg-0); border-color: var(--fg-1); }
.role-filter button.is-active {
  background: var(--c-oil);
  color: var(--bg-0);
  border-color: var(--c-oil);
}

/* ===========================================================
   NAPKIN VISUAL：每章獨立概念圖
   =========================================================== */
.napkin {
  margin-top: 2.5rem;
  padding: 2rem 1.5rem;
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.napkin::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 24px);
  pointer-events: none;
}
.napkin__heading {
  position: relative;
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 1.5rem;
  text-align: center;
}
.napkin__heading::before,
.napkin__heading::after {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--fg-mute);
  vertical-align: middle;
  margin: 0 .8rem;
}

/* ----- 1. Pyramid（戲之源）----- */
.napkin-pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.napkin-pyramid__row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  max-width: 560px;
}
.napkin-pyramid__bar {
  flex: 1;
  position: relative;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: .95rem;
  border: 1.5px solid var(--p-color);
  color: var(--p-color);
  border-bottom: 0;
  background: rgba(255,255,255,.02);
  transition: background var(--t-fast);
}
.napkin-pyramid__row:hover .napkin-pyramid__bar { background: rgba(255,255,255,.06); }
.napkin-pyramid__bar::before,
.napkin-pyramid__bar::after {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 12px; height: 100%;
  border-bottom: 1.5px solid var(--p-color);
}
.napkin-pyramid__bar::before { left: -12px;  border-left: 1.5px solid var(--p-color); transform: skewX(-20deg); transform-origin: bottom right; }
.napkin-pyramid__bar::after  { right: -12px; border-right: 1.5px solid var(--p-color); transform: skewX(20deg);  transform-origin: bottom left; }
.napkin-pyramid__note {
  flex: 1.4;
  font-size: .82rem;
  color: var(--fg-2);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .napkin-pyramid__row { flex-direction: column; gap: .35rem; }
  .napkin-pyramid__note { text-align: center; padding: 0 .5rem; }
}

/* ----- 2. Flow（戲之具）----- */
.napkin-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  position: relative;
}
.napkin-flow__step {
  position: relative;
  padding: 1.2rem 1rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--p-color);
  border-radius: 2px;
  background: rgba(255,255,255,.02);
}
.napkin-flow__step::after {
  content: "→";
  position: absolute;
  right: -1rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-mono);
  color: var(--fg-mute);
  z-index: 1;
}
.napkin-flow__step:last-child::after { display: none; }
.napkin-flow__num {
  font-family: var(--f-mono);
  font-size: 2rem;
  font-weight: 300;
  color: var(--p-color);
  line-height: 1;
}
.napkin-flow__name {
  font-family: var(--f-serif);
  font-weight: 600;
  margin: .3rem 0 .4rem;
  color: var(--fg-0);
}
.napkin-flow__note { font-size: .8rem; color: var(--fg-2); line-height: 1.5; }

/* ----- 3. Wave（戲之造）----- */
.napkin-wave {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5rem;
  align-items: stretch;
}
.napkin-wave__cell {
  position: relative;
  padding: 1rem .8rem;
  text-align: center;
  border-radius: 2px;
}
.napkin-wave__cell:nth-child(odd)  { background: rgba(212,160,74,.06); border: 1px solid rgba(212,160,74,.2); }
.napkin-wave__cell:nth-child(even) { background: rgba(58,111,181,.06); border: 1px solid rgba(58,111,181,.2); margin-top: 1.5rem; }
.napkin-wave__num {
  width: 26px; height: 26px;
  margin: 0 auto .4rem;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--f-mono);
  font-size: .8rem;
}
.napkin-wave__cell:nth-child(odd) .napkin-wave__num  { color: var(--c-oil); }
.napkin-wave__cell:nth-child(even) .napkin-wave__num { color: var(--c-screen); }
.napkin-wave__name {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: .3rem;
  color: var(--fg-0);
}
.napkin-wave__note { font-size: .72rem; color: var(--fg-2); line-height: 1.45; }
@media (max-width: 720px) {
  .napkin-wave { grid-template-columns: repeat(2, 1fr); }
  .napkin-wave__cell:nth-child(even) { margin-top: 0; }
}

/* ----- 4. Pinwheel（戲之器）----- */
.napkin-pinwheel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  position: relative;
}
.napkin-pinwheel__blade {
  padding: 1rem;
  position: relative;
  text-align: center;
  background: rgba(255,255,255,.02);
  border-radius: 2px;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
  min-height: 130px;
}
.napkin-pinwheel__blade:nth-child(1) { background: rgba(58,111,181,.10); color: #6a9bd6; }
.napkin-pinwheel__blade:nth-child(2) { background: rgba(200,51,46,.08);  color: #d6726f; clip-path: polygon(0 20%, 50% 0, 100% 20%, 100% 100%, 0 100%); }
.napkin-pinwheel__blade:nth-child(3) { background: rgba(91,168,106,.10); color: #88ca97; }
.napkin-pinwheel__blade:nth-child(4) { background: rgba(212,160,74,.10); color: #e0bd7f; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 80%); }
.napkin-pinwheel__blade:nth-child(5) { background: rgba(154,111,160,.10);color: #c79bd0; clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 100%); }
.napkin-pinwheel__blade:nth-child(6) { background: rgba(107,78,159,.10); color: #ab94d6; }
.napkin-pinwheel__name {
  font-family: var(--f-serif);
  font-weight: 600;
  margin-bottom: .35rem;
  font-size: .9rem;
}
.napkin-pinwheel__note {
  font-size: .73rem;
  color: var(--fg-2);
  line-height: 1.4;
}
@media (max-width: 720px) {
  .napkin-pinwheel { grid-template-columns: repeat(2, 1fr); }
  .napkin-pinwheel__blade { clip-path: none !important; }
}

/* ----- 5. Compare-arrow（戲之演）----- */
.napkin-compare {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-width: 700px;
  margin: 0 auto;
}
.napkin-compare__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
}
.napkin-compare__from,
.napkin-compare__to {
  padding: .85rem 1rem;
  border-radius: 2px;
  font-family: var(--f-serif);
  text-align: center;
  font-size: .92rem;
}
.napkin-compare__from { background: rgba(212,160,74,.08); border: 1px solid rgba(212,160,74,.3); color: var(--c-oil); }
.napkin-compare__to   { background: rgba(200,51,46,.08);  border: 1px solid rgba(200,51,46,.3); color: #e76b66; }
.napkin-compare__arrow {
  color: var(--fg-mute);
  font-family: var(--f-mono);
  font-size: 1.2rem;
}
@media (max-width: 600px) {
  .napkin-compare__row { grid-template-columns: 1fr; }
  .napkin-compare__arrow { transform: rotate(90deg); }
}

/* ----- 6. Iceberg（戲之飲）----- */
.napkin-iceberg {
  position: relative;
  padding: 0;
}
.napkin-iceberg__waterline {
  position: relative;
  margin: 1rem 0;
  border-top: 1px dashed var(--fg-mute);
  text-align: right;
  font-family: var(--f-mono);
  font-size: .68rem;
  color: var(--fg-mute);
  letter-spacing: .15em;
  padding-top: .25rem;
}
.napkin-iceberg__band {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.napkin-iceberg__band:last-child { border-bottom: 0; }
.napkin-iceberg__name {
  font-family: var(--f-serif);
  font-weight: 600;
  color: var(--ib-color, var(--c-oil));
  font-size: .95rem;
  text-align: right;
}
.napkin-iceberg__icon {
  width: 36px; height: 36px;
  border: 1.5px solid var(--ib-color);
  border-radius: 50%;
  color: var(--ib-color);
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: .85rem;
}
.napkin-iceberg__note {
  font-size: .8rem;
  color: var(--fg-2);
  line-height: 1.5;
}
@media (max-width: 600px) {
  .napkin-iceberg__band { grid-template-columns: 1fr; text-align: center; }
  .napkin-iceberg__name { text-align: center; }
  .napkin-iceberg__icon { margin: 0 auto; }
}

/* ----- 7. Quadrant（戲之事）----- */
.napkin-quadrant {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.napkin-quadrant__cell {
  padding: 1.5rem 1.2rem;
  border-right: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  min-height: 140px;
}
.napkin-quadrant__cell:nth-child(2n) { border-right: 0; }
.napkin-quadrant__cell:nth-child(n+3) { border-bottom: 0; }
.napkin-quadrant__title {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: .8rem;
  color: var(--qd-color, var(--c-oil));
}
.napkin-quadrant__cell:nth-child(1) { --qd-color: #c79bd0; }
.napkin-quadrant__cell:nth-child(2) { --qd-color: #d68fb6; }
.napkin-quadrant__cell:nth-child(3) { --qd-color: #e76b66; }
.napkin-quadrant__cell:nth-child(4) { --qd-color: #b89eef; }
.napkin-quadrant__cell ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .82rem;
  color: var(--fg-2);
}
.napkin-quadrant__cell li::before {
  content: "▸  ";
  color: var(--qd-color);
}
.napkin-quadrant__axis {
  position: absolute;
  font-family: var(--f-mono);
  font-size: .65rem;
  color: var(--fg-mute);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.napkin-quadrant__axis--top    { top: -1.2rem; left: 50%; transform: translateX(-50%); }
.napkin-quadrant__axis--right  { right: -.5rem; top: 50%; transform: translate(100%, -50%) rotate(0); }
.napkin-quadrant__axis--bottom { bottom: -1.2rem; left: 50%; transform: translateX(-50%); }
.napkin-quadrant__axis--left   { left: -.5rem; top: 50%; transform: translate(-100%, -50%); }
@media (max-width: 600px) {
  .napkin-quadrant { grid-template-columns: 1fr; }
  .napkin-quadrant__cell { border-right: 0; border-bottom: 1px dashed var(--line); }
  .napkin-quadrant__cell:last-child { border-bottom: 0; }
}

/* ----- 8. Temple（戲之出）----- */
.napkin-temple {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.napkin-temple__roof {
  width: 80%;
  max-width: 520px;
  padding: 1.2rem 1.5rem;
  text-align: center;
  font-family: var(--f-serif);
  font-weight: 700;
  color: #88ca97;
  border: 1.5px solid #88ca97;
  border-bottom: 0;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  margin-bottom: -1px;
  position: relative;
  height: 70px;
  display: grid;
  place-items: end center;
  padding-bottom: .8rem;
}
.napkin-temple__base {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 0 0 2px 2px;
}
.napkin-temple__pillar {
  padding: 1.2rem 1rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  position: relative;
}
.napkin-temple__pillar:nth-child(3n) { border-right: 0; }
.napkin-temple__pillar:nth-child(n+4) { border-bottom: 0; }
.napkin-temple__pillar:nth-child(1) { color: #88ca97; }
.napkin-temple__pillar:nth-child(2) { color: #e0bd7f; }
.napkin-temple__pillar:nth-child(3) { color: #e76b66; }
.napkin-temple__pillar:nth-child(4) { color: #c79bd0; }
.napkin-temple__pillar:nth-child(5) { color: #d68fb6; }
.napkin-temple__pillar:nth-child(6) { color: #b89eef; }
.napkin-temple__name {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .4rem;
}
.napkin-temple__note {
  font-size: .72rem;
  color: var(--fg-2);
  line-height: 1.4;
}
.napkin-temple__floor {
  width: 90%;
  height: 8px;
  margin-top: -1px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-2);
}
@media (max-width: 600px) {
  .napkin-temple__base { grid-template-columns: 1fr; }
  .napkin-temple__pillar { border-right: 0; }
}

/* ----- 9. Two-column（戲之略）----- */
.napkin-twocol {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.napkin-twocol__col {
  padding: 1.5rem 1.2rem;
  background: rgba(255,255,255,.02);
  border: 2px solid var(--c-color);
  border-radius: 2px;
}
.napkin-twocol__col--A { --c-color: #3A6FB5; color: #6a9bd6; }
.napkin-twocol__col--B { --c-color: #D4A04A; color: #e0bd7f; }
.napkin-twocol__label {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: .3rem;
}
.napkin-twocol__stance {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .15em;
  color: var(--fg-mute);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.napkin-twocol__point { margin-bottom: 1rem; }
.napkin-twocol__point:last-child { margin-bottom: 0; }
.napkin-twocol__point h5 {
  font-family: var(--f-serif);
  font-size: .95rem;
  margin-bottom: .3rem;
  color: var(--fg-0);
}
.napkin-twocol__point p { font-size: .8rem; color: var(--fg-2); line-height: 1.55; }
.napkin-twocol__divider {
  display: grid;
  align-items: center;
  font-family: var(--f-mono);
  color: var(--fg-mute);
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-align: center;
  writing-mode: vertical-rl;
}
@media (max-width: 720px) {
  .napkin-twocol { grid-template-columns: 1fr; }
  .napkin-twocol__divider { writing-mode: horizontal-tb; padding: .5rem 0; }
}

/* ----- 10. SWOT（戲之圖）----- */
.napkin-swot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  position: relative;
}
.napkin-swot__cell {
  padding: 1.5rem 1.2rem;
  border: 2px solid var(--sw-color);
  border-radius: 4px;
  background: rgba(255,255,255,.02);
  text-align: center;
  position: relative;
  min-height: 110px;
}
.napkin-swot__cell:nth-child(1) { --sw-color: #88ca97; }
.napkin-swot__cell:nth-child(2) { --sw-color: #e76b66; }
.napkin-swot__cell:nth-child(3) { --sw-color: #6a9bd6; }
.napkin-swot__cell:nth-child(4) { --sw-color: #e0bd7f; }
.napkin-swot__quad {
  font-family: var(--f-mono);
  font-size: 2rem;
  font-weight: 300;
  color: var(--sw-color);
  line-height: 1;
}
.napkin-swot__title {
  font-family: var(--f-serif);
  font-weight: 600;
  margin-top: .6rem;
  color: var(--sw-color);
}
.napkin-swot__note {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .15em;
  color: var(--fg-mute);
  margin-top: .35rem;
  text-transform: uppercase;
}
.napkin-swot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), var(--fg-mute) calc(50% - .5px), var(--fg-mute) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), var(--fg-mute) calc(50% - .5px), var(--fg-mute) calc(50% + .5px), transparent calc(50% + .5px));
  opacity: .25;
  pointer-events: none;
}
@media (max-width: 600px) {
  .napkin-swot { grid-template-columns: 1fr; }
  .napkin-swot::after { display: none; }
}

/* ===========================================================
   Author 區塊 + 表格捲動容器（響應式）
   =========================================================== */
.author-card {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem 2rem;
  align-items: center;
  padding: clamp(1.2rem, 3vw, 2rem);
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c-oil);
  border-radius: 4px;
}
.author-card__avatar {
  width: 110px; height: 110px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 2px solid var(--c-oil);
  box-shadow: 0 0 0 4px var(--bg-0), 0 6px 20px rgba(0,0,0,.5);
  flex-shrink: 0;
}
.author-card__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.author-card__name {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.4rem);
  line-height: 1.2;
}
.author-card__en {
  font-family: var(--f-mono);
  font-size: .85rem;
  letter-spacing: .15em;
  color: var(--c-oil);
  margin-top: .2rem;
}
.author-card__email {
  margin-top: 1rem;
  font-family: var(--f-mono);
  font-size: .9rem;
  word-break: break-all;
}
.author-card__email a {
  color: var(--fg-1);
  border-bottom: 1px solid var(--c-oil);
  padding-bottom: 2px;
}
@media (max-width: 540px) {
  .author-card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1rem;
  }
  .author-card__avatar { margin: 0 auto; width: 96px; height: 96px; }
  .author-card__email { word-break: normal; }
}

/* 表格 → 手機橫向捲動 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border-radius: 2px;
}
.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* ===========================================================
   響應式微調補丁（手機 < 600）
   =========================================================== */
@media (max-width: 600px) {
  /* Hero 標題與 meta 緊湊 */
  .hero { padding-bottom: clamp(2rem, 8vw, 4rem); }
  .hero__title { font-size: clamp(2.4rem, 11vw, 4rem); }
  .hero__sub { font-size: 1rem; }
  .hero__meta { gap: 1rem 1.5rem; font-size: .72rem; }
  .hero__meta span strong { font-size: .9rem; }
  .hero__cta { gap: .6rem; }
  .btn { padding: .75em 1.3em; font-size: .88rem; }

  /* Page hero 二級 */
  .page-hero { padding: 7rem var(--pad-x) 3rem; }

  /* Section 整體間距 */
  .section { padding-block: clamp(2.5rem, 7vw, 5rem); }
  .section-head { margin-bottom: clamp(1.5rem, 4vw, 3rem); }

  /* Chapter section header on mobile：SDG 圖示縮小 */
  .ch-section__sdgs .sdg-icon { --sdg-size: 64px; }
  .ch-section__sdgs { gap: .4rem; }

  /* Chapter section hero label 移上方留空，避免被 padding 蓋住 */
  .ch-section__hero-label { font-size: .65rem; bottom: .8rem; }

  /* 章節牆卡片 */
  .ch-card { aspect-ratio: 5/6; padding: 1.4rem; }
  .ch-card__title { left: 1.4rem; bottom: 4rem; font-size: 1.5rem; }
  .ch-card__sub { left: 1.4rem; bottom: 1.4rem; font-size: .8rem; }
  .ch-card__num { font-size: .7rem; }
  .ch-card__arrow { width: 32px; height: 32px; bottom: 1.4rem; right: 1.4rem; }

  /* 訪談題目卡：num + tag 同一橫排，內文獨立一行 */
  .q-card {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: .5rem .8rem;
    padding: 1rem 1.1rem;
  }
  .q-card__num   { grid-row: 1; grid-column: 1; align-self: center; }
  .q-card > div:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
  .q-card__tag   { grid-row: 1; grid-column: 3; align-self: center; font-size: .65rem; }
  .q-card__text  { font-size: .92rem; }
  .q-card__role  { font-size: .68rem; margin-bottom: .3rem; }

  /* 角色篩選按鈕緊湊 */
  .role-filter { gap: .3rem; }
  .role-filter button { font-size: .68rem; padding: .3em .7em; }

  /* Footer 緊湊 */
  .footer { padding: 3rem var(--pad-x) 1.5rem; }
  .footer__top { gap: 1.5rem; margin-bottom: 2rem; }
  .footer__bottom { font-size: .68rem; gap: .6rem; }

  /* Nav 行動 */
  .nav { padding: .8rem var(--pad-x); }
  .nav__brand { font-size: 1.05rem; }
  .nav__brand small { font-size: .6rem; }

  /* Modal year-band 緊湊 */
  .modal__year-band { margin-top: 1rem; padding-bottom: .8rem; }
  .modal__title { font-size: clamp(1.5rem, 5vw, 1.8rem); }
  .modal__close-btn { width: 36px; height: 36px; }

  /* Diegetic 字距更舒適 */
  .diegetic { font-size: .7rem; padding: .9rem; line-height: 1.55; }

  /* About SDG cell 圖示縮小 */
  .sdg-cell .sdg-icon { --sdg-size: 90px !important; }
  .sdg-cell { padding: 1rem; }
  .sdg-cell h4 { font-size: .9rem; }
  .sdg-cell p { font-size: .76rem; }

  /* About card */
  .about-card { padding: 1.5rem; }
  .about-card__num { font-size: 2rem; }
  .about-card h3 { font-size: 1.05rem; }

  /* SDG strip：legend 換行更舒適 */
  .sdg-strip__legend { gap: .8rem; font-size: .62rem; }
}

/* ===========================================================
   生態系（推測展廳）手機調校
   =========================================================== */
@media (max-width: 480px) {
  .ecosystem { aspect-ratio: 5/7; max-width: 360px; }
  .eco-node { width: 88px; }
  .eco-node__avatar { width: 56px; height: 56px; }
  .eco-node__num { width: 18px; height: 18px; font-size: .62rem; }
  .eco-node__name { font-size: .76rem; }
  .eco-node__theme { font-size: .58rem; letter-spacing: .08em; }
  /* 邊節點往內推，避免溢出 */
  .eco-node[data-id="1"] { left: 22% !important; }
  .eco-node[data-id="5"] { left: 78% !important; }
  .eco-node[data-id="4"] { left: 25% !important; }
  .eco-node[data-id="2"] { left: 75% !important; }
  .eco-axis-label { font-size: .58rem; padding: .12em .5em; }
  .ecosystem__legend { font-size: .55rem; gap: .4rem; bottom: .4rem; }
}

/* ===========================================================
   超小螢幕（< 380）
   =========================================================== */
@media (max-width: 380px) {
  :root { --pad-x: 1rem; }
  .hero__title { font-size: 2.2rem; }
  .ch-section__sdgs .sdg-icon { --sdg-size: 56px; }
  .obj-card__visual::before { font-size: 3rem; }
}

/* ----- Page hero (二級頁面) ----- */
.page-hero {
  padding: 9rem var(--pad-x) 4rem;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 70% 30%, rgba(212,160,74,.12), transparent 60%),
    var(--bg-0);
}
.page-hero h1 {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  margin-top: 1rem;
}
.page-hero .lead {
  margin-top: 1.5rem;
  max-width: 50ch;
  font-family: var(--f-serif);
  font-style: italic;
}