/*
 * Reference typography
 * --------------------
 * The supplied mockups do not resolve to one literal font file. Their most
 * consistent portable match is the bundled Roboto variable face at different
 * width-axis positions. Keep sizing, line-height and component geometry in the
 * existing page styles; this layer owns only content font family and width.
 * Header and footer sit outside main.site-main-frame and remain untouched.
 */
body main.site-main-frame {
  --sc-body-stretch: 90%;
  --sc-hero-stretch: 90%;
  --sc-section-stretch: 90%;
  --sc-card-stretch: 90%;
  --sc-ui-stretch: 75%;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-stretch: var(--sc-body-stretch);
}

body main.site-main-frame :where(h1) {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-stretch: var(--sc-hero-stretch);
}

body main.site-main-frame :where(h2) {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-stretch: var(--sc-section-stretch);
}

body main.site-main-frame :where(h3, h4, h5, h6, strong, b) {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-stretch: var(--sc-card-stretch);
}

body main.site-main-frame :where(
  button,
  .btn,
  .about-gold-button,
  .cap-button,
  .ops-button,
  .compliance-button,
  .contact-button,
  .news-read-button,
  .news-filter,
  .news-sort,
  .news-card a,
  .news-highlight a
) {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-stretch: var(--sc-ui-stretch);
}

/* Page/role fits derived from the cleanest repeated reference samples. */
body.about-page main.site-main-frame {
  --sc-card-stretch: 75%;
  --sc-ui-stretch: 75%;
}

body.capabilities-page main.site-main-frame {
  --sc-body-stretch: 100%;
  --sc-section-stretch: 90%;
  --sc-card-stretch: 75%;
  --sc-ui-stretch: 90%;
}

body.solutions-page main.site-main-frame {
  --sc-section-stretch: 100%;
  --sc-card-stretch: 75%;
  --sc-ui-stretch: 75%;
}

body.operations-page main.site-main-frame {
  --sc-body-stretch: 75%;
  --sc-hero-stretch: 75%;
  --sc-section-stretch: 75%;
  --sc-card-stretch: 75%;
  --sc-ui-stretch: 75%;
}

body.operations-page main.site-main-frame :where(.ops-footprint__intro p) {
  font-stretch: 100%;
}

body.compliance-page main.site-main-frame {
  --sc-ui-stretch: 90%;
}

body.news-page main.site-main-frame {
  --sc-section-stretch: 100%;
  --sc-ui-stretch: 100%;
}

body.contact-page main.site-main-frame {
  --sc-body-stretch: 100%;
  --sc-section-stretch: 100%;
  --sc-card-stretch: 100%;
  --sc-ui-stretch: 100%;
}

body.compliance-page main.site-main-frame :where(.compliance-button) {
  font-weight: 600;
}