:root {
  --page: #ffffff;
  --rail: #edf6fb;
  --heading: #173b5e;
  --text: #293845;
  --link: #2f6f9f;
  --muted: #6d8292;
  --line: #d5e5f0;
  --highlight: #eff7fc;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { background: var(--page); }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 16px/1.65 var(--serif);
}

a {
  color: var(--link);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
  border-radius: 1px;
}

.site {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 42px 32px;
  background: var(--rail);
  border-right: 1px solid var(--line);
  color: var(--heading);
}

.portrait {
  display: block;
  width: 184px;
  max-height: 230px;
  object-fit: cover;
  margin: 0 0 20px;
}

.name {
  margin: 0 0 8px;
  color: var(--heading);
  font: 700 31px/1.08 var(--serif);
}

.home-link {
  color: inherit;
  text-decoration: none;
}

.home-link:hover,
.home-link:focus-visible {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: #91b9d3;
}

.position {
  margin: 0;
  color: #526b7a;
  font-size: 15px;
  line-height: 1.45;
}

.profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 19px 0 24px;
  font: 600 12px/1.2 var(--sans);
}

.profiles a {
  padding: 5px 8px;
  border: 1px solid #b8d2e2;
  border-radius: 3px;
  background: rgba(255, 255, 255, .55);
  color: var(--link);
  text-decoration: none;
}

.profiles a:hover {
  background: #ffffff;
  border-color: #91b9d3;
  text-decoration: underline;
}

.railnav {
  display: grid;
  gap: 12px;
  padding-top: 21px;
  border-top: 1px solid var(--line);
}

.railnav a {
  width: fit-content;
  color: var(--link);
  font-weight: 700;
  text-decoration: none;
}

.railnav a:hover { text-decoration: underline; }

.railnav a.active {
  color: var(--heading);
  text-decoration: underline;
  text-decoration-color: #91b9d3;
  text-decoration-thickness: 2px;
}

.content {
  width: 100%;
  max-width: 930px;
  padding: 62px 64px 48px;
}

.intro {
  max-width: 810px;
  margin-bottom: 42px;
  font-size: 16px;
  line-height: 1.65;
}

.intro p { margin: 0 0 15px; }

.welcome-title {
  margin: 0 0 17px;
  color: var(--heading);
  font: 700 25px/1.2 var(--serif);
}

.intro .market {
  max-width: 760px;
  margin-top: 36px;
  padding: 9px 14px 9px 16px;
  background: var(--highlight);
  border-left: 3px solid var(--link);
  color: var(--heading);
  font-family: var(--sans);
  font-weight: 600;
}

.interests {
  color: var(--muted);
  font: 15px/1.55 var(--sans);
}

.interests strong { color: #526b7a; }

.intro .research-focus {
  max-width: 760px;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: #526b7a;
  font: 15px/1.55 var(--sans);
}

.paper-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 15px 0;
  font: 15px var(--sans);
}

.paper-links a { text-decoration: none; }
.paper-links a:hover { text-decoration: underline; }

.section-label {
  margin: 0 0 14px;
  color: var(--heading);
  font: 700 14px var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.paper {
  margin: 0 0 22px;
  padding: 19px 0 21px;
  border-top: 1px solid var(--line);
}

.paper:first-of-type { border-top: 2px solid #9fc2d8; }

.paper h2,
.teaching-entry h2 {
  margin: 0 0 7px;
  color: var(--heading);
  font: 700 22px/1.28 var(--serif);
}

.paper-title-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.paper-title-link:hover,
.paper-title-link:focus-visible {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: #91b9d3;
}

.meta,
.coauthors,
.presentations {
  margin: 3px 0;
  color: var(--muted);
  font: 15px/1.5 var(--sans);
}

.abstract {
  max-width: 810px;
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.abstract p {
  margin: 0;
  text-indent: 0;
}

details {
  margin-top: 15px;
  color: var(--muted);
  font-size: 15px;
}

summary {
  width: fit-content;
  color: var(--link);
  cursor: pointer;
}

.page-title {
  margin: 0 0 17px;
  color: var(--heading);
  font: 700 30px/1.2 var(--serif);
}

.references-title {
  margin: 44px 0 17px;
  color: var(--heading);
  font: 700 25px/1.2 var(--serif);
}

.refs {
  max-width: 680px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 36px;
  row-gap: 8px;
}

.refs p {
  margin: 0;
}

.ref-name { font-weight: 700; }
.ref-affiliation { color: var(--muted); font: 14px var(--sans); }
.contact { margin: 34px 0 0; font-family: var(--sans); }

.page-heading {
  margin-bottom: 32px;
}

.page-heading .page-title {
  margin: 0 0 8px;
}

.page-heading p {
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
}

.teaching-list,
.discussion-list { max-width: 760px; }

.teaching-entry {
  padding: 20px 0 22px;
  border-top: 1px solid var(--line);
}

.teaching-entry:first-child { border-top: 2px solid #9fc2d8; }

.teaching-entry h2 { font-size: 21px; }

.teaching-entry p,
.discussion-author {
  margin: 0;
  color: var(--muted);
  font: 15px/1.5 var(--sans);
}

.discussion-list .paper { margin-bottom: 0; }

.cv-highlights {
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
  margin: 0 0 38px;
}

.cv-highlight {
  padding: 15px 0 17px;
  border-top: 1px solid var(--line);
}

.cv-highlight h2 {
  margin: 0 0 5px;
  color: var(--heading);
  font: 700 18px/1.3 var(--serif);
}

.cv-highlight p {
  margin: 0;
  color: var(--muted);
  font: 14px/1.5 var(--sans);
}

.cv-preview-link {
  display: block;
  max-width: 620px;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(23, 59, 94, .08);
}

.cv-preview-link img {
  display: block;
  width: 100%;
  height: auto;
}

.cv-download {
  margin: 0 0 42px;
  font: 14px var(--sans);
}

.conference-years {
  max-width: 810px;
}

.conference-year {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  padding: 19px 0 21px;
  border-top: 1px solid var(--line);
}

.conference-year:first-child { border-top: 2px solid #9fc2d8; }

.conference-year h3 {
  margin: 0;
  color: var(--heading);
  font: 700 17px var(--sans);
}

.conference-year ul {
  margin: 0;
  padding-left: 19px;
}

.conference-year li { margin: 0 0 7px; }
.conference-note { color: var(--muted); font: 13px/1.5 var(--sans); }

.error-page .page-title { margin-bottom: 12px; }

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

@media (max-width: 1024px) {
  .site { grid-template-columns: 270px minmax(0, 1fr); }
  .rail { padding: 36px 28px; }
  .content { padding: 52px 48px 44px; }
}

@media (max-width: 760px) {
  .site { display: block; }

  .rail {
    position: static;
    height: auto;
    padding: 28px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .portrait {
    width: 150px;
    max-height: 188px;
  }

  .railnav {
    display: flex;
    flex-wrap: wrap;
    gap: 13px 22px;
  }

  .content { padding: 40px 28px; }
  .refs { grid-template-columns: 1fr; }
  .cv-highlights { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .rail { padding: 24px; }
  .content { padding: 34px 24px 40px; }
  .name { font-size: 29px; }
  .page-title { font-size: 28px; }
  .market { margin-left: -4px; }
  .conference-year { grid-template-columns: 1fr; gap: 8px; }
}
