/* ============================================================
   Palette. Change the accent in one place: --link.
   ============================================================ */
/* Dark is the default for everyone. The toggle switches to light and the
   choice is remembered.

   To follow the visitor's OS setting instead, wrap the light block below in
   @media (prefers-color-scheme: light) and change its selector to
   :root:not([data-theme="dark"]). */
:root {
  --bg:      #111111;
  --text:    #e8e6e3;
  --muted:   #a8a29e;
  --rule:    #333333;
  --link:    #4a9eff;
  --sep:     #666666;
  --card:    #191919;

  color-scheme: dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

/* Light, applied only when the visitor picks it.
   Contrast against #ffffff, WCAG AA needs 4.5:1 for body text:
     text  #1c1917  16.9:1   muted #6b6560  5.3:1   link #1a56c4  6.4:1  */
:root[data-theme="light"] {
  --bg:      #ffffff;
  --text:    #1c1917;
  --muted:   #6b6560;
  --rule:    #e4e2df;
  --link:    #1a56c4;
  --sep:     #a8a29e;
  --card:    #f7f6f4;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { width: 100%; }

body {
  margin: 0;
  color: var(--text);
  background-color: var(--bg);
  transition: background-color .15s ease, color .15s ease;
}

.container {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* Reading measure. The 780px column is right for structure — publication
   entries, news with its date gutter, roles with right-aligned dates. But
   at 17px that column runs ~100 characters per line, and comfortable prose
   is 65–75. So running text gets its own narrower measure while the page
   keeps its width. */
:root { --measure: 31em; }

.abstract p,
.entry ul li,
section > ul:not(.pubs):not(.news) li,
.skill-row {
  max-width: var(--measure);
}

/* ---------- Typography ---------- */
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--text); font-weight: 700; }

h2 {
  font-size: 1.25rem;
  border-bottom: 1px solid var(--rule);
  margin-top: 2rem;
  margin-bottom: .5rem;
  padding-bottom: 3px;
}

p { margin: .4rem 0; }

.muted { color: var(--muted); }

/* ---------- Header ---------- */
header.masthead {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

header.masthead img.avatar {
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 8px;
  flex-shrink: 0;
}

header.masthead .identity { flex: 1 1 300px; }

header.masthead h1 {
  margin: 0 0 4px 0;
  font-size: 1.75rem;
  line-height: 1.25;
}

.subtitle { color: var(--muted); margin-bottom: .75rem; }

.linkrow { margin-top: .9rem; font-size: .95rem; }
.linkrow .sep { color: var(--sep); }

/* ---------- Theme toggle ----------
   The button carries BOTH labels; CSS shows whichever matches the current
   theme. That way the right words are on screen before any JavaScript runs,
   so the label can never flash the wrong state. The text names what you will
   GET if you click, not what you are looking at now. */
#theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
#theme-toggle:hover { color: var(--text); border-color: var(--sep); }
#theme-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Default (dark) shows the "go light" label; light shows the "go dark" one. */
#theme-toggle .when-light { display: none; }
:root[data-theme="light"] #theme-toggle .when-dark { display: none; }
:root[data-theme="light"] #theme-toggle .when-light { display: inline; }

/* ---------- Generic lists ---------- */
ul { padding-left: 1.15rem; margin: .5rem 0; }
li { margin: .3rem 0; }

ul.plain { list-style: none; padding-left: 0; }

/* ---------- Interests as inline tags ---------- */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.tag {
  font-size: .85rem;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .15rem .65rem;
}

/* ---------- Publications ---------- */
ul.pubs { list-style: none; padding-left: 0; }
ul.pubs > li { margin: 0 0 1.1rem 0; }

.pub-title { font-weight: 600; }
.pub-title a { color: var(--text); }
.pub-title a:hover { color: var(--link); text-decoration: none; }

.pub-authors { font-size: .92rem; margin-top: .1rem; }
.pub-venue { color: var(--muted); font-size: .92rem; margin-top: .1rem; }
.pub-links { font-size: .88rem; margin-top: .25rem; }

.badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: .05rem .4rem;
  margin-left: .4rem;
  vertical-align: 1.5px;
  border: 1px solid currentColor;
}
/* Bright inks on the dark default. Contrast against #111:
   green 9.7:1, amber 11.4:1, blue 6.3:1 — all well past AA. */
.badge-published { color: #4ade80; }
.badge-review    { color: #fbbf24; }
.badge-preprint  { color: #60a5fa; }
.badge-prep      { color: var(--muted); }

/* Deep inks on white. Contrast: green 4.9:1, amber 4.6:1, blue 6.9:1. */
:root[data-theme="light"] .badge-published { color: #15803d; }
:root[data-theme="light"] .badge-review    { color: #92620a; }
:root[data-theme="light"] .badge-preprint  { color: #1d4ed8; }

/* ---------- News ---------- */
ul.news { list-style: none; padding-left: 0; }
ul.news li {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  margin: .45rem 0;
}
ul.news .when { color: var(--muted); flex: 0 0 92px; font-size: .92rem; }
ul.news .what { flex: 1; }

/* ---------- Experience / Education ---------- */
.entry { margin: .9rem 0; }
.entry-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: baseline;
}
.entry-role { font-weight: 600; }
.entry-when { color: var(--muted); font-size: .92rem; white-space: nowrap; }
.entry-org { color: var(--muted); font-size: .95rem; }
.entry ul { margin-top: .35rem; }
.entry ul li { font-size: .95rem; }

/* ---------- Skills ---------- */
.skill-row { margin: .45rem 0; font-size: .95rem; }
.skill-row .skill-group { font-weight: 600; }

/* ---------- Paper detail page ---------- */
.paper-back { margin-bottom: 1.5rem; }
.paper h1 { font-size: 1.5rem; margin: 0 0 .35rem; }
.paper .abstract p { margin: .8rem 0; }

/* ---------- Footer ---------- */
footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: .85rem;
}

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
  :root { font-size: 16px; }
  .container { padding: 1.5rem 1.15rem 3rem; }
  header.masthead { gap: 1.25rem; }
  header.masthead img.avatar { width: 110px; height: 110px; }
  ul.news li { flex-direction: column; gap: .1rem; }
  ul.news .when { flex: none; }
  .entry-head { gap: .2rem; }
}

/* ---------- Print: give them a clean paper version ---------- */
@media print {
  #theme-toggle { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}