/* ══ Praxis 官网 · 共享样式 ═════════════════════════════════════════════════
   三页（首页 / 专栏 / 文档）共用这一份。页头、页脚、按钮、眉标、卡片
   —— 每样只有一个家。★ 别在任何页面里再写第二份，那是"改一处漏两处"。

   色板（唯一来源 · docs/视觉语言宪章.md）
     墨   #0E1116   正文 / 图形主色
     实心 #0D0D0D   按钮底、被点亮的导航项
     深底 #0F0E0E   页脚、封面位
     灰   #5C6675 / #8E98A6 / #A8B0BB   次级 / 弱 / 更弱
     线   #E8EAEE   发丝线      底 #F5F7FA   浅底、渐变落点
     金   #E8C268 / #C9A876   只出现在深底上

   字体：稿上写的是 Noto Sans SC / Inter / JetBrains Mono。
   ★ 官网**不引 webfont** —— 中文 Noto Sans SC 是十几 MB，且 Google Fonts
     在国内不可达；改用系统栈降级（苹果 → PingFang SC，Windows → 雅黑，
     等宽 → SF Mono / Menlo）。字重、字号、行高、字距都按稿抄，不抄字体文件。
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #0E1116;
  --ink-solid: #0D0D0D;
  --ink-bg: #0F0E0E;
  --g2: #5C6675;
  --g3: #8E98A6;
  --g4: #A8B0BB;
  --line: #E8EAEE;
  --line-pill: #D4D4D8;
  --surface: #F5F7FA;
  --chip: #F0F0F1;
  --chip-ink: #5C6675;
  --gold: #E8C268;
  --gold-2: #C9A876;
  --shade-a: rgba(15, 20, 25, .05);
  --shade-b: rgba(15, 20, 25, .06);

  --sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
          -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --latin: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
          Consolas, monospace;

  --pad-x: 120px;
  --max-w: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }

/* 版面：内容 1200 = 1440 − 120×2（与稿同宽，更宽的屏居中不加宽） */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* 眉标 / 编号 / 日期 —— 稿上都是等宽小字 */
.eyebrow, .num, .date, .trust, .grp-t {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--g3);
  letter-spacing: 0;
}

/* ── 品牌 P 标 ────────────────────────────────────────────────────────────
   ★ 用 mask 而不是内联 SVG：**一枚标只有一个源文件**（assets/p-mark.svg），
     颜色交给 currentColor —— 页眉要墨、页脚要金，同一份几何两处上色。
   ★ 几何来自仓库 assets/praxis-p-mark.svg（viewBox 4386.5 × 5900.72
     ⇒ 宽高比 0.7434）。**要改形状去资产文件改，别在这里改。** */
.mark {
  display: block;
  width: 19.33px;
  height: 26px;
  background-color: currentColor;
  -webkit-mask: url("/assets/p-mark.svg") no-repeat center / contain;
  mask: url("/assets/p-mark.svg") no-repeat center / contain;
}

/* ── 页头 ─────────────────────────────────────────────────────────────── */
.nav { background: #fff; border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; height: 72px; }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  color: var(--ink);
}
.brand b { font-family: var(--latin); font-size: 17px; font-weight: 600; line-height: 1; }
.menu { display: flex; align-items: center; gap: 32px; white-space: nowrap; }
.menu a { font-size: 14px; color: var(--g2); line-height: 1.2; }
.menu a:hover { color: var(--ink); }
.menu a.on { color: var(--ink-solid); font-weight: 600; }
.acts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1 1 0;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.pill-ghost { background: #fff; border: 1px solid var(--line-pill); color: var(--ink); }
.pill-ghost:hover { border-color: var(--ink); }
.pill-solid { background: var(--ink-solid); color: #fff; }
.pill-solid:hover { background: #000; }

/* ── 首屏 ─────────────────────────────────────────────────────────────── */
.hero {
  padding: 88px 0 0;
  background: linear-gradient(to bottom, #FFFFFF 0%, #F5F7FA 100%);
  overflow: hidden;              /* 稿里 hero 是 clipsContent：窗的阴影在底边收掉 */
  text-align: center;
}
.hero-in { display: flex; flex-direction: column; align-items: center; }
/* ★ 2026-10-27：`align-items:center` 让子项按**内容宽**排，中文长句不折行 ⇒ 手机端被 overflow:hidden 切掉。
   这两行是移动端能看的前提，别删。 */
.hero-in > * { max-width: 100%; }
.hero h1 {
  margin-top: 22px;
  font-size: 76px;
  line-height: 88px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero .lede {
  margin-top: 22px;
  max-width: 760px;
  font-size: 18px;
  line-height: 31px;
  color: var(--g2);
}
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 100px;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, opacity .15s;
}
.btn-solid { padding: 0 30px; background: var(--ink); color: #fff; font-weight: 500; }
.btn-solid:hover { background: #000; }
.btn-ghost { padding: 0 24px; color: var(--ink); border: 1px solid rgba(14, 17, 22, .1); }
.btn-ghost:hover { border-color: rgba(14, 17, 22, .3); }
.trust { margin-top: 26px; }
.trust b { font-weight: 600; color: var(--g2); }
/* 第三动作降级成文字链接 —— 按钮区只留「下载 / 登录」两个真正的动作 */
.hero-more { margin-top: 18px; }
.hero-more a {
  font-size: 13px;
  color: var(--g3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.hero-more a:hover { color: var(--g1); border-bottom-color: var(--line); }
.stage {
  width: 1040px;
  max-width: 100%;
  height: 560px;
  margin-top: 56px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px var(--shade-a), 0 3px 8px -2px var(--shade-b);
}
.stage img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ── 内页首屏（专栏 / 文档）────────────────────────────────────────────── */
.pagehead { padding: 88px 0 72px; background: #fff; }
.pagehead.tight { padding-bottom: 56px; }
.pagehead h1 { margin-top: 18px; font-size: 56px; line-height: 70px; font-weight: 600; letter-spacing: -0.02em; }
.pagehead .lede { margin-top: 18px; font-size: 16px; line-height: 28px; color: var(--g2); }

/* 文档页的搜索框（稿上是静态的，接后端之前不写 JS） */
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 420px;
  max-width: 100%;
  height: 48px;
  margin-top: 14px;
  padding: 0 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--g4);
  font-size: 15px;
}
.search svg { flex: 0 0 16px; }

/* ── 核心能力（首页 01–03）───────────────────────────────────────────── */
/* 稿上「首屏 · 下边线」—— 首屏与核心能力之间那一条发丝线 */
.cap { padding: 120px 0 128px; background: #fff; border-top: 1px solid var(--line); }
.sec-head { display: flex; flex-direction: column; gap: 18px; }
.sec-head h2 { font-size: 44px; line-height: 54px; font-weight: 600; letter-spacing: -0.02em; }
.sec-head .lede { max-width: 800px; font-size: 17px; line-height: 30px; color: var(--g2); }
.cap .sec-head { margin-bottom: 64px; }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.row + .row { margin-top: 96px; }
.row.flip { flex-direction: row-reverse; }
.blk { flex: 0 0 448px; display: flex; flex-direction: column; gap: 16px; }
.blk h3 { font-size: 30px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; }
.blk p { font-size: 16px; line-height: 30px; color: var(--g2); }
.shot {
  flex: 0 0 640px;
  height: 400px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px var(--shade-a), 0 3px 8px -2px var(--shade-b);
}
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ── 专栏 · 精选 ──────────────────────────────────────────────────────── */
.feature { padding: 0 0 72px; background: #fff; }
.feature .eyebrow { display: block; margin-bottom: 22px; }
.fcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.fcard-in { flex: 0 0 600px; display: flex; flex-direction: column; gap: 16px; }
.fmeta { display: flex; align-items: center; gap: 10px; }
.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  background: var(--chip);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--chip-ink);
  white-space: nowrap;
}
.fmeta .date { font-size: 12px; }
.fcard h3 { font-size: 32px; line-height: 44px; font-weight: 600; letter-spacing: -0.01em; }
.fcard .abs { font-size: 16px; line-height: 30px; color: var(--g2); }
.more { font-size: 14px; font-weight: 500; color: var(--ink-solid); }
.more:hover { text-decoration: underline; }
.fcover {
  flex: 0 0 420px;
  height: 280px;
  background: var(--ink-bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.fcover .mark { width: 112px; height: 150px; }

/* ── 专栏 · 文章列表 ──────────────────────────────────────────────────── */
.list { padding: 0 0 88px; background: #fff; }
.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.list-head .sort { font-family: var(--mono); font-size: 12px; font-weight: 400; line-height: 1.2; color: var(--g4); }
.post {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
/* ★ 这两个 `flex: 1 1 auto` ＋ `min-width: 0` 是**量出来的**，别改回默认值：
   若让它们按内容撑开（flex-basis:auto），Chrome 对**嵌套 flex 容器里可折行的文字**
   算出的固有宽度会比实际窄约 5%（实测 14 字标题：需要 277.2px，只分到 262.8px）
   ⇒ 每篇文章标题的最后一个字被挤到第二行、整页高 117px。
   **宽度由容器给，不由内容猜。** */
.post-l { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; }
.post .date { flex: 0 0 124px; font-size: 13px; font-weight: 400; }
.post h3 { flex: 1 1 auto; min-width: 0; font-size: 20px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em; }
.post:hover h3 { text-decoration: underline; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  background: rgba(14, 17, 22, .04);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--g2);
  white-space: nowrap;
}

/* ── 文档 · 六类问题 ─────────────────────────────────────────────────── */
.cards { padding: 0 0 88px; background: #fff; }
.cards-row { display: flex; gap: 20px; }
.cards-row + .cards-row { margin-top: 20px; }
.card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.card h3 { font-size: 20px; line-height: 28px; font-weight: 500; }
.card p { font-size: 14px; line-height: 26px; color: var(--g2); }
.card .more { font-size: 13px; margin-top: auto; }

/* ── 文档 · 尾号召 ───────────────────────────────────────────────────── */
.cta { background: var(--surface); }
.cta-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.cta b { font-size: 18px; font-weight: 500; }
.cta a { font-size: 15px; font-weight: 500; color: var(--ink-solid); }
.cta a:hover { text-decoration: underline; }

/* ── 页脚（深底）─────────────────────────────────────────────────────── */
.foot { padding: 80px 0 40px; background: var(--ink-bg); color: #fff; }
.foot-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.foot-brand { display: flex; flex-direction: column; gap: 14px; color: #fff; }
.foot-brand .mark { width: 20.81px; height: 28px; color: var(--gold); }
.foot-brand b { font-family: var(--latin); font-size: 18px; font-weight: 600; line-height: 1.2; }
.foot-brand span { font-size: 13px; line-height: 1.2; color: var(--gold-2); }
.foot-links { display: flex; gap: 72px; }
.grp { display: flex; flex-direction: column; gap: 14px; }
.grp-t { font-family: "IBM Plex Mono", var(--mono); font-size: 11px; color: #fff; }
.grp a { font-size: 14px; line-height: 1.3; color: #fff; }
.grp a:hover { color: var(--gold); }
.foot-mark {
  margin-top: 88px;
  font-family: var(--latin);
  font-size: 120px;
  line-height: 132px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 228, 201, .07);   /* 稿：巨型字标 8% 前后 —— 实测 7% */
  user-select: none;
}
.foot-rule { height: 1px; margin: 24px 0; background: rgba(255, 255, 255, .1); }
.foot-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--g3);
}
.beian { display: flex; align-items: center; gap: 18px; }
.beian a { display: inline-flex; align-items: center; gap: 6px; color: var(--g3); }
.beian a:hover { color: #fff; text-decoration: underline; }
/* ★ 图标是**平台下发的原件**（praxis-site/gongan.png，20×20 PNG），不是自己画的。
     规范要求编号**前面**要有它 —— 所以这里不调透明度（稿上写了 0.25，见文件头说明）。*/
.gongan-icon { width: 16px; height: 17px; }

/* ── 窄屏兜底 ────────────────────────────────────────────────────────────
   ★ 稿上**没有移动端规格**。这一层不是"移动版设计"，只是**不破版的兜底**：
     收边距、折行、把两栏叠成一栏。真正的移动端稿出来之后整块替换掉。 */
@media (max-width: 1360px) { :root { --pad-x: 64px; } }
@media (max-width: 1080px) {
  .row, .row.flip { flex-direction: column; align-items: stretch; gap: 32px; }
  .row + .row { margin-top: 72px; }
  .blk, .shot { flex: 1 1 auto; }
  .shot { height: auto; aspect-ratio: 640 / 400; }
  .fcard { flex-direction: column; align-items: stretch; }
  .fcard-in { flex: 1 1 auto; }
  .fcover { width: 100%; height: auto; aspect-ratio: 420 / 280; flex: 1 1 auto; }
  .cards-row { flex-direction: column; }
  .stage { height: auto; aspect-ratio: 1040 / 560; }
  .foot-top { flex-direction: column; gap: 48px; }
}
@media (max-width: 820px) {
  :root { --pad-x: 24px; }
  .nav-in { height: auto; flex-wrap: wrap; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .brand, .acts { flex: 0 0 auto; }
  .menu { order: 3; width: 100%; gap: 20px; }
  .hero { padding-top: 56px; }
  .hero h1 { font-size: 40px; line-height: 1.25; text-wrap: balance; }
  .pagehead h1 { font-size: 34px; line-height: 1.25; }
  .cap { padding-top: 72px; padding-bottom: 72px; }
  .sec-head h2 { font-size: 28px; line-height: 1.3; }
  .foot { padding-top: 56px; }
  .foot-mark { margin-top: 56px; font-size: 64px; line-height: 72px; }
  .foot-bot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .post { flex-direction: column; align-items: flex-start; gap: 10px; }
  .post .date { flex: 0 0 auto; }
}