/* ============================================================================
 * Container — horizontal padding + max-width caps.
 *   .wb-container          → default (1320px)
 *   .wb-container--xl      → 1200px
 *   .wb-container--lg      → 1024px
 *   .wb-container--narrow  → 768px (long-form reading width)
 *   .wb-container--prose   → 65ch (article content)
 *   .wb-container--fluid   → 100% (no cap)
 * ========================================================================== */

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

.wb-container--xl     { max-width: var(--wb-container-xl); }
.wb-container--lg     { max-width: var(--wb-container-lg); }
.wb-container--md     { max-width: var(--wb-container-md); }
.wb-container--sm     { max-width: var(--wb-container-sm); }
.wb-container--narrow { max-width: 768px; }
.wb-container--prose  { max-width: 65ch; }
.wb-container--fluid  { max-width: none; }

/* Section wrapper — applies vertical rhythm consistent with --wb-section-y */
.wb-section {
  padding-block: var(--wb-section-y);
}

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

.wb-section--soft  { background-color: var(--wb-color-bg-soft); }
.wb-section--muted { background-color: var(--wb-color-bg-muted); }
.wb-section--ink   {
  background-color: var(--wb-color-ink);
  color: var(--wb-color-white);
}
.wb-section--ink h1,
.wb-section--ink h2,
.wb-section--ink h3,
.wb-section--ink h4,
.wb-section--ink h5,
.wb-section--ink h6 { color: var(--wb-color-white); }