/* ==========================================================================
   Editorial single-page theme
   Standalone stylesheet for _layouts/home.html. Does not use, and is not
   affected by, the Minimal Mistakes stylesheet in assets/css/main.scss.
   ========================================================================== */

/* --- tokens: light ------------------------------------------------------ */
:root {
  /* Light only. The site is deliberately white - there is no dark theme. */
  color-scheme: light;

  /* Sections are separated by colour alone: the page ground is tinted and every
     other section is laid over it in white. No boxes, no rules between them. */
  --paper:    #FAF8F8;
  --surface:  #FFFFFF;
  --sunk:     #F1EDED;
  --ink:      #171214;
  --ink-2:    #635659;
  --ink-3:    #8C7F83;
  --rule:     #E3DCDD;
  --rule-2:   #EFEAEB;
  --accent:   #8C2B3D;
  --accent-soft: #C4909B;
  --hatch:    rgba(23, 18, 20, .07);
  /* Accent at low opacity - a pill fill that does not slam against white. */
  --accent-tint: rgba(140, 43, 61, .09);

  /* One sans in two roles: headings lean on weight, not a second typeface. */
  --display: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --body:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Only the BibTeX block is monospaced; the system stack, no webfont. */
  --mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Reading measure for prose only - structured rows use the full column. */
  --measure: 38rem;
}

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* 112.5% of the browser's own base = 18px by default. Set as a percentage
   rather than a px value so a reader who has raised their default still gets
   it. Everything else is in rem, so type and layout scale together. */
html {
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.75 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- centring container ------------------------------------------------- */
/* Every section holds one of these. The section itself spans the viewport so
   its background reads as a full-width band; the container keeps the text on
   a single centred column. */
.container {
  width: 100%;
  max-width: 58rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* --- sticky top bar ----------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Translucent over the page ground so bands slide under it on scroll. */
  background: rgba(250, 248, 248, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding-top: .7rem;
  padding-bottom: .7rem;
}
.nav-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
}
/* Held at its old rendered size while the rest of the page grew: .86rem of the
   previous 17px root is .81rem of the current 18px one. */
.nav-links a {
  display: block;
  font: 500 .81rem/1 var(--body);
  color: var(--ink-2);
  text-decoration: none;
  padding: .45rem .65rem;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
/* Colour appears only under the pointer and goes again on release - the link
   for the section in view is not marked, so no highlight is left behind. The
   fill is a neutral grey rather than the accent: it should register as the
   pointer passing over a link, not as a coloured button. */
.nav-links a:hover,
.nav-links a:focus-visible {
  background: rgba(23, 18, 20, .045);
  color: var(--ink);
}
.nav-links a:active { background: rgba(23, 18, 20, .08); }

/* --- about hero --------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1.2fr);
  gap: 2.5rem;
  align-items: center;
}
.name {
  font: 700 2rem/1.15 var(--display);
  letter-spacing: -.03em;
  margin: 0 0 .35rem;
}
.about-text .title-line {
  font: 400 .95rem/1.5 var(--body);
  color: var(--ink-2);
  margin: 0 0 .9rem;
}

.about-text .about-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.4rem;
  margin-top: 1.3rem;
}
.about-links a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: 500 1.02rem/1.5 var(--body);
  text-decoration: none;
}
.about-links a:hover { text-decoration: underline; }
/* Sized in em so the icon tracks the label rather than needing its own bump. */
.about-links .ic { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }

.about-photo { display: flex; justify-content: center; }
.photo-circle {
  position: relative;
  width: 100%;
  max-width: 14.5rem;
  aspect-ratio: 1;
  border-radius: 999px;
  overflow: hidden;
  border: 6px solid var(--surface);
  box-shadow: 0 2px 14px rgba(23, 18, 20, .09);
}
.photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portrait headshots crop better biased upward than dead centre. */
  object-position: center 12%;
}
.photo-circle--empty {
  background:
    repeating-linear-gradient(45deg, transparent 0 5px, var(--hatch) 5px 6px),
    var(--sunk);
  display: grid;
  place-items: center;
  font: 500 .68rem/1 var(--body);
  letter-spacing: .02em;
  color: var(--ink-3);
}

/* --- content ------------------------------------------------------------ */
/* Alternating full-width bands, not boxes: odd sections let the tinted page
   ground show through, even sections are white. Nothing but the change of
   colour separates one section from the next. */
.content > section {
  padding: 3rem 0;
  /* Clears the sticky header when a nav link jumps to a section. */
  scroll-margin-top: 4.25rem;
}
/* Odd sections are white so Publications lands on the tinted ground - the white
   paper cards need a band a shade darker than themselves to sit on. */
.content > section:nth-of-type(odd) { background: var(--surface); }

.section__hd {
  font: 600 1.35rem/1.3 var(--display);
  letter-spacing: -.02em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

.content p { margin: 0 0 1rem; max-width: var(--measure); }
.content p:last-child { margin-bottom: 0; }
.content .lede { font-size: 1.06rem; }
.content strong { font-weight: 600; }
.content em { font-style: italic; }
.content code {
  font: 400 .86em var(--mono);
  background: var(--sunk);
  padding: .1em .35em;
}

/* Keyword list — scanned, not read. Deliberately at a different granularity
   from the About prose so the two do not restate each other. */
.interests {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: var(--measure);
}
/* The list is a flex column, and flex items drop their list marker, so the
   bullet is drawn with ::before and aligned to the first line of the axis. */
.interests li {
  line-height: 1.6;
  position: relative;
  padding-left: 1rem;
}
.interests li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  font: 400 1rem/1.4 var(--body);
  color: var(--ink);
}
.interests b {
  display: block;
  font: 600 1rem/1.4 var(--display);
  letter-spacing: -.012em;
  margin-bottom: .1rem;
}
/* Optional keyword tail under an axis; sits a shade back so the axis reads first. */
.interests .kw {
  display: block;
  font-size: .88rem;
  color: var(--ink-2);
}

/* Sub-heading inside a section, e.g. Research / Work under Experiences.
   Quieter than .section__hd: a hairline rule instead of a dark one, smaller,
   one ink step back. */
.subhd {
  font: 600 1.08rem/1.4 var(--display);
  letter-spacing: -.012em;
  color: var(--ink-2);
  margin: 1.9rem 0 .9rem;
  /* A hairline under the group name separates it from the cards below without
     competing with the darker rule over .section__hd. */
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--rule);
}
.section__hd + .subhd { margin-top: 0; }

/* Running prose spans the full content column, so the text block lines up with
   the section rules instead of sitting short of them. Long lines need more
   leading for the eye to find the next one, hence 1.8. */
.prose p {
  font: 400 .97rem/1.75 var(--body);
  margin: 0 0 1.1rem;
  /* .content p above sets a reading measure; prose overrides it explicitly -
     dropping the declaration is not enough, the earlier rule still applies. */
  max-width: none;
}
.prose p:last-child { margin-bottom: 0; }

/* entry list — used by Education and Experiences */
.entries { list-style: none; margin: 0; padding: 0; }
.entries > li {
  display: grid;
  /* Wide enough for a full month-to-month range, e.g. "May 2026 - Nov 2026". */
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: .9rem 0;
  border-top: 1px solid var(--rule-2);
}
/* The group's rule is the one under .subhd, so the first row does not draw a
   second line right beneath it. */
.entries > li:first-child { border-top: 0; }
.entry__when {
  font: 400 .78rem/1.9 var(--body);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Optional third column for a partner or institution logo. Only rows carrying
   .entry--logo get it, so an ordinary row keeps the full width for its text. */
.entries > li.entry--logo { grid-template-columns: 9rem minmax(0, 1fr) 11.5rem; }
/* The column is wider than the logo and the logo is pinned to its left edge:
   that moves the logo inward without padding, which would shrink it instead. */
.entry__logo {
  align-self: center;
  justify-self: start;
}
.entry__logo img {
  width: 9.5rem;
  max-height: 3.5rem;
  /* Logos differ in aspect ratio; contain keeps each one whole. */
  object-fit: contain;
}

.entry__what { margin: 0; }
.entry__what b { font-weight: 600; }
.entry__where { display: block; color: var(--ink-2); font-size: .88rem; }
/* Links inside an entry stay quiet: they carry the surrounding ink and a hairline
   underline, and only pick up the accent on hover. */
.entry__where a,
.entry__note a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}
.entry__where a:hover,
.entry__note a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent-soft);
}
/* Secondary annotation under an entry - advisor, a one-line description.
   Set apart from .entry__where by italic, a smaller size and a lighter ink,
   not by a second typeface. */
.entry__note {
  display: block;
  color: var(--ink-3);
  font: italic 400 .84rem/1.6 var(--body);
  margin-top: .3rem;
}

/* --- publication card --------------------------------------------------- */
/* Each paper is its own bordered card so entries read as separate objects
   rather than as rows of one continuous list. */
.pubs { display: flex; flex-direction: column; gap: .9rem; }

/* Legend for the author markers; only rendered when a marker is in use.
   Scoped under .content so it outranks the `.content p` prose margin. */
.content .pub__legend {
  font: 400 .82rem/1.6 var(--body);
  color: var(--accent);
  margin: -.4rem 0 1.1rem;
}

.pub {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem;
  align-items: start;
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pub:hover {
  border-color: var(--accent-soft);
  box-shadow: 0 1px 10px rgba(23, 18, 20, .05);
}
/* The thumbnail column is fixed so titles start on the same line in every
   card; the figure keeps its own aspect ratio inside it. */
.pub--media { grid-template-columns: 13.5rem minmax(0, 1fr); }

.pub__media { width: 100%; }
.pub__media img,
.pub__media video {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--sunk);
}
/* `media_wide: true`: a wide figure would be a thin strip in that column, so
   the column is widened until a strip-shaped figure, uncropped, stands about
   as tall as the text beside it. */
.pub--wide {
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
  align-items: stretch;
}
/* The text alone sets the height of a wide card, so the cards match whatever
   the figure's proportions. The figure is taken out of flow and fitted, whole
   and centred, into the column beside the text: a strip fills the width, a
   squarer figure fills the height. */
.pub--wide .pub__media { position: relative; }
.pub--wide .pub__media img,
.pub--wide .pub__media video {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  max-height: 100%;
}

/* Card text is structured, not prose: `.content p` (a 1rem trailing margin and
   a reading measure) would otherwise win on specificity over every rule below,
   so the paragraphs here are scoped under .pub__body to outrank it. */
.pub__body p { max-width: none; }

/* Venue pill: an explicit `tag`, else the badge, else the year. Shown as
   written, not uppercased, so a name like NeurIPS keeps its own casing. */
.pub__body .pub__pill {
  display: inline-block;
  font: 600 .68rem/1 var(--body);
  letter-spacing: .09em;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: 999px;
  padding: .42em .75em;
  margin: 0 0 .6rem;
}

.pub__title {
  font: 600 1.02rem/1.4 var(--display);
  letter-spacing: -.012em;
  margin: 0 0 .3rem;
  text-wrap: balance;
}
.pub__ref { color: var(--ink-3); }
/* Authors, venue and links are one tight block under the title - the leading
   is trimmed here so the three lines read together. */
.pub__body .pub__authors {
  font: 400 .82rem/1.4 var(--body);
  color: var(--ink-2);
  margin: 0;
}
.pub__body .pub__authors strong { color: var(--ink); font-weight: 600; }
.pub__body .pub__venue {
  font: 400 .78rem/1.4 var(--body);
  color: var(--ink-3);
  margin: .2rem 0 0;
}
.pub__vnote { color: var(--ink-3); }
.pub__body .pub__links {
  font: 400 .78rem/1.4 var(--body);
  margin: .35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .55rem;
}
.pub__body .pub__links .sep { color: var(--rule); }
.pub__bib { margin-top: .45rem; }
.pub__bib summary {
  font: 400 .78rem/1.6 var(--body);
  color: var(--ink-3);
  cursor: pointer;
  width: fit-content;
  list-style: none;
}
.pub__bib summary::-webkit-details-marker { display: none; }
.pub__bib summary::before { content: "\25B8\00a0"; display: inline-block; }
.pub__bib[open] summary { color: var(--ink-2); }
.pub__bib[open] summary::before { content: "\25BE\00a0"; }
.pub__bib pre {
  font: 400 .7rem/1.65 var(--mono);
  background: var(--sunk);
  border: 1px solid var(--rule-2);
  color: var(--ink-2);
  padding: .8rem .9rem;
  margin: .55rem 0 0;
  overflow-x: auto;
  max-width: var(--measure);
}

/* --- footer ------------------------------------------------------------- */
.foot { padding-bottom: 3rem; }
.foot__inner {
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font: 400 .8rem/1.7 var(--body);
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}
/* Copyright and credit read as one line; they wrap together on narrow
   screens rather than the credit jumping to the far edge. */
.foot__left {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem 1rem;
}
/* The badge carries its own underline-free link styling. */
.foot__hits {
  display: inline-flex;
  align-self: center;
  flex: none;
  text-decoration: none;
}
.foot__hits img { display: block; height: 1.25em; width: auto; }
.foot a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}
.foot a:hover { color: var(--accent); text-decoration-color: var(--accent-soft); }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem;
  position: fixed;
  z-index: 10;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: .5rem .9rem;
  font: 400 .8rem var(--body);
}

/* --- narrow ------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-links a { padding: .4rem .5rem; font-size: .77rem; }

  /* The portrait moves above the text and shrinks rather than squeezing the
     bio into a narrow column. */
  .about-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  .about-photo { order: -1; justify-content: flex-start; }
  .photo-circle { max-width: 9rem; }
  .name { font-size: 1.7rem; }

  .content > section { padding: 2.25rem 0; }

  .entries > li,
  .entries > li.entry--logo { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  /* Stacked layout: the logo sits under the text, at its own size, left-aligned. */
  .entry__logo { margin-top: .5rem; }
  .entry__logo img { width: auto; max-width: 9.5rem; }
  .entry__when { line-height: 1.6; }

  /* Narrow screens: the thumbnail stacks above the text instead of beside it. */
  .pub, .pub--media {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
    padding: 1.1rem 1.1rem;
  }
  .pub__media { max-width: 20rem; }
  /* Stacked, a wide figure spans the card at its own proportions. */
  .pub--wide .pub__media { max-width: none; }
  .pub--wide .pub__media img,
  .pub--wide .pub__media video { position: static; width: 100%; max-height: none; }
}