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

:root {
  --ink-2: #474747;
  --card: #f7f7f7;
  --card-line: #d6d6d6;
  --fig-line: #e0e0e0;
  --tk: rgba(12, 12, 12, 0.06);
  --focus: rgba(12, 12, 12, 0.4);
  --area-op: 0.045;
  --fern: #1f1f1d;
  /* Comparison lines in the context figure: categorical slots; Fern itself is drawn in ink. */
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #6250d6; --c7: #008300;
  --seg-1: #dcdcdc; --seg-2: #a3a3a3; --seg-3: #111111;
  /* Heatmap: one neutral grey ramp, light to dark; cell text flips to white on the two darkest steps. */
  --h0: #f0f0f0; --h1: #dedede; --h2: #c4c4c4; --h3: #a0a0a0; --h4: #6e6e6e; --h5: #3a3a3a;
  --ht0: #0c0c0c; --ht1: #0c0c0c; --ht2: #0c0c0c; --ht3: #0c0c0c; --ht4: #ffffff; --ht5: #ffffff;
}
html[data-theme="dark"] {
  --ink-2: #a9a9a4;
  --card: #151514;
  --card-line: #3a3a38;
  --fig-line: #2e2e2c;
  --tk: rgba(244, 244, 241, 0.13);
  --focus: rgba(244, 244, 241, 0.5);
  --area-op: 0.08;
  --fern: #d8d8d4;
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #9085e9; --c7: #008300;
  --seg-1: #3a3a3a; --seg-2: #6a6a6a; --seg-3: #f4f4f1;
  --h0: #1c1c1c; --h1: #2b2b2b; --h2: #414141; --h3: #626262; --h4: #8f8f8f; --h5: #c4c4c4;
  --ht0: #f4f4f1; --ht1: #f4f4f1; --ht2: #f4f4f1; --ht3: #f4f4f1; --ht4: #0d0d0d; --ht5: #0d0d0d;
}

/* Darker greys for this article's secondary text, as in the Mirendil-Base post. */
.news-article {
  --muted: #9c9c99;
  --muted-2: #5e5e5b;
  container-type: inline-size;
}
html[data-theme="dark"] .news-article {
  --muted: #5c5c59;
  --muted-2: #8a8a86;
}

.news-article__body strong { color: var(--ink); font-weight: 500; }
.news-article__body em { font-style: italic; }
.tk { background: var(--tk); border-radius: 3px; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ── Hero: a Barnsley fern, drawn from points ──────────────────── */
.fern-hero { margin: 30px auto 0; display: flex; justify-content: center; }
.fern-hero__art { display: block; width: 238px; height: 298px; max-width: 100%; }

/* Early-access call to action under the lede */
.fern-ctas { justify-content: center; margin: 28px 0 0; }

/* ── Breakout blocks ──────────────────────────────────────────── */
/* Cards, figures and the capability grid break out of the 600px text column to the
   article's content width (672px on desktop), centred on the column. Sized against the
   article, not the viewport, so they never overflow beside the fixed sidebar. */
.cards, .fig {
  width: min(672px, 100cqw);
  margin-left: calc(50% - min(336px, 50cqw));
}

/* ── Family cards ─────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 14px;
  margin-top: 28px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 18px 20px;
  border-radius: 12px;
  background: var(--card);
  min-width: 0;
}
/* Card art: the models grow from undergrowth to canopy. All three share one height and ground line. */
.card__art { display: block; width: 200px; max-width: 100%; height: 112px; }
.card--soon { background: transparent; border: 1px dashed var(--card-line); padding: 19px 17px 19px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 27px; } /* the title's line height, so pill-only heads match */
.card__title { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; margin: 0; }
.pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  white-space: nowrap;
}
.card__head .pill { position: relative; top: -1.5px; }
.pill--soon { background: var(--fill); color: var(--muted-2); }
/* Three lines tall in the three-column layout, so the spec rows line up across cards. */
.card__desc { font-family: var(--sans); font-weight: 400; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0; min-height: 4.5em; }
/* Specs stack label over value: the cards are too narrow at the article width for two columns. */
.specs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px 0;
  margin: 0;
  flex: 1 0 auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  align-content: start;
}
.specs dt { color: var(--muted-2); font-weight: 400; font-size: 11.5px; }
.specs dd { margin: 0 0 4px; color: var(--ink); min-width: 0; }
.specs dd:last-child { margin-bottom: 0; }
.card--soon .specs dd { color: var(--muted-2); }
.card__links { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: auto; }
.more { font-family: var(--sans); font-size: 13px; color: var(--ink); text-decoration: none; }
.more::after { content: "\203A"; display: inline-block; margin-left: 7px; color: var(--muted-2); transition: transform 0.15s; }
.more:hover::after { transform: translateX(2px); }

/* ── Figures ──────────────────────────────────────────────────── */
.fig {
  box-sizing: border-box;
  margin-top: 24px;
  margin-bottom: 0;
  padding: 32px 32px 28px;
  border: 1px solid var(--fig-line);
  border-radius: 12px;
  background: var(--bg);
}
.prose > p + .fig { margin-top: 36px; }
.fig[hidden] { display: none; }
.fig + h2 { margin-top: 44px; }
.fig__head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.fig__num { font-family: var(--mono); font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.fig__title { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.35; margin: 0; flex: 1 1 260px; min-width: 0; }
.chip { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-soft); background: var(--tk); border-radius: 4px; padding: 3px 6px; line-height: 1; white-space: nowrap; }
.fig__sub { font-family: var(--sans); font-weight: 300; font-size: 13px; line-height: 1.55; color: var(--muted-2); margin: 6px 0 22px; }
.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__plot { position: relative; width: 100%; }
.fig__plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; padding: 0; list-style: none; font-family: var(--sans); font-size: 12px; color: var(--muted-2); }
.fig__legend li { display: inline-flex; align-items: center; gap: 7px; }
.fig__legend .is-ours { color: var(--ink); font-weight: 500; }
.key { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.key--dash { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--muted-2); }
.fig__data { margin-top: 14px; font-family: var(--sans); font-size: 12px; color: var(--muted-2); }
.fig__data summary { cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.fig__data summary::-webkit-details-marker { display: none; }
.fig__data summary::before { content: "+"; }
.fig__data[open] summary::before { content: "\2013"; }
.data-scroll { overflow-x: auto; }
.data-table { margin-top: 10px; border-collapse: collapse; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { text-align: right; padding: 5px 0 5px 18px; border-bottom: 1px solid var(--line); font-weight: 400; white-space: nowrap; }
.data-table th:first-child, .data-table td:first-child { text-align: left; padding-left: 0; }
.data-table th { color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.6px; font-size: 10.5px; }
sup.fn { font-family: var(--mono); font-size: 0.6em; line-height: 0; color: var(--muted-2); }
sup.fn a { text-decoration: none; color: inherit; }

/* SVG chart parts */
.ax { font-family: var(--mono); font-size: 11px; fill: var(--muted-2); font-variant-numeric: tabular-nums; }
.ax-title { font-family: var(--sans); font-size: 11px; fill: var(--muted-2); }
.gridline { stroke: var(--line); stroke-width: 1; }
.axisline { stroke: var(--muted); stroke-width: 1; }
.refline { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.ref-label { font-family: var(--sans); font-size: 11px; fill: var(--muted-2); }
.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line.is-ph { stroke-dasharray: 5 4; }
.v-label { font-family: var(--mono); font-size: 12px; font-weight: 400; fill: var(--ink); font-variant-numeric: tabular-nums; }
.n-label { font-family: var(--sans); font-size: 12px; fill: var(--muted-2); }
/* End-of-line annotations (token counts): a page-colored halo keeps them legible where they cross another line. */
.e-label { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.xhair { stroke: var(--muted); stroke-width: 1; }
.hit { fill: transparent; cursor: crosshair; }
.hit:focus { outline: none; }
.hit:focus-visible { stroke: var(--focus); stroke-width: 2; }

/* Small multiples (RL figure, currently hidden) */
.sm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 36px; }
.sm__panel { min-width: 0; }
.sm__title { font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--ink); margin: 0 0 8px; }

/* Compute budget bar (currently hidden) */
.budget { display: flex; gap: 2px; height: 30px; width: 100%; }
.budget__seg { height: 100%; min-width: 3px; }
.budget__seg:first-child { border-radius: 4px 0 0 4px; }
.budget__seg:last-child { border-radius: 0 4px 4px 0; }
.budget-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; margin: 16px 0 0; padding: 0; list-style: none; }
.budget-key li { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 9px; row-gap: 3px; align-items: baseline; min-width: 0; }
.budget-key .key { border-radius: 2px; align-self: center; }
.budget-key__name { font-family: var(--sans); font-size: 13px; color: var(--ink); }
.budget-key li.is-ours .budget-key__name { font-weight: 500; }
.budget-key__val { grid-column: 2; font-family: var(--mono); font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }

/* 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.4;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.12s, transform 0.12s;
  top: 0;
  left: 0;
}
.tip.is-on { opacity: 1; transform: none; }
.tip__title { display: block; font-weight: 500; margin-bottom: 3px; }
.tip__row { display: flex; gap: 10px; justify-content: space-between; opacity: 0.85; }
.tip__row b { font-family: var(--mono); font-weight: 400; opacity: 1; }

/* ── Comparison table ─────────────────────────────────────────── */
/* The table is wider than the article at every width, so it scrolls sideways; a fade on the
   right edge says more models follow. */
.vt-wrap { overflow-x: auto; }
.vt-host { position: relative; }
.vt-host::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; pointer-events: none; background: linear-gradient(to right, transparent, var(--bg)); opacity: 0; transition: opacity 0.15s; }
.vt-host.is-more::after { opacity: 1; }
.vt { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted-2); }
.vt th, .vt td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; font-weight: 400; }
.vt thead th { font-family: var(--sans); font-size: 11.5px; 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"] { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.vt .is-ours { background: var(--card); }
.vt td.is-ours { color: var(--ink-soft); }
.vt td.is-best { color: var(--ink); font-weight: 500; }
.vt tbody tr:last-child th, .vt tbody tr:last-child td { border-bottom: 0; }
.pending { font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.vt .nr { color: var(--muted); }
.vt th[scope="row"], .vt thead th:first-child { white-space: normal; min-width: 118px; padding-right: 12px; }
.vt .bn-full { display: none; }
.vt .bn-short { display: inline; }
/* Model columns are all one width: each name sits in a fixed-width block and wraps into balanced lines. */
.vt thead th .mn { display: block; width: 8ch; margin-left: auto; }
/* Model groups: a small label over each group with a rule under it, and a hairline where each group starts. */
.vt .vt-groups th { padding: 0 10px 0; border-bottom: 0; vertical-align: bottom; }
.vt .vt-groups th.g span { display: block; text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted-2); padding: 0 0 7px; border-bottom: 1px solid var(--muted); white-space: nowrap; }
.vt .vt-groups th.g--empty { padding: 0; }
.vt th.g-start, .vt td.g-start { box-shadow: inset 1px 0 0 var(--line); }
.vt .vt-groups th.g-start { box-shadow: none; padding-left: 14px; }
.vt td.vt-pending { text-align: center; }
/* Each score names its source on hover or focus. */
.vt td.has-src { cursor: help; }
.vt td.has-src:hover, .vt td.has-src:focus-visible { color: var(--ink); }

/* ── Heatmap ──────────────────────────────────────────────────── */
.heat-scroll { overflow-x: auto; }
.heat { display: grid; grid-template-columns: minmax(132px, 1.5fr) repeat(var(--cols, 6), minmax(50px, 1fr)); gap: 2px; min-width: 520px; }
.heat__col { font-family: var(--mono); font-size: 11px; color: var(--muted-2); text-align: center; padding-bottom: 6px; align-self: end; }
.heat__row { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; padding-right: 10px; min-width: 0; }
.heat__cell { height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; cursor: default; }
.heat__cell:focus { outline: none; }
.heat__cell:focus-visible, .heat__cell:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.heat.is-ph .heat__cell { opacity: 0.62; }
.heat-key { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--mono); font-size: 11px; color: var(--muted-2); flex-wrap: wrap; }
.heat-key__ramp { display: flex; gap: 2px; }
.heat-key__ramp span { width: 22px; height: 10px; border-radius: 2px; }

/* ── Capabilities ─────────────────────────────────────────────── */
.caps {
  width: 100%;
  margin-left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 36px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}
.caps h3 { font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--ink); margin: 0 0 6px; }
.caps p { font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* ── Footnotes (site styles, with the rule hugging the column) ── */
.news-article__body .footnotes { margin-top: 48px; }

/* ── Responsive ───────────────────────────────────────────────── */
/* Cards go to one column once the article is too narrow for three (a 640px content
   column, which is a ~684px viewport under the 860px breakpoint); the specs then have
   room for two columns again. A viewport query rather than a container query: Safari
   can leave the sidebar's breakpoint styles stale on resize when container queries are
   on the page, and the other posts mirror /styles.css breakpoints the same way. */
@media (max-width: 684px) {
  .cards { grid-template-columns: minmax(0, 1fr); row-gap: 14px; width: min(440px, 100cqw); margin-left: calc(50% - min(220px, 50cqw)); }
  .specs { flex: 0 0 auto; }
  .card__desc { min-height: 0; }
  .specs { grid-template-columns: max-content minmax(0, 1fr); gap: 9px 18px; }
  .specs dt { font-size: 13px; }
  .specs dd { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tip, .more::after { transition: none; }
}
@media (max-width: 560px) {
  .fig { padding: 20px 16px 20px; }
  .fig__title { font-size: 17px; }
  .caps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sm { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .budget-key { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vt, .vt thead th { font-size: 11px; }
  .vt th, .vt td { padding: 9px 5px; }
  .vt th[scope="row"], .vt thead th:first-child { min-width: 96px; }
  /* Phones: all seven lengths fit across without sideways scrolling. */
  .heat { min-width: 0; grid-template-columns: minmax(66px, 1.15fr) repeat(var(--cols, 6), minmax(0, 1fr)); }
  .heat__row { font-size: 11.5px; line-height: 1.25; padding-right: 6px; }
  .heat__col { font-size: 9.5px; }
  .heat__cell { height: 38px; font-size: 10.5px; border-radius: 3px; }
}