/* ============================================================
   小过 xiaoguo.vip — 首页专属样式（v2 · 官方藏青）
   视觉方向：科学出版物 + 数字实验室
   原则：纯色块 · 清晰网格 · 秩序化字重 · 无渐变 / 无玻璃 / 无发光
   ⚠ 本文件仅 index.html 引用；其余页面暂用 css/style.css（墨绿版）。
     待首页效果确认后，再把本样式推广为全站统一版。
   ============================================================ */
:root{
  --paper:#ffffff;
  --paper-2:#f5f7fa;
  --ink:#111827;
  --ink-2:#3a4454;
  --mute:#6b7585;
  --rule:#e1e5eb;
  --rule-2:#c9d0da;
  --brand:#002664;          /* 取自 Kelvin 参考图精确色值 */
  --brand-deep:#001b47;
  --brand-link:#1b4fa8;
  --brand-bright:#2f7fe0;   /* 深底上的高亮块 */
  --mint:#e8eef7;           /* 浅色入口卡底 */
  --night:#002664;          /* 深色入口卡 / 深色带 */
  --night-2:#0d3a7d;

  --sans:"PingFang SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC","SimSun","Times New Roman",serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --display:var(--sans);

  --h1:clamp(40px,5.4vw,64px);
  --h2:clamp(26px,3vw,34px);
  --body:16.5px;

  --maxw:1200px;
  --gut:32px;
  --r-card:18px;
  --r-inner:12px;
  --r-btn:8px;
  --sec-y:clamp(64px,8vw,104px);
}
html[data-titlefont="serif"]{--display:var(--serif)}
html[data-accent="ink"]{--brand:#232c3a;--brand-deep:#111827;--brand-link:#3a4454;--brand-bright:#5b6b84;--night:#232c3a;--night-2:#39445a;--mint:#eceef2}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--body);line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* ⚠️ 原为 `*{transition:none !important;animation:none !important}` —— 太一刀切：
   Windows 关闭「窗口动画」(MinAnimate=0) 或开了「减少动画效果」时，浏览器会上报
   prefers-reduced-motion:reduce，这条规则就把**全站所有过渡**（含卡片悬停抬起）一次性杀光，
   表现为「鼠标一碰就硬切换、毫无动效」——2026-10-01 实测定位于此（Kelvin 机器 MinAnimate=0）。
   改为：只放缓/减弱真正可能引起不适的「持续动画」与「大位移」，保留 hover 这类轻微反馈过渡。 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important}
  /* 无限循环动画（跑马灯/脉冲等）停掉，避免前庭不适 */
  .marquee,.pulse,[class*="spin"]{animation:none !important}
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ── 顶部声明条（机构式） ───────────────────────── */
.topstrip{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  font-size:12.5px;color:var(--mute);
}
.topstrip .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:38px}
.topstrip b{color:var(--ink-2);font-weight:600;letter-spacing:.02em}

/* ── 导航：只帮人找内容 ────────────────────────── */
header.nav{
  position:sticky;top:0;z-index:50;
  background:var(--paper);border-bottom:1px solid var(--rule);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.brand{display:flex;align-items:baseline;gap:10px;font-weight:600;font-size:17px;letter-spacing:.01em;white-space:nowrap}
.brand .mark{display:inline-block;width:10px;height:10px;background:var(--brand);transform:translateY(-1px)}
.brand .sub{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mute);font-weight:400}
nav.links{display:flex;gap:28px;font-size:15px}
nav.links a{color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent;transition:border-color .16s,color .16s}
nav.links a:hover,nav.links a.active{color:var(--ink);border-bottom-color:var(--brand)}
.nav-toggle{display:none;background:none;border:1px solid var(--rule-2);border-radius:6px;color:var(--ink);font-size:14px;line-height:1;padding:8px 10px;cursor:pointer;font-family:inherit}

/* ── 区块骨架：编号 + 横规 + 标题 ─────────────── */
section.sec{padding:var(--sec-y) 0}
section.alt{background:var(--paper-2)}
/* 首屏事实行：2026-10-02 从 .hero 整行移到 01 板块分界横线上方（Kelvin）
   样式逐项照抄原 .hero .facts：等宽 · 藏青 · 三项细竖线分隔 + 右侧免责声明
   ⛔ 不可沿用 .facts 类名：home.css 下方另有一条 .facts{border-top…} 是 04 板块字段列表用的，会串味 */
.secfacts{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 20px;
  margin:0 0 18px;
  font-family:var(--mono);font-size:12.5px;color:var(--brand);letter-spacing:.08em;
}
.secfacts .l{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.secfacts i{font-style:normal;color:var(--rule-2)}
.secfacts .r{margin-left:auto;color:var(--brand);letter-spacing:.08em}
.sec-head{border-top:1px solid var(--ink);padding-top:16px;margin-bottom:34px}
.sec-head .k{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--mute);display:block;margin-bottom:10px}
.sec-head h2{font-family:var(--display);font-size:var(--h2);font-weight:600;letter-spacing:-.01em;line-height:1.24;margin:0}
.sec-head .sub{color:var(--mute);margin:10px 0 0;font-size:15.5px;max-width:760px}

/* ── 首屏 ─────────────────────────────────────── */
/* 2026-10-01 紧凑化：上下留白各收约 20px，让两个入口卡更早进入视野 */
.hero{padding:clamp(40px,5vw,62px) 0 clamp(30px,4vw,44px)}
.hero .eyebrow{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.15em;color:var(--brand);margin:0 0 16px}
.hero h1{
  font-family:var(--display);
  font-size:var(--h1);line-height:1.08;letter-spacing:-.02em;font-weight:600;
  margin:0 0 16px;max-width:19em;text-wrap:pretty;
}
.hero .lede{margin:0 0 40px;max-width:40em;color:var(--ink-2);font-size:17px;line-height:1.75;text-wrap:pretty}
/* 首屏事实行：与上方引题同字体同色（等宽 · 藏青），三项之间用细竖线分隔
   2026-10-01 紧凑化：margin 24/42 → 16/26，字距 .14em → .08em，字号 13.5 → 12.5（Kelvin：字间距太大）
   ⚠️ 2026-10-02：该行已整体移到 01 板块分界横线上方（见上文 .secfacts），以下 .hero .facts 规则暂留备用 */
.hero .facts{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 20px;
  margin:16px 0 26px;
  font-family:var(--mono);font-size:12.5px;color:var(--brand);letter-spacing:.08em;
}
.hero .facts .l{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.hero .facts i{font-style:normal;color:var(--rule-2)}
/* 免责声明：纯文本声明，不做成链接、不加下划线；字体颜色与上方引题一致 */
.hero .facts .r{margin-left:auto;color:var(--brand);letter-spacing:.08em}

/* 两个核心入口 —— 首屏最强焦点
   2026-10-01 紧凑化（Kelvin：纵向占用太多、浪费空间）：
     art 区 aspect-ratio 16/10 → 16/7.2（高度约降 28%）
     内边距 34 → 20 · meta 24/26/26 → 17/22/19 · h3 23 → 21 · p 15.5 → 14.5
     装饰图形同步缩小，保证在小高度里仍然呼吸得开 */
.entries{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.entry{
  position:relative;z-index:1;
  border:1px solid var(--rule);border-radius:var(--r-card);
  display:flex;flex-direction:column;background:var(--paper);
  /* 抬起 2 秒；移开回落 .58s 快一些。两条 transition 都写在基态 */
  transition:
    transform .58s cubic-bezier(.4,0,.2,1),
    box-shadow .58s cubic-bezier(.4,0,.2,1),
    border-color .3s ease;
}
/* 圆角裁切下沉到内层（原 overflow:hidden 会连自己的 box-shadow 一起裁掉，
   导致阴影只在右侧残存、下方全无 —— 2026-10-01 定位到此坑） */
.entry .art{border-radius:calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;overflow:hidden}
.entry .meta{border-radius:0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px)}
/* 悬停：向左上抬起 + 右下投影
   曲线＝cubic-bezier(.16,1,.3,1)：起手快、尾巴最长（Kelvin 2026-10-01 选定的手感）
   阴影第二层原为 12px 15px 24px -10px，-10px 收缩把 15px 下偏移抵掉 → 下方看不见，
   现改为正向下偏移 + 更大模糊，右下角才有实在的影子 */
.entry:hover{
  z-index:5;border-color:var(--rule-2);
  transform:translate(-7px,-7px);
  box-shadow:
    0 3px 8px -1px rgba(0,38,100,.10),
    8px 14px 20px -6px rgba(0,38,100,.20),
    18px 26px 40px -12px rgba(0,38,100,.16);
  transition:
    transform 2s cubic-bezier(.16,1,.3,1),
    box-shadow 2s cubic-bezier(.16,1,.3,1),
    border-color .3s ease;
}
.entry .art{aspect-ratio:16/7.2;display:grid;place-items:center;padding:20px;position:relative}
.entry.light .art{background:var(--mint)}
.entry.dark .art{background:var(--night)}
.entry .art .tag{position:absolute;left:16px;top:13px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em}
.entry.light .art .tag{color:#5a76a0}
.entry.dark .art .tag{color:#7e9ac4}
.entry .meta{padding:17px 22px 19px;flex:1;display:flex;flex-direction:column}
.entry h3{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.01em;margin:0 0 7px}
.entry p{margin:0;color:var(--mute);font-size:14.5px;line-height:1.7}
.entry .more{margin-top:auto;padding-top:12px;font-size:14px;font-weight:500;color:var(--brand);display:inline-flex;align-items:center;gap:8px}
.entry .more .arw{transition:transform .18s}
.entry:hover .more .arw{transform:translateX(4px)}

/* 入口图 1：选择 → 内分泌 → 结果（2026-10-01 随卡片紧凑化同步缩小）
   2026-10-01 v2：上下两排各 4 个标签（饮食/活动/心理/睡眠 · 激素/能量/代谢/风险），
   左右间距与内边距同步收一点，让两排宽度接近、不显得比右侧模型图宽太多 */
.dg-map{display:flex;flex-direction:column;align-items:center}
.dg-map .chips,.dg-map .pills{display:flex;gap:8px}
.dg-map .chip{background:#fff;border:1px solid #d5deec;border-radius:999px;padding:8px 14px;font-size:14px;color:var(--ink-2)}
.dg-map .line{width:1px;height:24px;background:#c3d2e6}
.dg-map .pill{background:var(--brand);color:#fff;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:500}

/* 入口图 2：摄入 → 转化 → 消耗（2026-10-01 同步缩小） */
.dg-model{display:flex;align-items:center;gap:11px}
.dg-model .blk{
  background:var(--night-2);border:1px solid #2b5aa0;color:#bcd2ef;
  border-radius:9px;padding:15px 20px;min-width:84px;text-align:center;font-size:14.5px;
}
.dg-model .blk.core{
  background:var(--brand-bright);border-color:var(--brand-bright);color:#fff;
  font-size:17px;font-weight:600;padding:24px 26px;border-radius:11px;letter-spacing:.02em;
}

/* ── 典型问题（三张卡片 · 门户式入口） ─────────── */
.qcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.qcard{
  position:relative;z-index:1;
  background:#fff;border:1px solid transparent;border-radius:14px;
  padding:30px 28px 26px;display:flex;flex-direction:column;
  /* 抬起 2 秒；移开回落 .58s 快一些。两条 transition 都写在基态 */
  transition:
    transform .58s cubic-bezier(.4,0,.2,1),
    box-shadow .58s cubic-bezier(.4,0,.2,1),
    border-color .3s ease;
}
/* 悬停：向左上抬起 + 右下投影（阴影参数与 .entry 保持一致，见上方说明）
   曲线＝cubic-bezier(.16,1,.3,1)：起手快、尾巴最长（Kelvin 2026-10-01 选定的手感） */
.qcard:hover{
  z-index:5;border-color:var(--rule-2);
  transform:translate(-7px,-7px);
  box-shadow:
    0 3px 8px -1px rgba(0,38,100,.10),
    8px 14px 20px -6px rgba(0,38,100,.20),
    18px 26px 40px -12px rgba(0,38,100,.16);
  transition:
    transform 2s cubic-bezier(.16,1,.3,1),
    box-shadow 2s cubic-bezier(.16,1,.3,1),
    border-color .3s ease;
}
.qcard .k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--brand-link);display:block;margin-bottom:16px}
.qcard h3{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.38;margin:0 0 14px}
.qcard p{margin:0;color:var(--mute);font-size:14.8px;line-height:1.82;text-wrap:pretty}
.qcard .st{margin-top:auto;padding-top:24px;font-size:13.5px;color:var(--mute)}
.qcard .st::before{content:"";display:inline-block;width:5px;height:5px;border-radius:999px;background:var(--rule-2);margin-right:8px;vertical-align:middle}

/* ── 模型如何工作（深色 · 实验室台面） ────────── */
.band{background:var(--night);color:#eaf1fa}
.band .sec-head{border-top-color:rgba(255,255,255,.38)}
.band .sec-head .k{color:#8fb7e8}
.band .sec-head h2{color:#fff}
.band .sec-head .sub{color:#a9c2e0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px}
.step{padding:6px 26px 0;border-left:1px solid rgba(255,255,255,.18)}
.step:first-child{border-left:0;padding-left:0}
.step .k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:#8cc2ff}
.step h4{font-size:17.5px;font-weight:600;color:#fff;margin:12px 0 8px}
.step p{margin:0;color:#a9c2e0;font-size:14.5px;line-height:1.75}

/* ── 最新视频 ─────────────────────────────────── */
.vgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:start}
.shot{border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;background:#0b1a33;position:relative;display:block}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover}
.shot .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:999px;background:rgba(255,255,255,.92);
  display:grid;place-items:center;border:0;cursor:pointer;
}
.shot .play::after{content:"";width:0;height:0;border-left:19px solid var(--brand-deep);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.shot .cap{display:block;background:var(--paper);padding:14px 18px;border-top:1px solid var(--rule);font-size:14px;color:var(--mute)}
.metalist{border-top:1px solid var(--rule)}
.metalist div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.metalist .k{color:var(--mute);font-family:var(--mono);font-size:12.5px;letter-spacing:.06em}
.vgrid .btn{margin-top:22px}

/* ── 项目介绍 ─────────────────────────────────── */
.pgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.pgrid .prose p{margin:0 0 18px;color:var(--ink-2);text-wrap:pretty}
.pgrid .prose p:last-child{margin-bottom:0}
.facts{border-top:1px solid var(--rule)}
.facts div{display:grid;grid-template-columns:92px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.facts .k{font-family:var(--mono);font-size:12.5px;color:var(--mute);letter-spacing:.06em}

/* ── 按钮 ─────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--r-btn);
  font-size:15px;font-weight:500;border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:background .16s,border-color .16s,color .16s;
}
.btn.solid{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.solid:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn.line{border-color:var(--rule-2);color:var(--ink);background:transparent}
.btn.line:hover{border-color:var(--ink)}

/* ── 收尾 CTA ─────────────────────────────────── */
.cta{padding:clamp(56px,7vw,88px) 0}
.cta .inner{border-top:1px solid var(--ink);padding-top:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta h2{font-family:var(--display);font-size:clamp(24px,2.6vw,32px);font-weight:600;margin:0;letter-spacing:-.01em;max-width:24em}
.cta .acts{display:flex;gap:12px;flex-wrap:wrap}

/* ── 页脚 ─────────────────────────────────────── */
footer.ft{border-top:1px solid var(--rule);background:var(--paper-2);padding:34px 0;font-size:13px;color:var(--mute)}
footer.ft .wrap{display:flex;flex-direction:column;gap:9px;align-items:center;text-align:center}
footer.ft a{color:var(--ink-2);border-bottom:1px solid var(--rule-2)}
footer.ft .cs{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#98a19c}
footer.ft .beian-no{line-height:1.6}
footer.ft .beian-grp{display:inline-flex;align-items:center;gap:7px;flex-wrap:nowrap;white-space:nowrap;vertical-align:middle}
footer.ft .ga{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2);font-size:13px;white-space:nowrap;vertical-align:middle}
footer.ft .ga .gat{line-height:1.5}
footer.ft .ga img{flex:none;vertical-align:middle;margin:0;border:0;width:auto;height:20px}

/* ── 触屏设备无悬停：取消抬升与投影，避免手指点过后「粘住」 ── */
@media (hover:none){
  .entry:hover,.qcard:hover{transform:none;box-shadow:none}
}

/* ── 响应式 ───────────────────────────────────── */
@media (max-width:1024px){
  .steps{grid-template-columns:1fr 1fr;gap:26px 0}
  .step:nth-child(3){border-left:0;padding-left:0}
  .vgrid,.pgrid{grid-template-columns:1fr;gap:32px}
  .qcards{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--gut:20px}
  nav.links{display:none}
  nav.links.open{
    display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:64px;
    background:#fff;border-bottom:1px solid var(--rule);padding:8px var(--gut) 14px;
  }
  nav.links.open a{padding:12px 0;border-bottom:1px solid var(--rule)}
  nav.links.open a:last-child{border-bottom:0}
  .nav-toggle{display:block}
  .entries{grid-template-columns:1fr}
  .qcards{grid-template-columns:1fr}
  .qrow{grid-template-columns:44px 1fr 24px;gap:14px}
  .steps{grid-template-columns:1fr;gap:22px}
  .step{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.16);padding-top:16px}
  .step:first-child{border-top:0;padding-top:0}
  .topstrip .wrap{height:auto;padding:9px 0;flex-direction:column;align-items:flex-start;gap:3px}
  .cta .inner{align-items:flex-start}
  /* 移动端单列：卡片文字区更窄但纵向更自由，art 比例回一点，别压得太扁 */
  .entry .art{aspect-ratio:16/9;padding:18px}
  .dg-model .blk{min-width:60px;font-size:14px;padding:12px 9px}
  .dg-model .blk.core{font-size:16px;padding:19px 14px}
}