/* ==========================================================================
   Sufficiently Advanced Solutions — layout
   Containers, section rhythm, surface bands, and grids.

   Separation of concerns, deliberately: .section owns vertical rhythm,
   .band owns colour. They are applied to the same element but never set the
   same property, so neither can silently undo the other.
   ========================================================================== */

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

/* ---- Vertical rhythm ---------------------------------------------------- */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--flush { padding-block: 0; }

/* ---- Surfaces (§09) -----------------------------------------------------
   Cream is the default customer-facing ground. Black is a branded moment,
   not a theme. Gold is for one high-commitment block per page at most —
   it must not flood a surface. */
.band { background: var(--surface); color: var(--text); }
.band--alt  { background: var(--surface-alt); }
.band--ink  { background: var(--surface-invert); color: var(--text-invert); }
.band--gold { background: var(--accent); color: var(--accent-contrast); }

/* Roles flip inside a dark band so components need no on-dark variants. */
.band--ink {
  --surface: var(--sas-ink);
  --surface-alt: var(--sas-ink-soft);
  --text: var(--sas-cream);
  --text-muted: var(--text-invert-muted);
  --line: var(--sas-ink-line);
  --accent-text: var(--accent);
}
.band--gold {
  --text: var(--sas-black);
  --text-muted: #4A3407;
  --line: rgba(0, 0, 0, 0.22);
  --accent-text: var(--sas-black);
}

/* ---- Flow --------------------------------------------------------------- */
/* Owl selector: spacing lives between siblings, so a block never carries a
   margin that collapses or doubles against its neighbour. */
.stack > * + * { margin-block-start: var(--flow, var(--space-4)); }
.stack--tight { --flow: var(--space-3); }
.stack--loose { --flow: var(--space-6); }

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

/* ---- Grids -------------------------------------------------------------- */
.grid { display: grid; gap: var(--gap, var(--space-5)); }
/* 24rem, not 300px: at container width a 300px floor lets a third column in,
   which turns a four-item sequence into an unbalanced 3 + 1. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* Asymmetric split for a heading column beside its content. */
.split {
  display: grid;
  gap: var(--space-6) var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.measure { max-width: var(--measure); }
.center-x { margin-inline: auto; }