/* ============================================================
   基础层：设计变量 + 页面骨架 + Hero
   watch.css 里所有 var(--*) 都由这里提供。项目独立于 3026，
   所以不再引用它的 style.css——那里面 2500 行里只有这几十行是本页用得上的。
   ============================================================ */

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

:root {
  --color-ink:       oklch(0.97 0.005 260);
  --color-ink-dim:   oklch(0.65 0.010 260);
  --color-ink-muted: oklch(0.45 0.015 260);
  --color-surface:   oklch(0.06 0.008 270);
  --color-surface2:  oklch(0.10 0.012 270);
  --color-surface3:  oklch(0.14 0.015 270);
  --color-surface4:  oklch(0.18 0.018 270);
  --color-border:    oklch(0.20 0.020 270);
  --color-accent:    #7c6fdc;
  --color-accent-dim: #5b4ea3;
  --color-glow:      oklch(0.70 0.120 280);
  --color-gold:      #c4a35a;
  --color-gold-dim:  #8b7355;

  --font-display: 'Noto Serif SC', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-num: 'EB Garamond', Georgia, serif;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 8rem;

  --max-width: 720px;
  --transition-fast: 250ms ease-out;

  --z-content: 1;
}

html {
  background-color: #070a18;
  color: var(--color-ink);
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
  line-height: 1.75;
  background:
    radial-gradient(ellipse 700px 500px at 10% 15%, rgba(100,60,200,0.12) 0%, transparent 100%),
    radial-gradient(ellipse 550px 650px at 85% 8%, rgba(60,40,160,0.10) 0%, transparent 100%),
    radial-gradient(ellipse 650px 450px at 80% 75%, rgba(30,50,140,0.10) 0%, transparent 100%),
    linear-gradient(170deg, #070a18 0%, #0a0e20 25%, #0c0f20 50%, #090c16 75%, #070910 100%);
  background-color: #070a18;
  background-attachment: fixed;
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--color-accent); }

/* ===== 页头 ===== */
.site-head {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
}

.site-brand {
  font-family: var(--font-num);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-gold);
}

.site-tagline {
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  letter-spacing: 0.05em;
}

/* ===== PAGE SYSTEM ===== */
#page-container { position: relative; z-index: var(--z-content); }

.page { display: none; animation: pageIn 0.5s ease-out; }
.page.active { display: block; }

@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== PAGE HERO ===== */
.page-hero {
  position: relative;
  min-height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-nebula {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  max-width: 700px;
}

.hero-tag {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  opacity: 0.8;
  border: 1px solid rgba(124, 111, 220, 0.3);
  padding: 0.3rem 1rem;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

.hero-desc {
  color: var(--color-ink-dim);
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1.05rem);
  line-height: 1.8;
  max-width: 560px;
  margin: 0 auto;
}

/* ===== PAGE CONTENT ===== */
.page-content { padding: 0 var(--space-lg) var(--space-2xl); }

/* ===== 静态内容页（contact.html / privacy.html）=====
   这两个页面不跑引擎，是纯文字页，所以只需要一套排版规则。
   宽度跟 .site-head 对齐（900px 里收 720px 正文），读起来不散。 */
.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg) var(--space-xl);
}

.doc h1 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-xs);
}

.doc-meta {
  color: var(--color-ink-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-lg);
}

.doc h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-gold);
  margin: var(--space-lg) 0 var(--space-sm);
}

.doc p { color: var(--color-ink-dim); margin-bottom: var(--space-sm); }
.doc ul { padding-left: 1.2rem; margin-bottom: var(--space-sm); }
.doc li { color: var(--color-ink-dim); margin-bottom: var(--space-xs); }
.doc strong { color: var(--color-ink); font-weight: 600; }

/* 邮箱要显眼：这是"联系我们"那页唯一的目的。 */
.doc-mail {
  font-family: var(--font-num);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.doc-back { margin-top: var(--space-lg); }

/* ===== 页脚 =====
   宽 900 跟 .site-head 对齐；三个页面（首页/联系/隐私）共用同一份 HTML，
   所以样式放基础层而不是某一页的样式表里。
   备案号下来后要挂在这里并链到 beian.miit.gov.cn —— 位置先留好。 */
.site-foot {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

.site-foot a { color: var(--color-ink-dim); text-decoration: none; }
.site-foot a:hover { color: var(--color-gold); }
.site-foot .foot-sep { opacity: 0.4; }