/* =========================================================
   English page — typography overrides
   共用 assets/styles.css 的版式骨架，这里只调整拉丁字体的排版细节：
   中文字体的字距（letter-spacing）用在英文上会散掉，需要单独收紧。
   ========================================================= */

/* ---------- 字体：拉丁优先，去掉中文衬线 ---------- */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Source Serif 4", "Source Serif Pro", serif;
}

body {
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 字距收紧 ---------- */
.eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.1em;
}
.brand-cn {
  font-size: 15px;
  letter-spacing: 0.08em;
}
.brand-en { letter-spacing: 0.16em; }

h2 { letter-spacing: -0.004em; line-height: 1.18; }

.hero-title {
  font-size: clamp(27px, 3.3vw, 43px);
  line-height: 1.14;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
.hero-lede { max-width: 52ch; }
.hero-note { letter-spacing: 0.005em; }

.lede {
  line-height: 1.8;
  max-width: 64ch;
}
.btn { letter-spacing: 0.01em; }

.card p:not(.card-num) { line-height: 1.72; }
.card-num { letter-spacing: 0.12em; }

.spec-strip b { letter-spacing: 0; }
.spec-strip span { font-size: 12.5px; }

/* 列表里的标签列宽：英文标签比中文长，需要放宽 */
.contact-label {
  flex: 0 0 112px;
  letter-spacing: 0.08em;
}
.plant-spec dt {
  flex: 0 0 106px;
  letter-spacing: 0.04em;
}
.story-facts span {
  flex: 0 0 64px;
  letter-spacing: 0.08em;
}
.reaction-list li em { letter-spacing: 0.01em; }
.reaction-list li { font-size: 14px; }

/* 化学名较长，允许换行并给出行距 */
.catalog-group li span,
.catalog-inline li span { line-height: 1.5; }
.catalog-group li,
.catalog-inline li { align-items: baseline; }
.catalog-group h3 { letter-spacing: -0.002em; }

/* ---------- 页脚 ---------- */
.footer-name {
  letter-spacing: 0.005em;
  line-height: 1.5;
  text-wrap: balance;
}
.footer-tag { letter-spacing: 0.08em; }
/* 英文公司名较长：页脚三列在中等宽度下改为两列，避免名称被挤断 */
@media (min-width: 820px) and (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    row-gap: 26px;
  }
  .footer-meta { grid-column: 1 / -1; text-align: left; }
  .footer-legal { justify-content: flex-start; }
}

/* ---------- 页头：英文导航更长，窄桌面宽度下收紧 ---------- */
@media (min-width: 960px) {
  .nav { gap: 22px; }
  .header-inner { gap: 22px; }
}

@media (min-width: 960px) and (max-width: 1120px) {
  .header-inner { gap: 14px; }
  .nav { gap: 15px; }
  .nav a { font-size: 13px; }
  .header-cta { padding: 8px 12px; font-size: 12px; }
  .brand-cn { font-size: 14px; }
  .lang-switch { margin-left: 10px; }
}

/* ---------- 窄屏：目录项与规格表允许折行 ---------- */
@media (max-width: 560px) {
  .catalog-group li,
  .catalog-inline li {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .catalog-group li code,
  .catalog-inline li code { font-size: 11px; }
  .contact-label { flex: 0 0 96px; }
  .plant-spec dt { flex: 0 0 92px; }
  .story-facts span { flex: 0 0 58px; }
}