:root {
  --page-width: 44rem;
  --photo-width: 10rem;
  --text-color: #2b2f33;
  --muted-text-color: #5c6670;
  --background-color: #fbfaf7;
  --accent-color: #2f6b6a;
  --accent-soft-color: #e4efed;
  --rule-color: #dcd8cf;
  --heading-font: "Source Serif 4", Georgia, serif;
  --body-font: "Source Sans 3", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--body-font);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-color);
  background: var(--background-color);
}

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1rem;
}

h1,
h2 {
  font-family: var(--heading-font);
  font-weight: 600;
  line-height: 1.2;
}

#home-header {
  padding: 4rem 0 2.5rem;
  border-bottom: 1px solid var(--rule-color);
}

#home-header-content {
  display: flex;
  align-items: center;
  gap: 2rem;
}

#home-photo {
  flex-shrink: 0;
  width: var(--photo-width);
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.12);
}

/* stack the photo above the name on narrow screens */
@media (max-width: 34rem) {
  #home-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

#home-name {
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 3rem);
  color: var(--accent-color);
}

#home-tagline {
  margin: 0.5rem 0 0;
  color: var(--muted-text-color);
  letter-spacing: 0.02em;
}

#home-main {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

#home-main section {
  margin-top: 2.5rem;
}

#home-main h2 {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
}

/* short items shown as pills */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.tag-list li {
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  background: var(--accent-soft-color);
  color: var(--accent-color);
  font-weight: 600;
}

.detail-list {
  margin: 0;
  padding-left: 1.25rem;
}

.detail-list li::marker {
  color: var(--accent-color);
}

#home-footer {
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule-color);
  font-size: 0.9rem;
  color: var(--muted-text-color);
}

#home-footer p {
  margin: 0;
}