/* ============================================================
   Layout — page shell, containers, section rhythm
   ============================================================ */

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

.container--narrow { max-width: 820px; }

/* ---- Section rhythm ---- */
main > section {
  padding-block: var(--section-y);
}

/* Alternating grounds. The night section overrides both, in components.css. */
.section--alt { background: var(--bg-alt); }

/* ---- The night section: rebind semantic tokens so components invert
   automatically instead of needing dark variants of their own. ---- */
.section--night {
  background: var(--bg-inverse);
  --ink:       var(--ink-inverse);
  --ink-muted: var(--ink-inverse-muted);
  --rule:      var(--rule-inverse);
  --accent:    var(--light-green);   /* 5.43:1 on deep green — safe for text */
  color: var(--ink);
}

/* ---- Stack utility ---- */
.stack > * + * { margin-top: var(--space-m); }
.stack-l > * + * { margin-top: var(--space-l); }

/* ---- Two-column split, collapsing to one on narrow screens ---- */
.split {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-2xl); }
  .split--reverse > :first-child { order: 2; }
}

/* ---- Illustration slots (spec §8) ----
   While empty these resolve as intentional negative space, never a visible gap.
   The page must look finished before any art exists. */
.illus-slot {
  display: grid;
  place-items: center;
  min-height: 8rem;
}
.illus-slot::after {
  content: "";
  width: min(240px, 60%);
  height: 1px;
  background: var(--rule);
  opacity: 0.7;
}
.illus-slot:empty { min-height: 6rem; }