/* Research articles (blog/<slug>/). Load after site.css and light.css, which give the black
   header and footer and the light reading area. */
.article-page{font:400 17px/1.75 var(--display);-webkit-font-smoothing:antialiased}
.article-page main{--good:#111113;--bad:#c27c0e;--bad-soft:#fdf3dc}
.article-page main a{color:var(--text);border-bottom:1px solid rgba(17,17,19,.3);transition:border-color .2s}
.article-page main a:hover{border-color:var(--text)}
.article-page b,.article-page strong{font-weight:600;color:var(--text)}
.article-page code{font:400 .87em var(--mono);color:var(--text)}
.article-page .nav a{white-space:nowrap}
/* the header keeps the site’s nav font; only the reading area switches to the display face */
.article-page .nav{font:400 15px/1.6 var(--mono)}
.article-page .eyebrow.back{border:0;color:var(--muted);margin-bottom:28px}
.article-page .eyebrow.back:hover{color:var(--text)}
.article-page .eyebrow .dot{color:var(--dim)}

/* one width for the whole post: title, text, figures, tables and captions share the same column */
.title{max-width:1120px;margin:0 auto;padding:0 24px 28px}
.partners{display:flex;align-items:center;gap:22px;margin:0 0 30px}
.partners .td{height:44px;width:auto;filter:invert(1)}
.partners .nv{height:44px;width:auto}
.partners .sep{width:1px;height:40px;background:var(--line-hi)}
.title h1{font:700 clamp(34px,5.2vw,56px)/1.06 var(--display);letter-spacing:-.03em;color:var(--text);margin:0 0 18px;text-wrap:balance}
.title p{font-size:clamp(17px,1.8vw,20px);line-height:1.55;color:var(--muted)}
/* author byline: one quiet line under the subtitle */
.title p.byline{margin-top:14px;font-size:14px;line-height:1.6;color:var(--dim)}

article{max-width:1120px;margin:0 auto;padding:16px 24px 72px;border-top:1px solid var(--rule)}
article > p, article li{margin:0 0 20px}
article ul{margin:0 0 20px;padding-left:1.3em}
article li{margin-bottom:10px}
article > p:first-of-type{margin-top:32px}
article h2{margin:64px 0 22px;padding-bottom:14px;border-bottom:1px solid var(--rule);font:700 clamp(26px,3.2vw,34px)/1.2 var(--display);letter-spacing:-.02em;color:var(--text)}
article h3{margin:40px 0 14px;font:600 clamp(19px,2vw,22px)/1.35 var(--display);letter-spacing:-.01em;color:var(--text)}
article h2,article h3{scroll-margin-top:84px}
figure{margin:36px 0}
figure img{display:block;width:100%;height:auto}
figure > img,.crop-frame{background:#fff;border-radius:12px;padding:12px;border:1px solid var(--rule)}
/* Crops the bottom of a PNG; the aspect-ratio is the image width over the height to keep.
   The white frame sits on .crop-frame, outside the crop, so the cut lands exactly at that height. */
.crop{overflow:hidden}
figcaption{margin:14px 0 0;font:400 12.5px/1.65 var(--mono);color:var(--muted)}
figcaption b{color:var(--text);font-weight:500}
.math{margin:24px 0;overflow-x:auto;overflow-y:hidden;color:var(--text)}
.katex{font-size:1.06em}
.note{margin:28px 0;padding:18px 22px;background:var(--soft);border:1px solid var(--rule);border-radius:12px;font-size:15.5px}
.note p{margin:0 0 10px}.note p:last-child{margin:0}
.note .math{margin:12px 0}

.table-wrap{overflow-x:auto;margin:32px 0 10px;border:1px solid var(--rule);border-radius:12px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font:400 13px/1.5 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
th,td{padding:10px 14px;text-align:right;border-bottom:1px solid var(--line-soft);white-space:nowrap}
th{font-weight:500;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--rule);background:var(--soft)}
th:first-child,td:first-child,td:nth-child(2),th:nth-child(2){text-align:left}
tbody tr:last-child td{border-bottom:0}
td.ours{color:#fff;font-weight:500;background:#111113}
th.ours{color:#fff;background:#111113}
tr.avg td{border-top:1px solid var(--rule);font-weight:500;color:var(--text)}
tr.avg td.ours{color:#fff}

.post-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.post-links a{border:1px solid var(--line-hi);border-radius:999px;padding:8px 16px;font:500 13px var(--mono);letter-spacing:.02em}
.article-page main .post-links a:hover{background:#111113;color:#fff;border-color:#111113}
/* the primary action in a link row, e.g. trying the released model */
.article-page main .post-links a.try{background:#111113;color:#fff;border-color:#111113}
.article-page main .post-links a.try:hover{background:#2b2b2f;border-color:#2b2b2f}
.post-cta + .post-links{margin-top:24px}
@media (max-width:720px){
  .article-page{font-size:16px}
  .title{padding:0 16px 20px}
  .partners{gap:16px}.partners .td{height:36px}.partners .nv{height:36px}.partners .sep{height:32px}
  article{padding:8px 16px 56px}
}