/* ==========================================================================
   Layout — containers, sections, grids, vertical rhythm.
   ========================================================================== */

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

.container--wide {
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
}

.container--prose {
  max-width: calc(var(--container-prose) + 2 * var(--gutter));
}

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

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

.section--tint {
  background-color: var(--surface);
  border-block: 1px solid var(--color-border);
}

/* Warm heritage tint — adds warmth and breaks up the neutral rhythm */
.section--warm {
  background-color: var(--surface-warm);
  border-block: 1px solid #ece2d2;
}

.section--ink {
  background-color: var(--gray-900);
  color: var(--gray-100);
}

/* ---- Grids: collapse to one column on small screens ---- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Asymmetric editorial split: content + supporting column */
.grid--split {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-12);
  align-items: start;
}

/* Section intro: a slim margin label beside a lead paragraph. Unlike
   grid--split (wide content + narrow support), here the label is the
   NARROW column so a short eyebrow never leaves a huge empty gap. */
.grid--lead {
  grid-template-columns: minmax(0, 2fr) minmax(0, 7fr);
  gap: var(--space-10);
  align-items: start;
}

@media (max-width: 60em) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .grid--lead {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

@media (max-width: 40em) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ---- Vertical rhythm inside a block of content ---- */
.flow > * + * {
  margin-block-start: var(--space-4);
}

.flow--lg > * + * {
  margin-block-start: var(--space-6);
}

/* ---- Utilities (deliberately few) ---- */
.u-center {
  text-align: center;
}

.u-measure {
  max-width: 65ch;
}

.u-mt-2 { margin-block-start: var(--space-2); }
.u-mt-4 { margin-block-start: var(--space-4); }
.u-mt-6 { margin-block-start: var(--space-6); }
.u-mt-8 { margin-block-start: var(--space-8); }
.u-mt-12 { margin-block-start: var(--space-12); }

.u-text-secondary {
  color: var(--color-text-secondary);
}

.u-text-small {
  font-size: var(--text-small);
}