/* ---------- Fonts (served from this site; licence in assets/fonts/OFL.txt) ---------- */
/* A browser only downloads a face when the page uses it, so the serif loads on posts only. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext-opsz-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Code */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 100 800; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 100 800; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --paper: #fbfbfc;
  --ink: #1c2028;
  --muted: #5b6270;
  --rule: #e2e5ea;
  --accent: #1954a6;          /* KTH blue */
  --accent-soft: #e9eff9;
  --code-bg: #f2f4f7;
  --target: #fff4c2;          /* briefly marks the equation or theorem a link jumped to */

  /* Code colors */
  --hl-keyword: #1954a6;
  --hl-string: #2f7a3e;
  --hl-comment: #5f6775;
  --hl-number: #9a4d00;
  --hl-function: #7a3e9d;
  --hl-type: #0e6e78;

  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;   /* posts only */
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 42rem;
  --gutter: 1.25rem;
  --margin-note: 12rem;       /* width of the contents list and sidenotes on wide screens */
  --margin-gap: 3rem;
}

/* Dark theme: used when the reader picks it with the switch, or when their
   system is dark and they haven't picked light. Keep the two blocks identical. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #16181d;
  --ink: #e6e8ec;
  --muted: #9aa1ad;
  --rule: #2c3038;
  --accent: #8db3f2;
  --accent-soft: #1f2a3d;
  --code-bg: #1f2228;
  --target: #3a3420;
  --hl-keyword: #8db3f2;
  --hl-string: #8fcf9a;
  --hl-comment: #8b93a1;
  --hl-number: #e5a66b;
  --hl-function: #c9a2ee;
  --hl-type: #6fc6cf;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #16181d;
    --ink: #e6e8ec;
    --muted: #9aa1ad;
    --rule: #2c3038;
    --accent: #8db3f2;
    --accent-soft: #1f2a3d;
    --code-bg: #1f2228;
    --target: #3a3420;
    --hl-keyword: #8db3f2;
    --hl-string: #8fcf9a;
    --hl-comment: #8b93a1;
    --hl-number: #e5a66b;
    --hl-function: #c9a2ee;
    --hl-type: #6fc6cf;
  }
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.js) { scroll-behavior: smooth; }
}
[tabindex="-1"]:focus { outline: none; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

.page {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.page > main { flex: 1 0 auto; }

h1, h2 { text-wrap: balance; }
h3 { text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.icon { display: block; width: 1em; height: 1em; flex: none; overflow: visible; }

/* ---------- Header & footer ---------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem 0 0;
  font-size: 1.0625rem;
}
.site-name {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.site-header nav { display: flex; gap: 1.5rem; }
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover { color: var(--ink); }
.site-header nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 5rem;
  padding: 1.25rem 0 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--muted);
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--muted); }

/* ---------- Intro ---------- */
.intro {
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-template-areas:
    "photo head"
    "photo text";
  column-gap: 2.25rem;
  align-items: start;
  padding: 4.5rem 0 3.5rem;
}
.portrait {
  grid-area: photo;
  width: 10rem;
  height: 10rem;
  object-fit: cover;
  border-radius: 14%;
  background: var(--code-bg);
  margin-top: 0.25rem;
}
.intro-head { grid-area: head; }
.intro-text { grid-area: text; }

.intro h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5.5vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.intro-role {
  margin: 0.5rem 0 1.25rem;
  font-size: 1.125rem;
  color: var(--muted);
}
.intro-text p { margin: 0 0 0.85rem; }

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}
.contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
}
.contact-links a:hover span { text-decoration: underline; }

/* ---------- Sections & lists ---------- */
.highlights {
  border-top: 1px solid var(--rule);
  padding-top: 2.25rem;
  margin-top: 0;
}
.highlights + .highlights { margin-top: 3rem; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.section-head h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.section-more { font-size: 1rem; white-space: nowrap; }

.page-head { padding: 4rem 0 1.5rem; }
.page-head h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5.5vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.page-lede { margin: 0.75rem 0 0; color: var(--muted); }

.year {
  margin: 2rem 0 0;
  padding-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.entries { list-style: none; margin: 0; padding: 0; }

.entry {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.entry:last-child { border-bottom: 0; }
.entries-projects .entry:first-child { border-top: 1px solid var(--rule); }

.entry-date {
  font-size: 1rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: 0.15rem;
}
.entry-title {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}
.entry-title a { color: var(--ink); text-decoration: none; }
.entry-title a:hover { color: var(--accent); text-decoration: underline; }
.entry-desc { margin: 0.3rem 0 0; color: var(--muted); line-height: 1.5; }
.entry-meta { margin: 0.35rem 0 0; font-size: 0.975rem; color: var(--muted); }

.entry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
}

.topic { color: var(--muted); }
.topic + .topic::before { content: ", "; }

.empty { color: var(--muted); font-style: italic; }

/* ---------- Post page: the one place the serif is used ---------- */
.post-header { padding: 4rem 0 2rem; border-bottom: 1px solid var(--rule); margin-bottom: 2.25rem; }
.post-header h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 48;
}
.post-lede {
  margin: 0.9rem 0 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--muted);
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 1.25rem 0 0;
  font-size: 1rem;
  color: var(--muted);
}
.post-meta .topic + .topic::before { content: none; }

.prose {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.1875rem;
  line-height: 1.7;
}
.prose > * + * { margin-top: 1.25em; }
.prose p, .prose ul, .prose ol { margin-bottom: 0; }
.prose h2 { font-size: 1.5rem; line-height: 1.25; margin: 2.25em 0 0; font-weight: 600; }
.prose h3 { font-size: 1.2rem; line-height: 1.3; margin: 2em 0 0; font-weight: 600; }
.prose li + li { margin-top: 0.35em; }
.prose blockquote {
  margin-left: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--rule);
  color: var(--muted);
}
.prose img { max-width: 100%; height: auto; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }

.prose code {
  font-family: var(--mono);
  /* Show exactly the characters a reader would type: no "->" turned into an arrow.
     Delete this line to get JetBrains Mono's programming ligatures. */
  font-variant-ligatures: none;
  font-size: 0.85em;
  background: var(--code-bg);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}
.prose pre {
  background: var(--code-bg);
  padding: 1rem 1.15rem;
  border-radius: 6px;
  overflow-x: auto;
  line-height: 1.5;
}
.prose pre code { background: none; padding: 0; font-size: 0.84rem; line-height: 1.6; }

/* Code colors (Rouge, the highlighter GitHub Pages uses) */
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr,
.highlight .kv, .highlight .kc, .highlight .ow, .highlight .nt { color: var(--hl-keyword); }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sa, .highlight .sb, .highlight .sc,
.highlight .dl, .highlight .sd, .highlight .se, .highlight .sh, .highlight .sx,
.highlight .sr, .highlight .ss { color: var(--hl-string); }
.highlight .si { color: var(--ink); }
.highlight .c, .highlight .c1, .highlight .ch, .highlight .cm, .highlight .cp,
.highlight .cpf, .highlight .cs { color: var(--hl-comment); font-style: italic; }
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi,
.highlight .il, .highlight .mo, .highlight .mx, .highlight .nd { color: var(--hl-number); }
.highlight .nf, .highlight .fm, .highlight .na { color: var(--hl-function); }
.highlight .nc, .highlight .nn, .highlight .kt, .highlight .nb, .highlight .bp { color: var(--hl-type); }
.highlight .gd { color: #c62828; }
.highlight .gi { color: var(--hl-string); }
.highlight .err { color: inherit; background: none; }

/* Math (rendered at build time by KaTeX) */
.prose .katex { font-size: 1.08em; }
.prose .equation { display: block; overflow-x: auto; overflow-y: hidden; padding: 0.15rem 0; }
.prose .equation .katex-display { margin: 0.5em 0; }
/* Fallback when the site is built without the post-processing step */
mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; padding: 0.25rem 0; }

/* Theorems, lemmas, definitions, proofs.
   Write <div class="theorem" id="thm:name" data-title="Optional name" markdown="1">. */
.env > :first-child { margin-top: 0; }
.env > * + * { margin-top: 0.8em; }
.theorem, .lemma, .proposition, .corollary, .conjecture {
  padding: 0.9rem 1.15rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 6px 6px 0;
}
.definition, .example, .remark {
  padding: 0.75rem 1.15rem;
  border-left: 3px solid var(--rule);
}
.env-head { font-weight: 600; }
em.env-head { font-style: italic; font-weight: 400; }
.qed { float: right; margin-left: 1em; }

/* Cross-references, and the item a reference or contents link jumps to */
a.ref { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.ref-missing { color: #c62828; font-weight: 600; }
.prose [id] { scroll-margin-top: 1.5rem; }
.prose .equation:target, .prose .env:target,
.prose .equation.flash, .prose .env.flash {
  animation: target-flash 2.4s ease-out;
}
@keyframes target-flash { from { background-color: var(--target); } }

/* Link next to each section heading */
.anchor {
  margin-left: 0.25em;
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
}
.prose h2:hover .anchor, .prose h3:hover .anchor, .anchor:focus-visible { opacity: 1; }
@media (hover: none) { .anchor { opacity: 0.45; } }

/* Footnotes (used on phones and narrow windows; wide screens show sidenotes) */
.prose sup[role="doc-noteref"] { line-height: 0; }
.prose a.footnote {
  font-family: var(--sans);
  font-size: 0.8em;
  font-weight: 600;
  text-decoration: none;
  padding: 0 0.1em;
}
.prose .footnotes {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}
.prose .footnotes ol { padding-left: 1.25rem; }
.prose .footnotes li + li { margin-top: 0.5em; }
.reversefootnote { text-decoration: none; }

.sidenote { display: none; }
.sidenote .sn-p { display: block; }
.sidenote .sidenote-num + .sn-p { display: inline; }
.sidenote .sn-p + .sn-p { margin-top: 0.5em; }

/* Contents: a dropdown under the post title */
.toc {
  position: relative;
  z-index: 5;
  margin: -0.75rem 0 2rem;
  font-size: 1rem;
}
.toc summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  margin-top: -0.2em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.toc[open] summary::after { margin-top: 0.15em; transform: rotate(-135deg); }
.toc summary:hover, .toc[open] summary { color: var(--ink); border-color: var(--muted); }
.toc-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  width: max-content;
  min-width: 15rem;
  max-width: min(28rem, 100%);
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  padding: 0.5rem 0.4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.25);
}
.toc-panel ol { list-style: none; margin: 0; padding: 0; }
.toc-panel ol ol { padding-left: 0.9rem; }
.toc-panel a {
  display: block;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  color: var(--ink);
  line-height: 1.35;
  text-decoration: none;
}
.toc-panel a:hover, .toc-panel a:focus-visible { background: var(--code-bg); color: var(--accent); }
.toc-panel ol ol a { color: var(--muted); }
.toc-panel .katex { font-size: 1em; }

.post-footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
  color: var(--muted);
}
.post-footer p { margin: 0; }
.post-footer .contact-links { margin: 0.75rem 0 1.25rem; }

/* ---------- Interactive figures (inside posts, but set in the sans) ---------- */
.figure {
  margin: 2rem 0;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--sans);
}
.figure svg { display: block; width: 100%; height: auto; }
.figure .controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
  font-size: 1rem;
}
.figure input[type="range"] { flex: 1 1 12rem; accent-color: var(--accent); }
.figure output { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 9ch; }
.figure figcaption { margin-top: 0.75rem; font-size: 0.95rem; color: var(--muted); }

/* ---------- Wide screens: sidenotes in the right margin ---------- */
@media (min-width: 76rem) {
  .post-body { position: relative; }

  .sidenote {
    display: block;
    float: right;
    clear: right;
    width: var(--margin-note);
    margin: 0.3rem calc(-1 * (var(--margin-note) + var(--margin-gap))) 1rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--muted);
    font-style: normal;
    font-weight: 400;
  }
  .sidenote-num {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.85em;
    color: var(--accent);
    margin-right: 0.15em;
  }
  .sidenote .katex { font-size: 1em; }
  /* Inside a theorem box the box's padding shifts the margin; correct for it */
  .env .sidenote { margin-right: calc(-1 * (var(--margin-note) + var(--margin-gap) + 1.15rem)); }

  /* The notes now sit in the margin, so hide the duplicates at the bottom */
  .prose .footnotes.all-sidenotes { display: none; }
  .prose .footnotes li.has-sidenote { display: none; }
}

/* ---------- Light/dark switch ---------- */
.site-header nav { align-items: center; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: -0.25rem -0.4rem -0.25rem 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.theme-toggle .icon { width: 18px; height: 18px; }
.theme-toggle:hover { color: var(--ink); background: var(--code-bg); }
.theme-toggle[hidden] { display: none; }
.theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-dark { display: none; }
  :root:not([data-theme="light"]) .theme-icon-light { display: inline-flex; }
}

/* ---------- Phones ---------- */
@media (max-width: 40rem) {
  :root { --gutter: 1rem; }
  body { font-size: 1.0625rem; line-height: 1.55; }

  .site-header { padding-top: 1rem; font-size: 1rem; }
  .site-header nav { gap: 1.125rem; }

  .intro {
    grid-template-columns: 4.5rem 1fr;
    grid-template-areas:
      "photo head"
      "text  text";
    column-gap: 1rem;
    align-items: center;
    padding: 1.75rem 0 1.75rem;
  }
  .portrait { width: 4.5rem; height: 4.5rem; margin-top: 0; }
  .intro h1 { font-size: 1.875rem; }
  .intro-role { margin: 0.25rem 0 0; font-size: 1rem; line-height: 1.35; }
  .intro-text { margin-top: 1.125rem; }
  .intro-text p { margin-bottom: 0.7rem; }
  .contact-links { gap: 0.5rem 1.125rem; margin-top: 1rem; }

  .highlights { padding-top: 1.5rem; }
  .highlights + .highlights { margin-top: 2rem; }
  .section-head h2 { font-size: 1.3rem; }
  .section-more { font-size: 0.95rem; }

  .page-head { padding: 1.75rem 0 0.5rem; }
  .page-head h1 { font-size: 1.875rem; }
  .page-lede { margin-top: 0.5rem; }
  .year { margin-top: 1.25rem; }

  .entry { grid-template-columns: 1fr; gap: 0.1rem; padding: 0.8rem 0; }
  .entry-date { font-size: 0.925rem; padding-top: 0; }
  .entry-title { font-size: 1.0625rem; }
  .entry-desc { margin-top: 0.2rem; font-size: 1rem; }
  .entry-links { margin-top: 0.35rem; font-size: 0.95rem; }

  .post-header { padding: 1.75rem 0 1.25rem; margin-bottom: 1.5rem; }
  .post-header h1 { font-size: 1.75rem; }
  .post-lede { font-size: 1.0625rem; margin-top: 0.6rem; }
  .post-meta { margin-top: 0.75rem; font-size: 0.925rem; gap: 0.15rem 1rem; }
  .prose { font-size: 1.0625rem; line-height: 1.65; }
  .prose > * + * { margin-top: 1em; }
  .prose h2 { font-size: 1.25rem; margin-top: 1.75em; }
  .prose pre { padding: 0.75rem 0.85rem; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; }
  .theorem, .lemma, .proposition, .corollary, .conjecture { padding: 0.7rem 0.85rem; }
  .definition, .example, .remark { padding: 0.6rem 0.85rem; }
  .toc { margin: -0.5rem 0 1.25rem; }
  .toc-panel { right: 0; max-width: none; width: auto; }
  .prose .footnotes { margin-top: 2rem; }
  .figure { padding: 0.75rem; margin: 1.5rem 0; }

  .site-footer { margin-top: 3rem; padding: 1rem 0 1rem; font-size: 0.9rem; }
  .post-footer { margin-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}