/* ============================================================
   NYC felony-assault essay — zarrenkuzma.com minimal Inter idiom.
   Tokens and link treatments mirror the home page. Contains only
   selectors this page (or its chart JS at runtime) uses.
   ============================================================ */

:root {
  --bg: #fcfcfc;
  --ink: #18181b;
  --muted: #71717a;
  --hair: #d4d4d8;
  --rule: #e4e4e7;
  --measure: 40rem;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  padding: 0 1.25rem 3rem;
}
img { display: block; max-width: 100%; height: auto; }

/* ---------- links ----------
   Two treatments, mirroring the home page's split:
   default (prose, citations, endnote) = hairline border-bottom;
   topbar + footer = underline, hairline color, 3px offset. */
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hair); }
a:hover { border-bottom-color: var(--muted); }
.topbar a, .site-footer a {
  border-bottom: none;
  text-decoration: underline;
  text-decoration-color: var(--hair);
  text-underline-offset: 3px;
}
.topbar a:hover, .site-footer a:hover { text-decoration-color: var(--muted); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }

/* ---------- topbar ---------- */
.topbar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .85rem;
  color: var(--muted);
}
.site-mark { color: var(--muted); }

/* ---------- hero ---------- */
.hero { max-width: var(--measure); margin: 0 auto; padding-top: 3rem; }
.kicker {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .75rem;
}
.hero h1 {
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.01em;
  margin: 0 0 .75rem;
}
.dek { color: var(--muted); font-size: 1rem; margin: 0 0 1rem; }
.byline { color: var(--muted); font-size: .85rem; margin: 0 0 2rem; }

/* ---------- figures (hero figure + body figure) ---------- */
figure {
  margin: 2.5rem 0;
  padding: 1.25rem 0 1rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.chart-title-block { margin: 0 0 1rem; }
.chart-title {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 .25rem;
}
.chart-subtitle { font-size: .85rem; color: var(--muted); line-height: 1.55; margin: 0; }
.chart-render { display: block; width: 100%; }
.chart-render svg { display: block; height: auto; max-width: 100%; }
figcaption { margin-top: .75rem; }
.source { font-size: .8rem; color: var(--muted); line-height: 1.55; margin: 0; }

/* Chart 03 — two-panel grid built at runtime by js/chart-03.js.
   Keep the gap at 1.5rem (24px): chart-03.js assumes a 24px gap when
   computing each panel's SVG width. 640px viewport ~= 600px figure
   width (40rem measure minus body padding), the same threshold
   chart-03.js uses to switch to single-column sizing. */
.chart-03-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.chart-03-panel { min-width: 0; }
.chart-03-panel svg { display: block; width: 100%; height: auto; max-width: 100%; }
.panel-title { font-size: .75rem; color: var(--muted); margin: 0 0 .5rem; }
@media (max-width: 640px) {
  .chart-03-grid { grid-template-columns: 1fr; }
}

/* ---------- essay body ---------- */
.essay-wrap { max-width: var(--measure); margin: 0 auto; }
.body p { margin: 0 0 1.25rem; }

/* ---------- endnote ---------- */
.endnote { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.endnote h2 {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .75rem;
}
.endnote p { font-size: .85rem; color: var(--muted); margin: 0 0 .75rem; }
.endnote p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */
.site-footer {
  max-width: var(--measure);
  margin: 3.5rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: .85rem;
  color: var(--muted);
}
.footer-meta div { margin: .25rem 0; }
.footer-copyright { margin-top: .5rem; font-size: .8rem; }