/*
 * Shared typography scale for every internal page.
 * The values mirror the hierarchy used on the home page.
 */
body.inner-page {
  --site-type-display: 60px;
  --site-type-display-line: 72px;
  --site-type-section: 44px;
  --site-type-section-line: 55.5px;
  --site-type-card: 24px;
  --site-type-card-line: 32px;
  --site-type-subcard: 20px;
  --site-type-subcard-line: 30px;
  --site-type-body: 17px;
  --site-type-body-line: 1.65;
  --site-type-card-copy: 17px;
  --site-type-card-copy-line: 1.65;
  --site-type-lead: 18px;
  --site-type-lead-line: 1.65;
  --site-type-label: 20px;
  --site-type-label-line: 30px;
  --site-type-control: 17px;
}

body.articles-page {
  --site-type-body: 17px;
  --site-type-card-copy: 18px;
  --site-type-control: 17px;
}

body.articles-page main .ar-grid-card h3 {
  font-size: 34px !important;
  line-height: 42px !important;
}

body.articles-page main .ar-heading-label,
body.article-page main .ar-related .sv-section__label,
body.article-page main .ar-article-cta .sv-section__label {
  font-size: 20px !important;
  line-height: 30px !important;
}

/* Article templates use the same role-based scale as the home page. */
body.article-page {
  --article-type-body: 17px;
  --article-type-body-line: 1.65;
  --article-type-intro: 21px;
  --article-type-intro-line: 1.62;
  --article-type-content: 21px;
  --article-type-content-line: 1.62;
  --article-type-card-title: 34px;
  --article-type-card-title-line: 42px;
  --article-type-meta: 14px;
  --article-type-meta-line: 22px;
  --article-type-nav: 15px;
  --article-type-nav-line: 22px;
  --article-type-control: 17px;
}

body.article-page main .ar-article-hero__copy > p:not(.sv-eyebrow),
body.article-page main .ar-disclaimer,
body.article-page main .ar-article-cta p:not(.sv-section__label) {
  font-size: var(--article-type-body) !important;
  line-height: var(--article-type-body-line) !important;
}

body.article-page main .ar-article__body p:not(.ar-disclaimer),
body.article-page main .ar-article__body li {
  font-size: var(--article-type-content) !important;
  line-height: var(--article-type-content-line) !important;
}

body.article-page main .ar-article__body > .ar-article__intro {
  font-size: var(--article-type-intro) !important;
  line-height: var(--article-type-intro-line) !important;
}

body.article-page main .ar-related .ar-card h3,
body.article-page main .ar-side-card h2 {
  font-size: var(--article-type-card-title) !important;
  line-height: var(--article-type-card-title-line) !important;
}

body.article-page main .ar-side-card p:not(.sv-section__label) {
  font-size: var(--article-type-body) !important;
  line-height: var(--article-type-body-line) !important;
}

body.article-page main .ar-side-card .sv-section__label {
  font-size: var(--article-type-meta) !important;
  line-height: var(--article-type-meta-line) !important;
}

body.article-page main :where(
  .ar-article-hero__meta,
  .ar-article__source,
  .ar-card__meta
) {
  font-size: var(--article-type-meta) !important;
  line-height: var(--article-type-meta-line) !important;
}

body.article-page main :where(.sv-breadcrumb, .ar-toc a) {
  font-size: var(--article-type-nav) !important;
  line-height: var(--article-type-nav-line) !important;
}

body.article-page main .ar-toc > span {
  font-size: 13px !important;
  line-height: 20px !important;
}

body.article-page main :where(
  .ar-read-link,
  .ar-side-action,
  .ar-side-form input,
  .ar-side-form button
) {
  font-size: var(--article-type-control) !important;
  line-height: 1.35 !important;
}

body.article-page main .ar-side-form small {
  font-size: 11px !important;
  line-height: 16px !important;
}

body.article-page main .ar-reference-list strong,
body.article-page main .ar-reference-list a,
body.article-page main .ar-disclaimer,
body.article-page main .ar-article__footer .ar-read-link {
  font-size: var(--article-type-content) !important;
  line-height: var(--article-type-content-line) !important;
}

body.articles-page main .ar-filters button,
body.articles-page main .ar-grid-card__link {
  font-size: var(--site-type-control) !important;
}

body.inner-page main :where(h1) {
  font-size: var(--site-type-display) !important;
  line-height: var(--site-type-display-line) !important;
}

body.inner-page main :where(h2, .section-title):not(.contact-section--home *) {
  font-size: var(--site-type-section) !important;
  line-height: var(--site-type-section-line) !important;
}

body.inner-page main :where(h3):not(.contact-section--home *) {
  font-size: var(--site-type-card) !important;
  line-height: var(--site-type-card-line) !important;
}

body.inner-page main :where(h4):not(.contact-section--home *) {
  font-size: var(--site-type-subcard) !important;
  line-height: var(--site-type-subcard-line) !important;
}

body.inner-page main :where(p, li, dt, dd):not(.contact-section--home *) {
  font-size: var(--site-type-body) !important;
  line-height: var(--site-type-body-line) !important;
}

body.inner-page main article :where(p, li) {
  font-size: var(--site-type-card-copy) !important;
  line-height: var(--site-type-card-copy-line) !important;
}

/* Eyebrows and section labels follow the 20 px labels used on the home page. */
body.inner-page main :where(
  .section-label,
  .sv-section__label,
  .sv-eyebrow,
  .ab-section__label,
  .ab-eyebrow,
  .ar-heading-label,
  .quiz-eyebrow
) {
  font-size: var(--site-type-label) !important;
  line-height: var(--site-type-label-line) !important;
}

/* Introductory copy mirrors the larger 18 px supporting text on the home page. */
body.inner-page main :where(
  .sv-hero__lead,
  .ab-hero__lead,
  .ct-hero__lead,
  .rq-hero__lead,
  .ar-hero__lead
) {
  font-size: var(--site-type-lead) !important;
  line-height: var(--site-type-lead-line) !important;
}

body.inner-page main :where(summary) {
  font-size: 18px !important;
  line-height: 1.45 !important;
}

body.inner-page main :where(
  .ab-button,
  .sv-button,
  .ct-hero__button,
  .btn-primary,
  .btn-about-orange,
  .rq-copy-button,
  .rq-link-button,
  .ct-form__footer button,
  .sv-contact-form__submit
):not(.contact-section--home *) {
  font-size: var(--site-type-control) !important;
}

/* Contact cards use h2 semantically, but visually belong to the card level. */
body.inner-page main .ct-card h2 {
  font-size: var(--site-type-card) !important;
  line-height: var(--site-type-card-line) !important;
}

/* Dialog headings are intentionally smaller than full section headings. */
body.inner-page :where(.sv-contact-modal__dialog, .ab-modal__dialog) h2 {
  font-size: 32px !important;
  line-height: 40px !important;
}

@media (max-width: 1200px) {
  body.inner-page {
    --site-type-display: 48px;
    --site-type-display-line: 58px;
  }
}

@media (max-width: 768px) {
  body.inner-page {
    --site-type-display: 36px;
    --site-type-display-line: 44px;
    --site-type-section: 24px;
    --site-type-section-line: 32px;
    --site-type-card: 22px;
    --site-type-card-line: 30px;
    --site-type-subcard: 18px;
    --site-type-subcard-line: 27px;
    --site-type-body: 16px;
    --site-type-body-line: 1.65;
    --site-type-card-copy: 16px;
    --site-type-card-copy-line: 1.65;
    --site-type-lead: 17px;
    --site-type-lead-line: 1.62;
    --site-type-label: 18px;
    --site-type-label-line: 27px;
    --site-type-control: 16px;
  }

  body.articles-page {
    --site-type-body: 16px;
    --site-type-card-copy: 16px;
    --site-type-control: 16px;
  }

  body.articles-page main .ar-grid-card h3 {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  body.articles-page main .ar-heading-label,
  body.article-page main .ar-related .sv-section__label,
  body.article-page main .ar-article-cta .sv-section__label {
    font-size: 18px !important;
    line-height: 27px !important;
  }

  body.article-page {
    --article-type-body: 16px;
    --article-type-body-line: 1.6;
    --article-type-intro: 18px;
    --article-type-intro-line: 1.62;
    --article-type-content: 18px;
    --article-type-content-line: 1.62;
    --article-type-card-title: 28px;
    --article-type-card-title-line: 36px;
    --article-type-meta: 13px;
    --article-type-meta-line: 20px;
    --article-type-nav: 14px;
    --article-type-nav-line: 21px;
    --article-type-control: 16px;
  }

  body.inner-page :where(.sv-contact-modal__dialog, .ab-modal__dialog) h2 {
    font-size: 28px !important;
    line-height: 36px !important;
  }
}

@media (max-width: 480px) {
  body.inner-page {
    --site-type-display: 30px;
    --site-type-display-line: 38px;
    --site-type-section: 24px;
    --site-type-section-line: 32px;
    --site-type-card: 20px;
    --site-type-card-line: 28px;
    --site-type-subcard: 18px;
    --site-type-subcard-line: 27px;
  }

  body.inner-page :where(.sv-contact-modal__dialog, .ab-modal__dialog) h2 {
    font-size: 24px !important;
    line-height: 32px !important;
  }

  body.inner-page main :where(h1, h2, h3, h4, p, li, button, a):not(.contact-section--home *) {
    overflow-wrap: anywhere;
  }

  body.inner-page main .sv-hero__actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}