/*
 * 06-prose.css — Rendered Typst content
 * ───────────────────────────────────────
 * Everything a Typst page produces lands in <div class="prose">: blog posts,
 * project pages and the About page. Headings, paragraphs, lists, tables, code,
 * maths and footnotes are styled here. Building blocks (figures, videos,
 * comparison sliders, …) live in 07-blocks.css.
 */

/* ══ Prose ═══════════════════════════════════════════════════════════════════ */
/*
 * All markdown output is wrapped in <div class="prose">.
 * Selectors are scoped so they don't bleed into nav/footer.
 */

.prose {
  font-size:   var(--text-md);
  line-height: 1.75;
  color:       var(--color-text);
}

/* ── Headings ── */
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-family:    var(--font-display);
  font-weight:    400;
  line-height:    1.2;
  letter-spacing: -0.015em;
  color:          var(--color-text);
  margin-top:     1.8em;
  margin-bottom:  0.5em;
}
.prose h1 { font-size: var(--text-2xl); }
.prose h2 { font-size: var(--text-xl); border-bottom: 1px solid var(--color-border); padding-bottom: 0.3em; }
.prose h3 { font-size: var(--text-lg); }
.prose h4 { font-size: var(--text-md); font-weight: 500; }

/* ── Paragraphs ── */
.prose p { margin-bottom: 1.25em; }

/* ── Links ── */
.prose a { text-decoration-thickness: 1px; }

/* ── Lists ── */
.prose ul,
.prose ol {
  margin-bottom: 1.25em;
  padding-left:  1.5em;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.4em; }
.prose li > p { margin-bottom: 0.4em; }

/* ── Blockquote ── */
.prose blockquote {
  margin:        1.5em 0;
  padding:       var(--sp-4) var(--sp-6);
  border-left:   4px solid var(--color-accent);
  background:    var(--color-bg-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color:         var(--color-text-muted);
  font-style:    italic;
}
.prose blockquote p { margin: 0; }

/* ── Horizontal rule ── */
.prose hr {
  border: none;
  border-top: 1px solid var(--color-border-strong);
  margin-block: 2.5em;
}

/* ── Inline code ── */
.prose code:not([class]) {
  font-family:    var(--font-mono);
  font-size:      0.875em;
  background:     var(--color-bg-subtle);
  color:          var(--color-accent);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-sm);
  padding:        0.15em 0.4em;
}

/* ── Code block (fenced) ──
 * Typst highlights code at build time with inline colours tuned for a light
 * background, so code blocks sit on the subtle warm grey. */
.prose pre {
  background:    var(--color-bg-subtle);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--sp-5) var(--sp-6);
  overflow-x:    auto;
  margin-block:  1.5em;
  font-size:     var(--text-sm);
  line-height:   1.6;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
.prose pre code {
  background:  none !important;
  border:      none !important;
  padding:     0 !important;
  color:       var(--color-text);
  font-family: var(--font-mono);
  font-size:   inherit;
}

/* Dark mode: Typst's highlighter writes light-theme colours inline; remap its
 * four colours to lighter versions of the same hues. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prose pre span[style*="#d73948"] { color: #ff8091 !important; }
  :root:not([data-theme="light"]) .prose pre span[style*="#4b69c6"] { color: #8fb0ff !important; }
  :root:not([data-theme="light"]) .prose pre span[style*="#b60157"] { color: #f07ab8 !important; }
  :root:not([data-theme="light"]) .prose pre span[style*="#74747c"] { color: #8e8e96 !important; }
}
:root[data-theme="dark"] .prose pre span[style*="#d73948"] { color: #ff8091 !important; }
:root[data-theme="dark"] .prose pre span[style*="#4b69c6"] { color: #8fb0ff !important; }
:root[data-theme="dark"] .prose pre span[style*="#b60157"] { color: #f07ab8 !important; }
:root[data-theme="dark"] .prose pre span[style*="#74747c"] { color: #8e8e96 !important; }

/* ── Math (MathML from Typst) ──
 * Name a real OpenType math font (macOS, Windows, TeX installs) so brackets
 * stretch, and undo the reset/prose spacing that squashes matrix rows. */
.prose math {
  font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", math;
  line-height: normal;
}
.prose mtd { padding: 0.5ex 0.4em; }   /* browser default, removed by 01-reset */
.prose math[display="block"] {
  margin-block: 1.25em;
  font-size:    1.1em;
  overflow-x:   auto;
  overflow-y:   hidden;
}

/* ── Tables ── */
.prose table {
  width:           100%;
  border-collapse: collapse;
  margin-block:    1.5em;
  font-size:       var(--text-base);
}
.prose thead {
  background:  var(--color-bg-subtle);
  border-bottom: 2px solid var(--color-border-strong);
}
.prose th {
  padding:        var(--sp-3) var(--sp-4);
  text-align:     left;
  font-weight:    600;
  font-size:      var(--text-sm);
  letter-spacing: 0.03em;
  color:          var(--color-text-muted);
}
.prose td {
  padding:     var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.prose tr:last-child td { border-bottom: none; }
.prose tr:hover td { background: var(--color-bg-subtle); }

/* ── Footnotes ── */
.prose [role="doc-endnotes"] {
  margin-top:  var(--sp-12);
  padding-top: var(--sp-4);
  border-top:  1px solid var(--color-border);
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
}
.prose [role="doc-endnotes"] ol { padding-left: 0; }

/* ── Images inline ── */
.prose img {
  border-radius: var(--radius-md);
  margin-block:  1em;
}