:root {
  --grey: rgb(90, 90, 90);
  --blue1: rgb(2, 33, 105);
  --blue3: rgb(0, 114, 206);
  --blue4: rgb(108, 172, 228);
  --pink1: #f9564f;
  --line: #ddd;
  --paper: #fff;
  --code: #f5f7fa;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body, p { margin: 0; padding: 0; border: 0; font: inherit; font-family: "Source Sans 3", "Source Sans Pro", sans-serif; font-weight: 300; letter-spacing: 0.35px; color: var(--grey); }
body { background: var(--paper); font-size: 17px; line-height: 1.5; }
p { margin: 0.2em 0; }
a { color: var(--pink1); text-decoration: none; }
a:hover { text-decoration: underline; }
b { font-weight: 600; }
strong { color: #e5a713; font-weight: 700; }
h1 { color: var(--blue1); font-size: 2em; font-weight: 500; margin: 0.67em 0; }
h2 { color: var(--blue1); font-size: 1.25em; font-weight: 500; margin: 1.35em 0 0.4em; }
sup { line-height: 0; }
.page-shell { width: 1000px; max-width: 100%; margin: 0 auto; }

#header { align-items: center; background-color: rgba(255,255,255,.78); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); display: flex; height: 53px; justify-content: space-around; left: 50%; position: fixed; top: 0; transform: translateX(-50%); width: min(1000px,100%); z-index: 100; }
#header a { color: var(--grey); transition: color .3s ease; }
#header a:hover, #header a[aria-current="page"] { color: var(--pink1); text-decoration: none; }

#profile { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; gap: 40px; padding: 90px 30px 24px; }
#profile-pic { flex: 0 0 400px; text-align: center; }
#profile-intro { flex: 1 1 auto; min-width: 0; }
#profile img { display: block; height: 400px; object-fit: cover; width: 400px; }
#profile-name { color: var(--blue1); font-size: 3em; font-weight: 400; line-height: 1em; margin-bottom: 10px; text-align: center; }
#profile-email { color: var(--blue1); margin-bottom: 20px; text-align: center; }
#profile p { margin-bottom: 18px; }
.profile-links span { margin: 0 .35em; }
.clear { display: none; }

.section, #research { padding: 4px 30px 28px; scroll-margin-top: 58px; }
.divider { border-bottom: 1px solid var(--line); width: 100%; }
.updates-list, .detail-list { list-style: none; margin: 0; padding: 0; }
.updates-list li { margin: .28em 0; padding-left: 7.2em; position: relative; }
.updates-list li b { left: 0; position: absolute; width: 6.7em; }
.detail-list { list-style: disc; padding-left: 1.25em; }

#research { display: flex; flex-direction: column; }
.publication { min-height: 150px; padding: 8px 0 20px; }
.research-thumb { align-items: center; background: linear-gradient(145deg,var(--blue1),var(--blue3)); display: flex; float: left; height: 130px; justify-content: center; margin: 7px 30px 12px 0; overflow: hidden; position: relative; width: 250px; }
.research-thumb:hover { text-decoration: none; }
.research-thumb img { height: 100%; object-fit: cover; transition: transform .3s ease; width: 100%; }
a.research-thumb:hover img { transform: scale(1.035); }
.venue-badge { background: rgba(2,33,105,.82); bottom: 10px; color: white; font-size: .78em; font-weight: 600; left: 10px; letter-spacing: .06em; padding: .2em .65em; position: absolute; }
.publication-body { overflow: hidden; }
.research-proj-title { color: var(--blue1); font-size: 1.08em; font-weight: 500; }
.publication-body p { margin-top: .45em; }
.compact-publication { min-height: 0; padding: 7px 0 12px; }
.paper-list { margin: 0; padding-left: 1.4em; }
.paper-list li { margin: 0 0 .8em; padding-left: .25em; }
footer { border-top: 1px solid var(--line); font-size: .88em; margin-top: 8px; padding: 28px 30px 42px; text-align: center; }

.blog-main { min-height: 72vh; padding: 84px 90px 45px; }
.blog-heading { margin-bottom: .15em; }
.blog-intro { border-bottom: 1px solid var(--line); margin-bottom: 24px; padding-bottom: 24px; }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-card { border-bottom: 1px solid var(--line); padding: 20px 0; }
.post-card:first-child { padding-top: 4px; }
.post-card h2 { margin: 0 0 .15em; }
.post-meta { color: #888; font-size: .9em; margin-bottom: .55em; }
.post-tags span { background: #f2f4f8; border-radius: 999px; display: inline-block; font-size: .8em; margin: .65em .35em 0 0; padding: .12em .65em; }
.back-link { display: inline-block; margin-bottom: 18px; }
.markdown-body h1 { font-size: 2.25em; margin-bottom: .15em; }
.markdown-body h2 { font-size: 1.55em; margin-top: 1.8em; }
.markdown-body h3 { color: var(--blue1); font-size: 1.2em; margin-top: 1.55em; }
.markdown-body p { margin: .9em 0; }
.markdown-body ul, .markdown-body ol { padding-left: 1.5em; }
.markdown-body li { margin: .25em 0; }
.markdown-body blockquote { border-left: 4px solid var(--blue4); margin: 1.2em 0; padding: .2em 1em; }
.markdown-body blockquote p { margin: .45em 0; }
.markdown-body code { background: var(--code); border-radius: 3px; font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size: .88em; padding: .12em .32em; }
.markdown-body pre { background: #18202b; border-radius: 5px; color: #eef3f8; overflow-x: auto; padding: 1em 1.15em; }
.markdown-body pre code { background: transparent; color: inherit; padding: 0; }
.markdown-body img { height: auto; max-width: 100%; }
.markdown-body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.loading, .blog-error { padding: 2em 0; }
.blog-error { color: #a33; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  #header { gap: 4px; overflow-x: auto; padding: 0 8px; }
  #header a { flex: 0 0 auto; padding: 0 7px; }
  #profile { padding: 78px 20px 24px; }
  #profile { display: block; }
  #profile-pic { margin: 0 0 24px; }
  #profile img { height: auto; margin: 0 auto; max-width: 100%; width: 400px; }
  #profile-name { font-size: 2.5em; }
  .section, #research { padding-left: 20px; padding-right: 20px; }
  .updates-list li { padding-left: 0; }
  .updates-list li b { display: block; position: static; width: auto; }
  .research-thumb { float: none; height: 145px; margin-right: 0; width: 100%; }
  .publication-body { overflow: visible; }
  .blog-main { padding: 75px 20px 36px; }
}