/* Sidenotes — margin notes on wide screens, plain bottom-footnotes otherwise (see shared/sidenotes.js).
   Degrades fully: with JS off, none of the .has-sidenotes class is applied, so the bottom <section
   data-footnotes> shows as a normal footnotes list. */

/* The article column must be a positioning context so absolute sidenotes anchor to it. */
.prose { position: relative; }

/* Constrain article images to the text column — never wider than the article (static pages + both
   SPA article contexts all use .prose, and this file is loaded in all of them). */
.prose img { max-width: 100%; height: auto; }

/* Figures — centered image with a caption below (loaded in every .prose context). The caption is
   also where a visible credit line goes: wrap it in <cite> for the muted, italicised source. */
.prose figure { margin: 1.8rem 0; text-align: center; }
.prose figure img { display: block; margin: 0 auto; }
.prose figure figcaption {
  margin-top: 0.6rem;
  font-family: var(--font-body, inherit);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--fg2, #666);
}
.prose figure figcaption cite { font-style: italic; }

/* Footnote reference markers (marked-footnote: <sup><a data-footnote-ref>). */
.prose a[data-footnote-ref] {
  text-decoration: none;
  font-variant-numeric: normal;
  padding: 0 0.1em;
  color: var(--accent, #2563eb);
  font-weight: 600;
}
.prose a[data-footnote-ref]:hover { text-decoration: underline; }

/* Floated margin sidenote. */
.prose aside.sidenote {
  position: absolute;
  left: 100%;
  width: 240px;
  margin-left: 2rem;
  font-family: var(--font-body, inherit);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--fg2, #555);
}
/* Left-margin column: mirror to the left of the text, hugging the column edge (gwern-style). */
.prose aside.sidenote--left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 2rem;
  text-align: right;
}
.prose aside.sidenote p { margin: 0 0 0.5em; }
.prose aside.sidenote p:last-child { margin-bottom: 0; }
.prose aside.sidenote .sidenote-num {
  color: var(--accent, #2563eb);
  font-weight: 700;
  font-variant-numeric: normal;
}
.prose aside.sidenote a { color: var(--accent, #2563eb); }

/* When sidenotes are active, hide the bottom footnotes list (it's been mirrored into the margin). */
.prose.has-sidenotes section[data-footnotes] { display: none; }

/* Bottom footnotes list (shown when narrow / no-JS) — keep it tidy. */
.prose section[data-footnotes] {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, rgba(127, 127, 127, 0.25));
  font-size: 0.9rem;
}
.prose section[data-footnotes] .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .prose aside.sidenote { transition: none; }
}