:root {
  color-scheme: dark;
  --bg: #1a1a1a;
  --ink: #f4f1ea;
  --muted: #b9b3aa;
  --rule: #3c3a36;
  --quote: #ddd7cd;

  /* Chart palette — tuned to the warm near-black site.
     Color encodes meaning, never decoration:
       gray  = structural / neutral / the default
       teal  = the spine / the move / the productive direction
       coral = the ONE thing to notice (the add, the guardrail, the loop-back) */
  --c-gray: #6f6a62;
  --c-gray-fill: #26241f;
  --c-gray-ink: #cdc7bd;
  --c-teal: #5cb0a3;
  --c-teal-fill: #18322e;
  --c-teal-ink: #8fd3c8;
  --c-coral: #e0876a;
  --c-coral-fill: #371f17;
  --c-coral-ink: #f0a888;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.7;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

.page {
  width: min(100% - 32px, 760px);
  margin: 0 auto;
  padding: 56px 0 40px;
}

/* ---- Masthead ---- */

.backlink {
  display: inline-block;
  margin-bottom: 40px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.backlink:hover {
  color: var(--ink);
  text-decoration: underline;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 28px;
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.lede {
  font-size: clamp(1.12rem, 2.2vw, 1.32rem);
  color: var(--quote);
}

.lede p {
  margin: 0 0 1em;
}

/* ---- Body copy ---- */

.essay {
  font-size: clamp(1.04rem, 2vw, 1.16rem);
}

.essay p {
  margin: 0 0 1.2em;
  overflow-wrap: break-word;
}

.essay strong {
  font-weight: 700;
  color: #fffdf8;
}

.essay em {
  font-style: italic;
}

.essay h2 {
  margin: 2.6em 0 0.8em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.3rem, 3.2vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: 0;
}

.essay h2 .num {
  display: inline-block;
  margin-right: 0.5em;
  color: var(--c-teal);
  font-variant-numeric: tabular-nums;
}

.essay ol,
.essay ul {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}

.essay li {
  margin: 0 0 0.55em;
}

.essay ol {
  list-style: decimal;
}

.essay hr {
  margin: 2.6em 0 1.6em;
  border: 0;
  border-top: 1px solid var(--rule);
}

.essay .closer {
  margin-top: 1.4em;
  font-size: 1.18em;
  line-height: 1.5;
}

/* ---- Charts ---- */

.chartwrap {
  margin: 2.4em 0 2.6em;
}

.chartwrap svg {
  display: block;
  width: 100%;
  height: auto;
}

.chartwrap figcaption {
  margin-top: 0.7em;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.45;
}

.chartwrap figcaption::before {
  content: "How to read this — ";
  font-style: normal;
  font-weight: 700;
  color: var(--c-coral-ink);
}

/* SVG text + shape vocabulary (scoped to charts so it never touches page copy) */
.chartwrap svg text {
  font-family: Arial, Helvetica, sans-serif;
}

.chartwrap .th {
  font-size: 19px;
  font-weight: 700;
  fill: var(--ink);
}

.chartwrap .t {
  font-size: 15px;
  fill: #ece6db;
}

.chartwrap .tb {
  font-size: 15px;
  font-weight: 700;
  fill: var(--ink);
}

.chartwrap .ts {
  font-size: 12.5px;
  fill: var(--muted);
}

.chartwrap .tsb {
  font-size: 12.5px;
  font-weight: 700;
}

.chartwrap .f-gray { fill: var(--c-gray-fill); }
.chartwrap .f-teal { fill: var(--c-teal-fill); }
.chartwrap .f-coral { fill: var(--c-coral-fill); }
.chartwrap .f-none { fill: none; }

.chartwrap .s-gray { stroke: var(--c-gray); }
.chartwrap .s-teal { stroke: var(--c-teal); }
.chartwrap .s-coral { stroke: var(--c-coral); }

.chartwrap .tx-gray { fill: var(--c-gray-ink); }
.chartwrap .tx-teal { fill: var(--c-teal-ink); }
.chartwrap .tx-coral { fill: var(--c-coral-ink); }

.chartwrap .node {
  stroke-width: 1.5;
}

.chartwrap .lead-teal { fill: var(--c-teal); }
.chartwrap .lead-coral { fill: var(--c-coral); }
.chartwrap .lead-gray { fill: var(--c-gray); }

/* ---- Footer ---- */

.source {
  width: min(100% - 32px, 760px);
  margin: 0 auto;
  padding: 0 0 48px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  line-height: 1.5;
}

.source p {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 520px) {
  /* Dense charts stay legible by keeping a minimum width and panning,
     rather than shrinking their text to an unreadable size. */
  .chartwrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .chartwrap svg {
    min-width: 520px;
  }

  .page {
    width: min(100% - 24px, 760px);
    padding-top: 40px;
  }

  .source {
    width: min(100% - 24px, 760px);
    padding-bottom: 34px;
  }
}