/* ============================================================
   LeoTrace v4, long-form pages: the blog and the benchmark results

   One sheet for both sections: a blog post and a benchmark result are
   the same document type. A page is read top to bottom like the legal pages, so it takes
   a reading measure rather than the 1152 marketing width. Figures
   and tables sit on the same measure: a chart wider than the text
   it explains pulls the eye out of the column.

   Every value is a token except the measure, declared at the top.
   ============================================================ */

.article {
  /* 680, not legal's 600: a post carries tables and figures with
     right-aligned numbers, and 600 squeezed a five-column table into
     wrapping. Still about 85 characters of 18px Geist, the upper edge
     of comfortable for prose that is mostly short paragraphs. */
  --article-measure: 680px;
  padding-block: var(--lt-space-14) 120px;
}

.article__wrap {
  width: min(var(--article-measure), 100% - (var(--lt-section-gutter) * 2));
  margin-inline: auto;
}

/* ---------- Index ---------- */

.index__head {
  display: flex;
  flex-direction: column;
  gap: var(--lt-space-5);
  padding-bottom: var(--lt-space-8);
  border-bottom: 1px solid var(--lt-outline-subtle);
}

.index__eyebrow { color: var(--lt-fg-quaternary); }
.index__title { color: var(--lt-fg-primary-strong); }
.index__lead { color: var(--lt-fg-tertiary); }

.index__lead-link,
.post__eyebrow a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--lt-fg-disabled);
  text-underline-offset: 3px;
}

.index__empty {
  margin-top: var(--lt-space-8);
  color: var(--lt-fg-quaternary);
}

.index__list {
  margin-top: var(--lt-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--lt-space-5);
}

.index__card {
  display: flex;
  flex-direction: column;
  gap: var(--lt-space-3);
  padding: var(--lt-space-7);
  background: var(--lt-container-base);
  border: 1px solid var(--lt-outline-subtle);
  border-radius: var(--lt-radius-md);
  color: var(--lt-fg-secondary-strong);
}

.index__card:hover { border-color: var(--lt-outline-default); }
.index__cardmeta { color: var(--lt-fg-quaternary); }
.index__cardtitle { color: var(--lt-fg-primary-strong); }
.index__cardsum { color: var(--lt-fg-tertiary); }

/* ---------- Article (a post or a benchmark result) ---------- */

.post__head {
  display: flex;
  flex-direction: column;
  gap: var(--lt-space-5);
  padding-bottom: var(--lt-space-8);
  border-bottom: 1px solid var(--lt-outline-subtle);
}

.post__eyebrow { color: var(--lt-fg-quaternary); }
.post__title { color: var(--lt-fg-primary-strong); }
.post__byline { color: var(--lt-fg-tertiary); }
.post__lead { color: var(--lt-fg-secondary-strong); }

.post__body {
  margin-top: var(--lt-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--lt-space-6);
  color: var(--lt-fg-secondary-strong);
}

.post__body h2 {
  margin-top: var(--lt-space-8);
  color: var(--lt-fg-primary-strong);
  scroll-margin-top: var(--lt-space-8);
}

.post__body h3 {
  margin-top: var(--lt-space-5);
  color: var(--lt-fg-primary-strong);
}

.post__body ul,
.post__body ol {
  padding-left: var(--lt-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--lt-space-3);
}

.post__body ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li::marker { color: var(--lt-fg-disabled); }

.post__body b,
.post__body strong {
  font-weight: 500;
  color: var(--lt-fg-primary-strong);
}

.post__body a {
  color: var(--lt-fg-primary-strong);
  text-decoration: underline;
  text-decoration-color: var(--lt-fg-disabled);
  text-underline-offset: 3px;
}

.post__body a:hover { text-decoration-color: var(--lt-fg-primary-strong); }

.post__body code {
  font-family: var(--lt-font-mono);
  font-size: 0.85em;
  color: var(--lt-fg-primary-strong);
}

/* ---------- The headline figures ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lt-space-3);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--lt-space-2);
  padding: var(--lt-space-5);
  background: var(--lt-container-base);
  border: 1px solid var(--lt-outline-subtle);
  border-radius: var(--lt-radius-md);
}

.stat__n { color: var(--lt-fg-primary-strong); }
.stat__l { color: var(--lt-fg-tertiary); }

/* ---------- Figures ---------- */

.fig {
  padding: var(--lt-space-7);
  background: var(--lt-container-base);
  border: 1px solid var(--lt-outline-subtle);
  border-radius: var(--lt-radius-md);
}

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

.fig figcaption {
  margin-top: var(--lt-space-5);
  color: var(--lt-fg-tertiary);
}

/* Colour is earned: the raw arm is the neutral grey, the LeoPrevent arm the
   green outcome accent. Nothing else in a chart takes a hue. */
.bar--raw { fill: var(--lt-fg-disabled); }
.bar--lp { fill: var(--lt-green); }
.bar--track { fill: var(--lt-container-raised); }
.chart-label { fill: var(--lt-fg-secondary-strong); font-family: var(--lt-font-sans); font-size: 14px; }
.chart-value { fill: var(--lt-fg-primary-strong); font-family: var(--lt-font-mono); font-size: 13px; }
.chart-group { fill: var(--lt-fg-quaternary); font-family: var(--lt-font-mono); font-size: 11px; letter-spacing: 0.04em; }
.chart-legend { fill: var(--lt-fg-tertiary); font-family: var(--lt-font-sans); font-size: 13px; }

/* ---------- Tables ---------- */

.tablewrap { overflow-x: auto; }

.post__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}

.post__body th {
  text-align: left;
  font-weight: 400;
  color: var(--lt-fg-quaternary);
  font-family: var(--lt-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 var(--lt-space-3) var(--lt-space-3) 0;
  border-bottom: 1px solid var(--lt-outline-default);
}

.post__body td {
  padding: var(--lt-space-3) var(--lt-space-3) var(--lt-space-3) 0;
  border-bottom: 1px solid var(--lt-outline-subtle);
  vertical-align: top;
}

.post__body td.num,
.post__body th.num { text-align: right; font-family: var(--lt-font-mono); }

/* ---------- Footnotes ---------- */

.post__notes {
  margin-top: var(--lt-space-14);
  padding-top: var(--lt-space-8);
  border-top: 1px solid var(--lt-outline-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--lt-space-5);
  color: var(--lt-fg-tertiary);
}

.post__notes h2 { color: var(--lt-fg-quaternary); }

.post__notes ol {
  padding-left: var(--lt-space-6);
  list-style: decimal;
  display: flex;
  flex-direction: column;
  gap: var(--lt-space-5);
}

.post__notes li::marker { color: var(--lt-fg-disabled); }

.post__notes a {
  color: var(--lt-fg-secondary-strong);
  text-decoration: underline;
  text-decoration-color: var(--lt-fg-disabled);
  text-underline-offset: 3px;
}

.post__notes b { font-weight: 500; color: var(--lt-fg-secondary-strong); }

.post__notes code { font-family: var(--lt-font-mono); font-size: 0.85em; }

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
  .article { padding-block: var(--lt-space-8) var(--lt-space-14); }
  .article__wrap { width: calc(100% - (var(--lt-wrap-gutter) * 2)); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .fig { padding: var(--lt-space-5); }
}

@media (min-width: 601px) and (max-width: 1100px) {
  .article__wrap { width: calc(100% - (var(--lt-wrap-gutter) * 4)); max-width: var(--article-measure); }
}