:root{
  --bg:#ffffff; --ink:#1a1a1a; --muted:#4a4a4a;
  --accent:#0b6a8f;         /* AA-contrast teal on white */
  --accent-dark:#084f6b;
  --rule:#d8dee2; --card:#f4f7f9;
  --maxw:46rem;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#12171a; --ink:#eef2f4; --muted:#b9c3c8;
    --accent:#4fc3e8; --accent-dark:#8fdcf3; --rule:#2a343a; --card:#1a2226; }
}
*{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Georgia,"Times New Roman",serif; line-height:1.65;
  font-size:1.125rem;
}
a{color:var(--accent)}
a:hover,a:focus{color:var(--accent-dark)}
a:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:2px}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--accent); color:#fff;
  padding:.6rem 1rem; z-index:100; border-radius:0 0 6px 0; text-decoration:none;
}
.skip-link:focus{left:0}
header.site{
  border-bottom:1px solid var(--rule); padding:1rem 1.25rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline;
}
header.site .home{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:700; font-size:1.05rem; text-decoration:none; color:var(--ink)}
header.site nav{margin-left:auto; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:.95rem; display:flex; gap:1rem; flex-wrap:wrap}
main{max-width:var(--maxw); margin:0 auto; padding:1.5rem 1.25rem 4rem}
h1{font-size:2rem; line-height:1.2; margin:.2em 0 .1em}
.subtitle{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:1.15rem; color:var(--muted); font-style:italic; margin:.2rem 0 1rem}
.lifespan{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:.98rem; color:var(--muted); margin:.15rem 0}
figure{margin:0 0 1.5rem}
figure img{max-width:100%; height:auto; border-radius:8px; display:block}
figure.portrait{float:none; margin:0 auto 1.5rem; max-width:20rem}
figure.inline-photo{margin:1.5rem auto; max-width:16rem}
/* Header band: portrait beside name/title/dates */
.bio-head{display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center;
  margin-bottom:1.5rem}
.bio-head .portrait{margin:0; flex:0 0 auto; width:14rem; max-width:40%}
.bio-head .bio-meta{flex:1 1 16rem; min-width:14rem}
.bio-head h1{margin:0 0 .1em}
.bio-head .subtitle{margin:.2rem 0 .8rem}
@media (max-width:34rem){
  .bio-head{display:block; text-align:center}
  .bio-head .portrait{width:16rem; max-width:100%; margin:0 auto 1rem}
}
figcaption{font-size:.9rem; color:var(--muted); margin-top:.4rem;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
p{margin:0 0 1rem}
blockquote{
  margin:1.25rem 0; padding:.5rem 0 .5rem 1.25rem;
  border-left:4px solid var(--accent); color:var(--muted); font-style:italic;
}
.dropcap::first-letter{
  font-size:3.2rem; line-height:.8; font-weight:700; color:var(--accent);
  float:left; padding:.1rem .5rem .1rem 0;
}
sup a{text-decoration:none; font-weight:700}
.notes{border-top:1px solid var(--rule); margin-top:2.5rem; padding-top:1rem;
  font-size:.92rem; color:var(--muted)}
.notes h2{font-size:1rem; font-family:system-ui,sans-serif; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted)}
.notes li{margin-bottom:.6rem}
.pager{display:flex; justify-content:space-between; gap:1rem; margin-top:2.5rem;
  padding-top:1.25rem; border-top:1px solid var(--rule);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; font-size:1rem}
.pager a{display:inline-flex; align-items:center; gap:.35rem; font-weight:600;
  text-decoration:none; padding:.5rem .75rem; border:1px solid var(--rule);
  border-radius:8px}
.pager a:hover,.pager a:focus{background:var(--card)}
footer.site{border-top:1px solid var(--rule); padding:1.5rem 1.25rem; color:var(--muted);
  font-size:.9rem; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; text-align:center}
footer.site p{margin:0 auto .5rem; max-width:40rem}
footer.site .copyright-updated{padding-top:.5rem; border-top:1px dashed var(--rule);
  font-size:.85rem; opacity:.85}
/* Contents grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:1rem; list-style:none; padding:0; margin:1.5rem 0}
.grid li{background:var(--card); border:1px solid var(--rule); border-radius:10px}
.grid a{display:block; padding:1rem 1.1rem; text-decoration:none; height:100%}
.grid a:hover,.grid a:focus{background:var(--bg)}
.grid .name{font-weight:700; font-size:1.15rem; color:var(--accent)}
.grid .role{display:block; margin-top:.25rem; color:var(--muted); font-size:.95rem;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; font-style:italic}
/* Cover */
.cover{text-align:center}
.cover .lede{font-family:system-ui,sans-serif; color:var(--muted); font-size:1.05rem}
.cover-portraits{display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem;
  max-width:32rem; margin:1.5rem auto; list-style:none; padding:0}
.cover-portraits a{display:block; border-radius:8px; overflow:hidden; border:1px solid var(--rule)}
.cover-portraits a:hover,.cover-portraits a:focus{outline:3px solid var(--accent)}
.cover-portraits img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:3/4}
.btn{display:inline-block; margin:.5rem .3rem; padding:.6rem 1rem; border-radius:8px;
  background:var(--accent); color:#fff; text-decoration:none; font-weight:600;
  font-family:system-ui,sans-serif}
.btn:hover,.btn:focus{background:var(--accent-dark); color:#fff}
.refs h2{font-size:1.25rem; margin-top:2rem; border-bottom:1px solid var(--rule); padding-bottom:.3rem}
.refs p{font-size:.98rem; margin:0 0 .8rem}
@media (max-width:32rem){ .cover-portraits{grid-template-columns:repeat(3,1fr)} }