/* ============================================================
   mimicu — EN-aware typography overrides
   ============================================================
   Why this file exists:
   The marketing pages were sized for Traditional Chinese, where
   each glyph is roughly square (~1em wide) and a 14ch line at
   font-size 76px fits comfortably in the hero column.

   English Fraunces glyphs average ~0.5em wide, so a forced-wrap
   line like "The trouble in partnerships" (27 chars) at 76px
   renders ~970px — overflowing the ~573px hero column at the
   1280×800 laptop breakpoint.

   This stylesheet tightens the type scale ONLY when
   html[data-lang="en"] is active. Chinese rendering is unchanged.

   Loaded AFTER each page's inline <style id="tokens"> block so
   selector-specificity ties resolve in this file's favour.
   ============================================================ */

/* ------------------------------------------------------------
   01 — HERO (index.html)
   The visible 1280×800 overflow originally flagged.
   ZH: clamp(40px, 5.6vw, 76px)  → unchanged
   EN: cap at 44px so the forced <br> lines fit the 1.3fr column.
   ------------------------------------------------------------ */
html[data-lang="en"] .hero h1{
  /* Cap at 40px — empirically the largest size at which the three
     forced <br> lines render on three lines. At 42px+ the longest
     line ("The trouble in partnerships", 27 chars) outgrows the
     ~567px column and breaks to a fourth line.
     No max-width: the column itself constrains; an explicit ch cap
     would force premature wraps and break the 3-line structure. */
  font-size: clamp(28px, 3.1vw, 40px);
  letter-spacing: 0;
  line-height: 1.18;
}

/* ------------------------------------------------------------
   02 — Page-level <h1> not inside .hero
   about / contact / layers / pricing / stories / terms
   Each page declares its own h1 rule with values like
   clamp(36px, 5.2vw, 64px) — fine for ZH, too tall for EN.
   ------------------------------------------------------------ */
html[data-lang="en"] h1{
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: 0;
}
/* Keep .hero h1 governed by the rule above (higher specificity wins). */

/* ------------------------------------------------------------
   03 — Display / section / sub headings
   These class-based scales are shared across pages.
   EN copy is ~1.5–2× longer character-wise; ease the cap.
   ------------------------------------------------------------ */
html[data-lang="en"] .h-display{
  font-size: clamp(30px, 4.4vw, 52px);
  letter-spacing: 0;
}
html[data-lang="en"] .h-section{
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: 0;
}
html[data-lang="en"] .h-sub{
  font-size: clamp(18px, 2vw, 24px);
}

/* ------------------------------------------------------------
   04 — Hero deck / lede line-length tightening
   English wraps at ~50% the char count of Chinese for the
   same word density; let the lede breathe a touch wider so
   it doesn't ladder into many short lines.
   ------------------------------------------------------------ */
html[data-lang="en"] .hero .lede{ max-width: 42ch; }
html[data-lang="en"] .hero .stage-note{ max-width: 44ch; }

/* ------------------------------------------------------------
   05 — Mobile floor
   Below 480px the clamps already collapse to their min, but
   make sure the hero never exceeds the viewport when EN
   strings include long words like "partnerships".
   ------------------------------------------------------------ */
@media (max-width: 480px){
  html[data-lang="en"] .hero h1{
    font-size: clamp(26px, 7vw, 32px);
    max-width: none;
  }
}

/* ------------------------------------------------------------
   06 — Layers page: EN-only label display
   The factor row, result panels, and cascade layer headers
   render ZH + EN labels side-by-side (.zh-label/.en-label,
   .name/.name-en). On the EN site, hide the ZH label and
   promote the EN label to the primary heading style.
   ZH mode keeps the bilingual treatment unchanged.
   ------------------------------------------------------------ */
html[data-lang="en"] .factor .zh-label,
html[data-lang="en"] .result .zh-label,
html[data-lang="en"] .cascade .layer .head .name{
  display: none;
}

/* Promote .factor .en-label from "italic mute footnote" to
   "primary serif label" (matching the original ZH .zh-label sizing). */
html[data-lang="en"] .factor .en-label{
  font-family: var(--serif-en);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 17px);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 1px;
}

/* Same promotion for .result .en-label. */
html[data-lang="en"] .result .en-label{
  font-family: var(--serif-en);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 2px;
}

/* Promote the cascade layer name (e.g. "the base") to the
   primary 30px heading the ZH .name occupied. */
html[data-lang="en"] .cascade .layer .head .name-en{
  font-family: var(--serif-en);
  font-style: normal;
  font-weight: 500;
  font-size: 30px;
  text-transform: capitalize;
  letter-spacing: .005em;
  color: var(--ink);
  margin-top: 0;
  line-height: 1.2;
}