:root{
  --bg: #f6f4ee;
  --surface: #ece7db;
  --text: #262420;
  --muted: #7a7364;
  --accent: #2f6259;
  --accent-soft: #dfe9e5;
  --rule: #ddd5c5;
  --link: #24544c;
  --serif: "Iowan Old Style","Palatino Linotype","URW Palladio L","P052","Book Antiqua",Georgia,serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #1a1917;
    --surface: #232120;
    --text: #ece7da;
    --muted: #a89f8c;
    --accent: #7fc9bd;
    --accent-soft: #22302d;
    --rule: #363330;
    --link: #9adbcf;
  }
}

*{ box-sizing: border-box; }

html{ text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.page{
  max-width: 700px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 6rem;
}

/* ---------- header ---------- */

header.masthead{
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}

.avatar{
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
}

.masthead h1{
  font-size: 1.9rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
  letter-spacing: 0.01em;
}

.masthead .role{
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  font-style: italic;
}

nav.toc{
  margin: 2rem 0 2.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.1rem;
  font-size: 0.94rem;
  color: var(--muted);
}

nav.toc a{ color: var(--muted); text-decoration: none; }
nav.toc a:hover{ color: var(--accent); text-decoration: underline; }
nav.toc .sep{ margin: 0 0.55em; opacity: 0.5; }

/* ---------- sections ---------- */

section{ margin-bottom: 3rem; }

h2{
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 1.1rem;
}

p{ margin: 0 0 1rem; }
p:last-child{ margin-bottom: 0; }

a{ color: var(--link); }
a:hover{ color: var(--accent); }

.lede{ font-size: 1.08rem; }

/* ---------- definition-style lists (positions, teaching) ---------- */

.entries{ display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1.5rem; }
.entries dt{
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.92rem;
  white-space: nowrap;
  padding-top: 0.15rem;
}
.entries dd{ margin: 0; }
.entries dd .role{ display:block; color: var(--text); }
.entries dd .sub{ display:block; color: var(--muted); font-size: 0.92rem; margin-top: 0.15rem; }
dl.entries{ margin: 0; }

/* ---------- publications ---------- */

.pub-list{ list-style: none; margin: 0; padding: 0; }
.pub-list li{ margin-bottom: 1.15rem; padding-left: 0; }
.pub-year{ color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 0.4em; }
.pub-award{
  display: inline-block;
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0.05rem 0.4rem;
  margin-left: 0.5rem;
  vertical-align: 1px;
}
.pub-venue{ color: var(--muted); }
.more-link{ margin-top: 1.25rem; font-size: 0.95rem; }

/* ---------- misc lists ---------- */

ul.plain{ margin: 0; padding-left: 1.15rem; }
ul.plain li{ margin-bottom: 0.5rem; }
ul.plain li:last-child{ margin-bottom: 0; }

.people{ margin: 0 0 0.9rem; }
.people .lvl{ color: var(--muted); font-style: italic; margin-right: 0.4em; }

details{ margin-top: 0.75rem; }
details summary{
  cursor: pointer;
  color: var(--muted);
  font-size: 0.92rem;
  outline: none;
}
details summary:hover{ color: var(--accent); }
details .entries{ margin-top: 1rem; }

/* ---------- footer ---------- */

footer{
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9rem;
}
footer a{ color: var(--muted); }
footer a:hover{ color: var(--accent); }

.back{ display:inline-block; margin-bottom: 2rem; font-size: 0.92rem; }

@media (max-width: 520px){
  body{ font-size: 16.5px; }
  .page{ padding: 3rem 1.25rem 4rem; }
  header.masthead{ gap: 1rem; }
  .avatar{ width: 60px; height: 60px; }
  .entries{ grid-template-columns: 1fr; gap: 0.1rem 0; }
  .entries dt{ margin-top: 0.6rem; }
}

@media print{
  body{ font-size: 12pt; }
  nav.toc, .back{ display: none; }
  a{ color: var(--text); text-decoration: none; }
}