/* ===========================================================
   群陽官網 — 版面與元件
   依 ADR 013（深色章節系統）。數值一律取自 tokens.css，不在此手刻。

   結構鐵則
     1. 背景 full-bleed（.band / .section），內容置中（.container）
     2. 晶格是版面基底，不是插圖 —— 由 .band 自動鋪，模板不必加標記
     3. 琥珀永遠是實心塊配近黑字，從不當文字色，每章至多一次
     4. 全站零圓角：硬邊系統
   =========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }

:focus-visible { outline: var(--focus); outline-offset: 3px; }

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 700; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* 跳至內容：取得焦點時才現形，且落在深底上 */
a.sr-only:focus-visible {
  position: fixed; top: var(--s-2); left: var(--s-2); z-index: 60;
  width: auto; height: auto; margin: 0; clip-path: none;
  background: var(--amber); color: var(--amber-ink);
  padding: 12px 20px; font-weight: 600;
}

/* --- 版面骨架 ------------------------------------------------ */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { width: 100%; padding-block: var(--section-y); }
.section--flush { padding-block: 0; }

.measure    { max-width: var(--measure); }
.measure-sm { max-width: var(--measure-sm); }

/* --- 晶格：每一帶都有，包含亮帶 ------------------------------
   六邊形尖頂、週期 126×72.75，與所有六邊形記號同向。
   用背景圖而非 <svg>，模板只要掛 .band 就會有底。 */

.band,
.section { position: relative; isolation: isolate; }
.band::before,
.section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: repeat;
  background-size: var(--lat-w) var(--lat-h);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='72.75' viewBox='0 0 126 72.75'%3E%3Cg fill='none' stroke='rgba(214,232,255,0.115)' stroke-width='1'%3E%3Cpath d='M42,36.37 L21,72.75 L-21,72.75 L-42,36.37 L-21,0 L21,0 Z'/%3E%3Cpath d='M105,0 L84,36.37 L42,36.37 L21,0 L42,-36.37 L84,-36.37 Z'/%3E%3Cpath d='M105,72.75 L84,109.12 L42,109.12 L21,72.75 L42,36.37 L84,36.37 Z'/%3E%3Cpath d='M168,36.37 L147,72.75 L105,72.75 L84,36.37 L105,0 L147,0 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.band > *,
.section > * { position: relative; z-index: 1; }

/* 亮半場用深描邊版 */
.paper::before,
.band--paper::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='72.75' viewBox='0 0 126 72.75'%3E%3Cg fill='none' stroke='rgba(16,27,40,0.085)' stroke-width='1'%3E%3Cpath d='M42,36.37 L21,72.75 L-21,72.75 L-42,36.37 L-21,0 L21,0 Z'/%3E%3Cpath d='M105,0 L84,36.37 L42,36.37 L21,0 L42,-36.37 L84,-36.37 Z'/%3E%3Cpath d='M105,72.75 L84,109.12 L42,109.12 L21,72.75 L42,36.37 L84,36.37 Z'/%3E%3Cpath d='M168,36.37 L147,72.75 L105,72.75 L84,36.37 L105,0 L147,0 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* 帶的三個平面。地色本身不設在 .band，避免內頁忘了指定就透出 body */
.band--ground { background: var(--ground); }
.band--well   { background: var(--well); }
.band--plate  { background: var(--plate); }
.band--cta    { background: var(--plate); }

/* --- 小標與章首 --------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500; letter-spacing: .09em;
  color: var(--ink-faint);
}
/* 大寫只在英文版套用：中英混排時 uppercase 會把「IoT」壓成「IOT」 */
:lang(en) .eyebrow { text-transform: uppercase; }

/* 章牌：六邊形尺度階梯的 60px 那一級 */
.plate-n {
  position: relative; display: inline-grid; place-items: center;
  width: 60px; height: 52px; margin-bottom: var(--s-2);
  color: var(--ink-muted);
}
/* 六邊形外框由模板內嵌 SVG 提供，stroke="currentColor" 才能跟著半場換色 */
.plate-n svg { position: absolute; inset: 0; opacity: .4; }
.plate-n b {
  font-family: var(--font-mono); font-size: 15px; font-weight: 500;
  letter-spacing: .04em; color: var(--ink-muted);
}

.chead { margin-bottom: var(--s-6); }
.chead h1,
.chead h2:not(.eyebrow) { font-size: var(--t-ch); letter-spacing: -.015em; margin-top: var(--s-2); max-width: 19em; }
.chead .lead { margin-top: var(--s-4); }

/* 內頁區段標題。
   :not(.eyebrow) 不是潔癖 —— 模板有 <h2 class="eyebrow">，而 .section-head h2
   的特異性(0,2,0)會壓過 .eyebrow(0,1,0)，把小標渲染成 48px 灰字。
   這個坑踩過四次，把它寫進選擇器而不是靠記得。 */
.section-head { margin-bottom: var(--s-6); }
.section-head h1 { font-size: var(--t-ch); letter-spacing: -.015em; margin-top: var(--s-2); max-width: 19em; }
.section-head h2:not(.eyebrow) { font-size: var(--t-h2); letter-spacing: -.01em; margin-top: var(--s-2); max-width: 22em; }
.section-head p { margin-top: var(--s-3); color: var(--ink-muted); max-width: var(--measure); line-height: var(--lh-loose); }

.lead { color: var(--ink-muted); max-width: var(--measure); line-height: var(--lh-loose); }

/* --- 排列基本型 --------------------------------------------- */

.stack   { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.grid    { display: grid; gap: var(--s-3); }

.grid--auto { grid-template-columns: 1fr; }
@media (min-width: 700px)  { .grid--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid--auto { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }

.split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.split > .split__end { flex-shrink: 0; white-space: nowrap; }

/* --- 面板與卡片 --------------------------------------------- */

.panel { background: var(--surface); border: 1px solid var(--line); padding: var(--pad-panel); }
.card  { background: var(--surface); border: 1px solid var(--line); padding: var(--pad-card); display: grid; gap: var(--s-2); align-content: start; }
.card h3 { font-size: var(--t-h3); }
.card__meta { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .1em; color: var(--ink-faint); }
.card__body { font-size: var(--t-sm); color: var(--ink-muted); line-height: 1.8; }
a.card { transition: background .18s; }
a.card:hover { background: var(--surface-2); color: inherit; }
.card--accent { background: var(--surface-2); }

@media (max-width: 639px) { :root { --pad-panel: var(--s-3); } }

/* --- 按鈕 ---------------------------------------------------- */
/* 琥珀鈕是每一章唯一的琥珀事件。ghost 用線框，不用第二個顏色。 */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px;
  font-family: var(--font-latin); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .02em; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
}
.btn svg { flex: none; }
.btn--primary { background: var(--amber); color: var(--amber-ink); }
.btn--primary:hover { background: #ffb340; color: var(--amber-ink); }
.btn--ghost {
  color: var(--ink-muted); border: 0; border-bottom: 1px solid var(--line-2);
  padding: 0 2px; min-height: 48px;
}
.btn--ghost:hover { color: var(--ink); border-color: var(--ink); }
.btn--onlight { border-color: var(--stone-ink); color: var(--stone-ink); }
.btn--onlight:hover { background: var(--stone-ink); color: var(--stone); }

@media (max-width: 479px) { .btn--primary { width: 100%; } }

/* --- 頁首 ---------------------------------------------------- */

.masthead { background: var(--ground); position: relative; z-index: 30; }
.masthead .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-3); }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-latin); font-size: 16px; font-weight: 600; letter-spacing: .01em; color: var(--ink); }
.brand:hover { color: var(--ink); }

.mainnav ul { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.mainnav a, .langswitch {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink-muted); font-size: var(--t-sm); white-space: nowrap;
}
.mainnav a:hover { color: var(--ink); }

/* 語言選單：details/summary，無 JS 也能用 */
.langswitch-wrap { position: relative; }
.langswitch {
  border: 1px solid var(--line-2); padding: 6px 14px; min-width: 108px;
  justify-content: center; background: none; font-family: inherit; cursor: pointer;
  list-style: none; white-space: nowrap; color: var(--ink-muted);
}
.langswitch::-webkit-details-marker { display: none; }
.langswitch-wrap[open] .langswitch { border-color: var(--amber); color: var(--ink); }
/* 選擇器需勝過 .mainnav ul（0,1,1）——否則下拉會被排成橫向一列，
   使用者以為點 English 實際點到第一項。用 .mainnav .langmenu（0,2,0）。 */
.mainnav .langmenu {
  display: grid; gap: 0;
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 180px; background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
.mainnav .langmenu a { display: block; padding: 12px 16px; min-height: 44px; font-size: var(--t-sm); color: var(--ink-muted); }
.mainnav .langmenu a:hover { background: var(--surface-2); color: var(--ink); }
.mainnav .langmenu a[aria-current] { font-weight: 600; color: var(--ink); }

.navtoggle { display: none; min-height: 44px; min-width: 44px; background: none; border: 1px solid var(--line-2); color: var(--ink); cursor: pointer; }
@media (max-width: 1023px) {
  .mainnav ul { display: none; }
  .navtoggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* --- 封面 ---------------------------------------------------- */

.hero { position: relative; overflow: hidden; background: var(--ground); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 64% 46%;
  filter: saturate(1.02) contrast(1.12) brightness(1.06);
}
/* 陡分界，不是全幅淡出：左側實心暗面放字，右側照片全亮 */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(93deg, #050d18 0 34%, rgba(5,13,24,.93) 47%, rgba(5,13,24,.36) 64%, rgba(5,13,24,0) 80%);
}
.hero .container { position: relative; z-index: 2; padding-block: clamp(var(--s-6), 8vw, 110px) var(--s-8); }
.hero h1 { font-size: var(--t-hero); letter-spacing: -.02em; max-width: 14em; }
.hero__lead { margin-top: var(--s-4); color: var(--ink-muted); font-size: clamp(15px, 1.45vw, 18px); line-height: var(--lh-loose); max-width: var(--measure); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-5); }

@media (max-width: 820px) {
  .hero__media img { object-position: 76% 32%; }
  .hero__scrim { background: linear-gradient(180deg, rgba(5,13,24,.90) 0 44%, rgba(5,13,24,.70) 70%, rgba(5,13,24,.90) 100%); }
  .hero .container { padding-block: var(--s-6) var(--s-7); }
}

/* --- 樞紐圖 --------------------------------------------------
   兩側欄用同一個算出來的寬度（--hcol）→ 等寬、核心正中、
   餘裕全給連接線。用 1fr 會被 CJK 的 min-content 拉歪。 */

.band--well.section { padding-block: var(--s-8); }

.hub { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) {
  /* 兩側用 1fr → 定義上等寬，核心必定正中（用 auto 會被各語言的
     min-content 拉歪）。--hcol 只當上限，空間不足時字換行，不溢出。 */
  .hub {
    grid-template-columns: minmax(0, 1fr) minmax(48px, .6fr) auto minmax(48px, .6fr) minmax(0, 1fr);
    gap: var(--s-2);
  }
  .hub__col { width: 100%; max-width: var(--hcol); }
  .hub__col:first-of-type { justify-self: end; }
  .hub__col--r { justify-self: start; }
}
.hub__col { display: grid; gap: 2px; }
.hub__col--r { text-align: right; }

.node {
  display: flex; align-items: center; gap: var(--node-gap);
  padding: clamp(18px, 2.1vw, 30px) 0;
  border-top: 1px solid var(--line);
  font-size: var(--node-fs); color: var(--ink-muted);
}
.hub__col--r .node { flex-direction: row-reverse; }
.node::before {
  content: ""; flex: none;
  width: var(--node-mk); aspect-ratio: 26 / 22.5; height: auto;
  background: var(--ink-faint);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.node:last-child { border-bottom: 1px solid var(--line); }

.hub__core { width: clamp(228px, 30vw, 432px); height: auto; justify-self: center; }


/* 核心六邊形：顏色一律取自 token，SVG 不得手刻色值 */
.hub__core .core-face  { fill: var(--surface); }
.hub__core .core-inner { fill: none; stroke: rgba(214, 232, 255, .16); }
.hub__core .core-spoke { fill: none; stroke: rgba(214, 232, 255, .20); }
.hub__core .core-amber { fill: var(--amber); }
.hub__core .core-node  { fill: #7d93b5; }

/* 連接器：一條虛線＋一個指向核心的箭頭。兩側都指進核心 ——
   這一節講的就是「兩邊都接到中間這一層」。方向必須跟擺放位置一致。 */
.hub__link { position: relative; display: grid; justify-items: center; gap: 12px; text-align: center; }
.hub__mech { font-family: var(--font-mono); font-size: clamp(15px, 1.45vw, 20px); letter-spacing: .14em; color: var(--ink-muted); }
.hub__arrow {
  display: block; position: relative; width: 1px; height: 56px; margin-inline: auto;
  background-image: repeating-linear-gradient(to bottom, rgba(147,168,196,.5) 0 5px, transparent 5px 9px);
}
.hub__arrow::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border-top: 1.5px solid var(--ink-muted); border-right: 1.5px solid var(--ink-muted);
}
.hub__link--l .hub__arrow::after { bottom: 0; left: 50%; transform: translate(-50%, -3px) rotate(135deg); }
.hub__link--r .hub__arrow::after { top: 0; left: 50%; transform: translate(-50%, 3px) rotate(-45deg); }

@media (min-width: 900px) {
  .hub__link { display: block; }
  .hub__mech { position: absolute; bottom: calc(50% + 11px); left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .hub__arrow {
    width: 100%; height: 1px; margin-inline: 0;
    background-image: repeating-linear-gradient(to right, rgba(147,168,196,.5) 0 5px, transparent 5px 9px);
  }
  .hub__link--l .hub__arrow::after { left: auto; bottom: auto; right: 0; top: 50%; transform: translate(3px, -50%) rotate(45deg); }
  .hub__link--r .hub__arrow::after { left: 0; top: 50%; transform: translate(-3px, -50%) rotate(-135deg); }
}

.hub__note {
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line);
  color: var(--ink-muted); max-width: var(--measure); line-height: var(--lh-loose); font-size: 18px;
}
.hub__note strong { color: var(--ink); font-weight: 500; }

/* --- 入口帶 -------------------------------------------------- */

.band--plate.section { padding-bottom: var(--s-6); }

.entries { display: grid; gap: 1px; background: var(--line); margin-top: var(--s-6); }
@media (min-width: 700px)  { .entries { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .entries { grid-template-columns: repeat(4, 1fr); } }

.entry {
  background: var(--surface); padding: var(--s-4) var(--s-3) var(--s-5);
  display: grid; gap: var(--s-2); align-content: start; transition: background .18s;
}
.entry:hover { background: var(--surface-2); color: inherit; }
.entry__k { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-faint); letter-spacing: .1em; }
.entry h3 { font-size: var(--t-h3); }
.entry p { color: var(--ink-muted); font-size: var(--t-sm); line-height: 1.8; }
.entry__go {
  margin-top: var(--s-2); display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .08em; color: var(--ink-faint);
}
.entry:hover .entry__go { color: var(--ink); }
.entry--mark { background: var(--surface-2); }
.entry--mark .entry__k { color: var(--ink); }

/* 這一章的琥珀：被標記的那一格 */
.amber-hex {
  display: inline-block; width: 15px; height: 13px; background: var(--amber);
  vertical-align: -2px; margin-right: 9px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

/* --- 接縫 ----------------------------------------------------
   亮章是一張被晶格切邊的紙。齒 = 晶格六邊形的上半／下半
   （邊長 42、對邊 72.75、週期 126），與亮帶自己的晶格同相位。 */

.seam {
  height: var(--hex-seam); position: relative; z-index: 2;
  background-color: var(--plate); background-repeat: repeat-x;
  background-size: var(--lat-w) var(--hex-seam);
}
.seam--in  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='36.37' viewBox='0 0 126 36.37'%3E%3Cpath d='M21 36.37 L42 0 H84 L105 36.37 Z' fill='%23d8d0bf'/%3E%3C/svg%3E"); }
.seam--out { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='36.37' viewBox='0 0 126 36.37'%3E%3Cpath d='M21 0 L42 36.37 H84 L105 0 Z' fill='%23d8d0bf'/%3E%3C/svg%3E"); }

/* --- 亮半場 -------------------------------------------------- */

.paper { background: var(--stone); color: var(--stone-ink); position: relative; isolation: isolate; }
.paper__open,
.paper__close { background: var(--stone-d); position: relative; }
.paper__body  { position: relative; }
.paper__open .container,
.paper__body .container,
.paper__close .container { position: relative; z-index: 1; padding-block: var(--section-y); }
.paper__open .lead { margin-top: var(--s-4); font-size: clamp(16px, 1.5vw, 18px); max-width: 36em; }
.paper__close p {
  max-width: 24em; font-size: clamp(19px, 2.4vw, 28px); line-height: 1.65;
  letter-spacing: -.005em; color: var(--stone-muted); text-wrap: balance;
}
.paper__close p strong { color: var(--stone-ink); font-weight: 700; }

/* 場域卡（.field 已被表單佔用，此處用 .scene） */
.scenes { display: grid; gap: var(--s-5) var(--s-4); }
@media (min-width: 360px) { .scenes { grid-template-columns: 1fr 1fr; } }

.scene figure { margin: 0; position: relative; }
.scene img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(.94) contrast(1.16) brightness(.8);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 28px) 100%, 0 100%);
}
.scene__t {
  margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--stone-line);
  font-size: clamp(18px, 2.2vw, 21px); font-weight: 700; line-height: 1.35;
}
.scene__d { margin-top: 8px; font-size: clamp(14px, 1.15vw, 15px); color: var(--stone-muted); line-height: 1.75; max-width: 22em; }

/* --- CTA 帶 -------------------------------------------------- */

.band--cta .container { padding-block: var(--section-y); display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .band--cta .container { grid-template-columns: 1fr auto; align-items: end; gap: var(--s-6); } }
.band--cta h2 { font-size: var(--t-ch); max-width: 16em; letter-spacing: -.015em; margin-top: 10px; }
.band--cta p { margin-top: var(--s-3); color: var(--ink-muted); max-width: var(--measure-sm); }

/* 內頁的 CTA 面板：抬起的平台，與首頁第四章同一個面 */
.section--dark { background: var(--plate); padding: var(--pad-panel); }

/* --- 頁尾 ---------------------------------------------------- */

.sitefoot { background: var(--ground); border-top: 1px solid var(--line); position: relative; }
.sitefoot .container { position: relative; z-index: 1; padding-block: var(--s-5); display: grid; gap: var(--s-4); }
.sitefoot address {
  font-style: normal; font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-faint); line-height: 2; margin-top: var(--s-2);
}
.sitefoot__navs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.sitefoot nav ul { display: grid; gap: 2px; }
.sitefoot nav a { display: block; padding-block: 10px; min-height: 44px; font-size: 13px; color: var(--ink-muted); }
.sitefoot nav a:hover { color: var(--ink); }
@media (min-width: 768px) {
  .sitefoot .container { grid-template-columns: 1fr auto; align-items: start; }
  .sitefoot__navs { gap: var(--s-6); }
}

/* --- 麵包屑 -------------------------------------------------- */

.crumb { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em; color: var(--ink-faint); margin-bottom: var(--s-4); }
.crumb a:hover { color: var(--ink); }
.crumb span[aria-hidden] { margin-inline: 8px; }

/* --- 入口頁：處境 / 接上平台之後 兩欄對照 ------------------- */

.compare { display: grid; gap: 1px; background: var(--line); }
@media (min-width: 768px) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.panel--accent { background: var(--surface-2); }

.ticks { display: grid; gap: var(--s-2); font-size: 15px; line-height: var(--lh-base); color: var(--ink-muted); }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks li::before {
  content: ""; flex-shrink: 0; margin-top: .5em;
  width: 11px; height: 10px; background: var(--ink-faint);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.panel--accent .ticks li::before { background: var(--amber); }

/* --- 標籤 chip ----------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  border: 1px solid var(--line-2); background: var(--surface);
  padding: 9px 18px; font-size: var(--t-sm); color: var(--ink-muted);
  display: inline-flex; align-items: center; min-height: 44px;
}

/* --- 定義清單 ------------------------------------------------ */

.datalist { display: grid; gap: 0; }
.datalist > div { display: grid; gap: 4px; padding-block: var(--s-2); border-bottom: 1px solid var(--line); }
.datalist dt { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em; color: var(--ink-faint); }
.datalist dd { margin: 0; font-size: 15px; }
.datalist > div:last-child { border-bottom: 0; }
@media (min-width: 640px) { .datalist > div { grid-template-columns: 220px 1fr; gap: var(--s-3); align-items: baseline; } }

/* --- 法務頁：側欄 + 內文 ------------------------------------- */

.legal { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 900px) { .legal { grid-template-columns: 220px 1fr; gap: var(--s-6); } }
.legal__side ul { display: grid; gap: 2px; margin-top: var(--s-2); }
.legal__side a { display: block; padding-block: 8px; font-size: var(--t-sm); color: var(--ink-muted); }
.legal__side a:hover { color: var(--ink); }

.notice {
  border-left: 3px solid var(--amber); background: var(--surface);
  padding: var(--s-3); font-size: var(--t-sm); color: var(--ink-muted); margin-bottom: var(--s-4);
}

/* 由 Markdown 產生的內文 */
.prose { max-width: var(--measure); }
.prose h2 { font-size: clamp(20px, 2.6vw, 26px); margin-top: var(--s-6); margin-bottom: var(--s-2); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; margin-top: var(--s-5); margin-bottom: var(--s-1); }
.prose p { margin-block: var(--s-2); line-height: var(--lh-loose); color: var(--ink-muted); }
.prose ul { list-style: none; display: grid; gap: var(--s-1); margin-block: var(--s-2); }
.prose ul li { display: flex; gap: 12px; line-height: var(--lh-loose); color: var(--ink-muted); }
.prose ul li::before {
  content: ""; flex-shrink: 0; margin-top: .72em;
  width: 9px; height: 8px; background: var(--ink-faint);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.prose a:hover { border-color: var(--ink); }
.prose table { border-collapse: collapse; width: 100%; margin-block: var(--s-3); font-size: var(--t-sm); }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.prose th { background: var(--surface); font-weight: 600; color: var(--ink); }
.prose code { background: var(--surface); font-family: var(--font-mono); padding: 2px 6px; font-size: .92em; }

/* --- 表單 ---------------------------------------------------- */

.form { display: grid; gap: var(--s-3); }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--t-sm); font-weight: 600; }
.field input, .field textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2);
  padding: 11px 12px; min-height: 44px; width: 100%;
}
.field input:focus-visible, .field textarea:focus-visible { outline: var(--focus); outline-offset: 1px; }
.field textarea { min-height: 88px; resize: vertical; }
.field__help { font-size: 13px; color: var(--ink-muted); line-height: var(--lh-base); }
.field__opt { font-weight: 400; color: var(--ink-faint); }
.form__error {
  border-left: 3px solid #ff6b5e; background: rgba(255, 107, 94, .1);
  padding: var(--s-2) var(--s-3); font-size: var(--t-sm); color: #ffb3ac;
}
/* 蜜罐：不用 display:none，部分機器人會略過被隱藏的欄位 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- 窄幅 ---------------------------------------------------- */

@media (max-width: 640px) {
  .band--well.section { padding-block: var(--s-6); }
  .scenes { gap: var(--s-4) var(--s-3); }
  .entries { margin-top: var(--s-5); }
  .hub { gap: var(--s-4); }
  .hub__note { margin-top: var(--s-6); }
}