/* Blog posts: styles for the markup Hugo and the shortcodes emit. */

/* author line and the authors section (lf-lean) */
.article .authors-line { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0 0 var(--sp-2); }
.article .authors-line--solo { margin-bottom: var(--sp-8); }
.article .authors-line .sym { font-size: 10px; color: var(--ink); vertical-align: super; }
.article .authors-line--list { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
.article .authors-line--list .author { white-space: nowrap; }
.article .paper-affiliations { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink); margin-bottom: var(--sp-8); display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
.article .paper-affiliation__sym { font-size: 10px; vertical-align: super; margin-right: 2px; }
.article .equal-contribution-note { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; margin: -24px 0 var(--sp-8); }
.article .equal-contribution-note .sym { font-size: 10px; vertical-align: super; }
.article .equal-contribution-note--solo { margin-top: 0; }   /* straight under a plain author line, which keeps its own small gap */

/* abstract from the front matter; even 30px steps from header to first paragraph */
.article .abstract { font-weight: 600; font-size: 15.5px; line-height: 1.55; margin: 0 0 var(--sp-8); max-width: 62ch; }
.article .abstract code { font-family: var(--font-mono); font-size: 0.92em; }
.article > .viz { margin: 0 0 var(--sp-8); }
.article > .toc { margin: 0 0 var(--sp-8); }
.prose > :first-child { margin-top: 0; }
/* body type: 17px/1.7, text and figures share the full column */
.prose { font-size: 17px; line-height: 1.7; }
.prose p { margin: 0 0 var(--sp-4); }
.article h1 { font-size: 50px; line-height: 55px; }
.prose h2 { font-size: 36px; line-height: 45px; margin: var(--sp-8) 0 var(--sp-3); }
/* an appendix opens under a rule, apart from the body of the post (Hugo ids the heading from its text) */
.prose h2[id^="appendix"] { border-top: 1.5px solid var(--ink); padding-top: var(--sp-8); margin-top: var(--sp-12); }
@media (max-width: 640px) { .article h1 { font-size: 36px; line-height: 40px; } .prose h2, .references-heading { font-size: 28px; line-height: 34px; } }

/* table of contents */
.toc #TableOfContents > ul { display: grid; grid-template-columns: 1fr; gap: var(--sp-2) var(--sp-8); margin: 0; padding: 0; list-style: none; }
.toc #TableOfContents li { margin: 0; padding: 0; }
.toc #TableOfContents ul ul { display: none; }
.toc #TableOfContents a code { font-size: 0.92em; }
.toc a[aria-current] { color: var(--accent); }
@media (max-width: 640px) { .toc #TableOfContents > ul { grid-template-columns: 1fr; } .article > .toc { border-left: 3px solid var(--accent); padding-left: var(--sp-4); } }   /* on phones the list carries an accent bar, so it reads as the contents rather than the opening lines */

/* section nav beside the column */
.sidenav { display: none; }
@media (min-width: 1360px) {
  .sidenav { display: block; position: fixed; top: 112px; left: calc(50% - 420px - 235px); width: 205px; }
  .article > .toc { display: none; }
  .sidenav ul { list-style: none; margin: 0; padding: 0; }
  .sidenav li { margin: 0 0 var(--sp-2); }
  .sidenav ul ul { display: none; }
  .sidenav a { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none; }
  .sidenav a:hover, .sidenav a[aria-current] { color: var(--accent); }
  .sidenav a code { font-family: var(--font-mono); font-size: 0.92em; }
}

/* prose */
.prose h2 code, .prose h3 code { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0.02em; }
.prose ol, .prose ul { padding-left: 1.3em; margin: 0 0 var(--sp-5); }
.prose li { margin-bottom: var(--sp-2); }
.prose blockquote { margin: 0 0 var(--sp-5); padding-left: var(--sp-4); border-left: 3px solid var(--cyan); }
.prose pre { margin: 0 0 var(--sp-5); padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; }
.prose pre code { background: transparent; padding: 0; }
.prose code { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0.02em; color: inherit; background: transparent; }
.prose hr { border: 0; height: 0; margin: var(--sp-9) 0; }
.prose table { border-collapse: collapse; margin: 0 0 var(--sp-5); font-size: 13.5px; }
.prose th, .prose td { text-align: left; padding: var(--sp-2) var(--sp-3); border: 0; }
.prose th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--cyan); color: var(--paper); }
.prose img { max-width: 100%; height: auto; }
/* displayed formulas sit in a ground box like the other text boxes (a trial, 2026-09-22) */
.prose .katex-display { margin: var(--sp-5) 0; background: var(--ground); padding: var(--sp-4) var(--sp-5); }
.prose aside.prose-callout { margin: var(--sp-6) 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-5); border-left: 4px solid var(--cyan); }
.prose aside.prose-callout p { font-size: 14px; }
.prose aside.prose-callout .post-figure { margin: var(--sp-5) 0; }

/* sidenotes float beside the column on wide screens */
.prose .sidenote {
  float: right; clear: right; width: 250px; margin-right: -282px;
  font-size: 14px; line-height: 1.5; color: var(--ink);
  margin-top: var(--sp-1); margin-bottom: var(--sp-2);
}
.prose .sidenote-number { font-family: var(--font-mono); font-size: 0.7em; font-weight: 600; color: var(--cyan); vertical-align: super; line-height: 1; margin-left: 1px; cursor: default; }
.prose .sidenote-toggle-input { display: none; }
.prose .sidenote .sidenote-num { font-family: var(--font-mono); font-size: 0.75em; font-weight: 600; color: var(--cyan); margin-right: 3px; vertical-align: super; }
@media (max-width: 1440px) {
  .prose .sidenote { display: none; }
  /* tap the superscript to expand the note inline (checkbox toggle from the shortcode) */
  .prose .sidenote-toggle-input:checked + .sidenote {
    display: block; float: none; clear: none; width: auto;
    margin: var(--sp-2) 0 var(--sp-3); padding: var(--sp-3) var(--sp-4);
    background: var(--ground); font-size: 14px; line-height: 1.55;
  }
  .prose .sidenote-number { cursor: pointer; }
  /* the checkbox stays in the tab order (hidden off-canvas, not display: none), so a keyboard opens the note too; its focus shows on the number */
  .prose .sidenote-toggle-input { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }   /* spacing-exempt: the visually-hidden pattern */
  .prose .sidenote-number:has(+ .sidenote-toggle-input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
}

/* citations and footnotes */
.prose .citation-ref { font-family: var(--font-mono); font-size: 0.7em; font-weight: 600; vertical-align: super; margin-left: 1px; }
.prose .citation-ref a { text-decoration: none; }
.prose .citation-ref + .citation-ref { margin-left: 2px; }
.prose .footnotes { margin-top: var(--sp-10); font-size: 14px; }
.prose .footnotes hr { display: none; }
.prose .footnotes ol { padding-left: 1.4em; }
.prose .footnotes li { margin-bottom: var(--sp-2); }
.prose .footnotes .footnote-backref { font-family: var(--font-mono); text-decoration: none; margin-left: var(--sp-1); }
.prose sup a, .prose .footnote-ref { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; color: var(--cyan); text-decoration: none; }

/* figures written as <figure class="post-figure"> in Markdown */
.prose .post-figure { margin: var(--sp-9) 0; }
.prose .post-figure:not(.plotly-figure):not(.explorer-figure):not(.roadmap-figure):not(.nix-figure) { background: var(--ground); padding: var(--sp-4) var(--sp-6) var(--sp-4); }
.prose .post-figure:not(.plotly-figure):not(.explorer-figure):not(.roadmap-figure):not(.nix-figure) figcaption { margin-top: var(--sp-4); font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--ink); }
.prose .post-figure figcaption code { font-family: var(--font-mono); color: var(--cyan); font-weight: 600; }
/* a numbered figure's FIG. N · TITLE line sits at the bottom, just before the caption; a title with
   no number stays on top as a heading, and an empty one takes no room (2026-09-29). The templates
   mark a numbered line stamp__header--fig; the figure and its block reorder as a column. */
.prose .post-figure .stamp__header { margin-bottom: var(--sp-4); }
.prose .post-figure .stamp__header:empty { display: none; }
.prose .post-figure, .prose .post-figure .stamp { display: flex; flex-direction: column; }
.prose .post-figure :is(.svg-embed, .plotly-container) { width: 100%; }   /* centred with auto margins, a column item shrinks to its content: diagrams fell to 300px and charts, empty until drawn, to 0 */
.prose .post-figure .stamp__header--fig { order: 1; margin: var(--sp-5) 0 0; }
.prose .post-figure .stamp__caption, .prose .post-figure figcaption { order: 2; }
.prose .post-figure .stamp__header--fig ~ .stamp__caption, .prose .post-figure .stamp__header--fig ~ figcaption { margin-top: var(--sp-2); }
.prose .svg-embed { max-width: 700px; margin: 0 auto; }   /* the diagrams are drawn 700 units wide: at 700px a unit is a pixel, so their 10-12 unit labels read at 10-12px (at 640px they fell under the spec's 10px) */
/* a diagram with a phone drawing (rawsvg narrow=): the wide one above 640px, the phone one at and under */
.prose .svg-embed--phone { display: none; }
@media (max-width: 640px) { .prose .svg-embed--desktop { display: none; } .prose .svg-embed--phone { display: block; } }
.prose .svg-embed svg { width: 100%; height: auto; display: block; }
.prose .post-figure .plotly-container { margin: 0 auto; }
.prose .post-figure pre { border: 0; margin: 0; font-size: 12px; }
.prose .post-figure .highlight { margin: 0; }
.prose .post-figure pre, .prose .post-figure .highlight, .prose .post-figure .chroma { background: transparent !important; }
.article .plotly-error { font-family: var(--font-mono); font-size: 11px; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 640px) { .prose .post-figure:not(.plotly-figure):not(.explorer-figure):not(.roadmap-figure):not(.nix-figure) { padding: var(--sp-4) var(--sp-4) var(--sp-3); margin-left: -20px; margin-right: -20px; } }

/* code blocks: colours over the chroma classes */
.prose .highlight, .prose .highlight pre, .prose pre, .prose .chroma { background: var(--paper) !important; color: var(--ink) !important; }
.prose .highlight span, .prose .chroma span, .prose pre span { color: var(--ink); background: transparent !important; font-style: normal; }
.prose .chroma .k, .prose .chroma .kd, .prose .chroma .kn, .prose .chroma .kp,
.prose .chroma .kr, .prose .chroma .kt,
.prose .chroma .nd, .prose .chroma .nt { color: var(--cyan); font-weight: 600; }
.prose .chroma .s, .prose .chroma .s1, .prose .chroma .s2, .prose .chroma .sb,
.prose .chroma .sc, .prose .chroma .sd, .prose .chroma .se, .prose .chroma .sh,
.prose .chroma .si, .prose .chroma .sx, .prose .chroma .sr, .prose .chroma .ss { color: var(--green); }
.prose .chroma .m, .prose .chroma .mi, .prose .chroma .mf, .prose .chroma .mh,
.prose .chroma .mo, .prose .chroma .mb, .prose .chroma .il, .prose .chroma .l,
.prose .chroma .kc { color: var(--accent); }
.prose .chroma .c, .prose .chroma .c1, .prose .chroma .cm, .prose .chroma .ch,
.prose .chroma .cp, .prose .chroma .cpf, .prose .chroma .cs { color: var(--ink); font-style: italic; }
.prose .chroma .nf, .prose .chroma .fm { font-weight: 600; }

/* references */
.references-block { margin: var(--sp-10) 0 var(--sp-8); }
.references-heading { font-family: var(--font-sans); font-size: 36px; line-height: 45px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 var(--sp-3); }
.references-list { list-style: none; margin: 0; padding: 0; }
.references-list li { display: flex; gap: var(--sp-3); font-size: 15px; line-height: 1.55; color: var(--ink); margin-bottom: var(--sp-2); }
.references-list__marker { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--cyan); flex-shrink: 0; padding-top: 2px; }
.references-venue { font-style: normal; }

/* cite-as box */
.cite-as-block { margin: 0 0 var(--sp-9); }
.cite-as-box { font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: var(--ink); background: var(--ground); padding: var(--sp-4) var(--sp-5); }
.cite-as-box::before { content: 'Cite as'; display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); margin-bottom: var(--sp-2); }
.cite-as-box p { margin: 0; }
.cite-as-bibtex { margin: var(--sp-2) 0 0; padding: var(--sp-4) var(--sp-5); background: var(--ground); font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }   /* the BibTeX under the citation, same ground; long author lines wrap */

/* Nothing in a post scrolls the page sideways. Display math and code scroll inside their own
   box when they must, with the thin ink scrollbar the explorer uses. */
.katex-display { overflow-x: auto; overflow-y: hidden; padding-bottom: var(--sp-1); }
.prose pre, .prose .highlight pre { overflow-x: auto; }
.prose .katex-display, .prose pre { scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.prose .katex-display::-webkit-scrollbar, .prose pre::-webkit-scrollbar { width: 8px; height: 8px; }
.prose .katex-display::-webkit-scrollbar-track, .prose pre::-webkit-scrollbar-track { background: transparent; }
.prose .katex-display::-webkit-scrollbar-thumb, .prose pre::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 0; }
.prose .katex-display::-webkit-scrollbar-thumb:hover, .prose pre::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* arriving at an appendix anchor from the home page's asterisk: the paragraph is blocked out in
   the ground blue and fades to the paper in a moment, so the eye lands on it */
.prose p > span[id] { scroll-margin-top: var(--sp-12); }
.prose p:has(> span:target) { animation: land 2.4s ease-out both; }
@keyframes land { 0% { background: var(--ground); box-shadow: 0 0 0 var(--sp-3) var(--ground); } 40% { background: var(--ground); box-shadow: 0 0 0 var(--sp-3) var(--ground); } 100% { background: transparent; box-shadow: 0 0 0 var(--sp-3) transparent; } }
@media (prefers-reduced-motion: reduce) { .prose p:has(> span:target) { animation: none; background: var(--ground); box-shadow: 0 0 0 var(--sp-3) var(--ground); } }

/* a hover card: the link is a link; hovering (or focusing) it shows a picture in a ground box
   under the word. Phones have no hover, so there the tap is just the link. */
.prose .hovercard { position: relative; }
.prose .hovercard__card {
  display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); z-index: 6;
  margin-top: var(--sp-2); padding: var(--sp-3); background: var(--ground); border: 2px solid var(--ink);
  width: max-content; max-width: min(320px, calc(100vw - 32px));   /* spacing-exempt: inside the page's gutters */
}
.prose .hovercard__card img { display: block; width: 100%; height: auto; }
@media (hover: hover) { .prose .hovercard:hover .hovercard__card, .prose .hovercard:focus-visible .hovercard__card { display: block; } }

/* Figs. 1 and 2 of the Nix post (nixshared, nixatlas) sit on the page, not on a ground plate
   (2026-09-29): the plate's pale blue boxed in figures whose own tiles are that blue. The figure
   takes the text column's width, on phones too. */
.prose .post-figure.nix-shared .stamp, .prose .post-figure.nix-atlas .stamp { background: none; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
.prose .post-figure.nix-atlas .stamp > .stamp__header, .prose .post-figure.nix-atlas .stamp > .stamp__caption, .prose .post-figure.nix-atlas .stamp .nix-inline { padding-left: 0; padding-right: 0; }
@media (max-width: 640px) { .prose .post-figure.nix-shared .ns-flow--stack { width: 100%; margin: 0; } }   /* no plate to bleed to */