/* ══════════════════════════════════════════════════════════════
   Undercurrent — Design System (site.css)
   单一来源: 全站所有页面共用此文件 + 各自页面只写页面级样式
   基准: 首页 v5 "The Quiet Study" (2026-08-26 提取)
   字体: Source Serif 4 (display) + Inter (body) + Caveat (hand)
   语言页字族: zh=Noto Serif SC/Noto Sans SC, ar=Noto Naskh/Naskh Sans (保持排版系统一致, 字族按语言替换)
   ══════════════════════════════════════════════════════════════ */

:root {
  /* 基底 */
  --paper: #FAF7F2;
  --ink: #2A2622;
  --ink-soft: #6B655E;
  --ink-faint: #9B948B;
  --card-edge: #E3DDD2;
  --note-bg: #F3EFE7;

  /* 产品主题色 (每个产品一种, 全站一致) */
  --bts: #24475B;      /* Beneath the Surface — 深海 */
  --rr: #A0763B;       /* Roots & Reflections — 赭金 */
  --steady: #3A6B58;   /* Steady — 青磁 */
  --fifty: #A6472E;    /* Fifty Days — 窑红 */
  --cr: #C4452B;       /* Creative Recovery — 朱红 */
  --starter: #7A7F85;  /* Starter — 雾灰 */

  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-hand: 'Caveat', cursive;

  --maxw: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--ink); }

/* ── 页眉 (全站统一) ── */
.masthead { max-width: var(--maxw); margin: 0 auto; padding: 28px 32px; display: flex; justify-content: space-between; align-items: baseline; }
.wordmark { font-weight: 600; font-size: 13px; letter-spacing: 0.22em; color: var(--ink); text-decoration: none; }
.masthead nav a { font-size: 13px; color: var(--ink-soft); text-decoration: none; margin-left: 28px; }
.masthead nav a:hover { color: var(--ink); }

/* ── 页面主标题区 ── */
.page-hero { max-width: var(--maxw); margin: 0 auto; padding: 72px 32px 56px; }
.page-kicker { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 26px; }
.page-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.16; letter-spacing: -0.01em; max-width: 16em; }
.page-hero .lede { font-size: 17px; color: var(--ink-soft); max-width: 40em; margin-top: 20px; }

/* ── 内容容器 ── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; }

/* ── 品牌波浪线 ── */
.wave { width: 110px; display: block; }
.wave path { stroke: var(--ink-faint); stroke-width: 1.5; fill: none; }

/* ── 手写便签 ── */
.handnote { font-family: var(--font-hand); font-size: 21px; color: var(--ink-soft); transform: rotate(-1deg); display: inline-block; }

/* ── 购买按钮 (主题色按页面 accent) ── */
.buy-btn { display: inline-block; font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--paper);
  background: var(--ink); border: none; border-radius: 6px; padding: 14px 30px; cursor: pointer; text-decoration: none;
  transition: transform 0.2s, opacity 0.2s; }
.buy-btn:hover { transform: translateY(-1px); opacity: 0.88; }
.buy-btn:disabled { opacity: 0.5; cursor: wait; transform: none; }
.buy-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.buy-price { font-family: var(--font-display); font-size: 24px; font-weight: 600; }

/* ── 徽章 ── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 12px; color: var(--ink-soft); border: 1px solid var(--card-edge); border-radius: 999px;
  padding: 5px 13px; background: rgba(255,255,255,0.55); letter-spacing: 0.02em; }

/* ── 注解卡 (卖点旁注 / 引文卡) ── */
.note-card { margin: 18px 0; padding: 14px 18px; background: rgba(255,255,255,0.72);
  border-left: 3px solid var(--ink-faint); border-radius: 0 8px 8px 0;
  font-family: var(--font-display); font-style: italic; font-size: 16.5px; color: var(--ink); }
.note-card .cap-label { display: block; font-family: var(--font-body); font-style: normal; font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }

/* ── 安全声明卡 ── */
.gentle-note { background: var(--note-bg); border-radius: 6px; padding: 32px 36px;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; }
.gentle-note strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: 0.06em; }

/* ── 页脚 (全站统一, 含语言链接) ── */
.site-footer { max-width: var(--maxw); margin: 0 auto; padding: 96px 32px 110px; text-align: center; }
.site-footer .closing { font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--ink-soft); max-width: 26em; margin: 0 auto 26px; line-height: 1.5; }
.site-footer .contact { font-size: 13px; color: var(--ink-faint); line-height: 2.1; }
.site-footer .contact a { color: var(--ink-soft); }
.site-footer .langs a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--ink-faint); padding-bottom: 1px; margin: 0 6px; }
.site-footer .langs a:hover { color: var(--ink); }

/* ── 动效 ── */
.rise { opacity: 0; transform: translateY(18px); animation: rise 0.9s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1 !important; transform: none !important; animation: none !important; }
  * { scroll-behavior: auto !important; }
}
@media (max-width: 860px) {
  .masthead, .page-hero, .wrap, .wrap-narrow, .site-footer { padding-left: 24px; padding-right: 24px; }
}