/* Shared reading and interface scale. Load after the visual-theme sheets.
   Song serif carries the brand voice; the system sans carries information. */
:root {
  --type-song: "Xstelbo Song", "Songti SC", "STSong", "Noto Serif SC", serif;
  --type-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --type-body: .9375rem;
  --type-body-leading: 2;
  --type-ui: .8125rem;
  --type-note: .8125rem;
  --type-meta: .75rem;
  --type-caption: .6875rem;
  --type-display: clamp(2.75rem, 2rem + 2.2vw, 4rem);
  --type-page: clamp(2.25rem, 1.65rem + 2vw, 3.25rem);
  --type-section: clamp(1.75rem, 1.4rem + 1.1vw, 2.5rem);
  --type-subsection: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  --type-phrase: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
}

body {
  font-family: var(--type-sans);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--type-body-leading);
  letter-spacing: .015em;
}

h1, h2, h3, h4 {
  font-family: var(--type-song);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.5;
  letter-spacing: .035em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--type-page); }
h2 { font-size: var(--type-section); }
h3 { font-size: var(--type-subsection); }
h4 { font-size: 1.125rem; }

p {
  font-family: var(--type-sans);
  font-size: var(--type-body);
  line-height: var(--type-body-leading);
  letter-spacing: .015em;
  text-wrap: pretty;
  line-break: strict;
  overflow-wrap: break-word;
}
strong, b { font-weight: 500; }
small { font-size: var(--type-meta); line-height: 1.8; }

/* Continuous reading: the same role across the home, inner pages and objects. */
.page-lead .intro,
.content-section p,
.content-section ul:not(.plain-list),
.content-section ol,
.plain-list li,
.editorial-caption p:not(.eyebrow),
.family-detail > p:not(.eyebrow),
.home-manifesto .body-copy,
.home-product-copy p,
.technology-links p,
.home-partner p,
.home-news .empty-news,
.home-workshop-copy p:not(.eyebrow),
.song-scroll-heading p,
.song-materials p,
.catalog-object p,
.catalog-product p,
.empty-state p,
.story-body > p,
.story-body dl div,
.philosophy-copy > p:not(.serif),
.selection > div > p:not(.serif),
.cooperation-context {
  font-family: var(--type-sans);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--type-body-leading);
  letter-spacing: .015em;
}
.content-section p { max-inline-size: 40em; }
.editorial-caption p { max-inline-size: 36em; }
.story-body dd { margin-inline-start: 0; }
.story-body dt { font-weight: 500; }
.inquiry-result pre {
  font-family: var(--type-sans);
  font-size: var(--type-body);
  line-height: 1.95;
}

/* Display moments have a separate scale from normal page and section titles. */
.hero-statement h1 {
  font-family: var(--type-song);
  font-size: var(--type-display);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .1em;
}
.hero-statement p { font-family: var(--type-sans); font-size: var(--type-ui); line-height: 1.8; letter-spacing: .1em; }
.hero-title-mark { font-family: var(--type-song); font-size: var(--type-meta); line-height: 1.7; }
.home-manifesto > p { font-family: var(--type-song); font-size: var(--type-phrase); line-height: 1.8; letter-spacing: .05em; }
.home-manifesto h2,
.home-product-copy h2,
.home-partner h2,
.home-workshop-copy h2,
.section-title h2,
.home-riding-scenes .section-title h2,
.editorial-caption h2,
.song-scroll-heading h2,
.song-materials h2,
.story-heading h2,
.selection h2,
.philosophy h2,
.home-rd h2,
.content-section h2,
.catalog-main > h2,
.catalog-result-heading h2 {
  font-family: var(--type-song);
  font-size: var(--type-section);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .035em;
}
.page-lead h1, .family-detail h1 {
  font-family: var(--type-song);
  font-size: var(--type-page);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
}
.content-section h3,
.article-row h3,
.editorial-caption h3,
.editorial-product-family h3,
.catalog-object h3,
.catalog-product-copy h3,
.technology-links h3,
.empty-state h2,
.empty-state h3 {
  font-family: var(--type-song);
  font-size: var(--type-subsection);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .025em;
}
.segment-links strong { font-family: var(--type-song); font-size: var(--type-subsection); font-weight: 400; line-height: 1.6; }
.home-scene-grid strong { font-family: var(--type-song); font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); font-weight: 400; line-height: 1.6; }
.section-title p, .home-riding-scenes .section-title p { font-family: var(--type-song); font-size: 1.125rem; line-height: 1.85; letter-spacing: .035em; }
.home-rd p { font-family: var(--type-song); font-size: var(--type-phrase); line-height: 1.85; letter-spacing: .04em; }
.content-section blockquote { font-family: var(--type-song); font-size: var(--type-phrase); line-height: 1.85; letter-spacing: .035em; }
.serif, .selection .serif { font-family: var(--type-song); font-size: var(--type-phrase); font-style: normal; font-weight: 400; line-height: 1.75; letter-spacing: .035em; }
.philosophy .serif { font-family: "Cormorant Garamond", var(--type-song); font-size: clamp(2.75rem, 2.25rem + 1.5vw, 3.75rem); font-style: italic; line-height: 1.25; letter-spacing: 0; }

/* The gallery heading is deliberately compact so the moving object stays clear. */
.collection-intro h1 { font-family: var(--type-song); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem); line-height: 1.5; font-weight: 400; letter-spacing: .04em; }
.product-caption h2 { font-family: var(--type-song); font-size: 2rem; line-height: 1.5; font-weight: 400; letter-spacing: .12em; }
.brand-chapter h1, .brand-chapter h2 {
  font-family: var(--type-song);
  font-size: clamp(2.125rem, 1.55rem + 2vw, 3.375rem);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: .045em;
}
.brand-chapter > p:not(.chapter-sign),
.brand-journey[data-scene-state=ready] .brand-chapter > p:not(.chapter-sign) {
  font-family: var(--type-sans);
  font-size: var(--type-body);
  line-height: 2.05;
  letter-spacing: .025em;
}
.brand-chapter .chapter-sign { font-family: var(--type-sans); font-size: var(--type-meta); font-weight: 500; line-height: 1.7; letter-spacing: .08em; }

/* Interface labels use sans even when they sit inside an editorial section. */
button, input, select, textarea, option, label {
  font-family: var(--type-sans);
  font-size: var(--type-ui);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .015em;
}
.top-nav a { font-family: var(--type-sans); font-size: var(--type-ui); font-weight: 400; line-height: 1.45; letter-spacing: .01em; }
.top-nav a[aria-current=page] { font-weight: 500; }
#site-header .brand-lockup span { font-family: var(--type-sans); font-size: var(--type-meta); line-height: 1.6; }
.text-link, .primary-link, .primary,
.hero-statement a, .home-product-copy a, .technology-links a,
.home-rd-links a, .philosophy-copy a, .family-detail-links a,
.brand-chapter a, .brand-context-link,
.catalog-object a.text-link, .editorial-about .text-link,
.editorial-final .text-link, .chapter-nav a,
.inquiry-result button, .motion-toggle,
[data-family-model] {
  font-family: var(--type-sans);
  font-size: var(--type-ui);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .025em;
}
.catalog-tabs button { font-family: var(--type-sans); font-size: .9375rem; font-weight: 500; line-height: 1.6; letter-spacing: .01em; }
.catalog-tabs small { font-family: var(--type-sans); font-size: var(--type-meta); font-weight: 400; line-height: 1.6; }
.catalog-sidebar h2 { font-family: var(--type-sans); font-size: 1rem; font-weight: 500; line-height: 1.6; letter-spacing: .02em; }
.filter-group > label, .filter-group h3, .catalog-vehicle-form label, form label { font-family: var(--type-sans); font-size: var(--type-ui); font-weight: 500; line-height: 1.7; letter-spacing: .015em; }
.chips button { font-family: var(--type-sans); font-size: var(--type-meta); font-weight: 400; line-height: 1.65; letter-spacing: .01em; }
.catalog-layout select, .catalog-layout input, input, select, textarea { font-family: var(--type-sans); font-size: .875rem; line-height: 1.7; }
input::placeholder, textarea::placeholder { font-family: var(--type-sans); font-size: inherit; line-height: inherit; }
summary { font-family: var(--type-sans); font-size: var(--type-body); font-weight: 500; line-height: 1.9; }
.inquiry-result h3 { font-family: var(--type-sans); font-size: 1.125rem; font-weight: 500; line-height: 1.7; }
.content-section table { font-family: var(--type-sans); font-size: var(--type-ui); line-height: 1.85; }
.content-section th { font-weight: 500; }

/* Descriptors and advisory copy stay readable while subordinate to the prose. */
.eyebrow, .page-lead .eyebrow, .content-section .eyebrow,
.editorial-caption .eyebrow, .family-detail > .eyebrow,
.home-product-copy > span, .home-workshop-copy > .eyebrow,
.catalog-result-heading > p:first-child,
.technology-links article > span {
  font-family: var(--type-sans);
  font-size: var(--type-ui);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .07em;
}
.notice, .catalog-layout .notice, .editorial-product-family .notice {
  font-family: var(--type-sans);
  font-size: var(--type-note) !important;
  font-weight: 400;
  line-height: 1.9 !important;
  letter-spacing: .015em;
}
.notice p, .catalog-selection-note p { font-family: var(--type-sans); font-size: var(--type-note); line-height: 1.9; }
.catalog-sidebar p, .catalog-preferences, .chapter-nav > p,
body[data-page=technology] #page-content > .chapter-nav > p,
.collection-intro p, .collection-note, .product-caption p,
.fallback p,
.form-note, .selected-note, .selection .selected-note,
.story-body .concept-note, .inquiry-result p,
.home-scene-grid span, .segment-links span {
  font-family: var(--type-sans);
  font-size: var(--type-note);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .015em;
}
.technology-links article > span { color: #536a53; }
.gallery-position, .product-caption > span, .swatches small,
.catalog-product-tag, .loading,
.gallery-bottom, .hero-bottom, .hero-bottom small,
.scene-label, .scene-message, .brand-stage .scene-message,
.brand-scroll-hint, .brand-chapter small,
.family-status, .home-product .home-product-copy small,
.home-workshop-copy small, .home-news .news-categories {
  font-family: var(--type-sans);
  font-size: var(--type-meta);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .025em;
}
.hero-side { font-family: var(--type-song); font-size: var(--type-meta); line-height: 1.8; letter-spacing: .2em; }
.gallery-position { font-variant-numeric: tabular-nums; }

figcaption, .content-section figcaption,
.editorial-image figcaption, .editorial-final figcaption,
.song-landscape figcaption, .song-materials figcaption,
.home-scene-credit {
  font-family: var(--type-sans);
  font-size: var(--type-caption);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .015em;
}
.song-landscape figcaption span:first-child { font-family: var(--type-song); font-size: var(--type-meta); line-height: 1.8; }
.song-seal { font-family: var(--type-song); font-size: .875rem; line-height: 1.6; }
.song-palette span { font-family: var(--type-song); font-size: var(--type-ui); line-height: 1.7; }
.footer-brand p { font-family: var(--type-sans); font-size: var(--type-ui); line-height: 1.9; letter-spacing: .025em; }
.footer-nav, .footer-contact a, .footer-bottom,
.menu-links small, .menu-bottom, .menu-message small {
  font-family: var(--type-sans);
  font-size: var(--type-meta);
  line-height: 1.8;
  letter-spacing: .02em;
}
.footer-contact > span { font-family: var(--type-song); font-size: 1.75rem; font-weight: 400; line-height: 1.6; letter-spacing: .04em; }

@media (max-width: 700px) {
  :root {
    --type-body: .875rem;
    --type-body-leading: 1.95;
    --type-display: 2.25rem;
    --type-page: 2.125rem;
    --type-section: 1.8125rem;
    --type-subsection: 1.375rem;
    --type-phrase: 1.5rem;
  }
  .top-nav a { font-size: var(--type-meta); line-height: 1.45; }
  .hero-statement h1 { font-size: var(--type-display); line-height: 1.6; }
  .hero-statement p { font-size: var(--type-meta); line-height: 1.8; letter-spacing: .04em; }
  .hero-title-mark { font-size: var(--type-meta); }
  .section-title p, .home-riding-scenes .section-title p { font-size: 1rem; line-height: 1.85; }
  .collection-intro h1 { font-size: 1.75rem; }
  .product-caption h2 { font-size: 1.8125rem; }
  .brand-journey[data-scene-state=ready] .brand-chapter h1,
  .brand-journey[data-scene-state=ready] .brand-chapter h2,
  .brand-chapter h1, .brand-chapter h2 { font-size: 1.875rem; line-height: 1.5; margin-bottom: 14px; }
  .brand-journey[data-scene-state=ready] .brand-chapter > p:not(.chapter-sign),
  .brand-chapter > p:not(.chapter-sign) { font-size: var(--type-body); line-height: 1.9; margin-block: 0 10px; }
  .brand-chapter a { margin-top: 4px; }
  .brand-chapter small { margin-top: 8px; }
  .catalog-tabs button { font-size: .875rem; }
  .catalog-layout select, .catalog-layout input, input, select, textarea { font-size: 1rem; }
  .footer-contact > span { font-size: 1.5rem; }
  .footer-bottom { line-height: 1.9; }
}