.wrap {
  width: var(--wrap);
  margin-inline: auto;
}
.section {
  padding-block: clamp(5.5rem, 10vw, 9rem);
  scroll-margin-top: 90px;
}

/* shared 12-column grid — every section's macro layout locks to this */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  grid-auto-flow: dense;
}

/* background rhythm — three tones used consistently across the page */
.band-light {
  background: var(--color-bg);
}
.band-alt {
  background: var(--color-bg-alt);
}
.band-dark {
  background: var(--color-bg-dark-deep);
  color: var(--color-text-on-dark);
}
.band-dark h1,
.band-dark h2,
.band-dark h3 {
  color: var(--color-text-on-dark);
}
.band-dark em {
  color: var(--c-olive-100);
}
.band-dark .eyebrow {
  color: var(--c-olive-100);
}
.band-dark .link-quiet {
  color: var(--color-text-on-dark);
}

@media (max-width: 760px) {
  .section {
    padding-block: 4.5rem;
  }
  .grid {
    row-gap: 2.5rem;
  }
  .grid > * {
    grid-column: 1 / -1;
  }
}