/* Base styles — shared chrome (nav, footer, layout, callouts, code).
   Loaded by all pages regardless of page-style. */

@font-face {
  font-family: "et-book";
  src: url("../fonts/et-book/et-book-roman-line-figures.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "et-book";
  src: url("../fonts/et-book/et-book-display-italic-old-style-figures.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "et-book";
  src: url("../fonts/et-book/et-book-bold-line-figures.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --s-bg: #fffffc;
  --s-surface: #f6f8fa;
  --s-card: #fff;
  --s-card-hover: #f0efe8;
  --s-text: #111;
  --s-text-dim: #777;
  --s-accent: #467;
  --s-accent-warm: #611;
  --s-accent-dim: rgba(68, 102, 119, 0.12);
  --s-border: #ddd;
  --s-header-open: #f5f3eb;
  --s-code-bg: #fbf5e6;
  --s-radius: 4px;
  --s-body: et-book, Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
  --s-mono: Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
  --s-sans: 'Gill Sans', 'Gill Sans MT', Calibri, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--s-bg);
}

/* ── Site header / navigation ───────────────────────── */

.site-header {
  border-top: 5px solid #424242;
  border-bottom: none;
  padding: 0;
  position: relative;
  overflow: visible;
}
.site-header .wrapper {
  max-width: none;
  padding: 0 30px;
  display: block;
  overflow: visible;
  min-height: 35.1px;
  line-height: 35.1px;
  border-bottom: 0.5px solid #d5d5d5;
}
.site-title {
  font-family: 'Linux Biolinum Outline';
  font-size: 49.5px;
  letter-spacing: -3px;
  color: #828282;
  line-height: 35.1px;
  margin-bottom: 0;
  white-space: nowrap;
  float: left;
  text-decoration: none;
}
.site-title:hover {
  color: #424242;
}
/* Three forms of the title, cycled through via media queries below.
   ≥500px: full, <500px: short, <350px: xs. */
.site-title .site-title-full { display: inline; }
.site-title .site-title-short { display: none; }
.site-title .site-title-xs { display: none; }
.site-nav {
  font-family: 'Linux Libertine', 'Computer Modern Concrete', Times, serif;
  font-size: 1.5rem;
  line-height: 35.1px;
  float: right;
  display: block;
}
.site-nav .trigger { white-space: nowrap; padding-top: 8px; }
.site-nav .page-link {
  color: #999;
  text-decoration: none;
}
.site-nav .page-link:not(:last-child) {
  margin-right: 20px;
}
.site-nav .page-link:hover {
  color: #424242;
}
.site-nav .page-link.active {
  color: var(--s-accent-warm);
}

/* Tighten nav padding at narrow widths (matches sidenote-collapse). */
@media (max-width: 800px) {
  .site-header .wrapper {
    padding: 0 15px;
  }
}

/* Shorten the title as the viewport narrows so the name + nav links keep
   fitting on one line. */
@media (max-width: 500px) {
  .site-title .site-title-full { display: none; }
  .site-title .site-title-short { display: inline; }
}
@media (max-width: 350px) {
  .site-title .site-title-short { display: none; }
  .site-title .site-title-xs { display: inline; }
}

/* ── Page content wrapper ───────────────────────────── */

.page-content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem 6%;
  overflow-wrap: break-word;
  min-width: 0;
  overflow-x: clip;
}

/* ── Document typography (shared) ──────────────────── */

.post-title { color: var(--s-accent-warm); }

.post-content p { margin: 1rem 0; }

/* ── Math (MathJax/KaTeX) ──────────────────────────── */

.post-content mjx-container { font-size: 0.95em; }

/* ── Code ──────────────────────────────────────────── */

.post-content code {
  font-family: var(--s-mono);
  background: var(--s-code-bg);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-size: 0.8em;
}
.post-content pre {
  background: var(--s-code-bg);
  padding: 1rem 1.2rem;
  border-radius: var(--s-radius);
  overflow-x: auto;
  line-height: 1.45;
}
.post-content pre code {
  background: none;
  padding: 0;
}

div.sourceCode { position: relative; }

/* ── Pandoc syntax highlighting (pygments) ─────────── */

code span.al { color: #ff0000; font-weight: bold; }
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; }
code span.at { color: #7d9029; }
code span.bn { color: #40a070; }
code span.bu { color: #008000; }
code span.cf { color: #007020; font-weight: bold; }
code span.ch { color: #4070a0; }
code span.cn { color: #880000; }
code span.co { color: #60a0b0; font-style: italic; }
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; }
code span.do { color: #ba2121; font-style: italic; }
code span.dt { color: #902000; }
code span.dv { color: #40a070; }
code span.er { color: #ff0000; font-weight: bold; }
code span.ex { color: inherit; }
code span.fl { color: #40a070; }
code span.fu { color: #06287e; }
code span.im { color: #008000; font-weight: bold; }
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; }
code span.kw { color: #007020; font-weight: bold; }
code span.op { color: #666666; }
code span.ot { color: #007020; }
code span.pp { color: #bc7a00; }
code span.sc { color: #4070a0; }
code span.ss { color: #bb6688; }
code span.st { color: #4070a0; }
code span.va { color: #19177c; }
code span.vs { color: #4070a0; }
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; }

/* ── Rouge syntax highlighting ─────────────────────── */

.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs { color: #998; font-style: italic; }
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kp,
.highlight .kr, .highlight .ow                                 { font-weight: bold; }
.highlight .kt                                                 { color: #458; font-weight: bold; }
.highlight .o                                                  { font-weight: bold; }
.highlight .m, .highlight .mf, .highlight .mh,
.highlight .mi, .highlight .mo, .highlight .il                 { color: #099; }
.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd,
.highlight .s2, .highlight .se, .highlight .sh, .highlight .si,
.highlight .sx, .highlight .s1, .highlight .ss                 { color: #d14; }
.highlight .sr                                                 { color: #009926; }
.highlight .na                                                 { color: #008080; }
.highlight .nb, .highlight .bp                                 { color: #0086B3; }
.highlight .nc                                                 { color: #458; font-weight: bold; }
.highlight .no, .highlight .nv, .highlight .vc,
.highlight .vg, .highlight .vi                                 { color: #008080; }
.highlight .ne, .highlight .nf                                 { color: #900; font-weight: bold; }
.highlight .nn                                                 { color: #555; }
.highlight .nt                                                 { color: #000080; }
.highlight .ni                                                 { color: #800080; }
.highlight .cp                                                 { color: #999; font-weight: bold; }
.highlight .gd                                                 { color: #000; background-color: #fdd; }
.highlight .gi                                                 { color: #000; background-color: #dfd; }
.highlight .err                                                { color: #a61717; background-color: #e3d2d2; }
.highlight .w                                                  { color: #bbb; }

/* ── Blockquote ────────────────────────────────────── */

.post-content blockquote {
  border-left: 3px solid #ccc;
  margin-left: 0;
  padding-left: 1.2rem;
  font-style: italic;
  color: #555;
}
.post-content blockquote footer {
  font-style: normal;
  font-size: 0.9rem;
  text-align: right;
}

/* ── Links ─────────────────────────────────────────── */

.post-content a { color: var(--s-accent); text-decoration: underline; text-underline-offset: 2px; }
.post-content a:hover { color: #234; }

/* ── Tables ────────────────────────────────────────── */

.post-content table {
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.95rem;
}
.post-content th, .post-content td {
  border: 1px solid var(--s-border);
  padding: 0.35em 0.75em;
  text-align: left;
}
.post-content th {
  background: var(--s-surface);
  font-weight: 600;
}

/* ── Images ────────────────────────────────────────── */

.post-content img { max-width: 100%; }
.post-content figure { margin-inline: 0; }
.post-content figcaption {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #555;
  margin-top: 0.4em;
}

/* Centered blocks (from ::: {.center} fenced divs).
   Shrink-wrap figures so the caption aligns with the image's edges. */
.post-content div.center > p { text-align: center; }
.post-content div.center > figure {
  display: table;
  margin-inline: auto;
}
.post-content div.center > figure > figcaption {
  display: table-caption;
  caption-side: bottom;
}

/* ── Horizontal rule ───────────────────────────────── */

.post-content hr { border: none; border-top: 1px solid var(--s-border); margin: 2.5em 0; }

/* ── Lists ─────────────────────────────────────────── */

.post-content ul, .post-content ol { padding-left: 1.5rem; }
.post-content li { margin-bottom: 0.3rem; }

/* ── References / bibliography ─────────────────────── */

.post-content .references { font-size: 0.9rem; }
.post-content .csl-bib-body { line-height: 1.5; }
.post-content .csl-entry { margin-bottom: 0.5rem; }

/* ── Callouts ──────────────────────────────────────── */

.callout {
  margin: 1.2em 0;
  padding: 0.8em 1em;
  border-left: 4px solid var(--s-accent);
  background: var(--s-surface);
  border-radius: 0 var(--s-radius) var(--s-radius) 0;
}
.callout-header {
  font-family: var(--s-sans);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s-accent);
  margin-bottom: 0.3em;
}
.callout-body > p:first-child { margin-top: 0; }
.callout-body > p:last-child { margin-bottom: 0; }

/* Callout variants */
.callout.callout-warning {
  border-left-color: #c0392b;
  background: #fdf2f2;
}
.callout.callout-warning .callout-header { color: #c0392b; }

.callout.callout-tip {
  border-left-color: #27ae60;
  background: #f0faf4;
}
.callout.callout-tip .callout-header { color: #27ae60; }

.callout.callout-important {
  border-left-color: #e67e22;
  background: #fef9f2;
}
.callout.callout-important .callout-header { color: #e67e22; }

.callout.callout-note {
  border-left-color: var(--s-accent);
  background: var(--s-surface);
}
.callout.callout-note .callout-header { color: var(--s-accent); }

/* ── Site footer ───────────────────────────────────── */

.site-footer {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--s-border);
  font-size: 0.85rem;
  color: var(--s-text-dim);
}
.site-footer .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-footer .last-modified {
  color: #ccc;
  font-size: 0.8rem;
}

/* ── Responsive: nav and footer ───────────────────── */

@media (max-width: 800px) {
  .site-header {
    padding: 0;
  }
  .page-content {
    padding: 2rem 20px 4rem 20px;
  }
  .site-footer {
    padding: 1rem;
  }
}