/* One type system: seven roles, nothing in between. 6 November 2026.
   Sizes live as tokens in assets/okto-system.css (--type-*); this sheet maps
   page classes onto them and is loaded last. It sets family, size, weight,
   line height and colour only — never layout.

   Display    112 caps, 700  section banners (unchanged compositions keep theirs)
   Chapter     72, 700       chapter headings, contact and legal titles
   Statement   48, light     intro statements, product promises, case names in heart pages
   Title       32, 700       item titles: services, cases, deliverables, subsections
   Body        22, light     all running text, always ink (incl. .okto-type-supporting)
   Supporting  16, 400       captions, hints, footer, small links (matches boost.oktopods.com)
   Label       14 caps, 400  eyebrows, numbers, client names — muted

   "Light" is --type-light (200): Lausanne ships no 300, so 300 always rendered
   as 200. Declaring 200 changes nothing on screen; it makes the rule honest.
   Every role sets font-family, because the same Lausanne files are loaded
   under four family names and the "Lausanne" family maps 400 to its 200 file. */

/* ── Home ──────────────────────────────────────────────────────────────── */

/* Statement */
html body :is(.intro.section-pad > h2, .home-clarity .okto-product-title) {
  font-family: var(--okto-font); font-size: var(--type-statement); font-weight: var(--type-light); line-height: 1.12; letter-spacing: -.03em;
}

/* Title */
html body :is(
  .services .service-copy > h3,
  .ado-content > h3,
  .ado-proof-title,
  .home-clarity .okto-lead
) {
  font-family: var(--okto-font); font-size: var(--type-title); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; text-transform: none;
}

/* Body */
html body :is(
  .work .project-description,
  .services-intro > p,
  .services .service-delivery,
  .services-engagement,
  .ado-lead,
  .ado-content li p,
  .home-clarity .okto-product-descriptor,
  .home-clarity .okto-copy-lead,
  .home-clarity .okto-deliverable p,
  .home-clarity .home-clarity-scope,
  .contact-bottom > p,
  .contact-email
) {
  font-family: var(--okto-font); font-size: var(--type-body); font-weight: var(--type-light); line-height: 1.45; letter-spacing: -.01em; color: var(--okto-ink, #181b18);
}

/* Label */
html body :is(
  .section-label,
  .work .project-disciplines,
  .services .service-number,
  .ado-story ol > li > span:first-child,
  .home-clarity-eyebrow
) {
  font-family: var(--okto-font); font-size: var(--type-label); font-weight: 400; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
  color: var(--okto-muted, #62665f);
}

/* Names inside a list read as body text set in bold, so tight grids never hyphenate. */
html body .home-clarity .okto-deliverable h4 {
  font-family: var(--okto-font); font-size: var(--type-body); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; hyphens: manual;
}
/* An eyebrow is one line. */
html body .home-clarity .home-clarity-eyebrow { max-width: none; width: max-content; white-space: nowrap; }

/* Case text sits on photographs and keeps its white. */
html body .work .project .project-description,
html body .work .project .project-disciplines { color: inherit; }

/* Product blocks: the shared system and scene styles set these with doubled
   classes, so the roles repeat that weight here. */
html body .home-clarity .okto-product-name.okto-product-name--teaser.okto-product-name--teaser { font-size: var(--type-product, clamp(64px, 7.778vw, 112px)); line-height: .95; }
html body .home-pod-scene .home-product-identity .okto-product-descriptor.okto-product-descriptor,
html body .home-pod-scene .home-product-footer .home-clarity-scope.okto-type-caption.okto-type-caption {
  font-family: var(--okto-font); font-size: var(--type-body); font-weight: var(--type-light); line-height: 1.45; letter-spacing: -.01em; color: var(--okto-ink, #181b18);
}

/* ── Other pages ─────────────────────────────────────────────────────────
   The shared content classes carry the roles; page classes fill the gaps.
   Text on ink or photographs keeps its own colour (see the last rule).
   Page styles here use deep selectors (and #about-main), so these roles add
   one ID step with :not(#type-roles), an ID no element carries. */

/* Chapter */
html body:not(#type-roles) :is(
  .okto-type-chapter.okto-type-chapter,
  .offering-heading,
  .journey-chapter,
  .journey-statement-copy > h3
) {
  font-family: var(--okto-font); font-size: var(--type-chapter); font-weight: 700; line-height: 1.02; letter-spacing: -.04em;
}

/* Statement */
html body:not(#type-roles) :is(
  .offering-lead,
  .clarity-feature-title,
  .brandpod-feature-title,
  .okto-product-title.okto-product-title,
  .offering-case-caption > h2
) {
  font-family: var(--okto-font); font-size: var(--type-statement); font-weight: var(--type-light); line-height: 1.12; letter-spacing: -.03em;
}

/* Title */
html body:not(#type-roles) :is(
  .okto-type-subsection.okto-type-subsection,
  .okto-lead.okto-lead,
  .about-brand-point-heading,
  .engagement-item-title,
  .case-caption :is(h2, h3),
  .journey-dna-cards h3,
  .journey-scope-result h3,
  .case-campaign .intro-heading
) {
  font-family: var(--okto-font); font-size: var(--type-title); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; text-transform: none;
}

/* Body */
html body:not(#type-roles) :is(
  .okto-type-body.okto-type-body,
  .okto-copy-lead.okto-copy-lead,
  .okto-type-supporting.okto-type-supporting,
  .okto-product-descriptor.okto-product-descriptor,
  .about-brand-intro-copy,
  .about-brand-point-body,
  .about-heart-descriptor,
  .about-heart-copy,
  .about-brand-transformation-bottom,
  .SkillsRows_content__Eos_9 p,
  .engagement-item-body,
  .offering-body,
  .offering-email,
  .case-description,
  .okto-deliverable p,
  .bp-plain-list li,
  .bp-closing-line,
  .contact-intro,
  .home-clarity-scope.okto-type-caption,
  .brandpod-feature-scope.okto-type-caption,
  .journey-body,
  .journey-octopus-body p,
  .journey-dna-cards p,
  .journey-scope-result p,
  .journey-meet-actions a:not(.journey-talk),
  .case-campaign :is(.intro-paragraph, .campaign-tagline, .okto-row)
) {
  font-family: var(--okto-font); font-size: var(--type-body); font-weight: var(--type-light); line-height: 1.45; letter-spacing: -.01em; color: var(--okto-ink, #181b18);
}
/* Names inside lists: body size, bold. (Legal text reads the tokens in legal.css, which keeps its print sizes.) */
html body:not(#type-roles) .okto-deliverable h4.product-output-title {
  font-family: var(--okto-font); font-size: var(--type-body); font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
}

/* Supporting — one size for everything secondary. */
html body:not(#type-roles) :is(
  .okto-type-caption.okto-type-caption:not(.home-clarity-scope, .brandpod-feature-scope),
  figcaption,
  .form-hint,
  .optional,
  .offering-case-link,
  .case-campaign :is(.result-caption, .services-list)
) {
  font-family: var(--okto-font); font-size: var(--type-supporting); font-weight: 400; line-height: 1.5; letter-spacing: 0;
}
html body:not(#type-roles) :is(figcaption, .okto-type-caption.okto-type-caption:not(.home-clarity-scope, .brandpod-feature-scope), .form-hint, .optional, .case-campaign .result-caption) {
  color: var(--okto-muted, #62665f);
}
/* Footer: one size, one weight, its own colour on ink. */
html body:not(#type-roles) .site-footer :is(.footer-meta span, .footer-links a, .footer-links .okto-control) {
  font-family: var(--okto-font); font-size: var(--type-supporting); font-weight: 400; line-height: 1.5;
}

/* Label */
html body:not(#type-roles) :is(
  .okto-type-label.okto-type-label,
  .about-brand-team-label,
  .case-client,
  .bp-hero-index,
  .bp-section-word,
  .journey-eyebrow,
  .journey-chapters > a,
  .journey-toggle span,
  .case-campaign .services-label
) {
  font-family: var(--okto-font); font-size: var(--type-label); font-weight: 400; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
  color: var(--okto-muted, #62665f);
}
/* Chapter links on About stay ink: they are navigation, not eyebrows. */
html body:not(#type-roles) .journey-chapters > a { color: var(--okto-ink, #181b18); }

/* Actions: one size and family for every button label. */
html body:not(#type-roles) :is(.okto-action .okto-roll-text, .handoff-link > span) {
  font-family: var(--okto-font); font-size: 16px; font-weight: 700; line-height: 1.25;
}

/* Ink sections and photographs keep their own text colour. */
/* Only the role classes above are recoloured, never gradient text
   (.heart-gradient and friends rely on color: transparent). */
html body:not(#type-roles) :is(.bp-section-ink, .offering-hero, .work .project, .journey-octopus, .site-footer) :is(
  .okto-type-body, .okto-copy-lead, .okto-type-supporting, .okto-product-descriptor,
  .offering-body, .offering-lead, .engagement-item-body, .case-description,
  .bp-plain-list li, .bp-closing-line, .okto-type-label, .case-client, .bp-hero-index, .bp-section-word,
  .journey-body, .journey-octopus-body p, .journey-eyebrow, .footer-meta span, .footer-links a, .footer-links .okto-control
) { color: inherit; }