/* Article pages: shell, header, prose, figures, references, signature row. */

:root {
  --font-sans: 'Geist', -apple-system, 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-wordmark: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --paper: #FCFBF7;
  --ink: #0A0A0A;
  --cyan: #0099C9;
  --cyan-press: #0085AF;
  --orange: #E56300;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* site header */
.site-header {
  max-width: 750px; margin: 0 auto; padding: 22px 20px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.site-header .wordmark {
  font-family: var(--font-wordmark); font-weight: 700; font-size: 2.5rem;
  line-height: 1; color: var(--ink); text-decoration: none;
}
/* wordmark mark */

.site-header nav { display: flex; gap: 20px; }
.site-header nav a {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; line-height: 18px;
}
.site-header nav a:hover, .site-header nav a[aria-current="page"]:hover { color: var(--cyan); }

/* article shell */
.article { max-width: 750px; margin: 0 auto; padding: 44px 20px 0; }
.eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 16px;
}
.eyebrow .chip {
  /* eyebrow chip */
  display: inline-block; padding: 9px 18px; margin-right: 12px;
  background: var(--cyan); color: var(--paper); border: 0;
  font-size: 11px; letter-spacing: 0.12em; line-height: 1;
}
h1 {
  font-family: var(--font-sans); font-size: 2.1rem; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); margin: 0 0 16px;
}

h1 code, .authors code, p code, li code, .toc code {
  font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0.02em; color: inherit;
}
.authors { font-size: 13px; line-height: 1.7; color: var(--ink); margin: 0 0 6px; }
.authors .sym { font-size: 9px; color: var(--ink); vertical-align: super; }
.affils {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink); margin-bottom: 30px;
}
.affils .sym { font-size: 9px; vertical-align: super; }

h2 {
  font-family: var(--font-sans); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.015em; color: var(--ink); margin: 3rem 0 0.875rem;
}
h2 .kick {
  display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px;
}
p { margin: 0 0 1.4em; }
em { font-style: italic; }
strong { font-weight: 600; color: var(--ink); }
a { color: var(--cyan); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--cyan-press); }
.math { font-family: STIXGeneral, 'Cambria Math', Georgia, serif; font-style: normal; }
.math em { font-style: italic; }
ol.updates { padding-left: 1.3em; margin: 0 0 1.4em; }
ol.updates li { margin-bottom: 1em; }
ul.facts { padding-left: 1.3em; margin: 0 0 1.4em; }
ul.facts li { margin-bottom: 0.5em; }

/* sidenotes */
.sn-ref {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
  color: var(--ink); vertical-align: super; line-height: 1; margin-left: 1px;
}
.sidenote {
  float: right; clear: right; width: 250px; margin-right: -282px;
  font-size: 12px; line-height: 1.45; color: var(--ink);
  margin-top: 0.3rem; margin-bottom: 0.5rem;
}
.sidenote .sn-num {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
  color: var(--ink); margin-right: 3px; vertical-align: super;
}
@media (max-width: 1340px) { .sidenote { display: none; } }

/* citations */
.cite {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
  color: var(--cyan); vertical-align: super; text-decoration: none; margin-left: 1px;
}
.cite:hover { color: var(--cyan-press); }

/* table of contents */
.toc {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 32px;
  margin: 34px 0 10px;
}
.toc a {
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink);
  text-decoration: none;
}
.toc a:hover { color: var(--cyan); }
.toc .n {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--ink); margin-right: 9px;
}

/* figures: cyan block with the chart, header and caption inside */
figure.viz { margin: 36px 0; }
.stamp { background: var(--cyan); padding: 18px 22px 16px; }
.stamp__header {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper); margin-bottom: 14px;
}
.stamp__caption {
  margin-top: 14px; font-family: var(--font-mono); font-size: 11px;
  line-height: 1.6; color: var(--paper);
}
.stamp svg { width: 100%; height: auto; display: block; }
.stamp svg text { font-family: var(--font-mono); letter-spacing: 0.04em; }
.stamp .placeholder {
  border: 2px dashed var(--paper);
  min-height: 320px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px;
}
.stamp .placeholder .t1 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper);
}
.stamp .placeholder .t2 { font-family: var(--font-mono); font-size: 10px; color: var(--paper); }

/* truncation divider */
.trunc {
  text-align: center; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.5em; color: var(--ink); margin: 44px 0;
}
.trunc-note {
  text-align: center; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  margin: -34px 0 44px;
}

/* references */
.refs { margin: 0 0 30px; }
.refs .ref { display: flex; gap: 12px; font-size: 12.5px; line-height: 1.55; color: var(--ink); margin-bottom: 9px; }
.refs .ref .rn {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--ink); flex-shrink: 0; padding-top: 2px;
}
.refs .ref i { font-style: normal; font-weight: 500; }

/* cite-as block */
.cite-as {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
  color: var(--paper); background: var(--cyan); padding: 16px 18px;
  margin-bottom: 40px;
}
.cite-as .lbl {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 6px;
}

/* end-square on the last paragraph */
.prose-end::after {
  content: ''; display: inline-block; width: 0.55em; height: 0.55em;
  background: var(--cyan); margin-left: 0.35em; vertical-align: baseline;
  position: relative; top: -0.05em;
}

/* bar-chip */
.readmore { display: flex; align-items: center; margin: 0 0 44px; text-decoration: none; }
.readmore .bar-label {
  display: inline-block; padding: 9px 18px;
  background: var(--cyan); color: var(--paper);
  border: 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
}
.readmore .bar-line { flex: 1; height: 1.5px; background: var(--cyan); }
.readmore:hover .bar-label { background: var(--cyan-press); }

/* signature row */
.brand-row {
  max-width: 750px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 0 20px 26px;
}
.brand-row .logo {
  font-family: var(--font-wordmark); font-weight: 700; font-size: 2.5rem;
  line-height: 1; color: var(--ink); text-decoration: none;
}
.brand-row nav { display: flex; align-items: baseline; gap: 20px; }
.brand-row nav a.txt {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; line-height: 1;
}
.brand-row nav a.txt:hover { color: var(--cyan); }
.brand-row nav a.ico { display: inline-flex; align-items: baseline; color: var(--ink); }
.brand-row nav a.ico svg { display: block; position: relative; top: 3px; }
.brand-row nav a.ico:hover { color: var(--cyan); }
.brand-row nav svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  h1 { font-size: 1.6rem; }
  .toc { grid-template-columns: 1fr; }
  .site-header, .brand-row { flex-direction: column; align-items: flex-start; }
  .stamp { padding: 14px 14px 12px; margin-left: -20px; margin-right: -20px; }
}

h3 {
  font-family: var(--font-sans); font-size: 1.15rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink); margin: 2rem 0 0.75rem;
}
h4 {
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700;
  color: var(--ink); margin: 1.5rem 0 0.5rem;
}
.eqn { text-align: center; margin: 1.3em 0; font-size: 1.05em; }
ol.env { padding-left: 1.3em; margin: 0 0 1.4em; }
ol.env li { margin-bottom: 0.9em; }
.embed-frame { max-width: 640px; margin: 0 auto; border: 2.5px solid var(--paper); }
.embed-frame__bar {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 10px; font-family: var(--font-mono); font-size: 9.5px;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper); border-bottom: 2.5px solid var(--paper);
}
.embed-frame iframe {
  display: block; width: 100%; height: 460px; border: 0; background: var(--paper);
}
.stamp__caption a.stamp__link { color: var(--paper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.author-list p { margin-bottom: 0.9em; }
.star-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; }

/* plotly containers inside a figure block */
.stamp .plotly-container { display: block; overflow: visible; }
.stamp .plotly-container g.annotation rect.bg,
.stamp .plotly-container .legend > rect.bg { filter: none; }

/* explorer inside a figure block */
.stamp .explorer--figure { background: var(--paper); border: 2.5px solid var(--paper); padding: 10px 12px 12px; }
.stamp .explorer--figure .graph-hint { display: none; }

.brand-row--links { justify-content: flex-end; padding-top: 8px; }

/* wordmark lockup: mark on the baseline at the cap height of the T */
.site-header .wordmark, .brand-row .logo { display: inline-flex; align-items: baseline; letter-spacing: -0.01em; }
.site-header .wordmark .qed, .brand-row .logo .qed { display: block; height: 0.745em; width: 0.745em; margin-left: 0.09em; flex-shrink: 0; }