/* ==========================================================================
   YSC AI 备案展示页 - 基础排版样式
   设计系统遵循计划 §6.1 冻结值：
   - palette: 暖灰白背景 / 深蓝灰正文 / 低饱和青绿色强调 / 无渐变
   - fonts:   Noto Sans SC / Source Han Sans SC + 安全中文回退
   - spacing: 8px 网格 / 正文最大宽度 65ch / 区段间距 56px(桌面)·36px(移动)
   - radius:  ≤ 8px / 不使用卡片套卡片
   - accent:  每屏最多两处（当前阶段标识 / 主要联系入口）
   ========================================================================== */

/* ---------- 设计 token ---------- */
:root {
  /* 色彩（无渐变） */
  --bg:           #faf9f7;  /* 暖灰白背景 */
  --text:         #2a2f3a;  /* 深蓝灰正文（对 --bg 对比度 12.74:1） */
  --muted:        #5b6270;  /* 次要文字（对 --bg 对比度 5.82:1） */
  --accent:       #1f6353;  /* 低饱和青绿强调（对 --bg 6.72:1，用于链接/阶段标记） */
  --accent-soft:  #e7f0ec;  /* 极浅青绿，仅用于联系区段标记底色 */
  --border:       #e3e0d9;  /* 暖灰边框 */

  /* 字体 */
  --font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
               system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 字号档位（固定值，不用 vw 连续缩放） */
  --fs-base:  1rem;       /* 16px 正文 */
  --fs-sm:    0.875rem;   /* 14px 小字 */
  --fs-h2:    1.375rem;   /* 22px 区段标题 */
  --fs-h1:    2rem;       /* 32px 站名（移动端） */

  /* 间距（8px 网格） */
  --space-1: 0.5rem;   /* 8px  */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3.5rem;   /* 56px 桌面区段间距 */
  --space-5m: 2.25rem; /* 36px 移动端区段间距 */

  /* 其他 */
  --radius:   8px;
  --measure:  65ch;     /* 正文最大宽度 */
  --focus:    2px;
}

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.75;        /* 中文行高偏宽松 */
  letter-spacing: 0;        /* 计划要求 */
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, p { margin: 0; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- 布局 ---------- */
.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-2);
}

main.container {
  padding-block: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ---------- 跳转链接（无障碍） ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus {
  left: var(--space-1);
  top: var(--space-1);
}

/* ---------- 区段 1：首屏 ---------- */
.hero { padding-block: var(--space-2) 0; }
.site-name {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-1);
}
.tagline {
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.owner {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--text);
  padding: var(--space-1) var(--space-2);
  background: var(--accent-soft);
  border-radius: var(--radius);
}

/* ---------- 区段 2：网站用途与方向 ---------- */
.purpose h2,
.contact h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}
.purpose p + p { margin-top: var(--space-2); }
.direction { color: var(--muted); }

/* ---------- 区段 3：当前阶段与联系 ---------- */
.contact p + p { margin-top: var(--space-2); }
.contact-entry { font-size: var(--fs-base); }
.contact-entry a {
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* ---------- 区段 4：备案页脚 ---------- */
.beian {
  border-top: 1px solid var(--border);
  padding-block: var(--space-3);
}
.beian-inner {
  text-align: center;
}
.beian-ga {
  margin: 0 0 0.25rem;
}
.beian-ga a {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: none;
}
.beian-ga a:hover,
.beian-ga a:focus { color: var(--accent); text-decoration: underline; }
.beian-icon {
  width: 14px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 4px;
}
.icp {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: none;
}
.icp:hover,
.icp:focus { color: var(--accent); text-decoration: underline; }

/* ---------- 焦点指示（WCAG 2.2 AA） ---------- */
a:focus-visible {
  outline: var(--focus) solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- 响应式：移动端 ---------- */
@media (max-width: 640px) {
  :root {
    --fs-h1: 1.75rem;  /* 28px 移动端站名 */
    --fs-h2: 1.25rem;  /* 20px 移动端区段标题 */
  }
  main.container {
    padding-block: var(--space-5m);
    gap: var(--space-5m);
  }
  body { line-height: 1.8; }
}

/* ---------- 尊重减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}