/* ==========================================================
   00. THE ANGEL ARCHIVE — GLOBAL FOUNDATION
   ========================================================== */


/* ==========================================================
   DESIGN TOKENS
   ========================================================== */

:root {

  /* ------------------------------
     COLORS
     ------------------------------ */

  --pearl: #fff9fa;
  --cloud-blush: #fae5e6;
  --heaven-pink: #f6d6d9;
  --pearl-rose: #f1ced2;
  --angel-mist: #f8dbe2;

  --cherub-rose: #e1a5ae;
  --archive-rose: #c87985;

  --ink-rose: #5e3d45;
  --dusty-ink: #8b6b72;


  /* ------------------------------
     FONTS
     ------------------------------ */

  --font-display: "Cormorant Garamond", serif;
  --font-body: "DM Sans", sans-serif;


  /* ------------------------------
     LAYOUT
     ------------------------------ */

  --page-width: 1240px;

  --section-space: 112px;


  /* ------------------------------
     BORDER RADIUS
     ------------------------------ */

  --radius-small: 12px;
  --radius-medium: 20px;
  --radius-large: 32px;
  --radius-pill: 999px;


  /* ------------------------------
     SHADOWS
     ------------------------------ */

  --shadow-soft:
    0 18px 50px rgba(200, 121, 133, 0.10);

  --shadow-card:
    0 14px 36px rgba(94, 61, 69, 0.08);

  --shadow-hover:
    0 18px 44px rgba(200, 121, 133, 0.18);


  /* ------------------------------
     TRANSITIONS
     ------------------------------ */

  --transition-fast: 180ms ease;

  --transition:
    240ms ease;

  --transition-slow:
    600ms ease;
}


/* ==========================================================
   RESET
   ========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-height: 100vh;

  background: var(--pearl);
  color: var(--ink-rose);

  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;

  overflow-x: hidden;
}


img,
picture,
svg {
  display: block;
  max-width: 100%;
}


button,
input,
textarea,
select {
  font: inherit;
}


button {
  border: 0;
}


a {
  color: inherit;
  text-decoration: none;
}


ul,
ol {
  margin: 0;
  padding: 0;

  list-style: none;
}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}


h1,
h2,
h3,
h4 {
  color: var(--ink-rose);

  font-family: var(--font-display);
  font-weight: 500;
}


h1 {
  margin-bottom: 24px;

  font-size: clamp(4rem, 8vw, 7.5rem);
  line-height: 0.88;

  letter-spacing: -0.04em;
}


h2 {
  margin-bottom: 20px;

  font-size: clamp(2.8rem, 5vw, 4.8rem);
  line-height: 0.95;

  letter-spacing: -0.03em;
}


h3 {
  margin-bottom: 14px;

  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1;
}


p {
  margin-bottom: 20px;

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


/* ==========================================================
   GLOBAL LAYOUT
   ========================================================== */

.site-container {
  width: min(
    calc(100% - 48px),
    var(--page-width)
  );

  margin-inline: auto;
}


.page-section {
  position: relative;

  padding-block: var(--section-space);
}


.page-section--pearl {
  background: var(--pearl);
}


.page-section--blush {
  background: var(--cloud-blush);
}


.page-section--pink {
  background: var(--heaven-pink);
}


/* ==========================================================
   SECTION HEADINGS
   ========================================================== */

.section-heading {
  margin-bottom: 52px;
}


.section-heading--center {
  text-align: center;
}


.eyebrow {
  margin-bottom: 12px;

  color: var(--archive-rose);

  font-size: 0.72rem;
  font-weight: 600;

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


.section-description {
  max-width: 620px;

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


.section-heading--center .section-description {
  margin-inline: auto;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.button {
  display: inline-flex;

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

  gap: 10px;

  min-height: 48px;

  padding-inline: 26px;

  border-radius: var(--radius-pill);

  cursor: pointer;

  font-size: 0.76rem;
  font-weight: 600;

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

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    background var(--transition),
    color var(--transition),
    border-color var(--transition);
}


.button:hover {
  transform: translateY(-2px);
}


.button:focus-visible {
  outline: 2px solid var(--archive-rose);
  outline-offset: 4px;
}


/* PRIMARY */

.button--primary {
  background: var(--archive-rose);
  color: var(--pearl);

  box-shadow:
    0 10px 24px rgba(200, 121, 133, 0.20);
}


.button--primary:hover {
  background: #b96b77;

  box-shadow:
    0 14px 34px rgba(200, 121, 133, 0.28);
}


/* SECONDARY */

.button--secondary {
  border:
    1px solid rgba(200, 121, 133, 0.35);

  background:
    rgba(255, 249, 250, 0.7);

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


.button--secondary:hover {
  border-color: var(--archive-rose);

  background: var(--pearl);
}


/* TEXT LINK */

.text-link {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: var(--archive-rose);

  font-size: 0.8rem;
  font-weight: 600;

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


.text-link span {
  transition:
    transform var(--transition);
}


.text-link:hover span {
  transform: translateX(4px);
}


/* ==========================================================
   CARDS
   ========================================================== */

.archive-card {
  border:
    1px solid rgba(225, 165, 174, 0.35);

  border-radius: var(--radius-medium);

  background:
    rgba(255, 249, 250, 0.82);

  box-shadow:
    var(--shadow-card);

  backdrop-filter:
    blur(10px);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}


.archive-card:hover {
  transform: translateY(-4px);

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

  box-shadow:
    var(--shadow-hover);
}


/* ==========================================================
   UTILITY CLASSES
   ========================================================== */

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0 0 0 0);

  white-space: nowrap;

  border: 0;
}


.no-scroll {
  overflow: hidden;
}


/* ==========================================================
   RESPONSIVE FOUNDATION
   ========================================================== */

@media (max-width: 900px) {

  :root {
    --section-space: 90px;
  }


  .site-container {
    width:
      min(
        calc(100% - 36px),
        var(--page-width)
      );
  }

}


@media (max-width: 600px) {

  :root {
    --section-space: 72px;
  }


  body {
    font-size: 15px;
  }


  .site-container {
    width:
      min(
        calc(100% - 28px),
        var(--page-width)
      );
  }


  .section-heading {
    margin-bottom: 36px;
  }


  .button {
    min-height: 46px;

    padding-inline: 22px;
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
  }

}

/* ==========================================================
   00A. SPARKLE CURSOR TRAIL
   ========================================================== */

@media (hover: hover) and (pointer: fine) {
  html,
  body,
  a,
  button,
  [role="button"] {
    cursor: none;
  }
}

.custom-cursor {
  position: fixed;
  z-index: 10001;

  width: 10px;
  height: 10px;

  border-radius: 50%;

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

  box-shadow:
    0 0 5px rgba(255, 255, 255, 1),
    0 0 10px rgba(246, 214, 217, 0.95),
    0 0 18px rgba(200, 121, 133, 0.7);

  pointer-events: none;

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

  transition:
    width 180ms ease,
    height 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.custom-cursor.is-hovering {
  width: 18px;
  height: 18px;

  background: rgba(246, 214, 217, 0.45);

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

  box-shadow:
    0 0 7px rgba(255, 255, 255, 1),
    0 0 16px rgba(246, 214, 217, 1),
    0 0 26px rgba(200, 121, 133, 0.65);
}

   .cursor-sparkle {
  position: fixed;
  z-index: 10000;

  left: 0;
  top: 0;

  color: rgba(255, 255, 255, 0.95);

  font-size: 0.8rem;

  pointer-events: none;

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

  text-shadow:
    0 0 5px rgba(255, 255, 255, 1),
    0 0 12px rgba(246, 214, 217, 0.95),
    0 0 20px rgba(225, 165, 174, 0.65);

  animation:
    cursor-sparkle-fade 700ms ease-out forwards;
}


@keyframes cursor-sparkle-fade {

  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(0.4)
      rotate(0deg);
  }

  20% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1)
      rotate(0deg);
  }

  100% {
    opacity: 0;

    transform:
      translate(
        calc(-50% + var(--sparkle-x)),
        calc(-50% + var(--sparkle-y))
      )
      scale(0.2)
      rotate(var(--sparkle-rotation));
  }

}


/* No cursor trail on touch devices */

@media (hover: none), (pointer: coarse) {

  .custom-cursor,
  .cursor-sparkle {
    display: none !important;
  }

}

/* ==========================================================
   01. ENTRANCE SCREEN
   ========================================================== */

.entrance {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  min-height: 100svh;
  overflow: hidden;

  background: var(--cloud-blush);

  isolation: isolate;

  transition:
    opacity 900ms ease,
    visibility 900ms ease;
}


/* ==========================================================
   ENTRANCE BACKGROUND
   ========================================================== */

.entrance__background {
  position: absolute;
  inset: -4%;
  z-index: -4;

  background-image:
    url("assets/images/archive-entrance.png");

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  filter:
    saturate(0.94)
    brightness(1.03);

  transform: scale(1.05);

  animation:
    entrance-drift 22s ease-in-out infinite alternate;
}


/* Soft atmospheric wash */

.entrance__overlay {
  position: absolute;
  inset: 0;
  z-index: -3;

  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(255, 255, 255, 0.66) 0%,
      rgba(255, 249, 250, 0.48) 18%,
      rgba(250, 229, 230, 0.34) 40%,
      rgba(225, 165, 174, 0.22) 68%,
      rgba(159, 89, 97, 0.12) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 250, 251, 0.06) 0%,
      rgba(246, 214, 217, 0.10) 54%,
      rgba(159, 89, 97, 0.22) 100%
    );

  backdrop-filter: blur(0.8px);
}


/* Central heavenly bloom */

.entrance::before {
  content: "";

  position: absolute;
  z-index: -2;

  top: 48%;
  left: 50%;

  width: min(72vw, 880px);
  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(255, 249, 250, 0.48) 19%,
      rgba(246, 214, 217, 0.22) 42%,
      rgba(225, 165, 174, 0.08) 61%,
      transparent 74%
    );

  filter: blur(14px);

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

  pointer-events: none;

  animation:
    entrance-bloom 6.5s ease-in-out infinite;
}


/* Pearl reflection near bottom */

.entrance::after {
  content: "";

  position: absolute;
  z-index: -1;

  left: 50%;
  bottom: -15%;

  width: min(88vw, 1100px);
  height: 42%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.40) 0%,
      rgba(255, 245, 247, 0.22) 31%,
      rgba(246, 214, 217, 0.10) 52%,
      transparent 72%
    );

  filter: blur(18px);

  transform: translateX(-50%);

  pointer-events: none;

  animation:
    entrance-reflection 7s ease-in-out infinite;
}


/* ==========================================================
   ENTRANCE CONTENT
   ========================================================== */

.entrance__content {
  position: relative;
  z-index: 2;

  width: min(90%, 1020px);

  padding:
    clamp(28px, 5vh, 54px)
    20px;

  text-align: center;

  animation:
    entrance-content-breathe 7s ease-in-out infinite;
}


.entrance__eyebrow {
  margin:
    0 0
    13px;

  color: #9f5961;

  font-size: 0.7rem;
  font-weight: 600;

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

  text-shadow:
    0 1px 10px rgba(255, 255, 255, 0.9);
}


/* ==========================================================
   ENTRANCE TITLE
   ========================================================== */

.entrance__title-wrap {
  position: relative;

  width: fit-content;
  max-width: 100%;

  margin-inline: auto;
}


.entrance__title {
  position: relative;
  z-index: 2;

  margin:
    0 0
    28px;

  font-family: var(--font-display);
  text-align: center;

  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;

  text-shadow: none;

  animation: none;
}


.entrance__title-the {
  display: block;

  margin-bottom: 8px;

  color: #b8757e;

  font-family: var(--font-display);
  font-size: clamp(0.92rem, 1.4vw, 1.22rem);
  font-style: italic;
  font-weight: 500;

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

  text-shadow:
    0 0 5px rgba(255, 255, 255, 1),
    0 0 15px rgba(255, 255, 255, 0.82),
    0 0 28px rgba(246, 214, 217, 0.65);

  animation:
    title-the-glow 5s ease-in-out infinite;
}


.entrance__title-main {
  position: relative;

  display: block;

  padding:
    0.04em
    0.12em
    0.12em;

  color: #f6d8dd;

  font-family: "Allura", cursive;
  font-size: clamp(5.8rem, 11vw, 10.25rem);
  font-weight: 500;
  line-height: 0.7;

  letter-spacing: -0.045em;

  text-shadow:
    0 0 4px rgba(255, 255, 255, 1),
    0 0 12px rgba(255, 255, 255, 0.98),
    0 0 26px rgba(255, 249, 250, 0.86),
    0 0 48px rgba(246, 214, 217, 0.68),
    0 0 82px rgba(225, 165, 174, 0.34);

  animation:
    title-glow 5s ease-in-out infinite;
}


/* Fine pearl highlight passing over title */

.entrance__title-main::after {
  content: "";

  position: absolute;
  inset: -10% -4%;

  background:
    linear-gradient(
      110deg,
      transparent 25%,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0.44) 48%,
      rgba(255, 255, 255, 0.12) 53%,
      transparent 64%
    );

  mix-blend-mode: screen;

  opacity: 0;

  pointer-events: none;

  transform: translateX(-55%);

  animation:
    entrance-title-sheen 8s ease-in-out infinite;
}


/* ==========================================================
   TITLE GLOW
   ========================================================== */

@keyframes title-the-glow {

  0%,
  100% {
    color: #b8757e;

    text-shadow:
      0 0 5px rgba(255, 255, 255, 0.95),
      0 0 13px rgba(255, 255, 255, 0.72),
      0 0 25px rgba(246, 214, 217, 0.52);
  }

  50% {
    color: #95515b;

    text-shadow:
      0 0 7px rgba(255, 255, 255, 1),
      0 0 20px rgba(255, 255, 255, 0.96),
      0 0 35px rgba(246, 214, 217, 0.72);
  }

}


@keyframes title-glow {

  0%,
  100% {
    color: #f5d5da;

    text-shadow:
      0 0 5px rgba(255, 255, 255, 0.98),
      0 0 14px rgba(255, 255, 255, 0.84),
      0 0 28px rgba(255, 249, 250, 0.72),
      0 0 48px rgba(246, 214, 217, 0.55),
      0 0 78px rgba(225, 165, 174, 0.25);
  }

  50% {
    color: #a85f69;

    text-shadow:
      0 0 6px rgba(255, 255, 255, 1),
      0 0 19px rgba(255, 255, 255, 1),
      0 0 38px rgba(255, 249, 250, 0.94),
      0 0 66px rgba(246, 214, 217, 0.76),
      0 0 100px rgba(225, 165, 174, 0.40);
  }

}


/* ==========================================================
   ENTRANCE TITLE SPARKLES
   ========================================================== */

.title-sparkle {
  position: absolute;
  z-index: 3;

  color: rgba(255, 255, 255, 0.96);

  pointer-events: none;

  text-shadow:
    0 0 5px #ffffff,
    0 0 13px rgba(255, 255, 255, 0.95),
    0 0 24px rgba(246, 214, 217, 0.92);

  animation:
    title-sparkle 4.6s ease-in-out infinite;
}


.title-sparkle--one {
  top: 4%;
  left: -5%;

  font-size: 1.35rem;
}


.title-sparkle--two {
  top: 34%;
  right: -5%;

  font-size: 0.92rem;

  animation-delay: -1.4s;
}


.title-sparkle--three {
  bottom: 7%;
  left: 8%;

  font-size: 1.45rem;

  animation-delay: -2.7s;
}


.title-sparkle--four {
  right: 8%;
  bottom: -2%;

  font-size: 0.82rem;

  animation-delay: -3.6s;
}


@keyframes title-sparkle {

  0%,
  100% {
    opacity: 0.18;

    transform:
      scale(0.72)
      rotate(0deg);
  }

  42% {
    opacity: 0.3;

    transform:
      scale(0.84)
      rotate(7deg);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.24)
      rotate(18deg);
  }

  59% {
    opacity: 0.32;

    transform:
      scale(0.8)
      rotate(28deg);
  }

}


/* ==========================================================
   TAGLINE + CTA
   ========================================================== */

.entrance__tagline {
  max-width: 760px;

  margin:
    0 auto
    34px;

  color: #875d63;

  font-family: var(--font-display);
  font-size: clamp(0.92rem, 1.45vw, 1.18rem);
  font-weight: 500;

  letter-spacing: 0.17em;
  line-height: 1.55;

  text-transform: uppercase;

  text-shadow:
    0 1px 10px rgba(255, 255, 255, 0.78);
}


.entrance__button {
  position: relative;

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

  padding:
    13px
    31px;

  overflow: hidden;

  cursor: pointer;

  box-shadow:
    0 8px 28px rgba(159, 89, 97, 0.13),
    0 0 24px rgba(255, 255, 255, 0.40);

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


.entrance__button::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(255, 255, 255, 0.36) 47%,
      transparent 72%
    );

  transform: translateX(-140%);

  transition:
    transform 650ms ease;

  pointer-events: none;
}


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

  border-color: rgba(255, 255, 255, 0.95);

  box-shadow:
    0 12px 34px rgba(159, 89, 97, 0.18),
    0 0 34px rgba(255, 255, 255, 0.60);
}


.entrance__button:hover::after {
  transform: translateX(140%);
}


.entrance__credit {
  margin:
    16px 0
    0;

  color: rgba(117, 75, 81, 0.82);

  font-size: 0.64rem;
  font-weight: 500;

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


/* ==========================================================
   ENTRANCE DECORATION
   ========================================================== */

.entrance__star {
  position: absolute;
  z-index: 1;

  color: rgba(255, 255, 255, 0.88);

  pointer-events: none;

  text-shadow:
    0 0 7px rgba(255, 255, 255, 0.95),
    0 0 18px rgba(246, 214, 217, 0.72);

  animation:
    entrance-twinkle 5.5s ease-in-out infinite;
}


.entrance__star--one {
  top: 17%;
  left: 12%;

  font-size: 1.15rem;
}


.entrance__star--two {
  top: 26%;
  right: 14%;

  font-size: 1.5rem;

  animation-delay: -1.5s;
}


.entrance__star--three {
  right: 22%;
  bottom: 19%;

  font-size: 0.92rem;

  animation-delay: -3.2s;
}


.entrance__star--four {
  bottom: 24%;
  left: 19%;

  font-size: 1.3rem;

  animation-delay: -4.1s;
}

/* ==========================================================
   ENTRANCE GATE ACTIVATION
   ========================================================== */

.entrance__button {
  z-index: 4;
}


/* Button wakes up */

.entrance.is-opening .entrance__button {
  transform: translateY(-2px) scale(1.045);

  border-color: rgba(255, 255, 255, 1);

  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.95),
    0 0 30px rgba(255, 249, 250, 0.90),
    0 0 58px rgba(246, 214, 217, 0.82),
    0 14px 38px rgba(159, 89, 97, 0.18);

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


/* Title becomes intensely luminous */

.entrance.is-opening .entrance__title-main {
  color: #fff8fa;

  text-shadow:
    0 0 6px rgba(255, 255, 255, 1),
    0 0 18px rgba(255, 255, 255, 1),
    0 0 38px rgba(255, 255, 255, 1),
    0 0 72px rgba(255, 249, 250, 0.96),
    0 0 120px rgba(246, 214, 217, 0.90);

  transform: scale(1.025);

  transition:
    color 500ms ease,
    text-shadow 500ms ease,
    transform 650ms cubic-bezier(.2,.8,.2,1);
}


.entrance.is-opening .entrance__title-the {
  color: #fff7f8;

  text-shadow:
    0 0 8px rgba(255, 255, 255, 1),
    0 0 24px rgba(255, 255, 255, 1),
    0 0 45px rgba(246, 214, 217, 0.95);

  transition:
    color 400ms ease,
    text-shadow 400ms ease;
}


/* Sparkles flare as the gate opens */

.entrance.is-opening .title-sparkle {
  animation: entrance-sparkle-flare 650ms ease forwards;
}


.entrance.is-opening .entrance__star {
  animation: entrance-star-flare 700ms ease forwards;
}


/* Pearl light expands outward */

.entrance.is-opening::before {
  animation: entrance-gate-bloom 950ms cubic-bezier(.22,.75,.22,1) forwards;
}


/* Final wash layer */

.entrance__content::after {
  content: "";

  position: fixed;
  inset: -10%;

  z-index: 20;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 250, 251, 0.98) 25%,
      rgba(250, 229, 232, 0.94) 58%,
      rgba(246, 214, 217, 0.90) 100%
    );

  opacity: 0;

  pointer-events: none;

  transform: scale(0.15);

  border-radius: 50%;

  filter: blur(18px);
}


.entrance.is-opening .entrance__content::after {
  animation:
    entrance-pearl-wash 900ms cubic-bezier(.2,.75,.2,1) forwards;
}


/* Let text disappear INTO the light */

.entrance.is-opening .entrance__eyebrow,
.entrance.is-opening .entrance__tagline,
.entrance.is-opening .entrance__credit {
  opacity: 0;

  transform: translateY(-4px);

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


/* ==========================================================
   GATE OPENING ANIMATIONS
   ========================================================== */

@keyframes entrance-sparkle-flare {

  0% {
    opacity: 0.35;
    transform: scale(0.8) rotate(0deg);
  }

  45% {
    opacity: 1;
    transform: scale(1.8) rotate(30deg);
  }

  100% {
    opacity: 0;
    transform: scale(2.5) rotate(55deg);
  }

}


@keyframes entrance-star-flare {

  0% {
    opacity: 0.35;
    transform: scale(0.9);
  }

  45% {
    opacity: 1;
    transform: scale(1.55);
  }

  100% {
    opacity: 0;
    transform: scale(2);
  }

}


@keyframes entrance-gate-bloom {

  0% {
    opacity: 0.78;

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

  45% {
    opacity: 1;

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

  100% {
    opacity: 1;

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

}


@keyframes entrance-pearl-wash {

  0% {
    opacity: 0;

    transform: scale(0.15);
  }

  25% {
    opacity: 0.18;
  }

  65% {
    opacity: 0.92;
  }

  100% {
    opacity: 1;

    transform: scale(2.8);
  }

}


/* ==========================================================
   ENTRANCE EXIT STATE
   ========================================================== */

.entrance.is-leaving {
  opacity: 0;
  visibility: hidden;

  pointer-events: none;
}


/* ==========================================================
   ENTRANCE ANIMATIONS
   ========================================================== */

@keyframes entrance-drift {

  from {
    transform:
      scale(1.05)
      translate3d(-0.35%, -0.25%, 0);
  }

  to {
    transform:
      scale(1.085)
      translate3d(0.35%, 0.25%, 0);
  }

}


@keyframes entrance-bloom {

  0%,
  100% {
    opacity: 0.72;

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

  50% {
    opacity: 1;

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

}


@keyframes entrance-reflection {

  0%,
  100% {
    opacity: 0.52;

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

  50% {
    opacity: 0.82;

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

}


@keyframes entrance-content-breathe {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

}


@keyframes entrance-title-sheen {

  0%,
  70% {
    opacity: 0;
    transform: translateX(-55%);
  }

  76% {
    opacity: 0.28;
  }

  87% {
    opacity: 0.16;
  }

  94%,
  100% {
    opacity: 0;
    transform: translateX(55%);
  }

}


@keyframes entrance-twinkle {

  0%,
  100% {
    opacity: 0.22;

    transform:
      scale(0.82)
      translateY(0);
  }

  50% {
    opacity: 0.92;

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

}


/* ==========================================================
   ENTRANCE RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {

  .entrance__content {
    width: min(91%, 600px);

    padding-inline: 8px;
  }


  .entrance::before {
    width: 120vw;
  }


  .entrance__title {
    margin-bottom: 24px;
  }


  .entrance__title-the {
    margin-bottom: 6px;

    font-size: 0.88rem;
  }


  .entrance__title-main {
    font-size: clamp(4.2rem, 20vw, 6.2rem);
    line-height: 0.74;
  }


  .entrance__tagline {
    max-width: 420px;

    margin-bottom: 30px;

    font-size: 0.78rem;
    line-height: 1.7;

    letter-spacing: 0.11em;
  }


  .title-sparkle--one {
    left: -1%;
  }


  .title-sparkle--two {
    right: -1%;
  }


  .entrance__star--one {
    left: 6%;
  }


  .entrance__star--two {
    right: 7%;
  }

}


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

  .entrance__background,
  .entrance::before,
  .entrance::after,
  .entrance__content,
  .entrance__title-main,
  .entrance__title-the,
  .title-sparkle,
  .entrance__star {
    animation: none;
  }
  .entrance.is-opening .title-sparkle,
.entrance.is-opening .entrance__star,
.entrance.is-opening::before,
.entrance.is-opening .entrance__content::after {
  animation: none;
}

}

/* ==========================================================
   02. NAVIGATION
   ========================================================== */

.archive-nav {
  position: fixed;
  z-index: 9000;

  top: 22px;
  left: 50%;

  width: min(calc(100% - 40px), 1180px);

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

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 600ms ease,
    transform 600ms ease,
    visibility 600ms ease;
}


/* Show nav once archive has been entered */

body.archive-entered .archive-nav {
  opacity: 1;
  visibility: visible;

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


/* Main Pearl Glass Pill */

.archive-nav__inner {
  display: grid;

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

  align-items: center;

  min-height: 64px;

  padding: 8px 18px 8px 26px;

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

  border-radius: 999px;

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

  box-shadow:
    0 10px 35px rgba(94, 61, 69, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);

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


/* Logo */

.archive-nav__logo {
  justify-self: start;

  color: var(--archive-rose);

  font-family: "Allura", cursive;
  font-size: 2rem;
  line-height: 1;

  text-decoration: none;

  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 18px rgba(246, 214, 217, 0.55);
}


/* Desktop Links */

.archive-nav__links {
  display: flex;
  align-items: center;

  gap: clamp(20px, 2.5vw, 36px);
}


.archive-nav__link {
  position: relative;

  padding: 8px 0;

  color: var(--dusty-ink);

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

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

  text-decoration: none;

  transition:
    color 200ms ease,
    text-shadow 200ms ease;
}


/* Tiny underline */

.archive-nav__link::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 2px;

  width: 0;
  height: 1px;

  background: var(--archive-rose);

  transform: translateX(-50%);

  transition: width 220ms ease;
}


.archive-nav__link:hover,
.archive-nav__link.is-active {
  color: var(--archive-rose);

  text-shadow:
    0 0 12px rgba(225, 165, 174, 0.35);
}


.archive-nav__link:hover::after,
.archive-nav__link.is-active::after {
  width: 18px;
}


/* Archivist Heart */

.archive-nav__archivist {
  justify-self: end;

  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

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

  border-radius: 50%;

  background: rgba(255, 249, 250, 0.5);

  color: var(--archive-rose);

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

  text-decoration: none;

  transition:
    background 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}


.archive-nav__archivist:hover {
  background: rgba(246, 214, 217, 0.65);

  box-shadow:
    0 0 18px rgba(225, 165, 174, 0.3);

  transform: scale(1.05);
}


/* Mobile Menu */

.archive-nav__menu {
  display: none;

  justify-self: end;

  width: 44px;
  height: 44px;

  padding: 0;

  border: 0;

  background: transparent;
}


.archive-nav__menu span {
  display: block;

  width: 20px;
  height: 1px;

  margin: 6px auto;

  background: var(--archive-rose);

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


/* Mobile Dropdown */

.archive-nav__mobile {
  display: none;

  margin-top: 10px;
  padding: 20px;

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

  border-radius: 28px;

  background: rgba(255, 249, 250, 0.9);

  box-shadow:
    0 15px 40px rgba(94, 61, 69, 0.12);

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


.archive-nav__mobile a {
  display: block;

  padding: 11px 8px;

  color: var(--dusty-ink);

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

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

  text-align: center;
  text-decoration: none;
}


.archive-nav__mobile.is-open {
  display: block;
}


/* Mobile */

@media (max-width: 850px) {

  .archive-nav {
    top: 14px;

    width: calc(100% - 24px);
  }


  .archive-nav__inner {
    grid-template-columns: 1fr auto;

    min-height: 58px;

    padding:
      7px
      10px
      7px
      20px;
  }


  .archive-nav__logo {
    font-size: 1.8rem;
  }


  .archive-nav__links,
  .archive-nav__archivist {
    display: none;
  }


  .archive-nav__menu {
    display: block;
  }

}


/* ✦ END 02. NAVIGATION ✦ */

/* ==========================================================
   03. HERO / CURRENTLY READING
   ========================================================== */

.archive-hero {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 60vh;

  padding:
    135px
    var(--page-padding, 32px)
    70px;

  overflow: hidden;

  background:
  linear-gradient(
    rgba(255, 237, 240, 0.8),
    rgba(250, 229, 230, 0.80)
  ),
  url("assets/images/shelf-arches.jpg");

background-size: cover;
background-position: center;
background-repeat: no-repeat;
}


/* Very subtle atmosphere */

.archive-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255, 255, 255, 0.85),
      transparent 36%
    );

  opacity: 0.8;
}


.archive-hero__inner {
  position: relative;
  z-index: 1;

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

  align-items: center;

  gap: clamp(60px, 7vw, 110px);

  width: min(100%, 1180px);

  margin: 0 auto;
}


/* ==========================================================
   HERO — LEFT SIDE
   ========================================================== */

.archive-hero__welcome {
  max-width: 570px;
}


.archive-hero__eyebrow {
  margin-bottom: 18px;

  color: var(--archive-rose);

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

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


.archive-hero__heading {
  max-width: 570px;

  margin: 0 0 26px;

  color: var(--ink-rose);

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

  font-size:
    clamp(3.4rem, 5.2vw, 5.35rem);

  font-weight: 400;

  line-height: 0.92;

  letter-spacing: -0.045em;
}


.archive-hero__heading span {
  color: var(--cherub-rose);

  font-style: italic;
  font-weight: 400;
}


.archive-hero__intro {
  max-width: 535px;

  margin-bottom: 30px;

  color: var(--dusty-ink);

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

  line-height: 1.7;
}


/* Hero Actions */

.archive-hero__actions {
  display: flex;
  align-items: center;

  gap: 24px;

  flex-wrap: wrap;
}


.archive-hero__library-button {
  padding: 14px 24px;

  border-radius: 999px;

  background: var(--archive-rose);

  color: var(--pearl);

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

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

  text-decoration: none;

  box-shadow:
    0 8px 24px rgba(200, 121, 133, 0.18);

  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    background 200ms ease;
}


.archive-hero__library-button:hover {
  transform: translateY(-2px);

  background: var(--cherub-rose);

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


.archive-hero__archivist-link {
  position: relative;

  color: var(--archive-rose);

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

  font-style: italic;

  text-decoration: none;
}


.archive-hero__archivist-link::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -4px;

  width: 0;
  height: 1px;

  background: var(--archive-rose);

  transition: width 220ms ease;
}


.archive-hero__archivist-link:hover::after {
  width: 100%;
}


/* ==========================================================
   CURRENT READS — RIGHT SIDE
   ========================================================== */

/* ==========================================================
   CURRENT READS — CELESTIAL DISPLAY
   ========================================================== */

.current-reads {
  position: relative;
  width: 100%;
}


.current-reads__glow {
  position: absolute;

  width: 74%;
  height: 74%;

  top: 13%;
  left: 13%;

  border-radius: 50%;

  background:
    rgba(225, 165, 174, 0.18);

  filter: blur(60px);

  pointer-events: none;
}


.current-reads__card {
  position: relative;

  min-height: 470px;

  padding: 30px 34px 20px;

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

  border-radius: 34px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 249, 250, 0.90),
      rgba(250, 229, 230, 0.64)
    );

  box-shadow:
    0 26px 70px rgba(94, 61, 69, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);

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


.current-reads__eyebrow {
  margin-bottom: 20px;

  color: var(--archive-rose);

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

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


/* ==========================================================
   SLIDES
   ========================================================== */

.current-reads__viewport {
  position: relative;

  min-height: 320px;

  display: flex;
  align-items: center;
}

.current-read,
.current-read.is-active {
  width: 100%;
}

.current-read {
  display: none;

  grid-template-columns:
    minmax(150px, 190px)
    minmax(0, 1fr);

  align-items: center;

  gap: 34px;
}


.current-read.is-active {
  display: grid;

  animation:
    current-read-enter
    500ms
    ease
    both;
}


@keyframes current-read-enter {

  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* ==========================================================
   CELESTIAL BOOK DISPLAY
   ========================================================== */

.current-read__display {
  position: relative;

  display: grid;
  place-items: center;

  min-height: 270px;
}


.current-read__halo {
  position: absolute;

  width: 200px;
  height: 200px;

  border: 1px solid rgba(225, 165, 174, 0.38);
  border-radius: 50%;

  box-shadow:
    0 0 24px rgba(255, 255, 255, 0.95),
    0 0 58px rgba(246, 214, 217, 0.68);

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.45),
      rgba(246, 214, 217, 0.15) 55%,
      transparent 72%
    );

  animation:
    current-read-halo
    5s
    ease-in-out
    infinite;
}


@keyframes current-read-halo {

  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.65;
  }

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

}


/* Sparkles */

.current-read__sparkle {
  position: absolute;

  z-index: 2;

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

  font-size: 0.85rem;

  text-shadow:
    0 0 8px rgba(255, 255, 255, 1),
    0 0 16px rgba(246, 214, 217, 0.8);

  pointer-events: none;
}


.current-read__sparkle--one {
  top: 16%;
  right: 10%;
}


.current-read__sparkle--two {
  left: 5%;
  bottom: 24%;

  font-size: 0.65rem;
}


.current-read__sparkle--three {
  right: 4%;
  bottom: 12%;

  font-size: 0.55rem;
}


/* Cover */

.current-read__cover-wrap {
  position: relative;
  z-index: 3;

  width: 180px;
}


.current-read__cover {
  display: block;

  width: 100%;

  aspect-ratio: 2 / 3;

  object-fit: cover;

  border-radius: 14px;

  box-shadow:
    0 18px 34px rgba(94, 61, 69, 0.24);

  animation:
    current-book-float
    4.8s
    ease-in-out
    infinite;
}


@keyframes current-book-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }

}


/* ==========================================================
   BOOK INFO
   ========================================================== */

.current-read__info {
  text-align: left;
}


.current-read__number {
  margin-bottom: 7px;

  color: var(--cherub-rose);

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

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


.current-read__title {
  margin: 0 0 6px;

  color: var(--ink-rose);

  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.3vw, 2.15rem);

  font-weight: 500;
  line-height: 1.05;
}


.current-read__author {
  margin-bottom: 14px;

  color: var(--dusty-ink);

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


.current-read__status {
  display: inline-block;

  margin-bottom: 20px;

  padding: 6px 11px;

  border-radius: 999px;

  background:
    rgba(225, 165, 174, 0.20);

  color: var(--ink-rose);

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

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


/* ==========================================================
   HALO PROGRESS
   ========================================================== */

.current-read__progress-area {
  display: flex;
  align-items: center;

  gap: 16px;

  margin-bottom: 20px;
}


.current-read__progress-ring {
  --progress: 8%;

  display: grid;
  place-items: center;

  width: 68px;
  height: 68px;

  flex: 0 0 68px;

  border-radius: 50%;

  background:
    conic-gradient(
      var(--archive-rose) var(--progress),
      rgba(225, 165, 174, 0.18) 0
    );

  box-shadow:
    0 0 18px rgba(246, 214, 217, 0.35);

  position: relative;
}


.current-read__progress-ring::after {
  content: "";

  position: absolute;

  width: 54px;
  height: 54px;

  border-radius: 50%;

  background:
    rgba(255, 249, 250, 0.96);

  box-shadow:
    inset 0 0 10px rgba(246, 214, 217, 0.35);
}


.current-read__progress-ring span {
  position: relative;
  z-index: 1;

  color: var(--archive-rose);

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


.current-read__progress-copy p {
  margin: 0 0 4px;

  color: var(--ink-rose);

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


.current-read__progress-copy span {
  color: var(--dusty-ink);

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

  font-style: normal;

  letter-spacing: 0.02em;
}


/* Individual progress values */

.current-read:nth-child(1)
.current-read__progress-ring {
  --progress: 8%;
}


.current-read:nth-child(2)
.current-read__progress-ring {
  --progress: 17%;
}


.current-read:nth-child(3)
.current-read__progress-ring {
  --progress: 0%;
}


/* Thought */

.current-read__thought {
  margin: 0;

  color: var(--archive-rose);

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

  font-style: italic;
  line-height: 1.5;
}


/* ==========================================================
   CAROUSEL CONTROLS
   ========================================================== */

.current-reads__controls {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin-top: 0px;
  padding-top: 12px;

  border-top:
    1px solid
    rgba(200, 121, 133, 0.12);
}


.current-reads__arrow {
  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  padding: 0;

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

  border-radius: 50%;

  background:
    rgba(255, 249, 250, 0.60);

  color: var(--archive-rose);

  font-size: 0.9rem;

  transition:
    background 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
}


.current-reads__arrow:hover {
  background:
    rgba(246, 214, 217, 0.80);

  transform: scale(1.06);

  box-shadow:
    0 0 16px
    rgba(225, 165, 174, 0.25);
}


.current-reads__dots {
  display: flex;
  align-items: center;

  gap: 6px;
}


.current-reads__dot {
  width: 5px;
  height: 5px;

  padding: 0;

  border: 0;
  border-radius: 50%;

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

  transition:
    width 220ms ease,
    background 220ms ease;
}


.current-reads__dot.is-active {
  width: 16px;

  border-radius: 999px;

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


.current-reads__count {
  min-width: 46px;

  margin: 0;

  color: var(--dusty-ink);

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

  letter-spacing: 0.08em;

  text-align: center;
}

/* ==========================================================
   HERO — RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

  .archive-hero {
    min-height: auto;

    padding:
      125px
      24px
      70px;
  }


  .archive-hero__inner {
    grid-template-columns: 1fr;

    gap: 55px;

    max-width: 680px;
  }


  .archive-hero__welcome {
    max-width: 620px;
  }


  .archive-hero__heading {
    max-width: 620px;
  }

}


@media (max-width: 560px) {

  .archive-hero {
    padding:
      110px
      18px
      55px;
  }


  .archive-hero__heading {
    font-size:
      clamp(3rem, 15vw, 4.2rem);
  }


  .archive-hero__intro {
    font-size: 1rem;
  }


  .current-reads__card {
    min-height: 0;

    padding:
      24px
      20px
      18px;
  }


  .current-read,
  .current-read.is-active {
    grid-template-columns: 1fr;

    gap: 22px;
  }


  .current-read__cover {
    width: 135px;

    margin: 0 auto;
  }


  .current-read__info {
    text-align: center;
  }


  .current-read__progress-info {
    justify-content: center;

    flex-wrap: wrap;
  }


  .current-reads__controls {
    justify-content: center;

    margin-top: 18px;
  }

}


/* ✦ END 03. HERO / CURRENTLY READING ✦ */

/* ==========================================================
   04. HEAVENLY NUMBERS
   ========================================================== */

.heavenly-numbers {
  position: relative;

  padding:
    70px
    var(--page-padding, 32px)
    105px;

  overflow: hidden;

  background:
  linear-gradient(
    rgba(255, 255, 255, 0.85),
    rgba(250, 229, 230, 0.80)
  ),
  url("assets/images/shelf-ethereal.jpg");

background-size: cover;
background-position: center;
background-repeat: no-repeat;
}


/* Background glow */

.heavenly-numbers::before {
  content: "";

  position: absolute;

  width: 440px;
  height: 440px;

  right: -140px;
  top: 60px;

  border-radius: 50%;

  background:
    rgba(246, 214, 217, 0.22);

  filter: blur(70px);

  pointer-events: none;
}


.heavenly-numbers__inner {
  position: relative;
  z-index: 1;

  width: min(100%, 1180px);

  margin: 0 auto;
}


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

.heavenly-numbers__heading {
  max-width: 560px;

  margin-bottom: 10px;
}


.heavenly-numbers__eyebrow {
  display: flex;
  align-items: center;

  width: fit-content;

  gap: 12px;

  margin: 0 0 10px;

  color: var(--archive-rose);

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

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


.heavenly-numbers__eyebrow::after {
  content: "";

  width: 48px;
  height: 1px;

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


.heavenly-numbers__heading h2 {
  margin: 0;

  color: var(--ink-rose);

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

  font-size:
    clamp(3rem, 5vw, 4.7rem);

  font-weight: 400;
  line-height: 0.95;

  letter-spacing: -0.04em;
}

.heavenly-numbers__script {
  display: inline-block;

  margin-right: 10px;

  color: var(--archive-rose);

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

  line-height: 0.8;

  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.95),
    0 0 24px rgba(246, 214, 217, 0.45);
}


.heavenly-numbers__intro {
  margin: 14px 0 0;

  color: var(--dusty-ink);

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

  font-style: italic;
}


/* ==========================================================
   CARD GRID
   ========================================================== */

.heavenly-numbers__grid {
  display: grid;

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

  gap: 10px;
}


/* ==========================================================
   CARD BASE
   ========================================================== */

.heavenly-card {
  position: relative;

  min-height: 255px;

  padding:
    24px
    22px
    20px;

  overflow: hidden;

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

  border-radius: 28px;

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

  box-shadow:
    0 18px 46px rgba(94, 61, 69, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

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

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


.heavenly-card:hover {

  border-color:
    rgba(225, 165, 174, 0.45);

  box-shadow:
    0 26px 60px rgba(200, 121, 133, 0.15),
    0 0 28px rgba(246, 214, 217, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}


/* Soft inner glow */

.heavenly-card::before {
  content: "";

  position: absolute;

  width: 150px;
  height: 150px;

  top: -55px;
  right: -45px;

  border-radius: 50%;

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

  filter: blur(28px);

  pointer-events: none;
}


/* ==========================================================
   CARD NUMBER TAG
   ========================================================== */

.heavenly-card__index {
  position: absolute;

  top: 18px;
  left: 22px;

  color: var(--archive-rose);

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

  font-style: italic;

  opacity: 0.78;
}

/* Back-side card number */

.heavenly-card__back .heavenly-card__index {
  top: 20px;
  left: 20px;

  font-size: 1.05rem;

  opacity: 0.58;
}

/* ==========================================================
   CARD CONTENT
   ========================================================== */

.heavenly-card__content {
  position: relative;
  z-index: 2;

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

  min-height: 155px;

  text-align: center;
}


.heavenly-card__number {
  color: var(--ink-rose);

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

  font-size:
    clamp(3.2rem, 4.6vw, 4.8rem);

  font-weight: 400;
  line-height: 1;

  letter-spacing: -0.045em;

  animation:
    heavenly-number-glow
    4.5s
    ease-in-out
    infinite;
}

@keyframes heavenly-number-glow {

  0%,
  100% {
    text-shadow:
      0 0 6px rgba(255, 255, 255, 0.95),
      0 0 14px rgba(246, 214, 217, 0.45),
      0 0 24px rgba(225, 165, 174, 0.12);
  }

  50% {
    text-shadow:
      0 0 8px rgba(255, 255, 255, 1),
      0 0 20px rgba(246, 214, 217, 0.85),
      0 0 36px rgba(225, 165, 174, 0.42),
      0 0 52px rgba(253, 142, 159, 0.637);
  }

}

.heavenly-card__label {
  margin-top: 12px;

  color: var(--archive-rose);

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

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

/* ==========================================================
   LITTLE ORNAMENT
   ========================================================== */

.heavenly-card__ornament {
  display: grid;

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

  align-items: center;

  gap: 8px;

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

  font-size: 0.62rem;
}


.heavenly-card__ornament span {
  height: 1px;

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


/* ==========================================================
   CARD MICRO COPY
   ========================================================== */

.heavenly-card__peek {
  margin:
    10px
    0
    0;

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

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

  font-style: italic;

  text-align: center;
}


/* ==========================================================
   RATING CARD
   ========================================================== */

.heavenly-card--rating {
  box-shadow:
    0 18px 46px rgba(94, 61, 69, 0.08),
    0 0 30px rgba(246, 214, 217, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}


.heavenly-card__rating-number {
  position: relative;

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

  gap: 7px;
}


.heavenly-card__rating-star {
  margin-top: 6px;

  color: var(--cherub-rose);

  font-size: 0.9rem;

  text-shadow:
    0 0 14px rgba(225, 165, 174, 0.6);
}

/* ==========================================================
   GOAL CARD
   ========================================================== */

.heavenly-card__goal-number {
  display: flex;
  align-items: baseline;
  justify-content: center;

  gap: 7px;
}


.heavenly-card__goal-total {
  color: var(--cherub-rose);

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

  font-style: italic;
}

/* Goal progress divider */

.heavenly-card__goal-progress {
  position: relative;
  z-index: 2;

  height: 18px;

  margin:
    0
    8px
    8px;
}


.heavenly-card__goal-line {
  position: absolute;

  top: 50%;
  left: 0;

  width: 100%;
  height: 1px;

  transform: translateY(-50%);

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


.heavenly-card__goal-marker {
  position: absolute;

  top: 50%;
  left: var(--goal-progress);

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

  color: var(--archive-rose);

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

  line-height: 1;

  text-shadow:
    0 0 7px rgba(255, 255, 255, 1),
    0 0 14px rgba(246, 214, 217, 0.85);
}

/* ==========================================================
   FOOTER DETAIL
   ========================================================== */

.heavenly-numbers__footer {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    max-content;

  align-items: center;

  width: 100%;

  margin-top: 32px;

  column-gap: 28px;
}


/* Full decorative divider */

.heavenly-numbers__footer-line {
  display: grid;

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

  align-items: center;

  width: 100%;
  min-width: 0;

  gap: 12px;

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

  font-size: 0.65rem;
}


.heavenly-numbers__footer-line i {
  display: block;

  width: 100%;
  height: 1px;

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


/* Stats link */

.heavenly-numbers__link {
  position: relative;

  justify-self: end;

  color: var(--archive-rose);

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

  text-decoration: none;

  white-space: nowrap;
}


.heavenly-numbers__link::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -5px;

  width: 0;
  height: 1px;

  background:
    var(--archive-rose);

  transition:
    width 220ms ease;
}


.heavenly-numbers__link:hover::after {
  width: 100%;
}

/* ==========================================================
   FLIP CARDS
   ========================================================== */

.heavenly-card {
  cursor: pointer;

  overflow: visible;

  background: transparent;

  border: 0;

  box-shadow: none;

  perspective: 1200px;
}


/* The piece that actually rotates */

.heavenly-card__inner {
  position: relative;

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

  transform-style: preserve-3d;

  transition:
    transform 700ms
    cubic-bezier(0.22, 0.61, 0.36, 1);
}


.heavenly-card.is-flipped
.heavenly-card__inner {
  transform: rotateY(180deg);
}


/* Both sides */

.heavenly-card__face {
  position: absolute;

  inset: 0;

  display: flex;
  flex-direction: column;

  padding:
    24px
    22px
    20px;

  overflow: hidden;

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

  border-radius: 28px;

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

  box-shadow:
    0 18px 46px rgba(94, 61, 69, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

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

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* Back */

.heavenly-card__back {
  justify-content: center;

  transform: rotateY(180deg);

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255, 255, 255, 0.78),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      rgba(250, 229, 230, 0.88),
      rgba(248, 219, 226, 0.70)
    );

  text-align: center;
}


/* Back eyebrow */

.heavenly-card__back-eyebrow {
  margin:
    0
    0
    12px;

  color: var(--archive-rose);

  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;
  padding: 0 28px;

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


/* Back title */

.heavenly-card__back-title {
  margin:
    0
    auto
    22px;

  max-width: 210px;

  color: var(--ink-rose);

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

  line-height: 1.05;
  padding: 0 8px;
}


.heavenly-card__back-title em {
  color: var(--archive-rose);

  font-weight: 400;
}


/* Tiny secondary stats */

.heavenly-card__back-stats {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  width: 100%;

  padding:
    15px
    0;

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

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


.heavenly-card__back-stats div {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.heavenly-card__back-stats div + div {
  border-left:
    1px solid
    rgba(200, 121, 133, 0.14);
}


.heavenly-card__back-stats strong {
  color: var(--ink-rose);

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


.heavenly-card__back-stats span {
  color: var(--dusty-ink);

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

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


/* Flip-back hint */

.heavenly-card__flip-hint {
  margin:
    14px
    0
    0;

  color: var(--archive-rose);

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

  font-style: italic;
}


/* Hover the whole card */

.heavenly-card:hover
.heavenly-card__face {
  border-color:
    rgba(225, 165, 174, 0.45);

  box-shadow:
    0 26px 60px rgba(200, 121, 133, 0.15),
    0 0 28px rgba(246, 214, 217, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}


/* Keyboard accessibility */

.heavenly-card:focus-visible {
  outline:
    2px solid
    rgba(200, 121, 133, 0.55);

  outline-offset: 5px;

  border-radius: 28px;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 950px) {

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

}


@media (max-width: 560px) {

  .heavenly-numbers {
    padding:
      60px
      18px
      85px;
  }


  .heavenly-numbers__grid {
    grid-template-columns:
      1fr;
  }


  .heavenly-card {
    min-height: 260px;
  }

  .heavenly-numbers__footer {
  align-items: flex-start;
  flex-direction: column;

  gap: 14px;
}


.heavenly-numbers__footer-line {
  width: 100%;
}

}

/* ✦ END 04. HEAVENLY NUMBERS ✦ */

/* ==========================================================
   05. FRESH FROM THE SHELVES
   ========================================================== */

.fresh-shelves {
  position: relative;

  padding:
    58px
    var(--page-padding, 32px)
    72px;

  overflow: hidden;

  background:
  linear-gradient(
    rgba(255, 249, 250, 0.68),
    rgba(250, 229, 230, 0.68)
  ),
  url("assets/images/shelf-test.jpg");

background-size: cover;
background-position: center;
background-repeat: no-repeat;
}


/* ==========================================================
   CLOUD ATMOSPHERE
   ========================================================== */

.fresh-shelves::before,
.fresh-shelves::after {
  content: "";

  position: absolute;

  pointer-events: none;

  border-radius: 50%;

  filter: blur(42px);

  opacity: 0.78;
}


.fresh-shelves::before {
  width: 420px;
  height: 190px;

  left: -110px;
  bottom: 12px;

  background:
    radial-gradient(
      circle at 35% 50%,
      rgba(255, 255, 255, 0.95),
      rgba(255, 249, 250, 0.68) 48%,
      transparent 72%
    );
}


.fresh-shelves::after {
  width: 460px;
  height: 210px;

  right: -120px;
  top: 38px;

  background:
    radial-gradient(
      circle at 55% 50%,
      rgba(255, 255, 255, 0.92),
      rgba(255, 249, 250, 0.64) 50%,
      transparent 74%
    );
}

.fresh-shelves__inner::before {
  content: "";

  position: absolute;

  z-index: -1;

  left: 8%;
  right: 8%;
  bottom: -36px;

  height: 125px;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 12% 60%,
      rgba(255, 255, 255, 0.72),
      transparent 58%
    ),
    radial-gradient(
      ellipse at 36% 70%,
      rgba(255, 255, 255, 0.62),
      transparent 56%
    ),
    radial-gradient(
      ellipse at 64% 65%,
      rgba(255, 255, 255, 0.66),
      transparent 56%
    ),
    radial-gradient(
      ellipse at 88% 58%,
      rgba(255, 255, 255, 0.70),
      transparent 58%
    );

  filter: blur(28px);

  opacity: 0.75;
}


.fresh-shelves__inner {
  position: relative;
  z-index: 1;

  width: min(100%, 1180px);

  margin: 0 auto;
}


/* ==========================================================
   HEADER
   ========================================================== */

.fresh-shelves__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 28px;

  margin-bottom: 26px;
}


.fresh-shelves__heading {
  max-width: 680px;
}


.fresh-shelves__eyebrow {
  margin: 0 0 8px;

  color: var(--archive-rose);

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

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


.fresh-shelves__heading h2 {
  margin: 0;

  color: var(--ink-rose);

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

  font-size:
    clamp(2.7rem, 4vw, 4rem);

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: -0.035em;
}


.fresh-shelves__heading h2 span {
  color: var(--archive-rose);

  font-style: italic;
}


.fresh-shelves__view-all {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  flex-shrink: 0;

  padding: 10px 15px;

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

  border-radius: 999px;

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

  color: var(--archive-rose);

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

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

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


.fresh-shelves__view-all:hover {
  transform: translateY(-2px);

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

  box-shadow:
    0 10px 24px
    rgba(200, 121, 133, 0.12);
}


/* ==========================================================
   SHELF WRAPPER
   ========================================================== */

.fresh-shelves__shelf-wrap {
  position: relative;
}


/* ==========================================================
   SCROLLABLE BOOK ROW
   ========================================================== */

.fresh-shelves__shelf {
  display: grid;

  grid-auto-flow: column;

  grid-auto-columns:
    minmax(135px, 150px);

  gap: 24px;

  overflow-x: auto;
  overflow-y: visible;

  padding:
    10px
    52px
    18px;

  scroll-behavior: smooth;

  scrollbar-width: none;

  scroll-snap-type: x proximity;
}


.fresh-shelves__shelf::-webkit-scrollbar {
  display: none;
}


/* ==========================================================
   BOOK CARD
   ========================================================== */

.shelf-book {
  min-width: 0;

  scroll-snap-align: start;

  text-align: center;
}


.shelf-book__cover-link {
  display: block;

  margin-bottom: 14px;
}


.shelf-book__cover {
  display: block;

  width: 100%;

  aspect-ratio: 2 / 3;

  object-fit: cover;

  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(250, 229, 230, 0.88),
      rgba(241, 206, 210, 0.75)
    );

  box-shadow:
    0 14px 26px
    rgba(94, 61, 69, 0.16);

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


.shelf-book:hover .shelf-book__cover {
  transform:
    translateY(-6px)
    scale(1.015);

  box-shadow:
    0 20px 34px
    rgba(94, 61, 69, 0.22);
}


.shelf-book__title {
  margin:
    0
    0
    6px;

  color: var(--ink-rose);

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

  font-size: 0.98rem;
  font-weight: 500;

  line-height: 1.1;

  letter-spacing: -0.01em;
}


.shelf-book__stars {
  margin-bottom: 7px;

  color: var(--archive-rose);

  font-size: 0.72rem;

  letter-spacing: 0.05em;

  text-shadow:
    0 0 8px
    rgba(246, 214, 217, 0.75);
}


.shelf-book__verdict {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 20px;

  padding:
    4px
    9px;

  border-radius: 999px;

  background:
    rgba(255, 249, 250, 0.78);

  color: var(--archive-rose);

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

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


.shelf-book__verdict--ascended {
  background:
    rgba(225, 165, 174, 0.22);

  color: var(--ink-rose);

  box-shadow:
    0 0 16px
    rgba(246, 214, 217, 0.45);
}


/* ==========================================================
   SCROLL ARROWS
   ========================================================== */

.fresh-shelves__arrow {
  position: absolute;
  z-index: 4;

  top: 28%;

  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  padding: 0;

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

  border-radius: 50%;

  background:
    rgba(255, 249, 250, 0.92);

  color: var(--archive-rose);

  font-size: 0.9rem;

  box-shadow:
    0 8px 20px
    rgba(94, 61, 69, 0.10);

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


.fresh-shelves__arrow:hover {
  transform: scale(1.06);

  background:
    var(--pearl);

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

.fresh-shelves__arrow:disabled {
  opacity: 0.32;

  cursor: default;

  pointer-events: none;

  box-shadow: none;
}


.fresh-shelves__arrow--previous {
  left: 0px;
}


.fresh-shelves__arrow--next {
  right: 0px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 850px) {

  .fresh-shelves__header {
    align-items: flex-start;

    flex-direction: column;

    gap: 18px;
  }


  .fresh-shelves__view-all {
    align-self: flex-start;
  }


  .fresh-shelves__shelf {
    grid-auto-columns:
      minmax(115px, 135px);
  }

}


@media (max-width: 560px) {

  .fresh-shelves {
    padding:
      64px
      18px
      76px;
  }


  .fresh-shelves__heading h2 {
    font-size:
      clamp(2.25rem, 3vw, 3.25rem);
  }


  .fresh-shelves__shelf {
    grid-auto-columns:
      minmax(105px, 125px);

    gap: 16px;

    padding-inline: 38px;
  }


  .fresh-shelves__arrow {
    width: 32px;
    height: 32px;
  }

}

/* ✦ END 05. FRESH FROM THE SHELVES ✦ */

/* ==========================================================
   06. MONTHLY HEAVEN + DIVINE RECOMMENDATIONS
   ========================================================== */

.heavenly-editorial {
  position: relative;

  padding:
    74px
    var(--page-padding, 32px)
    82px;

  overflow: hidden;

  background:
  linear-gradient(
    rgba(255, 249, 250, 0.80),
    rgba(250, 229, 230, 0.80)
  ),
  url("assets/images/shelf-one.jpg");

background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.heavenly-editorial__inner {
  width: min(100%, 1240px);
  margin: 0 auto;

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

  gap: 46px;
  align-items: stretch;
}



/* ==========================================================
   06A. THIS MONTH IN HEAVEN
   ========================================================== */

.monthly-heaven__heading {
  margin-bottom: 14px;
}


.monthly-heaven__eyebrow,
.divine-recs__eyebrow {
  margin:
    0
    0
    6px;

  color: var(--archive-rose);

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

  font-size: 0.72rem;
  font-weight: 600;

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


.monthly-heaven__eyebrow::before,
.divine-recs__eyebrow::before {
  content: "✧";

  margin-right: 7px;

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


.monthly-heaven__heading h2,
.divine-recs__heading h2 {
  margin: 0;

  color: var(--ink-rose);

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

  font-size: clamp(
    2.25rem,
    3.5vw,
    3.65rem
  );

  font-weight: 400;
  line-height: 0.95;

  letter-spacing: -0.035em;
}


.monthly-heaven__content {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(120px, 0.5fr);

  gap: 20px;

  align-items: start;
}


/* Moodboard */

.monthly-heaven__moodboard {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 6px;
}


.monthly-heaven__moodboard img {
  display: block;

  width: 100%;
  height: 155px;

  object-fit: cover;

  border-radius: 11px;

  box-shadow:
    0 12px 24px
    rgba(94, 61, 69, 0.12);

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


.monthly-heaven__moodboard img:hover {
  transform:
    translateY(-3px)
    rotate(-0.6deg);

  box-shadow:
    0 17px 30px
    rgba(94, 61, 69, 0.17);
}



/* Monthly Stats */

.monthly-heaven__stats {
  display: flex;
  flex-direction: column;

  gap: 19px;

  padding-top: 4px;
}


.monthly-stat {
  display: flex;
  flex-direction: column;
}


.monthly-stat strong {
  color: var(--ink-rose);

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

  font-size: 1.9rem;
  font-weight: 400;

  line-height: 0.9;
}


.monthly-stat span {
  margin-top: 3px;

  color: var(--dusty-ink);

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

  font-size: 0.92rem;
}


.monthly-heaven__button {
  width: max-content;

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

  gap: 13px;

  margin-top: 3px;

  padding:
    9px
    16px;

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

  border-radius: 999px;

  background:
    rgba(255, 249, 250, 0.54);

  color: var(--archive-rose);

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

  font-size: 0.64rem;
  font-weight: 600;

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

  white-space: nowrap;

  text-decoration: none;

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


.monthly-heaven__button:hover {
  transform: translateY(-2px);

  background:
    rgba(255, 249, 250, 0.92);

  box-shadow:
    0 9px 20px
    rgba(94, 61, 69, 0.1);
}



/* ==========================================================
   CENTER DIVIDER
   ========================================================== */

.heavenly-editorial__divider {
  width: 1px;
  height: 100%;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(200, 121, 133, 0.22),
      rgba(200, 121, 133, 0.22),
      transparent
    );
}



/* ==========================================================
   06B. DIVINE RECOMMENDATIONS
   ========================================================== */

.divine-recs__heading {
  margin-bottom: 24px;
}


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


.divine-recs__content {
  width: 100%;
}


.divine-recs__collections {
  display: grid;

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

  gap: 20px;
}

/* Recommendation Arches */

.divine-rec-card {
  position: relative;

  min-height: 310px;

  display: block;

  overflow: hidden;

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

  border-radius:
    999px
    999px
    22px
    22px;

  background:
    rgba(255, 249, 250, 0.5);

  box-shadow:
    0 16px 34px
    rgba(94, 61, 69, 0.11);

  text-decoration: none;

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


.divine-rec-card:hover {
  transform:
    translateY(-7px)
    scale(1.01);

  box-shadow:
    0 23px 42px
    rgba(94, 61, 69, 0.17);
}


.divine-rec-card img {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 310px;

  object-fit: cover;

  transition:
    transform 500ms ease,
    filter 300ms ease;
}


.divine-rec-card:hover img {
  transform: scale(1.045);

  filter:
    brightness(1.03)
    saturate(1.05);
}


/* Soft fade behind the text */

.divine-rec-card::after {
  content: "";

  position: absolute;

  inset:
    42%
    0
    0;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(94, 61, 69, 0.1),
      rgba(255, 249, 250, 0.94)
    );

  pointer-events: none;
}


/* Glass title plaque */

.divine-rec-card__label {
  position: absolute;

  z-index: 2;

  left: 13px;
  right: 13px;
  bottom: 13px;

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

  padding:
    15px
    12px
    12px;

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

  border-radius: 17px;

  background:
    rgba(255, 249, 250, 0.76);

  backdrop-filter:
    blur(10px);

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

  text-align: center;
}

.divine-rec-card__label span {
  order: 1;
}

.divine-rec-card__label strong {
  order: 2;
}

.divine-rec-card__label::after {
  order: 3;
}

.divine-rec-card__label small {
  order: 4;
}


.divine-rec-card__label span {
  color: var(--archive-rose);

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

  font-size: 0.58rem;
  font-weight: 600;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.divine-rec-card__label strong {
  margin-top: 3px;

  color: var(--ink-rose);

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

  font-size: 1.05rem;
  font-weight: 400;

  line-height: 1.05;
}


.divine-rec-card__label small {
  margin-top: 6px;

  color: var(--dusty-ink);

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

  font-size: 0.72rem;
  font-style: italic;

  opacity: 0;

  transform:
    translateY(4px);

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

.divine-rec-card__label::after {
  content: "──── ✦ ────";

  display: block;

  margin-top: 10px;

  color: var(--cherub-rose);

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

  font-size: 0.62rem;

  letter-spacing: 0.08em;

  opacity: 0.72;
}

.divine-rec-card:hover
.divine-rec-card__label small {
  opacity: 1;

  transform:
    translateY(0);
}


/* ==========================================================
   RESPONSIVE — SECTION 06
   ========================================================== */

@media (max-width: 1000px) {

  .heavenly-editorial__inner {
    grid-template-columns: 1fr;

    gap: 52px;
  }


  .heavenly-editorial__divider {
    width: 100%;
    height: 1px;

    background:
      linear-gradient(
        to right,
        transparent,
        rgba(200, 121, 133, 0.22),
        transparent
      );
  }

}


@media (max-width: 700px) {

  .heavenly-editorial {
    padding:
      58px
      var(--page-padding, 22px)
      64px;
  }


  .monthly-heaven__content {
    grid-template-columns: 1fr;
  }


  .monthly-heaven__stats {
    display: grid;

    grid-template-columns:
      repeat(2, 1fr);

    gap:
      20px
      14px;
  }


  .monthly-heaven__button {
    grid-column:
      1 / -1;
  }


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


  .divine-recs__collections {
    gap: 10px;
  }


  .divine-recs__quote {
    margin-top: 18px;
  }

}


@media (max-width: 500px) {

  .divine-recs__collections {
    display: flex;

    overflow-x: auto;

    padding-bottom: 10px;

    scroll-snap-type:
      x proximity;

    scrollbar-width: none;
  }


  .divine-recs__collections::-webkit-scrollbar {
    display: none;
  }


  .divine-rec-card {
    flex:
      0
      0
      160px;

    scroll-snap-align: start;
  }

}

/* ✦ END 06. MONTHLY HEAVEN + DIVINE RECOMMENDATIONS ✦ */

/* ==========================================================
   07. GALLERY + MEET THE ARCHIVIST
   ========================================================== */

.archive-closing {
  position: relative;

  padding:
    72px
    var(--page-padding, 32px)
    46px;

  overflow: hidden;

  background:
  linear-gradient(
    rgba(255, 231, 235, 0.8),
    rgba(255, 222, 224, 0.8)
  ),
  url("assets/images/shelf-ethereal.jpg");

background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.archive-closing__inner {
  width: min(100%, 1240px);
  margin: 0 auto;

  display: grid;

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

  gap: 28px;
}



/* ==========================================================
   07A. THE GALLERY
   ========================================================== */

.gallery-preview,
.archivist-preview {
  position: relative;

  padding: 28px;

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

  border-radius: 24px;

  background:
    rgba(255, 249, 250, 0.48);

  backdrop-filter:
    blur(9px);

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

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


.gallery-preview__heading {
  margin-bottom: 22px;
}


.gallery-preview__eyebrow,
.archivist-preview__eyebrow {
  margin:
    0
    0
    6px;

  color: var(--archive-rose);

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

  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}


.gallery-preview__eyebrow::before,
.archivist-preview__eyebrow::before {
  content: "✧";

  margin-right: 7px;

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


.gallery-preview__heading h2 {
  margin: 0;

  color: var(--ink-rose);

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

  font-size:
    clamp(
      2rem,
      2.8vw,
      3rem
    );

  font-weight: 400;

  line-height: 1;

  letter-spacing: -0.03em;
}


.gallery-preview__heading h2 span {
  color: var(--archive-rose);
}



/* Moodboard Frames */

.gallery-preview__frames {
  display: grid;

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

  gap: 14px;

  align-items: center;

  margin-bottom: 18px;
}


.gallery-frame {
  position: relative;

  display: block;

  padding: 5px;

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

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.88),
      rgba(246, 214, 217, 0.52)
    );

  box-shadow:
    0 12px 24px
    rgba(94, 61, 69, 0.12);

  text-decoration: none;

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


.gallery-frame::after {
  content: "";

  position: absolute;

  inset: 4px;

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

  border-radius: 10px;

  pointer-events: none;
}


.gallery-frame img {
  display: block;

  width: 100%;
  height: 150px;

  object-fit: cover;

  border-radius: 9px;
}


.gallery-frame--one {
  transform: rotate(-1.7deg);
}


.gallery-frame--two {
  transform:
    translateY(8px)
    rotate(1deg);
}


.gallery-frame--three {
  transform: rotate(-0.7deg);
}


.gallery-frame:hover {
  z-index: 2;

  transform:
    translateY(-6px)
    scale(1.025);

  box-shadow:
    0 20px 34px
    rgba(94, 61, 69, 0.18);
}



/* Gallery Button */

.gallery-preview__button,
.archivist-preview__button {
  width: max-content;

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

  gap: 13px;

  padding:
    9px
    17px;

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

  border-radius: 999px;

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

  color: var(--archive-rose);

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

  font-size: 0.64rem;
  font-weight: 600;

  letter-spacing: 0.11em;

  text-transform: uppercase;
  text-decoration: none;

  white-space: nowrap;

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

.gallery-preview__button {
  flex: 0 0 auto;
}

.gallery-preview {
  display: flex;
  flex-direction: column;
}


.gallery-preview__button:hover,
.archivist-preview__button:hover {
  transform: translateY(-2px);

  background:
    rgba(255, 249, 250, 0.92);

  box-shadow:
    0 9px 20px
    rgba(94, 61, 69, 0.1);
}



/* ==========================================================
   07B. MEET THE ARCHIVIST
   ========================================================== */

.archivist-preview__eyebrow {
  margin-bottom: 18px;
}


.archivist-preview__content {
  display: grid;

  grid-template-columns:
    minmax(150px, 0.7fr)
    minmax(0, 1.3fr);

  gap: 26px;

  align-items: center;
}



/* Portrait */

.archivist-portrait {
  position: relative;

  width: min(100%, 200px);

  margin: 0 auto;

  padding: 8px;
}

.archivist-portrait::before {
  content: "";

  position: absolute;

  inset: -3px;

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

  border-radius:
    999px
    999px
    30px
    30px;

  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.8),
    0 0 32px rgba(246, 214, 217, 0.36);

  pointer-events: none;
}

.archivist-portrait::after {
  content: "♡";

  position: absolute;

  left: 50%;
  bottom: -13px;

  transform: translateX(-50%);

  display: grid;
  place-items: center;

  width: 25px;
  height: 25px;

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

  border-radius: 50%;

  background:
    rgba(255, 249, 250, 0.94);

  color: var(--archive-rose);

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

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

.archivist-portrait__frame {
  position: relative;

  overflow: hidden;

  padding: 5px;

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

  border-radius:
    999px
    999px
    24px
    24px;

  background:
  linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(241, 206, 210, 0.72),
    rgba(255, 249, 250, 0.92)
  );

  box-shadow:
  0 18px 34px rgba(94, 61, 69, 0.13),
  inset 0 0 0 1px rgba(255, 255, 255, 0.72),
  0 0 24px rgba(246, 214, 217, 0.3);
}


.archivist-portrait__frame img {
  display: block;

  width: 100%;

  aspect-ratio: 0.68 / 1;

  object-fit: cover;

  object-position: center;

  border-radius:
    999px
    999px
    19px
    19px;
}



/* Portrait Sparkles */

.archivist-sparkle {
  position: absolute;

  z-index: 3;

  color: var(--archive-rose);

  pointer-events: none;

  animation:
    archivistTwinkle
    2.8s
    ease-in-out
    infinite;
}


.archivist-sparkle--one {
  top: 8%;
  left: -13%;

  font-size: 1.15rem;
}


.archivist-sparkle--two {
  top: 28%;
  right: -13%;

  font-size: 0.9rem;

  animation-delay: 0.7s;
}


.archivist-sparkle--three {
  bottom: 24%;
  left: -9%;

  font-size: 1rem;

  animation-delay: 1.3s;
}


.archivist-sparkle--four {
  bottom: 5%;
  right: -6%;

  font-size: 0.75rem;

  animation-delay: 1.9s;
}


@keyframes archivistTwinkle {

  0%,
  100% {
    opacity: 0.35;

    transform:
      scale(0.85)
      rotate(0deg);
  }

  50% {
    opacity: 1;

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

}



/* Bio */

.archivist-preview__bio h2 {
  margin:
    0
    0
    12px;

  color: var(--ink-rose);

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

  font-size:
    clamp(
      2rem,
      3vw,
      3rem
    );

  font-weight: 400;

  line-height: 1;
}


.archivist-preview__bio h2 span {
  color: var(--archive-rose);
}


.archivist-preview__bio p {
  max-width: 420px;

  margin:
    0
    0
    20px;

  color: var(--dusty-ink);

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

  font-size: 1rem;

  line-height: 1.62;
}



/* ==========================================================
   07C. DIVINE SIGN-OFF
   ========================================================== */

.archive-blessing {
  width: min(100%, 1240px);

  margin:
    52px
    auto
    0;

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

  text-align: center;
}


.archive-blessing__line {
  width: min(260px, 70%);

  height: 1px;

  margin-bottom: 17px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(200, 121, 133, 0.38),
      transparent
    );
}


.archive-blessing p {
  margin: 0;

  color: var(--dusty-ink);

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

  font-size: 0.62rem;
  font-weight: 500;

  letter-spacing: 0.28em;

  text-transform: uppercase;
}


.archive-blessing__heart {
  margin-top: 7px;

  color: var(--archive-rose);

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

  font-size: 1.05rem;
}



/* ==========================================================
   RESPONSIVE — SECTION 07
   ========================================================== */

@media (max-width: 900px) {

  .archive-closing__inner {
    grid-template-columns: 1fr;

    max-width: 680px;
  }

}


@media (max-width: 600px) {

  .archive-closing {
    padding:
      58px
      var(--page-padding, 22px)
      38px;
  }


  .gallery-preview,
  .archivist-preview {
    padding: 22px;
  }


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


  .gallery-frame--three {
    grid-column:
      1 / -1;

    width: 55%;

    justify-self: center;
  }


  .archivist-preview__content {
    grid-template-columns: 1fr;

    text-align: center;
  }


  .archivist-preview__bio p {
    margin-left: auto;
    margin-right: auto;
  }


  .archivist-preview__button {
  margin:
    0
    auto;
}

}

/* ==========================================================
   SECTION 07 — POLISH
   ========================================================== */

.gallery-preview__footer {
  display: flex;
  align-items: center;

  gap: 18px;

  margin-top: 18px;
}


.gallery-preview__ornament {
  flex: 1;

  display: flex;
  align-items: center;

  gap: 10px;

  margin: 0;

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


.gallery-preview__ornament span {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(200, 121, 133, 0.34),
      transparent
    );
}


.gallery-preview__ornament b {
  font-family: var(--font-display);

  font-size: 0.7rem;
  font-weight: 400;

  letter-spacing: 0.08em;

  opacity: 0.72;
}

.gallery-preview::after,
.archivist-preview::after {
  content: "";

  position: absolute;

  inset: 8px;

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

  border-radius: 18px;

  pointer-events: none;
}

.gallery-preview::before,
.archivist-preview::before {
  content: "✦";

  position: absolute;

  top: 14px;
  right: 18px;

  color: var(--cherub-rose);

  font-size: 0.72rem;

  opacity: 0.58;
}

/* Archivist Footer */

.archivist-preview__footer {
  display: flex;
  align-items: center;

  gap: 18px;

  margin-top: 22px;
}


.archivist-preview__ornament {
  flex: 1;

  display: flex;
  align-items: center;

  gap: 10px;

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


.archivist-preview__ornament span {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(200, 121, 133, 0.34),
      transparent
    );
}


.archivist-preview__ornament b {
  flex: 0 0 auto;

  color: var(--cherub-rose);

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

  font-size: 0.7rem;
  font-weight: 400;

  letter-spacing: 0.08em;

  opacity: 0.72;
}


.archivist-preview__button {
  flex: 0 0 auto;
}

/* ✦ END 07. GALLERY + MEET THE ARCHIVIST ✦ */

/* ==========================================================
   08. FOOTER
   ========================================================== */

.archive-footer {
  position: relative;

  padding:
    18px
    var(--page-padding, 32px)
    16px;

  background:
    linear-gradient(
      rgba(255, 249, 250, 0.85),
      rgba(246, 214, 217, 0.85)
    ),
    url("assets/images/shelf-arches.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.6);
}


.archive-footer__inner {
  width: min(100%, 900px);

  margin: 0 auto;

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

  text-align: center;
}


/* ==========================================================
   BRAND
   ========================================================== */

.archive-footer__brand h2 {
  margin: 0;

  color: var(--archive-rose);

  font-family: "Allura", cursive;

  font-size: 1.8rem;
  font-weight: 400;

  line-height: 0.9;
}


.archive-footer__brand p {
  margin:
    1px
    0
    9px;

  color: var(--dusty-ink);

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

  font-size: 0.68rem;

  line-height: 1;
}


/* ==========================================================
   BOOKISH LINKS
   ========================================================== */

.archive-footer__links {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 11px;

  padding:
    7px
    18px;

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

  border-radius: 999px;

  background:
    rgba(255, 249, 250, 0.48);

  backdrop-filter:
    blur(8px);

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


.archive-footer__links a {
  position: relative;

  color: var(--dusty-ink);

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

  font-size: 0.48rem;
  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  transition:
    color 180ms ease,
    text-shadow 180ms ease;
}


.archive-footer__links a:hover {
  color: var(--archive-rose);

  text-shadow:
    0 0 10px
    rgba(225, 165, 174, 0.3);
}


.archive-footer__links > span {
  color: var(--cherub-rose);

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

  font-size: 0.65rem;

  opacity: 0.75;
}


/* ==========================================================
   CREDIT
   ========================================================== */

.archive-footer__credit {
  margin:
    7px
    0
    0;

  color:
    rgba(145, 103, 112, 0.62);

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

  font-size: 0.52rem;
  font-style: italic;

  line-height: 1;
}


/* ==========================================================
   RESPONSIVE — FOOTER
   ========================================================== */

@media (max-width: 600px) {

  .archive-footer {
    padding:
      18px
      var(--page-padding, 22px);
  }


  .archive-footer__links {
    flex-wrap: wrap;

    gap:
      6px
      10px;
  }

}

/* ✦ END 08. FOOTER ✦ */


/* ==========================================================
   FORCE HIDE DEFAULT CURSOR
   Keeps browser pointer from appearing over clickable items
   ========================================================== */

@media (hover: hover) and (pointer: fine) {
  html,
  body,
  body *,
  a,
  button,
  input,
  select,
  textarea,
  [role="button"] {
    cursor: none !important;
  }
}

/* ==========================================================
   09. HOME GLOW-UP + LIVE RECORDS
   ========================================================== */
:root{--home-rose:#b65f78;--home-deep:#7f3f55;--home-blush:#f8e8ed;--home-pearl:#fffaf8;--home-gold:#c9a66b;--home-ink:#4e3640}
.archive-hero,.heavenly-numbers,.fresh-shelves,.heavenly-editorial,.archive-closing{position:relative;isolation:isolate}
.archive-hero:before,.heavenly-editorial:before,.archive-closing:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.88) 0 2px,transparent 3px),radial-gradient(circle at 84% 22%,rgba(182,95,120,.15) 0 1px,transparent 2px),radial-gradient(circle at 72% 76%,rgba(201,166,107,.18) 0 1px,transparent 2px);background-size:140px 140px,180px 180px,220px 220px}
.current-reads__card,.heavenly-card__face,.monthly-heaven,.divine-recs,.gallery-preview,.archivist-preview{box-shadow:0 24px 70px rgba(91,49,64,.08),inset 0 1px 0 rgba(255,255,255,.8)}
.current-read__file{display:block;margin:0 0 .35rem;font:600 .62rem/1 "DM Sans",sans-serif;letter-spacing:.15em;text-transform:uppercase;color:rgba(127,63,85,.55)}
.current-read__progress-ring{background:radial-gradient(circle,var(--home-pearl) 58%,transparent 60%),conic-gradient(var(--home-rose) var(--read-progress,0deg),rgba(182,95,120,.12) 0);border:1px solid rgba(182,95,120,.18)}
.current-read__cover-wrap:after{content:"";position:absolute;inset:8% -10% -8% 12%;border:1px solid rgba(201,166,107,.28);border-radius:48% 48% 16px 16px;z-index:-1}
.home-cover-fallback{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;text-align:center;padding:1rem;color:var(--home-deep);background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(248,232,237,.96));border:1px solid rgba(201,166,107,.35)}
.home-cover-fallback span{color:var(--home-gold);font-size:1.2rem}.home-cover-fallback strong{font:600 1rem/1.15 "Cormorant Garamond",serif}.home-cover-fallback small{font:600 .5rem/1 "DM Sans",sans-serif;letter-spacing:.14em}
.heavenly-numbers__grid{perspective:1400px}.heavenly-card{transform:translateZ(0);transition:transform .25s ease}.heavenly-card:hover{transform:translateY(-5px)}.heavenly-card__front:after{content:"✦";position:absolute;right:1rem;bottom:.75rem;color:rgba(201,166,107,.32);font-size:.8rem}
.fresh-shelves__shelf-wrap:after{content:"";position:absolute;left:3%;right:3%;bottom:-13px;height:12px;border-radius:50%;background:rgba(91,49,64,.08);filter:blur(7px);pointer-events:none}.shelf-book__cover-link{position:relative;overflow:hidden;border:0;padding:0;background:transparent;cursor:pointer}.shelf-book__open-hint{position:absolute;inset:auto .55rem .55rem;padding:.45rem .55rem;border-radius:999px;background:rgba(255,250,248,.92);color:var(--home-deep);font:600 .56rem/1 "DM Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:.25s ease}.shelf-book__cover-link:hover .shelf-book__open-hint,.shelf-book__cover-link:focus-visible .shelf-book__open-hint{opacity:1;transform:translateY(0)}.shelf-book__author{margin:-.2rem 0 .35rem;color:rgba(78,54,64,.62);font:500 .7rem/1.2 "DM Sans",sans-serif}.shelf-book .home-cover-fallback{width:100%;aspect-ratio:2/3}
.monthly-cover-fallback{display:grid;place-items:center;align-content:center;gap:.5rem;min-height:150px;padding:1rem;text-align:center;background:linear-gradient(145deg,#fffaf8,#f8e8ed);color:var(--home-deep)}.monthly-cover-fallback span{color:var(--home-gold)}
.divine-rec-card img{transition:transform .55s ease,filter .55s ease}.divine-rec-card:hover img{transform:scale(1.045);filter:saturate(1.06)}
.gallery-frame{position:relative;overflow:hidden}.home-relic-fallback{width:100%;height:100%;min-height:260px;display:grid;place-items:center;align-content:center;gap:.6rem;padding:1.4rem;text-align:center;background:radial-gradient(circle at 50% 25%,rgba(255,255,255,.92),transparent 35%),linear-gradient(145deg,#f9edf0,#fffaf8);color:var(--home-deep)}.home-relic-fallback>span{color:var(--home-gold);font-size:1.5rem}.home-relic-fallback small{font:600 .58rem/1 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase}.home-relic-fallback strong{max-width:13rem;font:600 1.55rem/1 "Cormorant Garamond",serif}.home-relic-fallback em{font:italic .9rem/1.2 "Cormorant Garamond",serif}.home-relic-tag{position:absolute;top:.75rem;left:.75rem;z-index:2;padding:.42rem .62rem;border:1px solid rgba(201,166,107,.32);border-radius:999px;background:rgba(255,250,248,.9);color:var(--home-deep);font:600 .54rem/1 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase}
.home-record{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:1.25rem;opacity:0;visibility:hidden;transition:.25s ease}.home-record.is-open{opacity:1;visibility:visible}.home-record__backdrop{position:absolute;inset:0;border:0;background:rgba(58,35,44,.42);backdrop-filter:blur(9px)}.home-record__card{position:relative;z-index:1;width:min(820px,100%);max-height:min(720px,90vh);overflow:auto;display:grid;grid-template-columns:minmax(180px,250px) 1fr;gap:2rem;padding:2rem;border:1px solid rgba(201,166,107,.34);border-radius:28px;background:radial-gradient(circle at 12% 10%,rgba(248,232,237,.92),transparent 28%),#fffaf8;box-shadow:0 34px 100px rgba(58,35,44,.22)}.home-record__close{position:absolute;top:.8rem;right:1rem;width:2.4rem;height:2.4rem;border:0;border-radius:50%;background:rgba(182,95,120,.09);color:var(--home-deep);font-size:1.4rem;cursor:pointer}.home-record__cover{min-height:330px}.home-record__cover-image,.home-record__cover .home-cover-fallback{width:100%;height:100%;min-height:330px;object-fit:cover;border-radius:16px;box-shadow:0 18px 42px rgba(91,49,64,.14)}.home-record__copy{align-self:center}.home-record__eyebrow{margin:0 0 .5rem;color:var(--home-gold);font:600 .62rem/1 "DM Sans",sans-serif;letter-spacing:.15em;text-transform:uppercase}.home-record__copy h2{margin:0;color:var(--home-deep);font:600 clamp(2rem,4vw,3.4rem)/.95 "Cormorant Garamond",serif}.home-record__author{margin:.5rem 0 1.1rem;color:rgba(78,54,64,.68)}.home-record__rating{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;color:var(--home-rose)}.home-record__rating strong{font:600 .66rem/1 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase}.home-record__meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem}.home-record__meta span{padding:.42rem .62rem;border-radius:999px;background:var(--home-blush);color:var(--home-deep);font-size:.68rem}.home-record blockquote{margin:1rem 0;padding-left:1rem;border-left:2px solid rgba(201,166,107,.55);color:var(--home-ink);font:italic 1.05rem/1.45 "Cormorant Garamond",serif}.home-record__review{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;color:rgba(78,54,64,.76);line-height:1.6}.home-record__link{display:inline-flex;margin-top:1rem;color:var(--home-deep);font-weight:600}
@media(max-width:700px){.home-record__card{grid-template-columns:1fr;gap:1.25rem;padding:1.25rem}.home-record__cover{width:min(190px,60%);min-height:270px;margin-inline:auto}.home-record__cover-image,.home-record__cover .home-cover-fallback{min-height:270px}}
@media(prefers-reduced-motion:no-preference){.current-read__sparkle,.title-sparkle{animation:homeTwinkle 3.2s ease-in-out infinite alternate}.current-read__sparkle--two,.title-sparkle--two{animation-delay:.8s}@keyframes homeTwinkle{from{opacity:.35;transform:translateY(0) scale(.9)}to{opacity:.95;transform:translateY(-4px) scale(1.08)}}}
/* ✦ END 09. HOME GLOW-UP + LIVE RECORDS ✦ */


/* HOME REPAIR — keep the original decorative double-halo behind live covers */
.current-read__halo--inner{
  width:156px;
  height:156px;
  border-color:rgba(200,121,133,.30);
  box-shadow:0 0 16px rgba(255,255,255,.9),0 0 34px rgba(246,214,217,.48);
  animation-duration:6.2s;
  animation-direction:reverse;
}
.current-read__cover-wrap{z-index:3}
.current-read__progress-ring{
  background:conic-gradient(
    var(--archive-rose) var(--progress,0%),
    rgba(225,165,174,.18) 0
  );
}


/* HOME FINAL CLEANUP — editorial glass readability */
.heavenly-editorial__grid{
  position:relative;
  border:1px solid rgba(255,255,255,.52);
  border-radius:30px;
  background:linear-gradient(135deg,rgba(255,250,248,.72),rgba(250,231,236,.68));
  box-shadow:0 24px 70px rgba(91,49,64,.06),inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}


/* ==========================================================
   10. HOME COHESION / GRAND HALL PASS
   Built on the CURRENT entrance + live Home.
   ========================================================== */

/* ----------------------------------------------------------
   10A. ONE ARCHIVE, DIFFERENT ROOMS
   Keep each illustration, but give every room the same
   pearl/blush lighting and soften the visual seams.
   ---------------------------------------------------------- */

.archive-hero,
.heavenly-numbers,
.fresh-shelves,
.heavenly-editorial,
.archive-closing {
  box-shadow:
    inset 0 72px 70px -72px rgba(255, 249, 250, .92),
    inset 0 -72px 70px -72px rgba(255, 249, 250, .92);
}

/* Make the oldest/brightest section feel less like a separate wallpaper. */
.fresh-shelves {
  background:
    linear-gradient(
      180deg,
      rgba(255, 244, 246, .76) 0%,
      rgba(255, 249, 250, .58) 44%,
      rgba(250, 229, 230, .72) 100%
    ),
    url("assets/images/shelf-test.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Editorial + closing retain their own rooms but share the same luminous veil. */
.heavenly-editorial {
  background:
    linear-gradient(
      180deg,
      rgba(255, 249, 250, .76) 0%,
      rgba(250, 229, 230, .70) 100%
    ),
    url("assets/images/shelf-one.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.archive-closing {
  background:
    linear-gradient(
      180deg,
      rgba(255, 239, 242, .74) 0%,
      rgba(246, 214, 217, .72) 100%
    ),
    url("assets/images/shelf-arches.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ----------------------------------------------------------
   10B. HOME ARRIVAL
   The gate opens, then the Grand Hall gently settles in.
   ---------------------------------------------------------- */

body.archive-entered .archive-hero__welcome {
  animation: archive-home-arrival 820ms cubic-bezier(.2,.78,.2,1) both;
}

body.archive-entered .current-reads {
  animation: archive-home-arrival 880ms 90ms cubic-bezier(.2,.78,.2,1) both;
}

@keyframes archive-home-arrival {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ----------------------------------------------------------
   10C. SCROLL REVEALS
   Motion is restrained: sections wake up as you enter them.
   ---------------------------------------------------------- */

.archive-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 720ms ease,
    transform 820ms cubic-bezier(.2,.75,.2,1);
}

.archive-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.archive-reveal--delay-1 { transition-delay: 70ms; }
.archive-reveal--delay-2 { transition-delay: 140ms; }

/* ----------------------------------------------------------
   10D. FRESH FROM THE SHELVES
   Books lift because you're pulling them from the shelf.
   ---------------------------------------------------------- */

.fresh-shelves__shelf-wrap {
  position: relative;
  padding-bottom: 19px;
}

.fresh-shelves__shelf-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 4%;
  right: 4%;
  bottom: 14px;
  height: 8px;
  border: 1px solid rgba(200, 121, 133, .20);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(241,206,210,.76)
    );
  box-shadow:
    0 7px 14px rgba(94,61,69,.08),
    0 0 24px rgba(255,255,255,.82),
    inset 0 1px 0 rgba(255,255,255,1);
}

.fresh-shelves__shelf,
.fresh-shelves__arrow {
  position: relative;
  z-index: 2;
}

.shelf-book {
  position: relative;
}

.shelf-book::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: 198px;
  height: 14px;
  border-radius: 50%;
  background: rgba(159, 89, 97, .13);
  filter: blur(8px);
  opacity: .48;
  pointer-events: none;
  transition:
    opacity 260ms ease,
    transform 260ms ease;
}

.shelf-book:hover::after {
  opacity: .78;
  transform: scaleX(.78);
}

.shelf-book__cover-link {
  overflow: hidden;
}

.shelf-book__cover-link::after {
  content: "";
  position: absolute;
  inset: -25% 48% -25% -65%;
  background:
    linear-gradient(
      112deg,
      transparent 31%,
      rgba(255,255,255,.00) 39%,
      rgba(255,255,255,.52) 49%,
      rgba(255,255,255,.10) 56%,
      transparent 67%
    );
  transform: translateX(-90%);
  pointer-events: none;
  transition: transform 650ms ease;
}

.shelf-book__cover-link:hover::after {
  transform: translateX(230%);
}

/* ----------------------------------------------------------
   10E. THIS MONTH — A LITTLE MEMORY ALTAR
   Existing collage stays; it simply feels more curated/alive.
   ---------------------------------------------------------- */

.monthly-heaven__moodboard {
  position: relative;
  isolation: isolate;
}

.monthly-heaven__moodboard::before {
  content: "✦";
  position: absolute;
  z-index: 5;
  top: -7px;
  left: 50%;
  color: var(--archive-rose);
  font-size: .78rem;
  transform: translateX(-50%);
  text-shadow:
    0 0 8px rgba(255,255,255,1),
    0 0 18px rgba(246,214,217,.95);
  animation: archive-memory-star 4.8s ease-in-out infinite;
}

.monthly-heaven__moodboard img {
  transition:
    transform 420ms cubic-bezier(.2,.75,.2,1),
    filter 420ms ease,
    box-shadow 420ms ease;
}

.monthly-heaven__moodboard img:hover {
  transform: translateY(-5px) scale(1.015);
  filter: brightness(1.035);
  box-shadow:
    0 16px 30px rgba(94,61,69,.11),
    0 0 22px rgba(255,255,255,.62);
}

@keyframes archive-memory-star {
  0%, 100% { opacity: .42; transform: translateX(-50%) scale(.88); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.12); }
}

/* ----------------------------------------------------------
   10F. DIVINE RECOMMENDATIONS — ARCHES AS PORTALS
   ---------------------------------------------------------- */

.divine-rec-card {
  isolation: isolate;
}

.divine-rec-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 7px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px 999px 18px 18px;
  opacity: .55;
  pointer-events: none;
  transition:
    opacity 380ms ease,
    border-color 380ms ease,
    box-shadow 380ms ease;
}

.divine-rec-card:hover::before {
  opacity: 1;
  border-color: rgba(255,255,255,.94);
  box-shadow:
    inset 0 0 30px rgba(255,255,255,.30),
    0 0 26px rgba(246,214,217,.62);
}

.divine-rec-card img {
  transition:
    transform 700ms cubic-bezier(.2,.75,.2,1),
    filter 500ms ease;
}

.divine-rec-card:hover img {
  transform: scale(1.045);
  filter: brightness(1.035) saturate(1.02);
}

/* ----------------------------------------------------------
   10G. CURATED RELICS — LIGHT ACROSS PRESERVED GLASS
   ---------------------------------------------------------- */

.gallery-frame {
  isolation: isolate;
  overflow: hidden;
}

.gallery-frame::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: -35% 46% -35% -75%;
  background:
    linear-gradient(
      112deg,
      transparent 31%,
      rgba(255,255,255,.00) 39%,
      rgba(255,255,255,.48) 49%,
      rgba(255,255,255,.08) 56%,
      transparent 67%
    );
  transform: translateX(-95%);
  pointer-events: none;
  transition: transform 760ms ease;
}

.gallery-frame:hover::before {
  transform: translateX(235%);
}

/* ----------------------------------------------------------
   10H. MEET THE ARCHIVIST — QUIETER MAGIC
   ---------------------------------------------------------- */

.archivist-portrait__frame {
  animation: archivist-frame-breathe 5.8s ease-in-out infinite;
}

.archivist-sparkle {
  filter: drop-shadow(0 0 8px rgba(255,255,255,.92));
}

@keyframes archivist-frame-breathe {
  0%, 100% {
    box-shadow:
      0 18px 38px rgba(94,61,69,.08),
      0 0 18px rgba(255,255,255,.52);
  }
  50% {
    box-shadow:
      0 20px 42px rgba(94,61,69,.10),
      0 0 30px rgba(246,214,217,.74);
  }
}

/* ----------------------------------------------------------
   10I. FINAL BLESSING
   ---------------------------------------------------------- */

.archive-blessing__heart {
  display: inline-block;
  animation: archive-blessing-heart 4.6s ease-in-out infinite;
}

@keyframes archive-blessing-heart {
  0%, 82%, 100% {
    transform: scale(1);
    text-shadow: none;
  }
  88% {
    transform: scale(1.16);
    text-shadow: 0 0 16px rgba(225,165,174,.68);
  }
  94% {
    transform: scale(1.04);
  }
}

/* ----------------------------------------------------------
   10J. ACCESSIBILITY
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.archive-entered .archive-hero__welcome,
  body.archive-entered .current-reads,
  .archive-reveal,
  .archive-reveal.is-visible,
  .monthly-heaven__moodboard::before,
  .archivist-portrait__frame,
  .archive-blessing__heart {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ✦ END 10. HOME COHESION / GRAND HALL PASS ✦ */

/* ==========================================================
   FRESH SHELVES — CELESTIAL SHELF RAIL
   ========================================================== */

/* Give the books a little breathing room above the rail */
.fresh-shelves__shelf-wrap {
  padding-bottom: 54px;
}

/* Remove the previous thick shelf */
.fresh-shelves__shelf-wrap::before {
  display: none;
}

/* Both arrows now live on the same bottom rail */
.fresh-shelves__arrow {
  position: absolute;
  top: auto;
  bottom: 9px;
  z-index: 5;

  width: 30px;
  height: 30px;

  border: 1px solid rgba(200, 121, 133, 0.24);
  border-radius: 50%;

  background: rgba(255, 250, 249, 0.92);
  color: var(--archive-rose);

  box-shadow:
    0 4px 12px rgba(94, 61, 69, 0.06),
    0 0 16px rgba(255, 255, 255, 0.78);

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

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

.fresh-shelves__arrow--previous {
  left: 0;
}

.fresh-shelves__arrow--next {
  right: 0;
}

.fresh-shelves__arrow:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(200, 121, 133, 0.48);

  box-shadow:
    0 5px 14px rgba(94, 61, 69, 0.08),
    0 0 20px rgba(246, 214, 217, 0.82);
}


/* Delicate pearl / rose-gold rail */
.fresh-shelves__shelf-wrap::after {
  content: "♡";

  position: absolute;
  left: 43px;
  right: 43px;
  bottom: 23px;

  height: 1px;

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

  color: rgba(200, 121, 133, 0.72);
  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  line-height: 1;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(200, 121, 133, 0.24) 5%,
      rgba(255, 255, 255, 0.92) 24%,
      rgba(200, 121, 133, 0.42) 50%,
      rgba(255, 255, 255, 0.92) 76%,
      rgba(200, 121, 133, 0.24) 95%,
      transparent 100%
    );

  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.92),
    0 0 10px rgba(246, 214, 217, 0.40);

  pointer-events: none;
}

/* Little pearl backing so the heart interrupts the line cleanly */
.fresh-shelves__shelf-wrap::after {
  text-shadow:
    -7px 0 5px rgba(255, 244, 246, 0.95),
     7px 0 5px rgba(255, 244, 246, 0.95),
     0 0 8px rgba(255, 255, 255, 1);
}


/* Mobile keeps the same concept without crowding */
@media (max-width: 700px) {

  .fresh-shelves__shelf-wrap {
    padding-bottom: 50px;
  }

  .fresh-shelves__arrow {
    width: 28px;
    height: 28px;
    bottom: 8px;
  }

  .fresh-shelves__shelf-wrap::after {
    left: 39px;
    right: 39px;
    bottom: 21px;
  }

}

/* ==========================================================
   MONTHLY HEAVEN + DIVINE RECS — GALLERY GLASS
   ========================================================== */

.monthly-heaven,
.divine-recs {
  position: relative;

  padding: 28px 30px 30px;

  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 250, 249, 0.68),
      rgba(250, 229, 230, 0.54)
    );

  box-shadow:
    0 18px 40px rgba(94, 61, 69, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);

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

  overflow: hidden;
}


/* Soft inner pearl border — same visual language as
   Relics + Meet the Archivist */
.monthly-heaven::after,
.divine-recs::after {
  content: "";

  position: absolute;
  inset: 7px;

  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 18px;

  pointer-events: none;
}


/* Tiny celestial corner details */
.monthly-heaven::before,
.divine-recs::before {
  content: "✦";

  position: absolute;
  top: 11px;
  right: 15px;

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

  font-size: 8px;

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

  pointer-events: none;
}


/* Keep all actual content above the glass decoration */
.monthly-heaven > *,
.divine-recs > * {
  position: relative;
  z-index: 2;
}


/* The divider is unnecessary once both exhibits
   have their own glass frame */
.heavenly-editorial__divider {
  opacity: 0;
}


/* Keep them airy on smaller screens */
@media (max-width: 900px) {

  .monthly-heaven,
  .divine-recs {
    padding: 25px 24px 27px;
    border-radius: 22px;
  }

  .monthly-heaven::after,
  .divine-recs::after {
    border-radius: 16px;
  }

}
/* ==========================================================
   11. HOME HERO — CELESTIAL BALCONY + READING WINDOW
   Keeps the live Current Reads DOM/JS intact.
   ========================================================== */

.archive-hero {
  min-height: 720px;
  padding: 142px var(--page-padding, 32px) 86px;
  background:
    linear-gradient(90deg, rgba(255,249,250,.88) 0%, rgba(255,246,248,.72) 36%, rgba(250,229,230,.48) 66%, rgba(246,214,217,.58) 100%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(250,229,230,.42)),
    url("assets/images/shelf-arches.jpg");
  background-size: cover;
  background-position: center 42%;
}

.archive-hero::before {
  background:
    radial-gradient(ellipse at 49% 23%, rgba(255,255,255,.88) 0%, rgba(255,249,250,.42) 28%, transparent 58%),
    linear-gradient(90deg, rgba(255,249,250,.22), transparent 38%, transparent 70%, rgba(200,121,133,.08));
  opacity: 1;
}

.archive-hero::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -36px;
  height: 125px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 16% 78%, rgba(255,255,255,.96) 0 22%, transparent 54%),
    radial-gradient(ellipse at 48% 88%, rgba(255,249,250,.94) 0 25%, transparent 56%),
    radial-gradient(ellipse at 82% 74%, rgba(255,255,255,.92) 0 22%, transparent 54%);
  filter: blur(12px);
  opacity: .82;
}

.archive-hero__inner {
  grid-template-columns: minmax(390px, .86fr) minmax(590px, 1.14fr);
  gap: clamp(52px, 5.5vw, 86px);
  width: min(100%, 1320px);
}

.archive-hero__welcome {
  max-width: 535px;
  padding: 22px 0 28px;
}

.archive-hero__heading {
  max-width: 535px;
  font-size: clamp(3.55rem, 4.65vw, 4.9rem);
  line-height: .94;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(255,255,255,.72);
}

.archive-hero__intro {
  max-width: 500px;
  padding-left: 15px;
  border-left: 1px solid rgba(200,121,133,.22);
  color: #77565e;
  text-shadow: 0 1px 12px rgba(255,255,255,.78);
}

/* One unified celestial display case. */
.current-reads {
  max-width: 720px;
  justify-self: end;
}

.current-reads__glow {
  width: 92%;
  height: 90%;
  top: 6%;
  left: 4%;
  background: rgba(225,165,174,.20);
  filter: blur(68px);
}

.current-reads__card {
  min-height: 500px;
  padding: 24px 26px 18px;
  border: 1px solid rgba(255,255,255,.90);
  border-radius: 34px 34px 28px 28px;
  background:
    linear-gradient(145deg, rgba(255,252,252,.78), rgba(250,229,230,.56));
  box-shadow:
    0 28px 75px rgba(94,61,69,.12),
    0 0 0 1px rgba(200,121,133,.08),
    inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter: blur(18px) saturate(1.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
  overflow: hidden;
}

.current-reads__card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(200,121,133,.14);
  border-radius: 27px 27px 22px 22px;
  pointer-events: none;
}

.current-reads__card::after {
  content: "✦";
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  color: rgba(200,121,133,.54);
  font-size: .72rem;
  text-shadow: 0 0 12px rgba(255,255,255,1);
  pointer-events: none;
}

.current-reads__eyebrow {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin: 0 auto 18px;
  padding: 7px 18px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  background: rgba(255,249,250,.60);
  box-shadow: 0 8px 22px rgba(94,61,69,.05);
  text-align: center;
}

.current-reads__viewport {
  min-height: 380px;
}

.current-read {
  grid-template-columns: minmax(250px, 1.03fr) minmax(245px, .97fr);
  gap: 24px;
  align-items: stretch;
}

.current-read.is-active {
  animation: celestial-read-enter 560ms cubic-bezier(.2,.78,.2,1) both;
}

@keyframes celestial-read-enter {
  from { opacity: 0; transform: translateY(8px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Glass exhibit chamber: book stays INSIDE the window. */
.current-read__display {
  min-height: 350px;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 128px 128px 22px 22px;
  background:
    radial-gradient(circle at 50% 39%, rgba(255,255,255,.78), rgba(246,214,217,.20) 42%, transparent 68%),
    linear-gradient(150deg, rgba(255,255,255,.44), rgba(246,214,217,.18));
  box-shadow:
    inset 0 0 0 1px rgba(200,121,133,.10),
    inset 0 20px 50px rgba(255,255,255,.34),
    0 16px 34px rgba(94,61,69,.07);
  isolation: isolate;
}

.current-read__display::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: -30%;
  left: -75%;
  width: 44%;
  height: 165%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent);
  opacity: .55;
  pointer-events: none;
  animation: exhibit-glass-sweep 8s 1.5s ease-in-out infinite;
}

.current-read__display::after {
  content: "CURRENT EXHIBIT";
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  min-width: 142px;
  padding: 6px 13px;
  border: 1px solid rgba(200,121,133,.16);
  border-radius: 999px;
  background: rgba(255,249,250,.72);
  color: rgba(94,61,69,.68);
  font-family: var(--font-body);
  font-size: .51rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(94,61,69,.05);
  pointer-events: none;
}

@keyframes exhibit-glass-sweep {
  0%, 58% { left: -75%; opacity: 0; }
  64% { opacity: .55; }
  78% { left: 135%; opacity: .30; }
  100% { left: 135%; opacity: 0; }
}

.current-read__halo {
  width: 225px;
  height: 225px;
  border-color: rgba(200,121,133,.28);
  box-shadow:
    0 0 24px rgba(255,255,255,.98),
    0 0 64px rgba(246,214,217,.76);
}

.current-read__halo::before,
.current-read__halo::after {
  content: "";
  position: absolute;
  inset: 15px -14px;
  border: 1px solid rgba(200,121,133,.18);
  border-radius: 50%;
  transform: rotate(62deg);
}

.current-read__halo::after {
  inset: 34px -24px;
  border-color: rgba(255,255,255,.66);
  transform: rotate(-48deg);
}

.current-read__cover-wrap {
  width: 170px;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), filter 420ms ease;
}

.current-read__cover-wrap::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -15px;
  height: 16px;
  border-radius: 50%;
  background: rgba(94,61,69,.18);
  filter: blur(9px);
  opacity: .55;
  transition: opacity 420ms ease, transform 420ms ease;
}

.current-read__cover {
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 10px;
  box-shadow:
    0 20px 34px rgba(94,61,69,.23),
    0 0 0 5px rgba(255,255,255,.10);
  animation: current-book-float 5.4s ease-in-out infinite;
  transition: box-shadow 420ms ease;
}

.current-read__display:hover .current-read__cover-wrap {
  transform: translateY(-7px) scale(1.035);
  filter: saturate(1.05);
}

.current-read__display:hover .current-read__cover {
  box-shadow:
    0 27px 42px rgba(94,61,69,.28),
    0 0 28px rgba(255,255,255,.74),
    0 0 0 5px rgba(255,255,255,.16);
}

.current-read__display:hover .current-read__cover-wrap::after {
  opacity: .72;
  transform: translateY(7px) scale(.92);
}

.current-read__display:hover .current-read__halo {
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.86));
}

.current-read__sparkle {
  opacity: .58;
  transition: opacity 300ms ease, transform 300ms ease;
}

.current-read__display:hover .current-read__sparkle {
  opacity: 1;
  transform: scale(1.2);
}

/* Archive record remains in the SAME display case, but has its own pane. */
.current-read__info {
  position: relative;
  align-self: stretch;
  padding: 25px 23px 22px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 20px;
  background:
    linear-gradient(150deg, rgba(255,249,250,.68), rgba(250,229,230,.34));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 12px 28px rgba(94,61,69,.045);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.current-read__info::before {
  content: "ARCHIVE RECORD";
  display: block;
  margin-bottom: 5px;
  color: var(--cherub-rose);
  font-family: var(--font-body);
  font-size: .54rem;
  font-weight: 600;
  letter-spacing: .19em;
}

.current-read__title {
  font-size: clamp(1.8rem, 2.25vw, 2.25rem);
  line-height: 1;
}

.current-read__progress-area {
  padding: 16px 0;
  margin: 2px 0 16px;
  border-top: 1px solid rgba(200,121,133,.12);
  border-bottom: 1px solid rgba(200,121,133,.12);
}

.current-read__thought {
  font-size: .98rem;
  line-height: 1.42;
}

.current-reads__controls {
  position: relative;
  z-index: 4;
  width: fit-content;
  min-width: 250px;
  margin: 12px auto 0;
  padding: 8px 10px 0;
}

/* Responsive: roomy rather than crushed. */
@media (max-width: 1120px) {
  .archive-hero__inner {
    grid-template-columns: minmax(340px, .8fr) minmax(520px, 1.2fr);
    gap: 42px;
  }
  .current-read {
    grid-template-columns: minmax(220px, .95fr) minmax(230px, 1.05fr);
    gap: 18px;
  }
  .current-read__cover-wrap { width: 154px; }
}

@media (max-width: 900px) {
  .archive-hero {
    min-height: auto;
    padding: 128px 24px 82px;
    background-position: center top;
  }
  .archive-hero__inner {
    grid-template-columns: 1fr;
    max-width: 720px;
    gap: 46px;
  }
  .archive-hero__welcome {
    max-width: 590px;
  }
  .current-reads {
    max-width: 720px;
    justify-self: stretch;
  }
}

@media (max-width: 650px) {
  .archive-hero {
    padding: 112px 16px 70px;
  }
  .archive-hero__heading {
    font-size: clamp(3rem, 14vw, 4.1rem);
  }
  .current-reads__card {
    padding: 22px 17px 16px;
    border-radius: 27px;
  }
  .current-read,
  .current-read.is-active {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .current-read__display {
    min-height: 315px;
    border-radius: 112px 112px 20px 20px;
  }
  .current-read__cover-wrap { width: 148px; }
  .current-read__info {
    padding: 21px 20px;
    text-align: left;
  }
  .current-read__progress-area {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .current-read__display::before,
  .current-read__cover {
    animation: none !important;
  }
}

/* ✦ END 11. CELESTIAL BALCONY HERO ✦ */

/* ==========================================================
   12. HOME HERO — CELESTIAL BALCONY REFINEMENT PASS
   Less UI-boxing, softer embedded glass, lighter footprint.
   ========================================================== */

.archive-hero {
  min-height: 700px;
  background:
    radial-gradient(ellipse at 52% 22%, rgba(255,255,255,.88) 0%, rgba(255,250,251,.56) 29%, transparent 56%),
    linear-gradient(90deg, rgba(255,250,251,.90) 0%, rgba(255,247,249,.70) 38%, rgba(250,229,230,.40) 70%, rgba(246,214,217,.50) 100%),
    url("assets/images/shelf-arches.jpg");
  background-size: cover;
  background-position: center 40%;
}

/* A quiet architectural arch behind the reading case — scenery, not another card. */
.archive-hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(48vw, 690px);
  height: 610px;
  right: -28px;
  top: -58px;
  border: 1px solid rgba(255,255,255,.42);
  border-bottom: 0;
  border-radius: 48% 48% 8px 8px / 27% 27% 8px 8px;
  box-shadow:
    inset 0 0 0 10px rgba(255,255,255,.045),
    0 0 80px rgba(255,255,255,.28);
  opacity: .72;
  pointer-events: none;
}

.archive-hero__inner::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -4%;
  bottom: -24px;
  width: 58%;
  height: 78px;
  opacity: .28;
  pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 0 26px, rgba(200,121,133,.22) 27px 28px, transparent 29px),
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(255,255,255,.72) 45px 48px, transparent 49px 92px);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 88%, transparent);
}

.archive-hero__inner {
  position: relative;
  grid-template-columns: minmax(390px, .94fr) minmax(560px, 1.06fr);
  gap: clamp(52px, 5vw, 76px);
  width: min(100%, 1280px);
}

.archive-hero__welcome {
  max-width: 520px;
}

.archive-hero__heading {
  max-width: 510px;
  font-size: clamp(3.35rem, 4.25vw, 4.55rem);
  line-height: .96;
}

/* Outer case becomes one luxurious sheet of glass, not a nested dashboard. */
.current-reads {
  max-width: 650px;
}

.current-reads__card {
  min-height: 455px;
  padding: 25px 27px 18px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,253,253,.64), rgba(250,229,230,.39));
  box-shadow:
    0 28px 72px rgba(94,61,69,.095),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -18px 45px rgba(246,214,217,.08);
  backdrop-filter: blur(15px) saturate(1.05);
  -webkit-backdrop-filter: blur(15px) saturate(1.05);
}

.current-reads__card::before {
  inset: 10px;
  border-color: rgba(255,255,255,.22);
  border-radius: 23px;
  opacity: .58;
}

.current-reads__card::after { display: none; }

/* Engraved into the case rather than sitting in a pill. */
.current-reads__eyebrow {
  margin: 0 0 17px;
  padding: 0 0 9px;
  border: 0;
  border-bottom: 1px solid rgba(200,121,133,.13);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  letter-spacing: .22em;
}

.current-reads__viewport { min-height: 340px; }

.current-read {
  grid-template-columns: minmax(230px, 1fr) minmax(245px, 1fr);
  gap: 27px;
}

/* The exhibit is defined by light/refraction, not a visible card border. */
.current-read__display {
  min-height: 325px;
  border: 0;
  border-radius: 46% 46% 18px 18px / 25% 25% 18px 18px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.76) 0%, rgba(255,255,255,.30) 35%, rgba(246,214,217,.12) 58%, transparent 76%);
  box-shadow:
    inset 0 24px 50px rgba(255,255,255,.20),
    0 18px 34px rgba(94,61,69,.035);
}

.current-read__display::before {
  width: 38%;
  opacity: .42;
}

/* Pedestal replaces the CURRENT EXHIBIT pill. */
.current-read__display::after {
  content: "";
  left: 18%;
  right: 18%;
  bottom: 17px;
  min-width: 0;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(200,121,133,.22), rgba(255,255,255,.52) 45%, transparent 74%);
  box-shadow: 0 4px 12px rgba(94,61,69,.08), 0 0 18px rgba(255,255,255,.72);
}

.current-read__halo {
  width: 210px;
  height: 210px;
  border-color: rgba(200,121,133,.20);
  opacity: .72;
}

.current-read__halo::before { border-color: rgba(200,121,133,.13); }
.current-read__halo::after { border-color: rgba(255,255,255,.50); }

.current-read__cover-wrap { width: 164px; }

/* Archive record is an embedded frosted pane, not a second obvious card. */
.current-read__info {
  padding: 19px 8px 17px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.current-read__info::after {
  content: "";
  position: absolute;
  left: -14px;
  top: 5%;
  bottom: 5%;
  width: 1px;
  background: linear-gradient(transparent, rgba(200,121,133,.16) 14%, rgba(255,255,255,.74) 50%, rgba(200,121,133,.16) 86%, transparent);
  box-shadow: 0 0 12px rgba(255,255,255,.65);
}

.current-read__title {
  font-size: clamp(1.65rem, 2vw, 2rem);
  line-height: 1.02;
}

.current-read__progress-area {
  padding: 14px 0;
  margin: 4px 0 13px;
  border-top-color: rgba(200,121,133,.10);
  border-bottom-color: rgba(200,121,133,.10);
}

.current-read__thought {
  font-size: .94rem;
  line-height: 1.42;
}

.current-reads__controls {
  min-width: 225px;
  margin-top: 7px;
  padding-top: 5px;
}

@media (max-width: 1120px) {
  .archive-hero__inner {
    grid-template-columns: minmax(340px, .86fr) minmax(500px, 1.14fr);
    gap: 38px;
  }
  .current-read {
    grid-template-columns: minmax(210px, .95fr) minmax(220px, 1.05fr);
    gap: 22px;
  }
  .current-read__cover-wrap { width: 150px; }
}

@media (max-width: 900px) {
  .archive-hero__inner::before,
  .archive-hero__inner::after { display: none; }
  .current-reads { max-width: 650px; }
}

@media (max-width: 650px) {
  .current-reads__card { padding: 22px 18px 15px; }
  .current-read__display {
    min-height: 300px;
    border-radius: 44% 44% 18px 18px / 23% 23% 18px 18px;
  }
  .current-read__info {
    padding: 18px 3px 10px;
  }
  .current-read__info::after { display: none; }
}

/* ✦ END 12. CELESTIAL BALCONY REFINEMENT ✦ */

/* ==========================================================
   ANGEL ARCHIVE — GLOBAL SCROLLBAR
   ========================================================== */

html {
  scrollbar-width: thin;
  scrollbar-color:
    rgba(200, 121, 133, 0.70)
    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);
}