:root{
  --bg:#f7f6f2;          /* warm off-white */
  --slate:#5e7480;       /* refined slate accent */
  --slate-deep:#516571;
  --ink:#26282b;
  --body:#474b50;
  --body-strong:#565b61; /* role / subhead ink */
  --muted:#6b7178;       /* soft gray — WCAG AA (4.6:1) on --bg */
  --rule:#e7e4dc;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
::selection{background:rgba(94,116,128,.18);}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- Keyboard focus (HIG) ---- */
a:focus-visible{outline:2px solid var(--slate);outline-offset:3px;border-radius:3px;}
.socials a:focus-visible{outline-offset:4px;}
.topbar a:focus-visible{outline-color:rgba(255,255,255,.9);}

/* ---- Slim top bar ---- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(94,116,128,.82);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:0 32px;height:64px;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{background:var(--slate);}
}
.topbar .brand{
  font-family:var(--serif);
  font-size:21px;font-weight:500;letter-spacing:.005em;
  color:#fff;text-decoration:none;
}
.topbar nav{display:flex;gap:30px;}
.topbar nav a{
  font-size:12px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.78);text-decoration:none;
  padding:4px 0;border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.topbar nav a:hover{color:#fff;}
.topbar nav a.active{color:#fff;border-bottom-color:rgba(255,255,255,.85);}

/* ---- Home hero ---- */
.hero{text-align:center;padding:104px 24px 8px;}
.hero .avatar{
  position:relative;
  width:162px;height:162px;border-radius:50%;
  margin:0 auto 24px;overflow:hidden;
  border:1px solid var(--rule);
  background:#eceae4;
}
.hero .avatar img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.hero::after{
  content:"";display:block;width:44px;height:2px;
  background:var(--slate);opacity:.55;margin:32px auto 0;
}
.hero h1{
  font-family:var(--serif);
  font-size:58px;font-weight:500;letter-spacing:-0.022em;text-wrap:balance;
  color:var(--ink);margin:0;line-height:1.0;
}
.hero .role{
  font-size:14.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--body-strong);margin:16px 0 0;
}
.hero .role-dot{color:var(--muted);opacity:.55;}
.socials{display:flex;justify-content:center;gap:16px;margin:24px 0 0;}
.socials a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(94,116,128,0.4);
  color:var(--slate);font-size:16px;text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease-out);
}
.socials a:hover{background:var(--slate);color:#fff;border-color:var(--slate);transform:translateY(-2px);}

/* ---- Content ---- */
main{max-width:780px;margin:0 auto;padding:48px 32px 96px;}
main p{margin:0 0 20px;color:var(--body);text-wrap:pretty;}
main em,main i{font-style:italic;}
.page-title{
  font-family:var(--serif);
  font-size:33px;font-weight:500;letter-spacing:-0.016em;
  color:var(--ink);margin:0 0 24px;
}

.facts{list-style:none;margin:0 0 40px;padding:0;}
.facts li{margin:0 0 8px;color:var(--body);font-size:15px;}
.facts strong{color:var(--muted);font-weight:500;}

.sec-label{
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:48px 0 24px;padding-bottom:8px;
  border-bottom:1px solid var(--rule);
}

.pub{margin:0 0 24px;}
.pub .title{
  display:block;font-family:var(--serif);
  font-size:20px;font-weight:600;letter-spacing:-0.006em;color:var(--ink);line-height:1.32;margin:0 0 4px;text-wrap:pretty;
}
.pub a.title{color:var(--slate-deep);text-decoration:none;transition:color .2s var(--ease);}
.pub a.title:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;}
.pub .authors{color:var(--body);font-size:15px;margin:0 0 2px;}
.pub .authors .me{font-weight:600;color:var(--ink);}
.pub .venue{color:var(--muted);font-size:14px;margin-top:1px;font-variant-numeric:oldstyle-figures proportional-nums;}

@media (max-width:560px){
  .topbar{padding:0 20px;height:56px;}
  .topbar .brand{font-size:18px;}
  .topbar nav{gap:18px;}
  .hero{padding:48px 20px 6px;}
  .hero h1{font-size:40px;}
  .hero .role{font-size:12.5px;letter-spacing:.08em;
    display:flex;flex-direction:column;align-items:center;gap:2px;}
  .hero .role-dot{display:none;}
  main{padding:40px 22px 76px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}