/* AABE 共用樣式表 v2.0 — 國際級設計系統（OKLCH + Modular Scale）
 * Benchmark: NYT Visual / FT Graphics / Anthropic / Apple
 * Updated: 2026-05-14 */

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

:root {
  /* ─────────────────────────────────────────────────
   * 色彩系統 — OKLCH (with HEX fallback)
   * 採 OKLCH 是因為感知均勻 + 對比可預測
   * 舊瀏覽器 fallback 用 HEX
   * ───────────────────────────────────────────────── */

  /* 品牌主色 */
  --brand-orange: #EB9B31;                       /* fallback */
  --brand-orange: oklch(0.74 0.13 65);           /* L=74% 明亮溫暖 */
  --brand-teal: #2FA598;                          /* fallback */
  --brand-teal: oklch(0.63 0.08 185);            /* L=63% 平靜對比 */
  --brand-gold: #C9A961;                          /* fallback */
  --brand-gold: oklch(0.72 0.09 85);             /* 金色家徽用 */

  /* 中性灰階（perceptual gradient）*/
  --ink: #0a0a0a;                                 /* fallback */
  --ink: oklch(0.15 0.005 60);                   /* 主文字 L=15% */
  --ink-2: #3a3f48;                               /* fallback */
  --ink-2: oklch(0.35 0.01 250);                 /* 次文字 L=35% */
  --ink-3: #7a8089;                               /* fallback */
  --ink-3: oklch(0.55 0.01 250);                 /* 提示 L=55% */

  /* 分隔線 + 背景 */
  --line: #e5e7eb;                                /* fallback */
  --line: oklch(0.91 0.003 250);                 /* 分隔線 L=91% */
  --line-soft: #f4f5f7;                           /* fallback */
  --line-soft: oklch(0.96 0.003 250);            /* 軟分隔 L=96% */
  --bg-soft: #f5f5f5;                             /* fallback */
  --bg-soft: oklch(0.96 0.003 90);               /* 軟背景 L=96% */
  --warm: #fdf6e3;                                /* fallback */
  --warm: oklch(0.97 0.025 90);                  /* 暖米背景 L=97% */

  /* ─────────────────────────────────────────────────
   * 字級系統 — Perfect Fourth Modular Scale (1.333)
   * base 16px → 21 → 28 → 37 → 50 → 66 → 88 → 117
   * 這套字級保證視覺節奏，避免「亂挑字級」
   * ───────────────────────────────────────────────── */
  --t-xs:      0.75rem;   /* 12px  · 小標籤、kicker */
  --t-sm:      0.875rem;  /* 14px  · 輔助文字 */
  --t-base:    1rem;      /* 16px  · 基準 */
  --t-md:      1.3125rem; /* 21px  · 引言、強調 */
  --t-lg:      1.75rem;   /* 28px  · 引用 / blockquote */
  --t-xl:      2.3125rem; /* 37px  · h3 */
  --t-2xl:     3.125rem;  /* 50px  · h2 */
  --t-3xl:     4.125rem;  /* 66px  · h1 */
  --t-4xl:     5.5rem;    /* 88px  · hero */
  --t-5xl:     7.3125rem; /* 117px · 超大數字 */

  /* ─────────────────────────────────────────────────
   * 間距系統 — 8px 倍數
   * ───────────────────────────────────────────────── */
  --s-1:  0.25rem; /* 4px */
  --s-2:  0.5rem;  /* 8px */
  --s-3:  0.75rem; /* 12px */
  --s-4:  1rem;    /* 16px */
  --s-6:  1.5rem;  /* 24px */
  --s-8:  2rem;    /* 32px */
  --s-12: 3rem;    /* 48px */
  --s-16: 4rem;    /* 64px */
  --s-20: 5rem;    /* 80px */
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Noto Sans TC', -apple-system, sans-serif;
  color: var(--ink); background: #fff;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* A11y */
.skip-link { position: absolute; top: -100px; left: 0; background: #0a0a0a; color: #fff; padding: 12px 20px; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; z-index: 9999; text-decoration: none; transition: top 0.2s; }
.skip-link:focus { top: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* ─── Top bar ─── */
.topbar { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1280px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 18px; }
.topbar-logo { display: flex; align-items: center; }
.topbar-logo img { height: 52px; display: block; width: auto; }
.topbar-nav { display: flex; gap: 22px; margin-left: auto; font-size: 0.92rem; font-weight: 500; }
.topbar-nav a { color: var(--ink-2); transition: color 0.2s; white-space: nowrap; }
.topbar-nav a:hover { color: var(--brand-orange); }
.topbar-nav a.active { color: var(--ink); border-bottom: 2px solid var(--brand-orange); padding-bottom: 4px; }

/* Hamburger menu (mobile only) */
.nav-toggle { display: none; }
.nav-toggle-btn { display: none; cursor: pointer; width: 32px; height: 32px; align-items: center; justify-content: center; margin-left: auto; }
.nav-toggle-btn span { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; transition: all 0.3s; }
.nav-toggle-btn span::before, .nav-toggle-btn span::after { content: ""; display: block; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink); transition: all 0.3s; }
.nav-toggle-btn span::before { top: -7px; }
.nav-toggle-btn span::after { top: 7px; }
.nav-toggle:checked ~ .nav-toggle-btn span { background: transparent; }
.nav-toggle:checked ~ .nav-toggle-btn span::before { top: 0; transform: rotate(45deg); }
.nav-toggle:checked ~ .nav-toggle-btn span::after { top: 0; transform: rotate(-45deg); }

/* ─── Chapter break ─── */
.chapter { display: flex; align-items: baseline; gap: 14px; max-width: 1040px; margin: 0 auto; padding: 56px 32px 0; }
.chapter-num { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.32em; color: var(--brand-orange); text-transform: uppercase; }
.chapter-line { flex: 1; height: 1.5px; background: var(--ink); }
.chapter-label { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.28em; color: var(--ink-3); text-transform: uppercase; }

/* ─── Page hero ─── */
.page-hero { padding: 80px 32px 56px; max-width: 1040px; margin: 0 auto; text-align: center; border-bottom: 1px solid var(--line); }
.page-hero-kicker { display: inline-block; font-size: 0.72rem; letter-spacing: 0.3em; color: var(--brand-orange); font-weight: 600; text-transform: uppercase; margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 900; line-height: 1.2; letter-spacing: 0.02em; margin-bottom: 16px; }
.page-hero .lead { font-size: 1.08rem; color: var(--ink-2); max-width: 680px; margin: 0 auto; line-height: 1.85; }
.page-hero .mark { display: inline-block; width: 40px; height: 3px; background: var(--brand-orange); border-radius: 2px; margin-top: 28px; }

/* ─── Section head ─── */
.section { max-width: 1040px; margin: 0 auto; padding: 64px 32px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 16px; margin-bottom: 32px; border-bottom: 2px solid var(--ink); }
.section-title { font-size: 1.8rem; font-weight: 900; letter-spacing: 0.02em; }
.section-hint { font-size: 0.78rem; color: var(--ink-3); letter-spacing: 0.18em; text-transform: uppercase; }

/* ─── Footer ─── */
footer { background: var(--ink); color: #fff; padding: 64px 32px 32px; }
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 32px; border-bottom: 1px solid #2a2a2a; }
.footer-col h4 { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: #b8bcc3; margin-bottom: 16px; }
.footer-col a { display: block; color: #fafafa; padding: 4px 0; opacity: 0.85; }
.footer-col a:hover { opacity: 1; color: var(--brand-orange); }
.footer-bottom { padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 0.85rem; color: #b8bcc3; }

/* ─── Buttons ─── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 4px; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.2s; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--brand-orange); }
.btn-secondary { border: 1px solid var(--ink); color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: #fff; }

/* ─── Common content blocks ─── */
.callout { background: var(--bg-soft); border-left: 4px solid var(--brand-orange); padding: 24px 28px; border-radius: 0 4px 4px 0; margin: 32px 0; }
.callout strong { color: var(--brand-orange); }

/* Mobile */
@media (max-width: 768px) {
  /* topbar 整體緊縮 */
  .topbar-inner { padding: 10px 16px; gap: 12px; flex-wrap: wrap; }

  /* logo 手機自動換成 icon-only via <picture> */
  .topbar-logo img { height: 38px; }

  /* 顯示 hamburger 按鈕 */
  .nav-toggle-btn { display: flex; }

  /* nav 預設隱藏，checked 時展開 */
  .topbar-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    margin-top: 4px;
  }
  .nav-toggle:checked ~ .topbar-nav { display: flex; }
  .topbar-nav a { padding: 12px 4px; border-bottom: 1px solid var(--line-soft); font-size: 0.95rem; }
  .topbar-nav a:last-child { border-bottom: 0; }
  .topbar-nav a.active { border-bottom-color: var(--brand-orange); }

  .chapter { padding: 36px 20px 0; gap: 10px; }
  .chapter-num, .chapter-label { font-size: 0.6rem; letter-spacing: 0.22em; }
  .page-hero { padding: 44px 20px 32px; }
  .page-hero h1 { font-size: clamp(2.4rem, 9vw, 3.2rem); }
  .section { padding: 40px 20px; }
  .footer-cols { grid-template-columns: 1fr; gap: 28px; }
}

/* 較小手機 (~375px) 進一步調整 */
@media (max-width: 400px) {
  .topbar-logo img { height: 34px; }
}