.library {
  --gap: clamp(var(--inline-space), 2cqi, calc(var(--inline-space) * 3));
  --hover-size: 0;

  display: grid;
  gap: var(--block-space) var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(max(220px, 21cqi), 1fr));
  padding: var(--gap);
}

.library__book {
  --row-gap: calc(var(--block-space) * 0.2);

  container-type: inline-size;
  display: flex;
  flex-direction: column;
  margin: 0;
  text-align: center;
}

/* Title + author overlaid inside the cover, anchored top-left.
   The cover's position-relative wrapper is the positioning context. */
.book__cover-meta {
  color: var(--color-always-white);
  inset-block-start: 0;
  inset-inline-start: 0;
  max-inline-size: 100%;
  padding: 4cqi;
  pointer-events: none;
  position: absolute;
  text-align: start;
  text-shadow: 0 1px 4px rgb(0 0 0 / 65%);
  z-index: 2;
}

.book__cover-meta strong {
  font-size: 1.2em;
}

/* White themed covers need dark text — mirrors the old placeholder rule. */
.theme--white .book__cover-meta {
  color: var(--color-always-black);
  text-shadow: none;
}

.library__book--empty {
  display: inline-grid;
  place-items: center;

  * {
    grid-area: 1 / 1;
  }
}

/* An open-book card spans ~2x a plain cover card. */
.library__book.open-book {
  grid-column: span 2;
}

.open-book__spread {
  align-items: stretch;
  aspect-ratio: 12 / 9;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-block-size: 0;
  overflow: hidden;
}

.open-book__cover,
.open-book__excerpt {
  block-size: 100%;
  min-block-size: 0;
  min-inline-size: 0;
  overflow: hidden;
}

.open-book__cover {
  border-radius: 0.3em 0 0 0.3em;
  display: block;
  position: relative;
  z-index: 1;
}

.open-book .book__cover-wrapper {
  block-size: 100%;
  display: block;
  inline-size: 100%;
}

.open-book .book__cover {
  block-size: 100%;
  border-radius: inherit;
  inline-size: 100%;
  margin: 0;
  max-block-size: none;
  object-fit: cover;
}

.open-book__excerpt {
  display: block;
  margin-inline-start: -0.4em;
  position: relative;
}

/* Overlay link (mirrors .bookmark__link) so the whole excerpt is clickable
   without wrapping .open-book__page — wrapping it breaks its height chain. */
.open-book__page-link {
  inset: 0;
  position: absolute;
  z-index: 1;
}

/* The right-hand "page": same look as the workbook show-page excerpt thumbnails.
   Height comes from the spread's aspect-ratio (block-size: 100% + overflow: hidden),
   so a long excerpt clips instead of throwing off vertical alignment. */
.open-book__page img {
  aspect-ratio: 16 / 9;
  border-radius: 0.2em;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.open-book__page {
  background-color: var(--color-bg);
  block-size: 100%;
  border: 1px solid var(--color-subtle-dark);
  border-radius: 0 0.3em 0.3em 0;
  box-sizing: border-box;
  color: var(--color-text);
  font-size: clamp(0.5rem, 5cqi, 0.8rem);
  inline-size: 100%;
  line-height: 1.4;
  overflow: hidden;
  padding: 3cqi;
  padding-inline-start: calc(3cqi + 0.4em);
  text-align: start;
}

/* Narrow screens: drop the excerpt, collapse back to a single portrait cover card. */
@media (max-width: 70ch) {
  .library__book.open-book {
    grid-column: span 1;
  }

  .open-book__spread {
    aspect-ratio: 6 / 9;
    grid-template-columns: 1fr;
  }

  .open-book__cover {
    border-radius: 0.3em;
  }

  .open-book__excerpt {
    display: none;
  }
}