/* =========================================
   General site typography and layout
   ========================================= */

body {
  font-size: 1.05rem;
  line-height: 1.65;
}

main {
  max-width: 1050px;
  margin: 0 auto;
}


/* =========================================
   Homepage
   ========================================= */

/* Hide automatic page title on homepage only */

.homepage .quarto-title-block {
  display: none;
}


/* Circular profile photo */

.profile-photo {
  width: 250px;
  height: 250px;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 50%;
  display: block;
  margin-bottom: 1.25rem;
}


/* Space between homepage columns */

.columns {
  gap: 3rem;
}


/* Homepage name */

.column h2 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}


/* Keep biography paragraphs left-aligned */

.column p {
  text-align: left;
}


/* =========================================
   Navigation bar
   ========================================= */

.navbar-brand {
  font-weight: 600;
}

.navbar-nav .nav-link {
  font-size: 1rem;
}


/* =========================================
   Headings
   ========================================= */

h1,
h2,
h3 {
  font-weight: 600;
}

h1 {
  margin-bottom: 1.5rem;
}

h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}


/* =========================================
   Paragraphs and lists
   ========================================= */

p {
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.35rem;
}


/* =========================================
   Links
   ========================================= */

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* =========================================
   Buttons
   ========================================= */

.btn {
  margin-top: 0.75rem;
}


/* =========================================
   Mobile layout
   ========================================= */
@media (max-width: 768px) {

  /* Stack homepage columns vertically */
  .columns {
    display: block;
  }

  .column {
    width: 100% !important;
  }

  /* Center profile section */
  .profile-photo {
    width: 190px;
    height: 190px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
  }

  .column:first-child {
    text-align: center;
    margin-bottom: 2rem;
  }

  .column:first-child p {
    text-align: center;
  }

  /* Keep biography readable */
  .column:last-child p {
    text-align: left;
  }

  /* Slightly reduce typography */
  body {
    font-size: 1rem;
    line-height: 1.55;
  }

  h1 {
    font-size: 1.9rem;
  }

  h2 {
    font-size: 1.45rem;
  }

  h3 {
    font-size: 1.2rem;
  }

  /* Reduce side padding */
  main {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}