/* Site style: a single typeset column, serif text, sparing red accent.
   Colours are set once below; the dark variant follows the visitor's system setting. */

:root {
  --ink: #1d1d1f;
  --muted: #5f5f66;
  --rule: #dcd8d0;
  --paper: #fdfcf9;
  --accent: #a6192e;
  --link: #8a1526;
  --link-text: color-mix(in srgb, #7a2f3b 65%, var(--ink));   /* links at rest: muted wine */
  --serif: "Source Serif 4 Variable", "Source Serif Pro", Charter, "Iowan Old Style", Georgia, serif;
  --sans: "Source Sans 3 Variable", "Source Sans Pro", system-ui, sans-serif;
  --math: "TeX Gyre Pagella Math", "STIX Two Math", "Cambria Math", math;
  --width: 42rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e6e1;
    --muted: #a3a09a;
    --rule: #3a3835;
    --paper: #1a1918;
    --accent: #f08a8a;
    --link: #f3a5a5;
    --link-text: color-mix(in srgb, #e0a3ab 65%, var(--ink));
  }
}

* { box-sizing: border-box; }

html { font-size: 112.5%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--serif);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

/* Links are a muted wine colour with a faint underline, bright red only on hover; full red is
   kept for structure: headings, the current menu item, buttons. */
a { color: var(--link-text); text-decoration: underline; text-decoration-thickness: 0.06em;
    text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
a:hover { color: var(--link); text-decoration-color: currentColor; }
/* Firefox misplaces sub/superscripts of MathML inside text-decorated links (Mozilla bug
   667567, open since 2011), so links that contain a formula get their underline as a bottom
   border instead. Browsers without :has() just show the normal underline. */
a:has(math) { text-decoration: none;
               border-bottom: 0.06em solid color-mix(in srgb, currentColor 35%, transparent); }
a:has(math):hover { border-bottom-color: currentColor; }

.site-header, main, .site-footer {
  max-width: var(--width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------------------------------------------------------------- header */
.site-header {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding-top: 1.6rem; padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.site-name {
  font-variant-caps: all-small-caps; letter-spacing: 0.08em; font-weight: 600;
  font-size: 1.1rem; color: var(--ink); text-decoration: none;
}
.site-name::before {
  content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.5em;
  background: var(--accent); border-radius: 50%; vertical-align: 0.05em;
}
.ident { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; }
.affil {
  margin: 0;
  font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--muted);
}
.affil a { color: var(--muted); text-decoration: none; }
.affil a:hover { color: var(--ink); text-decoration: underline; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; }
.nav a {
  font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.02em;
  color: var(--muted); text-decoration: none;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px;
                       text-underline-offset: 0.3em; }   /* a cue besides colour; no change in layout */
/* "Skip to content": first stop for keyboard users, shown only when it has focus */
.skip { position: absolute; left: 1rem; top: -3rem; padding: 0.3rem 0.6rem;
        background: var(--paper); border: 1px solid var(--rule); font-family: var(--sans); font-size: 0.85rem; }
.skip:focus { top: 0.4rem; }

/* ---------------------------------------------------------------- text */
main { display: flow-root; padding-top: 2.2rem; padding-bottom: 2rem; }
h1 { font-size: 2.6rem; line-height: 1.1; font-weight: 600; margin: 0 0 0.3rem; letter-spacing: -0.01em; }
h1 + * { margin-top: 1.2rem; }
.subtitle { color: var(--muted); font-style: italic; margin: 0.4rem 0 1.4rem; font-size: 1.05rem; }
h2 {
  font-size: 0.95rem; font-weight: 600; margin: 2.4rem 0 0.8rem;
  font-variant-caps: all-small-caps; letter-spacing: 0.1em; color: var(--accent);
  display: flex; align-items: center; gap: 0.8rem;
}
h2 math { font-size: 1.25em; font-variant-caps: normal; }
h2::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
h3 { font-size: 1.1rem; font-weight: 600; margin: 1.8rem 0 0.5rem; }
p { margin: 0 0 0.9rem; hyphens: auto; }
sup, sub { line-height: 0; }
main ul, main ol { padding-left: 1.2rem; }
main li { margin-bottom: 0.3rem; }
blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 2px solid var(--rule); color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
code { font-size: 0.9em; }

.portrait {
  float: right; clear: right; width: 140px; height: auto; margin: 0.3rem 0 1rem 1.6rem;
  border-radius: 3px; filter: grayscale(0.15);
  box-shadow: 0 0 0 1px var(--rule), 0 8px 24px -12px rgb(0 0 0 / 0.35);
}
/* figures: ![caption](file.png) on a line of its own; add {.portrait} to float it right */
figure { margin: 1.4rem 0; }
figure img { max-width: 100%; height: auto; }
figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; line-height: 1.4; }
figure:has(> .portrait) { float: right; clear: right; width: 140px; margin: 0.3rem 0 1rem 1.6rem; }
figure > .portrait { float: none; margin: 0; width: 100%; }

/* "All publications →" etc.: quiet, at the right end of the list */
p:has(> a.more) { text-align: right; margin-top: 0.4rem; }
a.more { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); text-decoration: none; }
a.more:hover { color: var(--accent); text-decoration: underline; }
.note { color: var(--muted); }
/* ::: muted  — a quiet grey block, e.g. the profile links under "Publications" */
.muted { color: var(--muted); }
.muted a { color: inherit; }
.muted a:hover { color: var(--link); }

/* maths (MathML from pandoc) */
math { font-family: var(--math); font-size: 1.04em; }
math[display="block"] { margin: 1rem 0; overflow-x: auto; overflow-y: hidden; }

/* theorem-like blocks:  ::: theorem ... ::: */
.theorem, .conjecture, .definition, .remark {
  margin: 1.2rem 0; padding: 0.2rem 0 0.2rem 1rem; border-left: 2px solid var(--accent);
}
.theorem p:last-child, .conjecture p:last-child { margin-bottom: 0; }

/* tables */
table { border-collapse: collapse; margin: 1rem 0 1.4rem; font-variant-numeric: tabular-nums; }
th, td { padding: 0.25rem 0.8rem; border-bottom: 1px solid var(--rule); text-align: left; }
th { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.centered table { margin-left: auto; margin-right: auto; }

/* embedded maps etc. */
iframe { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--rule); border-radius: 3px; }

/* ---------------------------------------------------------------- page blocks */

/* ::: interests  — a two-column bullet list */
.interests ul { list-style: none; padding: 0; margin: 0; columns: 2 16rem; column-gap: 2rem; }
.interests li { padding-left: 1.1rem; position: relative; break-inside: avoid; }
.interests li::before { content: "·"; position: absolute; left: 0.2rem; color: var(--accent); font-weight: 700; }

/* ::: contact  /  ::: timeline  — definition lists laid out as two columns */
.contact dl, .timeline dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.4rem; margin: 0; }
.contact dt { font-variant-caps: all-small-caps; letter-spacing: 0.08em; color: var(--muted); }
.contact dd, .timeline dd { margin: 0; }
.timeline dl { gap: 0.6rem 1.4rem; }
.timeline dt { font-family: var(--sans); font-size: 0.88rem; color: var(--muted); padding-top: 0.12rem;
               font-variant-numeric: tabular-nums; }
.timeline dd p { margin: 0; }

/* ::: contact-cols  — contact blocks side by side, stacked when there is no room */
.contact-cols { display: flex; flex-wrap: wrap; gap: 0.35rem 2.5rem; }
.contact-cols dt { min-width: 3.5rem; }

/* ---------------------------------------------------------------- lists from data/ */

/* publications */
.pubs { list-style: none; padding: 0; margin: 0; }
.pub {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: 0 0.8rem;
  padding: 0.7rem 0; border-top: 1px solid var(--rule); margin: 0;
}
.pub:first-child { border-top: 0; }
/* A citation can land near the bottom, where the page cannot scroll it to the top. */
.pub:target {
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
  outline: 1px solid var(--accent); outline-offset: 0.25rem;
  scroll-margin-block: 1rem;
}
.pub .year { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); padding-top: 0.15rem;
             font-variant-numeric: tabular-nums; }
.pub-body { grid-column: 2; }
.pub .title { display: block; font-weight: 600; line-height: 1.35; }
.pub .meta { color: var(--muted); }
.pub .note { display: block; font-size: 0.92rem; }

/* resource buttons (doi, arXiv, code, ...) */
.links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.tag {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em;
  line-height: 1; padding: 0.3rem 0.6rem 0.32rem;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper); color: var(--accent); text-decoration: none;
  transition: background-color 0.12s, border-color 0.12s;
}
.tag:hover, .tag:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--rule));
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}
.rows .links, .students .links { margin-top: 0.3rem; }

/* teaching and events: date column + description */
.rows { list-style: none; padding: 0; margin: 0; }
.rows li {
  display: grid; grid-template-columns: 8rem 1fr; gap: 0 1rem;
  padding: 0.3rem 0; border-top: 1px solid var(--rule); margin: 0;
}
.rows li:first-child { border-top: 0; }
.rows .when { font-family: var(--sans); font-size: 0.88rem; color: var(--muted); padding-top: 0.12rem;
              font-variant-numeric: tabular-nums; }
.rows .what:has(> .code) { display: grid; grid-template-columns: 6.2rem 1fr; }
.rows .note { display: block; font-size: 0.92rem; line-height: 1.45; }
.rows .code { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--muted);
              padding-top: 0.12rem; white-space: nowrap; }

/* students */
.students { list-style: none; padding: 0; margin: 0; }
.students li { padding: 0.7rem 0; border-top: 1px solid var(--rule); margin: 0; }
.students li:first-child { border-top: 0; }
.students .name { font-weight: 400; }
.students .degree { font-family: var(--sans); font-size: 0.88rem; color: var(--muted); margin-left: 0.4rem; }
.students .thesis { display: block; font-style: italic; }
.students .thesis .note { font-style: normal; }
/* one-line entries (current students, no thesis yet): a compact list without rules */
.students li:not(:has(.thesis)) { border-top: 0; padding: 0.15rem 0; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  border-top: 1px solid var(--rule); padding-top: 1.2rem; padding-bottom: 2.5rem;
  color: var(--muted); font-size: 0.82rem; line-height: 1.5;
}
.updated { font-family: var(--sans); font-size: 0.75rem; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 560px) {
  html { font-size: 106.25%; }
  h1 { font-size: 2.1rem; }
  .portrait, figure:has(> .portrait) { width: 105px; margin-left: 1rem; }
  figure > .portrait { margin: 0; width: 100%; }
  .pub, .rows li { grid-template-columns: 1fr; }
  .pub .year { grid-row: 1; }
  .pub-body { grid-column: 1; }
  .contact-cols { display: block; }
  .contact dl, .timeline dl { grid-template-columns: 1fr; gap: 0 0; }
  .contact dd, .timeline dd { margin-bottom: 0.6rem; }
  .nav ul { gap: 0 1.1rem; }
  .nav a { display: inline-block; padding: 0.35rem 0; }       /* larger tap targets */
  th, td { padding: 0.25rem 0.35rem; }
  th:first-child, td:first-child { padding-left: 0; }
  th:last-child, td:last-child { padding-right: 0; }
  table { display: block; max-width: 100%; overflow-x: auto; }  /* scroll, rather than the page */
  .centered table { width: max-content; }
}

@media print {
  :root { --ink: black; --muted: #555; --rule: #ccc; --paper: white; --accent: #a6192e; }  /* also in dark mode */
  .nav, .links, .skip { display: none; }
  body { font-size: 10.5pt; }
  a { color: inherit; text-decoration: none; }
  .pub, .rows li, .students li { break-inside: avoid; }
}