/* ============================================================
   base.css — 设计令牌 · 字体 · 重置 · 基础排版
   专题：中外合作办学 EMBA 全景对比（2026）
   风格：画册编辑（大图主导 / full-bleed / 非对称双栏 / 图注必填）
   配色：深蓝 #0B1F3A 主色 + 金棕 #B08D57 强调（浅色站点）
   ============================================================ */

:root {
  /* ---- 色彩令牌 ---- */
  --color-primary: #0b1f3a; /* 深蓝：主色 */
  --color-primary-soft: #1e3a5f; /* 深蓝派生：次级标题/分隔 */
  --color-primary-faint: #e8edf3; /* 深蓝极浅底：表格头/徽章底 */
  --color-accent: #b08d57; /* 金棕：强调色（按钮/关键数据/链接） */
  --color-accent-deep: #96754a; /* 金棕加深：hover */
  --color-accent-faint: #f5efe6; /* 金棕极浅底：强调区块 */
  --color-bg: #ffffff; /* 页面底 */
  --color-bg-sub: #f5f6f8; /* 次底（章节交替） */
  --color-ink: #1a1a1a; /* 正文 */
  --color-ink-sub: #5a6472; /* 次要文字 */
  --color-ink-faint: #8a93a0; /* 辅助文字（图注/来源） */
  --color-line: #dde2e8; /* 分隔线 */
  --color-line-dark: #c4cbd4; /* 表格外框 */
  --color-white: #ffffff;

  /* ---- 字阶令牌（五级） ---- */
  --fs-display: 56px; /* 主标题 */
  --fs-h2: 36px; /* 章节标题 */
  --fs-h3: 24px; /* 卡片标题 */
  --fs-sub: 18px; /* 副标题 */
  --fs-body: 16px; /* 正文 */
  --fs-small: 14px; /* 辅助 */
  --fs-caption: 13px; /* 图注/来源 */

  /* ---- 间距令牌（8 的倍数） ---- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --sp-6: 120px; /* 章节间距（桌面） */

  /* ---- 布局令牌 ---- */
  --container: 1200px;
  --radius-btn: 8px;
  --radius-card: 12px;
  --radius-img: 12px;
  --shadow-card: 0 1px 3px rgba(11, 31, 58, 0.06); /* 至多一层极淡 */
  --shadow-float: 0 4px 16px rgba(11, 31, 58, 0.1);

  /* ---- 字体 ---- */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-serif:
    Georgia, "Times New Roman", "Songti SC", "SimSun", serif; /* 英文标题/引文衬线 */
  --font-num:
    "DIN Alternate", "Helvetica Neue", Arial, sans-serif; /* 数字 tabular */

  /* ---- 过渡 ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;
}

/* ============ 重置 ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover {
  color: var(--color-accent);
}
ul,
ol {
  list-style: none;
}
button {
  font-family: inherit;
  cursor: pointer;
}

/* ============ 基础排版 ============ */
h1,
h2,
h3,
h4 {
  line-height: 1.3;
  font-weight: 700;
}

h1 {
  font-size: var(--fs-display);
  color: var(--color-primary);
  letter-spacing: 0.01em;
}

h2 {
  font-size: var(--fs-h2);
  color: var(--color-primary);
}

h3 {
  font-size: var(--fs-h3);
  color: var(--color-primary);
}

h4 {
  font-size: var(--fs-sub);
  color: var(--color-primary);
}

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

strong,
b {
  font-weight: 700;
  color: var(--color-primary);
}

/* 英文与数字排版 */
.en,
.num {
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.num {
  font-family: var(--font-num);
}

/* 强调文本 */
mark {
  background: linear-gradient(
    transparent 62%,
    var(--color-accent-faint) 62%,
    var(--color-accent-faint) 96%,
    transparent 96%
  );
  color: inherit;
  padding: 0 1px;
}

/* ============ 布局基础 ============ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

/* 章节通用节奏：桌面 120px / 移动 64px */
.section {
  padding: var(--sp-6) 0;
}
.section--sub {
  background: var(--color-bg-sub);
}
.section--primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.section--primary h2,
.section--primary h3,
.section--primary strong {
  color: var(--color-white);
}

/* 间距工具类（令牌化，禁止散写魔法值） */
.mt-2 {
  margin-top: var(--sp-2);
}
.mt-3 {
  margin-top: var(--sp-3);
}
.mt-4 {
  margin-top: var(--sp-4);
}
.mt-5 {
  margin-top: var(--sp-5);
}

/* 章节眉标（编号 + 中文小标题） */
.section-kicker {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.section-kicker__no {
  font-family: var(--font-num);
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.08em;
}

.section-kicker__label {
  font-size: var(--fs-small);
  color: var(--color-ink-sub);
  letter-spacing: 0.24em;
}

.section--primary .section-kicker__label {
  color: rgba(255, 255, 255, 0.65);
}

/* 章节导语 */
.section-intro {
  font-size: var(--fs-sub);
  color: var(--color-ink-sub);
  /* max-width: 760px; */
  margin-top: var(--sp-2);
}

.section--primary .section-intro {
  color: rgba(255, 255, 255, 0.78);
}

/* 跳转到主内容（可访问性） */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 0 0 var(--radius-btn) 0;
}

.skip-link:focus {
  left: 0;
  color: var(--color-white);
}

/* 焦点可见（可访问性） */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============ 动画初始态（animation.js 接管） ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* 用户开启减弱动态时全部禁用 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}