/* ==========================================================
   Layout primitives
   ========================================================== */

.container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

.section { padding-block: var(--section-space); }
.section--tint { background: var(--color-surface); }

.stack > * + * { margin-block-start: var(--stack-space, var(--space-4)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-4));
  align-items: center;
}

.grid-auto {
  display: grid;
  gap: var(--grid-gap, var(--space-6));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 260px)), 1fr));
}

/* Two-column split: stacks on mobile */
.split {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}

@media (min-width: 56em) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-start { grid-template-columns: 1.1fr 0.9fr; }
  .split--wide-end { grid-template-columns: 0.9fr 1.1fr; }
  .split--top { align-items: start; }
}

.section-head {
  max-width: 44rem;
  margin-block-end: clamp(var(--space-8), 4vw, var(--space-12));
}
.section-head--center { margin-inline: auto; text-align: center; }

.prose { max-width: 65ch; }