/* ============================================================
   LOCA v2_gradient_editorial · typography.css
   Editorial discipline · approved 2026-05-17

   PRINCIPLE
     Serif = identity.  Sans-serif = system.
     Serif appears at moments of meaning (hero, manifesto, slogan,
     pull-quote, product title, logo). Sans (Inter) handles every-
     thing operational: body, navigation, specs, captions, buttons.
     Never the inverse.

   TRACKING DISCIPLINE
     Letter-spacing is reserved for caps eyebrows, logo subtitles,
     and small metadata. Body / paragraph text gets none. The page
     should feel editorial, not ornamental.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;600&display=swap");

:root {
  --lo-font-serif-display:  "Cinzel", "Trajan Pro", Georgia, serif;
  --lo-font-serif-editorial: "Cormorant Garamond", Georgia, serif;
  --lo-font-serif-cn:       "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif;
  --lo-font-sans:           "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
}

/* ---------- HERO ---------- */
.lo-hero-title {
  font-family: var(--lo-font-serif-display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: var(--lo-text-main);
  margin: 0;
}

.lo-hero-lede {
  font-family: var(--lo-font-serif-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--lo-text-muted);
  max-width: 56ch;
  margin: 0;
}

/* ---------- SECTION HEADERS ---------- */
.lo-section-kicker {
  /* the tiny numeral + label that sits above a section title
     e.g.  "II ·  PRODUCTION ARCHITECTURE"  */
  font-family: var(--lo-font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--lo-text-meta);
  margin: 0 0 12px;
}

.lo-section-title {
  font-family: var(--lo-font-serif-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: 1px;
  color: var(--lo-text-main);
  margin: 0 0 24px;
}

/* ---------- PRODUCT TITLE ----------
   Slightly smaller than a section title so a product card reads as
   "premium catalog item", not "fashion-campaign hero". Use on the
   <h2> inside .card / product cards / Alibaba product blocks. */
.lo-product-title {
  font-family: var(--lo-font-serif-display);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: 1.5px;
  color: var(--lo-text-main);
  margin: 8px 0 0;
}

/* ---------- BODY TEXT ---------- */
.lo-body {
  font-family: var(--lo-font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0;  /* discipline: no tracking on running text */
  color: var(--lo-text-main);
}

.lo-body-small {
  font-family: var(--lo-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--lo-text-main);
}

.lo-caption {
  font-family: var(--lo-font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lo-text-muted);
}

/* ---------- EYEBROW (caps label above titles, in cards) ---------- */
.lo-eyebrow {
  font-family: var(--lo-font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--lo-text-meta);
}

/* ---------- PULL QUOTE (editorial italic moment) ---------- */
.lo-pullquote {
  font-family: var(--lo-font-serif-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--lo-text-muted);
  max-width: 52ch;
  margin: 0;
}

/* ---------- PRODUCT SPECS ---------- */
.lo-spec-label {
  font-family: var(--lo-font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lo-text-meta);
}

.lo-spec-value {
  font-family: var(--lo-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lo-text-main);
}

/* ---------- BUTTONS / CTA ---------- */
.lo-button-text {
  font-family: var(--lo-font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lo-text-main);
}

/* ---------- BILINGUAL CHINESE LAYER ----------
   LOCA pages are bilingual: English primary, Chinese secondary.
   Chinese ALWAYS sits below English at smaller size + muted color.
   Never competes equally — supports authenticity and factory credibility.
   Tracking discipline: Chinese gets minimal letter-spacing.
   Avoid "水 钻 网 片" style. Use "水钻网片" directly. */
.lo-cn-title {
  /* Chinese subtitle UNDER English section title — smaller and muted */
  font-family: var(--lo-font-serif-cn);
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: 0.5px;
  line-height: 1.55;
  color: var(--lo-text-muted);
  margin: 0;
}

.lo-cn-subtitle {
  /* Smaller variant for tight nested places (proof items, card title pair) */
  font-family: var(--lo-font-serif-cn);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.3px;
  line-height: 1.5;
  color: var(--lo-text-muted);
  margin: 0;
}

.lo-cn-body {
  /* Chinese lede / support paragraph — sans, muted, generous line-height */
  font-family: var(--lo-font-sans), "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: 0;
  color: var(--lo-text-muted);
  margin: 0;
}

.lo-cn-caption {
  /* Tiny Chinese metadata (e.g., masthead footnote) */
  font-family: var(--lo-font-serif-cn);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1.7;
  color: var(--lo-text-muted);
}

.lo-cn-kicker {
  /* Chinese caps-style eyebrow (rarely used since English kicker is primary) */
  font-family: var(--lo-font-sans), "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--lo-text-meta);
}

.lo-bilingual-pair {
  /* Container for EN+CN pair — controls vertical gap between the two lines.
     EN title → CN title should feel tight (a single ID pair), not loose. */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lo-bilingual-note {
  /* Standalone EN/CN paired note block with subtle separator */
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid var(--lo-border-hairline);
}

/* ---------- INVERSE (text on dark blocks) ----------
   For pull-quotes and manifesto blocks placed on var(--lo-bg-dark).
   Apply to a wrapper element; descendants inherit the inverse color. */
.lo-on-dark { color: var(--lo-bg-dark-text); }
.lo-on-dark .lo-text-muted-inverse { color: var(--lo-bg-dark-text-muted); }