:root {
  --bg: #fdfdfb; --fg: #1a1a1a; --muted: #6a6a6a;
  --accent: #b5121b; --line: #e2e2dd; --tag-bg: #efefea;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono",
          Menlo, Consolas, monospace;
}
:root[data-theme="dark"] {
  --bg: #11131a; --fg: #d6d6d0; --muted: #7e8696;
  --accent: #ff5f6d; --line: #232631; --tag-bg: #1b1e27;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #11131a; --fg: #d6d6d0; --muted: #7e8696;
    --accent: #ff5f6d; --line: #232631; --tag-bg: #1b1e27;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--mono); font-size: 15px; line-height: 1.6;
}
main { max-width: 48rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; }

/* ---- header : avatar + identité + toggle -------------------------------- */
header { display: flex; align-items: flex-start; gap: 1rem; }
.avatar {
  flex: 0 0 auto; width: 60px; height: 60px; object-fit: cover;
  border: 1px solid var(--line); border-radius: 6px;
}
.id { flex: 1 1 auto; min-width: 0; }
h1 { font-size: 1.25rem; font-weight: 600; margin: 0; }
.sub { color: var(--muted); font-weight: 400; }
.role { color: var(--fg); margin: .3rem 0 0; }
.role a { color: var(--accent); text-decoration: none; }
.role a:hover { text-decoration: underline; }
.interests { color: var(--muted); margin: .2rem 0 0; font-size: .92rem; }
.links { margin-top: .55rem; color: var(--muted); }

.theme-toggle {
  flex: 0 0 auto; font: inherit; font-size: .8rem; color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: 5px;
  padding: .2rem .5rem; cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ---- links --------------------------------------------------------------- */
a {
  color: var(--fg); text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 2px;
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---- projects ------------------------------------------------------------ */
.section-label {
  color: var(--muted); font-size: .85rem; font-weight: 600; margin: 2.75rem 0 0;
  padding-bottom: .4rem; border-bottom: 1px solid var(--line);
}
.projects { list-style: none; padding: 0; margin: 0; }
.proj { display: flex; gap: 1.1rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.proj:first-child { border-top: none; }

.proj-thumb { flex: 0 0 132px; display: block; line-height: 0; text-decoration: none; }
.proj-thumb img {
  width: 100%; height: auto; display: block; background: #fff;
  border: 1px solid var(--line); border-radius: 6px;
}

.proj-body { flex: 1 1 auto; min-width: 0; }
.proj-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.proj-title { font-weight: 600; color: var(--fg); text-decoration: none; }
.proj-title:hover { color: var(--accent); }
.proj-year { color: var(--muted); font-size: .85rem; flex: 0 0 auto; }
.proj-blurb { margin: .4rem 0 .7rem; color: var(--muted); }
.proj-meta {
  display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; font-size: .85rem;
}
.tags { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.tag { background: var(--tag-bg); color: var(--muted); padding: .05rem .4rem; border-radius: 3px; }
.proj-links { margin-left: auto; color: var(--muted); white-space: nowrap; }

/* ---- publications (full record, grouped by year) ------------------------ */
.pub-group { display: flex; gap: 1.1rem; align-items: baseline; margin-top: 1.25rem; }
.pub-year { flex: 0 0 3rem; color: var(--muted); font-size: .85rem; font-weight: 600; }
.pubs { flex: 1 1 auto; min-width: 0; list-style: none; padding: 0; margin: 0; }
.pub { display: flex; gap: .85rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.pub:first-child { border-top: none; padding-top: 0; }
.pub-thumb { flex: 0 0 88px; display: block; line-height: 0; align-self: flex-start; }
.pub-thumb img {
  width: 88px; height: 88px; object-fit: cover; background: #fff;
  border: 1px solid var(--line); border-radius: 6px;
}
.pub-main { flex: 1 1 auto; min-width: 0; }
.pub-title { font-weight: 600; color: var(--fg); text-decoration: none; }
.pub-title:hover { color: var(--accent); }
.pub-authors { margin: .25rem 0 0; color: var(--muted); font-size: .85rem; }
.pub-authors .me { color: var(--fg); font-weight: 600; }
.pub-venue { margin: .1rem 0 0; color: var(--muted); font-size: .85rem; font-style: italic; }
.pub-links { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); }
.pub-note { margin: 1.75rem 0 0; color: var(--muted); font-size: .75rem; }
.pub.is-hidden, .pub-group.is-hidden { display: none; }
.more-btn {
  margin-top: 1.25rem; font: 600 12px var(--mono); color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: 5px;
  padding: .25rem .7rem; cursor: pointer;
}
.more-btn:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 30rem) {
  .pub-group { flex-direction: column; gap: .25rem; }
}

/* ---- footer -------------------------------------------------------------- */
footer {
  margin-top: 3.5rem; padding-top: 1rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .8rem;
}
footer p { margin: 0; }

/* ---- mobile -------------------------------------------------------------- */
@media (max-width: 30rem) {
  .proj-thumb { flex-basis: 96px; }
  .proj-head { flex-wrap: wrap; }
}