:root{
  --paper:#f7f6f2;
  --ink:#14181c;
  --ink-soft:#4a5158;
  --teal:#2b6e6b;
  --teal-deep:#1c4a48;
  --highlight:#f2c14e;
  --rule:#dcd7ca;
  --max:660px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:16px;
  line-height:1.6;
}

a{color:var(--teal-deep);}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

h1,h2,h3{
  font-family:'Source Serif 4', Georgia, serif;
  font-weight:600;
  line-height:1.15;
  margin:0 0 0.5em;
}

.layout{
  display:grid;
  grid-template-columns:260px 1fr;
  max-width:1080px;
  margin:0 auto;
  min-height:100vh;
}

/* ---------- Sidebar ---------- */
aside{
  padding:56px 32px 40px 40px;
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.id-block img.portrait{
  width:120px;
  height:150px;
  object-fit:cover;
  border-radius:4px;
  border:1px solid var(--rule);
  margin-bottom:18px;
  display:block;
}

.id-block h1{
  font-size:1.5rem;
  letter-spacing:-0.01em;
}

.id-block p.role{
  margin:0 0 28px;
  color:var(--ink-soft);
  font-size:0.92rem;
  max-width:20ch;
}

nav.side-nav ul{
  list-style:none;
  margin:0;
  padding:0;
}
nav.side-nav li{margin-bottom:10px;}
nav.side-nav a{
  text-decoration:none;
  color:var(--ink-soft);
  font-size:0.92rem;
  border-left:2px solid transparent;
  padding-left:10px;
  margin-left:-12px;
  transition:color .15s ease, border-color .15s ease;
}
nav.side-nav a:hover, nav.side-nav a:focus-visible{
  color:var(--ink);
  border-left-color:var(--teal);
}

.side-links{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:32px;
}
.side-links a{
  text-decoration:none;
  font-size:0.88rem;
  color:var(--ink-soft);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.side-links a:hover, .side-links a:focus-visible{color:var(--teal-deep);}

/* ---------- Main ---------- */
main{
  padding:64px 40px 100px;
  max-width:var(--max);
}

section{
  margin-bottom:76px;
}
section:last-of-type{margin-bottom:40px;}

section > h2{
  font-size:1.05rem;
  font-weight:600;
  color:var(--teal-deep);
  margin-bottom:22px;
}

/* ---------- Hero ---------- */
.hero h2.kicker{
  font-family:'Inter', sans-serif;
  font-size:0.95rem;
  font-weight:500;
  color:var(--ink-soft);
  margin-bottom:14px;
}
.hero .statement{
  font-size:clamp(1.6rem, 3.4vw, 2.15rem);
  line-height:1.28;
  max-width:22ch;
  margin:0;
}
.hero .statement .mark{
  position:relative;
  white-space:nowrap;
}
.hero .statement .mark svg{
  position:absolute;
  left:-3%;
  bottom:-0.08em;
  width:106%;
  height:0.5em;
  z-index:-1;
}
.hero .statement .mark path{
  stroke:var(--highlight);
  stroke-width:14;
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:400;
  stroke-dashoffset:400;
  animation:draw-mark 0.7s ease-out 0.5s forwards;
}
@media (prefers-reduced-motion: reduce){
  .hero .statement .mark path{animation:none; stroke-dashoffset:0;}
}
@keyframes draw-mark{
  to{stroke-dashoffset:0;}
}

.hero .sub{
  margin-top:22px;
  color:var(--ink-soft);
  max-width:52ch;
  font-size:0.98rem;
}

/* ---------- About / prose ---------- */
.prose p{margin:0 0 16px; max-width:60ch;}
.prose p:last-child{margin-bottom:0;}
.prose h2, .prose h3{margin-top:1.4em;}
.prose ul, .prose ol{margin:0 0 16px; padding-left:1.2em; max-width:60ch;}
.prose li{margin-bottom:6px;}
.prose blockquote{
  margin:0 0 16px;
  padding-left:16px;
  border-left:2px solid var(--teal);
  color:var(--ink-soft);
  max-width:58ch;
}
.prose code{
  font-size:0.88em;
  background:var(--rule);
  padding:0.1em 0.35em;
  border-radius:3px;
}
.prose pre{
  overflow-x:auto;
  background:var(--ink);
  color:var(--paper);
  padding:14px 16px;
  border-radius:6px;
  font-size:0.85rem;
}
.prose pre code{background:none; padding:0; color:inherit;}
.prose img{max-width:100%; border-radius:4px;}
.prose a{
  color:var(--ink);
  text-decoration:none;
  background-image:linear-gradient(var(--teal), var(--teal));
  background-position:0 1.15em;
  background-size:0 2px;
  background-repeat:no-repeat;
  transition:background-size .18s ease;
}
.prose a:hover, .prose a:focus-visible{
  background-size:100% 2px;
}

/* ---------- Research focus ---------- */
.focus-list{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.focus-item{
  border-top:1px solid var(--rule);
  padding-top:18px;
}
.focus-item h3{
  font-size:1.05rem;
  margin-bottom:6px;
}
.focus-item p{
  margin:0;
  color:var(--ink-soft);
  font-size:0.95rem;
  max-width:56ch;
}

/* ---------- Publications / Blog list ---------- */
.pub-list{
  list-style:none;
  margin:0;
  padding:0;
}
.pub-item{
  padding:18px 0;
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 16px;
  align-items:baseline;
}
.pub-list li:last-child{border-bottom:1px solid var(--rule);}
.pub-title{
  font-family:'Source Serif 4', serif;
  font-size:1.02rem;
  font-weight:500;
  grid-column:1;
}
.pub-title a{
  color:var(--ink);
  text-decoration:none;
  background-image:linear-gradient(var(--teal), var(--teal));
  background-position:0 1.15em;
  background-size:0 2px;
  background-repeat:no-repeat;
  transition:background-size .18s ease;
}
.pub-title a:hover, .pub-title a:focus-visible{
  background-size:100% 2px;
}
.pub-meta{
  grid-column:1;
  color:var(--ink-soft);
  font-size:0.87rem;
}
.pub-cite{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  text-align:right;
  font-size:0.82rem;
  color:var(--ink-soft);
  white-space:nowrap;
  padding-top:2px;
}
.pub-cite strong{
  display:block;
  font-family:'Source Serif 4', serif;
  font-size:1.25rem;
  color:var(--teal-deep);
  font-weight:600;
}

.pub-note{
  margin-top:16px;
  font-size:0.82rem;
  color:var(--ink-soft);
}

/* ---------- Teaching ---------- */
.teach-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}
.teach-item{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-top:1px solid var(--rule);
  font-size:0.95rem;
}
.teach-list .teach-item:last-child{border-bottom:1px solid var(--rule);}
.teach-name{font-weight:500;}
.teach-role{
  color:var(--ink-soft);
  font-size:0.87rem;
  text-align:right;
  white-space:nowrap;
}

/* ---------- Contact ---------- */
.contact-grid{
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
}
.contact-grid a{
  text-decoration:none;
  font-size:0.95rem;
  padding-bottom:2px;
  border-bottom:1px solid var(--rule);
}
.contact-grid a:hover, .contact-grid a:focus-visible{
  border-bottom-color:var(--teal);
}

footer{
  padding:24px 40px 48px;
  color:var(--ink-soft);
  font-size:0.82rem;
  max-width:var(--max);
}

/* ---------- Standalone post page ---------- */
.post-page{
  max-width:var(--max);
  margin:0 auto;
  padding:64px 24px 100px;
}

/* ---------- Single post ---------- */
.post-header{
  border-bottom:1px solid var(--rule);
  padding-bottom:22px;
  margin-bottom:32px;
}
.post-back{
  display:inline-block;
  font-size:0.88rem;
  color:var(--ink-soft);
  text-decoration:none;
  margin-bottom:18px;
}
.post-back:hover, .post-back:focus-visible{color:var(--teal-deep);}
.post-header h1{
  font-size:1.9rem;
  margin-bottom:8px;
}
.post-date{
  color:var(--ink-soft);
  font-size:0.88rem;
}

/* ---------- Mobile ---------- */
@media (max-width:820px){
  .layout{grid-template-columns:1fr;}
  aside{
    position:static;
    height:auto;
    padding:36px 24px 24px;
    flex-direction:column;
  }
  nav.side-nav ul{
    display:flex;
    flex-wrap:wrap;
    gap:4px 18px;
  }
  nav.side-nav li{margin-bottom:0;}
  .side-links{
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px 20px;
    margin-top:20px;
  }
  main{padding:16px 24px 72px;}
  .post-page{padding:36px 24px 72px;}
  .pub-item{grid-template-columns:1fr;}
  .pub-cite{
    grid-column:1;
    grid-row:auto;
    text-align:left;
    margin-top:4px;
  }
  .pub-cite strong{display:inline; font-size:1rem; margin-right:6px;}
  .teach-item{flex-direction:column; gap:2px;}
  .teach-role{text-align:left;}
}