/* =============================================================================
   Layout primitives — container, sections, section headings.
   Consistent vertical rhythm driven by design tokens.
   ============================================================================= */

.container {
  width: min(100% - var(--space-8), var(--max-width));
  margin-inline: auto;
}

@media (min-width: 720px) {
  .container {
    width: min(100% - var(--space-12), var(--max-width));
  }
}

/* -----------------------------------------------------------------------------
   Sections — consistent vertical rhythm
   ----------------------------------------------------------------------------- */

.section {
  position: relative;
  padding-block: var(--section-pad-y);
}

.section--tight {
  padding-block: var(--section-pad-y-tight);
}

@media (max-width: 719px) {
  .section {
    padding-block: 64px;
  }

  .section--tight {
    padding-block: 56px;
  }
}

/* -----------------------------------------------------------------------------
   Section heading block — title + lead as a true typographic composition.
   ----------------------------------------------------------------------------- */

.section__title {
  margin: 0 0 var(--space-4);
  max-width: var(--max-width-heading);
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading-md);
  color: var(--text-strong);
  text-wrap: balance;
}

.section__lead {
  margin: 0 0 var(--space-10);
  max-width: var(--max-width-lead);
  color: var(--text-muted);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-lead);
  text-wrap: pretty;
}

.section > .section__title + .section__lead {
  margin-top: calc(var(--space-4) * -1 + var(--space-4));
}