/* 1) Constrain the main reading width */
.container {
  max-width: 960px;     /* pick your width: 720–1100px is typical */
  margin: 24px auto;
  padding: 0 16px;
}

/* 2) Make media responsive and never overflow the container */
img, iframe, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 3) Center figures and optionally limit their own inner width */
figure {
  margin: 1rem auto 1.5rem;
  /* Optional: narrower figure than text for large plots */
  /* max-width: 820px; */
}
figcaption {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 0.4rem;
  text-align: center;
}

/* 4) If your Markdown/HTML sets explicit width attributes, 
      these rules keep them from breaking the layout */
img[width], iframe[width] {
  max-width: 100% !important;   /* prevent overflow */
  height: auto !important;
}

/* 5) If inline styles set a fixed width, you can still enforce a cap */
img, iframe {
  max-width: 100% !important;   /* last-resort guardrail */
}

/* 6) Utility classes for per-element control in Markdown (raw HTML allowed) */
.prose-narrow { max-width: 760px; margin: 0 auto; }
.prose-wide   { max-width: 1100px; margin: 0 auto; }
.img-80       { max-width: 80%; margin: 0 auto; }
.img-640      { max-width: 640px; margin: 0 auto; } /* fixed cap */
.center       { margin-left: auto; margin-right: auto; display: block; }