/* Shared type roles, loaded after the existing editorial styles.
   Brand exceptions: MaruBuri headings, the cream/green palette, square CTAs,
   88/72px header and its 1069px breakpoint remain. The home display stays
   smaller and more open than the guide's 80px sans-serif marketing hero.
   Article H1/H2 keep their existing 48/40/32 and 32/28/24 scales.
   Tables, FAQ controls and the new article contents disclosure have their
   own scoped styles; this sheet does not change those components. */
:root {
  --ds-section-size: 36px;
  --ds-section-line: 48px;
  --ds-card-size: 24px;
  --ds-card-line: 31px;
  --ds-card-tracking: .009em;
  --ds-topic-size: 28px;
  --ds-topic-line: 35px;
  --ds-topic-tracking: .007em;
  --ds-lead-size: 21px;
  --ds-lead-line: 32px;
  --ds-lead-tracking: .011em;
  --ds-home-size: 56px;
  --ds-home-line: 72px;
  --ds-intro-size: 48px;
  --ds-intro-line: 60px;
  --ds-document-heading-tracking: .004em;
  --fs-display: var(--ds-home-size);
  --fs-title: var(--ds-section-size);
}

/* Neutral fallback for older sans-serif headings. Role-specific document
   and card tracking below takes precedence; the home H1 is unaffected. */
h2, h3, h4 { letter-spacing: 0; }

/* One section-heading role, regardless of whether the markup is inside a
   section header, a split editorial panel or a contextual reading section.
   More specific .article-body document-heading rules continue to win. */
.sec-head h2,
.section-heading h2,
.content-band > h2,
.guide-section > h2,
.education-story h2,
.planning-gateway h2,
.contact-strip h2,
.content-service-section .sec-head h2,
.production-scope h2,
.publisher-bridge h2,
.directory-row-text h2,
.about-story h2,
.about-detail h2,
.guide-feature-copy h2,
.library-connections h2,
.work-editorial .sec-head h2,
.insight-topic > .sec-head h2,
.pillar-links h2 {
  font-size: var(--ds-section-size);
  line-height: var(--ds-section-line);
  font-weight: 600;
  letter-spacing: 0;
}
.article-body h2 {
  font-size: var(--structure-title);
  line-height: var(--structure-title-line);
  letter-spacing: var(--ds-document-heading-tracking);
}

.finance-hero h1 {
  font-size: var(--ds-home-size);
  line-height: var(--ds-home-line);
  /* This optical spacing belongs only to the established home wordmark copy. */
  letter-spacing: -.045em;
}
.visual-intro h1,
.content-service-hero h1 {
  font-size: var(--ds-intro-size);
  line-height: var(--ds-intro-line);
  font-weight: 600;
  letter-spacing: 0;
}

/* A lead is distinct from ordinary 17/27 body copy. Specific selectors also
   prevent the former hub-only :not() rule from creating a second scale. */
.page-intro .intro-desc,
.hub-intro > p:not(.section-kicker):not(.eyebrow),
.visual-intro .intro-desc,
.planning-heading .intro-desc,
.content-service-hero .intro-desc,
.finance-hero-content > p {
  font-size: var(--ds-lead-size);
  line-height: var(--ds-lead-line);
  font-weight: 600;
  letter-spacing: var(--ds-lead-tracking);
}
.article-header .article-lead,
.article-header .intro-desc {
  font-size: 21px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: .011em;
}

/* Sans-serif card headings do not inherit the old global negative tracking. */
.catalog-card h2,
.catalog-card h3,
.purpose-card h3,
.production-route-grid h3,
.article-card h2,
.article-card h3,
.ccard h3,
.pillar-link-group h3,
.resource-tool h3 {
  font-family: var(--sans);
  font-size: var(--ds-card-size);
  line-height: var(--ds-card-line);
  font-weight: 600;
  letter-spacing: var(--ds-card-tracking);
}
.topic-card h2,
.topic-card h3 {
  font-family: var(--sans);
  font-size: var(--ds-topic-size);
  line-height: var(--ds-topic-line);
  font-weight: 600;
  letter-spacing: var(--ds-topic-tracking);
}
.article-body .article-card h3,
.related-reading .article-card h3,
.related-reading .topic-card h3,
.edu-main .topic-card h3 {
  font-size: 21px;
  line-height: 32px;
  letter-spacing: .011em;
}

/* Keep ordinary editorial paragraphs at the same reading rhythm. Helper
   labels, captions and contact details retain their smaller UI type. */
.education-story > div > p,
.purpose-card > p:not(.section-kicker),
.planning-gateway p:not(.section-kicker),
.production-route-grid p:not(.section-kicker),
.pillar-links-heading p,
.format-list p,
.production-scope li p,
.production-video-list p:not(.production-video-meta),
.about-story p:not(.eyebrow):not(.section-note),
.about-detail p:not(.eyebrow) {
  font-size: 17px;
  line-height: 27px;
  letter-spacing: 0;
}

@media (max-width: 1068px) {
  :root {
    --ds-section-size: 32px;
    --ds-section-line: 39px;
    --ds-topic-size: 24px;
    --ds-topic-line: 31px;
    --ds-topic-tracking: .009em;
    --ds-home-size: 44px;
    --ds-home-line: 58px;
    --ds-intro-size: 40px;
    --ds-intro-line: 52px;
    --ds-document-heading-tracking: .007em;
  }

  /* 736px outer width minus two 22px gutters = 692px reading width.
     On smaller screens these gutters preserve the existing mobile inset. */
  .article-layout.wrap,
  .course-layout.wrap,
  .edu-layout.wrap {
    width: 100%;
    max-width: 736px;
    padding-inline: 22px;
    margin-inline: auto;
  }
  .article-layout:not(.article-summary-first),
  .course-layout,
  .edu-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .article-layout:not(.article-summary-first) > .article-body,
  .course-layout > .course-body,
  .edu-layout > .edu-main {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .article-layout:not(.article-summary-first) .article-toc {
    grid-column: 1;
    grid-row: auto;
    position: static;
    top: auto;
  }
  .course-layout > .course-aside,
  .edu-layout > .edu-aside {
    position: static;
    top: auto;
    grid-column: 1;
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 734px) {
  :root {
    --ds-section-size: 28px;
    --ds-section-line: 35px;
    --ds-card-size: 21px;
    --ds-card-line: 32px;
    --ds-card-tracking: .011em;
    --ds-topic-size: 21px;
    --ds-topic-line: 32px;
    --ds-topic-tracking: .011em;
    --ds-lead-size: 19px;
    --ds-lead-line: 25px;
    --ds-lead-tracking: .012em;
    --ds-home-size: 34px;
    --ds-home-line: 46px;
    --ds-intro-size: 34px;
    --ds-intro-line: 44px;
    --ds-document-heading-tracking: .009em;
  }
  /* Long article leads keep the calmer reading line-height as an explicit
     document exception; short marketing leads use the guide's 19/25. */
  .article-header .article-lead,
  .article-header .intro-desc {
    font-size: 19px;
    line-height: 29px;
    letter-spacing: .012em;
  }
}