/* ── Post-specific styles: hero stats, figures, value table ─────────
   Everything else (shell, fonts, prose, breakpoints) comes from /styles.css. */

:root {
  --accent-mark: #6b8159;
  --media: #f7f7f5;
  --card-line: #dcdcd9;
  --bar-ours: #1f1f1f;
  --bar-other: #d3d3d0;
  --col-ours: #e9e9e6;
}
html[data-theme="dark"] {
  --accent-mark: #8fa67c;
  --media: #151514;
  --card-line: #333331;
  --bar-ours: #e6e6e3;
  --bar-other: #4a4a48;
  --col-ours: #232322;
}

/* Body copy tweaks on top of .prose */
.news-article__body strong { color: var(--ink); font-weight: 500; }

/* ── Hero: stats over a dark dotted field ─────────────────────── */
.hero-media {
  position: relative;
  overflow: hidden;
  margin: 30px auto 0;
  border-radius: 7px;
  background: #050505 url("/assets/news/pretraining-at-scale-without-a-pretraining-team-hero.png?v=1") center / cover no-repeat;
  aspect-ratio: 1344 / 576;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  container-type: inline-size;
}
.hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  height: 70%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.hero-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 8px;
}
.hero-stats li + li { border-left: 1px solid rgba(255, 255, 255, 0.2); }
.hero-stat__value {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 5.65cqw, 38px);
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.hero-stat__label {
  margin-top: clamp(8px, 2.2cqw, 20px);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(11px, 2.3cqw, 18px);
  line-height: 1.2;
  color: #ededeb;
}

/* ── Figures ──────────────────────────────────────────────────── */
/* Figures break out of the 600px text column to the article's content width
   (672px on desktop, same as the title and hero), centred on the column.
   Sized against the article, not the viewport, so they never overflow when
   the fixed sidebar is eating into the available width (861–1200px). */
.news-article { container-type: inline-size; }
.fig {
  margin: 36px 0 40px;
  width: min(672px, 100cqw);
  margin-left: calc(50% - min(336px, 50cqw));
}
.fig__card {
  border: 1px solid var(--card-line);
  border-radius: 12px;
  padding: 32px 32px 36px;
}
.fig__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.fig__num { font-family: var(--mono); font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.fig__sub {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted-2);
  margin: 4px 0 18px;
}
.fig__plot { position: relative; width: 100%; min-height: 40px; }
.fig__plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig__note {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted-2);
  margin: 16px 0 0;
}
.fig__note strong { font-weight: 500; color: var(--ink-soft); }

/* Chart rows (SVG) */
.row-hit { fill: transparent; }
.row:focus { outline: none; }
.row:focus .row-hit { stroke: var(--muted); stroke-width: 1px; }
.row:hover .bar, .row:focus .bar { opacity: 0.78; }

/* Tooltip */
.tip {
  position: absolute;
  pointer-events: none;
  z-index: 30;
  background: var(--solid);
  color: var(--solid-ink);
  border-radius: 6px;
  padding: 7px 10px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s, transform 0.12s;
  top: 0;
  left: 0;
}
.tip.is-on { opacity: 1; transform: none; }
.tip__value { font-family: var(--mono); font-weight: 500; font-size: 13px; display: block; }
.tip__name, .tip__note { opacity: 0.75; display: block; }
.tip__note { margin-top: 2px; font-style: italic; }

/* ── Value table (Fig. 2) ─────────────────────────────────────── */
.vt-wrap { overflow-x: auto; }
.vt {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
}
.vt th, .vt td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
  font-weight: 400;
}
.vt thead th {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted-2);
  vertical-align: bottom;
  white-space: normal;
  padding-top: 4px;
}
.vt thead th.is-ours { color: var(--ink); font-weight: 500; }
.vt th[scope="row"], .vt thead th:first-child { text-align: left; padding-left: 0; }
.vt th[scope="row"] { color: var(--ink-soft); }
.vt .is-ours { background: var(--col-ours); }
.vt td.is-ours { color: var(--ink); font-weight: 500; }
.vt td.is-best { color: var(--ink); font-weight: 600; }
.vt tfoot th, .vt tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--muted);
  background: var(--media);
  padding-top: 12px;
  padding-bottom: 12px;
}
.vt tfoot th[scope="row"] {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--ink);
  padding-left: 8px;
}
.vt tfoot td.is-ours { background: var(--col-ours); }
.vt__short { display: none; }

@media (min-width: 561px) {
  .vt { table-layout: fixed; }
  .vt thead th:first-child { width: 20%; }
  .vt th, .vt td { padding-left: 10px; padding-right: 10px; }
}

/* ── Responsive (mirrors /styles.css breakpoints) ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .tip { transition: none; }
}
@media (max-width: 560px) {
  .fig__card { padding: 20px 16px 22px; }
  .vt__long { display: none; }
  .vt__short { display: inline; }
  .vt, .vt thead th { font-size: 11px; }
  .vt th, .vt td { padding: 9px 4px; }
  .vt th:last-child, .vt td:last-child { padding-right: 0; }
}