/* The look every blog post shares. Post pages load this after site.css and before the post's own stylesheet.
   The build reads the tokens declared here and refuses a post stylesheet that redefines them. */

/* Overrides the site's smooth scrolling: on a page this long the animation delays every jump, and browsers offer no way to shorten it. */
html { scroll-behavior:auto; }

.ap-article {
  --bg:var(--paper); --panel:#fff; --band:var(--tag); --lit:#e7e7e1;
  --muted:#62645d; --line:#d9dad3; --edge:#787a72; --mark:#b4b7b0;
  --sans:Arial,"PingFang SC",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"PingFang SC",monospace;
  font:400 15.5px/1.8 var(--sans);
}

/* Page layout: title block, contents, then the article. */
.ap-article-page { max-width:1064px; margin:0 auto; padding:56px 32px 120px; display:grid; grid-template-columns:minmax(0,1fr); gap:28px; }
.ap-article-head { display:grid; gap:18px; }
.ap-article-body { display:grid; gap:72px; }
.ap-article-body > * { min-width:0; }
.ap-article .ap-byline { margin:0; font-size:14px; }
.ap-article .ap-byline b { font-weight:600; }
.ap-article .ap-source-note { margin:-8px 0 0; font-size:13px; color:var(--muted); }
.ap-article .ap-article-back { margin:48px 0 0; }
.ap-article .ap-article-back a { text-decoration:none; }

/* Contents: a block under the title on narrower windows, fixed beside the article on wide ones. */
.ap-article .ap-toc-title { margin:0 0 10px; font-size:11px; letter-spacing:2px; color:var(--muted); }
.ap-toc ol { list-style:none; margin:0; padding:0; columns:2; column-gap:16px; }
.ap-toc li { break-inside:avoid; }
.ap-article .ap-toc a { display:block; padding:5px 0 5px 12px; font-size:13px; line-height:1.45; color:var(--muted); text-decoration:none; border-left:2px solid var(--line); }
.ap-article .ap-toc a:hover { color:var(--ink); }
.ap-article .ap-toc a[aria-current=true] { color:var(--ink); border-left-color:var(--ink); }
.ap-article .ap-toc a:focus-visible { outline-offset:-2px; }

@media(min-width:1280px) {
  .ap-article-page { max-width:none; grid-template-columns:190px minmax(0,1120px); grid-template-rows:auto 1fr; gap:24px 48px; justify-content:center; }
  /* 942px keeps the widest figure (940px plus its border) from scrolling; 64px less than the track leaves whitespace on the right. */
  .ap-article-head, .ap-article-col { grid-column:2; width:max(942px,min(1000px,calc(100% - 64px))); }
  .ap-article-head { grid-row:1; }
  .ap-article-col { grid-row:2; }
  .ap-toc { grid-column:1; grid-row:1 / span 2; position:sticky; top:108px; align-self:start; max-height:calc(100svh - 124px); overflow-y:auto; }
  .ap-toc ol { columns:auto; }
}
@media(max-width:700px) {
  .ap-article-page { padding:32px 20px 80px; }
}

/* Text */
.ap-article section { display:grid; gap:18px; scroll-margin-top:96px; }
.ap-article section > * { min-width:0; }
.ap-article h1, .ap-article h2 { font-family:var(--sans); text-wrap:balance; margin:0; }
.ap-article h1 { font-weight:500; font-size:clamp(32px,3.8vw,48px); line-height:1.1; letter-spacing:-1.6px; }
.ap-article h2 { font-weight:500; font-size:clamp(21px,2vw,26px); line-height:1.3; letter-spacing:-.6px; }
.ap-article h3 { font:600 17px/1.4 var(--sans); margin:14px 0 0; }
.ap-article p { margin:0; max-width:46em; }
.ap-article .lead { font-weight:500; font-size:clamp(17px,1.6vw,20px); line-height:1.55; letter-spacing:-.3px; max-width:32em; }
.ap-article a { color:inherit; text-decoration:underline; text-decoration-color:var(--edge); text-underline-offset:3px; }
.ap-article a:hover { text-decoration-color:currentColor; }
.ap-article :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ap-article code, .ap-article .mono { font-family:var(--mono); font-size:.9em; }
.ap-article .sec { font:500 .62em/1 var(--mono); color:var(--muted); margin-right:.5em; vertical-align:.12em; }
.ap-article .note { color:var(--muted); font-size:14px; }
.ap-article ul.plain { margin:0; padding-left:1.15em; display:grid; gap:8px; max-width:50em; }

/* Figures */
.ap-article .scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ap-article .fig { margin:0; display:grid; gap:12px; }
.ap-article .ground { background:var(--panel); border:1px solid var(--line); border-radius:5px; }
.ap-article figcaption { font-size:14px; line-height:1.7; color:var(--muted); max-width:60em; }
.ap-article svg { display:block; width:100%; height:auto; }
.ap-article svg text { font-family:var(--sans); fill:var(--ink); }

/* Tables */
.ap-article table { border-collapse:collapse; width:100%; font-size:14px; line-height:1.65; }
.ap-article th { font:500 12px/1.4 var(--mono); color:var(--muted); text-align:left; padding:8px 12px; border-bottom:1px solid var(--edge); white-space:nowrap; }
.ap-article td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.ap-article td:first-child { font-weight:500; }
.ap-article tbody tr:last-child td { border-bottom:0; }
.ap-article .num { font-variant-numeric:tabular-nums; }
.ap-article td.num, .ap-article th.num { text-align:right; white-space:nowrap; font-family:var(--mono); font-size:13px; }
.ap-article .src { font:400 12px/1.7 var(--mono); white-space:nowrap; }
.ap-article .wide { min-width:760px; }
.ap-article .mid { min-width:560px; }

/* Sources */
.ap-article .foot { font-size:13.5px; line-height:1.8; color:var(--muted); display:grid; gap:8px; border-top:1px solid var(--line); padding-top:18px; scroll-margin-top:96px; }
.ap-article .foot ul { margin:0; padding-left:1.15em; }