/* ── Site Shell ─────────────────────────────────────────────────────────── */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Main content ───────────────────────────────────────────────────────── */
.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--content-pad);
}

/* ── Page content (prose area) ──────────────────────────────────────────── */
.page-content {
  width: 100%;
}

/* Links inside body prose must be distinguishable without relying on colour alone.
   Underline them so they meet WCAG 1.4.1 (link-in-text-block). */
.page-content p a,
.page-content li a,
.page-content blockquote a,
.page-content td a,
.page-content th a {
  text-decoration: underline;
}

/* ── Wide content strip (full bleed sections) ───────────────────────────── */
.full-bleed {
  width: 100vw;
  margin-left: calc(-1 * var(--content-pad));
}

/* ── Section container ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}

/* ── In-article diagram SVGs fill the text column (UI icons unaffected) ──── */
.page-content svg[role="img"] { width:100% !important; max-width:100% !important; height:auto; }