.page-lire .page-hero__image {
  opacity: 0.45;
}

.contents-hero {
  min-height: 0;
  padding: calc(var(--header-h) + clamp(1.5rem, 5vw, 3.5rem)) 0 clamp(2.5rem, 6vw, 4rem);
}

.contents-hero .ornament {
  margin-top: 1.25rem;
}

.contents-hero .page-hero__lead {
  margin-top: 1.25rem;
}

.contents-resume {
  margin-top: 2rem;
}

.contents-resume__chapter {
  margin: 0.9rem 0 0;
  color: var(--text-muted);
  font-size: 1.15rem;
  font-style: italic;
}

.contents {
  padding-bottom: var(--section-space);
}

.books {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  max-width: 64rem;
  margin: 0 auto;
}

.book {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 4.5vw, 3.5rem);
}

.book__aside {
  display: grid;
  grid-template-columns: clamp(6rem, 24vw, 9rem) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto 1fr;
  column-gap: clamp(1.25rem, 5vw, 2rem);
  align-content: start;
}

.book__cover {
  --cover-pad: 0.45rem;
  grid-area: 1 / 1 / 6 / 2;
  padding: var(--cover-pad);
}

.book__cover::after {
  content: "";
  position: absolute;
  inset: var(--cover-pad);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(255, 255, 255, 0.12) 1.6%, rgba(0, 0, 0, 0.2) 3.5%, transparent 9%);
  pointer-events: none;
}

.book__cover img {
  aspect-ratio: auto;
}

.book__cover .frame__placeholder {
  aspect-ratio: 3 / 4;
}

.book__cover .frame__placeholder svg {
  width: 60%;
  height: auto;
}

.book__title {
  grid-area: 2 / 2;
  color: var(--gold-300);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.book__meta {
  grid-area: 4 / 2;
  margin: 0.7rem 0 0.4rem;
  color: var(--gold-500);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

@media (min-width: 23.5rem) {
  .book__meta .album__meta-item {
    white-space: nowrap;
  }
}

.book__lead {
  display: none;
  grid-area: 3 / 2;
  margin: 0.6rem 0 0;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.55;
}

@media (min-width: 40rem) {
  .book__lead {
    display: block;
  }
}

@media (min-width: 60rem) {
  .book {
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: start;
  }

  .book__aside {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    justify-items: center;
    text-align: center;
  }

  .book__aside > * {
    grid-area: auto;
  }

  .book__cover {
    --cover-pad: 0.75rem;
    width: 100%;
    margin-bottom: 2rem;
  }

  .book__lead {
    max-width: 24rem;
    margin-top: 0.9rem;
  }

  .book__meta {
    margin: 1.1rem 0 0.6rem;
  }
}

@media (min-width: 60rem) and (min-height: 52rem) {
  .book__aside {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

.contents__message {
  margin: 0;
  padding: 1.5rem;
  border: 1px solid rgba(217, 130, 111, 0.45);
  color: #e3a08f;
  text-align: center;
}

.toc {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc__item + .toc__item {
  border-top: 1px solid rgba(201, 163, 92, 0.13);
}

.toc__entry {
  position: relative;
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  align-items: baseline;
  padding: 1.05rem 0.5rem;
  color: var(--parchment);
  text-decoration: none;
}

.toc__entry::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(224, 191, 122, 0.1), transparent 75%);
  box-shadow: inset 2px 0 0 var(--gold-400);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

a.toc__entry:hover::before,
a.toc__entry:focus-visible::before {
  opacity: 1;
}

.toc__number {
  color: var(--gold-500);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  transition: color 0.3s, text-shadow 0.3s;
}

.toc__title {
  font-size: clamp(1.2rem, 1vw + 0.95rem, 1.45rem);
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.3s;
}

.toc__leader {
  display: none;
}

.toc__status {
  grid-column: 2;
  justify-self: start;
  margin-top: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  white-space: nowrap;
  text-transform: uppercase;
}

.toc__status--soon {
  color: var(--gold-600);
}

.toc__status--ready {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  color: var(--gold-300);
}

.toc__status--ready::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.4s var(--ease-out);
}

.is-soon .toc__title {
  color: rgba(236, 228, 210, 0.7);
}

a.toc__entry:hover .toc__number,
a.toc__entry:focus-visible .toc__number {
  color: var(--gold-300);
  text-shadow: 0 0 12px rgba(239, 216, 155, 0.5);
}

a.toc__entry:hover .toc__title,
a.toc__entry:focus-visible .toc__title {
  color: var(--gold-200);
}

a.toc__entry:hover .toc__status--ready::after,
a.toc__entry:focus-visible .toc__status--ready::after {
  transform: translateX(0.3em) rotate(-45deg);
}

@media (min-width: 40rem) {
  .toc__entry {
    display: flex;
    gap: 0;
    padding-inline: 0.75rem;
  }

  .toc__number {
    flex: none;
    width: 3.2rem;
  }

  .toc__title {
    flex: 0 1 auto;
  }

  .toc__leader {
    display: block;
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    height: 0.25rem;
    margin: 0 1rem;
    background: radial-gradient(circle, rgba(201, 163, 92, 0.5) 0.07rem, transparent 0.09rem) 0 50% / 0.6rem 0.25rem repeat-x;
    transition: opacity 0.3s;
  }

  .is-soon .toc__leader {
    opacity: 0.55;
  }

  .toc__status {
    flex: none;
    margin-top: 0;
  }
}