/* An illustrated cover face, shared by the shelves and the reader. */
.cover-face {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  border-radius: 2px 3px 3px 2px;
  background: var(--cover-binding, #21332d);
  color: var(--cover-accent, #f4e0b1);
}

.cover-illustration,
.cover-print {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.cover-illustration { object-fit: cover; }
.cover-print {
  text-align: center;
  background:
    linear-gradient(90deg, #0b080794 0%, #1c120c40 2.3%, #f0d9b337 3.4%, transparent 5.8%),
    linear-gradient(180deg, #090b0b5e, #090b0b30 29%, transparent 46%, transparent 73%, #090a0bb8);
}

.cover-print::before {
  position: absolute;
  inset: 3.8% 5% 4% 7%;
  border: 1px solid currentColor;
  opacity: .34;
  border-radius: 1px;
  content: "";
}

.cover-series,
.cover-byline {
  position: absolute;
  inset-inline: 10% 8%;
  font-family: var(--body-font);
  font-size: 4.2cqi;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px #000;
}

.cover-series { inset-block-start: 7.7%; }
.cover-byline { inset-block-end: 8%; }

.cover-title {
  position: absolute;
  inset: 11% 7% auto 9%;
  display: block;
  font: 400 11.9cqi / .98 var(--display-font);
  letter-spacing: -.015em;
  text-wrap: balance;
  text-shadow: 0 2px 5px #000, 0 0 16px #160e08a0;
}

.cover-series:not(:empty) + .cover-title { inset-block-start: 14%; }
.cover-title > span { display: block; padding-block-end: .09em; }

/* A separate back board, block of signatures, and spine give shelf art real depth. */
.bound-cover {
  --book-depth: 5px;
  --book-turn: -8deg;
  --book-tip: 1.5deg;
  position: relative;
  display: block;
  isolation: isolate;
  inline-size: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 2px 3px 3px 2px;
  background: var(--cover-binding);
  transform: perspective(660px) rotateY(var(--book-turn)) rotateZ(var(--book-tip));
  transform-origin: 43% 66%;
  transition: transform 360ms cubic-bezier(.2,.8,.25,1), box-shadow 360ms ease;
  box-shadow: 6px 11px 17px #332c274d, 2px 3px 6px #342d2361;
}

.bound-cover::before {
  position: absolute;
  z-index: -2;
  inset: 1px calc(-1 * var(--book-depth)) -4px 1px;
  border-radius: 2px 4px 4px 2px;
  background: var(--cover-binding);
  box-shadow: 3px 3px 2px #20161341, inset -1px -1px 1px #ffffff52;
  content: "";
}

.bound-paper {
  position: absolute;
  z-index: -1;
  inset: 2px calc(1px - var(--book-depth)) -2px 2px;
  border-radius: 1px 3px 3px 2px;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, #8064464f 2px 3px),
    linear-gradient(100deg, #8b7257, #dfcfac 63%, #f0dfbf);
  box-shadow: inset -1px 0 2px #9e8a71;
}

.bound-cover > .cover-face { position: absolute; inset: 0; }
.book-art { perspective: 900px; }
.popular-books .bound-cover { aspect-ratio: 2 / 3; }
.book-card:hover .bound-cover,
.book-card:focus-visible .bound-cover,
.collection-book:hover .bound-cover,
.collection-book:focus-visible .bound-cover {
  transform: perspective(680px) translateY(-5px) rotateY(-18deg) rotateZ(-1deg);
  box-shadow: 9px 15px 22px #332c2766, 2px 3px 6px #342d2361;
}

.shelf .bound-cover { --book-depth: 7px; }
.shelf .is-featured .bound-cover { --book-turn: -13deg; --book-depth: 9px; }
.collection-cover { --book-depth: 4px; }
.collection-book { grid-template-columns: calc(68 * var(--unit)) minmax(0, 1fr) auto; }
.collection-label { align-self: center; padding-block-start: 0; }

.search-results a { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; }
.search-results .search-cover { --book-depth: 2px; --book-turn: 0deg; --book-tip: 0deg; box-shadow: 2px 3px 5px #332c2743; }
.search-results a:focus-visible { outline-offset: -2px; }

.editorial-label {
  display: block;
  margin-block-end: 9px;
  color: #765444;
  font-size: clamp(9px, .85vw, 11px);
  font-weight: 750;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.home-hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr) minmax(0, .83fr);
  align-items: center;
  column-gap: clamp(14px, 3vw, 44px);
  padding-block: clamp(12px, 1.25vw, 18px) clamp(25px, 3vw, 40px);
}

.welcome h1 { font-size: clamp(36px, 4.15vw, 62px); line-height: 1.04; }
.welcome p { color: #555148; max-inline-size: 245px; font-size: clamp(13px, 1.04vw, 15px); }
.welcome .start-button {
  min-block-size: 42px;
  padding-inline: 17px;
  gap: 7px;
  background: #2b3730;
  border-color: #2b3730;
  font-size: 13px;
}
.welcome .start-button:hover { background: #3a4c42; }
.feature-art {
  display: grid;
  position: relative;
  isolation: isolate;
  place-items: center;
  inset: auto;
  align-self: center;
  inline-size: 100%;
  min-block-size: 250px;
  margin: 0;
  border-radius: 6px;
  perspective: 900px;
}

.feature-halo {
  position: absolute;
  z-index: -1;
  inset: 2% -6% -3%;
  background:
    radial-gradient(ellipse at 53% 91%, #38261e37 0%, transparent 42%),
    radial-gradient(ellipse at 48% 46%, #f9f7df 0%, #e8d8b594 37%, transparent 72%);
}

.hero-cover {
  --book-depth: 13px;
  --book-turn: -23deg;
  --book-tip: -8deg;
  inline-size: min(52%, 186px);
  margin-block: 8px 19px;
  box-shadow: 17px 23px 28px #3024195e, 5px 7px 10px #342d235c;
}

.feature-art:is(:hover, :focus-visible) .hero-cover {
  transform: perspective(620px) translateY(-6px) rotateY(-11deg) rotateZ(-4deg);
  box-shadow: 15px 29px 34px #30241954, 5px 8px 10px #342d235c;
}

.feature-copy { padding-block-start: 0; }
.feature-copy h2 { font-size: clamp(24px, 2.65vw, 38px); }
.feature-copy h2 a:hover { text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: 1px; }
.feature-copy p { color: #555148; margin-block-start: 12px; font-size: clamp(12px, 1vw, 14px); }
.feature-copy .page-count { margin-block-start: 13px; color: #655c50; }
.feature-copy .page-count strong { color: #8c3e36; }
.feature-author { text-align: start; margin-block-start: 14px; font-size: 12px; font-weight: 650; }

.detail-hero { min-block-size: clamp(285px, 30vw, 418px); align-items: center; }
.detail-art {
  position: relative;
  z-index: 1;
  inset: auto;
  display: block;
  grid-area: 1 / 1;
  justify-self: center;
  inline-size: clamp(118px, 15.6vw, 214px);
  padding-block: 23px 28px;
  perspective: 800px;
}

.detail-cover { --book-depth: 10px; --book-turn: -16deg; --book-tip: -5deg; }
.detail-art:is(:hover, :focus-visible) .detail-cover {
  transform: perspective(670px) translateY(-4px) rotateY(-7deg) rotateZ(-2deg);
}
.detail-intro { padding-block-start: 0; }

@media (max-width: 1023px) {
  .feature-art { min-block-size: 214px; }
  .hero-cover { inline-size: min(65%, 170px); }
}

@media (max-width: 760px) {
  .home-hero { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 22px 14px; padding-block: 25px 9px; }
  .welcome h1 { font-size: clamp(36px, 7vw, 50px); }
  .welcome h1 br { display: none; }
  .welcome p { max-inline-size: 310px; }
  .feature-art { min-block-size: 0; }
  .hero-cover { --book-depth: 8px; inline-size: min(73%, 155px); margin-block: 7px 14px; }
  .feature-copy h2 { font-size: clamp(22px, 4.9vw, 32px); }
  .feature-copy .editorial-label { margin-block-end: 5px; }
  .feature-copy p { margin-block-start: 8px; }
  .detail-hero { min-block-size: 0; align-items: center; }
  .detail-art { flex: 0 0 33%; padding-block: 4px 11px; }
  .detail-cover { --book-depth: 6px; }
}

@media (max-width: 390px) {
  .home-hero { column-gap: 11px; }
  .welcome h1 { line-height: 1.08; }
  .feature-copy .page-count, .feature-author { margin-block-start: 8px; }
  .collection-book { grid-template-columns: 50px minmax(0, 1fr) auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bound-cover, a:is(:hover, :focus-visible) .bound-cover {
    transform: perspective(660px) rotateY(var(--book-turn)) rotateZ(var(--book-tip));
  }
}

.share-dialog { inline-size: min(420px, calc(100% - 28px)); }
.share-dialog label { display: block; margin-block: 15px 5px; }
.share-dialog textarea {
  display: block;
  inline-size: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  overflow-wrap: anywhere;
  resize: vertical;
}
.share-dialog .form-actions { margin-block-start: 12px; }
.share-dialog [role="status"] { margin-block-start: 7px; min-block-size: 1.55em; color: #5a5146; }

:root[data-theme="dark"] :is(.welcome p, .feature-copy p, .feature-copy .page-count, .share-dialog [role="status"]) {
  color: var(--muted);
}
:root[data-theme="dark"] :is(.editorial-label, .feature-copy .page-count strong) { color: var(--red-text); }
:root[data-theme="dark"] .feature-halo {
  background: radial-gradient(ellipse at 48% 46%, #534338 0%, #3a3130 37%, transparent 72%);
}
:root[data-theme="light"] .feature-halo {
  background: radial-gradient(ellipse at 48% 46%, #fff 0%, #e3e6eb 37%, transparent 72%);
}