.wordmark,
.wordmark span {
  color: var(--red);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .wordmark { gap: 9px; font-size: .86rem; }
  .brand-logo { width: 36px; height: 36px; }

  .book-hero .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .book-hero .button {
    width: 100%;
  }
}

/* Keep intrinsically large cover artwork from defining the mobile grid width. */
@media (max-width: 850px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .book-hero-grid {
    width: calc(100% - 32px);
    max-width: var(--max);
  }

  .book-hero-grid > * {
    width: 100%;
    min-width: 0;
  }

  .book-hero-grid > :first-child {
    display: flex;
    justify-content: center;
  }

  .book-hero .cover {
    width: min(100%, 430px);
    height: auto;
  }

  .book-hero h1,
  .book-hero .lede {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .book-hero h1 {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }
}

.architect-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-bottom: 6px;
  color: #fff;
  border-bottom: 2px solid var(--red);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
}

/* Preserve the book cover's original 245:370 proportions at every viewport. */
.book-hero .cover {
  display: block;
  width: min(100%, 430px);
  height: auto;
  aspect-ratio: 245 / 370;
  object-fit: contain;
}

/* Keep the homepage book cover at its original portrait proportions. */
.book-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 245 / 370;
  object-fit: contain;
}

/* Give section eyebrows the same breathing room used in the hero. */
.section-head .eyebrow + h2 {
  margin-top: 18px;
}

.architect-link:hover {
  color: var(--red);
}