/* 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; }

/* 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: 11.5px; line-height: 1.6; color: var(--ink); }
.prose .post-figure figcaption code { font-family: var(--font-mono); color: var(--cyan); font-weight: 600; }
.prose .post-figure .stamp__header { margin-bottom: var(--sp-4); }
.prose .svg-embed { max-width: 640px; margin: 0 auto; }
.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 */

/* the rose as a post figure: on the paper, no plate, spanning the column as a half fan */
/* the rose keeps the plate but not its side padding: the drawing takes the column's full width */
.prose .post-figure.rose-figure { margin: var(--sp-6) 0 var(--sp-9); }
.prose .post-figure.rose-figure.rose-figure.rose-figure.rose-figure.rose-figure { padding-left: 0; padding-right: 0; }   /* outweighs the plate rule's four :not()s */
.prose .post-figure.rose-figure .rose svg { width: 90%; height: auto; margin: 0 auto; }   /* a little under the column, by eye */
.prose .post-figure.rose-figure .stamp__header { padding: 0 var(--sp-6); }
.prose .post-figure.rose-figure figcaption { margin-top: var(--sp-3); padding: 0 var(--sp-6); font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--ink); }



/* 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; } }