.hero {
  display: grid;
  gap: var(--space-6);
  min-height: clamp(420px, 52svh, 540px);
  padding-bottom: var(--space-5);
  padding-top: var(--space-5);
}

.hero__copy {
  align-self: center;
  display: grid;
  gap: var(--space-4);
  max-width: 620px;
}

.hero__copy h1 {
  font-size: clamp(2.6rem, 4.6vw, 3.35rem);
}

.hero__copy > p:not(.eyebrow) {
  color: var(--color-muted);
  font-family: var(--font-serif);
  font-size: 1.16rem;
  line-height: 1.75;
  max-width: 560px;
}

.hero__media {
  align-items: center;
  display: grid;
  gap: var(--space-4);
  justify-content: center;
}

.book-cover {
  aspect-ratio: 0.72;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  display: block;
  height: auto;
  max-width: 260px;
  object-fit: cover;
  transform: rotate(-2deg);
  width: min(64vw, 260px);
}

.hero-note {
  align-content: center;
  border-left: 3px solid var(--color-border-strong);
  justify-items: start;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
}

.hero-note .book-cover {
  max-width: 128px;
  width: min(34vw, 128px);
}

.hero-note__link {
  color: inherit;
  display: grid;
  gap: var(--space-4);
  text-decoration: none;
}

.hero-note__link:hover {
  color: inherit;
}

.hero-note__link:hover .book-cover {
  box-shadow: var(--shadow-cover);
  transform: rotate(-1deg) translateY(-2px);
}

.hero-note__link:focus-visible {
  border-radius: var(--radius-md);
  outline: 3px solid var(--color-calm);
  outline-offset: 6px;
}

.hero-note strong {
  color: var(--color-primary);
  display: block;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.hero-note p,
.hero-note__link span span {
  color: var(--color-muted);
}

.hero-note__list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-note__list a {
  color: var(--color-primary);
  font-weight: 750;
}

@media (max-width: 720px) {
  .hero {
    display: block;
    gap: var(--space-4);
    min-height: 0;
    padding-bottom: var(--space-4);
    padding-top: var(--space-4);
    position: relative;
  }

  .hero__copy {
    gap: var(--space-4);
    max-width: none;
  }

  .hero__copy h1 {
    max-width: calc(100% - 144px);
  }

  .hero__copy h1 {
    font-size: 2.35rem;
  }

  .hero__media {
    position: absolute;
    right: var(--space-4);
    top: var(--space-4);
    width: 128px;
  }

  .hero-note {
    background: transparent;
    border: 0;
    padding: 0;
  }

  .hero-note__link > span,
  .hero-note__list {
    display: none;
  }

  .hero-note .book-cover {
    max-width: 96px;
    width: 100%;
  }
}

@media (min-width: 860px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.8fr);
  }
}