/* ─────────────────────────────────────────────────────────────
   cathycbio.com — 克制学术型
   立意:一份技术专著,不是落地页。边注标签 + 细横线 + 长留白。
   ───────────────────────────────────────────────────────────── */

:root {
  /* 纸与墨:都不用纯值,极轻微向蓝调偏,和强调色同源 */
  --paper:        #FDFDFB;
  --paper-sunk:   #F6F6F2;
  --ink:          #16191D;
  --ink-muted:    #565F69;
  --ink-faint:    #8A939C;
  --rule:         #DDDED8;
  --rule-strong:  #B9BCB5;
  --accent:       #1B3A5C;
  --accent-soft:  #E8ECF1;

  --serif: "Newsreader", "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans:  "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* 流体间距:大屏上要真的呼吸 */
  --gap-xs:  0.5rem;
  --gap-sm:  1rem;
  --gap-md:  clamp(1.75rem, 1.2rem + 2vw,  3rem);
  --gap-lg:  clamp(3.5rem,  2.5rem + 4vw,  6.5rem);
  --gap-xl:  clamp(5rem,    3rem   + 8vw, 10rem);

  --measure: 63ch;
  --shell:   72rem;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* ── 骨架 ───────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

.measure { max-width: var(--measure); }

/* ── 页眉 ───────────────────────────────────────────────── */

.masthead {
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-sm) var(--gap-md);
  padding-block: 1.5rem;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span { color: var(--ink-faint); font-weight: 400; }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem clamp(1.25rem, 3vw, 2.25rem);
  font-size: 0.9375rem;
}

.nav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 120ms linear, border-color 120ms linear;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

@media (max-width: 34rem) {
  .masthead__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding-block: 1.15rem;
  }
  .wordmark { font-size: 1.0625rem; white-space: normal; }
  .nav { gap: 0.35rem 1.35rem; }
}

/* ── 首屏 ───────────────────────────────────────────────── */

.hero { padding-block: var(--gap-xl) var(--gap-lg); }

.hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--gap-md);
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.5rem + 3.7vw, 4.15rem);
  line-height: 1.06;
  letter-spacing: -0.021em;
  margin: 0;
  max-width: 19ch;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.35rem);
  line-height: 1.58;
  color: var(--ink-muted);
  margin: var(--gap-md) 0 0;
  max-width: 52ch;
}

/* ── 分节:宽屏走边注栏,窄屏堆叠 ─────────────────────────── */

.band { border-top: 1px solid var(--rule); }
.band--sunk { background: var(--paper-sunk); border-top-color: var(--rule); }

.section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-sm) clamp(2rem, 4.5vw, 4.5rem);
  padding-block: var(--gap-lg);
}

@media (min-width: 62rem) {
  .section { grid-template-columns: 11.5rem minmax(0, 1fr); }
}

.section__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
  padding-top: 0.55rem;
}
.section__label b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--rule-strong);
  margin-bottom: 0.15rem;
}

.section__body > :first-child { margin-top: 0; }
.section__body > :last-child  { margin-bottom: 0; }

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: -0.014em;
  margin: 0 0 var(--gap-sm);
  max-width: 24ch;
  text-wrap: balance;
}

h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  margin: 0 0 0.4rem;
  color: var(--ink);
}

p { margin: 0 0 1.15rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; }

/* ── 条目表:横线分隔,不做卡片 ─────────────────────────── */

.entries { margin: 0; padding: 0; list-style: none; }

.entries > li {
  padding-block: var(--gap-md);
  border-top: 1px solid var(--rule);
}
.entries > li:first-child { border-top: none; padding-top: 0; }
.entries > li:last-child  { padding-bottom: 0; }

@media (min-width: 48rem) {
  .entries > li {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 0 clamp(1.5rem, 3vw, 3rem);
    align-items: start;
  }
}

.entries h3 { margin-bottom: 0; }
.entries p  { color: var(--ink-muted); }
@media (max-width: 47.99rem) {
  .entries h3 { margin-bottom: 0.5rem; }
}

/* ── 局限声明:本站最重要的信任来源,给它自己的质地 ────────── */

.limits { margin: 0; padding: 0; list-style: none; }
.limits > li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 1.15rem;
  max-width: var(--measure);
  color: var(--ink-muted);
}
.limits > li:last-child { margin-bottom: 0; }
.limits > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 0.7rem;
  height: 1px;
  background: var(--rule-strong);
}
.limits strong { color: var(--ink); font-weight: 600; }

/* ── 联系块 ─────────────────────────────────────────────── */

.contact-line {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 var(--gap-sm);
  word-break: break-word;
}
.contact-line a { text-decoration-color: var(--rule-strong); }

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--gap-md);
  margin: 0;
  padding: 0;
}
.meta-grid dt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}
.meta-grid dd { margin: 0; color: var(--ink-muted); }

/* ── 页脚 ───────────────────────────────────────────────── */

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: var(--gap-md);
  font-size: 0.875rem;
  color: var(--ink-faint);
}
.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs) var(--gap-md);
  justify-content: space-between;
}
.colophon a { color: var(--ink-muted); text-decoration: none; }
.colophon a:hover { color: var(--ink); text-decoration: underline; }

/* ── 可及性 ─────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--paper);
  padding: 0.6rem 1rem;
  border: 1px solid var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   数据层组件(build.py 渲染出来的东西)
   ═══════════════════════════════════════════════════════════ */

h4 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: var(--gap-md) 0 0.6rem;
}
h4:first-child { margin-top: 0; }

.muted { color: var(--ink-muted); }

.fineprint {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-faint);
  margin-top: 0.9rem;
}

/* ── 规格表:细横线,无斑马纹(斑马纹一看就是模板) ────────── */

.table-wrap { overflow-x: auto; margin: 0 0 1.15rem; }
.table-wrap:last-child { margin-bottom: 0; }

table.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.55;
}

table.spec th,
table.spec td {
  text-align: left;
  vertical-align: baseline;
  padding: 0.7rem 1.25rem 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
table.spec tr:last-child th,
table.spec tr:last-child td { border-bottom: none; }
table.spec td:last-child,
table.spec th:last-child { padding-right: 0; }

table.spec tbody th {
  font-weight: 400;
  color: var(--ink-faint);
  white-space: nowrap;
  width: 1%;
}
table.spec tbody td { color: var(--ink); }

table.spec thead th {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-color: var(--rule-strong);
  white-space: nowrap;
}

table.spec--4 tbody th { color: var(--ink); white-space: normal; width: auto; }
table.spec .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── 自绘图:和正文同一套墨色,不引入第二套配色 ────────────── */

.diagram { margin: var(--gap-md) 0 0; padding: 0; }
.diagram:first-child { margin-top: 0; }
.diagram svg { width: 100%; height: auto; display: block; overflow: visible; }

.diagram figcaption {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-faint);
  margin-top: 1rem;
  max-width: 58ch;
}

.dg-rule  { stroke: var(--rule-strong); stroke-width: 1; }
.dg-tick  { stroke: var(--rule-strong); stroke-width: 1; }
.dg-path  { stroke: var(--rule-strong); stroke-width: 1; fill: none; }
.dg-box   { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.dg-box--accent { stroke: var(--accent); stroke-width: 1.5; }

.diagram text { text-anchor: middle; }
.dg-num {
  font-family: var(--serif);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  fill: var(--rule-strong);
}
.dg-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  fill: var(--ink);
}
.dg-sub {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  fill: var(--ink-faint);
}

@media (max-width: 44rem) {
  .dg-label { font-size: 17px; }
  .dg-sub   { font-size: 15px; }
  .dg-num   { font-size: 24px; }
}

/* ── 可点条目 ──────────────────────────────────────────────── */

.entries--linked > li h3 a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 1px;
  transition: border-color 120ms linear;
}
.entries--linked > li h3 a:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* ── 关键参数格 ────────────────────────────────────────────── */

.meta-grid--stat { gap: var(--gap-sm) var(--gap-md); margin-bottom: var(--gap-md); }
.meta-grid--stat dd {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
}

/* ── 流程图字号:viewBox 会整体缩放,字号得按缩放后倒推 ────── */
.dg-num   { font-size: 26px; }
.dg-label { font-size: 17px; }
.dg-sub   { font-size: 14px; }

/* 窄屏:图换列表。宽图缩到手机上标签只有 6px,不是「小」是「没有」 */
.diagram-steps { display: none; }

@media (max-width: 46rem) {
  .diagram--fallback svg { display: none; }
  .diagram-steps {
    display: block;
    list-style: none;
    counter-reset: dg;
    margin: 0;
    padding: 0;
  }
  .diagram-steps li {
    counter-increment: dg;
    position: relative;
    padding: 0.65rem 0 0.65rem 2.5rem;
    border-top: 1px solid var(--rule);
  }
  .diagram-steps li:first-child { border-top: none; }
  .diagram-steps li::before {
    content: counter(dg, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.7rem;
    font-family: var(--serif);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    color: var(--rule-strong);
  }
  .diagram-steps strong { font-weight: 600; margin-right: 0.6rem; }
  .diagram-steps span   { color: var(--ink-faint); font-size: 0.9375rem; }
}

/* 四个关键参数排一行,不让第四个掉下去 */
.meta-grid--stat { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.meta-grid--stat dd { font-size: 1.15rem; }

/* 分支图 fallback:2 和 3 是并列的两条路,不是先后 */
@media (max-width: 46rem) {
  .diagram-steps--branch li:nth-child(2)::before,
  .diagram-steps--branch li:nth-child(3)::before { content: "\2937"; font-size: 1rem; }
  .diagram-steps--branch li:nth-child(4)::before { content: "="; }
}

/* ── 供应商素材:图与合作方档案 ─────────────────────────── */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gap-md);
  margin: var(--gap-md) 0 0;
}

figure.shot { margin: 0; }
figure.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: #fff;
}
/* 四张图长宽比不一,统一成同一个比例框、图内居中 —— 不然网格底部参差留大空档 */
.shots figure.shot img {
  aspect-ratio: 16 / 11;
  object-fit: contain;
  padding: 0.4rem;
}
figure.shot figcaption {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-top: 0.6rem;
}
figure.shot--wide { margin: var(--gap-md) 0 0; max-width: 34rem; }

.partner-head {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  flex-wrap: wrap;
  padding: var(--gap-sm) 0;
  margin: var(--gap-sm) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.partner-logo { width: 168px; height: auto; display: block; }
.partner-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin: 0 0 0.15rem;
}
.partner-head .fineprint { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════
   首页专用版式 —— 目的是把节奏打散
   原先每一节都是同一个边注栏布局,匀速、通篇是字,
   读起来像模板。下面五块各有各的骨架。
   ═══════════════════════════════════════════════════════════ */

/* ── ① 首屏:左文右图 ─────────────────────────────────────── */

.hero--split {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  padding: var(--gap-xl) clamp(1.25rem, 5vw, 3.5rem) var(--gap-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-lg) clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .hero--split {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    padding-block: clamp(4rem, 2rem + 7vw, 8rem) var(--gap-lg);
  }
}

.hero__text h1 { max-width: 15ch; }
.hero__text .lede { max-width: 44ch; }

.hero__figure { margin: 0; }
.hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: #fff;
}
.hero__figure figcaption {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-faint);
  margin-top: 0.7rem;
}

/* ── ② 价格钩子:首屏就给数,不让人先「联系我们」 ──────────── */

.hook {
  margin-top: var(--gap-md);
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--gap-sm);
  max-width: 44ch;
}
.hook__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.hook__row:last-of-type { border-bottom: none; }
.hook__num {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 0;
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 15rem;
}
.hook__num span {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-left: 0.45rem;
}
.hook__label {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted);
  flex: 1 1 12rem;
}
.hook__note {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* ── ③ 无边注栏的整幅节 ───────────────────────────────────── */

.section--flat { display: block; }
.section--flat > .section__label--inline {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: var(--gap-sm);
  padding-top: 0;
}
.section__label--inline b {
  display: inline;
  font-size: 1.05rem;
  margin: 0;
}

/* ── ④ 参数带 ─────────────────────────────────────────────── */

.statband__h {
  margin-bottom: var(--gap-md);
}
.statband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--gap-md);
  margin: 0 0 var(--gap-lg);
  padding: 0;
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--gap-md);
}
.statband dt {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}
.statband dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* ── ⑤ 图库:三列,宽出正文版心 ──────────────────────────── */

.shots--gallery {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: var(--gap-md);
}
.shots--gallery figure.shot img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 0.5rem;
}

/* ── ⑥ 图文并置 ──────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-md) clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 58rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.split > div > :first-child { margin-top: 0; }
.split figure.shot img { aspect-ratio: 16 / 10; object-fit: cover; }

/* ── ⑦ 业务条目上的起价 ──────────────────────────────────── */

.entry-price {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--accent);
  margin: 0.4rem 0 0.15rem;
}
.entries--linked > li > div > p:first-child { margin-bottom: 0; }

/* ── 合作机构清单:分组文字,不用读不懂的校徽墙 ─────────────── */

.inst-h {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: var(--gap-md) 0 0.35rem;
  text-transform: none;
}
.inst-h + .fineprint { margin-top: 0; margin-bottom: var(--gap-sm); }

.instgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--gap-sm) var(--gap-md);
  border-top: 1px solid var(--rule);
  padding-top: var(--gap-sm);
}
.instgrid h4 { margin-top: 0; }

ul.plainlist { list-style: none; margin: 0; padding: 0; }
ul.plainlist li {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
  padding: 0.22rem 0;
}

/* ── 算例:最后两行是小计,给它们不同的分量 ─────────────────── */

table.spec--sum tbody th { white-space: normal; width: auto; color: var(--ink); }
table.spec--sum tr.sum th,
table.spec--sum tr.sum td {
  border-top: 1px solid var(--rule-strong);
  border-bottom: none;
  font-weight: 600;
}
table.spec--sum tr.sum:last-child th,
table.spec--sum tr.sum:last-child td {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--accent);
  border-top: none;
  padding-top: 0.35rem;
}

/* 列表之后紧跟的小标题要有喘息,不然贴着上一条 */
.limits + h3, ul + h3, .table-wrap + h3 { margin-top: var(--gap-md); }

/* 分类小引言 */
.lede-sm { font-size: 1.0625rem; color: var(--ink-muted); max-width: 52ch; margin-bottom: var(--gap-md); }
/* 起价后面的单位 */
.entry-price span {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-left: 0.3rem;
}
.entry-price--quote { color: var(--ink-faint); font-size: 1rem; }