/* =========================================================================
   GRAPHICS — presentation for the vector system in content/graphics.js.
   Every drawing inherits the theme; no colour is declared in the markup.
   ========================================================================= */

.gfx {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink-secondary);
}

/* Line work */
.gfx .l {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.gfx .a  { stroke: var(--accent); }
.gfx .af { fill: var(--accent); }
.gfx .dim { opacity: 0.42; }
.gfx .fill-cur { fill: currentColor; stroke: none; opacity: 0.5; }
.gfx .track { fill: currentColor; opacity: 0.14; }

/* Type inside drawings uses the site's own tokens, never SVG defaults. */
.gfx text { fill: currentColor; }
.gfx .gfx-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gfx .gfx-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.gfx .accent-t { fill: var(--accent); }
.gfx .dim-t { opacity: 0.55; }

/* ---- Placement ------------------------------------------------------- */
.pillar__mark { width: 40px; color: var(--ink); }


/* Evidence strip inside a timeline entry: charts sit together, so they read
   as one set of measurements rather than three unrelated drawings. */
.evidence {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3);
  background: var(--bg-raised);
}
@media (min-width: 700px) { .evidence { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
@media (min-width: 1180px) { .evidence { grid-template-columns: repeat(3, 1fr); } }
.evidence figure { margin: 0; display: grid; gap: var(--s-3); align-content: start; }
.evidence .gfx { color: var(--ink); }
.evidence figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-meta);
  line-height: 1.5;
}
.evidence__note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--ink-meta);
  font-size: var(--t-small);
}

/* Craft: two drawings that show the motion work instead of listing it. */
.craft-figs {
  display: grid;
  gap: var(--s-6);
}
.craft-fig {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3);
  background: var(--bg-card);
}
.craft-fig figcaption { color: var(--ink-secondary); font-size: var(--t-small); }
.craft-fig figcaption b { color: var(--ink); font-weight: 500; }
.craft-fig .gfx { color: var(--ink); }