/* News dropdown in the header, the four-model campaign panel and the News index page.
   Tokens: theme.css. */

/* ---------- Header News pill + dropdown ---------- */
.news-nav {
  position: relative;
  flex-shrink: 0;
}
.news-nav summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-ui);
  letter-spacing: var(--ls-ui);
}
.news-nav summary::-webkit-details-marker {
  display: none;
}
.news-nav summary:hover,
.news-nav[open] summary {
  background: var(--warm-solid);
  color: var(--bg);
}
.news-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-warm);
}
.news-nav summary:hover .news-nav-dot,
.news-nav[open] .news-nav-dot {
  background: var(--warm-tint);
}
.news-nav-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 0 18px 40px -18px rgba(35, 28, 23, 0.3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: 0;
}
.news-nav-panel > a {
  display: block;
  font: var(--fw-text) var(--fs-h3) / var(--lh-h3) var(--font-display);
  letter-spacing: var(--ls-h3);
}
.news-nav-panel > a span {
  color: var(--accent);
}
.news-nav-kicker {
  display: block;
  margin-bottom: 10px;
  font: var(--fw-label) var(--fs-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--ls-label);
  color: var(--accent);
}
.news-nav-panel .news-nav-all {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font: var(--fw-text) var(--fs-ui) / var(--lh-ui) var(--font-body);
  letter-spacing: var(--ls-ui);
  color: var(--text-muted);
}

/* ---------- Four-model campaign ---------- */
.campaign-panel {
  margin-top: 32px;
  padding: 28px 32px 32px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}
.campaign-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.campaign-head .section-index {
  margin-bottom: 14px;
}
.campaign-head h2 {
  max-width: 760px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.campaign-head p {
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.campaign-status {
  margin-top: 2px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: var(--fw-label) var(--fs-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.campaign-models {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.campaign-model {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px dashed var(--fog);
  border-radius: 4px;
  background: transparent;
}
.campaign-model > span {
  font: var(--fw-label) var(--fs-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.campaign-model strong {
  font: var(--fw-text) var(--fs-h3) / var(--lh-h3) var(--font-display);
  letter-spacing: var(--ls-h3);
}
.campaign-model small {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-ui);
  letter-spacing: var(--ls-ui);
  color: var(--text-faint);
}
.campaign-model:not(.complete) strong {
  color: var(--text-faint);
}
.campaign-model.complete {
  border: 1px solid var(--warm-tint);
  background: color-mix(in srgb, var(--warm-tint) 40%, transparent);
  transition: border-color 0.2s ease;
}
.campaign-model.complete:hover {
  border-color: var(--accent);
  color: inherit;
}
.campaign-model.complete small {
  color: var(--accent);
}

/* ---------- News index page ---------- */
.news-page {
  padding-top: 40px;
}
.news-intro {
  padding: 40px 0 8px;
}
.news-intro .section-index {
  margin-bottom: 22px;
}
.news-intro h1 em {
  font-style: italic;
}
.news-intro p {
  max-width: 30em;
  margin-top: 24px;
  font: var(--fw-text) var(--fs-lead) / var(--lh-lead) var(--font-display);
  color: var(--text-muted);
}

@media (max-width: 1100px) {
  .campaign-models {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .campaign-panel {
    padding: 22px 20px;
  }
  .campaign-head {
    flex-direction: column;
    gap: 12px;
  }
  .campaign-models {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Overall ranking first, followed by four model reports. */
#leaderboard { padding-top: var(--space-section); } /* main-site rhythm: 96px to the first rule */
.hero-description { margin-top: 24px; }
.campaign-brief { margin: 0 0 24px; }
.campaign-head h3 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.campaign-publication { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-muted); }
.upcoming-update h3 { color: var(--text); }
.upcoming-update:hover { background: var(--surface); }
.model-analysis { margin-top: var(--space-section); }
.analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.analysis-card { min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.analysis-card h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.analysis-card p, .analysis-limits p { margin-top: 14px; color: var(--text-muted); }
.analysis-metrics { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.analysis-metric { flex: 1 1 120px; padding-top: 12px; border-top: 1px solid var(--line); }
.analysis-metric span { display: block; color: var(--text-faint); font-size: var(--fs-ui); }
.analysis-metric strong { display: block; margin-top: 6px; font: var(--fw-text) var(--fs-h2) / var(--lh-h2) var(--font-display); }
.analysis-case-link { display: inline-block; margin-top: 16px; font-size: var(--fs-small); color: var(--accent); }
.analysis-limits { margin-top: 24px; padding: 28px; border-left: 2px solid var(--accent-warm); background: var(--surface-soft); }
.analysis-limits h3 { font-size: var(--fs-h3); }
.analysis-limits ul, .pending-evidence { margin: 16px 0 0; padding-left: 20px; color: var(--text-muted); }
.analysis-limits li + li, .pending-evidence li + li { margin-top: 10px; }
.model-pending { margin-top: 32px; padding: 28px; border: 1px dashed var(--fog); border-radius: 4px; }
.model-pending h2 { margin-top: 16px; font-size: var(--fs-h2); letter-spacing: var(--ls-h2); }
.model-pending p { margin-top: 16px; max-width: var(--reading-width); color: var(--text-muted); }
.model-pending .hero-actions { margin-top: 24px; }
@media (max-width: 760px) {
  .hero { padding-top: 32px; }
  .hero h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
  .analysis-grid { grid-template-columns: minmax(0, 1fr); }
  .analysis-card, .analysis-limits, .model-pending { padding: 22px 20px; }
}

body[data-model-status="testing"] .model-hero { grid-template-columns: minmax(0, 1fr); max-width: var(--reading-width); }
#model-update-cases { scroll-margin-top: var(--nav-height); }

.model-hero { padding-bottom: 32px; }
.model-hero + .editorial-grid, #generic-results > .editorial-grid:first-child { margin-top: 32px; }

#leaderboard, #updates, #cases, #model-analysis { scroll-margin-top: calc(var(--nav-height) + 20px); }
.board-context { flex-wrap: wrap; }
.paper-results-link { margin-left: auto; font-size: var(--fs-ui); }
@media (max-width: 1023px) {
  body[data-page="model"] .site-header nav > a[href="../index.html#updates"],
  body[data-page="opus"] .site-header nav > a[href="../index.html#updates"] { display: inline-flex; }
}

/* Finding cards (model reports): four across, cut corner, mono label + dot glyph, text, then a
   framed figure on a dashed grid. Layout after a card reference; colours are the site's own. */
.analysis-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.analysis-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  background:
    linear-gradient(225deg, var(--line) 0 12.5px, transparent 13px) top right / 18px 18px no-repeat,
    var(--surface);
}
.analysis-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.analysis-label {
  font: var(--fw-label) 13px / 1.35 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.analysis-glyph { flex-shrink: 0; width: 18px; height: 18px; margin-right: 10px; fill: var(--accent-warm); }
.analysis-card h3 { margin-top: 28px; font-size: var(--fs-body); line-height: var(--lh-small); letter-spacing: 0.02em; }
.analysis-card p { margin-top: 10px; font-size: var(--fs-small); line-height: var(--lh-small); }
.analysis-figure {
  display: grid;
  gap: 14px;
  margin-top: auto;
  padding: 16px 14px;
  border: 1px solid var(--line);
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--fog) 55%, transparent) 23px 24px),
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--fog) 35%, transparent) 23px 24px);
}
.analysis-card p + .analysis-figure { margin-top: 20px; }
.af-head { display: flex; justify-content: space-between; gap: 8px; font: var(--fw-label) var(--fs-label) / 1.3 var(--font-mono); letter-spacing: 0.06em; color: var(--text-muted); }
.af-bars { display: grid; gap: 3px; margin-top: 6px; }
.af-bar { display: block; height: 7px; }
.af-bar.is-a { background: var(--db-main); }
.af-bar.is-b { border: 1px solid var(--db-compare); background: var(--bg); }
.af-vals { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 6px; }
.af-vals b { font: var(--fw-text) var(--fs-h3) / 1 var(--font-display); }
.af-vals span { font-size: var(--fs-ui); color: var(--text-faint); white-space: normal; line-height: 1.5; }
.fe-figure .af2-cov span { display: block; }
.analysis-card .analysis-case-link { margin-top: 12px; font-size: var(--fs-ui); }
@media (max-width: 1180px) { .analysis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .analysis-grid { grid-template-columns: minmax(0, 1fr); } }
.analysis-links { display: flex; flex-direction: column; gap: 6px; min-height: 52px; margin-top: 12px; }
.analysis-card .analysis-links .analysis-case-link { margin-top: 0; }
/* Shared rows across the cards: label, title, text, figure and links line up; figures share a height. */
@supports (grid-template-rows: subgrid) {
  .analysis-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .analysis-card .analysis-figure { margin-top: 20px; align-content: start; }
  .analysis-card p + .analysis-figure { margin-top: 20px; }
}
/* Figure box without the grid pattern (plain page colour). */
.analysis-figure { background-image: none; }
/* Component metrics: heading above, full-width table below. */
.editorial-grid.metrics-stack { grid-template-columns: minmax(0, 1fr); gap: 28px; }

/* ---------- Section headings and rhythm aligned with the main project site ----------
   Main site: 96px from the previous block to a 1px rule; 32px below the rule the small index
   (left column) and the uppercase title (from the second column); content 48px below. */
.hero { padding-bottom: 0; }
.hero + .section { padding-top: var(--space-section); }
.update-page .model-hero { padding-bottom: 0; }
.update-page > section[data-rail] { margin-top: var(--space-section); }
.update-page > section[data-rail] > .section-heading,
.update-page .model-update-cases .section-heading { margin-top: 0; }
.update-page .editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(0, 2fr) minmax(0, 0.8fr);
  gap: 0 24px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.update-page .editorial-grid > div:first-child { display: contents; }
.update-page .editorial-grid > div:first-child > .section-index { grid-column: 1; grid-row: 1; align-self: start; margin: 0; }
.update-page .editorial-grid > div:first-child > h2 {
  grid-column: 2 / -1;
  grid-row: 1;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
}
.update-page .editorial-grid > div:first-child > h2 br { display: none; }
.update-page .editorial-grid > :not(:first-child) { grid-column: 2 / -1; grid-row: 2; margin-top: var(--space-head); }
.update-page .editorial-grid > table { grid-column: 1 / -1; }
.update-page .editorial-grid.metrics-stack { gap: 0 24px; }
@media (max-width: 1050px) {
  .update-page .editorial-grid { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); }
}
@media (max-width: 760px) {
  .update-page .editorial-grid { grid-template-columns: minmax(0, 1fr); }
  .update-page .editorial-grid > * ,
  .update-page .editorial-grid > div:first-child > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .update-page .editorial-grid > div:first-child > h2 { margin-top: 18px; font-size: clamp(24px, 7vw, 32px); letter-spacing: 0.06em; }
}

/* Section index on its own line above the title (both pages, every section). The index, title
   and lede share the title's left edge; actions stay on the right of the lede line. */
.section-heading .section-index { grid-column: 2 / -1; grid-row: 1; margin: 0 0 14px; }
.section-heading h2 { grid-row: 2; }
.section-heading p { grid-row: 3; }
.section-heading > :not(div) { grid-row: 3; }
.update-page .editorial-grid > div:first-child > .section-index { grid-column: 2 / -1; grid-row: 1; margin: 0 0 14px; }
.update-page .editorial-grid > div:first-child > h2 { grid-row: 2; }
.update-page .editorial-grid > :not(:first-child) { grid-row: 3; }
@media (max-width: 1100px) {
  .section-heading > :not(div) { grid-row: 4; }
}
@media (max-width: 760px) {
  .section-heading .section-index,
  .update-page .editorial-grid > div:first-child > .section-index { grid-column: 1; margin-bottom: 0; }
}
/* the heading grid has an 18px row gap: pull the index so it sits 14px above every title */
.section-heading .section-index { margin-bottom: -4px; }
@media (max-width: 760px) {
  .section-heading .section-index { margin-bottom: 0; }
  .update-page .editorial-grid > div:first-child > h2 { margin-top: 14px; }
}
/* Section index starts at the page's left edge, on its own line above the title. */
.section-heading .section-index,
.update-page .editorial-grid > div:first-child > .section-index { grid-column: 1 / -1; }
/* Ranking panel without the kicker: the title sits at the top, level with the metric switch. */
.ranking-stage { padding-top: 24px; }
.ranking-stage .chart-heading { align-items: center; margin-bottom: 20px; }
.ranking-stage .chart-heading h3 { margin-top: 0; }

/* "Explore the numbers" filters: Model as light text tabs with search on the right, a hairline,
   then Metrics as pill buttons. */
.board-toolbar {
  align-items: center;
  gap: 20px;
  padding: 14px 0 18px;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}
.filter-label { min-width: 64px; color: var(--text-muted); }
.provider-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.provider-tabs button,
.provider-tabs button:hover,
.provider-tabs button.active {
  min-height: 34px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  font: var(--fw-text) var(--fs-body) / 1 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-faint);
}
.provider-tabs button:hover { color: var(--text); }
.provider-tabs button.active { color: var(--text); border-bottom-color: var(--warm-solid); }
.board-toolbar .search { margin-left: auto; width: 260px; min-height: 42px; }
.metric-views { gap: 12px 20px; padding: 18px 0 20px; }
.metric-views .segmented { gap: 10px; }
.metric-views .segmented button { min-height: 40px; padding: 0 18px; font-size: var(--fs-small); text-transform: none; }
@media (max-width: 760px) {
  .board-toolbar { flex-wrap: wrap; }
  .board-toolbar .search { order: -1; width: 100%; margin-left: 0; }
  .filter-label { min-width: 0; }
}

/* 01 toolbar: last-updated date, paper results and CSV download as one row of secondary
   information (same small type, hairline rules above and below, thin separators). */
.board-meta {
  align-items: center;
  margin-bottom: 24px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.board-meta-actions { display: flex; align-items: center; }
.board-meta-actions > * + * { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line); }
.board-meta .snapshot-date,
.board-meta .text-link {
  font: var(--fw-label) var(--fs-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.board-meta .text-link { padding-top: 0; padding-bottom: 0; padding-right: 0; border-top: 0; border-right: 0; border-bottom: 0; background: none; cursor: pointer; }
.board-meta-actions > :first-child { border-left: 0; }
.board-meta .text-link:hover { color: var(--accent); }
.board-meta .text-link span { color: var(--accent); }
@media (max-width: 560px) {
  .board-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* No rules here (rules separate the major sections): a soft rounded strip groups the three
   items, and a small dot separates the two actions. */
.board-meta {
  padding: 9px 18px;
  border-top: 0;
  border-bottom: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warm-tint) 32%, var(--bg));
}
.board-meta-actions > * + * { border-left: 0; padding-left: 0; margin-left: 0; }
.board-meta-actions > * + *::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 14px 2px;
  border-radius: 50%;
  background: var(--text-faint);
  vertical-align: middle;
}
@media (max-width: 560px) {
  .board-meta { border-radius: 14px; padding: 12px 16px; }
}

/* ---------- 01: ranking and full results as one module ----------
   Rank-by pills, then the podium (leader large on the left, #2 and #3 stacked on the right),
   then "Explore all results" with filters and the table. No outer panel. */
.ranking-stage { margin: 0 0 var(--space-block); padding: 0; border: 0; border-radius: 0; background: none; }
.rank-by { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin: 0 0 22px; }
.rank-by .segmented { gap: 10px; }
.rank-by .segmented button { min-height: 42px; padding: 0 20px; font-size: var(--fs-small); text-transform: none; }
.rank-podium.podium-split {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  max-width: none;
  margin: 0;
  align-items: stretch;
}
.podium-split .podium-card,
.podium-split .podium-card.podium-leader {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "place avatar" "prov avatar" "name avatar" "score score" "note note";
  align-content: start;
  justify-items: start;
  text-align: left;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.podium-split .podium-1 {
  grid-column: 1; grid-row: 1 / 3;
  grid-template-columns: 1fr;
  grid-template-areas: "place" "avatar" "prov" "name" "score" "note";
  justify-items: center;
  align-content: center;
  text-align: center;
  border-color: transparent;
  background: color-mix(in srgb, var(--warm-tint) 62%, var(--surface));
}
.podium-split .podium-2 { grid-column: 2; grid-row: 1; background: color-mix(in srgb, var(--warm-tint) 34%, var(--surface)); border-color: transparent; }
.podium-split .podium-3 { grid-column: 2; grid-row: 2; }
.podium-split .podium-card:hover { border-color: var(--accent); }
.podium-place {
  grid-area: place;
  font: var(--fw-label) var(--fs-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.podium-split .podium-1 .podium-place { position: absolute; top: 22px; left: 24px; }
.podium-new {
  position: absolute;
  top: 18px;
  right: 20px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warm-tint) 80%, var(--bg));
  font: var(--fw-label) var(--fs-ui) / 1.3 var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--warm-ink);
}
.podium-split .podium-avatar { grid-area: avatar; margin: 0; align-self: start; }
.podium-split .podium-2 .podium-avatar .provider-mark,
.podium-split .podium-3 .podium-avatar .provider-mark { width: 56px; height: 56px; }
.podium-split .podium-1 .podium-avatar { margin: 28px 0 12px; }
.podium-split .podium-provider { grid-area: prov; margin: 14px 0 2px; }
.podium-split .podium-1 .podium-provider { margin-top: 10px; }
.podium-split .podium-name { grid-area: name; }
.podium-split .podium-score { grid-area: score; margin-top: 10px; }
.podium-split .podium-note { grid-area: note; margin-top: 6px; }
.podium-split .podium-1 .podium-name { font-size: var(--fs-h2); }
.podium-split .podium-1 .podium-score { font-size: var(--fs-d1); }
.podium-split .podium-2 .podium-score,
.podium-split .podium-3 .podium-score { font-size: var(--fs-h1); }
/* Explore all results */
.results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.results-head h3 { font-size: var(--fs-h2); letter-spacing: var(--ls-h2); }
.results-head .tiny-label { margin-top: 8px; color: var(--text-muted); }
.table-section-label { display: none; }
@media (max-width: 760px) {
  .rank-podium.podium-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .podium-split .podium-1, .podium-split .podium-2, .podium-split .podium-3 { grid-column: 1; grid-row: auto; }
  .podium-split .podium-1 .podium-place { position: static; }
  .rank-by { flex-wrap: wrap; }
  .results-head { flex-direction: column; align-items: flex-start; }
}
/* leader card: higher specificity than the generic .podium-card.podium-leader rules */
.podium-split .podium-card.podium-1 {
  grid-column: 1; grid-row: 1 / 3;
  grid-template-columns: 1fr;
  grid-template-areas: "place" "avatar" "prov" "name" "score" "note";
  justify-items: center;
  align-content: center;
  text-align: center;
  border-color: transparent;
  background: color-mix(in srgb, var(--warm-tint) 62%, var(--surface));
}
.podium-split .podium-card.podium-1:hover { border-color: var(--accent); background: color-mix(in srgb, var(--warm-tint) 72%, var(--surface)); }
.podium-split .podium-card.podium-1 .podium-place { position: absolute; top: 22px; left: 24px; }
.podium-split .podium-card .podium-new { top: 20px; right: 22px; }
.podium-split .podium-2 .podium-new, .podium-split .podium-3 .podium-new { right: 96px; }
.ranking-stage { margin-bottom: clamp(56px, 6vw, 88px); }
@media (max-width: 760px) {
  .podium-split .podium-card.podium-1 { grid-column: 1; grid-row: auto; }
  .podium-split .podium-card.podium-1 .podium-place { position: static; }
}
/* an absolutely placed grid item is positioned within its grid area: take the leader's label
   out of the "place" area so it pins to the card's own corner, level with the side cards */
.podium-split .podium-card.podium-1 .podium-place { grid-area: auto; }
@media (max-width: 760px) {
  .podium-split .podium-card.podium-1 { order: -1; }
  .podium-split .podium-card.podium-1 .podium-place { grid-area: place; }
  .rank-by .filter-label { flex-basis: 100%; text-align: left; }
}
.rank-by .filter-label { justify-content: flex-start; }
@media (max-width: 760px) {
  .ranking-stage .chart-heading.rank-by { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  .ranking-stage .chart-heading.rank-by .filter-label { flex-basis: 100%; }
}
/* Section intros run to the page's right edge (same width as the content below); an action
   link such as "All news" moves to its own line, right-aligned, under the intro. */
.section-heading p { grid-column: 2 / -1; max-width: none; }
.section-heading > :not(div) { grid-column: 2 / -1; grid-row: 4; justify-self: end; margin-top: 4px; }
@media (max-width: 760px) {
  .section-heading p, .section-heading > :not(div) { grid-column: 1; justify-self: start; }
}
/* Section action (e.g. "All news ↗") on the index line, at the right edge. */
.section-heading > :not(div) { grid-column: -2 / -1; grid-row: 1; justify-self: end; align-self: center; margin: 0 0 10px; }
@media (max-width: 760px) {
  .section-heading > :not(div) { grid-column: 1; grid-row: 1; justify-self: end; }
}
.section-heading > :not(div) { margin: 0; align-self: center; line-height: 1; min-height: 0; }
.section-heading > :not(div) { margin-block: -14px; }  /* does not add height to the index line */
/* Section title and intro centred across the full content width (index stays at the left,
   the action at the right, on the line above). */
.section-heading h2,
.section-heading p,
.update-page .editorial-grid > div:first-child > h2 { grid-column: 1 / -1; justify-self: center; text-align: center; }
.section-heading p { max-width: 62em; }
@media (min-width: 1200px) { .section-heading h2 { white-space: normal; } }
.section-heading p { max-width: none; }

/* ---------- 02 News & model reports: one framed block, four panels ----------
   Top bar (index · All news), title + intro | dark joint-release panel,
   featured report with a still from a verified case | upcoming reports list. */
.reports-section { padding-top: var(--space-section); }
.reports-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "top top" "intro campaign" "reports reports";
  padding: 18px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.bento-top { grid-area: top; display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 16px; }
.bento-top .section-index { margin: 0; }
.bento-top .text-link { font-size: var(--fs-ui); }
.bento-intro {
  grid-area: intro;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 28px 32px;
  background: var(--bg);
}
.bento-intro h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); text-transform: uppercase; text-align: left; }
.bento-intro p { max-width: 30em; font: var(--fw-text) var(--fs-lead) / var(--lh-lead) var(--font-display); color: var(--text-muted); }
.bento-campaign.campaign-panel {
  grid-area: campaign;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 24px 26px 28px;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--warm-solid), var(--text) 30%);
  color: var(--bg);
}
.bento-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bento-campaign .tiny-label,
.bento-campaign .campaign-status { color: color-mix(in srgb, var(--bg) 75%, transparent); }
.bento-campaign .campaign-status { padding: 0; border: 0; font: var(--fw-label) var(--fs-label) / var(--lh-label) var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; }
.bento-campaign h3 { margin-top: 40px; font: var(--fw-display) var(--fs-h1) / var(--lh-h1) var(--font-display); letter-spacing: 0.02em; color: var(--bg); }
.bento-campaign #campaign-message { margin-top: auto; padding-top: 28px; font-size: var(--fs-body); color: color-mix(in srgb, var(--bg) 85%, transparent); }
.bento-campaign .campaign-publication { margin-top: 8px; font: var(--fw-label) var(--fs-label) / var(--lh-label) var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: color-mix(in srgb, var(--bg) 60%, transparent); }
.bento-campaign .campaign-publication a { color: var(--bg); }
.bento-reports.updates-grid { grid-area: reports; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin: 0; }
.bento-featured.update-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--warm-tint) 55%, var(--surface));
  color: var(--text);
}
.bento-featured.update-card:hover { border: 0; background: color-mix(in srgb, var(--warm-tint) 70%, var(--surface)); }
.bento-cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--media-black); }
.bento-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.bento-featured:hover .bento-cover img { transform: scale(1.03); }
.bento-featured-body { display: flex; flex-direction: column; padding: 22px 26px 24px; }
.bento-featured-body .tiny-label { color: var(--text-muted); }
.bento-state { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-label) var(--fs-label) / var(--lh-label) var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.bento-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--fog); }
.bento-state.is-published { color: var(--positive); }
.bento-state.is-published i { background: var(--positive); }
.bento-name { margin-top: 26px; font: var(--fw-text) var(--fs-h1) / var(--lh-h1) var(--font-display); letter-spacing: 0.02em; }
.bento-line { margin-top: 10px; font: var(--fw-text) var(--fs-lead) / var(--lh-lead) var(--font-display); color: var(--text-muted); }
.bento-metrics { display: flex; align-items: flex-end; gap: 32px; margin-top: 22px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }
.bento-metrics > span:not(.bento-read) { display: flex; flex-direction: column; gap: 4px; }
.bento-metrics b { font: var(--fw-text) var(--fs-h2) / 1 var(--font-display); font-variant-numeric: tabular-nums; }
.bento-metrics small { font: var(--fw-label) var(--fs-label) / var(--lh-label) var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.bento-read { margin-left: auto; font: var(--fw-label) var(--fs-ui) / 1.3 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); }
.bento-upcoming-list { display: flex; flex-direction: column; padding: 24px 26px; border-left: 1px solid var(--line); background: var(--bg); }
.bento-upcoming-list > .bento-row .tiny-label { color: var(--accent); }
.bento-upcoming.update-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  padding: 26px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.bento-upcoming.update-card:last-child { border-bottom: 0; }
.bento-upcoming.update-card:hover { border-color: var(--line); color: var(--accent); }
.bento-upcoming strong { font: var(--fw-text) var(--fs-h3) / var(--lh-h3) var(--font-display); letter-spacing: var(--ls-h3); }
.bento-upcoming .tiny-label { color: var(--text-faint); }
.bento-empty { margin-top: 24px; color: var(--text-muted); }
@media (max-width: 900px) {
  .reports-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "intro" "campaign" "reports"; padding: 12px; }
  .bento-reports.updates-grid { grid-template-columns: minmax(0, 1fr); }
  .bento-upcoming-list { border-left: 0; }
  .bento-intro, .bento-campaign.campaign-panel, .bento-featured-body, .bento-upcoming-list { padding: 22px 20px; }
  .bento-campaign h3 { margin-top: 24px; }
}
.bento-upcoming.update-card { flex-direction: row; }
/* 02 without the outer frame: the panels sit on the page and span its content width; the
   section opens with the same rule as the other sections. */
.reports-bento { padding: 0; border: 0; border-radius: 0; background: none; }
.bento-top { padding: 32px 0 16px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .reports-bento { padding: 0; } }
.bento-intro { padding-left: 0; background: none; }  /* same colour as the page: align with its edge */
.bento-intro { justify-content: flex-start; gap: 18px; }  /* intro right under the title, as in the other section headings */
/* Featured cover inset in the card at close to its native 640px width (sharp, not stretched). */
.bento-featured .bento-cover { margin: 24px 26px 0; border-radius: 10px; aspect-ratio: 16 / 10; }
.bento-featured .bento-cover img { image-rendering: auto; }
@media (max-width: 900px) { .bento-featured .bento-cover { margin: 20px 20px 0; } }
/* Home joint-release panel: no "in preparation" note; once the joint analysis is published the
   line returns as its link. */
.bento-campaign .campaign-publication:not(:has(a)) { display: none; }
/* Featured report shorter (lower cover, tighter body); upcoming list fills the same height with
   the three models sharing it evenly; both columns exactly half the width. */
.bento-reports.updates-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.bento-featured .bento-cover { margin: 20px 24px 0; aspect-ratio: 2.1 / 1; }
.bento-featured .bento-cover img { object-position: 50% 62%; }
.bento-featured-body { padding: 16px 24px 18px; }
.bento-name { margin-top: 10px; font-size: var(--fs-h2); }
.bento-line { margin-top: 2px; font-size: var(--fs-body); }
.bento-metrics { gap: 26px; margin-top: 14px; padding-top: 12px; }
.bento-metrics b { font-size: var(--fs-h3); }
.bento-upcoming-list { padding: 20px 24px; }
.bento-upcoming.update-card { flex: 1 1 0; align-items: center; padding: 0; }
.bento-upcoming-list > .bento-row { padding-bottom: 6px; }
@media (max-width: 900px) {
  .bento-upcoming.update-card { flex: none; padding: 22px 0; }
}
/* Top row: both panels start their text on the same line (28px), title then copy 18px below.
   The left title stays the section title (uppercase, larger); the joint-release title is a
   smaller sentence-case heading in the same serif. */
.bento-intro { padding-top: 28px; padding-bottom: 32px; }
.bento-campaign.campaign-panel { justify-content: flex-start; gap: 18px; padding: 28px 28px 32px; }
.bento-campaign h3 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: 0.02em; }
.bento-campaign #campaign-message { margin: 0; padding: 0; font: var(--fw-text) var(--fs-body) / var(--lh-body) var(--font-display); }
/* Upcoming reports: official brand mark (monochrome, warm ink) in a light round container,
   then the model name; provider on the right. Rows centred, padding trimmed. */
.bento-upcoming-list { padding: 18px 24px; }
.bento-upcoming.update-card { justify-content: flex-start; gap: 18px; }
.bento-upcoming .tiny-label { margin-left: auto; }
.bento-logo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--warm-tint) 45%, var(--surface));
  font: var(--fw-text) var(--fs-h3) / 1 var(--font-display);
  color: var(--warm-ink);
}
.bento-logo i {
  width: 36px;
  height: 36px;
  background: var(--warm-ink);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.bento-upcoming.update-card:hover .bento-logo { background: color-mix(in srgb, var(--warm-tint) 70%, var(--surface)); }
@media (max-width: 560px) {
  .bento-logo { width: 48px; height: 48px; }
  .bento-logo i { width: 28px; height: 28px; }
}
.bento-campaign.campaign-panel { justify-content: center; align-items: center; text-align: center; }  /* title + note centred in the dark panel */
.bento-campaign.campaign-panel { padding-top: 30px; padding-bottom: 30px; }

/* 03 Case studies: one tinted panel with a source-video library and a two-run comparison (2026-10-17). */
.case-study { padding: clamp(20px, 2.4vw, 32px); border-radius: 18px; background: color-mix(in srgb, var(--surface-soft) 45%, var(--bg)); }
.cs-head .section-index { display: block; margin: 0 0 12px; }
.cs-head h2 { margin: 0; text-align: left; }
.cs-library-head, .cs-detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cs-library-head { margin: clamp(24px, 3vw, 36px) 0 16px; }
.cs-library-head .eyebrow, .cs-detail-head .eyebrow { margin: 0; }
.cs-all { font: var(--fw-label) var(--fs-ui) / 1 var(--font-mono); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--text-faint); text-decoration: none; }
.cs-all:hover, .cs-source:hover { color: var(--accent); }
.cs-library { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cs-thumb { display: grid; gap: 8px; padding: 6px 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface-soft) 60%, var(--bg)); color: var(--text-muted); text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.cs-thumb:hover { border-color: var(--accent-warm); }
.cs-thumb.active { border-color: var(--accent-warm); background: var(--warm-tint); color: var(--warm-ink); }
.cs-thumb-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--media-black); }
.cs-thumb-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .82; transition: opacity .2s; }
.cs-thumb:hover img, .cs-thumb.active img { opacity: 1; }
.cs-thumb-play, .cs-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.cs-thumb-play { width: 22px; height: 22px; background: rgba(35, 28, 23, .62); }
.cs-thumb-play::after, .cs-play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-color: transparent transparent transparent currentColor; }
.cs-thumb-play { color: #f4f1ea; }
.cs-thumb-play::after { border-width: 5px 0 5px 8px; }
.cs-thumb-label { padding-left: 2px; font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; }
.cs-detail { margin-top: clamp(24px, 3vw, 32px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line); }
.cs-detail-head h3 { margin: 10px 0 0; font: var(--fw-text) var(--fs-h2) / var(--lh-h2) var(--font-display); }
.cs-source { font: var(--fw-text) var(--fs-lead) / 1 var(--font-display); color: var(--accent-warm); text-decoration: none; white-space: nowrap; }
.cs-runs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.cs-run-top, .cs-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cs-run-top { margin-bottom: 12px; }
.cs-run-name { font: var(--fw-text) var(--fs-lead) / 1.2 var(--font-display); color: var(--text); }
.cs-outcome, .cs-metric span { font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--positive); }
.cs-outcome.failure { color: var(--negative); }
.cs-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--media-black); }
.cs-frame video { width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.cs-play { width: 36px; height: 36px; padding: 0; border: 0; background: rgba(244, 241, 234, .92); color: var(--text-muted); cursor: pointer; transition: opacity .2s, transform .2s; }
.cs-play::after { border-width: 7px 0 7px 11px; }
.cs-play:hover { transform: translate(-50%, -50%) scale(1.08); }
.case-study.is-playing .cs-play { opacity: 0; pointer-events: none; }
.cs-metric { margin-top: 12px; }
.cs-metric span { color: var(--text-faint); }
.cs-metric strong { font: var(--fw-text) var(--fs-lead) / 1 var(--font-display); color: var(--text); }
@media (max-width: 760px) {
  .cs-library { grid-template-columns: repeat(5, minmax(108px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
  .cs-runs { grid-template-columns: 1fr; }
  .cs-detail-head { flex-wrap: wrap; }
}
@media (max-width: 760px) { .results-head > div { min-width: 0; } .results-head .tiny-label { white-space: normal; } }
@media (max-width: 900px) {
  .bento-reports.updates-grid { grid-template-columns: minmax(0, 1fr); }  /* the half/half rule above must not apply on narrow screens */
  .bento-upcoming-list { border-top: 1px solid var(--line); }
}
.cs-head h2 { text-align: center; text-transform: uppercase; }  /* same as the other section titles */
/* Case comparison: the Opus success and the Fable failure are the visual point of the block. */
.cs-runs { gap: 20px; }
.cs-run { padding: 14px 14px 16px; border-radius: 14px; }
.cs-run.is-win { background: color-mix(in srgb, var(--positive-soft) 70%, var(--bg)); box-shadow: inset 0 0 0 1.5px var(--positive); }
.cs-run.is-loss { background: color-mix(in srgb, var(--negative-soft) 45%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--negative) 45%, transparent); }
.cs-run-top { align-items: center; margin-bottom: 12px; }
.cs-outcome { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font: var(--fw-label) var(--fs-ui) / 1 var(--font-mono); letter-spacing: var(--ls-ui); text-transform: uppercase; }
.is-win .cs-outcome { background: var(--positive); color: var(--on-ink); }
.is-loss .cs-outcome { background: transparent; color: var(--negative); box-shadow: inset 0 0 0 1px var(--negative); }
.cs-outcome > span { font-size: 13px; }
.is-win .cs-frame { box-shadow: 0 0 0 1px color-mix(in srgb, var(--positive) 40%, transparent); }
.is-loss .cs-frame video { filter: saturate(.75); }
.cs-metric { align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.cs-metric + .cs-metric { margin-top: 8px; padding-top: 8px; }
.cs-metric strong { display: inline-flex; align-items: baseline; gap: 10px; }
.is-win .cs-metric strong { color: var(--positive); }
.is-loss .cs-metric strong { color: var(--negative); }
.cs-metric em { font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); font-style: normal; letter-spacing: var(--ls-label); text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb, var(--positive) 14%, transparent); }
/* 03 without its own panel colour; only the source-video gallery sits on an off-white band that
   runs to both edges of the window (border-image outset: no horizontal scroll). */
.case-study { padding: 0; border-radius: 0; background: none; }
.cs-gallery { margin-top: clamp(28px, 3.4vw, 40px); padding-block: 28px 32px; border-image: conic-gradient(var(--surface) 0 0) fill 0 / / 0 100vw; }
.cs-gallery .cs-library-head { margin-top: 0; }
.cs-thumb { background: var(--bg); }
.cs-detail { border-top: 0; padding-top: 0; }
.cs-head { padding-top: 32px; border-top: 1px solid var(--line); }  /* same opening rule as the other sections */
/* Gallery labels: dataset on top, task name below. */
.cs-thumb-label { display: grid; gap: 5px; padding: 2px 2px 0; font: var(--fw-text) 15px / 1.25 var(--font-display); letter-spacing: 0.01em; text-transform: none; color: var(--text); }
.cs-thumb-label > span { font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); }
.cs-thumb.active .cs-thumb-label { color: var(--warm-ink); }
.cs-thumb { align-content: start; }
/* 03 fits one screen with its title (2026-10-17): summary line, a lower gallery strip, a one-line
   case header, clips capped by viewport height and the metrics in one row under each clip. */
.cs-head h2 + .cs-lede { max-width: 820px; margin: 14px auto 0; text-align: center; font-size: var(--fs-body); line-height: var(--lh-small); color: var(--text-muted); }
.cs-gallery { margin-top: 22px; padding-block: 16px 18px; }
.cs-library-head { margin-bottom: 10px; }
.cs-library { gap: 10px; }
.cs-thumb { gap: 6px; padding: 5px 5px 7px; border-radius: 9px; }
.cs-thumb-media { aspect-ratio: 2.4 / 1; border-radius: 5px; }
.cs-thumb-label { gap: 3px; font-size: 14px; line-height: 1.2; }
.cs-detail { margin-top: 18px; }
.cs-detail-head { align-items: baseline; }
.cs-detail-head > div { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cs-detail-head h3 { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.cs-source { font-size: var(--fs-body); }
.cs-runs { gap: 16px; margin-top: 12px; }
.cs-run { padding: 10px 12px 10px; border-radius: 12px; }
.cs-run-top { margin-bottom: 8px; }
.cs-run-name { font-size: var(--fs-body); }
.cs-outcome { padding: 5px 10px; font-size: var(--fs-label); }
.cs-frame { aspect-ratio: auto; height: clamp(200px, calc(100vh - 640px), 420px); }
.cs-metrics { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.cs-metrics .cs-metric, .cs-metrics .cs-metric + .cs-metric { margin: 0; padding: 0; border: 0; gap: 12px; }
.cs-metric strong { font-size: var(--fs-body); }
@media (max-width: 760px) { .cs-frame { height: auto; aspect-ratio: 16 / 10; } }
.cs-frame { height: clamp(190px, calc(100vh - 730px), 420px); }  /* room for the header when it is shown */
#cases { scroll-margin-top: calc(-1 * var(--space-section)); }  /* with html scroll-padding (nav + 24px) the 03 rule lands just under the header */  /* the Cases link lands with the whole block (rule to clips) on screen */
.cs-frame { height: clamp(210px, calc(100vh - 680px), 480px); }  /* a little larger (2026-10-17), still one screen with the header shown */
/* 02 shorter (2026-10-17): featured report name and metrics side by side with a thin divider;
   upcoming rows tighter, each with a results link that stays disabled until the report is out. */
.bento-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 28px; margin-top: 10px; }
.bento-split .bento-id { display: flex; flex-direction: column; min-width: 0; }
.bento-split .bento-name { margin-top: 0; }
.bento-split .bento-metrics { margin: 0; padding: 4px 0 4px 28px; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--text) 18%, transparent); flex-wrap: wrap; align-items: flex-end; gap: 10px 26px; }
.bento-split .bento-read { flex-basis: 100%; margin-left: 0; text-align: right; }
.bento-featured .bento-cover { aspect-ratio: 2.4 / 1; }
.bento-upcoming.update-card { flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; cursor: default; }
.bento-upcoming.update-card:hover { color: inherit; }
.bento-up-main { display: flex; align-items: center; gap: 16px; }
.bento-up-main .tiny-label { margin-left: auto; }
.bento-logo { width: 48px; height: 48px; flex: none; }
.bento-soon { align-self: flex-start; margin-left: 64px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border: 1px dashed var(--line); border-radius: 999px; font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); cursor: not-allowed; user-select: none; }
.bento-soon em { font-style: normal; color: var(--accent); }
.bento-soon em::before { content: "·"; margin-right: 8px; color: var(--text-faint); }
@media (max-width: 760px) {
  .bento-split { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bento-split .bento-metrics { padding: 12px 0 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }
}
.bento-split .bento-metrics { display: grid; grid-template-columns: auto auto; justify-content: start; }
.bento-split .bento-read { grid-column: 1 / -1; }
.bento-split .bento-name { white-space: nowrap; }
.cs-run { min-width: 0; }
.cs-metrics .cs-metric { flex-wrap: wrap; }
/* Hero owns the first desktop screen (2026-10-17): copy left, leader card with the two actions
   right, and only a small "01 / The leaderboard" cue at the bottom edge. */
.hero-side { display: flex; flex-direction: column; align-self: center; min-width: 0; }
.hero-side .release-highlight.hero-release { align-self: stretch; }
.hero-side .hero-actions { margin-top: 28px; }
.hero-copy { justify-content: center; }
.hero-next { display: none; }
@media (min-width: 901px) and (min-height: 620px) {
  .hero { grid-template-rows: minmax(0, 1fr) auto; min-height: calc(100svh - var(--nav-height)); padding-top: 24px; }
  .hero-next { grid-column: 1 / -1; justify-self: center; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 16px 22px; font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); text-decoration: none; }
  .hero-next:hover { color: var(--accent); }
  .hero-next i { font-style: normal; font-size: 14px; animation: hero-next 2.4s ease-in-out infinite; }
  .hero + .section { padding-top: 0; }
}
@keyframes hero-next { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-next i { animation: none; } }
/* Podium more compact (2026-10-17): smaller marks, scores and padding. */
.podium-split .podium-card, .podium-split .podium-card.podium-leader { padding: 16px 20px; }
.podium-split .podium-card.podium-1 { padding: 16px 22px; }
.podium-split .podium-1 .podium-avatar { margin: 4px 0 4px; }
.podium-split .podium-1 .podium-avatar .provider-mark { width: 76px; height: 76px; }
.podium-split .podium-2 .podium-avatar .provider-mark,
.podium-split .podium-3 .podium-avatar .provider-mark { width: 46px; height: 46px; }
.podium-split .podium-provider { margin: 6px 0 0; }
.podium-split .podium-1 .podium-provider { margin-top: 2px; }
.podium-split .podium-1 .podium-name { font-size: var(--fs-h3); }
.podium-split .podium-name { font-size: var(--fs-h3); }
.podium-split .podium-score { margin-top: 4px; }
.podium-split .podium-1 .podium-score { font-size: var(--fs-d2); }
.podium-split .podium-2 .podium-score, .podium-split .podium-3 .podium-score { font-size: var(--fs-h2); }
.podium-split .podium-note { margin-top: 2px; }
.rank-podium.podium-split { gap: 12px; }
.podium-split .podium-2 .podium-avatar, .podium-split .podium-3 .podium-avatar { margin-top: 14px; }  /* medal stays inside the card */
/* "Last updated / Published paper results" line without the tinted strip (2026-10-17); text keeps
   the content edge. */
.board-meta, .board-meta:is(*) { padding: 0; border-radius: 0; background: none; }
/* Hero type and alignment (2026-10-17): larger headline, more room before the intro, bigger
   NEW LEADER tag; both columns share a bottom line (intro text / the two buttons). */
.hero h1 { font-size: clamp(52px, calc((min(100vw - 2 * var(--gutter), var(--content-width)) - var(--grid-gap)) * 0.55 * 0.111), 84px); }  /* up to 80px; never wider than its column, so three lines */
@media (min-width: 901px) { .hero h1 em { white-space: nowrap; } }  /* "physical world?" stays one line; may run slightly into the gap, above the paint */
.hero-description { margin-top: 40px; }
.release-highlight.hero-release .release-tag { padding: 6px 14px; font-size: 14px; letter-spacing: var(--ls-label); }
@media (min-width: 901px) and (min-height: 620px) {
  .hero { grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) auto; }
  .hero-copy, .hero-side { grid-row: 2; align-self: end; }
  .hero-next { grid-row: 4; }
}
@media (min-width: 901px) { .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }  /* room for the larger headline */
/* Ranking board, 2048-style (2026-10-17). Tiles sit on a four-column board; tile colour deepens
   with the value (--t: 0 lowest .. 1 highest in view). */
#rank-podium { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(104px, auto); gap: 10px; padding: 10px; border-radius: 18px; background: color-mix(in srgb, var(--warm-tint) 42%, var(--bg)); }
#rank-podium .tile-well { grid-column: var(--c); grid-row: var(--r); border-radius: 12px; background: color-mix(in srgb, var(--warm-tint) 22%, var(--bg)); }
#rank-podium .rank-tile {
  grid-column: var(--c) / span var(--w); grid-row: var(--r) / span var(--h);
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-width: 0; padding: 14px 16px; border: 0; border-radius: 12px; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--warm-solid) calc(var(--t) * 88%), var(--surface));
  color: var(--text); box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
  transition: box-shadow .2s, filter .2s;
}
#rank-podium .rank-tile:hover { filter: brightness(1.04); box-shadow: 0 6px 18px -10px rgba(40, 28, 20, .45); }
#rank-podium .rank-tile.is-deep { color: var(--on-ink); }
#rank-podium .tile-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
#rank-podium .tile-rank { font: var(--fw-label) var(--fs-ui) / 1 var(--font-mono); letter-spacing: var(--ls-label); opacity: .7; }
#rank-podium .podium-new { position: static; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 75%, transparent); color: var(--warm-ink); font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); letter-spacing: var(--ls-label); }
#rank-podium .tile-id { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; }
#rank-podium .tile-id > span:last-child { display: flex; flex: 1; flex-direction: column; min-width: 0; }
#rank-podium .provider-mark { flex: none; width: 30px; height: 30px; padding: 4px; border: 0; border-radius: 50%; background: var(--surface); display: grid; place-items: center; overflow: hidden; }
#rank-podium .provider-mark img { width: 100%; height: 100%; object-fit: contain; }
#rank-podium .podium-provider { margin: 0; font: var(--fw-label) var(--fs-micro) / 1.2 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; opacity: .7; color: inherit; }
#rank-podium .podium-name { margin: 0; font: var(--fw-text) var(--fs-body) / 1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: inherit; }
#rank-podium .podium-score { margin-top: auto; font: var(--fw-display) var(--fs-h2) / 1 var(--font-display); color: inherit; }
#rank-podium .podium-score small { margin-left: 4px; font: var(--fw-text) var(--fs-ui) / 1 var(--font-body); opacity: .7; }
#rank-podium .podium-note { font-size: var(--fs-small); opacity: .8; color: inherit; }
/* #1: the big tile */
#rank-podium .tile-lead { padding: 22px 24px; }
#rank-podium .tile-lead .provider-mark { width: 52px; height: 52px; padding: 7px; }
#rank-podium .tile-lead .podium-name { font-size: var(--fs-h2); }
#rank-podium .tile-lead .podium-provider { font-size: var(--fs-label); }
#rank-podium .tile-lead .podium-score { font-size: var(--fs-d1); }
#rank-podium .tile-lead .tile-rank { font-size: var(--fs-small); }
#rank-podium .tile-wide .podium-score { font-size: var(--fs-h1); }
#rank-podium .tile-wide { flex-direction: column; }
#rank-podium .rank-empty { grid-column: 1 / -1; padding: 24px; color: var(--text-muted); }
@media (max-width: 760px) {
  #rank-podium { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #rank-podium .tile-well { display: none; }
  #rank-podium .rank-tile { grid-column: auto; grid-row: auto; }
  #rank-podium .tile-lead, #rank-podium .tile-wide { grid-column: 1 / -1; }
}
#rank-podium .podium-score small { color: inherit; }
#rank-podium .rank-tile { background: color-mix(in srgb, var(--warm-solid) calc(var(--t) * 82%), var(--surface)); }
/* Opus page 01 (2026-10-17): index flush left as elsewhere; title, intro lines and the results
   table centred on the page, the table as wide as the intro lines. */
.update-page #result-table { display: block; }
.update-page #result-table > div:first-child { display: block; }
.update-page #result-table > div:first-child > h2 { text-align: center; }
.update-page #result-table .editorial-copy { width: fit-content; max-width: 100%; margin: 28px auto 0; }
.update-page #result-table .editorial-copy > p { text-align: center; }
.update-page #result-table .update-results-table { width: 100%; min-width: 0; }
/* Opus page 02, editorial findings (2026-10-17): two groups (Improvements / Limitations), rows
   alternate text and figure either side of a hairline; no cards, no numbering. */
.findings-editorial { display: grid; gap: clamp(40px, 5vw, 64px); margin-top: clamp(36px, 4vw, 52px); }
.fe-group { display: grid; gap: clamp(28px, 3.4vw, 44px); }
.fe-group-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.fe-rule { height: 1px; background: var(--line); }
.fe-group-title { margin: 0; font: italic var(--fw-text) var(--fs-h2) / 1 var(--font-display); letter-spacing: 0.02em; color: var(--accent-warm); }
.fe-row { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); align-items: center; column-gap: clamp(28px, 4vw, 56px); }
.fe-line { align-self: stretch; background: color-mix(in srgb, var(--text) 22%, transparent); }
.fe-row .fe-text { grid-column: 1; grid-row: 1; max-width: 520px; justify-self: end; }
.fe-row .fe-figure { grid-column: 3; grid-row: 1; justify-self: start; width: min(100%, 460px); }
.fe-row .fe-line { grid-column: 2; grid-row: 1; }
.fe-row.is-flip .fe-text { grid-column: 3; justify-self: start; }
.fe-row.is-flip .fe-figure { grid-column: 1; justify-self: end; }
.fe-text .analysis-label { display: block; margin-bottom: 12px; font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); }
.fe-text h4 { margin: 0; font: var(--fw-text) var(--fs-h3) / var(--lh-h3) var(--font-display); letter-spacing: 0.01em; color: var(--text); }
.fe-text p { margin: 12px 0 0; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-muted); }
.fe-text .analysis-links { margin-top: 12px; }
.fe-text .analysis-links:empty { display: none; }
.fe-figure .analysis-figure { margin: 0; background: none; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); border-radius: 14px; }
@media (max-width: 760px) {
  .fe-row, .fe-row.is-flip { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .fe-row .fe-text, .fe-row.is-flip .fe-text { grid-column: 1; grid-row: 1; justify-self: stretch; max-width: none; }
  .fe-row .fe-figure, .fe-row.is-flip .fe-figure { grid-column: 1; grid-row: 2; justify-self: stretch; width: 100%; }
  .fe-line { display: none; }
}
.fe-text .analysis-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; } .fe-text .analysis-case-link { margin: 0; padding: 0; }
/* Row v2: the label stands vertically in the role of the reference's numerals, a hairline, then
   the finding text and its figure together; the label side alternates. */
.fe-row, .fe-row.is-flip { grid-template-columns: auto 1px minmax(0, 1fr); column-gap: clamp(24px, 3vw, 44px); align-items: stretch; max-width: 1120px; width: 100%; justify-self: center; }
.fe-row.is-flip { grid-template-columns: minmax(0, 1fr) 1px auto; }
.fe-row .fe-tag { grid-column: 1; grid-row: 1; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; padding: 18px 10px; border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: 999px; font: var(--fw-text) 15px / 1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-warm); white-space: nowrap; }
.fe-row .fe-line { grid-column: 2; grid-row: 1; }
.fe-row .fe-body { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 3vw, 40px); align-items: center; }
.fe-row.is-flip .fe-tag { grid-column: 3; }
.fe-row.is-flip .fe-body { grid-column: 1; }
.fe-row .fe-body .fe-text, .fe-row.is-flip .fe-body .fe-text { grid-column: 1; grid-row: 1; justify-self: stretch; max-width: none; }
.fe-row .fe-body .fe-figure, .fe-row.is-flip .fe-body .fe-figure { grid-column: 2; grid-row: 1; justify-self: stretch; width: 100%; }
@media (max-width: 760px) {
  .fe-row, .fe-row.is-flip { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .fe-row .fe-tag, .fe-row.is-flip .fe-tag { grid-column: 1; grid-row: 1; writing-mode: horizontal-tb; transform: none; justify-self: start; padding: 6px 12px; font-size: 12px; }
  .fe-row .fe-body, .fe-row.is-flip .fe-body { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); }
  .fe-row .fe-body .fe-figure, .fe-row.is-flip .fe-body .fe-figure { grid-column: 1; grid-row: 2; }
}
/* Finding figure v2: large value + baseline; bars only for clear differences (both models). */
.analysis-figure.af2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 22px 26px; padding: 20px 22px; background: none; }
.af2-item { display: flex; flex-direction: column; min-width: 0; }
.af2-head { display: flex; justify-content: space-between; gap: 8px; font: var(--fw-label) var(--fs-label) / 1.3 var(--font-mono); letter-spacing: 0.06em; color: var(--text-muted); }
.af2-head span + span { color: var(--text-faint); }
.af2-value { margin-top: 8px; font: var(--fw-text) var(--fs-h1) / 1 var(--font-display); color: var(--text); white-space: nowrap; }
.af2-value small { margin-left: 5px; font: var(--fw-text) var(--fs-small) / 1 var(--font-body); color: var(--text-muted); }
.af2-ref { margin-top: 8px; font-size: var(--fs-ui); color: var(--text-faint); }
.af2-note { margin-top: 6px; font-size: var(--fs-ui); font-style: italic; color: var(--accent-warm); }
.af2-bars { display: grid; gap: 4px; margin-top: 10px; }
.af2-bars span { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.af2-bars span::before { content: none; }
.af2-bars i { grid-column: 1; grid-row: 1; display: block; height: 6px; border-radius: 3px; }
.af2-bars i.is-a { background: var(--warm-solid); }
.af2-bars i.is-b { background: var(--bg); box-shadow: inset 0 0 0 1px var(--db-compare); }
.af2-bars em { grid-column: 2; grid-row: 1; font: var(--fw-label) var(--fs-micro) / 1 var(--font-mono); font-style: normal; letter-spacing: 0.04em; color: var(--text-faint); white-space: normal; line-height: 1.5; }
.fe-figure .af2-cov span { display: block; }
/* figure next to the hairline in every row: rows with the label on the left show figure, then text */
.fe-row:not(.is-flip) .fe-body .fe-figure { grid-column: 1; }
.fe-row:not(.is-flip) .fe-body .fe-text { grid-column: 2; }
.fe-row:not(.is-flip) .fe-body { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
@media (max-width: 760px) {
  .fe-row:not(.is-flip) .fe-body .fe-text { grid-column: 1; grid-row: 1; }
  .fe-row:not(.is-flip) .fe-body .fe-figure { grid-column: 1; grid-row: 2; }
  .fe-row:not(.is-flip) .fe-body { grid-template-columns: minmax(0, 1fr); }
}
/* All metrics of a finding on one line (no wrapping to a second row); the text column gives up
   the width. */
.analysis-figure.af2 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 22px; }
.af2-head { flex-wrap: wrap; row-gap: 2px; }
.fe-row .fe-body, .fe-row:not(.is-flip) .fe-body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
.fe-row.is-flip .fe-body { grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr); }
@media (max-width: 1100px) { .af2-value { font-size: var(--fs-h2); } }
@media (max-width: 760px) {
  .fe-row .fe-body, .fe-row:not(.is-flip) .fe-body, .fe-row.is-flip .fe-body { grid-template-columns: minmax(0, 1fr); }
  .analysis-figure.af2 { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}
.fe-row, .fe-row.is-flip { max-width: none; }  /* rows span the full content width, like the intro above */
.fe-text .analysis-links { flex-direction: column; align-items: flex-end; text-align: right; }  /* case links right-aligned in the text column */
/* Bars full width, model names in a colour-keyed legend under them (brown dot = this model,
   outlined dot = baseline); the card gets shorter and wider. */
.af2-bars { display: grid; gap: 4px; margin-top: 10px; }
.af2-bars > i { display: block; height: 6px; border-radius: 3px; }
.af2-legend { display: flex; gap: 16px; margin-top: 6px; font: var(--fw-label) var(--fs-micro) / 1 var(--font-mono); letter-spacing: 0.04em; color: var(--text-faint); }
.af2-legend span { display: inline-flex; align-items: center; gap: 6px; }
.af2-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.af2-legend .is-a::before { background: var(--warm-solid); }
.af2-legend .is-b::before { background: var(--bg); box-shadow: inset 0 0 0 1px var(--db-compare); }
.analysis-figure.af2 { padding: 16px 22px 16px; }
.af2-value { margin-top: 6px; }
.af2-ref { margin-top: 6px; }
.fe-row .fe-body, .fe-row:not(.is-flip) .fe-body { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr); }
.fe-row.is-flip .fe-body { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); }
@media (max-width: 760px) { .fe-row .fe-body, .fe-row:not(.is-flip) .fe-body, .fe-row.is-flip .fe-body { grid-template-columns: minmax(0, 1fr); } }
.af2-bars > i, .af2-bars > .af2-legend { grid-column: 1; grid-row: auto; }
/* Card only as wide as its metrics (fixed narrow column per metric; bars keep the ratio between
   the two models at that length); the text takes the remaining width. */
.analysis-figure.af2 { grid-auto-columns: 176px; column-gap: 28px; width: max-content; max-width: 100%; }
.fe-row .fe-body, .fe-row:not(.is-flip) .fe-body { grid-template-columns: auto minmax(0, 1fr); }
.fe-row.is-flip .fe-body { grid-template-columns: minmax(0, 1fr) auto; }
.fe-row .fe-body .fe-figure, .fe-row.is-flip .fe-body .fe-figure { width: auto; }
@media (max-width: 1100px) { .analysis-figure.af2 { grid-auto-columns: 150px; } }
@media (max-width: 760px) {
  .fe-row .fe-body, .fe-row:not(.is-flip) .fe-body, .fe-row.is-flip .fe-body { grid-template-columns: minmax(0, 1fr); }
  .analysis-figure.af2 { width: auto; grid-auto-columns: minmax(0, 1fr); }
}
/* Card and text the same width (two equal columns), with room between them and between rows;
   bars stay short (capped) while keeping the ratio between the two models. */
.fe-row .fe-body, .fe-row:not(.is-flip) .fe-body, .fe-row.is-flip .fe-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); }
.fe-row .fe-body .fe-figure, .fe-row.is-flip .fe-body .fe-figure { width: 100%; }
.analysis-figure.af2 { width: 100%; grid-auto-columns: minmax(0, 1fr); column-gap: 24px; padding: 22px 26px; }
.af2-bars > i { max-width: 100%; }
.af2-bars { max-width: 170px; }
.analysis-figure.af2:has(> .af2-item:nth-child(3)) .af2-value { font-size: var(--fs-h2); }
.fe-row, .fe-row.is-flip { column-gap: clamp(32px, 4vw, 64px); }
.fe-group { gap: clamp(48px, 6vw, 88px); }
.findings-editorial { gap: clamp(64px, 7vw, 104px); }
.fe-text p { line-height: 1.7; }
@media (max-width: 760px) {
  .fe-row .fe-body, .fe-row:not(.is-flip) .fe-body, .fe-row.is-flip .fe-body { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
}
/* Findings as ticket stubs (2026-10-17): a pale ticket with a soft shadow; the label sits on the
   stub, torn off along a dashed perforation with a notch at each end; stub side alternates. The
   shadow lives on the row because the notch mask would clip it on the ticket itself. */
.fe-row, .fe-row.is-flip { display: block; filter: drop-shadow(0 14px 22px rgba(70, 48, 30, .09)) drop-shadow(0 2px 3px rgba(70, 48, 30, .08)); }
.fe-ticket {
  --stub: 92px; --notch: 11px;
  display: grid; grid-template-columns: var(--stub) 0 minmax(0, 1fr); align-items: stretch;
  border-radius: 16px; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  -webkit-mask: radial-gradient(circle var(--notch) at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.fe-row.is-flip .fe-ticket {
  grid-template-columns: minmax(0, 1fr) 0 var(--stub);
  -webkit-mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
/* stub */
.fe-row .fe-tag { grid-column: 1; grid-row: 1; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 24px 0; border: 0; border-radius: 0; background: color-mix(in srgb, var(--warm-tint) 30%, var(--surface)); font: var(--fw-text) 14px / 1 var(--font-display); letter-spacing: 0.24em; color: var(--accent-warm); }
.fe-row.is-flip .fe-tag { grid-column: 3; }
/* perforation */
.fe-row .fe-line { grid-column: 2; grid-row: 1; width: 0; margin: calc(var(--notch) + 6px) 0; background: none; border-left: 1.5px dashed color-mix(in srgb, var(--text) 26%, transparent); }
/* main part: figure and text side by side, figure next to the perforation */
.fe-row .fe-body, .fe-row.is-flip .fe-body { padding: clamp(24px, 3vw, 36px) clamp(26px, 3.2vw, 44px); column-gap: clamp(32px, 4vw, 64px); }
.fe-row:not(.is-flip) .fe-body { grid-column: 3; }
.fe-row.is-flip .fe-body { grid-column: 1; }
.fe-figure .analysis-figure.af2 { padding: 0; border: 0; border-radius: 0; }
.fe-text .analysis-links { margin-top: 16px; }
@media (max-width: 760px) {
  .fe-ticket, .fe-row.is-flip .fe-ticket { --stub: 0px; grid-template-columns: minmax(0, 1fr); -webkit-mask: none; mask: none; }
  .fe-row .fe-tag, .fe-row.is-flip .fe-tag { grid-column: 1; grid-row: 1; writing-mode: horizontal-tb; transform: none; justify-content: flex-start; padding: 12px 20px; font-size: 12px; border-bottom: 1.5px dashed color-mix(in srgb, var(--text) 22%, transparent); }
  .fe-row .fe-line { display: none; }
  .fe-row .fe-body, .fe-row.is-flip .fe-body { grid-column: 1; grid-row: 2; padding: 20px; }
}
/* Tickets trimmed to the tallest content plus a base margin: the body keeps 28px top/bottom, and
   the vertical stub label is set tighter so it no longer makes any ticket taller than its text. */
.fe-row .fe-body, .fe-row.is-flip .fe-body { padding-block: 28px; }
.fe-row .fe-tag { padding-block: 12px; font-size: 13px; letter-spacing: 0.16em; }
/* "Improvements" as a rubber stamp on its two tickets (2026-10-17): a tilted double ring in
   muted green, slightly transparent and multiplied into the paper, sitting across the ticket's
   top edge at the corner away from the stub. */
.fe-row { position: relative; }
.fe-stamp {
  position: absolute; z-index: 2; top: -34px; right: 64px; width: 96px; height: 96px;
  display: grid; place-items: center; border-radius: 50%;
  border: 2px solid currentColor; box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 5px currentColor;
  color: color-mix(in srgb, var(--positive) 85%, var(--warm-solid));
  opacity: .78; mix-blend-mode: multiply; transform: rotate(-14deg); pointer-events: none;
}
.fe-stamp > span { font: var(--fw-label) 10px / 1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; }
.fe-stamp::before, .fe-stamp::after { content: "★"; position: absolute; left: 50%; font-size: 9px; line-height: 1; transform: translateX(-50%); }
.fe-stamp::before { top: 20px; }
.fe-stamp::after { bottom: 20px; }
.fe-row.is-flip .fe-stamp { right: auto; left: 64px; transform: rotate(10deg); }
.fe-group.is-stamped { padding-top: 34px; }
@media (max-width: 760px) { .fe-stamp { width: 76px; height: 76px; top: -26px; right: 16px; } .fe-row.is-flip .fe-stamp { left: auto; right: 16px; } .fe-stamp > span { font-size: 8px; } }
/* stamp v2: larger ring, smaller type that fits inside it; set across the bottom edge in the gap
   between figure and text so it covers no words */
.fe-stamp { width: 112px; height: 112px; top: auto; bottom: -40px; right: auto; left: calc(50% + 6px); translate: -50% 0; transform: rotate(-12deg); }
.fe-row.is-flip .fe-stamp { left: calc(50% - 6px); right: auto; transform: rotate(9deg); }
.fe-stamp > span { font-size: 9px; letter-spacing: 0.12em; }
.fe-stamp::before { top: 26px; }
.fe-stamp::after { bottom: 26px; }
.fe-group.is-stamped { padding-top: 0; }
.fe-group.is-stamped .fe-row { margin-bottom: 18px; }
@media (max-width: 760px) { .fe-stamp, .fe-row.is-flip .fe-stamp { width: 84px; height: 84px; bottom: -30px; left: auto; right: 18px; translate: none; } .fe-stamp::before { top: 18px; } .fe-stamp::after { bottom: 18px; } .fe-stamp > span { font-size: 7.5px; } }
@media (max-width: 760px) { .fe-stamp, .fe-row.is-flip .fe-stamp { top: -22px; bottom: auto; } }  /* phones: top-right, beside the label band */
/* stamp v3 (2026-10-17): fully on the ticket, in the empty space under the metrics; a rectangular
   rubber stamp so the word can be larger. The figure keeps to the top of its cell to leave room. */
.fe-group.is-stamped .fe-figure { position: relative; align-self: stretch; }
.fe-group.is-stamped .fe-row { margin-bottom: 0; }
.fe-stamp, .fe-row.is-flip .fe-stamp {
  position: absolute; z-index: 2; top: auto; bottom: 2px; left: auto; right: 6px; width: auto; height: auto; translate: none;
  display: inline-block; padding: 9px 16px; border: 2px solid currentColor; border-radius: 6px;
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px currentColor;
  font: 600 14px / 1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--positive) 85%, var(--warm-solid)); opacity: .8; mix-blend-mode: multiply;
  transform: rotate(-7deg); pointer-events: none;
}
.fe-stamp::before, .fe-stamp::after { content: none; }
/* second ticket: under the first metric (Build has no bars, so its column is free below) */
.fe-row.is-flip .fe-stamp { right: auto; left: 4px; transform: rotate(5deg); }
@media (max-width: 760px) {
  .fe-stamp, .fe-row.is-flip .fe-stamp { position: static; display: inline-block; margin-top: 18px; font-size: 12px; }
}
.fe-stamp, .fe-row.is-flip .fe-stamp { padding: 12px 22px; font-size: 19px; letter-spacing: 0.18em; border-width: 2.5px; box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 5.5px currentColor; }  /* larger stamp */
/* stamp tones: improvement (green), insight (ochre), limitation (red) */
.fe-stamp.tone-insight { color: #9a6a24; }
.fe-stamp.tone-limitation { color: #a5372b; }
.fe-row .fe-stamp.tone-improvement, .fe-row.is-flip .fe-stamp.tone-improvement { color: color-mix(in srgb, var(--positive) 85%, var(--warm-solid)); }
.fe-row .fe-stamp.tone-insight, .fe-row.is-flip .fe-stamp.tone-insight { color: #9a6a24; }
.fe-row .fe-stamp.tone-limitation, .fe-row.is-flip .fe-stamp.tone-limitation { color: #a5372b; }
/* stamps on the text side (2026-10-17): the text cell fills the ticket height, its content stays
   centred, and the stamp sits in the cell's free bottom corner; the metrics keep their size and
   their centred place. */
.fe-group.is-stamped .fe-figure { align-self: center; }
.fe-row .fe-body .fe-text { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.fe-row .fe-text .fe-stamp, .fe-row.is-flip .fe-text .fe-stamp { position: absolute; bottom: -20px; left: -6px; right: auto; transform: rotate(-6deg); }
.fe-row.is-flip .fe-text .fe-stamp { left: auto; right: -6px; transform: rotate(5deg); }
@media (max-width: 760px) { .fe-row .fe-text .fe-stamp, .fe-row.is-flip .fe-text .fe-stamp { position: static; align-self: flex-start; margin-top: 16px; } }
/* stamp v5: in the flow at the foot of the text: stamp left, case links right; the text block
   grows a little instead of the stamp covering words or data. */
.fe-row .fe-body .fe-text { justify-content: center; }
.fe-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.fe-foot .analysis-links { margin-top: 0; }
.fe-row .fe-text .fe-stamp, .fe-row.is-flip .fe-text .fe-stamp { position: static; flex: none; transform: rotate(-5deg); margin: 6px 0 4px 4px; }
.fe-row.is-flip .fe-text .fe-stamp { transform: rotate(4deg); }
@media (max-width: 760px) { .fe-foot { flex-direction: column; align-items: flex-start; } .fe-foot .analysis-links { align-self: flex-end; } }
/* foot row (stamp + case links) pinned to the bottom of the text cell; title and body centred in
   the space above. Stub labels larger and bolder. */
.fe-row .fe-text > h4 { margin-top: auto; }
.fe-row .fe-text > p { margin-bottom: auto; }
.fe-row .fe-text > .fe-foot { margin-top: 18px; }
.fe-row .fe-tag { font-size: 16px; font-weight: 600; letter-spacing: 0.14em; color: color-mix(in srgb, var(--accent-warm) 80%, var(--text)); }
@media (max-width: 760px) { .fe-row .fe-tag { font-size: 13px; } }
.fe-row .fe-tag { font-size: 15px; letter-spacing: 0.08em; padding-block: 8px; }  /* bigger and bolder, but no taller than the text */
.fe-row .fe-text > .fe-foot { margin-bottom: -16px; }  /* links sit near the ticket bottom edge (12px instead of 28px) */
.fe-foot { align-items: flex-end; } .fe-row .fe-text .fe-stamp, .fe-row.is-flip .fe-text .fe-stamp { margin-bottom: 6px; }
.fe-foot .analysis-links { justify-content: flex-end; }
.findings-editorial, .fe-group { gap: clamp(24px, 2.6vw, 36px); }  /* tighter, even spacing between the four tickets */
/* Evaluation notes on the same full-bleed off-white band as the home case gallery (no tint box,
   no side rule); text keeps the content edges. */
.analysis-limits { margin-top: clamp(40px, 4.4vw, 60px); padding: 30px 0 34px; border: 0; background: none; border-image: conic-gradient(var(--surface) 0 0) fill 0 / / 0 100vw; }
@media (max-width: 760px) { .analysis-limits { padding: 24px 0 28px; } }
.findings-editorial, .fe-group { gap: clamp(36px, 4vw, 56px); }  /* a little more air between tickets */
/* Ticket data larger (2026-10-17), one scale for all four tickets so they stay aligned. */
.fe-figure .af2-value, .fe-figure .analysis-figure.af2:has(> .af2-item:nth-child(3)) .af2-value { font-size: clamp(36px, 3.3vw, 52px); margin-top: 8px; }
.fe-figure .af2-value small { font-size: var(--fs-body); }
.fe-figure .af2-head { font-size: 12px; }
.fe-figure .af2-ref { margin-top: 8px; font-size: var(--fs-small); }
.fe-figure .af2-note { font-size: var(--fs-small); }
.fe-figure .af2-bars { max-width: 220px; gap: 5px; margin-top: 14px; }
.fe-figure .af2-bars > i { height: 8px; border-radius: 4px; }
.fe-figure .af2-legend { margin-top: 8px; font-size: 11px; }
.fe-figure .af2-legend span::before { width: 8px; height: 8px; }
.fe-figure .analysis-figure.af2 { column-gap: 28px; }
.fe-figure .analysis-figure.af2 { column-gap: 18px; } .fe-figure .af2-value small { margin-left: 3px; }
/* value size follows the data card's own width (all four cards share it, so the tickets stay
   aligned): as large as the widest value in a three-metric card allows, up to 52px */
.fe-figure { container-type: inline-size; }
.fe-figure .af2-value, .fe-figure .analysis-figure.af2:has(> .af2-item:nth-child(3)) .af2-value { font-size: clamp(28px, calc(9.3cqi - 4px), 52px); }
/* one value size for all four tickets: derived from the ticket width (identical for all) */
.fe-figure { container-type: normal; }
.fe-ticket { container-type: inline-size; }
.fe-figure .af2-value, .fe-figure .analysis-figure.af2:has(> .af2-item:nth-child(3)) .af2-value { font-size: clamp(26px, calc(4.6cqi - 16px), 52px); }
@media (max-width: 760px) { .fe-figure .af2-value, .fe-figure .analysis-figure.af2:has(> .af2-item:nth-child(3)) .af2-value { font-size: 28px; } }
/* narrow desktops: data above text inside the ticket, so three metrics keep room */
@media (min-width: 761px) and (max-width: 1100px) {
  .fe-row .fe-body, .fe-row:not(.is-flip) .fe-body, .fe-row.is-flip .fe-body { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .fe-row .fe-body .fe-figure, .fe-row.is-flip .fe-body .fe-figure { grid-column: 1; grid-row: 1; }
  .fe-row .fe-body .fe-text, .fe-row.is-flip .fe-body .fe-text { grid-column: 1; grid-row: 2; }
  .fe-figure .af2-value, .fe-figure .analysis-figure.af2:has(> .af2-item:nth-child(3)) .af2-value { font-size: clamp(30px, calc(5cqi - 4px), 44px); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .fe-row:not(.is-flip) .fe-body .fe-figure { grid-column: 1; grid-row: 1; }
  .fe-row:not(.is-flip) .fe-body .fe-text { grid-column: 1; grid-row: 2; }
  .fe-row:not(.is-flip) .fe-body { grid-template-columns: minmax(0, 1fr); }
}
/* Opus page 01 with the metric breakdown merged in (2026-10-17): model comparison, then the
   breakdown (metric / value / coverage) and a coverage note, all within the intro's width. */
.update-page #result-table .rt-label { display: block; margin: 30px 0 4px; font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); }
.rt-breakdown { margin-top: clamp(40px, 4.4vw, 56px); padding-top: 28px; border-top: 1px solid var(--line); }
.rt-breakdown-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.rt-breakdown-head h3 { margin: 0; font: var(--fw-text) var(--fs-h2) / 1.1 var(--font-display); letter-spacing: 0.01em; }
.rt-breakdown-head p { margin: 6px 0 0; font-size: var(--fs-small); color: var(--text-muted); text-align: left !important; }
.update-page #result-table .rt-breakdown-head .rt-label { margin: 0 0 4px; }
.rt-breakdown-table { width: 100%; border-collapse: collapse; }
.rt-breakdown-table td { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); }
.rt-breakdown-table td:first-child { color: var(--text); }
.rt-breakdown-table td:nth-child(2) { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-breakdown-table td:nth-child(3) { width: 150px; text-align: right; font-size: var(--fs-ui); color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.update-page #result-table .rt-note { margin-top: 16px; font-size: var(--fs-small); color: var(--text-muted); text-align: left; }
@media (max-width: 760px) { .rt-breakdown-table td:nth-child(3) { width: 84px; } .rt-breakdown-head { flex-direction: column; align-items: flex-start; } }
/* Opus report: the hero owns the first desktop screen, like the leaderboard home; only the
   "01 / Evaluation results" cue shows at the bottom (2026-10-17). */
@media (min-width: 901px) and (min-height: 620px) {
  .update-page .model-hero:has(> .hero-next) { grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) auto; row-gap: 0; min-height: calc(100svh - var(--nav-height) - 54px); padding: 0; }
  .update-page .model-hero:has(> .hero-next) > div { grid-row: 2; }
  .update-page .model-hero > .hero-next { grid-row: 4; grid-column: 1 / -1; justify-self: center; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 16px 22px; font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); text-decoration: none; }
  .update-page .model-hero > .hero-next:hover { color: var(--accent); }
  .update-page .model-hero > .hero-next i { font-style: normal; font-size: 14px; animation: hero-next 2.4s ease-in-out infinite; }
  .update-page .model-hero:has(> .hero-next) + section[data-rail] { margin-top: 0; }
}
.update-page .model-hero > .hero-next { display: none; }
@media (min-width: 901px) and (min-height: 620px) { .update-page .model-hero > .hero-next { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .update-page .model-hero > .hero-next i { animation: none; } }

/* ===== Design-system alignment with the project page (2026-10-17 review) =====
   Measured on the project page at 1440px: 96px padding above and below every module (so 192px
   from one module's last content to the next module's rule), label 33px under the rule, title
   29px under the label, intro 24px under the title in 16px Arial at 82% ink, 1.6 line height.
   Type sizes come from the token scale only. */
main > section.section:not(.hero), .news-page > section:not(.news-intro) { padding-bottom: var(--space-section); }
.update-page > section[data-rail] { padding-bottom: var(--space-section); }
.update-page > section[data-rail] + section[data-rail] { margin-top: var(--space-section); }
/* label → title */
.section-heading .section-index, .cs-head .section-index { margin-bottom: 16px; }
/* title → intro, intro type */
.section-heading p, .cs-head .cs-lede, .bento-intro p, .update-page .case-lead {
  font: var(--fw-text) var(--fs-body) / var(--lh-body) var(--font-body); letter-spacing: 0;
  color: color-mix(in srgb, var(--text) 82%, transparent);
}
.section-heading h2 + p, .cs-head h2 + .cs-lede { margin-top: 24px; }
.update-page #result-table .editorial-copy > p { color: color-mix(in srgb, var(--text) 82%, transparent); }
/* off-scale sizes → token scale */
.fe-row .fe-tag { font-size: var(--fs-body); letter-spacing: 0.06em; }
.fe-figure .af2-legend { font-size: var(--fs-ui); }
.case-col-top .outcome span, .cs-outcome > span { font-size: var(--fs-ui); }
.fe-stamp, .fe-row.is-flip .fe-stamp, .fe-row .fe-text .fe-stamp, .fe-row.is-flip .fe-text .fe-stamp { font-size: var(--fs-lead); }
@media (max-width: 760px) { .fe-row .fe-tag { font-size: var(--fs-ui); } .fe-stamp, .fe-row .fe-text .fe-stamp, .fe-row.is-flip .fe-text .fe-stamp { font-size: var(--fs-ui); } }
/* the section heading is a grid with an 18px row gap: margins compensate so the totals are the
   project page's 29px (label → title) and 24px (title → intro) */
.section-heading .section-index { margin-bottom: -2px; }
.section-heading h2 + p { margin-top: 6px; }
.update-page #result-table > div:first-child > .section-index { margin-bottom: 2px; }
.bento-intro { gap: 24px; }
.cs-head h2 + .cs-lede { color: color-mix(in srgb, var(--text) 82%, transparent); }
.update-page #result-table > div:first-child > .section-index { margin-bottom: 16px; }
.bento-top { padding-top: 28px; }  /* rule → label 33px like every other module */
/* Opus 03 intro centred under its centred title, like the other module intros */
.update-page .model-update-cases .case-lead, .update-page .model-update-cases .case-selection { max-width: 860px; margin-left: auto; margin-right: auto; text-align: center; font: var(--fw-text) var(--fs-body) / var(--lh-body) var(--font-body); color: color-mix(in srgb, var(--text) 82%, transparent); }
.update-page .model-update-cases .section-heading + .case-lead { margin-top: 24px; }
.update-page .model-update-cases .case-selection { margin-top: 10px; }
.fe-figure .af2-legend { gap: 12px; white-space: nowrap; }
.update-page .model-update-cases .section-heading + .case-lead { margin-top: -2px; }
.fe-figure .af2-legend { font-size: var(--fs-label); letter-spacing: 0.04em; }  /* legend = label tier (10px), fits one line */
.update-page .model-update-cases > .section-heading { margin-bottom: 0; }
.update-page .model-update-cases > .section-heading + .case-lead { margin-top: 24px; }
.fe-figure .af2-legend { white-space: normal; flex-wrap: wrap; row-gap: 4px; }  /* one line where it fits, wraps rather than overflowing */
/* Metric cells v3 (2026-10-17): one label line, value, baseline, bars or note, coverage at the
   foot; hairline between cells; rows line up across a card. */
.fe-figure .analysis-figure.af2 { column-gap: 0; align-items: stretch; }
.fe-figure .af2-item { display: grid; grid-template-rows: auto auto auto 1fr auto; padding: 0 18px; }
.fe-figure .af2-item:first-child { padding-left: 0; }
.fe-figure .af2-item:last-child { padding-right: 0; }
.fe-figure .af2-item + .af2-item { border-left: 1px solid var(--line); }
.fe-figure .af2-head { display: block; font: var(--fw-label) var(--fs-label) / 1.3 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-figure .af2-head span { color: var(--text-faint); }
.fe-figure .af2-value { margin-top: 10px; }
.fe-figure .af2-ref { margin-top: 6px; font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; }
.fe-figure .af2-extra { margin-top: 12px; align-self: start; }
.fe-figure .af2-extra:empty { margin-top: 0; }
.fe-figure .af2-extra .af2-bars { margin-top: 0; }
.fe-figure .af2-note { margin-top: 0; font-size: var(--fs-small); }
.fe-figure .af2-cov { margin-top: 14px; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--text) 14%, transparent); font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); letter-spacing: 0.06em; color: var(--text-faint); white-space: normal; line-height: 1.5; }
.fe-figure .af2-cov span { display: block; }
@media (max-width: 760px) {
  .fe-figure .af2-item, .fe-figure .af2-item:first-child, .fe-figure .af2-item:last-child { padding: 0; border-left: 0; }
  .fe-figure .analysis-figure.af2 { row-gap: 24px; column-gap: 20px; }
}
.fe-figure .af2-head { letter-spacing: 0.05em; }
.fe-figure .analysis-figure.af2:has(> .af2-item:nth-child(3)) .af2-ref { font-size: var(--fs-ui); }  /* three-metric cards: baseline line one step smaller, clear of the hairline */
/* rows shared across the cells of a card (subgrid), so a wrapped baseline line keeps the next
   rows level; numbers sized for the narrower cells (dividers + padding) */
.fe-figure .analysis-figure.af2 { grid-template-rows: auto auto auto 1fr auto; }
.fe-figure .af2-item { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
.fe-figure .af2-ref { white-space: normal; }
.fe-figure .af2-value, .fe-figure .analysis-figure.af2:has(> .af2-item:nth-child(3)) .af2-value { font-size: clamp(24px, calc(4.2cqi - 16px), 52px); }
@media (min-width: 761px) and (max-width: 1100px) { .fe-figure .af2-value, .fe-figure .analysis-figure.af2:has(> .af2-item:nth-child(3)) .af2-value { font-size: clamp(28px, calc(4.6cqi - 6px), 44px); } }
@media (max-width: 760px) { .fe-figure .af2-item { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; } .fe-figure .analysis-figure.af2 { grid-template-rows: none; } .fe-figure .af2-value { font-size: 28px; } }
.fe-figure .af2-head { white-space: normal; overflow: visible; text-overflow: clip; }
.fe-figure .af2-value, .fe-figure .analysis-figure.af2:has(> .af2-item:nth-child(3)) .af2-value { font-size: clamp(26px, calc(4.5cqi - 16px), 52px); }
@media (min-width: 761px) and (max-width: 1100px) { .fe-figure .af2-value, .fe-figure .analysis-figure.af2:has(> .af2-item:nth-child(3)) .af2-value { font-size: clamp(28px, calc(4.4cqi - 6px), 44px); } }  /* stacked tickets: data spans the ticket, numbers can be larger */

/* Keep every measured model report visible as the frontier batch fills in. */
.bento-report-stack { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--line); background: var(--bg); }
.bento-secondary-list { padding: 18px 24px; }
.bento-report-stack .bento-upcoming-list { flex: 0 0 auto; border-left: 0; }
.bento-report-stack .bento-upcoming.update-card { flex: none; padding: 20px 0; }
.bento-secondary-list + .bento-upcoming-list { border-top: 1px solid var(--line); }
.bento-secondary.update-card { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); }
.bento-secondary.update-card:last-child { padding-bottom: 0; border-bottom: 0; }
.bento-secondary.update-card:hover { border-color: var(--line); background: transparent; color: var(--accent); }
.bento-secondary .bento-up-main { align-items: center; }
.bento-secondary .bento-up-main strong { font: var(--fw-text) var(--fs-h3) / var(--lh-h3) var(--font-display); }
.bento-report-arrow { margin-left: auto; color: var(--accent); }
.bento-secondary .bento-report-date { white-space: normal; color: var(--text-faint); }
.bento-secondary.update-card p { margin: 0; font-size: var(--fs-small); color: var(--text-muted); }
.bento-secondary-metrics { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-small); color: var(--text-muted); }
.bento-secondary-metrics b { font: var(--fw-text) var(--fs-h3) / 1 var(--font-display); color: var(--text); }
.bento-secondary-read { align-self: flex-end; font: var(--fw-label) var(--fs-ui) / var(--lh-ui) var(--font-mono); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--accent); }
.bento-split .bento-name { white-space: normal; }

/* Same-video comparison for four flagship models: missing evidence stays neutral. */
#opus-case-explorer .cs-library { grid-template-columns: repeat(var(--case-columns, 5), minmax(0, 1fr)); }
#opus-case-explorer .cs-frontier-runs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.cs-frontier-runs .cs-run { display: flex; flex-direction: column; }
.cs-frontier-runs .cs-run-top { flex-wrap: wrap; gap: 10px 14px; }
.cs-frontier-runs .cs-run-name { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); }
.cs-frontier-runs .cs-outcome { margin-left: auto; white-space: nowrap; }
.cs-frontier-runs .cs-frame { height: auto; aspect-ratio: 16 / 10; }
.cs-frontier-runs .cs-frame video { cursor: auto; }
.cs-run.is-pending { background: color-mix(in srgb, var(--surface-soft) 45%, var(--bg)); box-shadow: inset 0 0 0 1px var(--line); }
.is-pending .cs-outcome { background: var(--surface); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--line); }
.cs-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 220px; aspect-ratio: 16 / 10; padding: 28px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; color: var(--text-muted); }
.cs-placeholder-title { font: var(--fw-text) var(--fs-h3) / var(--lh-h3) var(--font-display); }
.cs-placeholder p { max-width: 28em; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-faint); }
.cs-evidence-note { margin-top: 12px; font-size: var(--fs-small); color: var(--text-muted); }
.cs-playback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 18px 0 14px; }
.cs-playback > div { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-playback button { padding: 9px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text-muted); font-size: var(--fs-small); cursor: pointer; }
.cs-playback button:hover { background: var(--warm-tint); color: var(--text); }
.cs-playback button:disabled { opacity: .5; cursor: default; }
@media (max-width: 900px) {
  .bento-report-stack { border-left: 0; border-top: 1px solid var(--line); }
  .bento-secondary-list { padding: 22px 20px; }
}
@media (max-width: 760px) {
  #opus-case-explorer .cs-library { grid-template-columns: repeat(var(--case-columns, 5), minmax(108px, 1fr)); }
  #opus-case-explorer .cs-frontier-runs { grid-template-columns: minmax(0, 1fr); }
  .cs-placeholder { min-height: 180px; padding: 22px; }
}

/* Keep the model reports close to the top of the living leaderboard. */
.leaderboard-intro { padding-top: 28px; padding-bottom: 24px; }
.leaderboard-intro h1 { max-width: none; font: var(--fw-display) clamp(30px, 3.2vw, 46px) / 1.12 var(--font-display); letter-spacing: -0.025em; }
.leaderboard-intro .hero-description { max-width: 94ch; margin-top: 12px; font: var(--fw-text) var(--fs-body) / 1.55 var(--font-body); }
.leaderboard-intro-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 12px; }
.leaderboard-intro-links .text-link { color: var(--text-muted); }
body[data-page="home"] #updates.model-news-section { padding-top: 0; padding-bottom: 0; }
.model-news-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.model-news-heading h2 { font: var(--fw-text) var(--fs-h3) / 1.2 var(--font-display); letter-spacing: -0.01em; }
.model-news-heading .text-link { color: var(--text-muted); }
.model-news-list { overflow: hidden; border: 1px solid var(--line); border-left: 3px solid var(--accent-warm); border-radius: 6px; background: var(--surface); }
.model-news-row { display: grid; grid-template-columns: 112px minmax(170px, 220px) minmax(0, 1fr) 18px; align-items: center; gap: 18px; min-height: 68px; padding: 13px 18px; color: var(--text); }
.model-news-row + .model-news-row { border-top: 1px solid var(--line); }
.model-news-row:hover { background: color-mix(in srgb, var(--warm-tint) 28%, var(--surface)); }
.model-news-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.model-news-date { color: var(--text-muted); font: var(--fw-text) var(--fs-ui) / 1.45 var(--font-body); }
.model-news-date-label { display: block; margin-bottom: 2px; color: var(--text-faint); font-size: 10px; }
.model-news-name { font: var(--fw-text) 20px / 1.25 var(--font-display); }
.model-news-finding { min-width: 0; color: var(--text-muted); font: var(--fw-text) var(--fs-small) / 1.5 var(--font-body); }
.model-news-arrow { color: var(--accent); font-size: 19px; }
.model-news-loading { padding: 18px; color: var(--text-muted); font-size: var(--fs-small); }
.model-news-pending { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 10px; color: var(--text-muted); font-size: var(--fs-ui); line-height: 1.5; }
.model-news-pending:empty { display: none; }
.pending-model-item { display: inline-flex; align-items: center; gap: 10px; }
.pending-model-name { color: var(--text-muted); }
.pending-model-status { padding: 2px 8px; border: 1px solid var(--line); border-radius: 99px; color: var(--text-faint); font-size: 11px; }
body[data-page="home"] #leaderboard { padding-top: 32px; }
/* This entry point stays legible while other sections keep their scroll motion. */
body[data-page="home"] #updates [data-flow] { opacity: 1; filter: none; transform: none; will-change: auto; }
.news-nav-panel > .news-nav-report { padding: 8px 0; font-size: 19px; line-height: 1.35; }
.news-nav-panel > .news-nav-report + .news-nav-report { border-top: 1px solid var(--line); }
.news-nav-panel > .news-nav-report:hover { color: var(--accent); }
@media (max-width: 1050px) {
  .model-news-row { grid-template-columns: 102px minmax(150px, 190px) minmax(0, 1fr) 16px; gap: 14px; }
  .model-news-name { font-size: 18px; }
}
@media (max-width: 760px) {
  .leaderboard-intro { padding-top: 24px; padding-bottom: 24px; }
  .leaderboard-intro h1 { font-size: clamp(28px, 7vw, 36px); }
  .leaderboard-intro .hero-description { font-size: 15px; }
  .model-news-heading h2 { font-size: 21px; }
  .model-news-row { grid-template-columns: 84px minmax(0, 1fr) 16px; gap: 8px 12px; padding: 12px 14px; }
  .model-news-date { grid-column: 1; grid-row: 1; font-size: 11px; }
  .model-news-name { grid-column: 2; grid-row: 1; }
  .model-news-finding { grid-column: 1 / 3; grid-row: 2; font-size: 13px; }
  .model-news-arrow { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  body[data-page="home"] #leaderboard { padding-top: 28px; }
}

/* ===== Model news strip + brief dialog (2026-10-18) ===== */
.model-news-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.news-strip-nav { display: flex; align-items: center; gap: 10px; }
.news-strip-nav .text-link { margin-right: 10px; }
.news-strip-btn { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 16px; cursor: pointer; transition: border-color .2s, background .2s; }
.news-strip-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--warm-tint) 30%, var(--surface)); }
.news-strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 2.4); gap: 20px; margin-top: 22px; padding: 4px 2px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.news-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.news-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.news-card { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
a.news-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 16px 30px -22px rgba(60, 40, 25, .45); }
.nc-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--media-black); }
.nc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
a.news-card:hover .nc-cover img { transform: scale(1.03); }
.nc-rank { position: absolute; top: 14px; left: 14px; padding: 6px 11px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--text); font: var(--fw-label) var(--fs-ui) / 1 var(--font-mono); letter-spacing: var(--ls-ui); }
.nc-rank small { color: var(--text-faint); font-size: var(--fs-label); }
.nc-body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.nc-kicker { display: flex; justify-content: space-between; gap: 12px; font: var(--fw-label) var(--fs-label) / 1.3 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); }
.nc-kicker > :last-child { color: var(--text-faint); }
.nc-model { margin-top: 14px; font-size: var(--fs-small); color: var(--text-muted); }
.nc-headline { margin-top: 4px; font: var(--fw-text) var(--fs-h3) / var(--lh-h3) var(--font-display); letter-spacing: 0.01em; }
.nc-dek { margin-top: 10px; font-size: var(--fs-small); line-height: var(--lh-small); color: color-mix(in srgb, var(--text) 78%, transparent); }
.nc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.nc-stats span { display: flex; flex-direction: column; gap: 4px; }
.nc-stats b { font: var(--fw-text) var(--fs-h3) / 1 var(--font-display); font-weight: 400; }
.nc-stats small, .nb-stats small { font: var(--fw-label) var(--fs-label) / 1.2 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); }
.nc-cta { margin-top: auto; padding-top: 18px; font: var(--fw-label) var(--fs-ui) / 1 var(--font-mono); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--accent); }
.nc-cta i { font-style: normal; margin-left: 4px; }
.news-card.is-pending { background: color-mix(in srgb, var(--surface-soft) 40%, var(--bg)); border-style: dashed; }
.news-card.is-pending .nc-cover { display: grid; place-items: center; background: color-mix(in srgb, var(--surface-soft) 70%, var(--bg)); }
.nc-pending-mark { font: var(--fw-text) var(--fs-h2) / 1 var(--font-display); color: var(--text-faint); }
.news-card.is-pending .nc-headline { color: var(--text-muted); }

.news-brief { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 20px; background: var(--bg); color: var(--text); box-shadow: 0 40px 80px -30px rgba(40, 28, 20, .5); }
.news-brief::backdrop { background: rgba(35, 28, 23, .42); backdrop-filter: blur(3px); }
.news-brief-close { position: sticky; top: 14px; float: right; margin: 14px 14px 0 0; z-index: 3; }
#news-brief-content { padding: 36px 44px 30px; }
.nb-head { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 32px; align-items: center; }
.nb-cover { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; background: var(--media-black); }
.nb-head h2 { margin: 12px 0 0; font: var(--fw-display) var(--fs-h1) / var(--lh-h1) var(--font-display); letter-spacing: 0.02em; text-transform: none; text-align: left; }
.nb-head p { margin: 12px 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: color-mix(in srgb, var(--text) 82%, transparent); }
.nb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.nb-stats span { display: flex; flex-direction: column; gap: 4px; }
.nb-stats b { font: var(--fw-text) var(--fs-h2) / 1 var(--font-display); font-weight: 400; }
.nb-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nb-point { padding: 20px 22px 22px 0; }
.nb-point + .nb-point { padding-left: 22px; border-left: 1px solid var(--line); }
.nb-point span { font: var(--fw-label) var(--fs-label) / 1.3 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); }
.nb-point p { margin: 10px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }
.nb-block { margin-top: 34px; }
.nb-block h3 { margin: 0 0 14px; font: var(--fw-text) var(--fs-h3) / 1.2 var(--font-display); }
.nb-compare { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.nb-compare th { padding: 0 0 10px; font: var(--fw-label) var(--fs-label) / 1.3 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); text-align: right; border-bottom: 1px solid var(--text); }
.nb-compare th:first-child, .nb-compare td:first-child { text-align: left; }
.nb-compare th small { font-size: inherit; color: var(--accent); }
.nb-compare td { padding: 11px 0; text-align: right; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.nb-compare td b { color: var(--text); }
.nb-compare td.is-up b { color: var(--positive); }
.nb-compare td.is-down b { color: var(--negative); }
.nb-funnel { display: grid; gap: 14px; }
.nb-step { display: grid; grid-template-columns: 150px minmax(0, 1fr) 210px; align-items: center; gap: 18px; }
.nb-step-label { font: var(--fw-label) var(--fs-label) / 1.3 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); }
.nb-step-bars { display: grid; gap: 4px; }
.nb-step-bars i { display: block; height: 10px; border-radius: 5px; }
.nb-step-bars i.is-a { background: var(--warm-solid); }
.nb-step-bars i.is-b { height: 6px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--db-compare); }
.nb-step-val { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; }
.nb-step-val b { font: var(--fw-text) var(--fs-h3) / 1 var(--font-display); font-weight: 400; }
.nb-step-val small { font-size: var(--fs-ui); color: var(--text-faint); white-space: nowrap; }
.nb-block .af2-legend { display: flex; gap: 16px; margin-top: 12px; font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); letter-spacing: 0.04em; color: var(--text-faint); }
.nb-block .af2-legend span { display: inline-flex; align-items: center; gap: 6px; }
.nb-block .af2-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.nb-block .af2-legend .is-a::before { background: var(--warm-solid); }
.nb-block .af2-legend .is-b::before { background: var(--bg); box-shadow: inset 0 0 0 1px var(--db-compare); }
.nb-note { margin: -6px 0 14px; font-size: var(--fs-small); color: var(--text-muted); }
.nb-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: var(--fs-ui); cursor: pointer; }
.nb-tabs button.active { border-color: var(--text); background: var(--text); color: var(--bg); }
.nb-tabs i { font-style: normal; font-size: var(--fs-ui); }
.nb-tabs i.ok { color: var(--positive); } .nb-tabs i.no { color: var(--negative); }
.nb-tabs button.active i { color: inherit; }
.nb-case { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.nb-clip { padding: 10px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.nb-clip.is-win { box-shadow: inset 0 0 0 1.5px var(--positive); background: color-mix(in srgb, var(--positive-soft) 55%, var(--bg)); }
.nb-clip.is-loss { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--negative) 50%, transparent); background: color-mix(in srgb, var(--negative-soft) 40%, var(--bg)); }
.nb-clip-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: var(--fs-small); }
.nb-clip-top em { font: var(--fw-label) var(--fs-label) / 1.4 var(--font-mono); font-style: normal; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); }
.is-win .nb-verdict { color: var(--positive); } .is-loss .nb-verdict { color: var(--negative); }
.nb-clip video { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 8px; background: var(--media-black); display: block; }
.nb-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-ui); color: var(--text-faint); }
@media (max-width: 900px) {
  .news-strip { grid-auto-columns: 82%; }
  .news-feed { grid-template-columns: minmax(0, 1fr); }
  #news-brief-content { padding: 26px 20px 22px; }
  .nb-head, .nb-points, .nb-case { grid-template-columns: minmax(0, 1fr); }
  .nb-point, .nb-point + .nb-point { padding: 16px 0; border-left: 0; }
  .nb-point + .nb-point { border-top: 1px solid var(--line); }
  .nb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-step { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .nb-step-val { justify-content: flex-start; }
  .news-strip-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) { .news-card, .nc-cover img { transition: none; } a.news-card:hover { transform: none; } }
.news-strip { grid-auto-columns: calc((100% - 40px) / 2.6); }
.nc-cover { aspect-ratio: 2 / 1; }
.nb-head > div { padding-right: 40px; }
.news-brief-close { margin: 16px 16px 0 0; }
@media (max-width: 900px) { .news-strip { grid-auto-columns: 82%; } .nb-head > div { padding-right: 0; } }
.news-strip { grid-auto-columns: calc((100% - 60px) / 3.2); }  /* three cards and a peek fit one screen */
/* Gliding strip (2026-10-18): no snap or scrollbar while it glides, soft fades at both edges;
   hover dims the other cards; the card under the pointer tilts slightly with a sheen. */
.news-strip.is-gliding { scroll-snap-type: none; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); cursor: grab; perspective: 1400px; }
.news-strip.is-gliding::-webkit-scrollbar { display: none; }
.news-strip.is-dragging { cursor: grabbing; user-select: none; }
.news-strip.is-dragging .news-card { pointer-events: none; }
.news-strip .news-card { transform: translateY(0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s, opacity .35s, filter .35s; will-change: transform; }
.news-strip a.news-card:hover { transform: translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition-duration: .18s, .35s, .35s, .35s, .35s; box-shadow: 0 26px 40px -26px rgba(60, 40, 25, .55); }
.news-strip:hover .news-card:not(:hover) { opacity: .72; filter: saturate(.8); }
.news-strip a.news-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 252, 245, .38), transparent 55%); }
.news-strip a.news-card:hover::after { opacity: 1; }
.news-card { position: relative; }
.news-strip a.news-card .nc-cta i { display: inline-block; transition: transform .3s; }
.news-strip a.news-card:hover .nc-cta i { transform: translateX(4px); }
.news-strip a.news-card[data-detail="brief"]:hover .nc-cta i { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .news-strip .news-card { transition: none; transform: none !important; } .news-strip:hover .news-card:not(:hover) { opacity: 1; filter: none; } }
a.news-card:hover, a.news-card:focus-visible { color: var(--text); }  /* keep card text colours; the generic link hover colour does not apply */
.news-strip a.news-card::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 252, 245, .16), transparent 60%); mix-blend-mode: soft-light; }

/* ===== Model News: headline ticker and compact model-logo cards ===== */
.model-news-section .model-news-heading { display: none; }
.nh-masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 12px 0; border-top: 2px solid var(--text); border-bottom: 1px solid var(--line); }
.nh-mast-label { font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); }
.nh-masthead h2 { margin: 0; font: var(--fw-text) var(--fs-h2) / 1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.nh-masthead .text-link { justify-self: end; }
.nh-ticker { display: flex; align-items: stretch; min-width: 0; margin-top: 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow: hidden; }
.nh-ticker-tag { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 9px 16px; background: var(--text); color: var(--bg); font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; }
.nh-ticker-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e0796a; animation: nh-blink 1.6s ease-in-out infinite; }
@keyframes nh-blink { 50% { opacity: .25; } }
.nh-ticker-track { position: relative; flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.nh-ticker-move { display: flex; width: max-content; animation: nh-ticker 46s linear infinite; }
.nh-ticker:hover .nh-ticker-move, .news-home:focus-within .nh-ticker-move { animation-play-state: paused; }
@keyframes nh-ticker { to { transform: translateX(-50%); } }
.nh-ticker-set { display: flex; align-items: center; white-space: nowrap; }
.nh-tick { padding: 9px 0; font-size: var(--fs-small); color: var(--text-muted); }
.nh-tick b { margin-right: 6px; font-weight: 600; color: var(--text); }
.nh-tick em { margin-left: 6px; font-style: normal; color: var(--accent); }
.nh-dot { margin: 0 22px; font-size: 8px; font-style: normal; color: var(--line); }
.news-home { min-width: 0; max-width: 100%; }
.nh-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.nh-list li { display: flex; min-width: 0; }
.nh-item { display: flex; flex: 1; min-width: 0; flex-direction: column; padding: 22px 18px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; transition: background .2s, border-color .2s; }
a.nh-item:hover, a.nh-item:focus-visible { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--warm-tint) 10%, var(--surface)); }
a.nh-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.nh-story-brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 20px; }
.nh-model-logo { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; }
.nh-model-logo img { display: block; width: 34px; height: 34px; object-fit: contain; }
.nh-story-identity { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.nh-item-kicker { font-size: 12px; line-height: 1.35; font-weight: 600; color: var(--text); }
.nh-story-identity time, .nh-story-identity > span:last-child:not(.nh-item-kicker) { font: var(--fw-label) 10px / 1.3 var(--font-mono); color: var(--text-faint); }
.nh-item-rank { align-self: flex-start; font: var(--fw-label) 11px / 1.4 var(--font-mono); color: var(--accent); }
.nh-item > strong { font: var(--fw-text) 21px / 1.3 var(--font-display); letter-spacing: .01em; }
.nh-item-dek { flex: 1; margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.nh-item .nc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.nh-item .nc-stats span { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nh-item .nc-stats b { font: var(--fw-text) 21px / 1 var(--font-display); font-variant-numeric: tabular-nums; }
.nh-item .nc-stats small { font: var(--fw-label) 8px / 1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.nh-item-cta { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin-top: 18px; font-size: 12px; font-weight: 600; color: var(--accent); }
.nh-item-cta i { font-style: normal; }
.nh-item.is-pending { background: color-mix(in srgb, var(--surface-soft) 35%, var(--bg)); border-style: dashed; }
.nh-pending-label { align-self: flex-start; margin-top: 20px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--text-faint); }
#updates.model-news-section { padding-bottom: clamp(40px, 5vw, 64px); }
@media (max-width: 1100px) { .nh-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .nh-masthead { grid-template-columns: 1fr auto; } .nh-mast-label { display: none; } .nh-masthead h2 { text-align: left; }
  .nh-list { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
  .nh-item { padding: 18px; } .nh-story-brand { margin-bottom: 12px; }
  .nh-item > strong { font-size: 20px; } .nh-item-dek { display: none; }
  .nh-item .nc-stats { margin-top: 14px; } .nh-item .nc-stats small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .nh-ticker-move, .nh-ticker-tag::before { animation: none; } .nh-item { transition: none; } }
/* Intro: description beside the title, centred on the title line; links stay under the title */
@media (min-width: 901px) {
  .leaderboard-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); align-items: center; }
  .leaderboard-intro h1 { grid-column: 1; grid-row: 1; white-space: nowrap; }
  .leaderboard-intro .hero-description { grid-column: 2; grid-row: 1; max-width: 62ch; margin-top: 0; padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid var(--line); }
  .leaderboard-intro-links { grid-column: 1; grid-row: 2; }
}
.nh-ticker-track { min-width: 0; } .news-home, .nh-ticker, .nh-grid { min-width: 0; max-width: 100%; }
@media (max-width: 900px) { .nh-grid { grid-template-columns: minmax(0, 1fr); } }
/* links join the description column; larger title */
@media (min-width: 901px) {
  .leaderboard-intro { grid-template-rows: auto auto; row-gap: 10px; }
  .leaderboard-intro h1 { grid-row: 1 / span 2; font-size: clamp(40px, 4.2vw, 60px); }
  .leaderboard-intro .hero-description { align-self: end; }
  .leaderboard-intro-links { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid var(--line); }
  .leaderboard-intro .hero-description { padding-bottom: 0; }
}
@media (min-width: 901px) { .leaderboard-intro { row-gap: 0; } .leaderboard-intro-links { padding-top: 12px; } }  /* one continuous rule beside text and links */
@media (min-width: 901px) { .leaderboard-intro { padding-top: 18px; padding-bottom: 16px; } }
/* 02 opening rule fixed to the section (not to its scroll-animated content), so the space above
   it stays the same however long the results list above becomes */
#cases { position: relative; }
#cases .cs-head { border-top: 0; padding-top: 33px; }
#cases::before { content: ""; position: absolute; left: 0; right: 0; top: var(--space-section); height: 1px; background: var(--line); }

/* ===== Score composition (2026-10-18) ===== */
/* tile strip: F / G / D as three thin bars */
#rank-podium .tile-mix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 8px; }
#rank-podium .tile-mix > span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px; }
#rank-podium .tile-mix em { font: var(--fw-label) var(--fs-micro) / 1 var(--font-mono); font-style: normal; opacity: .7; }
#rank-podium .tile-mix i { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, currentColor 16%, transparent); overflow: hidden; }
#rank-podium .tile-mix b { display: block; height: 100%; border-radius: 2px; background: currentColor; opacity: .75; }
#rank-podium .tile-lead .tile-mix { max-width: 420px; gap: 14px; margin-top: 14px; }
#rank-podium .tile-lead .tile-mix i { height: 6px; }
#rank-podium .tile-lead .tile-mix em { font-size: var(--fs-label); }

/* grouped composition bars */
.mix-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mix-key { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: var(--fs-ui); color: var(--text); cursor: default; transition: opacity .25s; }
.mix-key small { font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); color: var(--text-faint); }
.mix-key i, .mix-row i::before { --c: color-mix(in srgb, var(--warm-solid) calc(100% - var(--k) * 24%), var(--surface-soft)); }
.mix-key i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.mix-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.mix-group { display: grid; gap: 7px; align-content: start; }
.mix-label { margin-bottom: 4px; font: var(--fw-label) var(--fs-label) / 1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); }
.mix-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 10px; transition: opacity .25s; }
.mix-row i { position: relative; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--surface-soft) 70%, transparent); overflow: hidden; }
.mix-row i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--c); transition: width .9s cubic-bezier(.2, .7, .2, 1) calc(var(--k) * 80ms); }
.is-drawn .mix-row i::before { width: var(--w); }
.mix-row b { font: var(--fw-text) var(--fs-small) / 1 var(--font-body); font-variant-numeric: tabular-nums; text-align: right; color: var(--text-muted); }
.mix-row:first-of-type b, .mix-row[style*="--k:0"] b { color: var(--text); font-weight: 600; }
.is-dim { opacity: .28; }
@media (max-width: 760px) { .mix-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

@media (prefers-reduced-motion: reduce) { .mix-row i::before { transition: none; } }
/* Opus page blocks */
.update-page #result-table .rt-block { margin-top: clamp(40px, 4.4vw, 56px); padding-top: 28px; border-top: 1px solid var(--line); text-align: left; }
.update-page #result-table .rt-block p { text-align: left; }
/* 02 four-model comparison: all four rollouts in one row on wide screens, square frames
   (the renders are square), so the whole case reads without scrolling through it */
@media (min-width: 1200px) {
  #cases .cs-frontier-runs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  #cases .cs-frontier-runs .cs-frame { aspect-ratio: 1 / 1; height: auto; }
}
@media (min-width: 761px) and (max-width: 1199px) {
  #cases .cs-frontier-runs .cs-frame { aspect-ratio: 4 / 3; height: auto; }
}
/* Home first screen (2026-10-19): more air around the title and the news; the news section
   fills the rest of the screen so the next section starts below the fold. */
@media (min-width: 901px) {
  .leaderboard-intro { padding-top: 36px; padding-bottom: 32px; }
  #updates.model-news-section { min-height: calc(100svh - var(--nav-height) - var(--intro-h, 200px)); padding-bottom: 48px; box-sizing: border-box; }
  #updates .nh-masthead { padding: 14px 0 13px; }
  #updates .nh-ticker { margin-top: 18px; }
  #updates .news-home > :not(.nh-ticker) { margin-top: 30px; }
  #updates + #leaderboard { padding-top: var(--space-section); }
}
@media (min-width: 901px) {
  #updates.model-news-section { min-height: 0; padding-bottom: calc(40px + var(--first-pad, 0px)); }
  .leaderboard-intro { padding-top: calc(28px + var(--first-pad, 0px)); }
}
@media (min-width: 901px) { body[data-page="home"] main > section#updates.model-news-section { padding-bottom: calc(40px + var(--first-pad, 0px)); } }
/* Model News with more breathing room (2026-10-19): roomier masthead, ticker and cards,
   wider gutters; small type raised to the token scale */
@media (min-width: 901px) {
  #updates .nh-masthead { padding: 20px 0 18px; }
  #updates .nh-ticker { margin-top: 26px; }
  #updates .news-home > :not(.nh-ticker) { margin-top: 36px; }
  #updates .nh-list { gap: 24px; }
  #updates .nh-item { padding: 30px 28px 26px; border-radius: 16px; }
  #updates .nh-story-brand { margin-bottom: 26px; }
  #updates .nh-item > strong { font-size: var(--fs-h3); line-height: 1.25; }
  #updates .nh-item-dek { margin-top: 14px; font-size: var(--fs-small); line-height: 1.65; }
  #updates .nh-item .nc-stats { margin-top: 26px; padding-top: 18px; gap: 12px; }
  #updates .nh-item .nc-stats small { font-size: var(--fs-label); }
  #updates .nh-item-cta { margin-top: 20px; }
}
@media (min-width: 901px) { #updates .nh-item .nc-stats small { font-size: var(--fs-micro); letter-spacing: .04em; white-space: nowrap; } }
#updates .nh-masthead { grid-template-columns: 1fr; justify-items: center; }
@media (max-width: 900px) { #updates .nh-masthead { grid-template-columns: 1fr; } #updates .nh-masthead h2 { text-align: center; } }
/* Model News, quieter (2026-10-19): one hairline above the title like every other section
   (no heavy black rule, no second rule below), and a light ticker without the black tag. */
#updates .nh-masthead { border-top: 1px solid var(--line); border-bottom: 0; padding: 30px 0 4px; }
#updates .nh-ticker { background: transparent; border-color: color-mix(in srgb, var(--line) 80%, transparent); }
#updates .nh-ticker-tag { background: transparent; color: var(--accent); border-right: 1px solid var(--line); }
/* LATEST tag: a soft brown chip in the site palette */
#updates .nh-ticker-tag { background: var(--warm-tint); color: var(--warm-ink); border-right: 0; }
#updates .nh-ticker-tag::before { background: var(--warm-solid); }
/* responsive pass (2026-10-19): news card numbers fit on mid-width desktops; no type below 9px */
.nh-item .nc-stats small { font-size: var(--fs-micro); }
.nh-dot { font-size: 9px; }
@media (min-width: 901px) and (max-width: 1399px) {
  #updates .nh-item { padding: 24px 20px 22px; }
  #updates .nh-item .nc-stats { gap: 8px; }
  #updates .nh-item .nc-stats b { font-size: clamp(16px, 1.45vw, 21px); }
  #updates .nh-item .nc-stats small { letter-spacing: .02em; }
}