/* Base — HTML 元素基底樣式 */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans-zh);
  font-size: var(--fs-base);
  color: var(--c-ink);
  background: var(--c-bg);
  font-feature-settings: normal; /* palt 關閉 → 全形標點間距（逗號後留空間）*/
  line-height: 1.75;             /* CJK 閱讀友善 */
  letter-spacing: 0.01em;
}

p {
  line-height: 1.85;
  margin-bottom: 0;
}
p + p { margin-top: var(--sp-4); }

::selection {
  background: var(--c-accent);
  color: var(--c-ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: inherit;  /* 跟父層走，避免暗底 hover 變黑底黑字 */
}

h1 { font-size: var(--fs-3xl); font-weight: 800; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); text-transform: uppercase; letter-spacing: 0.08em; }

p { color: var(--c-ink-2); }

a {
  color: var(--c-ink);
  text-decoration: none;
  transition: color .2s var(--ease-out);
}

a:hover { color: var(--c-brand); }

/* —— Utility（最少使用，必要時才掛）—— */
.u-en { font-family: var(--font-sans-en); }
.u-mono { font-family: var(--font-mono); }
/* 不斷行：包住人名、片語等不該被拆開的單位（中文可在任意字間換行） */
.nobr { white-space: nowrap; }
.u-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* —— 區塊垂直節奏 —— */
section { position: relative; }
.section { padding-block: clamp(4rem, 8vw, 8rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 5rem); }
.section--hero  { padding-block: clamp(5rem, 10vw, 10rem); }

/* —— Container —— */
.container {
  width: var(--container);
  margin-inline: auto;
}
.container--narrow {
  width: var(--container-narrow);
  margin-inline: auto;
}

/* —— Scroll Reveal 預設狀態 —— */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
[data-reveal][data-delay="5"] { transition-delay: .40s; }