/* The author pages share this template: a short opening on the warm field,
   then the bio, with only a small gap between them. Current roles follow the
   bio on narrow screens and take a column of their own on wide ones. */

.author-page {
  --author-top: clamp(48px, 5vw, 96px);
}

.author-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px clamp(28px, 3vw, 56px);
  padding: var(--author-top) var(--bl-side) clamp(20px, 1.8vw, 28px) var(--bl-side);
}

/* The photo is round, like the dot it sits in on About. */
.author-head__photo {
  flex: none;
  width: clamp(112px, 11vw, 200px);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

.author-head__text {
  min-width: 0;
}

.author-head h1 {
  margin-top: 22px;
  font-size: clamp(28px, 2.474vw, 52px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.author-head__role {
  margin-top: 1.1em;
  font-size: clamp(17px, 1.302vw, 27px);
  line-height: 1.4;
}

.author-head__role a,
.author-head__links a,
.author-currently a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bl-underline);
  text-underline-offset: .25em;
}

.author-head__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 500;
}

.author-head__links a {
  display: inline-flex;
  align-items: center;
  min-width: 24px;
  min-height: 44px;
}

.author-body {
  padding: 0 var(--bl-side);
}

.author-body__words {
  max-width: 36em;
  font-size: 18px;
  line-height: 1.6;
}

.author-body__words p + p {
  margin-top: 1em;
}

/* The same right edge as the bio above: 36em at its 18px. */
.author-currently {
  max-width: 648px;
  margin-top: clamp(56px, 5vw, 80px);
}

.author-currently ul {
  margin-top: 14px;
  border-top: 1px solid var(--bl-ink);
}

.author-currently li {
  padding: 16px 0 17px;
  border-bottom: 1px solid var(--bl-stone);
}

.author-currently a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(19px, 1.43vw, 24px);
  line-height: 1.3;
}

.author-currently p {
  color: var(--bl-muted);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

.author-body__about {
  margin-top: 32px;
}

/* No big empty space above the footer. */
.author-page + .site-footer {
  margin-top: clamp(40px, 3.5vw, 64px);
}

/* Two columns: the opening and the bio on the left, Currently on the right,
   starting level with the opening. The warm field still runs across both. */
@media (min-width: 1100px) {
  .author-page {
    --author-gap: clamp(48px, 5vw, 96px);
    display: grid;
    grid-template-columns: var(--bl-side) minmax(0, 1fr) var(--author-gap) minmax(0, 1fr) var(--bl-side);
    grid-template-rows: auto auto 1fr;
  }

  .author-page .page-top {
    grid-area: 1 / 1 / 2 / -1;
  }

  .author-head {
    flex-wrap: nowrap;
    padding-right: calc(50% + var(--author-gap) / 2);
  }

  .author-body {
    display: contents;
  }

  .author-body__words {
    grid-area: 2 / 2;
  }

  .author-body__about {
    grid-area: 3 / 2;
    justify-self: start;
  }

  .author-currently {
    position: relative;
    grid-area: 1 / 4 / 4 / 5;
    max-width: none;
    margin-top: var(--author-top);
  }
}

@media (max-width: 759px) {
  .author-body__words {
    font-size: 17px;
  }
}