/* Minimal academic website styling inspired by clean text-forward faculty pages. */

:root {
  --body-font: Georgia, "Times New Roman", serif;
  --nav-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-color: #222222;
  --muted-color: #666666;
  --link-color: #7a2e1f;
  --border-color: #dddddd;
  --page-width: 760px;
}

body {
  font-family: var(--body-font);
  color: var(--text-color);
  font-size: 18px;
  line-height: 1.58;
  background: #ffffff;
}

.navbar {
  background: #ffffff;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--nav-font);
  font-size: 15px;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.navbar-title {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.navbar .nav-link {
  color: #333333;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.navbar .nav-link:hover,
a:hover {
  color: var(--link-color);
  text-decoration: underline;
}

.quarto-title-block .title {
  font-family: var(--body-font);
  font-size: 2.1rem;
  font-weight: 400;
  margin-bottom: 1.6rem;
}

main.content {
  max-width: var(--page-width);
  margin-left: auto;
  margin-right: auto;
  padding-top: 2.4rem;
  padding-bottom: 3rem;
}

h1, h2, h3 {
  font-family: var(--body-font);
  font-weight: 400;
  color: #111111;
}

h3 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

p {
  margin-bottom: 1.05rem;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

.page-footer {
  border-top: 1px solid var(--border-color);
  font-family: var(--nav-font);
  font-size: 13px;
  color: var(--muted-color);
}

@media (max-width: 800px) {
  body {
    font-size: 17px;
  }

  main.content {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

main.content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Hyperlink color */
a {
  color: #D43A2F;
}

a:hover {
  color: #B2342A;
}

/* Homepage bio layout */
.home-bio {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.home-bio-photo {
  flex: 0 0 30%;
}

.home-bio-photo img {
  width: 100%;
  max-width: 300px;
}

.home-bio-text {
  flex: 1;
}

/* Mobile layout */
@media (max-width: 768px) {
  .home-bio {
    display: block;
  }

  .home-bio-photo {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .home-bio-photo img {
    width: 70%;
    max-width: 280px;
  }
}