/* Long-form blog posts, layered over style.css and style-classic.css. */
.blog-page .header-tools{justify-content:space-between;align-items:center;gap:16px}
.blog-back{color:var(--accent);font-size:14px;text-decoration:underline;text-underline-offset:4px}
.blog-back:hover{text-decoration-thickness:2px}
.blog-kicker{margin:0 0 14px;color:var(--accent)}
.blog-page .paper-authors{max-width:860px;margin-left:auto;margin-right:auto}

.blog{max-width:1100px}
.blog a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.blog a:hover{text-decoration-thickness:2px}
.blog-prose{max-width:760px;margin:0 auto}
.blog-prose p{font-size:17px;line-height:1.8;margin:0 0 20px}
.blog-prose h4{font-size:17px;font-weight:600;margin:32px 0 10px}

/* Numbered section headings match the main page; long-form text stays left-aligned. */
.blog>section{max-width:1100px;margin:0 auto;padding-top:56px}
.blog>section>h2{max-width:760px;margin:0 auto 22px;font-size:clamp(26px,3vw,34px);font-weight:650;line-height:1.2;letter-spacing:-.025em}
.blog>section>h3{max-width:760px;margin:44px auto 14px;font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.015em}

.blog-tldr{max-width:860px;margin:0 auto 44px;padding:22px 26px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:var(--soft)}
.blog-tldr .eyebrow{color:var(--accent);margin-bottom:6px}
.blog-tldr>p:not(.eyebrow) strong{font-weight:650}
.blog-tldr>p:not(.eyebrow){margin:0;font-size:17px;line-height:1.75}
.blog-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 0}
.blog-stats>div{padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.blog-stats dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.blog-stats dd{margin:2px 0 0;font-size:15px}
.blog-stats dd strong{font-size:24px;font-weight:650;color:var(--bio);margin-right:4px}

.blog-toc{max-width:760px;margin:8px auto 0;padding:18px 22px;border:1px solid var(--line);border-radius:10px}
.blog-toc .eyebrow{margin-bottom:6px}
.blog-toc ol{margin:0;padding-left:22px;font-size:15px;line-height:1.9}
.blog-toc ol ol{list-style:lower-alpha;font-size:14px;line-height:1.7}
.blog-toc a{text-decoration:none}
.blog-toc a:hover{text-decoration:underline}

.blog-figure{margin:28px auto 8px}
.blog-figure-narrow{max-width:860px}
.blog-figure .results-figure-heading h4{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:4px 0 0}
.blog-image{border-radius:8px;overflow:hidden}
.blog-image img{display:block;width:100%;height:auto}
.blog-image-wide{overflow-x:auto}
.blog-image-wide img{min-width:640px}
/* The supplied figures are raster images on white; keep them on a light card in dark mode. */
[data-theme=dark] .blog-image{background:#fff;padding:10px}
.results-figure figcaption.blog-caption{display:block}
.blog-caption p{font-size:13px}
.blog-caption .key{font-weight:600}
.key-best{color:#1f4fd1}.key-tied{color:#6b7280}.key-worse{color:#c62828}
[data-theme=dark] .key-best{color:#9eb8ff}[data-theme=dark] .key-tied{color:#b4bccb}[data-theme=dark] .key-worse{color:#ff8a80}

.blog-table{margin-top:0}
.blog-counts td,.blog-counts th{font-variant-numeric:tabular-nums}
.blog .model-bio{color:var(--bio);font-weight:600}
.blog .model-aj{color:var(--accent);font-weight:600}
.blog-mae-block{margin-top:22px}
.blog-mae-block .results-table-scroll{margin-top:0}
.blog-mae td{font-variant-numeric:tabular-nums}
.blog-mae td.best{font-weight:700}
.blog-mae td.best::after,.blog-mae td.tied::after,.tied-label{display:inline-block;margin-left:6px;padding:0 5px;border-radius:3px;font:10px/1.6 var(--mono);letter-spacing:.04em;vertical-align:1px}
.blog-mae td.best::after{content:"best";background:var(--accent);color:var(--paper)}
.blog-mae td.tied::after,.tied-label{content:"tied";background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.blog-params{white-space:normal}
.blog-params td{text-align:left}
.blog-params th[scope=row]{width:42%;font-weight:500}

/* Bundled OpenType math font, so formulas render the same in every browser and OS. */
@font-face{font-family:"STIX Two Math";src:local("STIX Two Math"),local("STIXTwoMath-Regular"),url("../vendor/STIXTwoMath-Regular.woff2") format("woff2");font-display:swap}
math{font-family:"STIX Two Math",math;font-size:1.05em}
/* Never override display on <math>: Chrome lays out MathML only with its default display (block math). */
.blog-eq{margin:18px 0 24px;overflow-x:auto;overflow-y:hidden;padding:4px 0}
.blog-eq math{font-size:1.15em}
h3 math{font-size:.95em}

.blog-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.blog .blog-cta a{display:inline-flex;align-items:center;padding:8px 16px;border-radius:24px;background:var(--ink);color:var(--paper);font-size:14px;text-decoration:none}
.blog .blog-cta a:hover{background:var(--accent)}

.blog-references{max-width:760px;margin:0 auto;padding-left:26px;font-size:14px;line-height:1.7;color:var(--muted)}
.blog-references li{margin-bottom:8px;padding-left:4px}
.blog-references strong{color:var(--ink);font-weight:600}
.blog-references li:target{background:var(--soft);border-radius:4px}

@media(max-width:650px){
  .blog-prose p{font-size:16px}
  .blog>section{padding-top:40px}
  .blog-tldr{padding:16px 16px}
  .blog-stats{grid-template-columns:1fr}
  .blog-page .header-tools{flex-wrap:wrap}
  .blog-eq math{font-size:1em}
}
.blog-params th[scope=col]{text-align:left}
/* Let model names wrap so the full MAE tables fit without horizontal scrolling. */
.blog-mae thead th{white-space:normal;vertical-align:bottom;line-height:1.35}
.blog-mae thead th:not(:first-child){min-width:9.5em}
.blog-mae th,.blog-mae td{padding:8px 8px}

/* Baseline descriptions: wrapped prose cells, left-aligned. */
.results-table-scroll table.blog-baselines{white-space:normal;width:100%}
.blog-baselines td,.blog-baselines th{text-align:left;vertical-align:top;line-height:1.6}
.blog-baselines th[scope=row]{white-space:nowrap;font-weight:600}
.blog-baselines td:nth-child(2){min-width:16em;width:46%}
.blog-baselines td:nth-child(3){min-width:13em;width:32%;color:var(--muted)}
.blog-baselines .blog-group-start>*{border-top:2px solid var(--line)}