/*
 * English typography system · 2026-09-30
 * Moticon-inspired pairing: Rubik for interface/body copy, Roboto for headings.
 * Fonts are hosted locally so Windows, macOS and mobile render consistently.
 */
@font-face {
  font-family: "YJ Rubik";
  src: url("fonts/rubik-latin-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "YJ Rubik";
  src: url("fonts/rubik-latin-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "YJ Rubik";
  src: url("fonts/rubik-latin-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "YJ Roboto";
  src: url("fonts/roboto-latin-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "YJ Roboto";
  src: url("fonts/roboto-latin-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "YJ Roboto";
  src: url("fonts/roboto-latin-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* English reading text follows Moticon's calm, open Rubik rhythm. */
:lang(en) body,
:lang(en) button,
:lang(en) input,
:lang(en) textarea,
:lang(en) select {
  font-family: "YJ Rubik", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: normal;
}

:lang(en) p,
:lang(en) li,
:lang(en) a,
:lang(en) button,
:lang(en) .page-lead,
:lang(en) .hero-thesis,
:lang(en) .feature span,
:lang(en) .flow-row span,
:lang(en) .candidate-view-grid p,
:lang(en) .candidate-questions p,
:lang(en) .role-card li {
  font-family: "YJ Rubik", Arial, sans-serif;
}

/* Roboto is reserved for titles, matching the hierarchy used on Moticon. */
:lang(en) h1,
:lang(en) h2,
:lang(en) h3,
:lang(en) .hero-copy h1,
:lang(en) .page-hero h1,
:lang(en) .scene-copy h1,
:lang(en) .scene-copy h2,
:lang(en) .finale-copy h2,
:lang(en) .talent-heading h2,
:lang(en) .quote-block {
  font-family: "YJ Roboto", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.012em;
}

/* A single phrase must keep one type size, weight and spacing across all spans. */
:lang(en) :is(h1, h2, h3) > span,
:lang(en) :is(h1, h2, h3) .glow,
:lang(en) :is(h1, h2, h3) .hero-line,
:lang(en) :is(h1, h2, h3) .hero-line-compact,
:lang(en) .talent-heading h2 span,
:lang(en) .quote-block span {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

:lang(en) .page-hero h1 {
  max-width: 1050px;
  font-size: clamp(48px, 5.25vw, 76px);
  line-height: 1.08;
}

:lang(en) [data-page="products"] .page-hero h1,
:lang(en) [data-page="careers"] .page-hero h1 {
  font-size: clamp(46px, 5vw, 72px);
}

:lang(en) .hero-line-compact {
  white-space: normal;
}

:lang(en) [data-page="careers"] .page-hero h1 {
  max-width: 1080px;
  font-size: clamp(46px, 4.2vw, 64px);
}

:lang(en) .scene-copy h1,
:lang(en) .scene-copy h2,
:lang(en) .finale-copy h2,
:lang(en) .talent-heading h2 {
  line-height: 1.04;
  letter-spacing: -.018em;
}

:lang(en) .premium-home .human-copy {
  width: min(900px, 52vw);
}

:lang(en) .premium-home .human-copy h1 {
  max-width: 900px;
  font-size: clamp(60px, 3.75vw, 72px);
}

:lang(en) .hero-discovery-copy h2,
:lang(en) .shared-copy h2,
:lang(en) .deploy-copy h2,
:lang(en) .time-copy h2 {
  font-size: clamp(48px, 4.1vw, 68px);
}

:lang(en) .finale-copy h2,
:lang(en) .talent-heading h2 {
  font-size: clamp(52px, 4.25vw, 72px);
}

:lang(en) .page-lead,
:lang(en) .hero-thesis,
:lang(en) .rich-copy > p,
:lang(en) .section-head p,
:lang(en) .talent-heading > p {
  line-height: 1.68;
  letter-spacing: 0;
}

:lang(en) .desktop-nav a { font-size: 17px; }
:lang(en) .button,
:lang(en) .hero-primary-link,
:lang(en) .hero-career-link,
:lang(en) .talent-cta { font-weight: 500; }

/* English interface labels remain Rubik even while the Chinese page is active. */
.eyebrow,
.scene-index,
.section-index,
.section-signature,
.sticky-label .number,
.flow-row .flow-id,
.photo-signal,
.model-visual-label,
.model-kicker,
.transfer-statements > div > span,
.candidate-view-grid article > span,
.candidate-questions article > span,
.orbit-label,
.hud-metrics > span,
.hud-coord,
.sensor-node b,
.movement-field > span,
.field-caption,
.hero-sequence b,
.observation-label,
.trajectory-note,
.signal-atlas b,
.signal-atlas em,
.signal-reading > span,
.imu-panel-heading,
.device-silhouette span,
.model-data-heading span,
.sensing-terms,
.deploy-device b,
.time-labels,
.archive-label,
.space-cloud strong small,
.space-cloud strong span,
.representation-bands span,
.space-annotation span,
.space-process i,
.space-process b,
.deploy-meta-bar i,
.deploy-meta-bar b,
.deploy-meta-bar em,
.capability-constellation article > span,
.capability-constellation em,
.cinematic-panel figcaption span {
  font-family: "YJ Rubik", Arial, sans-serif !important;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.eyebrow,
.scene-index,
.section-signature,
.sticky-label .number,
.flow-row .flow-id {
  letter-spacing: .075em;
}

.scene-index { font-weight: 600; }

.sensor-node b,
.movement-field > span,
.field-caption,
.hero-sequence b,
.signal-atlas b,
.signal-atlas em,
.signal-reading > span,
.device-silhouette span,
.model-data-heading span,
.sensing-terms,
.deploy-device b,
.time-labels,
.archive-label,
.space-cloud strong small,
.space-cloud strong span,
.representation-bands span,
.space-annotation span,
.space-process i,
.space-process b,
.deploy-meta-bar i,
.deploy-meta-bar b,
.deploy-meta-bar em,
.capability-constellation article > span,
.capability-constellation em {
  letter-spacing: .055em !important;
}

.space-cloud strong small,
.representation-bands span,
.space-annotation span,
.space-process i,
.space-process b,
.deploy-meta-bar i,
.deploy-meta-bar b,
.deploy-meta-bar em,
.capability-constellation article > span,
.capability-constellation em {
  font-size: max(10px, .56vw);
}

.space-cloud strong span {
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.22;
}

/* SVG labels use the same family to avoid the old typewriter-like appearance. */
.imu-channel-labels text,
.imu-time-end,
.model-section-labels text,
.model-bottom-meta text,
.encoder-tokens text,
.latent-axes text {
  font-family: "YJ Rubik", Arial, sans-serif !important;
  letter-spacing: .045em !important;
}

@media (max-width: 720px) {
  :lang(en) .page-hero h1,
  :lang(en) [data-page="products"] .page-hero h1,
  :lang(en) [data-page="careers"] .page-hero h1 {
    font-size: clamp(38px, 10.2vw, 44px);
    line-height: 1.1;
  }

  :lang(en) .scene-copy h1,
  :lang(en) .scene-copy h2,
  :lang(en) .finale-copy h2,
  :lang(en) .talent-heading h2 {
    line-height: 1.07;
  }

  :lang(en) .premium-home .human-copy {
    width: auto;
  }

  :lang(en) .premium-home .human-copy h1 {
    max-width: 350px;
    font-size: clamp(40px, 10.8vw, 50px);
  }

  :lang(en) .hero-discovery-copy h2,
  :lang(en) .shared-copy h2,
  :lang(en) .deploy-copy h2,
  :lang(en) .time-copy h2,
  :lang(en) .finale-copy h2,
  :lang(en) .talent-heading h2 {
    font-size: clamp(38px, 10.2vw, 48px);
  }

  :lang(en) .page-lead,
  :lang(en) .hero-thesis,
  :lang(en) .rich-copy > p,
  :lang(en) .section-head p,
  :lang(en) .talent-heading > p {
    line-height: 1.62;
  }

  .space-cloud strong small,
  .representation-bands span,
  .space-annotation span,
  .space-process i,
  .space-process b,
  .deploy-meta-bar i,
  .deploy-meta-bar b,
  .deploy-meta-bar em,
  .capability-constellation article > span,
  .capability-constellation em {
    font-size: 9px;
    letter-spacing: .035em !important;
  }
}