/* Inter, self-hosted (variable weight and optical size; latin + latin-ext). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-var-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-var-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;
}

/* ==========================================================================
   Palette
   The interface is neutral so that the illustrations carry the colour.
   A single navy-blue tint is used sparingly: page titles (deep navy by day,
   pale blue by night), links, and the marker under the current page in the
   navigation. Each token holds its day and night value; the page follows
   the system setting unless the toggle sets data-theme on <html>.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --bg: light-dark(#f6f7f9, #101217);
  --surface: light-dark(#ffffff, #161a20);
  --mount: light-dark(#eceef2, #0b0d11);
  --header-bg: light-dark(rgb(246 247 249 / 0.88), rgb(16 18 23 / 0.86));

  --heading: light-dark(#1b2f4f, #cfe0f6);
  --ink: light-dark(#17191e, #e6e8ec);
  --ink-2: light-dark(#3a3e47, #c5cad3);
  --muted: light-dark(#5c6370, #9aa1ad);
  --line: light-dark(#e1e4ea, #252a33);
  --line-strong: light-dark(#c8ccd6, #363c48);

  --accent: light-dark(#2a5385, #9fc3ec);
  --accent-soft: light-dark(#dde6f3, #1f2c40);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Content column, and the edge strip that fills the margin to its left.
     The strip stops --edge-gap short of the text. On narrower windows it
     keeps a minimum width and the column moves right to make room. */
  --gutter: clamp(1rem, 3vw, 2rem);
  --shell: 1040px;
  --edge-gap: 24px;
  --edge-min: clamp(48px, 7vw, 96px);
  --edge-w: min(420px, max(var(--edge-min), calc((100vw - var(--shell)) / 2 + var(--gutter) - var(--edge-gap))));
  --shell-left: max(calc((100vw - var(--shell)) / 2), calc(var(--edge-w) + var(--edge-gap) - var(--gutter)));
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

h1 {
  color: var(--heading);
}

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

img {
  display: block;
  max-width: 100%;
}

time {
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

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

.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 20;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Small uppercase labels */
.kicker,
.page-kicker,
.section-label,
.status-label,
.github-handle,
.other-sites span {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ==========================================================================
   Illustrations
   site.js fills every [data-art] slot with one randomly chosen set and
   variant. Slots keep their own shape; the image covers it.
   ========================================================================== */

.art {
  position: relative;
  overflow: hidden;
  background: var(--mount);
}

.art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 500ms ease;
}

.art img.is-pending {
  opacity: 0;
}

/* Hairline inside the edge of framed images */
.plate::before,
.hero-print::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
  content: "";
  pointer-events: none;
}

:root[data-theme="dark"] .art:not(.edge) img {
  filter: brightness(0.86);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .art:not(.edge) img {
    filter: brightness(0.86);
  }
}

/* Add ?art to a URL to label each slot with the set and variant shown. */
.art[data-art-label]::after {
  position: absolute;
  bottom: 6px;
  left: 6px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgb(0 0 0 / 0.72);
  color: #fff;
  content: attr(data-art-label);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}

/* Left-hand strip: a slice of an illustration filling the margin beside
   the content column. It fades out towards the text, so it reads as part
   of the page rather than a separate panel, and is slightly softened.
   site.js sizes and places the image so that its main feature is centred
   in the strip, and pans it as the page scrolls. */
.edge {
  --edge-fade: linear-gradient(to right, rgb(0 0 0 / 0.92) 0%, rgb(0 0 0 / 0.86) 58%, transparent 100%);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  width: var(--edge-w);
  filter: saturate(0.88);
  -webkit-mask-image: var(--edge-fade);
  mask-image: var(--edge-fade);
}

.edge img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
}

:root[data-theme="dark"] .edge {
  filter: brightness(0.8) saturate(0.88);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .edge {
    filter: brightness(0.8) saturate(0.88);
  }
}

/* Picture beside each page title */
.plate {
  width: clamp(260px, 34vw, 450px);
  aspect-ratio: 3 / 1;
  margin: 0;
  border-radius: 6px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.site-header-inner {
  display: flex;
  max-width: var(--shell);
  min-height: 60px;
  align-items: center;
  gap: 1.75rem;
  margin: 0 auto 0 var(--shell-left);
  padding: 0 var(--gutter);
}

.site-brand {
  display: grid;
  gap: 1px;
  margin-right: auto;
  color: var(--ink);
  line-height: 1.2;
  text-decoration: none;
}

.site-brand strong {
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.site-brand small {
  color: var(--muted);
  font-size: 0.78rem;
}

.site-nav {
  display: flex;
  gap: 1.5rem;
}

.site-nav a {
  position: relative;
  display: flex;
  min-height: 60px;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--accent);
  content: "";
  opacity: 0;
  transition: opacity 150ms ease;
}

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

.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-nav a[aria-current="page"]::after {
  opacity: 1;
}

.theme-toggle {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}

.theme-toggle:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
}

.theme-toggle .icon-sun,
:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: block;
  }
}

/* ==========================================================================
   Page shell (all pages)
   ========================================================================== */

.page-shell {
  width: min(var(--shell), 100% - var(--shell-left));
  margin-left: var(--shell-left);
  padding: clamp(1.5rem, 4vw, 2.6rem) var(--gutter) clamp(2.5rem, 5vw, 3.5rem);
}

.page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  margin-bottom: 1.6rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.page-heading h1 {
  margin: 0.35rem 0 0;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.page-description {
  max-width: 30em;
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.page-content > :first-child {
  margin-top: 0;
}

.page-content h2 {
  margin: 2.2rem 0 0.8rem;
  font-size: 1.15rem;
}

.page-content p {
  max-width: 44em;
}

.lede {
  margin-bottom: 0.6rem;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.5;
}

.funding-panel,
.opportunity-panel,
.theme-card,
.github-activity {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

/* ==========================================================================
   Home: introduction beside the moiré figure, recent items below.
   On desktop the content fits in one window.
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 25vw, 320px);
  align-items: start;
  gap: clamp(2rem, 4vw, 3.25rem);
}

.hero h1 {
  margin: 0.45rem 0 0;
  font-size: clamp(2.3rem, 3.8vw, 3rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.affiliation {
  margin-top: 0.85rem;
}

.affiliation p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.affiliation .role {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
}

.intro {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.intro p {
  margin: 0 0 0.65rem;
  color: var(--ink-2);
  font-size: 0.94rem;
  line-height: 1.6;
}

.intro p:first-child {
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.55;
}

.home-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.5rem;
  margin-top: 0.9rem;
  font-size: 0.84rem;
}

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.95rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-links a {
  font-weight: 550;
  text-decoration: none;
}

.home-links a:hover {
  text-decoration: underline;
}

.home-links a span {
  margin-left: 0.12rem;
  color: var(--muted);
  font-size: 0.74rem;
}

.other-sites {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.95rem;
}

.other-sites span {
  font-size: 0.64rem;
}

.hero-figure {
  margin: 0.2rem 0 0;
}

.hero-print {
  aspect-ratio: 928 / 1232;
  border-radius: 6px;
}

.hero-figure figcaption {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.hero-figure figcaption strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.hero-figure figcaption a {
  color: inherit;
}

.recent {
  margin-top: clamp(1.25rem, 3vh, 2rem);
}

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 0.35rem;
}

.section-heading h2 {
  margin: 0;
}

.section-heading > a {
  font-size: 0.8rem;
  font-weight: 550;
  text-decoration: none;
}

.section-heading > a:hover {
  text-decoration: underline;
}

.news-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
}

.news-item {
  display: grid;
  grid-template-columns: 5.4rem 6.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--line);
}

.news-item p {
  display: contents;
}

.news-item time {
  color: var(--muted);
  font-size: 0.78rem;
}

.news-item .venue {
  justify-self: start;
}

.news-item a {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-item a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Journal colours ----------------------------------------------------------
   Each journal gets a hue; all share the same muted lightness and chroma, so
   the set reads as one quiet palette. Preprints (arXiv) are neutral grey.
   Used for the venue pills on the homepage and the publication list. */

[data-venue] {
  --venue-h: 255;
  --venue-c: 1;
}

[data-venue="science"] { --venue-h: 22; }
[data-venue="npj2d"] { --venue-h: 355; }
[data-venue="nat-comms"] { --venue-h: 50; }
[data-venue="sci-rep"] { --venue-h: 75; }
[data-venue="acad-nano"] { --venue-h: 95; }
[data-venue="jnm"] { --venue-h: 115; }
[data-venue="appss"] { --venue-h: 140; }
[data-venue="carbon"] { --venue-h: 165; }
[data-venue="small"] { --venue-h: 190; }
[data-venue="acs-nano"] { --venue-h: 215; }
[data-venue="materials"] { --venue-h: 235; }
[data-venue="adv-mater"] { --venue-h: 255; }
[data-venue="prb"] { --venue-h: 275; }
[data-venue="nanolett"] { --venue-h: 305; }
[data-venue="dib"] { --venue-h: 330; }
[data-venue="arxiv"] { --venue-c: 0; }

.venue,
.venue-badge {
  width: max-content;
  padding: 0.04rem 0.5rem;
  border: 1px solid light-dark(oklch(0.86 calc(0.05 * var(--venue-c)) var(--venue-h)), oklch(0.42 calc(0.05 * var(--venue-c)) var(--venue-h)));
  border-radius: 999px;
  background: light-dark(oklch(0.96 calc(0.028 * var(--venue-c)) var(--venue-h)), oklch(0.28 calc(0.035 * var(--venue-c)) var(--venue-h)));
  color: light-dark(oklch(0.47 calc(0.1 * var(--venue-c)) var(--venue-h)), oklch(0.85 calc(0.075 * var(--venue-c)) var(--venue-h)));
  font-size: 0.7rem;
  font-weight: 550;
  line-height: 1.5;
  white-space: nowrap;
}

/* Publications ----------------------------------------------------------- */

.publication-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.publication-tools label {
  color: var(--muted);
  font-size: 0.82rem;
}

.publication-tools input {
  width: min(100%, 320px);
  min-height: 36px;
  padding: 0 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
}

.publication-tools input::placeholder {
  color: var(--muted);
}

.year-group {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1.4rem;
}

.year-group[hidden],
.publication-item[hidden] {
  display: none;
}

.page-content .year-group > h2 {
  position: sticky;
  top: 76px;
  align-self: start;
  margin: 0;
  padding-top: 0.7rem;
  color: var(--muted);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.publication-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.publication-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}

.publication-item h3 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

.publication-item h3 a {
  color: var(--ink);
  text-decoration: none;
}

.publication-item h3 a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.publication-authors {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.author-self {
  color: var(--ink);
  font-weight: 600;
}

.publication-meta .arxiv-link {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  text-decoration: none;
}

.publication-meta .arxiv-link::before {
  display: inline-block;
  margin: 0 0.4rem 0 0.15rem;
  content: "·";
}

.publication-meta .arxiv-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.publication-meta {
  margin: 0.2rem 0 0;
  color: light-dark(oklch(0.47 calc(0.09 * var(--venue-c, 0)) var(--venue-h, 0)), oklch(0.82 calc(0.07 * var(--venue-c, 0)) var(--venue-h, 0)));
  font-size: 0.8rem;
  font-style: italic;
}

/* Recruiting ------------------------------------------------------------- */

.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.9rem;
  margin: 1.2rem 0 0.4rem;
}

.funding-panel,
.opportunity-panel {
  margin: 0;
  padding: 1.1rem 1.25rem;
}

.page-content .funding-panel h2,
.page-content .opportunity-panel h2 {
  margin: 0.35rem 0 0.4rem;
  font-size: 1.08rem;
}

.funding-panel p {
  margin: 0 0 0.9rem;
  color: var(--ink-2);
  font-size: 0.92rem;
}

.historical-projects .panel-note {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.86rem;
}

.opportunity-panel article {
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.opportunity-panel article + article {
  margin-top: 0.75rem;
}

.opportunity-panel h3 {
  margin: 0 0 0.2rem;
  font-size: 0.92rem;
  line-height: 1.4;
}

.opportunity-panel article p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.status-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.66rem;
}

.status-label::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.status-label.status-neutral::before {
  background: var(--muted);
}

.quiet-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg);
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 150ms ease;
}

.quiet-button:hover {
  border-color: var(--accent);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

.theme-card {
  padding: 1rem 1.15rem;
}

.theme-card h3 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
}

.theme-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* Research ---------------------------------------------------------------- */

.research-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.6rem 0 1rem;
}

.research-card,
.collab-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.research-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
}

.card-art {
  aspect-ratio: 3 / 1;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.research-card-body {
  padding: 1rem 1.2rem 0.35rem;
}

.page-content .research-card h2,
.page-content .collab-panel h2 {
  margin: 0.4rem 0 0.6rem;
  font-size: 1.08rem;
  line-height: 1.3;
}

.research-card-body p:not(.status-label),
.collab-panel p:not(.status-label) {
  margin: 0 0 0.7rem;
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.6;
}

.research-related {
  margin-top: auto;
  padding: 0.75rem 1.2rem 0.95rem;
  border-top: 1px solid var(--line);
}

.page-content .research-related h3 {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.research-related ul,
.collab-panel ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.research-related li,
.collab-panel li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.84rem;
  line-height: 1.45;
}

.research-related li a,
.collab-panel li a {
  text-decoration: none;
}

.research-related li a:hover,
.collab-panel li a:hover {
  text-decoration: underline;
}

.research-related .venue,
.collab-panel .venue {
  font-size: 0.64rem;
}

.related-note {
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

.collab-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
  padding: 1.1rem 1.25rem;
}

.collab-panel p:not(.status-label) {
  margin: 0;
}

/* Tools ------------------------------------------------------------------ */

.github-activity {
  padding: 1.1rem 1.25rem;
}

.github-activity-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1rem;
}

.page-content .github-activity h2 {
  margin: 0.3rem 0 0;
  font-size: 1.08rem;
}

.contribution-chart-frame {
  overflow-x: auto;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.contribution-chart {
  display: block;
  width: 663px;
  margin: 0 auto;
}

.contribution-chart img {
  width: 663px;
  max-width: none;
  height: 104px;
}

.contribution-note {
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

:root[data-theme="dark"] .contribution-chart-frame {
  background: #0b0b10;
}

:root[data-theme="dark"] .contribution-chart img {
  filter: invert(1) hue-rotate(180deg) brightness(1.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .contribution-chart-frame {
    background: #0b0b10;
  }

  :root:not([data-theme="light"]) .contribution-chart img {
    filter: invert(1) hue-rotate(180deg) brightness(1.1);
  }
}

/* Links and news archive ------------------------------------------------- */

.reading-list,
.news-archive {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.reading-list a {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

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

.reading-list b {
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.reading-list span {
  font-size: 1rem;
  font-weight: 500;
}

.reading-list i {
  color: var(--muted);
  font-size: 0.85rem;
  font-style: normal;
}

.news-archive li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}

.news-archive time {
  padding-top: 0.1rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.page-content .news-archive h2 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

.news-archive h2 a {
  text-decoration: none;
}

.news-archive h2 a:hover {
  text-decoration: underline;
}

.news-archive p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  flex: none;
  border-top: 1px solid var(--line);
}

.site-footer-inner {
  display: flex;
  max-width: var(--shell);
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 0 auto 0 var(--shell-left);
  padding: 0.8rem var(--gutter);
  color: var(--muted);
  font-size: 0.8rem;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Short desktop windows: tighten the homepage so it still fits. */
@media (min-width: 761px) and (max-height: 840px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 290px;
  }

  .hero h1 {
    font-size: clamp(2.1rem, 3.4vw, 2.6rem);
  }

  .home {
    padding-top: 1.25rem;
  }

  .affiliation p {
    font-size: 0.84rem;
  }

  .intro {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
  }

  .intro p {
    margin-bottom: 0.45rem;
    font-size: 0.87rem;
    line-height: 1.55;
  }

  .intro p:first-child {
    font-size: 0.97rem;
  }

  .home-links {
    margin-top: 0.7rem;
  }

  .recent {
    margin-top: 1.1rem;
  }

  .news-item {
    padding: 0.24rem 0;
  }
}

@media (max-width: 860px) {
  .site-header-inner {
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: 0.5rem;
  }

  .site-nav {
    order: 3;
    width: 100%;
    gap: 1.3rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-nav a {
    min-height: 42px;
    flex: none;
  }
}

@media (max-width: 800px) {
  .research-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-figure {
    width: min(100%, 340px);
  }
}

@media (max-width: 640px) {
  :root {
    --edge-w: 0px;
    --shell-left: 0px;
  }

  /* The edge strip becomes a thin band across the top of the page. */
  .edge {
    position: relative;
    width: auto;
    height: 44px;
    flex: none;
    border-bottom: 1px solid var(--line-strong);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .edge img {
    position: static;
    width: 100%;
    height: 100%;
  }

  .page-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .plate {
    width: 100%;
    aspect-ratio: 5 / 2;
  }

  .publication-tools {
    align-items: stretch;
    flex-direction: column;
    gap: 0.4rem;
  }

  .publication-tools input {
    width: 100%;
  }

  .year-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .page-content .year-group > h2 {
    position: static;
  }

  .publication-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }

  .theme-grid,
  .panel-grid,
  .collab-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .github-activity-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
  }

  .contribution-chart {
    margin: 0;
  }

  .news-item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.15rem 0.6rem;
    padding: 0.5rem 0;
  }

  .news-item .venue {
    justify-self: end;
  }

  .news-item a {
    grid-column: 1 / -1;
    white-space: normal;
  }

  .news-archive li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .site-footer-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}