/* ====================================================================
   Didactic figures.

   Token contract from the didactic-page kit, mapped onto the portfolio's
   zen palette.

   These do NOT follow the theme. A generated cover on this site is a
   transparent PNG with dark ink, sitting on a light plate that stays light
   in dark mode, so the drawing reads the same either way. A hand-written
   figure has to behave identically or the two sit side by side with
   different plates. So: fixed dark ink, fixed light plate, both themes.

   The earlier version tied ink to --secondary-color and gave the plate a
   dark variant. It was theme-correct and wrong: it made SVG figures the
   only images on the site that invert.
   ==================================================================== */

body {
  --fig-ink: #3b453d;
  --fig-accent: #59757d;
  --fig-muted: #768c99;
  --fig-plate: var(--image-color, #f2f0e9);
  --fig-label-font: "Inter", "Poppins", sans-serif;
}

/* Figures scale by rendered width, never by editing font-size inside the SVG.
   The viewBox is fixed, so widening the render multiplies every dimension at
   once: labels, strokes, gaps and margins stay in the proportion they were
   drawn and verified in. Raising a font-size inside the file would instead
   push text out of shapes it was fitted to.

   Figures take the full article column, 840px (post.css), matching how a
   generated image renders through .project-img. No inner padding: each
   viewBox already carries about 28 units of margin, which is the same
   breathing room a generated raster has baked in. */
.fig {
  display: block;
  width: 100%;
  max-width: 840px;
  height: auto;
  margin: 2.75rem auto 0.75rem;
  border-radius: 2rem;
  background-color: var(--fig-plate, #f2f0e9);
  box-shadow: 1px 1px 10px rgba(181, 181, 181, 0.1);
}

/* The caption stays narrower than the figure: a centred line as wide as the
   plate is hard to track back to its start. */
.fig-caption {
  display: block;
  max-width: 640px;
  margin: 0 auto 2.75rem;
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: center;
  opacity: 0.8;
  color: var(--secondary-color);
}