@font-face {
  font-family: "Viaoda Libre";
  src: url("../images/ViaodaLibre-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Square Peg";
  src: url("../images/SquarePeg-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Shadows Into Light";
  src: url("../images/ShadowsIntoLight-Regular.ttf") format("truetype");
  font-display: swap;
}

.books-page {
  background: var(--paper);
}

.books-header {
  position: absolute;
}

.books-header .current::after {
  width: 100%;
}

/* BOOKS HERO */

.books-hero {
  min-height: 690px;
  padding: 190px max(8vw, 28px) 105px;
  color: var(--cream);
  background:
    radial-gradient(
      circle at 78% 28%,
      rgba(138, 61, 89, 0.34),
      transparent 22%
    ),
    radial-gradient(
      circle at 18% 82%,
      rgba(85, 115, 108, 0.22),
      transparent 26%
    ),
    linear-gradient(132deg, #170d15, #321521 55%, #151012);
  position: relative;
  overflow: hidden;
}

.books-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.13;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    99deg,
    transparent 0 17px,
    rgba(255, 255, 255, 0.05) 18px,
    transparent 19px
  );
}

.hero-orbit {
  position: absolute;
  width: 540px;
  height: 540px;
  right: -120px;
  bottom: -280px;
  border: 1px solid rgba(181, 147, 79, 0.24);
  border-radius: 50%;
}

.hero-orbit::before,
.hero-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(181, 147, 79, 0.16);
  border-radius: 50%;
}

.hero-orbit::before {
  inset: 55px;
}

.hero-orbit::after {
  inset: 118px;
}

.books-hero > *:not(.hero-orbit) {
  position: relative;
  z-index: 1;
}

.books-hero-snake {
  position: absolute !important;
  z-index: 0 !important;
  width: min(26vw, 360px);
  right: 3%;
  bottom: 3%;
  opacity: 0.58;
  transform: rotate(-7deg);
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.28));
}

.books-hero-moth {
  position: absolute !important;
  z-index: 1 !important;
  width: 92px;
  right: 24%;
  top: 135px;
  opacity: 0.92;
  transform: rotate(10deg);
}

.books-hero h1 {
  max-width: 900px;
  margin: 0;
  font:
    400 clamp(70px, 10vw, 145px) / 0.85 "Viaoda Libre",
    serif;
  letter-spacing: -0.055em;
}

.books-deck {
  max-width: 730px;
  margin: 35px 0 45px;
  color: #d8cbbc;
  font-size: clamp(19px, 2vw, 26px);
  font-style: italic;
  line-height: 1.5;
}

/* COLLECTION NAVIGATION */

.collection-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.collection-nav a {
  padding: 10px 14px;
  border: 1px solid rgba(239, 227, 207, 0.27);
  color: #d9bc87;
  font:
    10px/1 ui-monospace,
    monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: 0.2s ease;
}

.collection-nav a:hover,
.collection-nav a:focus-visible {
  color: var(--cream);
  background: var(--blood);
  border-color: var(--blood);
}

/* COLLECTION SECTIONS */

.collection {
  padding: 105px max(7vw, 24px) 120px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.collection:nth-of-type(even) {
  background: var(--bone);
}

.collection-dark {
  color: var(--cream);
  background: var(--deep) !important;
}

.collection-wine {
  color: var(--cream);
  background: var(--blackberry) !important;
}

.collection-heading,
.book-grid,
.standalone-shelves {
  position: relative;
  z-index: 1;
}

.collection-heading {
  max-width: 1250px;
  margin: 0 auto 58px;
  padding-bottom: 30px;
  border-bottom: 1px solid currentColor;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: end;
}

.collection-heading h2 {
  margin: 0;
  font:
    400 clamp(48px, 6vw, 82px) / 0.95 "Viaoda Libre",
    serif;
  letter-spacing: -0.035em;
}

.collection-heading > p {
  max-width: 530px;
  margin: 0;
  opacity: 0.74;
  line-height: 1.6;
}

/* DECORATIVE ARTWORK */

.margin-art {
  position: absolute;
  z-index: 0;
  width: clamp(105px, 11vw, 165px);
  max-height: 260px;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.58;
  filter: drop-shadow(0 12px 18px rgba(40, 20, 33, 0.12));
}

.margin-art-left {
  left: 28px;
  top: 38%;
  transform: rotate(5deg);
}

.margin-art-right {
  right: 28px;
  top: 40%;
  transform: rotate(-5deg);
}

.margin-art-potions {
  top: 45%;
}

.margin-art-eye {
  top: 34%;
}

.margin-art-raven {
  top: 42%;
}

.margin-art-mushrooms {
  top: 45%;
}

.margin-art-bloom {
  top: 38%;
}

/* BOOK GROUPS */

.book-grid {
  max-width: 980px;
  margin: auto;
  padding: 0 35px 28px;
  display: grid;
  justify-content: center;
  gap: 48px;
}

.shelf-three {
  grid-template-columns: repeat(3, minmax(0, 240px));
}

.shelf-two {
  grid-template-columns: repeat(2, minmax(0, 240px));
}

.shelf-single {
  grid-template-columns: minmax(0, 520px);
}

/* BOOK CARDS */

.book-card {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.cover-wrap {
  width: 190px;
  margin: 0 auto;
  padding: 12px 12px 18px;
  position: relative;
  background: rgba(181, 147, 79, 0.13);
  border: 1px solid rgba(181, 147, 79, 0.38);
  box-shadow: 8px 11px 0 rgba(40, 20, 33, 0.13);
}

.collection-dark .cover-wrap,
.collection-wine .cover-wrap {
  background: rgba(239, 227, 207, 0.06);
  box-shadow: 12px 16px 0 rgba(0, 0, 0, 0.25);
}

.cover-wrap img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1423 / 2048;
  object-fit: cover;
  box-shadow: 0 13px 28px rgba(23, 13, 21, 0.25);
}

.book-copy {
  position: relative;
  z-index: 2;
  padding: 52px 5px 0;
  text-align: center;
}

.book-order {
  margin: 0 0 11px;
  color: var(--wine);
  font:
    12px/1.4 ui-monospace,
    monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.collection-dark .book-order,
.collection-wine .book-order {
  color: #d4b777;
}

.book-copy h3 {
  margin: 0 0 13px;
  font:
    400 clamp(29px, 2.7vw, 40px) / 1 "Viaoda Libre",
    serif;
}

.book-copy > p:not(.book-order) {
  margin: 0;
  opacity: 0.78;
  line-height: 1.55;
}

/* BOOK BUTTONS AND LINKS */

.book-actions {
  min-height: 54px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid rgba(40, 20, 33, 0.2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  align-items: center;
  font-size: 14px;
}

.collection-dark .book-actions,
.collection-wine .book-actions {
  border-color: rgba(239, 227, 207, 0.2);
}

.book-actions a:not(.buy-link) {
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 0.72;
}

.buy-link {
  padding: 11px 14px;
  color: var(--cream);
  background: var(--blood);
  font:
    12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.buy-link:hover,
.buy-link:focus-visible {
  filter: brightness(1.15);
}

.collection-wine .buy-link {
  background: var(--moss);
}

.status-note {
  color: var(--wine);
  font:
    12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.collection-dark .status-note,
.collection-wine .status-note {
  color: #d4b777;
}

.forthcoming .cover-wrap img {
  filter: saturate(0.72);
}

/* STANDALONES */

.standalone-shelves {
  display: grid;
  gap: 82px;
}

.standalone-shelves .book-card {
  max-width: 690px;
  margin: auto;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.standalone-shelves .cover-wrap {
  grid-column: 1;
}

.standalone-shelves .book-copy {
  grid-column: 2;
  padding-top: 42px;
  text-align: left;
}

.standalone-shelves .book-actions {
  justify-content: flex-start;
}

/* BUNDLES */

.bundles-collection .collection-heading {
  margin-bottom: 46px;
}

.bundle-grid {
  position: relative;
  z-index: 1;
  width: min(100%, 1080px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px 34px;
  align-items: start;
}

.bundle-card {
  min-width: 0;
  text-align: center;
}

.bundle-cover {
  width: min(100%, 170px);
  margin: 0 auto 22px;
}

.bundle-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1423 / 2048;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.34);
}

.bundle-card.forthcoming .bundle-cover img {
  filter: saturate(0.72);
}

.bundle-copy {
  max-width: 300px;
  margin: 0 auto;
}

.bundle-copy .book-order {
  margin-bottom: 10px;
}

.bundle-copy h3 {
  margin: 0 0 10px;
  color: var(--cream);
  font: 400 29px/1.05 "Viaoda Libre", serif;
}

.bundle-copy > p:not(.book-order) {
  margin: 0;
  color: rgba(239, 227, 207, 0.76);
  font-size: 14px;
  line-height: 1.55;
}

.bundle-copy .book-actions {
  margin-top: 17px;
  justify-content: center;
}

/* ARCHIVE CTA */

.shelf-note {
  padding: 120px 24px;
  color: var(--ink);
  background: var(--paper);
  text-align: center;
}

.shelf-note h2 {
  max-width: 850px;
  margin: 0 auto 20px;
  color: var(--wine);
  font:
    400 clamp(48px, 7vw, 90px) / 0.95 "Square Peg",
    cursive;
}

.shelf-note > p:not(.eyebrow) {
  max-width: 650px;
  margin: 0 auto 35px;
  line-height: 1.6;
}

.books-footer {
  grid-template-columns: auto 1fr auto;
}

.books-footer > a:last-child {
  color: var(--brass);
}

/* TABLETS */

@media (max-width: 900px) {
  .books-hero {
    min-height: 620px;
    padding-top: 155px;
  }

  .collection-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .shelf-three {
    grid-template-columns: repeat(3, minmax(0, 200px));
    gap: 28px;
  }

  .shelf-two {
    grid-template-columns: repeat(2, minmax(0, 220px));
  }

  .margin-art {
    width: 90px;
    opacity: 0.24;
  }

  .margin-art-left {
    left: 14px;
  }

  .margin-art-right {
    right: 14px;
  }

  .bundle-grid {
    max-width: 700px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* PHONES */

@media (max-width: 620px) {
  .books-hero {
    padding: 135px 24px 85px;
  }

  .books-hero h1 {
    font-size: 65px;
  }

  .books-hero-snake {
    width: 180px;
    right: 18px;
    bottom: 18px;
    opacity: 0.3;
  }

  .books-hero-moth {
    width: 64px;
    right: 16%;
    top: 112px;
  }

  .margin-art {
    display: none;
  }

  .collection {
    padding: 80px 24px 95px;
  }

  .book-grid,
  .shelf-three,
  .shelf-two,
  .shelf-single {
    max-width: 390px;
    padding-right: 0;
    padding-left: 0;
    grid-template-columns: 1fr;
    gap: 70px;
  }

  .standalone-shelves .book-card {
    display: block;
    max-width: 360px;
  }

  .standalone-shelves .book-copy {
    padding-top: 34px;
    text-align: center;
  }

  .standalone-shelves .book-actions {
    justify-content: center;
  }

  .bundle-grid {
    max-width: 340px;
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .bundle-cover {
    width: 155px;
  }

  .collection-heading {
    margin-bottom: 42px;
  }

  .books-footer {
    grid-template-columns: 1fr;
  }
}