/*
  hero — the dark band at the top of every page (component.json hero, 19 tokens).
  Two versions, one set of tokens:
    case study: title (with its own hairline) -> H1 -> forRoleTeam
    homepage:   H1 -> intro line -> second paragraph (no hairlines)
  The hero owns every gap between its blocks (hero.gap), including the gap into forRoleTeam.
*/

.hero {
  background-image: var(--hero-fill-all);
  /* The nav floats over the hero and takes no space, so the top padding adds the
     nav clearance (80px, base.css) to the normal fluid section padding. */
  padding-block-start: calc(var(--nav-clearance) + var(--hero-padding-top-all));
  padding-block-end: var(--hero-padding-bottom-all);
}

/* Centered content container: 1280px at most, page padding included,
   so the hero's left text edge lines up with every section below. */
.hero__container {
  max-width: var(--hero-content-max-width-all);
  margin-inline: auto;
  padding-inline: var(--hero-padding-horizontal-all);
}

/* The one text column for all hero text and both hairlines (65ch).
   The font is set here on purpose: "ch" is measured in this element's font,
   so 65ch means 65 characters of Atkinson at 20px (842px), not of Fraunces at 95px. */
.hero__text {
  max-width: var(--hero-text-max-width-all);
  margin-inline: auto; /* centered on the page (decided by Vivek 2026-09-26) */
  font-family: var(--hero-body-text-style-all-font-family);
  font-size: var(--hero-body-text-style-all-font-size);
  display: flex;
  flex-direction: column;
  gap: var(--hero-gap-all);
}

/* Case study title: text, 16px, then its own divider hairline. */
.hero__title {
  font-family: var(--hero-title-text-style-all-font-family);
  font-size: var(--hero-title-text-style-all-font-size);
  font-weight: var(--hero-title-text-style-all-font-weight);
  line-height: var(--hero-title-text-style-all-line-height);
  color: var(--hero-title-content-all);
  padding-block-end: var(--hero-title-padding-bottom-all);
  border-block-end: var(--hero-title-divider-width-all) solid var(--hero-title-divider-all);
  text-wrap: balance;
}

/* H1: Fraunces, fluid size.
   Optical size: Fraunces changes its letter shapes with size (smaller = sturdier, wider shapes).
   From 768px up the H1 keeps the headline shapes it has at full width (optical size 95.36 =
   the H1's largest size, typography.fontSize.600's ceiling in px), so it doesn't thicken as the
   window narrows. Below 768px the browser picks automatically (decided by Vivek 2026-09-26). */
.hero__heading {
  font-family: var(--hero-heading-text-style-all-font-family);
  font-size: var(--hero-heading-text-style-all-font-size);
  font-weight: var(--hero-heading-text-style-all-font-weight);
  line-height: var(--hero-heading-text-style-all-line-height);
  color: var(--hero-heading-content-all);
  text-wrap: balance;
}
@media (width >= 768px) {
  .hero__heading {
    font-variation-settings: "opsz" 95.36;
  }
}

/* Homepage only: the two paragraphs sit in one wrapper, 16px apart. */
.hero__intro-group {
  display: flex;
  flex-direction: column;
  gap: var(--hero-intro-gap-all);
}

.hero__intro {
  font-family: var(--hero-intro-text-style-all-font-family);
  font-size: var(--hero-intro-text-style-all-font-size);
  font-weight: var(--hero-intro-text-style-all-font-weight);
  line-height: var(--hero-intro-text-style-all-line-height);
  color: var(--hero-intro-content-all);
}

.hero__body {
  font-family: var(--hero-body-text-style-all-font-family);
  font-size: var(--hero-body-text-style-all-font-size);
  font-weight: var(--hero-body-text-style-all-font-weight);
  line-height: var(--hero-body-text-style-all-line-height);
  color: var(--hero-body-content-all);
}