@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap");

html {
  background: #ffffff;
}
body {
  margin: 0;
  background: #ffffff;
  color: #000000;
}

body,
p,
li,
a,
time {
  font-family: "Lato", Verdana, Helvetica, sans-serif;
  font-size: 14px;
  line-height: normal;
}

a {
  color: #1772d0;
  text-decoration: none;
}

a:focus,
a:hover {
  color: #f09228;
  text-decoration: none;
}

.page-container {
  width: 100%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

.intro {
  display: grid;
  grid-template-columns: 63% 37%;
  align-items: center;
  width: 100%;
}

.intro-copy,
.photo-cell {
  padding: 2.5%;
}

.name {
  margin: 0 0 16px;
  font-family: "Lato", Verdana, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}

.intro-summary {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.4;
}

.intro-summary strong {
  font-size: inherit;
}

.intro-links {
  margin: 0;
  text-align: center;
}

.profile-photo {
  display: block;
  width: 80%;
  max-width: 80%;
  height: auto;
  margin: 0 auto;
  object-fit: cover;
}

.content-section {
  width: 100%;
}

.section-title,
.subpage-title {
  margin: 0;
  padding: 0 2.5%;
  font-family: "Lato", Verdana, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: normal;
}

.section-body {
  padding: 20px;
}

.section-body > :first-child,
.work-item > :first-child {
  margin-top: 0;
}

.section-body > :last-child,
.work-item > :last-child {
  margin-bottom: 0;
}

.research-topic {
  margin-top: 26px;
}

.topic-title,
.work-title {
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 700;
}

.research-topic p:not(.topic-title) {
  margin-top: 0;
}

.compact-body {
  padding-top: 12px;
}

.blog-list,
.compact-body ul {
  margin-top: 0;
  padding-left: 20px;
}

.blog-list li,
.compact-body li {
  margin-bottom: 5px;
}

.all-posts-link {
  margin: 10px 0 0;
}

.work-list {
  width: 100%;
  padding: 8px 0 14px;
}

.work-item {
  width: 75%;
  padding: 20px;
}

.work-item p {
  margin-top: 5px;
  margin-bottom: 5px;
}

.homepage-footer {
  padding: 22px 20px 28px;
  color: #777777;
  text-align: center;
}

.homepage-footer p {
  font-size: 12px;
}

.subpage,
.post-page {
  padding: 36px 20px 56px;
}

.subpage-nav {
  margin: 0 0 32px;
}

.subpage-title {
  padding: 0;
  margin-bottom: 22px;
}

.blog-archive {
  margin: 0;
  padding-left: 20px;
}

.blog-archive li {
  margin-bottom: 16px;
}

.blog-archive p {
  margin: 4px 0 0;
  color: #555555;
}

.archive-date {
  margin-left: 8px;
  color: #777777;
  font-size: 12px;
}

.post-title {
  margin: 0 0 8px;
  font-family: "Lato", Verdana, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
}

.post-meta {
  margin: 0 0 18px;
  color: #777777;
}

.post-description {
  margin-bottom: 24px;
  color: #555555;
  font-style: italic;
}

.prose {
  max-width: 720px;
}

.prose p,
.prose li {
  line-height: 1.6;
}

.prose h2,
.prose h3 {
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  font-family: "Lato", Verdana, Helvetica, sans-serif;
  font-weight: 700;
}

.prose h2 {
  font-size: 20px;
}

.prose h3 {
  font-size: 16px;
}

.prose code {
  padding: 1px 4px;
  background: #f0f0f0;
  font-family: Consolas, Monaco, monospace;
  font-size: 13px;
}

.prose pre {
  overflow-x: auto;
  padding: 12px;
  background: #f5f5f5;
}

.prose pre code {
  padding: 0;
  background: transparent;
}

.post-back {
  margin-top: 36px;
}

.not-found {
  min-height: 50vh;
}

@media (max-width: 600px) {
  .page-container {
    width: calc(100% - 20px);
  }

  .intro {
    grid-template-columns: 64% 36%;
  }

  .intro-copy,
  .photo-cell {
    padding: 2%;
  }

  .intro-summary {
    font-size: 15px;
  }

  .name {
    font-size: 27px;
  }

  .profile-photo {
    width: 92%;
    max-width: 92%;
  }

  .section-body,
  .work-item {
    padding: 14px 10px;
  }

  .section-title {
    padding: 0 10px;
  }

  .work-item {
    width: calc(100% - 20px);
  }

  .subpage,
  .post-page {
    padding: 28px 10px 44px;
  }

  .archive-date {
    display: block;
    margin: 3px 0 0;
  }
}