/* ==========================================================
   THE ANGEL ARCHIVE
   THE CELESTIAL TBR VAULT

   tbr.css

   PAGE ORDER
   01. Foundation
   02. TBR Intro
   03. Celestial Book Art
   04. Divider
   05. Collection Heading
   06. Search + Filters
   07. Book Grid
   08. Load More
   09. Sign-Off
   10. Divine Intervention
   11. Utility
   12. Responsive
   13. Reduced Motion
   ========================================================== */



/* ==========================================================
   01. FOUNDATION
   ========================================================== */

html {
  scroll-behavior: smooth;
}


body.tbr-page {
  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 78% 7%,
      rgba(246, 214, 217, 0.32),
      transparent 23%
    ),
    radial-gradient(
      circle at 13% 36%,
      rgba(255, 255, 255, 0.95),
      transparent 29%
    ),
    linear-gradient(
      180deg,
      #fffafa 0%,
      #fffdfd 48%,
      #fff8f9 100%
    );

  color: var(--ink-rose);
}


.tbr-page button,
.tbr-page input,
.tbr-page select {
  font: inherit;
}


.tbr-page button,
.tbr-page select {
  cursor: pointer;
}


.tbr-page button {
  color: inherit;
}


.tbr-page img {
  display: block;
  max-width: 100%;
}

/* ==========================================================
   SHARED TBR BUTTONS
   ========================================================== */

.tbr-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 48px;
  padding: 0 24px;

  border: 1px solid rgba(200, 121, 133, 0.34);
  border-radius: 999px;

  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1;

  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;

  transform: translateY(0);

  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    letter-spacing 220ms ease;
}


/* ----------------------------------------------------------
   LITTLE SHIMMER THAT PASSES OVER BOTH BUTTONS
   ---------------------------------------------------------- */

.tbr-button::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: -40%;
  left: -55%;

  width: 32%;
  height: 180%;

  transform: rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.72),
      transparent
    );

  opacity: 0;

  pointer-events: none;
}


/* ----------------------------------------------------------
   SHARED HOVER MOVEMENT
   ---------------------------------------------------------- */

.tbr-button:hover {
  transform:
    translateY(-3px)
    scale(1.015);

  letter-spacing: 0.125em;
}


.tbr-button:hover::before {
  opacity: 1;

  animation:
    tbrButtonShimmer
    700ms
    ease
    forwards;
}


@keyframes tbrButtonShimmer {

  from {
    left: -55%;
  }

  to {
    left: 125%;
  }

}


/* ==========================================================
   BROWSE MY TBR
   ========================================================== */

.tbr-button--soft {
  background:
    rgba(255, 255, 255, 0.76);

  color: var(--archive-rose);

  box-shadow:
    0 8px 24px rgba(94, 61, 69, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}


.tbr-button--soft:hover {
  background:
    rgba(255, 255, 255, 0.98);

  border-color:
    rgba(200, 121, 133, 0.58);

  box-shadow:
    0 8px 22px rgba(200, 121, 133, 0.14),
    0 0 18px rgba(246, 214, 217, 0.78),
    0 0 38px rgba(246, 214, 217, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}


/* ==========================================================
   DIVINE INTERVENTION
   ========================================================== */

.tbr-button--primary {
  border-color:
    rgba(200, 121, 133, 0.42);

  background:
    linear-gradient(
      135deg,
      #d996a1 0%,
      #c87985 100%
    );

  color: #fffafa;

  box-shadow:
    0 10px 24px rgba(200, 121, 133, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}


.tbr-button--primary:hover {
  border-color:
    rgba(200, 121, 133, 0.62);

  background:
    linear-gradient(
      135deg,
      #dfa0aa 0%,
      #ca7d89 100%
    );

  box-shadow:
    0 10px 24px rgba(200, 121, 133, 0.28),
    0 0 20px rgba(225, 165, 174, 0.58),
    0 0 42px rgba(246, 214, 217, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}


/* ==========================================================
   BUTTON ICONS
   Gives the little arrow / sparkles some life separately
   from the actual button.
   ========================================================== */

.tbr-button span,
.tbr-button i {
  display: inline-block;

  font-style: normal;

  transition:
    transform 220ms ease,
    opacity 220ms ease;
}


/* Browse arrow gives a tiny downward bounce */

.tbr-button--soft:hover span:last-child,
.tbr-button--soft:hover i:last-child {
  animation:
    tbrBrowseArrow
    650ms
    ease-in-out
    infinite alternate;
}


@keyframes tbrBrowseArrow {

  from {
    transform: translateY(-1px);
  }

  to {
    transform: translateY(2px);
  }

}


/* Divine Intervention sparkles pulse */

.tbr-button--primary:hover span,
.tbr-button--primary:hover i {
  animation:
    tbrButtonStar
    700ms
    ease-in-out
    infinite alternate;
}


@keyframes tbrButtonStar {

  from {
    opacity: 0.72;

    transform:
      rotate(-8deg)
      scale(0.88);
  }

  to {
    opacity: 1;

    transform:
      rotate(8deg)
      scale(1.22);
  }

}

/* ==========================================================
   02. TBR INTRO
   ========================================================== */

.tbr-intro {
  position: relative;
  isolation: isolate;

  min-height: 590px;

  padding:
    142px
    24px
    18px;

  overflow: hidden;
}


/* Large soft atmosphere across the whole hero */

.tbr-intro__atmosphere {
  position: absolute;
  z-index: 0;

  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 74% 46%,
      rgba(246, 214, 217, 0.40) 0%,
      rgba(250, 229, 230, 0.20) 26%,
      transparent 57%
    ),
    radial-gradient(
      circle at 85% 23%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0) 20%
    ),
    radial-gradient(
      circle at 61% 69%,
      rgba(241, 206, 210, 0.16),
      transparent 25%
    );
}


/* ==========================================================
   HERO-WIDE STARDUST
   ========================================================== */

.tbr-intro__stardust {
  position: absolute;
  z-index: 1;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.tbr-intro-star {
  position: absolute;

  display: block;

  color: rgba(200, 121, 133, 0.56);

  font-family: var(--font-display);
  font-style: normal;

  line-height: 1;

  text-shadow:
    0 0 8px rgba(255, 255, 255, 1),
    0 0 17px rgba(225, 165, 174, 0.35);

  animation:
    tbrHeroTwinkle
    4.2s
    ease-in-out
    infinite;
}


/* Mostly around the right side, with a few crossing center */

.tbr-intro-star--01 {
  left: 52%;
  top: 23%;

  font-size: 0.72rem;

  animation-delay: -0.3s;
}


.tbr-intro-star--02 {
  left: 58%;
  top: 13%;

  font-size: 1rem;

  animation-delay: -1.6s;
}


.tbr-intro-star--03 {
  left: 64%;
  top: 30%;

  font-size: 0.56rem;

  animation-delay: -2.7s;
}


.tbr-intro-star--04 {
  left: 69%;
  top: 12%;

  font-size: 0.62rem;

  animation-delay: -0.9s;
}


.tbr-intro-star--05 {
  left: 75%;
  top: 20%;

  font-size: 1.15rem;

  animation-delay: -3.4s;
}


.tbr-intro-star--06 {
  left: 81%;
  top: 14%;

  font-size: 1.55rem;

  animation-delay: -1.2s;
}


.tbr-intro-star--07 {
  left: 88%;
  top: 27%;

  font-size: 0.82rem;

  animation-delay: -2.1s;
}


.tbr-intro-star--08 {
  left: 94%;
  top: 39%;

  font-size: 0.72rem;

  animation-delay: -3.1s;
}


.tbr-intro-star--09 {
  left: 91%;
  top: 61%;

  font-size: 1rem;

  animation-delay: -0.6s;
}


.tbr-intro-star--10 {
  left: 84%;
  top: 75%;

  font-size: 0.62rem;

  animation-delay: -2.5s;
}


.tbr-intro-star--11 {
  left: 76%;
  top: 82%;

  font-size: 1.6rem;

  animation-delay: -1.4s;
}


.tbr-intro-star--12 {
  left: 68%;
  top: 77%;

  font-size: 0.76rem;

  animation-delay: -3.7s;
}


.tbr-intro-star--13 {
  left: 60%;
  top: 68%;

  font-size: 0.62rem;

  animation-delay: -2s;
}


.tbr-intro-star--14 {
  left: 55%;
  top: 51%;

  font-size: 0.82rem;

  animation-delay: -0.8s;
}


.tbr-intro-star--15 {
  left: 97%;
  top: 72%;

  font-size: 1.8rem;

  animation-delay: -3s;
}


.tbr-intro-star--16 {
  left: 48%;
  top: 39%;

  font-size: 0.58rem;

  animation-delay: -1.9s;
}


@keyframes tbrHeroTwinkle {

  0%,
  100% {
    opacity: 0.24;

    transform:
      translateY(2px)
      scale(0.76)
      rotate(-5deg);
  }

  50% {
    opacity: 0.96;

    transform:
      translateY(-4px)
      scale(1.18)
      rotate(8deg);
  }

}



/* ==========================================================
   HERO INNER LAYOUT
   ========================================================== */

.tbr-intro__inner {
  position: relative;
  z-index: 3;

  width: min(1240px, 100%);

  min-height: 440px;

  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(0, 0.88fr)
    minmax(520px, 1.12fr);

  align-items: center;

  gap: 25px;
}



/* ==========================================================
   HERO COPY
   ========================================================== */

.tbr-intro__copy {
  position: relative;
  z-index: 6;

  max-width: 570px;

  padding-left: 8px;
}


.tbr-intro__eyebrow {
  margin: 0 0 14px;

  color: var(--archive-rose);

  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;

  letter-spacing: 0.20em;
  text-transform: uppercase;
}


.tbr-intro__copy h1 {
  margin: 0;

  color: var(--ink-rose);

  font-family: var(--font-display);
  font-size: clamp(4.2rem, 6.4vw, 6.7rem);
  font-weight: 400;

  line-height: 0.78;

  letter-spacing: -0.055em;
}


.tbr-intro__copy h1 span {
  position: relative;

  display: block;

  width: max-content;

  margin:
    -1px
    0
    0
    clamp(82px, 8vw, 128px);

  color: var(--archive-rose);

  font-family: "Allura", cursive;
  font-size: 0.88em;
  font-weight: 400;

  line-height: 0.95;

  letter-spacing: 0;
}


.tbr-intro__copy h1 span::after {
  content: "✦";

  position: absolute;

  right: -28px;
  top: 22%;

  color: rgba(200, 121, 133, 0.60);

  font-family: var(--font-display);
  font-size: 0.18em;

  animation:
    tbrTitleSparkle
    3.5s
    ease-in-out
    infinite;
}


@keyframes tbrTitleSparkle {

  0%,
  100% {
    opacity: 0.32;
    transform: scale(0.82);
  }

  50% {
    opacity: 1;
    transform: scale(1.14);
  }

}


.tbr-intro__description {
  max-width: 470px;

  margin:
    18px
    0
    0;

  color: var(--dusty-ink);

  font-family: var(--font-body);
  font-size: 1rem;

  line-height: 1.85;
}


.tbr-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 26px;
}



/* ==========================================================
   03. CELESTIAL BOOK ART
   ========================================================== */

.tbr-intro__art {
  position: relative;
  z-index: 4;

  width: 100%;
  min-height: 470px;

  display: grid;
  place-items: center;

  isolation: isolate;
}


/* ==========================================================
   PEARLY AURA
   ========================================================== */

.tbr-book-aura {
  position: absolute;
  z-index: 1;

  left: 50%;
  top: 48%;

  width: 680px;
  height: 410px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 248, 249, 0.95) 19%,
      rgba(250, 229, 230, 0.72) 39%,
      rgba(246, 214, 217, 0.43) 54%,
      rgba(225, 165, 174, 0.14) 67%,
      transparent 77%
    );

  filter: blur(15px);

  animation:
    tbrAuraPulse
    6s
    ease-in-out
    infinite;
}


@keyframes tbrAuraPulse {

  0%,
  100% {
    opacity: 0.80;

    transform:
      translate(-50%, -50%)
      scale(0.96);
  }

  50% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1.045);
  }

}

/* ==========================================================
   BIG BOOK SPARKLES
   ========================================================== */

.tbr-book-sparkle {
  position: absolute;
  z-index: 8;

  color: rgba(200, 121, 133, 0.82);

  font-family: var(--font-display);
  font-style: normal;

  line-height: 1;

  text-shadow:
    0 0 6px #ffffff,
    0 0 15px rgba(246, 214, 217, 0.95),
    0 0 26px rgba(225, 165, 174, 0.34);

  animation:
    tbrBookSparkle
    3.6s
    ease-in-out
    infinite;
}


.tbr-book-sparkle--01 {
  left: 8%;
  top: 16%;

  font-size: 1.12rem;

  animation-delay: -0.4s;
}


.tbr-book-sparkle--02 {
  left: 22%;
  top: 3%;

  font-size: 0.72rem;

  animation-delay: -1.7s;
}


.tbr-book-sparkle--03 {
  left: 40%;
  top: 10%;

  font-size: 0.58rem;

  animation-delay: -2.9s;
}


.tbr-book-sparkle--04 {
  right: 24%;
  top: 4%;

  font-size: 1.18rem;

  animation-delay: -0.8s;
}


.tbr-book-sparkle--05 {
  right: 7%;
  top: 24%;

  font-size: 0.72rem;

  animation-delay: -2.1s;
}


.tbr-book-sparkle--06 {
  right: 2%;
  bottom: 28%;

  font-size: 1rem;

  animation-delay: -3.2s;
}


.tbr-book-sparkle--07 {
  right: 20%;
  bottom: 4%;

  font-size: 0.76rem;

  animation-delay: -1.1s;
}


.tbr-book-sparkle--08 {
  left: 38%;
  bottom: 2%;

  font-size: 0.58rem;

  animation-delay: -2.4s;
}


.tbr-book-sparkle--09 {
  left: 17%;
  bottom: 9%;

  font-size: 1rem;

  animation-delay: -3.4s;
}


.tbr-book-sparkle--10 {
  left: 1%;
  bottom: 31%;

  font-size: 0.72rem;

  animation-delay: -1.5s;
}


@keyframes tbrBookSparkle {

  0%,
  100% {
    opacity: 0.30;

    transform:
      translateY(3px)
      scale(0.72)
      rotate(-8deg);
  }

  45% {
    opacity: 1;

    transform:
      translateY(-4px)
      scale(1.28)
      rotate(7deg);
  }

  70% {
    opacity: 0.58;

    transform:
      translateY(-1px)
      scale(0.96)
      rotate(2deg);
  }

}



/* ==========================================================
   TINY BOOK STARDUST
   ========================================================== */

.tbr-book-dust {
  position: absolute;
  z-index: 7;

  color: rgba(200, 121, 133, 0.62);

  font-family: var(--font-display);

  line-height: 1;

  text-shadow:
    0 0 8px rgba(255, 255, 255, 1);

  animation:
    tbrBookDust
    3s
    ease-in-out
    infinite;
}


.tbr-book-dust--01 {
  left: 13%;
  top: 36%;

  font-size: 1.4rem;

  animation-delay: -0.2s;
}


.tbr-book-dust--02 {
  left: 29%;
  top: 18%;

  font-size: 1.1rem;

  animation-delay: -1.4s;
}


.tbr-book-dust--03 {
  left: 47%;
  top: 1%;

  font-size: 0.32rem;

  animation-delay: -2.5s;
}


.tbr-book-dust--04 {
  right: 34%;
  top: 19%;

  font-size: 1.25rem;

  animation-delay: -0.8s;
}


.tbr-book-dust--05 {
  right: 13%;
  top: 40%;

  font-size: 0.36rem;

  animation-delay: -2.1s;
}


.tbr-book-dust--06 {
  right: 8%;
  bottom: 15%;

  font-size: 1.3rem;

  animation-delay: -1.2s;
}


.tbr-book-dust--07 {
  right: 34%;
  bottom: 13%;

  font-size: 0.34rem;

  animation-delay: -2.8s;
}


.tbr-book-dust--08 {
  left: 49%;
  bottom: 10%;

  font-size: 1.2rem;

  animation-delay: -0.5s;
}


.tbr-book-dust--09 {
  left: 27%;
  bottom: 18%;

  font-size: 0.32rem;

  animation-delay: -1.9s;
}


.tbr-book-dust--10 {
  left: 8%;
  bottom: 19%;

  font-size: 1.3rem;

  animation-delay: -2.6s;
}


.tbr-book-dust--11 {
  right: 3%;
  top: 10%;

  font-size: 0.34rem;

  animation-delay: -1s;
}


.tbr-book-dust--12 {
  left: 4%;
  top: 8%;

  font-size: 1.2rem;

  animation-delay: -2.2s;
}


@keyframes tbrBookDust {

  0%,
  100% {
    opacity: 0.18;

    transform:
      translateY(2px)
      scale(0.72);
  }

  50% {
    opacity: 0.88;

    transform:
      translateY(-3px)
      scale(1.15);
  }

}



/* ==========================================================
   FLOATING BOOK
   ========================================================== */

.tbr-floating-book {
  position: relative;
  z-index: 6;

  width: min(110%, 690px);

  transform-origin: 50% 55%;

  animation:
    tbrBookFloat
    5.5s
    ease-in-out
    infinite;
}


.tbr-floating-book img {
  width: 100%;
  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 38px 24px
      rgba(94, 61, 69, 0.22)
    )
    drop-shadow(
      0 16px 11px
      rgba(200, 121, 133, 0.19)
    )
    drop-shadow(
      0 0 13px
      rgba(255, 255, 255, 1)
    )
    drop-shadow(
      0 0 34px
      rgba(246, 214, 217, 0.72)
    );
}


@keyframes tbrBookFloat {

  0%,
  100% {
    transform:
      translateY(2px)
      rotate(-0.35deg);
  }

  50% {
    transform:
      translateY(-12px)
      rotate(0.35deg);
  }

}



/* ==========================================================
   GROUNDING SHADOW
   ========================================================== */

.tbr-book-shadow {
  position: absolute;
  z-index: 3;

  left: 50%;
  bottom: 25px;

  width: 67%;
  height: 46px;

  transform: translateX(-50%);

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(94, 61, 69, 0.24) 0%,
      rgba(126, 81, 91, 0.15) 33%,
      rgba(200, 121, 133, 0.08) 53%,
      transparent 73%
    );

  filter: blur(15px);

  opacity: 0.88;

  animation:
    tbrShadowBreathe
    5.5s
    ease-in-out
    infinite;
}


@keyframes tbrShadowBreathe {

  0%,
  100% {
    opacity: 0.84;

    transform:
      translateX(-50%)
      scaleX(1);
  }

  50% {
    opacity: 0.60;

    transform:
      translateX(-50%)
      scaleX(0.88);
  }

}

/* ==========================================================
   04. ORNAMENTAL DIVIDER
   ========================================================== */

.tbr-divider {
  width: min(1120px, calc(100% - 48px));

  margin:
    -8px
    auto
    42px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  gap: 20px;

  color: rgba(200, 121, 133, 0.58);
}


.tbr-divider > span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(200, 121, 133, 0.24)
    );
}


.tbr-divider > span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(200, 121, 133, 0.24),
      transparent
    );
}


.tbr-divider b {
  display: flex;
  align-items: center;
  gap: 8px;

  font-family: var(--font-display);
  font-size: 0.48rem;
  font-weight: 400;
}


.tbr-divider i {
  font-size: 0.82rem;
  font-style: normal;

  color: var(--archive-rose);
}

/* ==========================================================
   05. THE CELESTIAL TBR COLLECTION
   ========================================================== */

.tbr-collection {
  position: relative;
  isolation: isolate;

  padding:
    48px
    24px
    20px;

  overflow: hidden;

  background-image:
  linear-gradient(
    rgba(255, 249, 250, 0.08),
    rgba(255, 249, 250, 0.08)
  ),
  url("../assets/tbr/tbr-vault-bg.png");

background-size:
  100% 100%,
  100% auto;

background-position:
  center top,
  center top;

background-repeat:
  no-repeat,
  repeat-y;
}


.tbr-collection__inner {
  position: relative;
  z-index: 2;

  width: min(1240px, 100%);

  margin: 0 auto;
}



/* ==========================================================
   COLLECTION ATMOSPHERE
   ========================================================== */

.tbr-collection__atmosphere {
  position: absolute;
  z-index: 0;

  inset: 0;

  pointer-events: none;
}


.tbr-collection-star {
  position: absolute;

  color: rgba(200, 121, 133, 0.28);

  font-family: var(--font-display);
  line-height: 1;

  animation:
    tbrCollectionTwinkle
    4.5s
    ease-in-out
    infinite;
}


.tbr-collection-star--01 {
  left: 4%;
  top: 10%;

  font-size: 0.8rem;

  animation-delay: -0.4s;
}


.tbr-collection-star--02 {
  left: 17%;
  top: 37%;

  font-size: 0.52rem;

  animation-delay: -2.1s;
}


.tbr-collection-star--03 {
  right: 8%;
  top: 17%;

  font-size: 0.72rem;

  animation-delay: -1.2s;
}


.tbr-collection-star--04 {
  right: 4%;
  top: 55%;

  font-size: 0.58rem;

  animation-delay: -3.2s;
}


.tbr-collection-star--05 {
  left: 7%;
  bottom: 13%;

  font-size: 0.68rem;

  animation-delay: -1.8s;
}


.tbr-collection-star--06 {
  right: 19%;
  bottom: 8%;

  font-size: 0.48rem;

  animation-delay: -2.7s;
}


@keyframes tbrCollectionTwinkle {

  0%,
  100% {
    opacity: 0.18;

    transform:
      translateY(2px)
      scale(0.82);
  }

  50% {
    opacity: 0.70;

    transform:
      translateY(-3px)
      scale(1.12);
  }

}



/* ==========================================================
   COLLECTION HEADING
   ========================================================== */

.tbr-collection__heading {
  max-width: 620px;

  margin:
    0
    auto
    30px;

  text-align: center;
}


.tbr-collection__eyebrow {
  margin: 0 0 7px;

  color: var(--archive-rose);

  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;

  letter-spacing: 0.20em;
  text-transform: uppercase;
}


.tbr-collection__heading h2 {
  margin: 0;

  color: var(--ink-rose);

  font-family: var(--font-display);
  font-size: clamp(2.8rem, 4.6vw, 4.3rem);
  font-weight: 400;

  line-height: 0.92;

  letter-spacing: -0.035em;
}


.tbr-collection__heading h2 span {
  color: var(--archive-rose);

  font-family: "Allura", cursive;
  font-size: 1.08em;
  font-weight: 400;

  letter-spacing: 0;
}


.tbr-collection__subtitle {
  margin: 9px 0 0;

  color: var(--dusty-ink);

  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;

  line-height: 0;
}



/* ==========================================================
   06. CELESTIAL FILTERS
   Small floating archive controls instead of a form bar.
   ========================================================== */

.tbr-toolbar {
  width: min(1080px, 100%);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(280px, 1.55fr)
    repeat(3, minmax(150px, 0.72fr));

  align-items: center;

  gap: 10px;
}


/* ==========================================================
   SEARCH
   ========================================================== */

.tbr-search {
  position: relative;

  height: 48px;

  display: flex;
  align-items: center;

  border:
    1px solid
    rgba(200, 121, 133, 0.24);

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.58),
      rgba(250, 229, 230, 0.30)
    );

  box-shadow:
    0 8px 22px rgba(94, 61, 69, 0.035),
    inset 0 0 0 1px rgba(255, 255, 255, 0.46);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}


.tbr-search::after {
  content: "";

  position: absolute;

  inset: 4px;

  border:
    1px solid
    rgba(200, 121, 133, 0.07);

  border-radius: 10px;

  pointer-events: none;
}


.tbr-search:hover,
.tbr-search:focus-within {
  transform: translateY(-2px);

  border-color:
    rgba(200, 121, 133, 0.42);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.82),
      rgba(250, 229, 230, 0.40)
    );

  box-shadow:
    0 10px 25px rgba(94, 61, 69, 0.055),
    0 0 18px rgba(246, 214, 217, 0.48);
}


.tbr-search__icon {
  position: absolute;
  z-index: 2;

  left: 17px;
  top: 50%;

  transform: translateY(-50%);

  color: var(--archive-rose);

  font-size: 0.58rem;

  pointer-events: none;
}


.tbr-search input {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;

  padding:
    0
    18px
    0
    39px;

  border: 0;
  outline: 0;

  background: transparent;

  color: var(--ink-rose);

  font-family: var(--font-body);
  font-size: 0.67rem;
}


.tbr-search input::placeholder {
  color:
    rgba(139, 107, 114, 0.60);
}


/* ==========================================================
   GENRE / LENGTH / SORT
   ========================================================== */

.tbr-filter {
  position: relative;

  height: 48px;

  padding:
    6px
    14px
    5px
    16px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border:
    1px solid
    rgba(200, 121, 133, 0.24);

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.58),
      rgba(250, 229, 230, 0.30)
    );

  box-shadow:
    0 8px 22px rgba(94, 61, 69, 0.035),
    inset 0 0 0 1px rgba(255, 255, 255, 0.46);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}


.tbr-filter::before {
  content: "✦";

  position: absolute;

  right: 13px;
  top: 9px;

  color:
    rgba(200, 121, 133, 0.42);

  font-family: var(--font-display);
  font-size: 0.38rem;

  pointer-events: none;
}


.tbr-filter::after {
  content: "";

  position: absolute;

  inset: 4px;

  border:
    1px solid
    rgba(200, 121, 133, 0.07);

  border-radius: 10px;

  pointer-events: none;
}


.tbr-filter:hover,
.tbr-filter:focus-within {
  transform: translateY(-2px);

  border-color:
    rgba(200, 121, 133, 0.42);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.84),
      rgba(250, 229, 230, 0.42)
    );

  box-shadow:
    0 10px 25px rgba(94, 61, 69, 0.055),
    0 0 18px rgba(246, 214, 217, 0.46);
}


/* Tiny archival label */

.tbr-filter > span {
  position: relative;
  z-index: 2;

  display: block;

  margin:
    0
    0
    1px;

  color:
    rgba(200, 121, 133, 0.78);

  font-family: var(--font-body);
  font-size: 0.36rem;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.15em;
  text-transform: uppercase;
}


/* Actual select */

.tbr-filter select {
  position: relative;
  z-index: 2;

  width: 100%;

  padding:
    2px
    23px
    0
    0;

  border: 0;
  outline: 0;

  background: transparent;

  color: var(--ink-rose);

  font-family: var(--font-display);
  font-size: 0.72rem;

  cursor: pointer;
}


/* ==========================================================
   COLLECTION COUNT
   ========================================================== */

.tbr-count-row {
  width: min(760px, 100%);

  margin:
    27px
    auto
    38px;

  display: grid;
  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 16px;
}


.tbr-count-row > span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(200, 121, 133, 0.24)
    );
}


.tbr-count-row > span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(200, 121, 133, 0.24),
      transparent
    );
}


.tbr-count-row p {
  margin: 0;

  color: var(--dusty-ink);

  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;

  letter-spacing: 0.11em;
  text-transform: uppercase;
}


.tbr-count-row strong {
  color: var(--archive-rose);

  font-weight: 600;
}



/* ==========================================================
   07. BOOK GRID
   ========================================================== */

.tbr-grid {
  display: grid;
  margin-top: -20px;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  align-items: start;

  gap:
    42px
    22px;
}



/* ==========================================================
   INDIVIDUAL BOOK
   ========================================================== */

.tbr-book {
  position: relative;

  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: stretch;
}



/* ==========================================================
   COVER FRAME
   ========================================================== */

.tbr-book__cover-wrap {
  position: relative;
  z-index: 2;

  width: calc(100% - 10px);

  aspect-ratio: 2 / 3;

  margin: 0 auto;

  padding: 6px;

  border:
    1px solid
    rgba(200, 121, 133, 0.30);

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.80);

  box-shadow:
    0 17px 25px rgba(94, 61, 69, 0.11),
    0 5px 10px rgba(200, 121, 133, 0.07),
    0 0 0 1px rgba(255, 255, 255, 0.64);

  transition:
    transform 240ms ease,
    box-shadow 240ms ease,
    border-color 240ms ease;
}


/* Subtle rose-gold inner edge */

.tbr-book__cover-wrap::after {
  content: "";

  position: absolute;
  z-index: 3;

  inset: 6px;

  border:
    1px solid
    rgba(255, 255, 255, 0.40);

  border-radius: 6px;

  pointer-events: none;
}


/* Hover sparkle */

.tbr-book__cover-wrap::before {
  content: "✦";

  position: absolute;
  z-index: 8;

  right: -9px;
  top: -12px;

  color: var(--archive-rose);

  font-family: var(--font-display);
  font-size: 0.82rem;

  opacity: 0;

  transform:
    translateY(5px)
    scale(0.55)
    rotate(-10deg);

  text-shadow:
    0 0 8px rgba(255, 255, 255, 1),
    0 0 18px rgba(225, 165, 174, 0.70);

  transition:
    opacity 200ms ease,
    transform 200ms ease;
}


.tbr-book:hover .tbr-book__cover-wrap {
  transform:
    translateY(-8px)
    scale(1.012);

  border-color:
    rgba(200, 121, 133, 0.52);

  box-shadow:
    0 25px 34px rgba(94, 61, 69, 0.15),
    0 10px 18px rgba(200, 121, 133, 0.11),
    0 0 24px rgba(246, 214, 217, 0.62),
    0 0 42px rgba(246, 214, 217, 0.28);
}


.tbr-book:hover .tbr-book__cover-wrap::before {
  opacity: 1;

  transform:
    translateY(0)
    scale(1)
    rotate(5deg);
}



/* ==========================================================
   ACTUAL COVER IMAGE
   ========================================================== */

.tbr-book__cover-wrap img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: 6px;
}



/* ==========================================================
   PLACEHOLDER COVER
   ========================================================== */

.tbr-book__placeholder {
  width: 100%;
  height: 100%;

  padding:
    20px
    13px
    16px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  border-radius: 6px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255, 255, 255, 0.74),
      transparent 22%
    ),
    linear-gradient(
      150deg,
      #fae7e9 0%,
      #f3d2d7 48%,
      #e8b8c0 100%
    );

  color: var(--ink-rose);
}


.tbr-book__placeholder small {
  margin-bottom: auto;

  color:
    rgba(94, 61, 69, 0.48);

  font-family: var(--font-body);
  font-size: 0.35rem;
  font-weight: 600;

  letter-spacing: 0.17em;
}


.tbr-book__placeholder > span {
  margin-bottom: 13px;

  color: rgba(200, 121, 133, 0.82);

  font-size: 0.82rem;
}


.tbr-book__placeholder strong {
  max-width: 96%;

  color: var(--ink-rose);

  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  font-weight: 500;

  line-height: 1.02;
}


.tbr-book__placeholder em {
  margin-top: auto;

  color:
    rgba(94, 61, 69, 0.52);

  font-family: var(--font-display);
  font-size: 0.60rem;
  font-style: italic;
}



/* ==========================================================
   SPECIAL BOOK RIBBONS
   ========================================================== */

.tbr-book__ribbon {
  position: absolute;
  z-index: 10;

  left: -9px;
  top: 16px;

  min-height: 25px;

  padding:
    0
    11px;

  display: inline-flex;
  align-items: center;

  border-radius:
    3px
    999px
    999px
    3px;

  font-family: var(--font-body);
  font-size: 0.39rem;
  font-weight: 700;

  letter-spacing: 0.10em;
  text-transform: uppercase;

  box-shadow:
    0 6px 15px rgba(94, 61, 69, 0.09);
}


.tbr-book__ribbon::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -5px;

  width: 0;
  height: 0;

  border-top:
    5px solid
    rgba(94, 61, 69, 0.18);

  border-left:
    8px solid
    transparent;
}



/* New arrival */

.tbr-book__ribbon--new {
  border:
    1px solid
    rgba(200, 121, 133, 0.28);

  background:
    linear-gradient(
      135deg,
      #d995a1,
      #c87985
    );

  color: #fffafa;
}



/* Ancient soul */

.tbr-book__ribbon--ancient {
  border:
    1px solid
    rgba(200, 121, 133, 0.20);

  background:
    rgba(255, 250, 250, 0.95);

  color: var(--archive-rose);
}



/* ==========================================================
   ARCHIVAL PLAQUE
   Compact museum-style label beneath each book.
   Every plaque stays EXACTLY the same height.
   ========================================================== */

.tbr-book__plaque {
  position: relative;
  z-index: 3;

  width: calc(100% - 8px);
  height: 80px;

  margin:
    13px
    auto
    0;

  padding:
    11px
    10px
    9px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  border:
    1px solid
    rgba(200, 121, 133, 0.25);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.78),
      rgba(250, 229, 230, 0.46)
    );

  box-shadow:
    0 8px 18px rgba(94, 61, 69, 0.045),
    inset 0 0 0 3px rgba(255, 255, 255, 0.38);

  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);

  overflow: hidden;

  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}


/* Fine inner plaque border */

.tbr-book__plaque::before {
  content: "";

  position: absolute;

  inset: 4px;

  border:
    1px solid
    rgba(200, 121, 133, 0.10);

  pointer-events: none;
}


.tbr-book:hover .tbr-book__plaque {
  transform: translateY(-2px);

  border-color:
    rgba(200, 121, 133, 0.40);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.94),
      rgba(250, 229, 230, 0.58)
    );

  box-shadow:
    0 11px 24px rgba(94, 61, 69, 0.07),
    0 0 17px rgba(246, 214, 217, 0.32),
    inset 0 0 0 3px rgba(255, 255, 255, 0.46);
}


/* Tiny ornament */

.tbr-book__plaque-star {
  position: relative;
  z-index: 2;

  flex: 0 0 auto;

  display: block;

  margin-bottom: 2px;

  color:
    rgba(200, 121, 133, 0.62);

  font-family: var(--font-display);
  font-size: 0.40rem;

  line-height: 1;
}


/* ==========================================================
   PLAQUE TITLE

   IMPORTANT:
   Fixed two-line area means long titles NEVER make
   one plaque taller than the others.
   ========================================================== */

.tbr-book__plaque h3 {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 28px;

  margin: 0;

  display: -webkit-box;

  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  color: var(--ink-rose);

  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 500;

  line-height: 14px;
}


/* Author */

.tbr-book__plaque > p {
  position: relative;
  z-index: 2;

  width: 100%;

  margin:
    1px
    0
    0;

  overflow: hidden;

  color: var(--dusty-ink);

  font-family: var(--font-display);
  font-size: 0.57rem;
  font-style: italic;

  line-height: 1.1;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Genre + page count */

.tbr-book__meta {
  position: relative;
  z-index: 2;

  width: 100%;

  margin-top: 5px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  overflow: hidden;

  color:
    rgba(139, 107, 114, 0.76);

  font-family: var(--font-body);
  font-size: 0.35rem;
  font-weight: 600;

  letter-spacing: 0.075em;
  text-transform: uppercase;

  white-space: nowrap;
}


.tbr-book__meta i {
  flex: 0 0 auto;

  color:
    rgba(200, 121, 133, 0.62);

  font-family: var(--font-display);
  font-size: 0.31rem;
  font-style: normal;
}

/* ==========================================================
   LOAD MORE BOOKS
   ========================================================== */

.tbr-load-more {
  position: relative;

  min-width: 190px;
  height: 40px;

  margin: 23px auto 0;
  padding: 0 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  border: 1px solid rgba(200, 121, 133, 0.30);
  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.78),
      rgba(250, 229, 230, 0.48)
    );

  color: var(--ink-rose);

  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;

  letter-spacing: 0.13em;
  text-transform: uppercase;

  box-shadow:
    0 10px 28px rgba(94, 61, 69, 0.06),
    inset 0 0 0 3px rgba(255, 255, 255, 0.38);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  cursor: pointer;

  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease;
}


/* little celestial sparkle */

.tbr-load-more::before {
  content: "✦";

  color: var(--archive-rose);

  font-family: var(--font-display);
  font-size: 0.55rem;

  transition:
    transform 300ms ease,
    text-shadow 300ms ease;
}


/* little downward ornament */

.tbr-load-more::after {
  content: "✦";

  color: var(--archive-rose);

  font-family: var(--font-display);
  font-size: 0.55rem;

  transition:
    transform 300ms ease,
    text-shadow 300ms ease;
}


.tbr-load-more:hover {
  transform: translateY(-4px);

  border-color:
    rgba(200, 121, 133, 0.52);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96),
      rgba(246, 214, 217, 0.62)
    );

  color: var(--archive-rose);

  box-shadow:
    0 14px 34px rgba(94, 61, 69, 0.09),
    0 0 24px rgba(246, 214, 217, 0.68),
    inset 0 0 0 3px rgba(255, 255, 255, 0.48);
}


.tbr-load-more:hover::before {
  transform:
    rotate(90deg)
    scale(1.25);

  text-shadow:
    0 0 9px rgba(200, 121, 133, 0.65);
}


.tbr-load-more:hover::after {
  transform:
    rotate(-90deg)
    scale(1.25);

  text-shadow:
    0 0 9px rgba(200, 121, 133, 0.65);
}

.tbr-load-more:active {
  transform: translateY(-1px) scale(0.98);
}



/* ==========================================================
   10. DIVINE INTERVENTION MODAL
   ========================================================== */

.divine-modal {
  position: fixed;
  z-index: 9999;

  inset: 0;

  display: none;
  place-items: center;

  padding: 30px;

  overflow-y: auto;
}


.divine-modal.is-open {
  display: grid;
}


.divine-modal__backdrop {
  position: fixed;

  inset: 0;

  border: 0;

  background:
    rgba(94, 61, 69, 0.26);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}



/* Dialog */

.divine-modal__dialog {
  position: relative;
  z-index: 2;

  width: min(790px, 100%);

  margin: auto;

  padding:
    44px
    46px
    40px;

  border:
    1px solid
    rgba(200, 121, 133, 0.28);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 50% 16%,
      rgba(246, 214, 217, 0.32),
      transparent 30%
    ),
    rgba(255, 250, 250, 0.97);

  box-shadow:
    0 30px 90px rgba(94, 61, 69, 0.20),
    inset 0 0 0 1px rgba(255, 255, 255, 0.74);

  text-align: center;
}



/* Close */

.divine-modal__close {
  position: absolute;

  right: 18px;
  top: 16px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(200, 121, 133, 0.20);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.70);

  color: var(--archive-rose);

  font-family: var(--font-display);
  font-size: 1.2rem;

  line-height: 1;
}



/* Heading */

.divine-modal__heading > p:first-child {
  margin: 0 0 8px;

  color: var(--archive-rose);

  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}


.divine-modal__heading h2 {
  margin: 0;

  color: var(--ink-rose);

  font-family: var(--font-display);
  font-size: clamp(2.7rem, 6vw, 4rem);
  font-weight: 400;

  line-height: 0.92;
}


.divine-modal__heading h2 span {
  color: var(--archive-rose);

  font-family: "Allura", cursive;
  font-size: 1.04em;
}


.divine-modal__heading > p:last-child {
  margin: 10px 0 0;

  color: var(--dusty-ink);

  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
}



/* Fate filters */

.divine-modal__filters {
  width: min(470px, 100%);

  margin:
    24px
    auto
    22px;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 10px;
}


.divine-modal__filters label {
  padding:
    8px
    12px;

  text-align: left;

  border:
    1px solid
    rgba(200, 121, 133, 0.18);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.72);
}


.divine-modal__filters label > span {
  display: block;

  margin-bottom: 2px;

  color: var(--dusty-ink);

  font-family: var(--font-body);
  font-size: 0.46rem;
  font-weight: 600;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}


.divine-modal__filters select {
  width: 100%;

  border: 0;
  outline: 0;

  background: transparent;

  color: var(--ink-rose);

  font-family: var(--font-body);
  font-size: 0.68rem;
}



/* ==========================================================
   FATE WHEEL
   ========================================================== */

.fate-wheel__stage {
  position: relative;

  width: min(350px, 75vw);
  aspect-ratio: 1;

  margin:
    15px
    auto
    25px;

  display: grid;
  place-items: center;
}


.fate-wheel__orbit {
  position: absolute;

  inset: -15px;

  border:
    1px solid
    rgba(200, 121, 133, 0.16);

  border-radius: 50%;

  transform: rotate(-8deg);
}


.fate-wheel__orbit::before,
.fate-wheel__orbit::after {
  content: "✦";

  position: absolute;

  color: rgba(200, 121, 133, 0.62);

  font-size: 0.58rem;
}


.fate-wheel__orbit::before {
  left: 10%;
  top: 6%;
}


.fate-wheel__orbit::after {
  right: 6%;
  bottom: 16%;
}



/* Pointer */

.fate-wheel__pointer {
  position: absolute;
  z-index: 7;

  left: 50%;
  top: -7px;

  transform: translateX(-50%);

  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(200, 121, 133, 0.30);

  border-radius: 50%;

  background: #fffafa;

  color: var(--archive-rose);

  box-shadow:
    0 7px 18px rgba(94, 61, 69, 0.10);
}



/* Wheel */

.fate-wheel {
  position: relative;

  width: 91%;
  aspect-ratio: 1;

  border:
    1px solid
    rgba(200, 121, 133, 0.34);

  border-radius: 50%;

  background:
    conic-gradient(
      from -22.5deg,
      #f8dfe3 0deg 45deg,
      #fff7f8 45deg 90deg,
      #f2cfd5 90deg 135deg,
      #fffafa 135deg 180deg,
      #f8dfe3 180deg 225deg,
      #fff7f8 225deg 270deg,
      #f2cfd5 270deg 315deg,
      #fffafa 315deg 360deg
    );

  box-shadow:
    0 18px 42px rgba(94, 61, 69, 0.10),
    inset 0 0 0 8px rgba(255, 255, 255, 0.46);

  transition:
    transform
    4.4s
    cubic-bezier(0.15, 0.65, 0.12, 1);
}


.fate-wheel::before {
  content: "";

  position: absolute;

  inset: 10%;

  border:
    1px solid
    rgba(200, 121, 133, 0.16);

  border-radius: 50%;
}



/* Wheel labels */

.fate-wheel__label {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 42%;

  color: var(--ink-rose);

  font-family: var(--font-body);
  font-size: 0.45rem;
  font-weight: 600;

  line-height: 1.15;

  letter-spacing: 0.04em;
  text-align: center;

  transform-origin: center;
}


.fate-wheel__label--one {
  transform:
    translate(-50%, -50%)
    translateY(-116px);
}


.fate-wheel__label--two {
  transform:
    translate(-50%, -50%)
    translate(82px, -82px)
    rotate(45deg);
}


.fate-wheel__label--three {
  transform:
    translate(-50%, -50%)
    translateX(116px)
    rotate(90deg);
}


.fate-wheel__label--four {
  transform:
    translate(-50%, -50%)
    translate(82px, 82px)
    rotate(135deg);
}


.fate-wheel__label--five {
  transform:
    translate(-50%, -50%)
    translateY(116px)
    rotate(180deg);
}


.fate-wheel__label--six {
  transform:
    translate(-50%, -50%)
    translate(-82px, 82px)
    rotate(225deg);
}


.fate-wheel__label--seven {
  transform:
    translate(-50%, -50%)
    translateX(-116px)
    rotate(270deg);
}


.fate-wheel__label--eight {
  transform:
    translate(-50%, -50%)
    translate(-82px, -82px)
    rotate(315deg);
}



/* Wheel center */

.fate-wheel__center {
  position: absolute;
  z-index: 4;

  left: 50%;
  top: 50%;

  width: 76px;
  height: 76px;

  transform:
    translate(-50%, -50%);

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(200, 121, 133, 0.30);

  border-radius: 50%;

  background:
    rgba(255, 250, 250, 0.97);

  color: var(--archive-rose);

  font-family: var(--font-display);
  font-size: 1.3rem;

  box-shadow:
    0 7px 18px rgba(94, 61, 69, 0.09);
}



/* ==========================================================
   DIVINE ACTIONS
   ========================================================== */

.divine-modal__consult {
  min-height: 47px;

  padding: 0 27px;

  border:
    1px solid
    rgba(200, 121, 133, 0.40);

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #d996a1,
      #c87985
    );

  color: #fffafa;

  font-family: var(--font-body);
  font-size: 0.59rem;
  font-weight: 600;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  box-shadow:
    0 11px 26px rgba(200, 121, 133, 0.20);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}


.divine-modal__consult:hover {
  transform: translateY(-2px);

  box-shadow:
    0 15px 30px rgba(200, 121, 133, 0.26);
}


.divine-modal__surprise {
  display: block;

  margin:
    11px
    auto
    0;

  padding: 5px;

  border: 0;

  background: transparent;

  color: var(--archive-rose);

  font-family: var(--font-display);
  font-size: 0.86rem;
  font-style: italic;
}



/* ==========================================================
   FATE RESULT
   ========================================================== */

.fate-result {
  width: min(590px, 100%);

  margin:
    30px
    auto
    0;

  padding: 18px;

  display: grid;
  grid-template-columns:
    118px
    minmax(0, 1fr);

  align-items: center;

  gap: 20px;

  border:
    1px solid
    rgba(200, 121, 133, 0.18);

  border-radius: 18px;

  background:
    rgba(255, 255, 255, 0.58);

  text-align: left;
}


.fate-result__cover {
  width: 118px;

  aspect-ratio: 2 / 3;

  padding: 5px;

  border:
    1px solid
    rgba(200, 121, 133, 0.18);

  border-radius: 10px;

  background: #fff;

  box-shadow:
    0 10px 22px rgba(94, 61, 69, 0.08);
}


.fate-result__cover img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: 6px;
}


.fate-result__placeholder {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  border-radius: 6px;

  background:
    linear-gradient(
      145deg,
      #f9e5e8,
      #e7b2ba
    );

  color: #fffafa;

  font-size: 1.3rem;
}


.fate-result__copy > p:first-child {
  margin: 0 0 4px;

  color: var(--archive-rose);

  font-family: var(--font-body);
  font-size: 0.46rem;
  font-weight: 600;

  letter-spacing: 0.13em;
}


.fate-result__copy h3 {
  margin: 0;

  color: var(--ink-rose);

  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 500;

  line-height: 1;
}


.fate-result__author {
  margin: 5px 0 0;

  color: var(--dusty-ink);

  font-family: var(--font-body);
  font-size: 0.62rem;
}


.fate-result__meta {
  margin-top: 10px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;

  color: rgba(139, 107, 114, 0.80);

  font-family: var(--font-body);
  font-size: 0.48rem;
  font-weight: 500;

  letter-spacing: 0.07em;
  text-transform: uppercase;
}


.fate-result__meta i {
  color: var(--archive-rose);

  font-family: var(--font-display);
  font-size: 0.38rem;
  font-style: normal;
}


.fate-result__actions {
  margin-top: 14px;

  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}


.fate-result__actions .tbr-button {
  min-height: 40px;

  padding: 0 16px;

  font-size: 0.48rem;
}



/* Prevent background scroll when modal opens */

body.divine-modal-open {
  overflow: hidden;
}



/* ==========================================================
   11. UTILITY
   ========================================================== */

.visually-hidden {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;

  border: 0 !important;
}



/* ==========================================================
   12. RESPONSIVE — LARGE TABLET
   ========================================================== */

@media (max-width: 1100px) {

  .tbr-intro {
    min-height: 620px;

    padding-top: 135px;
  }


  .tbr-intro__inner {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(440px, 1.1fr);

    gap: 5px;
  }


  .tbr-intro__copy h1 {
    font-size: clamp(4rem, 7vw, 5.7rem);
  }


  .tbr-book-aura {
    width: 580px;
    height: 370px;
  }


  .tbr-book-celestial {
    width: 580px;
    height: 360px;
  }


  .tbr-floating-book {
    width: min(108%, 590px);
  }


  .tbr-grid {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));
  }


  .tbr-toolbar {
    grid-template-columns:
      minmax(230px, 1.4fr)
      repeat(3, minmax(135px, 0.75fr));
  }

}



/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */

@media (max-width: 900px) {

  .tbr-intro {
    min-height: auto;

    padding:
      130px
      24px
      65px;
  }


  .tbr-intro__inner {
    grid-template-columns: 1fr;

    gap: 18px;
  }


  .tbr-intro__copy {
    max-width: 680px;

    margin: 0 auto;

    padding-left: 0;

    text-align: center;
  }


  .tbr-intro__eyebrow {
    margin-bottom: 13px;
  }


  .tbr-intro__copy h1 {
    font-size: clamp(4.3rem, 12vw, 6rem);
  }


  .tbr-intro__copy h1 span {
    margin:
      0
      auto;
  }


  .tbr-intro__description {
    margin:
      18px
      auto
      0;
  }


  .tbr-intro__actions {
    justify-content: center;
  }


  .tbr-intro__art {
    min-height: 430px;
  }


  .tbr-book-aura {
    width: min(720px, 115vw);
    height: 390px;
  }


  .tbr-book-celestial {
    width: min(690px, 105vw);
    height: 390px;
  }


  .tbr-floating-book {
    width: min(660px, 94vw);
  }


  /* Spread hero stars around art on tablet */

  .tbr-intro-star--01 {
    left: 10%;
    top: 52%;
  }


  .tbr-intro-star--02 {
    left: 19%;
    top: 62%;
  }


  .tbr-intro-star--03 {
    left: 27%;
    top: 54%;
  }


  .tbr-intro-star--04 {
    left: 70%;
    top: 52%;
  }


  .tbr-intro-star--05 {
    left: 80%;
    top: 60%;
  }


  .tbr-intro-star--06 {
    left: 91%;
    top: 69%;
  }


  .tbr-intro-star--07 {
    left: 84%;
    top: 79%;
  }


  .tbr-intro-star--08 {
    left: 70%;
    top: 88%;
  }


  .tbr-intro-star--09 {
    left: 58%;
    top: 80%;
  }


  .tbr-intro-star--10 {
    left: 40%;
    top: 90%;
  }


  .tbr-intro-star--11 {
    left: 24%;
    top: 83%;
  }


  .tbr-intro-star--12 {
    left: 7%;
    top: 74%;
  }


  .tbr-intro-star--13 {
    left: 48%;
    top: 59%;
  }


  .tbr-intro-star--14 {
    left: 62%;
    top: 69%;
  }


  .tbr-intro-star--15 {
    left: 93%;
    top: 53%;
  }


  .tbr-intro-star--16 {
    left: 4%;
    top: 88%;
  }


  .tbr-toolbar {
    grid-template-columns:
      1fr
      1fr;
  }


  .tbr-search {
    grid-column: 1 / -1;
  }


  .tbr-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }

}



/* ==========================================================
   RESPONSIVE — SMALL TABLET / LARGE PHONE
   ========================================================== */

@media (max-width: 700px) {

  .tbr-intro {
    padding:
      118px
      18px
      48px;
  }


  .tbr-intro__copy h1 {
    font-size: clamp(3.6rem, 15vw, 5.2rem);

    line-height: 0.82;
  }


  .tbr-intro__copy h1 span::after {
    right: -19px;
  }


  .tbr-intro__description {
    max-width: 430px;

    font-size: 0.80rem;
  }


  .tbr-intro__actions {
    gap: 9px;
  }


  .tbr-button {
    min-height: 45px;

    padding:
      0
      19px;

    font-size: 0.57rem;
  }


  .tbr-intro__art {
    min-height: 350px;
  }


  .tbr-book-aura {
    width: 125vw;
    height: 320px;
  }


  .tbr-book-celestial {
    width: 112vw;
    height: 320px;
  }


  .tbr-floating-book {
    width: min(600px, 105vw);
  }


  .tbr-book-shadow {
    bottom: 13px;

    width: 68%;
    height: 36px;
  }


  .tbr-book-seal {
    bottom: -10px;
  }


  .tbr-divider {
    width: calc(100% - 36px);

    margin-bottom: 25px;
  }


  .tbr-collection {
    padding:
      28px
      18px
      65px;
  }


  .tbr-collection__heading {
    margin-bottom: 28px;
  }


  .tbr-toolbar {
    grid-template-columns: 1fr;

    padding: 10px;
  }


  .tbr-search {
    grid-column: auto;
  }


  .tbr-count-row {
    gap: 12px;

    margin:
      24px
      auto
      29px;
  }


  .tbr-count-row p {
    font-size: 0.51rem;
  }


  .tbr-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap:
      32px
      16px;
  }


  .divine-modal {
    padding: 18px;
  }


  .divine-modal__dialog {
    padding:
      40px
      22px
      30px;
  }


  .fate-result {
    grid-template-columns:
      95px
      minmax(0, 1fr);
  }


  .fate-result__cover {
    width: 95px;
  }

}



/* ==========================================================
   RESPONSIVE — PHONE
   ========================================================== */

@media (max-width: 500px) {

  .tbr-intro__eyebrow {
    font-size: 0.55rem;

    letter-spacing: 0.15em;
  }


  .tbr-intro__copy h1 {
    font-size: clamp(3.15rem, 16vw, 4.35rem);
  }


  .tbr-intro__description {
    font-size: 0.76rem;

    line-height: 1.75;
  }


  .tbr-intro__actions {
    flex-direction: column;

    width: min(310px, 100%);

    margin:
      24px
      auto
      0;
  }


  .tbr-intro__actions .tbr-button {
    width: 100%;
  }


  .tbr-intro__art {
    min-height: 300px;
  }


  .tbr-book-aura {
    width: 145vw;
    height: 270px;
  }


  .tbr-book-celestial {
    width: 125vw;
    height: 275px;
  }


  .tbr-floating-book {
    width: 116vw;
    max-width: 530px;
  }


  .tbr-book-sparkle--03,
  .tbr-book-sparkle--08,
  .tbr-book-dust--03,
  .tbr-book-dust--07 {
    display: none;
  }


  .tbr-collection__heading h2 {
    font-size: 3.1rem;
  }


  .tbr-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      29px
      14px;
  }


  .tbr-book__info h3 {
    font-size: 0.96rem;
  }


  .tbr-book__meta {
    font-size: 0.43rem;
  }

  .divine-modal__filters {
    grid-template-columns: 1fr;
  }


  .fate-wheel__stage {
    width: min(300px, 75vw);
  }


  /* Labels pulled inward on smaller wheel */

  .fate-wheel__label--one {
    transform:
      translate(-50%, -50%)
      translateY(-98px);
  }


  .fate-wheel__label--two {
    transform:
      translate(-50%, -50%)
      translate(69px, -69px)
      rotate(45deg);
  }


  .fate-wheel__label--three {
    transform:
      translate(-50%, -50%)
      translateX(98px)
      rotate(90deg);
  }


  .fate-wheel__label--four {
    transform:
      translate(-50%, -50%)
      translate(69px, 69px)
      rotate(135deg);
  }


  .fate-wheel__label--five {
    transform:
      translate(-50%, -50%)
      translateY(98px)
      rotate(180deg);
  }


  .fate-wheel__label--six {
    transform:
      translate(-50%, -50%)
      translate(-69px, 69px)
      rotate(225deg);
  }


  .fate-wheel__label--seven {
    transform:
      translate(-50%, -50%)
      translateX(-98px)
      rotate(270deg);
  }


  .fate-wheel__label--eight {
    transform:
      translate(-50%, -50%)
      translate(-69px, -69px)
      rotate(315deg);
  }


  .fate-result {
    grid-template-columns: 1fr;

    text-align: center;
  }


  .fate-result__cover {
    width: 115px;

    margin: 0 auto;
  }


  .fate-result__meta,
  .fate-result__actions {
    justify-content: center;
  }

}



/* ==========================================================
   13. REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .tbr-intro-star,
  .tbr-book-sparkle,
  .tbr-book-dust,
  .tbr-book-aura,
  .tbr-floating-book,
  .tbr-book-shadow,
  .tbr-intro__copy h1 span::after {
    animation: none;
  }


  .tbr-button,
  .tbr-book__cover-wrap,
  .tbr-load-more__button,
  .fate-wheel {
    transition: none;
  }

}


/* ✦ END — THE CELESTIAL TBR VAULT ✦ */

/* ==========================================================
   11. DIVINE INTERVENTION — CELESTIAL BOOK ROULETTE
   ========================================================== */
.divine-roulette__dialog{width:min(860px,100%);min-height:650px;overflow:hidden;padding:42px 46px 38px;background:radial-gradient(circle at 50% 30%,rgba(246,214,217,.45),transparent 33%),linear-gradient(180deg,rgba(255,252,252,.99),rgba(255,246,248,.98));}
.divine-roulette__dialog::before{content:"";position:absolute;inset:9px;border:1px solid rgba(200,121,133,.13);border-radius:22px;pointer-events:none;}
.divine-roulette__stars{position:absolute;inset:22px 64px auto;color:rgba(200,121,133,.45);font-family:var(--font-display);letter-spacing:4.6em;white-space:nowrap;pointer-events:none;}
.divine-roulette__stars i{font-style:normal;opacity:.55;}
.divine-roulette__heading{position:relative;z-index:2;}
.divine-roulette__heading h2{font-size:clamp(2.35rem,5vw,3.7rem);}
.divine-roulette__filters{position:relative;z-index:3;margin:22px auto 16px;}
.divine-roulette__oracle{position:relative;width:min(560px,90vw);height:250px;margin:2px auto 12px;display:grid;place-items:center;perspective:900px;}
.divine-roulette__halo{position:absolute;width:310px;height:180px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.98),rgba(246,214,217,.32) 45%,transparent 72%);filter:blur(8px);}
.divine-roulette__orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(200,121,133,.18);border-radius:50%;transform:translate(-50%,-50%) rotate(-7deg);pointer-events:none;}
.divine-roulette__orbit--one{width:490px;height:185px;}
.divine-roulette__orbit--two{width:390px;height:145px;border-style:dashed;transform:translate(-50%,-50%) rotate(8deg);}
.divine-roulette__books{position:relative;width:100%;height:100%;display:grid;place-items:center;}
.divine-roulette__book{position:absolute;width:105px;aspect-ratio:2/3;border:5px solid rgba(255,255,255,.96);border-radius:8px;background:#fff9fa;box-shadow:0 16px 28px rgba(94,61,69,.15);overflow:hidden;opacity:.52;transform-origin:center bottom;transition:transform .2s ease,opacity .2s ease,filter .2s ease;}
.divine-roulette__book img{display:block;width:100%;height:100%;object-fit:cover;}
.divine-roulette__book--1{transform:translateX(-185px) rotate(-13deg) scale(.72);filter:blur(.6px);}
.divine-roulette__book--2{transform:translateX(-125px) rotate(-8deg) scale(.82);}
.divine-roulette__book--3{transform:translateX(-65px) rotate(-4deg) scale(.92);opacity:.78;}
.divine-roulette__book--4{z-index:5;transform:translateX(0) scale(1.08);opacity:1;box-shadow:0 20px 38px rgba(94,61,69,.18),0 0 28px rgba(225,165,174,.28);}
.divine-roulette__book--5{transform:translateX(65px) rotate(4deg) scale(.92);opacity:.78;}
.divine-roulette__book--6{transform:translateX(125px) rotate(8deg) scale(.82);}
.divine-roulette__book--7{transform:translateX(185px) rotate(13deg) scale(.72);filter:blur(.6px);}
.divine-roulette__book-placeholder{width:100%;height:100%;display:grid;place-items:center;padding:8px;color:var(--archive-rose);font:500 .62rem/1.1 var(--font-display);text-align:center;background:linear-gradient(145deg,#fffafa,#f6d6d9);}
.divine-roulette__seal{position:absolute;z-index:9;left:50%;bottom:8px;transform:translateX(-50%);display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(200,121,133,.24);border-radius:50%;background:#fffafa;color:var(--archive-rose);box-shadow:0 6px 18px rgba(94,61,69,.08);}
.divine-roulette__consult{position:relative;z-index:4;margin-top:0;}
.divine-roulette__status{min-height:20px;margin:10px 0 0;color:var(--dusty-ink);font:italic .88rem var(--font-display);}
.divine-roulette__result[hidden]{display:none!important;}
.divine-roulette__result{position:relative;z-index:5;margin-top:18px;animation:divine-reveal .65s ease both;}
.divine-roulette__chosen-cover{overflow:hidden;background:#fff9fa;}
.divine-roulette__chosen-cover img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.divine-roulette.is-spinning .divine-roulette__book{animation:divine-book-pulse .42s ease-in-out infinite alternate;}
.divine-roulette.is-spinning .divine-roulette__book:nth-child(2n){animation-delay:.12s;}
.divine-roulette.is-spinning .divine-roulette__book:nth-child(3n){animation-delay:.2s;}
@keyframes divine-book-pulse{to{filter:brightness(1.08) blur(.15px);margin-top:-6px;}}
@keyframes divine-reveal{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:650px){.divine-roulette__dialog{padding:38px 18px 30px}.divine-roulette__stars{display:none}.divine-roulette__oracle{height:210px;width:100%}.divine-roulette__orbit--one{width:330px;height:150px}.divine-roulette__orbit--two{width:270px;height:120px}.divine-roulette__book{width:82px}.divine-roulette__book--1{transform:translateX(-120px) rotate(-12deg) scale(.7)}.divine-roulette__book--2{transform:translateX(-82px) rotate(-8deg) scale(.8)}.divine-roulette__book--3{transform:translateX(-42px) rotate(-4deg) scale(.9)}.divine-roulette__book--5{transform:translateX(42px) rotate(4deg) scale(.9)}.divine-roulette__book--6{transform:translateX(82px) rotate(8deg) scale(.8)}.divine-roulette__book--7{transform:translateX(120px) rotate(12deg) scale(.7)}}
/* ==========================================================
   14. FINAL TBR POLISH — SEPTEMBER 2026
   Surgical visual pass. Collection background + filters stay intact.
   ========================================================== */

/* Library-style architectural hero atmosphere */
.tbr-intro {
  background-image:
    linear-gradient(
      90deg,
      rgba(255, 250, 250, 0.94) 0%,
      rgba(255, 250, 250, 0.84) 34%,
      rgba(255, 250, 250, 0.56) 61%,
      rgba(255, 250, 250, 0.38) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 250, 250, 0.08) 68%,
      rgba(255, 247, 249, 0.68) 100%
    ),
    url("../assets/images/shelf-arches.jpg");

  background-size:
    100% 100%,
    100% 100%,
    cover;

  background-position:
    center,
    center,
    center 44%;

  background-repeat:
    no-repeat;
}

/* Keep all original hero layout/stardust intact; only soften the art. */
.tbr-floating-book {
  width: min(106%, 665px);
}

.tbr-floating-book img {
  opacity: 0.94;

  filter:
    drop-shadow(0 32px 23px rgba(94, 61, 69, 0.17))
    drop-shadow(0 13px 10px rgba(200, 121, 133, 0.14))
    drop-shadow(0 0 15px rgba(255, 255, 255, 1))
    drop-shadow(0 0 34px rgba(246, 214, 217, 0.60));
}

.tbr-book-aura {
  opacity: 0.84;
}

/* Soft pearl transition into the existing TBR collection field. */
.tbr-intro::after {
  content: "";

  position: absolute;
  z-index: 4;

  left: -5%;
  right: -5%;
  bottom: -48px;

  height: 112px;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 244, 247, 0.90) 24%,
      rgba(246, 214, 217, 0.46) 50%,
      rgba(246, 214, 217, 0.10) 70%,
      transparent 82%
    );

  filter: blur(10px);

  opacity: 0.96;
}

.tbr-divider {
  position: relative;
  z-index: 4;

  margin-top: -26px;
  margin-bottom: -18px;

  text-shadow:
    0 0 9px rgba(255, 255, 255, 1),
    0 0 18px rgba(246, 214, 217, 0.66);
}

/* Pearl fade from hero into TBR collection */
.tbr-collection::after {
  content: "";

  position: absolute;
  z-index: -1;

  left: 0;
  right: 0;
  top: 0;

  height: 150px;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.78),
      rgba(255, 248, 249, 0.28) 42%,
      transparent 100%
    );
}

/* Shared plaque system — this is also what Library inherits. */
.tbr-book__plaque {
  height: 94px;
  min-height: 94px;

  padding:
    9px
    9px
    8px;
}

.tbr-book__plaque h3 {
  height: 30px;

  font-size: 0.92rem;
  line-height: 15px;
}

.tbr-book__plaque > p {
  margin-top: 3px;

  color: rgba(94, 61, 69, 0.78);

  font-size: 0.76rem;
  line-height: 1.08;
}

.tbr-book__meta {
  min-height: 12px;

  margin-top: 5px;

  color: rgba(139, 107, 114, 0.84);

  font-size: 0.52rem;
  line-height: 1;
}

.tbr-book__meta i {
  font-size: 0.36rem;
}

/* Series cards use the same total plaque footprint as standalone books. */
.tbr-series__button {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.tbr-series__plaque {
  height: 94px !important;
  min-height: 94px !important;
  flex: 0 0 94px;

  padding:
    9px
    9px
    8px !important;
}

.tbr-series__plaque h3 {
  height: 30px;

  font-size: 0.92rem;
  line-height: 15px;
}

.tbr-series__plaque > p {
  margin-top: 3px;

  color: rgba(94, 61, 69, 0.78);

  font-size: 0.76rem;
  line-height: 1.08;
}

.tbr-series__view {
  min-height: 12px;

  margin-top: 5px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(139, 107, 114, 0.84);

  font-family: var(--font-body);
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 650;

  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

/* Main-page scrollbar — same dusty rose language as the archive modals. */
html {
  scrollbar-width: auto;
  scrollbar-color:
    rgba(200, 121, 133, 0.38)
    transparent;
}

html::-webkit-scrollbar {
  width: 8px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(200, 121, 133, 0.38);
}

html::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 121, 133, 0.58);
}

@media (max-width: 900px) {
  .tbr-intro {
    background-position:
      center,
      center,
      58% center;
  }
}

@media (max-width: 640px) {
  .tbr-intro {
    background-image:
      linear-gradient(
        180deg,
        rgba(255, 250, 250, 0.90) 0%,
        rgba(255, 250, 250, 0.72) 58%,
        rgba(255, 247, 249, 0.90) 100%
      ),
      url("../assets/images/shelf-arches.jpg");

    background-size:
      100% 100%,
      auto 100%;

    background-position:
      center,
      center top;
  }

  .tbr-book__plaque,
  .tbr-series__plaque {
    height: 92px !important;
    min-height: 92px !important;
  }

  .tbr-book__plaque > p,
  .tbr-series__plaque > p {
    font-size: 0.72rem;
  }

  .tbr-book__meta,
  .tbr-series__view {
    font-size: 0.49rem;
  }
}


/* ==========================================================
   15. LAUNCH FIX — AUTHORITATIVE CARD GEOMETRY

   One geometry for standalone books + series stacks.
   Titles take only the space they need (up to two lines),
   authors follow naturally, and metadata anchors to bottom.
   ========================================================== */

.tbr-book__cover-wrap,
.tbr-series__button > .tbr-book__cover-wrap {
  width: calc(100% - 10px);
  aspect-ratio: 2 / 3;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: auto;
}

.tbr-series__button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* The series artwork fills the SAME inner cover area as a standalone image. */
.tbr-series__covers {
  inset: 6px !important;
}

.tbr-book__plaque,
.tbr-series__plaque {
  box-sizing: border-box;
  width: calc(100% - 8px);
  height: 94px !important;
  min-height: 94px !important;
  margin: 13px auto 0;
  padding: 9px 9px 8px !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* No fake two-line blank space. One-line titles stay one line tall;
   longer titles may use a second line without changing card height. */
.tbr-book__plaque h3,
.tbr-series__plaque h3 {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: 30px;
  margin: 0;

  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  font-size: 0.92rem;
  line-height: 15px;
}

.tbr-book__plaque > p,
.tbr-series__plaque > p {
  width: 100%;
  margin: 4px 0 0 !important;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: rgba(94, 61, 69, 0.78);
  font-size: 0.76rem;
  line-height: 1.08;
}

/* Genre/pages and VIEW SERIES sit on one shared bottom baseline. */
.tbr-book__meta,
.tbr-series__view {
  min-height: 12px;
  margin-top: auto !important;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 0.52rem;
  line-height: 1;
}

.tbr-series__view {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .tbr-book__plaque,
  .tbr-series__plaque {
    height: 92px !important;
    min-height: 92px !important;
  }

  .tbr-book__plaque > p,
  .tbr-series__plaque > p {
    font-size: 0.72rem;
  }

  .tbr-book__meta,
  .tbr-series__view {
    font-size: 0.49rem;
  }
}

/* ==========================================================
   TBR HERO DESCRIPTION — ARCHIVE QUOTE STYLE
   ========================================================== */

.tbr-intro__description {
  position: relative;

  width: min(520px, 100%);

  margin-top: 28px;
  padding-left: 22px;

  color: var(--dusty-ink);

  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;

  line-height: 1.75;
}

/* little archive line */
.tbr-intro__description::before {
  content: "";

  position: absolute;

  left: 0;
  top: 3px;
  bottom: 3px;

  width: 1px;

  background:
    rgba(200, 121, 133, 0.32);
}