/* ==================================================================
   Site style.
   You normally never need to open this file. If you want to adjust
   the look, the six lines under "THINGS YOU MIGHT CHANGE" are the
   only ones worth touching.
   ================================================================== */

:root {
  /* ---------- THINGS YOU MIGHT CHANGE ---------- */
  --accent: #01796f;       /* pine green: menu, labels, dates             */
  --accent-hover: #015a53; /* the same green, darker: hover states        */
  --measure: 34rem;        /* width of the text column                    */
  --rail: 9.5rem;          /* width of the narrow left column             */
  --gap: 3rem;             /* space between the two columns               */
  --base-size: 17px;       /* body text size (paragraphs, lists, news)    */
  --lede-size: 1.12rem;    /* opening paragraph of each page              */
  --radius: 2px;           /* corner rounding on the photo                */

  /* ---------- the rest of the palette ---------- */
  --paper: #fcfbf8;
  --ink: #191817;
  --body: #38352f;
  --muted: #8c877c;
  --rule: #e4e0d6;
  --rule-strong: #cfc9bc;

  /* Serif = your writing. Sans = the site's furniture (menu, labels, dates). */
  --serif: "Newsreader", Iowan Old Style, Palatino, Georgia, serif;
  --sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #4db3a8;
    --accent-hover: #7ccec5;
    --paper: #131211;
    --ink: #f0ede6;
    --body: #c6c1b6;
    --muted: #8a857a;
    --rule: #2a2825;
    --rule-strong: #3d3a35;
  }
}

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

html {
  font-size: var(--base-size);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  max-width: calc(var(--rail) + var(--gap) + var(--measure));
  padding: 0 1.5rem 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hanging-punctuation: first last;
}

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

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

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.5rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  z-index: 10;
}

/* ---------- masthead ---------------------------------------------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  padding: 3rem 0 1rem;
  margin-bottom: 3.4rem;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark:hover { color: var(--accent); }

.nav {
  display: flex;
  gap: 1.6rem;
}

.nav a {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 2px;
}

.nav a:hover { color: var(--accent-hover); }

.nav a[aria-current] { font-weight: 600; }

.nav a[aria-current]::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 4px;
  background: var(--accent);
}

/* ---------- page grid --------------------------------------------- */

main { display: block; min-height: 58vh; padding-bottom: 5rem; }

.page {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--measure));
  column-gap: var(--gap);
  align-items: start;
}

/* ---------- the narrow left column -------------------------------- */

.portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--rule);
  filter: saturate(0.94);
}

.rail-title {
  position: sticky;
  top: 2rem;
  align-self: start;
  margin: 0;
  padding-top: 0.35rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.rail-links {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1.1rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.rail-links a {
  color: var(--accent);
  text-decoration: none;
  width: fit-content;
}

.rail-links a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ---------- text -------------------------------------------------- */

h1.display {
  font-size: clamp(2.2rem, 6vw, 2.9rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1.6rem;
  text-wrap: balance;
}

/* The opening paragraph of a page is set slightly larger than the rest.
   Same size on every page: the "I am a..." paragraph on the home page,
   and the description at the top of Research and Teaching.
   Everything after it — later paragraphs, lists, news — is body size. */
.display + p,
.page:not(.page--home) .prose > p:first-child {
  font-size: var(--lede-size);
  line-height: 1.55;
  color: var(--ink);
}

.prose p {
  margin: 0 0 1.15rem;
  text-wrap: pretty;
}

.prose h2 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
  margin: 3.2rem 0 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* A page that opens with a heading gets no rule above it. */
.prose > h2:first-child {
  margin-top: 0;
  padding-top: 0.35rem;
  border-top: 0;
}

.prose h3 {
  font-size: 1.06rem;
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
  margin: 2rem 0 0.5rem;
}

.prose strong { color: var(--ink); font-weight: 600; }

.prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.18em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.prose a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Lists: no bullets, and set flush left — no hanging indent, so wrapped
   lines line up with the first line rather than stepping in. */
.prose ul, .prose ol {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
}

.prose li {
  padding-left: 0;
  text-indent: 0;
  margin-bottom: 0.85rem;
}

.prose li:last-child { margin-bottom: 0; }

.prose ul ul { margin: 0.5rem 0 0; }

/* Numbered questions (Research). A (1) marker sits in the left margin, and
   everything under a question — the question, its citation, its note — is
   set flush beneath it, with no extra per-line hanging indent. */
.prose ol { counter-reset: item; }

.prose ol > li {
  counter-increment: item;
  position: relative;
  padding-left: 2.2rem;
  text-indent: 0;
  margin-bottom: 1.6rem;
}

.prose ol > li::before {
  content: "(" counter(item) ")";
  position: absolute;
  left: 0;
  top: 0.08em;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums lining-nums;
}

/* The question itself takes the same accent color as its (n) marker. */
.prose ol > li > p {
  color: var(--accent);
}

.prose ol > li > blockquote {
  margin: 0.5rem 0;
  padding-left: 0;
  border-left: 0;
}

.prose ol > li > ul { margin: 0.5rem 0 0; }

.prose ol > li > ul > li {
  padding-left: 0;
  text-indent: 0;
  margin-bottom: 0.4rem;
}

/* ---------- the News list on the home page ------------------------ */
/* Written in Markdown as:   - **Aug 2026** Something happened.
   with the line   {: .news}   directly under the list.            */

.news {
  border-top: 1px solid var(--rule);
}

.news li {
  padding: 0.8rem 0 0.8rem 7rem;
  text-indent: -7rem;
  margin: 0;
  border-bottom: 1px solid var(--rule);
}

.news li strong {
  display: inline-block;
  width: 7rem;
  text-indent: 0;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- odds and ends ----------------------------------------- */

/* Citations. Set roman — the paper title stays upright, and only the
   status ("Under review.", italicised in the Markdown) leans. */
.prose blockquote {
  margin: 0.5rem 0 0.3rem;
  padding-left: 0;
  border-left: 0;
  font-style: normal;
  color: var(--ink);
}

/* A citation sits directly above the description it belongs to, so the
   paragraph inside it drops the usual paragraph spacing. */
.prose blockquote p { margin: 0; }

/* The description under a citation gets a bullet and sits indented beneath
   it. The bullet hangs in the margin and the text block stays flush with
   itself, so wrapped lines line up with the first line. */
.prose blockquote + ul > li {
  position: relative;
  padding-left: 1.1rem;
  text-indent: 0;
}

.prose blockquote + ul > li::before {
  content: "•";
  position: absolute;
  left: 0.1rem;
  color: var(--body);
}

/* The question a paper answers, and the award note: same green as the
   subheadings.  Written in Markdown as <span class="q">…</span>. */
.prose .q { color: var(--accent); }

/* The venue of a talk, in the presentations list on the home page.
   Written in Markdown as <span class="venue">…</span>. */
.prose .venue { color: var(--accent); }

.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.4rem 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  font-size: 0.94rem;
}

.prose th, .prose td {
  text-align: left;
  padding: 0.5rem 0.8rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.prose th {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.prose code {
  font-size: 0.86em;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* ---------- phones and small windows ------------------------------ */

@media (max-width: 46rem) {
  /* One column: photo, then the text, then the links at the bottom. */
  .page {
    display: flex;
    flex-direction: column;
  }

  .rail { display: contents; }
  .portrait { order: 1; }
  .prose { order: 2; }
  .rail-links { order: 3; }

  .masthead {
    padding-top: 1.8rem;
    margin-bottom: 2.4rem;
  }

  .nav { gap: 1.3rem; }

  .portrait {
    width: 7.5rem;
    margin-bottom: 1.8rem;
  }

  .rail-title {
    position: static;
    padding: 0;
    margin-bottom: 1.4rem;
  }

  .rail-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    margin-top: 2.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule);
  }

  .news li {
    padding-left: 0;
    text-indent: 0;
  }

  .news li strong {
    display: block;
    width: auto;
    margin-bottom: 0.15rem;
  }

}

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

/* ---------- printing (e.g. the CV page) --------------------------- */

@media print {
  :root { --paper: #fff; --ink: #000; --body: #222; }
  .masthead, .rail-links, .skip-link { display: none; }
  body { max-width: none; font-size: 11pt; }
  .page { display: block; }
  .prose a { text-decoration: none; }
  .prose h2 { break-after: avoid; }
  .prose li { break-inside: avoid; }
}