/* =====================================================================
   CNP Praxis diagram library - figure styles
   Diagrams have transparent backgrounds; pages are cream #FBF9F3.
   ===================================================================== */

.cnp-fig {
  max-width: 760px;
  margin: 40px auto;
}

.cnp-fig svg {
  display: block;
  width: 100%;
  height: auto;
}

.cnp-fig figcaption {
  font: 12px/1.5 'IBM Plex Mono', ui-monospace, monospace;
  color: #756859;
  letter-spacing: .02em;
  margin-top: 10px;
}

/* Typography inside the SVGs (inline SVG inherits page CSS).
   Every <text> also carries a font-family attribute as a fallback,
   so the diagrams degrade gracefully when extracted from the page. */
.cnp-fig svg text {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

.cnp-fig svg text.mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

.cnp-fig svg text.serif {
  font-family: 'Newsreader', Georgia, serif;
}

@media (max-width: 520px) {
  .cnp-fig {
    margin: 28px auto;
  }
}