/* SVG illustrations + infographics — editorial line-on-paper aesthetic. */

.illo {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink);
}
.illo .stroke { stroke: currentColor; fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.illo .stroke-2 { stroke-width: 2; }
.illo .stroke-fine { stroke-width: 0.75; }
.illo .stroke-dash { stroke-dasharray: 4 4; }
.illo .stroke-accent { stroke: var(--accent); }
.illo .stroke-teal { stroke: var(--teal); }
.illo .stroke-muted { stroke: var(--muted); }
.illo .fill-paper { fill: var(--paper); }
.illo .fill-paper-2 { fill: var(--paper-2); }
.illo .fill-accent { fill: var(--accent); }
.illo .fill-accent-soft { fill: var(--accent-soft); }
.illo .fill-teal { fill: var(--teal); }
.illo .fill-teal-soft { fill: var(--teal-soft); }
.illo .fill-ink { fill: var(--ink); }
.illo .fill-muted { fill: var(--muted); }
.illo .fill-rule { fill: var(--rule); }
.illo text {
  font-family: var(--font-mono);
  fill: var(--muted);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.illo text.label-ink { fill: var(--ink); text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 12px; font-weight: 500; }
.illo text.label-accent { fill: var(--accent-deep); }

/* Hero net diagram on home variant A — replaces blank stage texture */
.hero-illo-stage {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.hero-illo-stage > * { pointer-events: auto; }

/* Spot-illustration card — used across pages where a section needs a "pretty picture" */
.spot {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  overflow: hidden;
}
.spot.spot-cream { background: var(--paper-2); }
.spot.spot-ink { background: var(--ink); color: var(--paper); }
.spot.spot-ink .illo { color: var(--paper); }
.spot.spot-ink .illo text { fill: var(--paper-3); }
.spot.spot-ink .muted { color: var(--paper-3); }
.spot .spot-figure {
  display: grid; place-items: center;
  padding: 24px 8px;
}
.spot .spot-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.spot.spot-ink .spot-caption { color: var(--paper-3); }
.spot h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.spot p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.spot.spot-ink p { color: var(--paper-3); }

/* Two-up spot grid */
.spot-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.spot-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) {
  .spot-grid-2, .spot-grid-3 { grid-template-columns: 1fr; }
}

/* Big infographic frame — wraps a single SVG with caption */
.infographic {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: 56px 56px 40px;
  position: relative;
  overflow: hidden;
}
.infographic .infographic-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 32px;
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 16px;
}
.infographic .infographic-head .figure-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--accent); text-transform: uppercase;
}
.infographic .infographic-head .figure-title {
  font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--ink);
  font-weight: 400;
}
.infographic .infographic-foot {
  display: flex; justify-content: space-between;
  margin-top: 24px; padding-top: 16px;
  border-top: 1px dashed var(--rule);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--muted);
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .infographic { padding: 32px 28px; }
}

/* Diagram annotations (inside an SVG-friendly frame) */
.diagram-annotated {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  padding: 16px;
}

/* Banner illustration — wide hero-strip style */
.illo-banner {
  display: block;
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  overflow: hidden;
}