/* ==========================================================================
   SPI — layout.css
   Structural primitives only. Nothing here knows about specific content.
   ========================================================================== */

/* --- Shell ---------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Bleed shell: content aligns to the shell on the left but runs to the
   viewport edge on the right. Used for the hero and the global-perspective
   composition so navy panels touch the screen edge instead of floating. */
.shell-bleed-right {
  padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
  padding-right: 0;
}
.shell-bleed-left {
  padding-right: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
  padding-left: 0;
}

/* --- Bands ----------------------------------------------------------------
   A band is a full-width horizontal stripe. Surface treatment is a
   modifier so no section hard-codes its own background.                  */

.band { padding-block: var(--band-y); }
.band--lg { padding-block: var(--band-y-lg); }
.band--flush { padding-block: 0; }

.band--white { background: var(--spi-white); }
.band--ivory { background: var(--spi-ivory); }

.band--ink {
  background: var(--spi-ink);
  color: var(--on-ink-80);
}
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4 { color: var(--on-ink); }
.band--ink .lead { color: var(--on-ink-80); }

/* --- Editorial split -------------------------------------------------------
   The workhorse composition: a statement in the display face on the left,
   supporting prose on the right. Replaces card grids as the default way
   of presenting a section.                                                */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(3rem, 1rem + 5vw, 6rem);
    align-items: center;
  }
  .split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .split--wide-right { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .split__body { padding-top: 0.4rem; }
}

/* Heading block that sits above a list: title left, framing sentence right. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  margin-bottom: var(--s-12);
}
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(3rem, 1rem + 5vw, 6rem);
    align-items: end;
  }
  .section-head__aside { padding-bottom: 0.35rem; }
}
.section-head h2 { margin-bottom: 0; }

/* --- Column sets ------------------------------------------------------------ */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
}
@media (min-width: 640px) { .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 700px) { .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) { .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Measure ---------------------------------------------------------------- */

.measure { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: var(--measure-tight);
}

.prose { color: var(--ink-70); max-width: var(--measure); }
.prose p + p { margin-top: var(--s-4); }