/* ==========================================================================
   基础：字体、设计变量、重置、排版、通用类
   ========================================================================== */

/* ---------- 字体（已按页面用字裁剪，见 README） ---------- */
@font-face {
  font-family: 'AINOD Serif';
  src: url('../fonts/serif-sc-400.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
/* 货号等编号用字：由 Geist 生成，数字默认等宽，0 不带点 */
@font-face {
  font-family: 'AINOD Code';
  src: url('../fonts/code.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- 设计变量 ---------- */
:root {
  /* 颜色 */
  --bg: #ffffff;
  --bg-2: #f5f6f8;
  --warm: #f1efec;
  --ink: #191818;
  --ink-2: rgba(25, 24, 24, 0.72);
  --muted: rgba(25, 24, 24, 0.52);
  --faint: #a6acb5;
  --line: #e4e6ea;
  --line-2: #eff1f3;
  --brand: #9a1b53;
  --brand-dark: #7e1444;
  --brand-2: #b8286a;
  --dark: #080b12;
  --on-dark: #f2f4f7;
  --on-dark-2: rgba(242, 244, 247, 0.64);
  --ok: #1f7a55;
  --shade: 8, 11, 18; /* 深色遮罩的 RGB，用于 rgba(var(--shade), 透明度) */

  /* 字体 */
  --head: 'AINOD Serif', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
  --label:
    'Geist', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
  --sans:
    -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'Microsoft YaHei', 'Noto Sans SC',
    system-ui, sans-serif;
  --num: 'AINOD Serif', 'Noto Serif SC', serif;
  --mono: 'AINOD Code', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* 货号、缩写等编号 */

  /* 尺寸 */
  --wrap: 1320px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --hdr: 92px; /* 页头占位高度 */
  --mbar: 62px; /* 手机底部操作栏高度 */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

@media (max-width: 760px) {
  :root {
    --hdr: 76px;
  }
}

/* ---------- 重置 ---------- */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr) + 20px);
}

html.no-scroll {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font: 15px/1.8 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

p,
figure {
  margin: 0;
}

:focus-visible {
  outline: 1px solid var(--brand);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 页面顶部的 SVG 图标集，本身不显示 */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- 排版 ---------- */
h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--head);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.h-display {
  font-size: clamp(48px, 7.2vw, 118px);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.h-section {
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.h-card {
  font-size: 20px;
  line-height: 1.5;
}

.eyebrow,
.kicker {
  display: block;
  font: 500 12px/1.4 var(--label);
  letter-spacing: 0.01em;
  color: var(--muted);
}

.lead {
  max-width: 40em;
  font-family: var(--head);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--muted);
}

/* ---------- 通用类 ---------- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mono {
  font-family: var(--mono);
  letter-spacing: 0;
}

.num {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--muted);
}

.small {
  font-family: var(--label);
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .wrap {
    padding-inline: 20px;
  }

  .h-display {
    font-size: clamp(40px, 11.4vw, 52px);
    line-height: 1.12;
  }

  .h-section {
    font-size: 30px;
    line-height: 1.22;
  }

  .lead {
    font-size: 16px;
  }
}