/* ============================================================
   AllocLab 2.0 Typography
   ------------------------------------------------------------
   字型 family 在 Google Fonts 以 <link> 引入於 base.html。
   這份檔案定義 heading / body / numeric / kicker 等 class。
   ============================================================ */

/* ── Heading classes（serif editorial） ───────────────────
   override 全站 word-break: keep-all（改 normal 讓 CJK 自然斷行）
   但保留 line-break: strict（繼承自 body）——strict 禁止 。，；！？ 這類
   CJK 標點開頭成行，不會出現標點孤行。 */
.al-h1, .al-h2, .al-h3, .al-display, .al-lead, .al-body, .al-caption {
  word-break: normal;
  line-break: strict;
}

.al-h1 {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--al-ink-deep);
  margin: 0;
}

.al-h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--al-ink-deep);
  margin: 0;
}

.al-h3 {
  font-family: var(--ff-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--al-ink);
  margin: 0;
}

.al-display {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--al-ink-deep);
  margin: 0;
}

/* ── Body classes ──────────────────────────────────────── */
.al-lead {
  font-family: var(--ff-body);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--al-ink);
}

.al-body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--al-ink);
}

.al-caption {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--al-ink-2);
}

.al-meta {
  font-family: var(--ff-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--al-ink-muted);
}

.al-micro {
  font-family: var(--ff-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--al-ink-muted);
}

/* ── Kicker（小寫 / 字間距大的標籤） ─────────────────── */
.al-kicker {
  font-family: var(--ff-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--al-ink-muted);
  white-space: nowrap;
  word-break: keep-all;
}

/* ── Numeric（tabular figures，所有數字都該用） ────────
   IBM Plex Mono + tabular-nums，數字直直落齊。 */
.al-nums {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
}

/* ── Numeric 大字版（hero 報價） ─────────────────────── */
.al-nums-hero {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--al-ink-deep);
}

/* ── Link 基礎（編輯感下底線） ─────────────────────── */
.al-link {
  color: var(--al-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.al-link:hover,
.al-link:focus-visible {
  border-bottom-color: currentColor;
}


/* ============================================================
   Phase 4 batch hero upgrade
   ------------------------------------------------------------
   全站舊頁面 hero title / eyebrow 字型一次升級，不用動 12 個 HTML。
   選擇器 html [class$="..."] 特異性 0.1.1 壓過頁面 inline <style>
   的單層 class（0.1.0）。階段 5 legacy cleanup 後可移除。
   ============================================================ */

html [class$="-hero-title"],
html [class$="-header-title"] {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--al-ink-deep);
  margin: 0 0 var(--sp-2);
  word-break: normal;
  line-break: strict;
}

html [class$="-hero-eyebrow"],
html [class$="-header-eyebrow"],
html [class$="-hero-sub"] {
  font-family: var(--ff-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--al-ink-muted);
  margin: 0 0 var(--sp-2);
  white-space: nowrap;
  word-break: keep-all;
}

html [class$="-hero-desc"],
html [class$="-hero-tagline"] {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--al-ink-2);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-1);
  word-break: normal;
  line-break: strict;
}