style.css

:root {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --ink: #1c1b19;
  --muted: #6b6862;
  --faint: #8f8b84;
  --rule: #e7e3dc;
  --accent: #375a7f;      /* muted academic blue */
  --accent-2: #a03a2e;    /* warm marker for peer-reviewed star */
  --maxw: 46rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161a; --surface: #1e1e23; --ink: #e9e7e2; --muted: #a6a29a; --faint: #7c786f;
    --rule: #33323a; --accent: #8fb4d9; --accent-2: #e08a7c;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  max-width: var(--maxw); padding: 3rem 1.25rem 4rem; margin-inline: auto;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }

/* --- hero --- */
.hero { display: flex; gap: 1.6rem; align-items: flex-start; }
.photo {
  width: 8.25rem; height: auto; border-radius: 10px; flex: none;
  border: 1px solid var(--rule); box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.intro { min-width: 0; }
h1 { font-size: 2rem; margin: .1rem 0 .15rem; letter-spacing: -0.01em; }
.affil { margin: 0 0 .7rem; color: var(--muted); font-weight: 500; }
.bio { margin: 0 0 1rem; max-width: 34rem; }
.biolink { white-space: nowrap; font-size: .92em; }
.links { display: flex; flex-direction: column; gap: .4rem; font-size: .95rem; }
.linkrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .95rem; }
.linkrow a { white-space: nowrap; }
.linklabel { flex: none; min-width: 4.75rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); }

/* --- publications --- */
.backlink { font-size: .9rem; margin: 0 0 1.6rem; }
#pubs { margin-top: 2.6rem; }
#pubs:first-child, section#pubs { margin-top: 0; }
.pubs-head { border-bottom: 2px solid var(--rule); padding-bottom: .35rem; margin-bottom: 1.1rem; }
#pubs h1, #pubs h2 { font-size: 1.5rem; margin: 0; }
.count { margin: .3rem 0 .1rem; font-size: 1rem; color: var(--muted); font-weight: 500; }
.legend { margin: .3rem 0 0; font-size: .85rem; color: var(--faint); }

h3.year {
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
  margin: 1.7rem 0 .55rem; font-weight: 700;
}
.year-list { list-style: none; margin: 0; padding: 0; }
.pub {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: .55rem;
  padding: .5rem 0; border-top: 1px solid var(--rule);
}
.year-list .pub:first-child { border-top: none; }
.mark { font-size: .8rem; line-height: 1.7; text-align: center; user-select: none; }
.mark.peer { color: var(--accent-2); }
.mark.other { color: var(--faint); font-weight: 700; }
.pub-body { min-width: 0; }
.title { font-weight: 600; }
.authors, .venue { display: block; font-size: .9rem; color: var(--muted); margin-top: .12rem; }
.authors b { color: var(--ink); font-weight: 600; }
.venue { font-style: italic; color: var(--faint); }
.links { display: block; margin-top: .25rem; }
.artefact {
  display: inline-block; margin-right: .4rem;
  padding: .02rem .45rem; font-size: .8rem; line-height: 1.6;
  border: 1px solid var(--rule); border-radius: .6rem; color: var(--accent);
}
.artefact:hover { text-decoration: none; border-color: var(--accent); background: var(--surface); }

footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-size: .8rem; color: var(--faint); }
footer code { font-size: .95em; background: var(--surface); padding: .05rem .3rem; border-radius: 4px;
  border: 1px solid var(--rule); }

@media (max-width: 34rem) {
  body { padding-top: 2rem; }
  .hero { flex-direction: column; gap: 1rem; }
  .photo { width: 7rem; }
  h1 { font-size: 1.7rem; }
}