:root {
  --bg: #ffffff;
  --text: #111111;
  --link: #0b57d0;
  --award: #DC143C;
  --muted: #333333;
  --rule: #bbbbbb;
  --font-body: Charter, "Bitstream Charter", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, Garamond, "Times New Roman", Times, "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --size: 16px;
  --leading: 1.65;
  --max: 880px;
  --pad: 20px;
  --gap: 14px;
  --li-gap: 6px;
}
/* mit.edu/~ziyinl — both pages. Every colour, font and size above is a Theme token. The home page
   (body.page-home) is centred, with left-aligned text sections; the publications page
   (body.page-publications) is a plain list with a field filter. Each page's rules are scoped to it,
   in the same order (and so with the same outcome) as the hand-written pages they came from. */

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size);
  line-height: var(--leading);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.page {
  width: min(100% - 2*var(--pad), var(--max));
  margin-inline: auto;
  padding-block: 24px 56px;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.award { color: var(--award); }

/* Field labels */
.tags { display:inline-flex; flex-wrap:wrap; gap:5px; vertical-align:middle; margin:0 2px; }
.tag {
  display:inline-flex; align-items:center; gap:3px;
  font-family: var(--font-ui);
  font-size:0.68em; font-weight:600; line-height:1; letter-spacing:0.02em;
  padding:3px 8px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
}
.tag.phys  { background:#eef2ff; color:#3538cd; border-color:#c7d2fe; }
.tag.neuro { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.tag.ai    { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }

/* ── home page ── */
body.page-home { text-align: center; }
.page-home h1, .page-home h2, .page-home p, .page-home ul, .page-home ol, .page-home hr { margin-block: var(--gap); }
.page-home h1 { font-size: 2rem; margin-top: calc(var(--gap) * 0.5); }
.page-home h2 { font-size: 1.35rem; margin-top: 1.2rem; }
.page-home h1, .page-home h2, .page-home h3 { font-weight: 700; letter-spacing: 0.003em; }
.page-home hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, #0000, var(--rule), #0000);
  margin-block: 18px;
}
.page-home img, .page-home video, .page-home canvas, .page-home svg {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
}
.page-home .portrait {
  width: 175px;
  height: 214px;            /* fixed box so hover-swaps don't reflow the page */
  object-fit: contain;      /* show the full image (artwork), never crop */
  border-radius: 8px;
  cursor: pointer;
}
.page-home ul, .page-home ol { list-style-position: inside; padding: 0; }
.page-home .align-left { text-align: left; }
.page-home .footnote { font-size: 0.95rem; color: var(--muted); }
.page-home :where(ol) > li + li { margin-top: var(--li-gap); }
.page-home .counter-stub { display: block; color: #999; font-family: var(--font-ui); font-size: .8rem; }

/* Selected Work: left-aligned, numbers hanging so wrapped lines line up */
.page-home ol.selected { list-style-position: outside; padding-left: 1.9em; }
.page-home ol.selected > li { padding-left: .15em; }
.page-home ol.selected > li::marker { color: #666; font-variant-numeric: tabular-nums; }
.page-home ol.selected > hr { margin-left: -1.9em; }

/* Figures: small thumbnails ("avatars") at the right of a paper; hover, focus or tap opens a larger, playing view */
.page-home ol li.has-figs { position: relative; padding-right: calc(64px + (var(--n) - 1) * 44px + 18px); }
.page-home .figs { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; }
.page-home .fig { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; line-height: 0; transition: transform .15s; }
.page-home .fig + .fig { margin-left: -20px; }
.page-home .fig img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba(0,0,0,.2); }
.page-home .fig:hover, .page-home .fig:focus-visible { transform: translateY(-3px); position: relative; z-index: 1; }
.page-home .fig:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.page-home .fig-pop { position: fixed; z-index: 50; box-sizing: border-box; padding: 8px; background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.25); pointer-events: none; }
.page-home .fig-pop img { display: block; width: 100%; height: auto; border-radius: 6px; }
@media (max-width: 560px) {
  .page-home ol li.has-figs { padding-right: 0; }
  .page-home .figs { position: static; transform: none; justify-content: flex-start; margin-top: 8px; }
}

/* ── publications page ── */
.page-publications h1 { font-size: 2rem; margin-block: 0.4rem; }
.page-publications h2 { font-size: 1.35rem; margin-top: 1.8rem; font-weight: 700; }
.page-publications hr {
  border: none; height: 1px;
  background: linear-gradient(90deg, #0000, var(--rule), #0000);
  margin-block: 18px;
}
.page-publications ol { padding-left: 1.5em; }
.page-publications ol li { margin-bottom: 14px; }
.page-publications .back { font-size: 0.95rem; }

/* Filter bar */
.filter-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0 2px;
  font-family: var(--font-ui); }
.filt { cursor:pointer; font-family:inherit; font-size:0.85rem; font-weight:600; line-height:1;
  padding:7px 13px; border-radius:999px; border:1px solid #d0d5dd; background:#fff; color:#344054;
  transition:background .12s,border-color .12s,color .12s; }
.filt:hover { border-color:#98a2b3; }
.filt[data-f="all"].active { background:#111; color:#fff; border-color:#111; }
.filt.phys.active  { background:#eef2ff; color:#3538cd; border-color:#c7d2fe; }
.filt.neuro.active { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.filt.ai.active    { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.filter-count { font-size:0.8rem; color:#667085; margin-left:2px; }