/* ============================================================
   zh-calm.css · Chinese calm typography overlay
   Loads LAST — after /styles.css, /product.css, /blog/blog.css —
   in /zh/ and /zh/blog/ only. Every rule is gated on
   html:lang(zh): the English pages are untouched, and removing
   the single <link> (or this file) rolls the change back.

   Voice: refined calm editorial. One explicit role scale —
   hero 48/36 · statement + lead 40/32 · section titles 28/24 ·
   data values 40/34 · statement reading 22/18 · body 16–18 at
   1.75 · labels 13/1.5 weight 500 — headings hold weight 500
   with tracking 0 (hero +0.02em), sections breathe 96–144 on
   desktop and 64–80 on small screens. CJK runs in the
   self-hosted Chiron Hei HK variable face (root installs the
   @font-face in /vendor/fonts/fonts.css; real 400–700, and
   font-synthesis is off in styles.css — no fake bold).
   Palette, layout grids (45/55 steps, 3->1 metric columns), the
   not-equal marks, word-reveal and bar motion all stay as
   shipped; the English hero is untouched except the wordmark.
   ============================================================ */

/* --- Wordmark: one size on every route and breakpoint — 20px.
       English keeps Newsreader 500 (styles.css / blog.css); the
       Chinese mark runs entirely in Chiron Hei HK (the family
       carries its own Latin, so "Pear雪仪" never mixes faces),
       weight 500, tracked to 0.1em. --- */
html:lang(zh) .wordmark,
html:lang(zh) .blog-wordmark,
html:lang(zh) .footer-wordmark,
html:lang(zh) .blog-footer-wordmark {
  font-family: "Chiron Hei HK Web", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

/* --- Voice: CJK display eases 700 -> 500 with real leading and
       neutral tracking (never cramped). --- */
html:lang(zh) .hero-row,
html:lang(zh) .evidence-word,
html:lang(zh) .evidence-phrase,
html:lang(zh) .statement-title,
html:lang(zh) .lead-title,
html:lang(zh) .pricing-title,
html:lang(zh) .pricing-price,
html:lang(zh) .stat-value,
html:lang(zh) .product-intro-title,
html:lang(zh) .product-title,
html:lang(zh) .product-between-title,
html:lang(zh) .product-trust h2,
html:lang(zh) .product-close h2,
html:lang(zh) .footer-slogan,
html:lang(zh) .footer-marquee h2,
html:lang(zh) .blog-title,
html:lang(zh) .library-heading,
html:lang(zh) .blog-section-title {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}
/* Hero gets the one slightly-positive track — two Hanzi, room to read */
html:lang(zh) .hero-row { letter-spacing: 0.02em; }

/* --- Scene display: hero 48, statement + lead 40, evidence 40,
       data values 40 on desktop (36/32/32/34 mobile, below) --- */
html:lang(zh) .hero-row { font-size: clamp(36px, 3.4vw, 48px); }
html:lang(zh) .statement-title { font-size: clamp(32px, 3vw, 40px); }
html:lang(zh) .lead-title { font-size: clamp(32px, 3vw, 40px); }
html:lang(zh) .evidence-word,
html:lang(zh) .evidence-phrase { font-size: clamp(32px, 2.8vw, 40px); }
html:lang(zh) .stat-value { font-size: clamp(34px, 2.8vw, 40px); }
/* Words + mark read as one coherent cluster at the smaller size */
html:lang(zh) #hero .not-equal {
  width: clamp(22px, 2.6vw, 38px);
  margin: clamp(6px, 1.3vh, 13px) auto;
}
html:lang(zh) .not-equal--evidence { width: clamp(18px, 2.2vw, 32px); }
html:lang(zh) .evidence-title { column-gap: clamp(12px, 1.6vw, 22px); }

/* --- Hero intro + lead copy: the longer zh sentences are allowed
       to balance over two comfortable lines at 16–18 — no forced
       single line, no nowrap. --- */
html:lang(zh) .hero-intro {
  max-width: min(30em, 100%);
  font-size: clamp(16px, 0.6vw, 17px);
  font-weight: 500;
  line-height: 1.75;
  white-space: normal;
  text-wrap: balance;
}
html:lang(zh) .lead-copy {
  max-width: min(32em, 100%);
  font-size: clamp(16px, 0.7vw, 18px);
  font-weight: 500;
  line-height: 1.75;
  white-space: normal;
  text-wrap: pretty;
}

/* --- Statement reading copy: three balanced sentences centered
       as their own calm full-height scene. The measure is the
       ~34em CJK target (≈46rem); paragraphs stay inline flow —
       the word-reveal spans are never broken into blocks — and
       nothing is cropped by a fixed height. --- */
html:lang(zh) .reading-copy {
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  width: 100%; max-width: min(48rem, 34em);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
  padding-block: clamp(64px, 10vh, 96px);
  text-align: center;
}
html:lang(zh) .reading-copy p {
  max-width: 100%;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.8;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}
html:lang(zh) .reading-copy p + p { margin-top: 1.1em; }

/* --- Product sections: titles at the 28/24 section role,
       measured air (96–144 desktop rhythm); the 45/55 grid is
       untouched --- */
html:lang(zh) .product-intro-title,
html:lang(zh) .product-title,
html:lang(zh) .product-between-title { font-size: clamp(24px, 2vw, 28px); }
html:lang(zh) .product-title { margin-top: 16px; }
html:lang(zh) .product-trust h2 { font-size: clamp(24px, 1.9vw, 28px); }
/* The closing hand-off stays one step above the section titles */
html:lang(zh) .product-close h2 { font-size: clamp(28px, 2.6vw, 36px); }
html:lang(zh) .product-intro {
  padding-block: clamp(96px, 10vw, 144px) clamp(32px, 3.6vw, 56px);
}
html:lang(zh) .product-step { padding-block: clamp(96px, 9vw, 144px); }
html:lang(zh) .product-between {
  padding-block: clamp(96px, 10vw, 144px) clamp(72px, 8vw, 112px);
}
html:lang(zh) .product-trust {
  padding-block: clamp(72px, 8vw, 120px) clamp(56px, 6vw, 88px);
}
html:lang(zh) .product-close {
  padding-block: clamp(96px, 10vw, 144px) clamp(48px, 5vw, 72px);
}
html:lang(zh) .product-intro-lede { margin-top: clamp(20px, 2.4vw, 30px); }

/* --- Body stays body: 16–18 at weight 400 with a relaxed 1.75
       leading — generous, never tiny --- */
html:lang(zh) .product-intro-lede,
html:lang(zh) .product-lede,
html:lang(zh) .product-between > p,
html:lang(zh) .product-close p,
html:lang(zh) .product-points li,
html:lang(zh) .product-trust li,
html:lang(zh) .between-feature p,
html:lang(zh) .marker-explainer {
  font-weight: 400;
  font-size: clamp(16px, 0.9vw, 18px);
  line-height: 1.75;
}
html:lang(zh) .mission {
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.75;
}
html:lang(zh) { --body-lg: clamp(16px, 0.28vw + 14.6px, 18px); }   /* blog ledes */
html:lang(zh) .blog-lede,
html:lang(zh) .resources-lede,
html:lang(zh) .library-body { line-height: 1.75; }

/* --- Pricing: section title 28, price as a data value 40 --- */
html:lang(zh) .pricing-title { font-size: clamp(24px, 2vw, 28px); }
html:lang(zh) .pricing-price { font-size: clamp(34px, 3vw, 40px); }
html:lang(zh) .footer-slogan,
html:lang(zh) .footer-marquee h2 {
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.2;
}

/* --- Blog + Health Library: the index title sits at the
       statement role, the Library heading at the section role --- */
html:lang(zh) .blog-title { font-size: clamp(32px, 3vw, 40px); }
html:lang(zh) .library-heading { font-size: clamp(24px, 2vw, 28px); }
html:lang(zh) .blog-section-title { font-size: 22px; }
html:lang(zh) .resource-title a { font-size: clamp(20px, 1.6vw, 22px); line-height: 1.5; }

/* ============================================================
   Small screens — the same scale carried down. Stat bars keep
   their 86% width and --pct heights, so the line-to-column
   animation and proportions are unchanged.
   ============================================================ */
@media (max-width: 768px) {
  html:lang(zh) .hero-row { font-size: 36px; }
  html:lang(zh) .statement-title { font-size: 32px; }
  html:lang(zh) .lead-title { font-size: 32px; }
  html:lang(zh) .evidence-word,
  html:lang(zh) .evidence-phrase { font-size: 32px; }
  html:lang(zh) .stat-value { font-size: 34px; }
  html:lang(zh) .reading-copy p { font-size: 18px; }
  html:lang(zh) #hero .not-equal { width: clamp(20px, 6vw, 26px); }
  html:lang(zh) .not-equal--evidence { width: clamp(16px, 5vw, 20px); }
  html:lang(zh) .product-intro-title,
  html:lang(zh) .product-title,
  html:lang(zh) .product-between-title { font-size: 24px; }
  html:lang(zh) .product-trust h2 { font-size: 24px; }
  html:lang(zh) .product-close h2 { font-size: 28px; }
  html:lang(zh) .pricing-title { font-size: 24px; }
  html:lang(zh) .pricing-price { font-size: 34px; }
  html:lang(zh) .footer-slogan,
  html:lang(zh) .footer-marquee h2 { font-size: clamp(36px, 10vw, 40px); }
  html:lang(zh) .blog-title { font-size: 32px; }
  html:lang(zh) .library-heading { font-size: 24px; }
  html:lang(zh) .resource-title a { font-size: clamp(19px, 5.4vw, 22px); }
}

/* Phones/tablets — product sections at 64–80; matches the shared
   960 breakpoint where the steps collapse to one column */
@media (max-width: 960px) {
  html:lang(zh) .product-intro {
    padding-block: clamp(64px, 8vw, 80px) clamp(32px, 4vw, 44px);
  }
  html:lang(zh) .product-step { padding-block: clamp(64px, 8vw, 80px); }
  html:lang(zh) .product-between {
    padding-block: clamp(64px, 8vw, 80px) clamp(48px, 7vw, 72px);
  }
  html:lang(zh) .product-trust {
    padding-block: clamp(56px, 7vw, 72px) clamp(48px, 6vw, 64px);
  }
  html:lang(zh) .product-close {
    padding-block: clamp(64px, 8vw, 80px) clamp(32px, 4.5vw, 48px);
  }
}