/* Containers */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: var(--container-wide);
}

/* Sections */
.section {
  padding-block: var(--space-section);
}

.section--dark {
  background-color: var(--color-black);
  color: var(--color-white);
}

.section--light {
  background-color: var(--color-white);
  color: var(--color-black);
}

.section--ivory {
  background-color: var(--color-ivory);
  color: var(--color-black);
}

.section--charcoal {
  background-color: var(--color-charcoal);
  color: var(--color-white);
}

/* Section headers */
.section-header {
  margin-bottom: var(--space-block);
}

.section-label {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-silver);
  margin-bottom: var(--space-element);
}

.section--light .section-label,
.section--ivory .section-label {
  color: var(--color-ash);
}

/* Two-column layout */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block);
}

/* Full-bleed (edge to edge, no container) */
.full-bleed {
  width: 100vw;
  margin-left: calc(-1 * var(--container-padding));
  overflow: hidden;
}

/* Work grid */
.grid-asymmetric {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: var(--space-element);
}

/* Process grid */
.grid-process {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block);
}

/* Divider */
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-graphite);
}

.section--light .divider,
.section--ivory .divider {
  background-color: var(--color-bone);
}