/* WebJIVE — author bio page. Scoped to .wj-page-bio so it touches nothing else. */
.wj-page-bio .wj-bio-head {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.wj-page-bio .wj-bio-photo {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 50%;
  flex: 0 0 auto;
}
.wj-page-bio .wj-bio-headtext { flex: 1 1 320px; min-width: 260px; }
.wj-page-bio h1.entry-title { margin: 0 0 12px; line-height: 1.15; }
.wj-page-bio .wj-bio-role {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
}
.wj-page-bio .wj-bio-role:last-child { margin-bottom: 0; }
.wj-page-bio .et_pb_text_inner > p { margin-bottom: 1.1em; line-height: 1.7; }
.wj-page-bio .wj-bio-back { margin-top: 28px; font-weight: 600; }
@media (max-width: 640px) {
  .wj-page-bio .wj-bio-head { gap: 20px; }
  .wj-page-bio .wj-bio-photo { width: 150px; height: 150px; }
}

/* The donor page put this row on the brand purple and styled its headings to
   match, so a heading inherited here rendered dark-purple-on-purple — present
   in the DOM, invisible on screen. Set the page's own colours explicitly
   rather than inheriting whatever the donor happened to use. */
.wj-page-bio .et_pb_row_0 { background-color: #5f4777; }
.wj-page-bio h1.entry-title,
.wj-page-bio .wj-bio-role,
.wj-page-bio .et_pb_text_inner > p { color: #ffffff; }
.wj-page-bio .wj-bio-role { color: #f0e6c8; }
.wj-page-bio .wj-bio-back a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wj-page-bio .wj-bio-back a:hover { color: #f0e6c8; }
.wj-page-bio .wj-bio-photo { border: 4px solid rgba(255,255,255,.28); }