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

/* author line and the authors section (lf-lean) */
.article .authors-line { font-size: 13px; line-height: 1.7; 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 .paper-affiliations { font-family: var(--font-mono); font-size: 10.5px; 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: 10.5px; 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; }

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

/* 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; }
.prose .katex-display { margin: var(--sp-5) 0; }
.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: 12px; line-height: 1.45; color: var(--ink);
  margin-top: var(--sp-1); margin-bottom: var(--sp-2);
}
.prose .sidenote-number { font-family: var(--font-mono); font-size: 0.625rem; 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.625rem; 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: 12.5px; line-height: 1.5;
  }
  .prose .sidenote-number { cursor: pointer; }
}

/* citations and footnotes */
.prose .citation-ref { font-family: var(--font-mono); font-size: 0.625rem; 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: 12.5px; }
.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) { background: var(--ground); border: 0.6px solid var(--ink); padding: var(--sp-4) var(--sp-6) var(--sp-4); }
.prose .post-figure:not(.plotly-figure):not(.explorer-figure):not(.roadmap-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) { 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: 1.5rem; 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: 12.5px; line-height: 1.55; color: var(--ink); margin-bottom: var(--sp-2); }
.references-list__marker { font-family: var(--font-mono); font-size: 10.5px; 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: 11px; 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; }