/* ABOUTME: Home page styles: the featured book panel, the catalogue section and the About Amelia box. */
/* ABOUTME: The featured panel takes its pastel and tilt from the same tokens as the book cards. */

.featured { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

.featured__book {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  border-radius: var(--radius-box);
  background: var(--tint);
}

.featured__book[hidden] { display: none; }

@media (min-width: 760px) {
  .featured__book { grid-template-columns: minmax(200px, 300px) 1fr; }
}

.featured__cover {
  justify-self: center;
  max-width: min(280px, 70vw);
}

.featured__cover img {
  display: block;
  border-radius: 4px;
  box-shadow: var(--shadow-cover);
  transform: rotate(var(--tilt));
}

.featured__title { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.featured__title a { color: inherit; text-decoration: none; }
.featured__title a:hover { text-decoration: underline; }

.featured__text p { max-width: 36rem; }
.featured__text p:last-child { margin-bottom: 0; }

.catalogue { padding-top: clamp(2.5rem, 6vw, 4rem); }

.about { padding-top: clamp(3rem, 7vw, 5rem); scroll-margin-top: 1rem; }

.about__box {
  display: grid;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-items: center;
  padding: clamp(1.5rem, 5vw, 2.75rem);
  border-radius: var(--radius-box);
  background: var(--surface);
  border: 3px dashed var(--tint-5);
  text-align: center;
}

@media (min-width: 760px) {
  .about__box {
    grid-template-columns: 220px 1fr;
    justify-items: start;
    text-align: left;
  }
}

.about__photo {
  width: min(220px, 50vw);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid var(--tint-3);
}

.about__text { max-width: var(--measure); }
.about__text p { margin: 0 0 0.75rem; }
.about__contact { font-weight: 600; }