:root{
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #0b1220;
  --muted: #4b5563;
  --line: rgba(11, 18, 32, .16);
  --link: #0b3aa4;
  --talks: #0f5132;
  --submitted: #14532d;
  --soon: #92400e;
  --wip: #7f1d1d;
  --nav: #0f5132;
  --h2: #0f5132;
  --h3: #2f7a57;
  --max: 900px;
  --serif: "EB Garamond", Garamond, Baskerville, Georgia, serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --fg: #e6edf7;
    --muted: #a8b3c7;
    --line: rgba(230, 237, 247, .14);
    --link: #8ab4ff;
    --talks: #5bbd87;
    --submitted: #86efac;
    --soon: #fdba74;
    --wip: #fca5a5;
    --nav: #5bbd87;
    --h2: #5bbd87;
    --h3: #86efac;
  }
}

*{box-sizing:border-box}
html, body, h1, h2, h3, p, li, a, summary, div, span, nav, section, header, footer{
  font-family: var(--serif);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font: 17px/1.72 var(--serif);
}

a{color:var(--link); text-underline-offset:.18em}
a:hover{text-decoration-thickness:.14em}

.wrap{max-width:var(--max); margin:0 auto; padding:22px 16px 56px}

.site-header{margin-bottom:36px}
.header-grid{
  display:flex;
  flex-direction:column;
}
.name{
  font-size: 34px;
  font-weight: 600;
  line-height:1.15;
  margin:0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
}
.avatar{
  width: 360px;
  height: 360px;
  border-radius: 0;
  border: 1px solid var(--line);
  object-fit: cover;
  display:block;
  margin: 30px auto 0;
}
.topnav{
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--nav);
}
.topnav a{padding: 2px 2px}
.topnav a{
  white-space:nowrap;
  text-decoration:none;
  color: inherit;
}
.topnav a + a{
  margin-left: 0;
}
.topnav a + a::before{
  content: "  •  ";
  color: var(--muted);
}
.topnav a:hover{text-decoration:underline}

/* More space between nav and about text in header */
.topnav + .avatar + .tagline{margin-top: 38px}
@media (max-width: 560px){
  .header-grid{
    display:flex;
    flex-direction:column;
  }
  .avatar{width:260px; height:260px}
}
.tagline{margin:10px 0 0; color:var(--muted); max-width:none; width:100%}
header .tagline{margin-bottom: 18px}

main{margin-top:10px}
section{padding:18px 0 10px; scroll-margin-top: 16px}
h2{
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
  color: var(--h2);
}
h3{font-size:18px; margin:16px 0 8px; font-weight:600; color: var(--h3)}
p{margin:0 0 10px}
p:last-child{margin-bottom:0}

ul{margin:0; padding-left:18px}
li{margin:6px 0}

/* Justified text (content only) */
main p,
main li,
.tagline,
.pub .meta,
.details .abstract,
.details .talks{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.pub{
  margin:14px 0;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
}
.pub-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.pub .title{font-weight:680; color: var(--link)}
.pub .title a{text-decoration: none}
.pub .title a:hover{text-decoration: underline}
.pub .title a{color: inherit}
.badge{
  --badge-color: var(--submitted);
  font-size: 12.5px;
  color: var(--badge-color);
  border: 1px solid var(--badge-color);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
  margin-top: 1px;
}
.badge--soon{--badge-color: var(--soon)}
.badge--wip{--badge-color: var(--wip)}
.pub .meta{color:var(--muted)}
.pub-head + .meta{margin-top: 2px}
.pub .meta + .meta{margin-top: 8px}
.pub .links{margin-top:12px; font-size:13.5px}
.pub .links a{
  margin-right:10px;
  display:inline-block;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
}
.pub .links a:hover{background: color-mix(in oklab, var(--bg) 84%, transparent)}
.details{margin-top:10px}
.details summary{cursor:pointer; color: var(--muted)}
.details[open] summary{margin-bottom: 14px}
.details .abstract{font-style: italic; color: var(--fg)}
.details .talks{
  color: var(--talks);
  font-size: 13.5px;
  margin-top: 14px;
}
.coauthors{font-style: italic}

.teach{margin-top:2px}
.inst{
  margin:14px 0;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
}
.inst h3{margin-top:0}
.teach-list{list-style: disc; padding-left:18px; margin:0}
.teach-item{
  margin:12px 0;
}
.teach-course{font-weight:650}
.teach-meta{color:var(--muted); font-size: 13.5px; margin-top: 2px}

footer{border-top:1px solid var(--line); margin-top:22px; padding-top:14px; color:var(--muted); font-size:14px}