/*
  section — every full-width band below the hero (component.json section, 7 tokens).
  Owns the band's fill, its padding, the centered content container and the one text column.
  Sections stack edge to edge with no gap: the space between two sections is only their own padding.
  Fill is chosen by where the section sits: --default (most), --alternate, --bookend (e.g. the Overview).
*/

.section {
  padding-block: var(--section-padding-vertical-all);
}
.section--default   { background-color: var(--section-fill-default); }
.section--alternate { background-color: var(--section-fill-alternate); }
.section--bookend   { background-color: var(--section-fill-bookend); }

/* Centered container, 1280px at most with the page padding included: every left edge lines up with the hero. */
.section__container {
  max-width: var(--section-content-max-width-all);
  margin-inline: auto;
  padding-inline: var(--section-padding-horizontal-all);
  container-type: inline-size; /* lets an image pair measure the room inside the page padding (figure.css) */
}

/* The one text column (42rem, 672px), centered. Everything in a section sits in it,
   except the homepage Featured Work section (.section__wide below). */
.section__text {
  max-width: var(--section-text-max-width-all);
  margin-inline: auto; /* centered on the page, the same column as the hero (decided by Vivek 2026-09-26) */
  font-family: var(--text-block-body-text-style-all-font-family);
  font-size: var(--text-block-body-text-style-all-font-size);
}

/* The wide column (900px), centered: homepage Featured Work only (decided by Vivek 2026-09-26).
   Its section header and work cards share it, so the header's hairline spans exactly the card row.
   Used instead of .section__text, never inside it. */
.section__wide {
  max-width: var(--section-wide-max-width-all);
  margin-inline: auto;
}