/* ═══════════════════════════════════════════════════════════
   基礎排版與重置
   ═══════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  /* 錨點捲動時在上方留一點呼吸空間 */
  scroll-padding-top: 4rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.7;
  letter-spacing: 0.005em;      /* 小字微微放鬆，較好讀 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: hidden;
}

/* 光暈（hero、線稿底下）刻意畫得比容器大，會撐出橫向捲動 ——
   body 的 overflow-x: hidden 在 iOS Safari 擋不住手指橫向拖動。
   clip 不會產生捲動容器，所以 sticky 的線稿不受影響。 */
main { overflow-x: clip; }

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;     /* 大字收緊：字愈大，字距要愈負 */
  /* 中文標題只在空白處換行 ——「TISF 火災疏散模擬」不會掉一個「擬」到下一行，
     「升降桌 + 兩塊 PCB」會在 + 前後斷開而不是切在「兩塊」中間。
     真的塞不下時 overflow-wrap 才出手硬斷，不會撐破版面。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1 { font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; }

p { margin: 0 0 var(--sp-2); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-ui) var(--ease-out),
              color var(--dur-ui) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }

::selection { background: var(--accent); color: #000; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* 只給螢幕閱讀器 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* 跳過導覽的鍵盤捷徑 */
.skip-link {
  position: fixed; top: var(--sp-2); left: var(--sp-2);
  z-index: 100;
  padding: 0.6em 1em;
  background: var(--ink); color: var(--bg);
  border-radius: var(--r-sm);
  font-size: var(--t-small); font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--dur-ui) var(--spring);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ── 共用：小標籤 ───────────────────────────────────────
   Apple 的小標是無襯線的半粗體，不是等寬大寫 —— 等寬字留給線稿裡的註記，
   那才是「圖紙」的語言；頁面本身的文字要像印刷品。 */
.eyebrow {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  list-style: none; margin: 0; padding: 0;
}
.tags li {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  padding: 0.4em 0.85em;
  background: #ffffff12;
  border-radius: 999px;
}

.wrap { padding-inline: var(--gutter); }

/* ── 內容進場：小幅度上浮 + 由糊到清，不做大位移 ─────────── */
.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  filter: blur(8px);
  transition: opacity var(--dur-enter) var(--ease-out),
              transform 1.1s var(--ease-out),
              filter var(--dur-enter) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ═══ 降低動態偏好：位移全關，只留淡入 ═══════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transform: none !important; filter: none !important; transition: opacity 0.2s ease; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}