/* ── Faces ─────────────────────────────────────────────────────────────────
   Newsreader for the words, IBM Plex Mono for the apparatus: dates, venue
   links, navigation. Self-hosted, so the page asks nothing of a third
   party. Newsreader's roman and italic are each one variable file, 400–600. */
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/newsreader-normal-400-600-latin.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: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/newsreader-normal-400-600-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url("../fonts/newsreader-italic-400-600-latin.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: "Newsreader"; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url("../fonts/newsreader-italic-400-600-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/plex-mono-normal-400-latin.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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/plex-mono-normal-400-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/plex-mono-normal-500-latin.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;
}

/* ── Tokens ────────────────────────────────────────────────────────────────
   One ink on white. Secondary text is the same ink at lower strength rather
   than a second colour, so the hierarchy is carried by weight and size. */
:root {
  --ink: #2b2d36;
  --paper: #ffffff;
  --muted: color-mix(in srgb, var(--ink) 66%, var(--paper));
  --faint: color-mix(in srgb, var(--ink) 45%, var(--paper));
  --rule: color-mix(in srgb, var(--ink) 12%, var(--paper));
  --wash: color-mix(in srgb, var(--ink) 5%, var(--paper));

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --apparatus-size: 0.78rem;

  /* The page measure and the prose measure. 35rem of
     17px Newsreader is about 75 characters a line. */
  --page: 56rem;
  --measure: 35rem;
  --gutter: 1.25rem;
  --radius: 6px;

  color-scheme: light;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.62;
  font-kerning: normal;
  font-variant-numeric: tabular-nums;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in srgb, var(--ink) 14%, transparent); }

main { padding: 0 var(--gutter); }
img, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { font-weight: 600; text-wrap: balance; margin: 0; }
h1 { font-size: 2.1rem; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }

/* Links in the page's ink. The underline is what says it can be clicked. */
a, a:visited {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color 120ms ease;
}
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

/* ── Header and footer: apparatus, in the mono ─────────────────────────── */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--page);
  margin: 0 auto;
  padding: 1.4rem var(--gutter);
  font-family: var(--mono);
  font-size: var(--apparatus-size);
}
.site-header a { text-decoration: none; color: var(--muted); }
.site-header a:hover { color: var(--ink); }
.site-header .site-name { color: var(--ink); font-weight: 500; }
.site-header nav { display: flex; gap: 1.4rem; margin-left: auto; }

.site-footer {
  max-width: var(--measure);
  margin: 6rem auto 0;
  padding: 1.6rem var(--gutter) 2.6rem;
  font-family: var(--mono);
  font-size: var(--apparatus-size);
  color: var(--faint);
  text-align: center;
}

/* ── Masthead ──────────────────────────────────────────────────────────────
   The one block that is centred: a portrait, the name, a line, the links. */
.masthead {
  max-width: 44rem;
  margin: 2.6rem auto 2.4rem;
  text-align: center;
}
.masthead .standfirst {
  max-width: var(--measure);
  margin: 0.7rem auto 0;
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--muted);
}
.masthead.home { margin-top: 3.2rem; }
.masthead.home h1 { font-size: 2.5rem; letter-spacing: -0.025em; }
.portrait {
  width: 6.5rem;
  height: 6.5rem;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  object-fit: cover;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
}
.pills a {
  padding: 0.5rem 1rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 999px;
  font-size: 0.92rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.pills a:hover { background: var(--wash); border-color: color-mix(in srgb, var(--ink) 40%, transparent); }

/* ── Prose ─────────────────────────────────────────────────────────────────
   A narrow column, centred; its lines stay left-aligned. */
.prose { max-width: var(--measure); margin-inline: auto; }
.prose h2 { margin: 2.6rem 0 0.8rem; }
.prose h3 { margin: 2.2rem 0 0.6rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin: 0.25rem 0; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.6rem 0; }
.prose blockquote { margin: 1.4rem 0; padding-left: 1rem; border-left: 2px solid var(--rule); color: var(--muted); }
.prose code { font-family: var(--mono); font-size: 0.85em; }
.bio p { font-size: 1.02rem; }

.section-head { text-align: left; }

/* ── News ──────────────────────────────────────────────────────────────────
   The date in the mono, hung in its own column so the items align. */
.news, .prose .news { list-style: none; padding: 0; margin: 0; }
.news li {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 0 1rem;
  align-items: baseline;
  margin: 0 0 0.7rem;
  line-height: 1.5;
}
.news-date {
  font-family: var(--mono);
  font-size: var(--apparatus-size);
  color: var(--muted);
  white-space: nowrap;
}

/* ── Publications ──────────────────────────────────────────────────────── */
.publications, .prose .publications { list-style: none; padding: 0; margin: 0; }
.publications li { margin: 0 0 1.6rem; }

/* Each paper's clip. On a wide screen it hangs in the left margin, so the
   text keeps the same left edge as the bio and the news above it. */
.pub-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--wash);
}
.pub-media video, .pub-media img { width: 100%; height: 100%; object-fit: cover; }
.pub-media.still { background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.pub-media.still img { object-fit: contain; padding: 0.5rem; }

@media (min-width: 66rem) {
  .publications li { position: relative; min-height: 7.5rem; }
  .pub-media {
    position: absolute;
    top: 0.2rem;
    right: calc(100% + 1.5rem);
    width: 12rem;
  }
}
@media (max-width: 66rem) {
  .publications li {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 1.1rem;
    align-items: start;
  }
  .pub-media { margin-top: 0.2rem; }
}
@media (max-width: 30rem) {
  .publications li { grid-template-columns: 6.5rem 1fr; gap: 0.9rem; }
}
.pub-title { margin: 0 0 0.2rem; font-weight: 500; line-height: 1.35; }
.pub-authors { margin: 0 0 0.25rem; font-size: 0.94rem; line-height: 1.45; color: var(--muted); }
.pub-authors strong { font-weight: 600; color: var(--ink); }
.pub-venue { margin: 0; font-size: 0.94rem; line-height: 1.45; font-style: italic; color: var(--muted); }
.pub-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  margin: 0.3rem 0 0;
  font-family: var(--mono);
  font-size: var(--apparatus-size);
  line-height: 1.5;
}

/* ── Small screens ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  html { font-size: 16.5px; }
  .masthead { margin-top: 1.6rem; }
  .masthead.home { margin-top: 1.8rem; }
  .masthead.home h1 { font-size: 2.2rem; }
  h1 { font-size: 1.85rem; }
  .site-header nav { gap: 1rem; }
  .news li { grid-template-columns: 1fr; }
}

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