/* 武汉星火望川科技有限公司 · 官网
 * 设计方向：墨白 —— 宣纸素净
 * 原则：留白 > 元素，排版 > 装饰，克制 > 热闹
 *
 * 视觉母题取自产品名「归岑」——岑，山小而高。
 * 首屏那道远山不是装饰，是名字的出处。
 */

/* ============ 设计令牌 ============ */
:root {
  /* 色：以宣纸与墨为骨，朱砂只做点，不做面 */
  --paper:      #faf8f4;   /* 宣纸底 */
  --paper-deep: #f3f0e8;   /* 次级底，用于分区 */
  --ink:        #1a1816;   /* 墨 · 主文字 */
  --ink-soft:   #4a453f;   /* 次级墨 · 正文 */
  --ink-faint:  #8a837a;   /* 三级 · 注释、页脚 */
  --line:       #e4ded2;   /* 细线 */
  --line-soft:  #efebe1;   /* 更淡的线 */
  --cinnabar:   #a8453a;   /* 朱砂 · 全站点缀，只出现在三处 */

  /* 字：标题走宋体（文气），正文走黑体（清晰） */
  --font-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
                "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;

  /* 尺度 */
  --container: 1040px;
  --gutter: clamp(24px, 5vw, 48px);

  /* 节奏：所有进场动画共用同一条曲线，快慢一致才不散 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============ 基础 ============ */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 2;
  /* 中文正文 2 倍行高才透气；字距略收一点，避免屏幕上显得松垮 */
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* 宣纸纹理：全站覆盖一层几乎看不见的颗粒。
   没有它，大面积米白在屏幕上是「死平」的，像没上纸的墙。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

a:hover { color: var(--ink); }

/* 只给键盘用户看的焦点圈，鼠标点击不出现 */
a:focus-visible {
  outline: 2px solid var(--cinnabar);
  outline-offset: 4px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

/* ============ 布局骨架 ============ */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section {
  padding: clamp(88px, 14vh, 168px) 0;
}

/* 分区之间用极淡的线，不用底色块 —— 保持纸感 */
.rule-top { border-top: 1px solid var(--line-soft); }

/* ============ 顶栏 ============ */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  padding: 28px 0;
  /* 滚动后由 main.js 加 .is-scrolled：浮起一层纸色，字才不会被正文穿透 */
  transition: background 0.5s var(--ease), padding 0.5s var(--ease),
              box-shadow 0.5s var(--ease);
}

.topbar.is-scrolled {
  padding: 18px 0;
  background: rgba(250, 248, 244, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 1px 0 var(--line-soft);
}

.topbar .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

/* 顶栏站名：与正文同族用宋体，颜色压到最淡。
   它只需要「在」，不需要「被看见」—— 首屏和页脚都有全称，
   这里一抢戏，整页的重心就散了。 */
.brand {
  font-family: var(--font-serif);
  /* 2026-09-17：原来 13px，比导航（14px）还小，看着像顺手写的。
     现在与导航同号——「安静」靠宋体 + 最淡的色来做，不靠缩小。 */
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  white-space: nowrap;
  transition: color 0.4s var(--ease);
}

.topbar:hover .brand { color: var(--ink-soft); }

.nav {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

/* ============ 首屏 ============ */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px 0 clamp(120px, 20vh, 200px);
  position: relative;
  overflow: hidden;
  /* 纸面不是死平的一块：顶部偏亮，往下沉一点点 */
  background: linear-gradient(180deg, #fffefb 0%, var(--paper) 42%, #f7f4ee 100%);
}

/* 极淡的径向光晕，光源在左上，符合纸的自然受光 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    110% 75% at 22% 8%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0) 62%
  );
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  /* 视差由 main.js 写 --sy；没 JS 时默认 0，不影响布局 */
  transform: translate3d(0, calc(var(--sy, 0) * -0.18px), 0);
  opacity: calc(1 - var(--syf, 0) * 0.85);
  will-change: transform, opacity;
}

.hero-eyebrow {
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
  margin: 0 0 clamp(36px, 7vh, 76px);
}

/* 「归岑」—— 全站唯一的主角，其余都是配角 */
.hero-name {
  font-family: var(--font-serif);
  font-size: clamp(72px, 17vw, 176px);
  line-height: 0.92;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.18em;
  /* 字距会在右侧多撑出一个空档，用 text-indent 补回来，视觉才居中 */
  text-indent: 0.18em;
  margin: 0 0 clamp(30px, 5.5vh, 52px);
}

.hero-line {
  font-family: var(--font-serif);
  font-size: clamp(17px, 2.4vw, 23px);
  color: var(--ink-soft);
  letter-spacing: 0.12em;
  margin: 0 0 clamp(26px, 4.5vh, 42px);
}

/* 公司背书行：比标语更轻，压在标语与朱线之间 */
.hero-maker {
  font-size: 12.5px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  margin: 0 0 clamp(18px, 3vh, 30px);
}

.hero-mark {
  width: 48px;
  height: 1px;
  background: var(--cinnabar);
  transform-origin: left center;
  opacity: 0.85;
}

/* ---- 远山：白描，只描线不填充，像纸上铅笔起的一道稿 ---- */
.hero-ridge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(160px, 32vh, 340px);
  z-index: 1;
  pointer-events: none;
  transform: translate3d(0, calc(var(--sy, 0) * 0.06px), 0);
}

.hero-ridge path {
  fill: none;
  /* 拉伸到满宽会失真，锁定描边宽度 */
  vector-effect: non-scaling-stroke;
}

.ridge-far  { stroke: rgba(26, 24, 22, 0.08); stroke-width: 1; }
.ridge-near { stroke: rgba(26, 24, 22, 0.13); stroke-width: 1; }

/* ============ 章节标题 ============ */
.section-head { margin-bottom: clamp(40px, 7vh, 72px); }

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.16em;
  margin: 0 0 18px;
}

.section-index {
  display: block;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
  margin-bottom: 20px;
}

/* 正文段落：限制在 34em 内，一行太长眼睛会跳行 */
.prose {
  max-width: 34em;
  margin: 0 0 1.6em;
}

.prose:last-child { margin-bottom: 0; }

/* ============ 产品 ============ */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 88px);
  align-items: center;
}

.product-name {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4.4vw, 40px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.2em;
  /* 原来下面还有一行品类标签（与首屏重复，2026-09-17 去掉），
     下间距取的是它原来那个值，版面节奏不变 */
  margin: 0 0 clamp(28px, 4vh, 40px);
}

/* 手机线框：暂代真实截图。真截图到位后整块替换即可 */
.device {
  aspect-ratio: 9 / 17.5;
  max-width: 260px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, var(--paper-deep) 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(26, 24, 22, 0.22);
}

.device::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}

.device-label {
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
}

/* 产品协议入口：产品区块里的两条小链接，比正文轻、比页脚清楚 */
.product-docs {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: clamp(20px, 3.5vh, 30px);
}

.product-docs a {
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: border-color 0.4s var(--ease), color 0.3s var(--ease);
}

.product-docs a:hover {
  color: var(--ink);
  border-color: var(--cinnabar);
}

/* ============ 联系 ============ */
.contact-mail {
  font-family: var(--font-serif);
  font-size: clamp(19px, 3vw, 26px);
  color: var(--ink);
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  transition: border-color 0.4s var(--ease);
}

.contact-mail:hover { border-color: var(--cinnabar); }

/* ============ 页脚 ============ */
.footer {
  padding: clamp(56px, 9vh, 88px) 0 clamp(40px, 6vh, 64px);
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 2.2;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}

/* 页脚两列：左是主体与备案，右是法律文件。与顶栏的「左站名 / 右导航」左右对称，
   比原来三段左对齐的一叠字清楚。（2026-09-17 重做） */
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(20px, 4vw, 80px);
  flex-wrap: wrap;
}

.footer-company { color: var(--ink-soft); }

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ============ 进场动效 ============ */
/* 默认可见 —— 只在 JS 就绪时才隐藏，避免脚本失败后页面全白 */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

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

/* 错峰：同一容器内的 reveal 依次进场，靠 --i 排 */
.js .reveal { transition-delay: calc(var(--i, 0) * 120ms); }

/* 首屏逐行浮现 */
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@keyframes grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 远山缓缓浮出，像雾散后山现行。
   ⚠️ 这里只动 opacity，不碰 transform —— .hero-ridge 的 transform 已经被
   视差占用（--sy），动画若也写 transform 会把视差整个盖掉。 */
@keyframes emerge {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-eyebrow,
.hero-name,
.hero-line,
.hero-maker {
  animation: rise 1.2s var(--ease) both;
}

.hero-eyebrow { animation-delay: 0.15s; }
.hero-name    { animation-delay: 0.35s; }
.hero-line    { animation-delay: 0.62s; }
.hero-maker   { animation-delay: 0.78s; }

.hero-mark { animation: grow 1.1s var(--ease) 0.95s both; }

.hero-ridge { animation: emerge 2.2s var(--ease) 0.2s both; }

/* ============ 无障碍：尊重系统的「减弱动态效果」 ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal { opacity: 1; transform: none; }

  /* 关掉视差：这块由 JS 直接写内联变量，CSS 拦不住 */
  .hero-inner { transform: none; opacity: 1; }
}

/* ============ 窄屏 ============ */
@media (max-width: 780px) {
  .product {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* ⚠️ 这里原来写的是 `.product-media { order: -1 }`，那是把**图片排在文字前面**，
     与上面这行注释说的「先读文字再看图」正好相反（2026-09-17 移动端适配时发现）。
     DOM 里 product-copy 本来就在前，所以删掉那条即可。 */
  .product-media { order: 0; }

  .nav { gap: 18px; font-size: 13px; }

  .topbar .wrap { align-items: center; }

  /* 站名 12 个字，0.22em 的字距在这个宽度太占地方，收紧一点 */
  .brand { letter-spacing: 0.16em; }
}

/* ============ 手机（≤480px）============
   2026-09-17 适配。原来这里是一条 `.nav { display: none }`（<420px 生效）——
   那等于手机上**没有任何跳转入口**，而 360dp 正是最常见的一档。
   （为什么是"藏"而不是"缩"：量过，360 宽下站名 167px + 导航需 219px，塞不进 297px
   的可用宽度，flex 会把导航压到 106px，三个链接的文字各自折成两行，看着像坏了。）

   现在的做法是**顶栏分两行**：一行站名、一行导航，链接就放得下了。
   顺带把导航类链接的热区抬到 ≥44px —— 这条是跟着 App 那边的规矩来的
   （「行内链接只有字形是热区，长辈点不中」，见 docs/launch-checklist.md §A1）。

   为什么是 520 而不是 480：站名调到 14px（与导航同号）之后，一行需要
   站名 ≈195px + 导航 ≈219px + 间距 24px ≈ 438px，再加两侧留白 → 486px。
   取 520 留余量，免得 490 那一带的宽度被挤成折行。 */
@media (max-width: 520px) {
  .topbar,
  .topbar.is-scrolled { padding: 10px 0; }

  .topbar .wrap {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 2px;
  }

  /* flex-basis:100% 把它挤到第二行；三个链接**撑满整行**——比原来挤在左边一坨好看，
     每条的热区之间也分得更开 */
  .nav {
    flex-basis: 100%;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    color: var(--ink-soft);
  }

  /* 导航 / 产品文档 / 页脚：热区 ≥44px。
     ⚠️ 站名不在这一组里——它本身就是 167px 宽的大目标，再抬高度只会把顶栏撑到 118px；
     正文里的行内链接（如协议里的邮箱）也不在此列，那是排版需要，行内链接动不了。 */
  .nav a,
  .footer-links a,
  .product-docs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 邮箱链接已经是 200px 宽的大目标，只补一点纵向热区，
     不动它那条贴着文字的底线 */
  .contact-mail { padding: 8px 0; }

  /* 页脚：主体与备案一段，法律文件另起一段，中间一条淡线隔开。
     手机上三条链接各占一行（44px 高），比任其折行好看也好点。 */
  .footer-inner { flex-direction: column; gap: 0; }

  .footer-links {
    width: 100%;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
  }
}

/* ============ 法务页（隐私政策 / 用户协议） ============
   与首页共用同一套纸墨，但去掉全部动效与装饰——这类页面只需要
   「找得到、读得下去」，任何花招都是干扰。 */
.legal {
  padding: clamp(116px, 17vh, 160px) 0 clamp(72px, 11vh, 112px);
  font-size: 15px;
  line-height: 1.95;
}

/* 行宽收在 44em：法务条文一行太长，读到下一行会找不到位置 */
.legal .wrap { max-width: 44em; }

/* 法务页顶部不再放「← 返回首页」：顶栏是 sticky 的、那里已经有一个「返回首页」，
   一屏里两个一样的入口，会让这页看起来像被嵌进来的一个框。（2026-09-17） */

.legal-head {
  padding-bottom: clamp(28px, 4.5vh, 44px);
  margin-bottom: clamp(36px, 5.5vh, 52px);
  border-bottom: 1px solid var(--line);
}

.legal-title {
  font-family: var(--font-serif);
  font-size: clamp(25px, 4.2vw, 34px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.14em;
  margin: 0 0 16px;
}

.legal-meta {
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin: 0;
}

.legal-lede {
  color: var(--ink);
  margin: 0 0 clamp(36px, 5.5vh, 52px);
}

.legal h2 {
  font-family: var(--font-serif);
  font-size: clamp(17px, 2.3vw, 19px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.1em;
  margin: clamp(40px, 5.5vh, 56px) 0 18px;
}

.legal h2:first-of-type { margin-top: 0; }

.legal p { margin: 0 0 1.1em; }

.legal ul,
.legal ol { margin: 0 0 1.1em; padding-left: 1.5em; }

.legal li { margin-bottom: 0.45em; }

.legal li::marker { color: var(--ink-faint); }

.legal strong { color: var(--ink); font-weight: 600; }

/* 需要用户真正看见的条款：左侧一道朱砂。全页只有两三处，
   多了就等于没有。 */
.legal .note {
  border-left: 2px solid var(--cinnabar);
  padding: 2px 0 2px 18px;
  margin: 0 0 1.3em;
  color: var(--ink);
}

/* 第三方清单：像账本一样一行一项，不做卡片不画框 */
.party {
  border-top: 1px solid var(--line-soft);
  padding: 15px 0;
}

.party:last-of-type { border-bottom: 1px solid var(--line-soft); }

.party-name {
  display: block;
  font-family: var(--font-serif);
  color: var(--ink);
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.party-desc { margin: 0; font-size: 14.5px; }

/* 落款：起手用一道短朱线（沿用首屏 .hero-mark 的母题），替掉原来那道通栏边线——
   通栏线会把它框成"嵌在正文末尾的一小块"，短朱线读起来才是文档的收尾。（2026-09-17） */
.legal-end {
  margin-top: clamp(56px, 8vh, 80px);
  font-size: 13.5px;
  line-height: 2.2;
  color: var(--ink-faint);
}

.legal-end::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-bottom: 20px;
  background: var(--cinnabar);
  opacity: 0.85;
}

@media (max-width: 780px) {
  .legal { font-size: 14.5px; }
  .legal .wrap { padding: 0 var(--gutter); }
}

/* ⚠️ 这条必须排在上面那条 ≤780 规则**之后**——同优先级下后者会覆盖前者
   （2026-09-17 第一次写的时候就踩了这个，字号没生效）。 */
@media (max-width: 520px) {
  /* 手机上读条文比桌面再大一号：14.5px 在 360dp 上偏小 */
  .legal { font-size: 15.5px; }
}