/* ==================================================
   THE ANGEL ARCHIVE
   CURATED RELICS
   ================================================== */


/* ==================================================
   00 — PAGE FOUNDATION
   ================================================== */

.relics-page {
  min-height: 100vh;
  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 249, 250, 0.96) 35%,
      rgba(250, 229, 230, 0.38) 100%
    );

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


/* ==================================================
   01 — THE RELIC CONSTELLATION
   ================================================== */

.relic-constellation {
  position: relative;

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

  margin: 0 auto;

  padding:
    8.25rem
    0
    1rem;

  isolation: isolate;
}


/* Giant ghosted typography */

.relic-constellation::before {
  content: "CURATED";

  position: absolute;

  left: -2rem;
  top: 13rem;

  z-index: -5;

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

  font-size: clamp(8rem, 17vw, 15rem);
  font-weight: 500;

  line-height: 0.75;

  letter-spacing: -0.06em;

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

  pointer-events: none;
}


.relic-constellation::after {
  content: "Relics";

  position: absolute;

  right: -1rem;
  bottom: 4rem;

  z-index: -5;

  font-family: "Allura", cursive;

  font-size: clamp(9rem, 19vw, 17rem);

  line-height: 0.7;

  color: rgba(225, 165, 174, 0.045);

  transform: rotate(-5deg);

  pointer-events: none;
}


/* ==================================================
   CEREMONIAL ARCHIVE HEADER
   ================================================== */

.relic-constellation__header {
  position: relative;

  z-index: 20;

  display: flex;

  width: fit-content;

  align-items: center;

  justify-content: center;

  gap: 0.8rem;

  margin: 0 auto;

  text-align: center;

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

  font-size: 0.47rem;
  font-weight: 700;

  letter-spacing: 0.24em;

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


.relic-constellation__header::before,
.relic-constellation__header::after {
  content: "";

  display: block;

  width: clamp(35px, 6vw, 75px);
  height: 1px;

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


.relic-constellation__header::after {
  transform: scaleX(-1);
}


.relic-constellation__header span {
  display: inline-block;

  margin: 0 0.05rem;

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

  font-size: 0.78rem;

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


/* ==================================================
   CONSTELLATION SCENE
   ================================================== */

.relic-constellation__scene {
  position: relative;

  height: 400px;

  margin-top: 0.75rem;

  isolation: isolate;
}


/* ==================================================
   LARGE CELESTIAL PATHS
   ================================================== */

.constellation-path {
  position: absolute;

  left: 50%;
  top: 50%;

  border-radius: 50%;

  pointer-events: none;

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


.constellation-path--outer {
  width: min(900px, 78vw);
  height: 330px;

  border:
    1px dashed
    rgba(200, 121, 133, 0.15);

  box-shadow:
    0 0 25px
    rgba(246, 214, 217, 0.09);

  transform:
    translate(-50%, -50%)
    rotate(-5deg);
}


.constellation-path--middle {
  width: min(750px, 66vw);
  height: 405px;

  border:
    1px solid
    rgba(225, 165, 174, 0.17);

  box-shadow:
    inset
      0
      0
      30px
      rgba(246, 214, 217, 0.06);

  transform:
    translate(-50%, -50%)
    rotate(8deg);
}


.constellation-path--inner {
  width: 535px;
  height: 255px;

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

  box-shadow:
    0
      0
      20px
      rgba(225, 165, 174, 0.07);

  transform:
    translate(-50%, -50%)
    rotate(-13deg);
}


/* ==================================================
   GLOWING CELESTIAL COORDINATES
   ================================================== */

.constellation-path--outer::before,
.constellation-path--outer::after,
.constellation-path--middle::before,
.constellation-path--middle::after,
.constellation-path--inner::before,
.constellation-path--inner::after {
  content: "";

  position: absolute;

  width: 6px;
  height: 6px;

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

  border-radius: 50%;

  background:
    var(--cherub-rose);

  box-shadow:
    0 0 0 3px
      rgba(246, 214, 217, 0.2),

    0 0 8px
      rgba(225, 165, 174, 0.75),

    0 0 18px
      rgba(246, 214, 217, 0.8);

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

  animation:
    celestial-coordinate-glow
    3.8s
    ease-in-out
    infinite;
}


.constellation-path--outer::before {
  left: 25%;
  top: 6.5%;
}


.constellation-path--outer::after {
  left: 16.5%;
  top: 87.5%;

  animation-delay: -1.7s;
}


.constellation-path--middle::before {
  left: 93%;
  top: 5.5%;

  animation-delay: -0.9s;
}


.constellation-path--middle::after {
  left: 0.25%;
  top: 54.5%;

  animation-delay: -2.4s;
}


.constellation-path--inner::before {
  left: 110.5%;
  top: 120%;

  animation-delay: -1.2s;
}


.constellation-path--inner::after {
  left: 100%;
  top: 50%;

  animation-delay: -3s;
}


/* ==================================================
   CATEGORY NODES
   ================================================== */

.constellation-category {
  position: absolute;

  z-index: 20;

  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding:
    0.4rem
    0.55rem;

  border-radius: 999px;

  text-decoration: none;

  color: var(--ink-rose);

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


.constellation-category:hover {
  transform:
    translateY(-5px);

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

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


/* ==================================================
   NODE ORBS
   ================================================== */

.constellation-category__orb {
  position: relative;

  display: grid;

  flex: 0 0 auto;

  place-items: center;

  width: 36px;
  height: 36px;

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

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255, 255, 255, 1),
      rgba(250, 229, 230, 0.86)
    );

  box-shadow:
    0 6px 20px
      rgba(200, 121, 133, 0.12),

    0 0 0 5px
      rgba(246, 214, 217, 0.16);

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

  font-size: 0.78rem;

  color: var(--archive-rose);

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


.constellation-category__orb::before {
  content: "";

  position: absolute;

  inset: -8px;

  border:
    1px solid
    rgba(225, 165, 174, 0.11);

  border-radius: 50%;

  transition:
    inset 240ms ease,
    opacity 240ms ease;
}


.constellation-category__orb::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  z-index: -1;

  width: 58px;
  height: 58px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(246, 214, 217, 0.48),
      transparent 70%
    );

  opacity: 0;

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

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


.constellation-category:hover
.constellation-category__orb {
  transform:
    scale(1.13);

  background:
    var(--cloud-blush);

  box-shadow:
    0 8px 25px
      rgba(200, 121, 133, 0.22),

    0 0 18px
      rgba(246, 214, 217, 0.75);
}


.constellation-category:hover
.constellation-category__orb::before {
  inset: -11px;

  opacity: 0.65;
}


.constellation-category:hover
.constellation-category__orb::after {
  opacity: 1;

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


/* ==================================================
   NODE TEXT
   ================================================== */

.constellation-category__text {
  display: flex;

  flex-direction: column;

  gap: 0.05rem;
}


.constellation-category__text strong {
  font-family: var(--font-body);

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

  letter-spacing: 0.18em;

  color: var(--ink-rose);

  transition:
    color 220ms ease,
    letter-spacing 220ms ease;
}


.constellation-category__text em {
  font-family: var(--font-display);

  font-size: 0.8rem;

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

  color: var(--dusty-ink);

  transition:
    color 220ms ease;
}


.constellation-category:hover
.constellation-category__text strong {
  color: var(--archive-rose);

  letter-spacing: 0.2em;
}


.constellation-category:hover
.constellation-category__text em {
  color: var(--cherub-rose);
}


/* ==================================================
   NODE POSITIONS
   ================================================== */

.constellation-category--moodboards {
  left: 7%;
  top: 15%;
}


.constellation-category--templates {
  right: 6%;
  top: 15%;
}


.constellation-category--trackers {
  left: 2%;
  top: 47%;
}


.constellation-category--graphics {
  right: 1%;
  top: 47%;
}


/*
  PLAYLISTS intentionally inherit the former
  Fragments constellation position.
*/

.constellation-category--fragments {
  left: 11%;
  bottom: 9%;
}


/*
  FRAGMENTS intentionally inherit the former
  Other Relics constellation position.
*/

.constellation-category--other {
  right: 7%;
  bottom: 9%;
}


/* Left nodes face inward */

.constellation-category--moodboards,
.constellation-category--trackers,
.constellation-category--fragments {
  flex-direction: row-reverse;

  text-align: right;
}


/* ==================================================
   DECORATIVE CELESTIAL DUST
   ================================================== */

.constellation-star {
  position: absolute;

  z-index: 6;

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

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

  pointer-events: none;

  animation:
    constellation-twinkle
    4s
    ease-in-out
    infinite;
}


.constellation-star--one {
  left: 25%;
  top: 7%;

  font-size: 0.9rem;
}


.constellation-star--two {
  right: 24%;
  top: 9%;

  font-size: 0.55rem;

  animation-delay: -1.4s;
}


.constellation-star--three {
  left: 29%;
  bottom: 11%;

  font-size: 0.7rem;

  animation-delay: -2.1s;
}


.constellation-star--four {
  right: 28%;
  bottom: 12%;

  font-size: 0.8rem;

  animation-delay: -0.8s;
}


.constellation-star--five {
  right: 18%;
  top: 34%;

  font-size: 0.62rem;

  animation-delay: -2.8s;
}


/* ==================================================
   CENTER — CELESTIAL RELIQUARY
   ================================================== */

.relic-constellation__artifact {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 10;

  display: grid;

  place-items: center;

  width: 450px;
  min-height: 450px;

  perspective: 1100px;

  isolation: isolate;

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


/* ==================================================
   DIVINE HALO
   ================================================== */

.relic-constellation__artifact::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  z-index: -5;

  width: 390px;
  height: 390px;

  border:
    1px solid
    rgba(225, 165, 174, 0.15);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(246, 214, 217, 0.42) 30%,
      rgba(248, 219, 226, 0.17) 53%,
      transparent 73%
    );

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

    0 0 90px
      rgba(225, 165, 174, 0.1);

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

  animation:
    divine-halo-breathe
    5.5s
    ease-in-out
    infinite;
}


.relic-constellation__artifact::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  z-index: -4;

  width: 340px;
  height: 425px;

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

  border-radius: 50%;

  transform:
    translate(-50%, -50%)
    rotate(18deg);

  pointer-events: none;
}


/* ==================================================
   AMBIENT GLOW
   ================================================== */

.reliquary__glow {
  position: absolute;

  width: 410px;
  height: 410px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(246, 214, 217, 0.42) 27%,
      rgba(248, 219, 226, 0.2) 48%,
      rgba(255, 255, 255, 0) 72%
    );

  filter:
    blur(7px);

  pointer-events: none;
}


.reliquary__glow::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 26px;

  width: 205px;
  height: 32px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(200, 121, 133, 0.18),
      rgba(246, 214, 217, 0.09) 48%,
      transparent 73%
    );

  filter:
    blur(8px);

  transform:
    translateX(-50%);

  animation:
    relic-shadow-breathe
    7s
    ease-in-out
    infinite;
}


/* ==================================================
   INNER CELESTIAL ORBITS
   ================================================== */

.reliquary__orbit {
  position: absolute;

  left: 50%;
  top: 50%;

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

  border-radius: 50%;

  pointer-events: none;
}


.reliquary__orbit--one {
  width: 375px;
  height: 235px;

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

  transform:
    translate(-50%, -50%)
    rotate(-12deg);
}


.reliquary__orbit--two {
  width: 340px;
  height: 305px;

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

  transform:
    translate(-50%, -50%)
    rotate(28deg);
}


.reliquary__orbit--three {
  width: 295px;
  height: 385px;

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

  transform:
    translate(-50%, -50%)
    rotate(-38deg);
}


/* ==================================================
   FLOATING ARTIFACT
   ================================================== */

.reliquary__artifact {
  position: relative;

  z-index: 5;

  width: 270px;
  height: 378px;

  perspective: 1100px;

  animation:
    reliquary-float
    7s
    ease-in-out
    infinite;
}


.reliquary__artifact-inner {
  position: relative;

  width: 100%;
  height: 100%;

  transform-style: preserve-3d;

  animation:
    reliquary-turn
    12s
    ease-in-out
    infinite;
}


/* ==================================================
   ARTIFACT FACES
   ================================================== */

.reliquary__face {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding:
    2rem
    1.45rem;

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

  border-radius:
    105px
    105px
    18px
    18px;

  overflow: hidden;

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

  box-shadow:
    inset
      0
      0
      0
      7px
      rgba(255, 255, 255, 0.28),

    0
      25px
      55px
      rgba(94, 61, 69, 0.12),

    0
      0
      30px
      rgba(246, 214, 217, 0.25);
}


.reliquary__face::before {
  content: "";

  position: absolute;

  inset: 10px;

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

  border-radius:
    95px
    95px
    12px
    12px;

  pointer-events: none;
}


.reliquary__face::after {
  content: "";

  position: absolute;

  top: -35%;
  left: -65%;

  width: 70%;
  height: 170%;

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

  transform:
    rotate(18deg);

  pointer-events: none;

  animation:
    relic-shimmer
    8s
    ease-in-out
    infinite;
}


.reliquary__face--front {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(250, 229, 230, 0.9) 47%,
      rgba(246, 214, 217, 0.8)
    );
}


.reliquary__face--back {
  transform:
    rotateY(180deg);

  background:
    linear-gradient(
      215deg,
      rgba(255, 255, 255, 0.96),
      rgba(248, 219, 226, 0.9) 48%,
      rgba(241, 206, 210, 0.78)
    );
}


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

.reliquary__archive {
  position: absolute;

  top: 2.2rem;

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

  font-size: 0.4rem;
  font-weight: 700;

  letter-spacing: 0.2em;

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


.reliquary__seal {
  display: grid;

  place-items: center;

  width: 58px;
  height: 58px;

  margin-bottom: 1rem;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #f4d5d9,
      var(--cherub-rose)
    );

  box-shadow:
    0 8px 20px
      rgba(200, 121, 133, 0.2),

    0 0 22px
      rgba(246, 214, 217, 0.45),

    inset
      0
      0
      0
      4px
      rgba(255, 255, 255, 0.18);

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

  font-size: 1.45rem;

  color: var(--pearl);
}


.reliquary__small {
  font-family: var(--font-body);

  font-size: 0.39rem;
  font-weight: 700;

  letter-spacing: 0.18em;

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


.reliquary__face strong {
  margin-top: 0.35rem;

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

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

  line-height: 0.9;

  text-align: center;

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


.reliquary__face strong em {
  display: block;

  font-family: "Allura", cursive;

  font-size: 1.45em;
  font-weight: 400;

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


.reliquary__collection {
  margin-top: 0.8rem;

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

  font-size: 0.38rem;
  font-weight: 700;

  letter-spacing: 0.2em;

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


.reliquary__script {
  margin-top: 1rem;

  font-family: "Allura", cursive;

  font-size: 1.25rem;

  color: var(--archive-rose);

  transform:
    rotate(-3deg);
}


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

.reliquary__back-heart {
  margin-bottom: 0.6rem;

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

  font-size: 1.8rem;

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


.reliquary__face--back strong {
  font-size: 1.15rem;

  letter-spacing: 0.05em;
}


.reliquary__face--back strong em {
  margin-top: 0.15rem;

  font-size: 1.55em;
}


.reliquary__face--back p {
  max-width: 145px;

  margin:
    0.8rem
    0
    0;

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

  font-size: 0.85rem;

  font-style: italic;

  line-height: 1.35;

  text-align: center;

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


/* ==================================================
   COLLECTION ENTRANCE
   ================================================== */

.relic-constellation__enter {
  position: relative;

  z-index: 20;

  display: flex;

  width: fit-content;

  align-items: center;

  gap: 0.75rem;

  margin:
    -0.35rem
    auto
    0;

  padding:
    0.55rem
    0.9rem;

  border:
    1px solid
    transparent;

  border-radius: 999px;

  text-decoration: none;

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


.relic-constellation__enter span {
  font-family: var(--font-body);

  font-size: 0.43rem;
  font-weight: 700;

  letter-spacing: 0.22em;

  color: var(--archive-rose);

  transition:
    color 180ms ease,
    letter-spacing 180ms ease;
}


.relic-constellation__enter strong {
  font-family: var(--font-display);

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

  color: var(--cherub-rose);

  animation:
    constellation-arrow
    2s
    ease-in-out
    infinite;
}


.relic-constellation__enter:hover {
  border-color:
    rgba(200, 121, 133, 0.16);

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

  box-shadow:
    0 8px 30px
    rgba(200, 121, 133, 0.1);

  transform:
    translateY(-2px);
}


.relic-constellation__enter:hover span {
  color: var(--ink-rose);

  letter-spacing: 0.25em;
}


/* ==================================================
   02 — CONSTELLATION ANIMATIONS
   ================================================== */

@keyframes reliquary-float {

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

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

}


@keyframes reliquary-turn {

  0%,
  12% {
    transform:
      rotateY(-14deg)
      rotateX(2deg)
      rotateZ(-1deg);
  }

  38% {
    transform:
      rotateY(24deg)
      rotateX(-2deg)
      rotateZ(1deg);
  }

  52% {
    transform:
      rotateY(165deg)
      rotateX(1deg)
      rotateZ(-1deg);
  }

  60% {
    transform:
      rotateY(180deg)
      rotateX(0deg)
      rotateZ(0deg);
  }

  68% {
    transform:
      rotateY(165deg)
      rotateX(-1deg)
      rotateZ(1deg);
  }

  88% {
    transform:
      rotateY(18deg)
      rotateX(2deg)
      rotateZ(0deg);
  }

  100% {
    transform:
      rotateY(-14deg)
      rotateX(2deg)
      rotateZ(-1deg);
  }

}


@keyframes divine-halo-breathe {

  0%,
  100% {
    opacity: 0.62;

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

  50% {
    opacity: 1;

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

}


@keyframes relic-shadow-breathe {

  0%,
  100% {
    opacity: 0.45;

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

  50% {
    opacity: 0.8;

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

}


@keyframes relic-shimmer {

  0%,
  20% {
    left: -75%;
  }

  55%,
  100% {
    left: 145%;
  }

}


@keyframes constellation-twinkle {

  0%,
  100% {
    opacity: 0.2;

    transform:
      scale(0.8);
  }

  50% {
    opacity: 0.95;

    transform:
      scale(1.2);
  }

}


@keyframes constellation-arrow {

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

  50% {
    transform:
      translateY(5px);
  }

}


@keyframes celestial-coordinate-glow {

  0%,
  100% {
    opacity: 0.45;

    box-shadow:
      0 0 0 2px
        rgba(246, 214, 217, 0.14),

      0 0 6px
        rgba(225, 165, 174, 0.5);
  }

  50% {
    opacity: 1;

    box-shadow:
      0 0 0 4px
        rgba(246, 214, 217, 0.24),

      0 0 10px
        rgba(225, 165, 174, 0.9),

      0 0 22px
        rgba(246, 214, 217, 0.9);
  }

}


/* ==================================================
   03 — THE HEAVENLY GALLERY
   ================================================== */

.heavenly-gallery {
  position: relative;

  overflow: hidden;

  padding:
    0
    0
    2.5rem;

  background:
    linear-gradient(
      90deg,
      rgba(225, 165, 174, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      180deg,
      rgba(255, 249, 250, 0.96) 0%,
      rgba(250, 229, 230, 0.88) 52%,
      rgba(255, 249, 250, 0.97) 100%
    );

  background-size:
    280px 100%,
    100% 100%;
}


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

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 249, 250, 0.38) 38%,
      transparent 72%
    );

  pointer-events: none;
}


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

  position: absolute;

  left: 0;
  right: 0;
  bottom: 2.4rem;

  height: 1px;

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

  box-shadow:
    0 5px 0
      rgba(255, 255, 255, 0.62),

    0 9px 0
      rgba(200, 121, 133, 0.06);

  pointer-events: none;
}


.heavenly-gallery__inner {
  position: relative;

  z-index: 2;

  width:
    min(
      1420px,
      calc(100% - 3rem)
    );

  margin:
    0
    auto;
}


/* ==================================================
   DECORATIVE WALL ORNAMENTS
   ================================================== */

.gallery-wall__ornament {
  position: absolute;

  z-index: 1;

  top: 6rem;

  width: 135px;
  height: 500px;

  opacity: 0.18;

  pointer-events: none;
}


.gallery-wall__ornament::before {
  content: "";

  position: absolute;

  inset: 0;

  border-top:
    1px solid
    var(--archive-rose);

  border-bottom:
    1px solid
    var(--archive-rose);
}


.gallery-wall__ornament::after {
  content: "✦\A♡\A✧\A♡\A✦";

  white-space: pre;

  position: absolute;

  top: 50%;

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

  font-size: 0.8rem;

  line-height: 4.8;

  color:
    var(--archive-rose);

  transform:
    translateY(-50%);
}


.gallery-wall__ornament--left {
  left: -82px;

  border-right:
    1px solid
    rgba(200, 121, 133, 0.4);

  border-radius:
    0
    90px
    90px
    0;
}


.gallery-wall__ornament--left::after {
  right: 14px;
}


.gallery-wall__ornament--right {
  right: -82px;

  border-left:
    1px solid
    rgba(200, 121, 133, 0.4);

  border-radius:
    90px
    0
    0
    90px;
}


.gallery-wall__ornament--right::after {
  left: 14px;
}


/* ==================================================
   COLLECTION INDEX
   ================================================== */

.gallery-index {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 2rem;

  padding:
    0
    0.75rem
    1.15rem;

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


.gallery-index__identity {
  display: flex;

  align-items: center;

  gap: 0.55rem;

  white-space: nowrap;

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

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

  letter-spacing: 0.17em;

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


.gallery-index__identity i {
  font-family:
    var(--font-display);

  font-size: 0.75rem;
  font-style: normal;

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


/* ==================================================
   GALLERY FILTERS
   ================================================== */

.gallery-filters {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.35rem;
}


.gallery-filter {
  appearance: none;

  padding:
    0.55rem
    0.72rem;

  border: 0;

  border-radius: 999px;

  background:
    transparent;

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

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

  letter-spacing: 0.12em;

  color:
    var(--dusty-ink);

  cursor: pointer;

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


.gallery-filter:hover {
  color:
    var(--archive-rose);

  transform:
    translateY(-1px);
}


.gallery-filter.is-active {
  padding-inline: 1rem;

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

  color:
    var(--archive-rose);

  box-shadow:
    0 5px 18px
      rgba(200, 121, 133, 0.11),

    inset
      0
      0
      0
      1px
      rgba(200, 121, 133, 0.16);
}


/* ==================================================
   OBJECT COUNT
   ================================================== */

.gallery-index__count {
  display: flex;

  align-items: center;

  gap: 0.55rem;

  white-space: nowrap;
}


.gallery-index__count strong {
  font-family:
    var(--font-display);

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

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


.gallery-index__count span {
  font-family:
    var(--font-body);

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

  letter-spacing: 0.15em;

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


/* ==================================================
   GALLERY LOADING STATE
   ================================================== */

.gallery-loading {
  display: flex;

  min-height: 260px;

  align-items: center;

  justify-content: center;

  gap: 0.8rem;

  padding:
    4rem
    1rem;

  text-align: center;

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


.gallery-loading span {
  font-family:
    var(--font-display);

  color:
    var(--cherub-rose);

  animation:
    gallery-loading-twinkle
    2.4s
    ease-in-out
    infinite;
}


.gallery-loading span:last-child {
  animation-delay: -1.2s;
}


.gallery-loading p {
  margin: 0;

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

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

  letter-spacing: 0.03em;

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


.gallery-loading.is-hidden {
  display: none;
}


@keyframes gallery-loading-twinkle {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.85);
  }

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

}


/* ==================================================
   GALLERY WINGS
   ================================================== */

.gallery-wings {
  position: relative;
}


.gallery-wing {
  position: relative;

  padding:
    4.25rem
    0
    1.25rem;

  scroll-margin-top: 7rem;
}


.gallery-wing + .gallery-wing {
  margin-top: 2.75rem;

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


.gallery-wing + .gallery-wing::before {
  content: "✦";

  position: absolute;

  left: 50%;
  top: -0.55rem;

  padding:
    0
    0.8rem;

  background:
    rgba(253, 241, 242, 0.96);

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

  font-size: 0.8rem;

  color:
    var(--cherub-rose);

  transform:
    translateX(-50%);
}


/* ==================================================
   WING SIGNAGE
   ================================================== */

.gallery-wing__header {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  margin:
    0
    auto
    1.25rem;

  text-align: center;
}


.gallery-wing__star {
  display: block;

  margin-bottom: 0.3rem;

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

  font-size: 0.8rem;

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


.gallery-wing__title {
  margin: 0;

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

  font-size:
    clamp(
      0.62rem,
      1vw,
      0.75rem
    );

  font-weight: 700;

  letter-spacing: 0.38em;

  text-transform: uppercase;

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


.gallery-wing__subtitle {
  margin:
    0.32rem
    0
    0;

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

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

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


.gallery-wing__rule {
  display: flex;

  width:
    min(
      240px,
      60vw
    );

  align-items: center;

  gap: 0.65rem;

  margin-top: 0.65rem;
}


.gallery-wing__rule::before,
.gallery-wing__rule::after {
  content: "";

  flex: 1;

  height: 1px;

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


.gallery-wing__rule::after {
  transform:
    scaleX(-1);
}


.gallery-wing__rule span {
  font-family:
    var(--font-display);

  font-size: 0.65rem;

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


/* ==================================================
   EXHIBITION WALL — SHARED
   ================================================== */

.gallery-exhibition {
  position: relative;

  display: grid;

  align-items: start;

  justify-content: center;

  gap:
    4rem
    clamp(1.5rem, 2.5vw, 3rem);

  padding:
    1.25rem
    0
    1rem;
}


.gallery-exhibition::before {
  content: "";

  position: absolute;

  z-index: -1;

  top: 0;

  left: 2%;
  right: 2%;

  height: 1px;

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


/* ==================================================
   TYPE-SPECIFIC WING GRIDS
   ================================================== */

/* Wide landscape artwork */

.gallery-wing--moodboards
.gallery-exhibition {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  max-width: 1280px;

  margin:
    0
    auto;
}


/* Tall stationery */

.gallery-wing--templates
.gallery-exhibition {
  grid-template-columns:
    repeat(
      4,
      minmax(190px, 240px)
    );
}


/* Ledger-style objects */

.gallery-wing--trackers
.gallery-exhibition {
  grid-template-columns:
    repeat(
      4,
      minmax(210px, 260px)
    );
}


/* Portrait gallery pieces */

.gallery-wing--graphics
.gallery-exhibition {
  grid-template-columns:
    repeat(
      4,
      minmax(180px, 225px)
    );
}


/* Square album displays */

.gallery-wing--playlists
.gallery-exhibition {
  grid-template-columns:
    repeat(
      4,
      minmax(210px, 255px)
    );
}


/* Curiosity cases */

.gallery-wing--fragments
.gallery-exhibition {
  grid-template-columns:
    repeat(
      4,
      minmax(200px, 250px)
    );
}


/* ==================================================
   INDIVIDUAL RELIC
   ================================================== */

.gallery-relic {
  position: relative;

  min-width: 0;

  text-align: center;
}


/* ==================================================
   UNIVERSAL PICTURE LIGHT
   Every Relic Type uses THIS exact fixture.
   ================================================== */

.gallery-relic__light {
  position: relative;

  z-index: 5;

  width: 68%;
  height: 34px;

  margin:
    0
    auto
    0.4rem;
}


.gallery-relic__light::before {
  content: "";

  position: absolute;

  top: 1px;
  left: 50%;

  width: 58%;
  height: 5px;

  transform:
    translateX(-50%);

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

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.95),
      rgba(241, 206, 210, 0.88)
    );

  box-shadow:
    0 2px 4px
      rgba(94, 61, 69, 0.08),

    inset
      0
      1px
      0
      white;
}


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

  position: absolute;

  top: 6px;
  left: 50%;

  width: 115%;
  height: 85px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      180deg,
      rgba(255, 247, 224, 0.24),
      transparent 80%
    );

  clip-path:
    polygon(
      39% 0,
      61% 0,
      100% 100%,
      0 100%
    );

  pointer-events: none;
}


.gallery-relic__light span {
  position: absolute;

  top: 6px;
  left: 50%;

  width: 1px;
  height: 10px;

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

  transform:
    translateX(-50%);
}


.gallery-relic__light span::after {
  content: "♡";

  position: absolute;

  top: 4px;
  left: 50%;

  transform:
    translateX(-70%);

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

  font-size: 0.58rem;

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


/* ==================================================
   ARTWORK BUTTON
   ================================================== */

.gallery-relic__artwork {
  display: grid;

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

  place-items: center;

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    inherit;

  cursor: pointer;
}


/* ==================================================
   MOODBOARD — FRAMED ARTWORK
   ================================================== */

.gallery-relic--moodboard
.gallery-relic__artwork {
  min-height: 0;
}


.gallery-relic__frame {
  position: relative;

  width: 100%;

  padding: 5px;

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

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(241, 206, 210, 0.85) 22%,
      rgba(255, 249, 250, 0.98) 48%,
      rgba(225, 165, 174, 0.52) 72%,
      rgba(255, 255, 255, 0.96) 100%
    );

  box-shadow:
    0 16px 30px
      rgba(94, 61, 69, 0.1),

    0 4px 9px
      rgba(200, 121, 133, 0.08),

    inset
      0
      0
      0
      1px
      rgba(255, 255, 255, 0.95),

    inset
      0
      0
      0
      3px
      rgba(200, 121, 133, 0.08);

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


.gallery-relic__frame::before,
.gallery-relic__frame::after {
  position: absolute;

  z-index: 5;

  top: -9px;

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

  font-size: 0.72rem;

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

  pointer-events: none;
}


.gallery-relic__frame::before {
  content: "✦";

  left: -3px;
}


.gallery-relic__frame::after {
  content: "✦";

  right: -3px;
}


.gallery-relic__mat {
  position: relative;

  padding: 5px;

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

  background:
    var(--pearl);
}


.gallery-relic__mat::before {
  content: "";

  position: absolute;

  z-index: 4;

  inset: 2px;

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

  pointer-events: none;
}


.gallery-relic__mat img {
  position: relative;

  z-index: 2;

  display: block;

  width: 100%;

  aspect-ratio:
    16 / 9;

  object-fit: cover;
}


.gallery-relic__artwork:hover
.gallery-relic__frame {
  transform:
    translateY(-5px);

  box-shadow:
    0 22px 38px
      rgba(94, 61, 69, 0.14),

    0 7px 14px
      rgba(200, 121, 133, 0.11),

    inset
      0
      0
      0
      1px
      rgba(255, 255, 255, 0.98),

    inset
      0
      0
      0
      3px
      rgba(200, 121, 133, 0.1);
}


/* ==================================================
   PLAYLIST — CELESTIAL RECORD DISPLAY
   ================================================== */

.playlist-relic {
  position: relative;

  width:
    min(
      225px,
      82%
    );

  aspect-ratio: 1;

  isolation: isolate;
}


.playlist-relic__halo {
  position: absolute;

  inset: -20%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(246, 214, 217, 0.48),
      rgba(255, 249, 250, 0.15) 48%,
      transparent 70%
    );

  filter:
    blur(5px);

  pointer-events: none;
}


.playlist-relic__vinyl {
  position: absolute;

  top: 50%;
  right: -20%;

  width: 88%;

  aspect-ratio: 1;

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

  border-radius: 50%;

  background:
    repeating-radial-gradient(
      circle,
      rgba(200, 121, 133, 0.13) 0 1px,
      rgba(255, 249, 250, 0.88) 2px 6px
    ),
    radial-gradient(
      circle,
      #fff 0 8%,
      #e1a5ae 9% 14%,
      #f6d6d9 15% 17%,
      #fff9fa 18% 100%
    );

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

    0 0 30px
      rgba(246, 214, 217, 0.5);

  transform:
    translateY(-50%);
}


.playlist-relic__vinyl::before,
.playlist-relic__vinyl::after {
  content: "";

  position: absolute;

  inset: 15%;

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

  border-radius: 50%;
}


.playlist-relic__vinyl::after {
  inset: 30%;
}


.playlist-relic__vinyl span {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 9%;

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    var(--archive-rose);

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


.playlist-relic__sleeve {
  position: absolute;

  z-index: 3;

  inset: 0;

  padding: 6px;

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

  background:
    linear-gradient(
      135deg,
      #fff,
      #f1ced2 24%,
      #fff9fa 52%,
      #e1a5ae 78%,
      #fff
    );

  box-shadow:
    0 20px 38px
      rgba(94, 61, 69, 0.14),

    inset
      0
      0
      0
      1px
      rgba(255, 255, 255, 0.9);

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


.playlist-relic__cover {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

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

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255, 255, 255, 0.98),
      rgba(250, 229, 230, 0.9) 48%,
      rgba(241, 206, 210, 0.82)
    );
}


.playlist-relic__cover img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.gallery-relic__artwork:hover
.playlist-relic__sleeve {
  transform:
    translateY(-5px);

  box-shadow:
    0 24px 42px
      rgba(94, 61, 69, 0.16),

    inset
      0
      0
      0
      1px
      rgba(255, 255, 255, 0.95);
}


/* ==================================================
   TEMPLATE — ARCHIVED STATIONERY
   ================================================== */

.template-relic {
  position: relative;

  width:
    min(
      205px,
      78%
    );

  height: 230px;
}


.template-relic__paper {
  position: absolute;

  width: 82%;
  height: 94%;

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

  background:
    #fffdfc;

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


.template-relic__paper--back {
  left: 2%;
  top: 2%;

  transform:
    rotate(-7deg);

  background:
    rgba(241, 206, 210, 0.72);
}


.template-relic__paper--middle {
  right: 1%;
  top: 3%;

  transform:
    rotate(6deg);

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


.template-relic__paper--front {
  left: 50%;
  top: 50%;

  overflow: hidden;

  padding: 5px;

  background:
    linear-gradient(
      rgba(255, 255, 255, 0.96),
      rgba(250, 229, 230, 0.58)
    );

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

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


.template-relic__paper--front::before {
  content: "";

  position: absolute;

  z-index: 3;

  inset: 7px;

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

  pointer-events: none;
}


.template-relic__paper--front img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.template-relic__clip {
  position: absolute;

  z-index: 5;

  right: 10px;
  top: 8px;

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

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


.gallery-relic__artwork:hover
.template-relic__paper--front {
  transform:
    translate(-50%, calc(-50% - 5px));
}


/* ==================================================
   TRACKER — ARCHIVIST'S LEDGER
   ================================================== */

.tracker-relic {
  position: relative;

  width:
    min(
      225px,
      84%
    );

  height: 210px;

  padding-left: 13px;
}


.tracker-relic__binding {
  position: absolute;

  z-index: 5;

  left: 0;
  top: 10%;

  display: flex;

  height: 80%;

  flex-direction: column;

  justify-content: space-around;
}


.tracker-relic__binding span {
  width: 24px;
  height: 5px;

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

  border-radius: 999px;

  background:
    #fff;
}


.tracker-relic__page {
  position: relative;

  height: 100%;

  overflow: hidden;

  padding: 6px;

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

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

  box-shadow:
    0 16px 32px
      rgba(94, 61, 69, 0.1),

    inset
      0
      0
      0
      5px
      rgba(255, 255, 255, 0.5);

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


.tracker-relic__page::before {
  content: "";

  position: absolute;

  z-index: 3;

  inset: 8px;

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

  pointer-events: none;
}


.tracker-relic__page img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.gallery-relic__artwork:hover
.tracker-relic__page {
  transform:
    translateY(-5px);
}


/* ==================================================
   GRAPHIC — MOUNTED GALLERY PRINT
   ================================================== */

.graphic-relic {
  position: relative;

  width:
    min(
      190px,
      72%
    );

  height: 235px;

  padding: 11px;

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

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

  box-shadow:
    0 18px 35px
      rgba(94, 61, 69, 0.1),

    inset
      0
      0
      20px
      rgba(246, 214, 217, 0.25);

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


.graphic-relic__print {
  width: 100%;
  height: 100%;

  overflow: hidden;

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

  background:
    radial-gradient(
      circle at 50% 35%,
      #fff,
      #fff9fa 45%,
      #f6d6d9
    );
}


.graphic-relic__print img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.graphic-relic__mount {
  position: absolute;

  z-index: 4;

  width: 8px;
  height: 8px;

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

  background:
    #fff;

  transform:
    rotate(45deg);
}


.graphic-relic__mount--one {
  left: 6px;
  top: 6px;
}


.graphic-relic__mount--two {
  right: 6px;
  top: 6px;
}


.graphic-relic__mount--three {
  left: 6px;
  bottom: 6px;
}


.graphic-relic__mount--four {
  right: 6px;
  bottom: 6px;
}


.gallery-relic__artwork:hover
.graphic-relic {
  transform:
    translateY(-5px);
}


/* ==================================================
   FRAGMENT — CURIOSITY CASE
   ================================================== */

.fragment-relic {
  position: relative;

  width:
    min(
      215px,
      80%
    );
}


.fragment-relic__case {
  position: relative;

  display: grid;

  height: 215px;

  place-items: center;

  padding: 1.25rem;

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

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

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

    inset
      0
      0
      28px
      rgba(246, 214, 217, 0.35);

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


.fragment-relic__case::before {
  content: "";

  position: absolute;

  inset: 7px;

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

  pointer-events: none;
}


.fragment-relic__scrap {
  position: relative;

  z-index: 2;

  width: 82%;
  height: 155px;

  overflow: hidden;

  padding: 4px;

  background:
    linear-gradient(
      145deg,
      #fffdfc,
      #fae5e6
    );

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

  transform:
    rotate(-3deg);
}


.fragment-relic__scrap::after {
  content: "";

  position: absolute;

  z-index: 4;

  right: -1px;
  bottom: -1px;

  width: 24px;
  height: 24px;

  background:
    linear-gradient(
      135deg,
      rgba(225, 165, 174, 0.22) 50%,
      #fff 51%
    );

  pointer-events: none;
}


.fragment-relic__scrap img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.fragment-relic__pin {
  position: absolute;

  z-index: 5;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--cherub-rose);

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


.fragment-relic__pin--one {
  left: 18%;
  top: 16%;
}


.fragment-relic__pin--two {
  right: 17%;
  bottom: 17%;
}


.fragment-relic__label {
  display: block;

  width: fit-content;

  margin:
    0.5rem
    auto
    0;

  padding:
    0.25rem
    0.5rem;

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

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

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

  font-size: 0.3rem;
  font-weight: 700;

  letter-spacing: 0.14em;

  color:
    rgba(94, 61, 69, 0.55);
}


.gallery-relic__artwork:hover
.fragment-relic__case {
  transform:
    translateY(-5px);
}


/* ==================================================
   FALLBACK ARTIFACT PREVIEW
   Used if a preview image is unavailable.
   ================================================== */

.relic-preview-fallback {
  display: flex;

  width: 100%;
  height: 100%;

  min-height: 150px;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 0.45rem;

  padding: 1rem;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255, 255, 255, 0.98),
      rgba(250, 229, 230, 0.82)
    );

  text-align: center;
}


.relic-preview-fallback span {
  font-family:
    var(--font-display);

  font-size: 1rem;

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


.relic-preview-fallback strong {
  font-family:
    var(--font-display);

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

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


.relic-preview-fallback small {
  font-family:
    var(--font-body);

  font-size: 0.35rem;
  font-weight: 700;

  letter-spacing: 0.14em;

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


/* ==================================================
   MUSEUM PLAQUE
   ================================================== */

.gallery-relic__plaque {
  position: relative;

  width: 88%;

  min-height: 0;

  margin:
    0.7rem
    auto
    0;

  padding:
    0.6rem
    0.7rem
    0.55rem;

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

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

  box-shadow:
    0 9px 20px
      rgba(94, 61, 69, 0.055),

    inset
      0
      0
      0
      3px
      rgba(255, 255, 255, 0.45);
}


.gallery-relic__plaque::before,
.gallery-relic__plaque::after {
  content: "";

  position: absolute;

  top: 8px;

  width: 4px;
  height: 4px;

  border-radius: 50%;

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

  box-shadow:
    inset
      0
      1px
      1px
      rgba(255, 255, 255, 0.8),

    0
      1px
      2px
      rgba(94, 61, 69, 0.1);
}


.gallery-relic__plaque::before {
  left: 8px;
}


.gallery-relic__plaque::after {
  right: 8px;
}


.gallery-relic__archive {
  display: block;

  margin-bottom: 0.15rem;

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

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

  letter-spacing: 0.19em;

  color:
    rgba(94, 61, 69, 0.5);
}


.gallery-relic__number {
  display: block;

  margin-bottom: 0.12rem;

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

  font-size: 0.48rem;
  font-weight: 700;

  letter-spacing: 0.16em;

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


.gallery-relic__plaque h3 {
  margin: 0;

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

  font-size:
    clamp(
      1.25rem,
      1.7vw,
      1.7rem
    );

  font-weight: 500;

  line-height: 1;

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


.gallery-relic__plaque p {
  margin:
    0.3rem
    0
    0;

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

  font-size: 0.72rem;

  font-style: italic;

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


.gallery-relic__type {
  display: block;

  margin-top: 0.25rem;

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

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

  letter-spacing: 0.14em;

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


/* ==================================================
   VIEW RECORD
   ================================================== */

.gallery-relic__record {
  margin-top: -0.4rem;

  padding:
    0.38rem
    0.6rem;

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

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

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

  font-size: 0.44rem;
  font-weight: 700;

  letter-spacing: 0.13em;

  color:
    var(--archive-rose);

  cursor: pointer;

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


.gallery-relic__record:hover {
  background:
    rgba(246, 214, 217, 0.7);

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

  transform:
    translateY(-1px);
}


/* ==================================================
   EMPTY WING
   ================================================== */

.gallery-empty {
  display: flex;

  min-height: 300px;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding:
    3rem
    1rem;

  text-align: center;
}


.gallery-empty__mark {
  margin-bottom: 0.75rem;

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

  font-size: 1rem;

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


.gallery-empty h3 {
  margin: 0;

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

  font-size: 0.65rem;
  font-weight: 700;

  letter-spacing: 0.28em;

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


.gallery-empty p {
  max-width: 430px;

  margin:
    0.7rem
    0
    0;

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

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

  line-height: 1.5;

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


/* ==================================================
   GALLERY SIGNATURE
   ================================================== */

.gallery-signature {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 1.3rem;

  margin-top: 3.3rem;
}


.gallery-signature__line {
  width:
    min(
      140px,
      15vw
    );

  height: 1px;

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


.gallery-signature__line:last-child {
  transform:
    scaleX(-1);
}


.gallery-signature p {
  margin: 0;

  white-space: nowrap;

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

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

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


.gallery-signature i {
  margin-left: 0.25rem;

  font-style: normal;

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


/* ==================================================
   04 — UNIVERSAL RELIC RECORD OVERLAY
   ================================================== */

.relic-record {
  position: fixed;

  z-index: 500;

  inset: 0;

  display: grid;

  place-items: center;

  padding: 2rem;

  visibility: hidden;

  opacity: 0;

  pointer-events: none;

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


.relic-record.is-open {
  visibility: visible;

  opacity: 1;

  pointer-events: auto;
}


/* ==================================================
   RECORD BACKDROP
   ================================================== */

.relic-record__backdrop {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255, 249, 250, 0.36),
      transparent 42%
    ),
    rgba(94, 61, 69, 0.24);

  backdrop-filter:
    blur(13px);

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

  cursor: default;
}


/* ==================================================
   DISPLAY CASE
   ================================================== */

.relic-record__case {
  position: relative;

  z-index: 2;

  display: flex;

  width:
    min(
      1320px,
      96vw
    );

  max-height:
    min(
      790px,
      88vh
    );

  flex-direction: column;

  overflow: hidden;

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

  background:
    linear-gradient(
      135deg,
      rgba(255, 253, 252, 0.98),
      rgba(250, 229, 230, 0.97)
    );

  box-shadow:
    0 35px 90px
      rgba(94, 61, 69, 0.2),

    0 8px 25px
      rgba(200, 121, 133, 0.12),

    inset
      0
      0
      0
      5px
      rgba(255, 255, 255, 0.5);

  transform:
    translateY(22px)
    scale(0.975);

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


.relic-record.is-open
.relic-record__case {
  transform:
    translateY(0)
    scale(1);
}


.relic-record__case::before {
  content: "";

  position: absolute;

  z-index: 10;

  inset: 7px;

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

  pointer-events: none;
}


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

.relic-record__header {
  position: relative;

  z-index: 12;

  display: grid;

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

  align-items: center;

  min-height: 52px;

  padding:
    0.8rem
    1.4rem;

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

  background:
    rgba(255, 249, 250, 0.64);
}


.relic-record__accession {
  display: flex;

  align-items: center;

  gap: 0.55rem;

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

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

  letter-spacing: 0.16em;

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


.relic-record__accession i {
  font-family:
    var(--font-display);

  font-size: 0.72rem;

  font-style: normal;

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


.relic-record__classification {
  font-family:
    var(--font-body);

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

  letter-spacing: 0.18em;

  color:
    rgba(94, 61, 69, 0.55);
}


.relic-record__close {
  justify-self: end;

  display: flex;

  align-items: center;

  gap: 0.45rem;

  padding:
    0.4rem
    0.65rem;

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

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

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

  font-size: 0.43rem;
  font-weight: 700;

  letter-spacing: 0.13em;

  color:
    var(--archive-rose);

  cursor: pointer;

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


.relic-record__close span {
  font-family:
    var(--font-display);

  font-size: 0.9rem;

  line-height: 0;
}


.relic-record__close:hover {
  background:
    rgba(246, 214, 217, 0.7);

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


/* ==================================================
   RECORD BODY
   ================================================== */

.relic-record__body {
  display: grid;

  grid-template-columns:
    minmax(0, 1.22fr)
    minmax(360px, 0.78fr);

  min-height: 0;

  max-height:
    calc(
      88vh - 116px
    );

  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(200, 121, 133, 0.25)
    transparent;
}


.relic-record__body::-webkit-scrollbar {
  width: 4px;
}


.relic-record__body::-webkit-scrollbar-track {
  background:
    transparent;
}


.relic-record__body::-webkit-scrollbar-thumb {
  border-radius: 999px;

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


/* ==================================================
   LEFT — ADAPTIVE ARTIFACT DISPLAY
   ================================================== */

.relic-record__artifact {
  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    1.65rem
    2.5rem;

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

  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(255, 255, 255, 0.94),
      rgba(255, 249, 250, 0.52) 45%,
      transparent 72%
    );
}


.relic-record__artifact::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 72%;

  aspect-ratio: 1;

  border-radius: 50%;

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

  filter:
    blur(55px);

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

  pointer-events: none;
}


.relic-record__artifact-label {
  position: relative;

  z-index: 2;

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 0.75rem;
}


.relic-record__artifact-label span {
  font-family:
    var(--font-body);

  font-size: 0.46rem;
  font-weight: 700;

  letter-spacing: 0.17em;

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


.relic-record__artifact-label i {
  font-family:
    var(--font-display);

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

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


/* JS renders the appropriate large artifact here */

.relic-record__artifact-display {
  position: relative;

  z-index: 2;

  display: grid;

  min-height: 360px;

  place-items: center;
}


/* Moodboard record */

.relic-record__artifact-display
.gallery-relic__frame {
  width:
    min(
      100%,
      760px
    );
}


/* Playlist record */

.relic-record__artifact-display
.playlist-relic {
  width:
    min(
      390px,
      70%
    );
}


/* Template record */

.relic-record__artifact-display
.template-relic {
  width:
    min(
      330px,
      65%
    );

  height: 380px;
}


/* Tracker record */

.relic-record__artifact-display
.tracker-relic {
  width:
    min(
      440px,
      78%
    );

  height: 340px;
}


/* Graphic record */

.relic-record__artifact-display
.graphic-relic {
  width:
    min(
      320px,
      60%
    );

  height: 410px;
}


/* Fragment record */

.relic-record__artifact-display
.fragment-relic {
  width:
    min(
      350px,
      68%
    );
}


.relic-record__artifact-display
.fragment-relic__case {
  height: 350px;
}


.relic-record__artifact-display
.fragment-relic__scrap {
  height: 260px;
}


.relic-record__artifact-footer {
  position: relative;

  z-index: 2;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0.75rem;

  margin-top: 0.75rem;

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

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

  letter-spacing: 0.15em;

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


.relic-record__artifact-footer
span:nth-child(2) {
  font-family:
    var(--font-display);

  font-size: 0.7rem;

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


/* ==================================================
   RIGHT — DOSSIER
   ================================================== */

.relic-record__dossier {
  position: relative;

  padding:
    1.65rem
    2rem
    1.1rem;

  background:
    linear-gradient(
      180deg,
      rgba(255, 249, 250, 0.56),
      rgba(250, 229, 230, 0.44)
    );
}


.relic-record__dossier::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.25;

  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 31px,
      rgba(200, 121, 133, 0.07) 32px
    );

  pointer-events: none;
}


.relic-record__dossier > * {
  position: relative;

  z-index: 2;
}


.relic-record__eyebrow {
  margin-bottom: 1.25rem;

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

  font-size: 0.47rem;
  font-weight: 700;

  letter-spacing: 0.19em;

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


.relic-record__type {
  display: block;

  margin-bottom: 0.3rem;

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

  font-size: 0.45rem;
  font-weight: 700;

  letter-spacing: 0.16em;

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


.relic-record__title h2 {
  margin: 0;

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

  font-size:
    clamp(
      2.2rem,
      3.1vw,
      3.75rem
    );

  font-weight: 500;

  line-height: 0.95;

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


.relic-record__title p {
  margin:
    0.45rem
    0
    0;

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

  font-size: 0.95rem;

  font-style: italic;

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


/* ==================================================
   ORNAMENTAL RULE
   ================================================== */

.relic-record__rule {
  display: flex;

  align-items: center;

  gap: 0.6rem;

  margin:
    1.2rem
    0;
}


.relic-record__rule::before,
.relic-record__rule::after {
  content: "";

  flex: 1;

  height: 1px;

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


.relic-record__rule::after {
  transform:
    scaleX(-1);
}


.relic-record__rule span {
  font-family:
    var(--font-display);

  font-size: 0.75rem;

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


/* ==================================================
   DOSSIER ENTRIES
   ================================================== */

.relic-record__entry {
  padding:
    0.9rem
    0;

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


.relic-record__entry[hidden] {
  display: none;
}


.relic-record__entry-label {
  display: flex;

  align-items: center;

  gap: 0.6rem;

  margin-bottom: 0.55rem;

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

  font-size: 0.46rem;
  font-weight: 700;

  letter-spacing: 0.16em;

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


.relic-record__entry-label span {
  display: grid;

  place-items: center;

  width: 21px;
  height: 21px;

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

  border-radius: 50%;

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

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

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


.relic-record__entry-content {
  font-family:
    var(--font-display);

  font-size: 0.9rem;

  line-height: 1.55;

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


.relic-record__entry-content p {
  margin: 0;
}


.relic-record__entry-content p + p {
  margin-top: 0.55rem;
}


.relic-record__entry-content em {
  color:
    var(--ink-rose);
}


/* ==================================================
   TAGS
   ================================================== */

.relic-record__tags {
  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem;
}


.relic-record__tags span {
  padding:
    0.36rem
    0.55rem;

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

  border-radius: 999px;

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

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

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

  letter-spacing: 0.07em;

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


/* ==================================================
   EXTERNAL RELIC ACTION
   ================================================== */

.relic-record__action {
  margin-top: 1rem;
}


.relic-record__action[hidden] {
  display: none;
}


.relic-record__action a {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    0.65rem
    0.85rem;

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

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

  box-shadow:
    0 6px 18px
    rgba(200, 121, 133, 0.07);

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

  font-size: 0.44rem;
  font-weight: 700;

  letter-spacing: 0.13em;

  text-decoration: none;

  color:
    var(--archive-rose);

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


.relic-record__action a:hover {
  background:
    rgba(246, 214, 217, 0.7);

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

  transform:
    translateY(-1px);
}


/* ==================================================
   DOSSIER FOOTER
   ================================================== */

.relic-record__footer {
  display: grid;

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

  gap: 0.65rem;

  margin-top: 1.2rem;
}


.relic-record__footer div {
  padding:
    0.65rem
    0.55rem;

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

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

  text-align: center;
}


.relic-record__footer span {
  display: block;

  margin-bottom: 0.22rem;

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

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

  letter-spacing: 0.13em;

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


.relic-record__footer strong {
  display: block;

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

  font-size: 0.43rem;
  font-weight: 700;

  letter-spacing: 0.1em;

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


/* ==================================================
   BOTTOM RECORD NAVIGATION
   ================================================== */

.relic-record__navigation {
  position: relative;

  z-index: 12;

  display: grid;

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

  align-items: center;

  min-height: 50px;

  padding:
    0.7rem
    1.4rem;

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

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


.relic-record__nav {
  width: fit-content;

  padding:
    0.42rem
    0;

  border: 0;

  background:
    transparent;

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

  font-size: 0.44rem;
  font-weight: 700;

  letter-spacing: 0.13em;

  color:
    var(--archive-rose);

  cursor: pointer;
}


.relic-record__nav--next {
  justify-self: end;
}


.relic-record__nav:disabled {
  opacity: 0.25;

  cursor: default;
}


.relic-record__navigation-mark {
  font-family:
    var(--font-display);

  font-size: 0.8rem;

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


/* ==================================================
   05 — RESPONSIVE: LARGE TABLET
   ================================================== */

@media (max-width: 1050px) {

  .gallery-index {
    grid-template-columns:
      1fr
      auto;
  }


  .gallery-filters {
    grid-column:
      1 / -1;

    grid-row: 2;

    justify-content:
      flex-start;

    overflow-x: auto;

    padding-top: 0.8rem;

    scrollbar-width: none;
  }


  .gallery-filters::-webkit-scrollbar {
    display: none;
  }


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


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


  .gallery-wing--templates
  .gallery-exhibition,
  .gallery-wing--trackers
  .gallery-exhibition,
  .gallery-wing--graphics
  .gallery-exhibition,
  .gallery-wing--playlists
  .gallery-exhibition,
  .gallery-wing--fragments
  .gallery-exhibition {
    grid-template-columns:
      repeat(
        3,
        minmax(190px, 1fr)
      );
  }

}


/* ==================================================
   06 — RESPONSIVE: TABLET
   ================================================== */

@media (max-width: 900px) {

  .relic-constellation {
    padding-top: 8rem;
  }


  .relic-constellation__scene {
    height: 690px;
  }


  .constellation-path--outer {
    width: 620px;
    height: 470px;
  }


  .constellation-path--middle {
    width: 520px;
    height: 540px;
  }


  .constellation-path--inner {
    width: 390px;
    height: 350px;
  }


  .relic-constellation__artifact {
    top: 48%;
  }


  .constellation-category--moodboards {
    left: 3%;
    top: 10%;
  }


  .constellation-category--templates {
    right: 3%;
    top: 10%;
  }


  .constellation-category--trackers {
    left: 1%;
    top: 45%;
  }


  .constellation-category--graphics {
    right: 1%;
    top: 45%;
  }


  .constellation-category--fragments {
    left: 5%;
    bottom: 8%;
  }


  .constellation-category--other {
    right: 4%;
    bottom: 8%;
  }


  /* Record */

  .relic-record {
    padding: 1rem;
  }


  .relic-record__case {
    width:
      min(
        720px,
        96vw
      );

    max-height: 94vh;

    overflow-y: auto;
  }


  .relic-record__header {
    grid-template-columns:
      1fr
      auto;
  }


  .relic-record__classification {
    display: none;
  }


  .relic-record__body {
    display: block;

    max-height: none;

    overflow: visible;
  }


  .relic-record__artifact {
    padding: 2rem;

    border-right: 0;

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


  .relic-record__artifact-display {
    min-height: 320px;
  }


  .relic-record__dossier {
    padding: 2rem;
  }

}


/* ==================================================
   07 — RESPONSIVE: SMALL TABLET
   ================================================== */

@media (max-width: 760px) {

  .heavenly-gallery {
    padding-top: 2.7rem;
  }


  .heavenly-gallery__inner {
    width:
      min(
        calc(100% - 2rem),
        680px
      );
  }


  .gallery-wall__ornament {
    display: none;
  }


  .gallery-index {
    gap: 1rem;
  }


  .gallery-index__identity {
    font-size: 0.47rem;
  }


  .gallery-index__count span {
    display: none;
  }


  .gallery-wing {
    padding-top: 3.4rem;
  }


  .gallery-wing--moodboards
  .gallery-exhibition,
  .gallery-wing--templates
  .gallery-exhibition,
  .gallery-wing--trackers
  .gallery-exhibition,
  .gallery-wing--graphics
  .gallery-exhibition,
  .gallery-wing--playlists
  .gallery-exhibition,
  .gallery-wing--fragments
  .gallery-exhibition {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* ==================================================
   08 — RESPONSIVE: CONSTELLATION MOBILE
   ================================================== */

@media (max-width: 650px) {

  .relic-constellation {
    width:
      min(
        100%,
        calc(100% - 1.5rem)
      );

    padding-top: 7rem;
  }


  .relic-constellation::before,
  .relic-constellation::after {
    display: none;
  }


  .relic-constellation__header {
    max-width: 310px;

    flex-wrap: wrap;

    gap: 0.4rem;

    line-height: 1.7;
  }


  .relic-constellation__header::before,
  .relic-constellation__header::after {
    display: none;
  }


  .relic-constellation__scene {
    display: flex;

    height: auto;

    flex-direction: column;

    align-items: center;

    gap: 0.65rem;

    padding-top: 1.25rem;
  }


  .relic-constellation__artifact {
    position: relative;

    left: auto;
    top: auto;

    order: 1;

    width: 360px;

    min-height: 415px;

    transform: none;
  }


  .constellation-path,
  .constellation-star {
    display: none;
  }


  .constellation-category {
    position: relative;

    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    order: 2;

    width:
      min(
        310px,
        100%
      );

    padding:
      0.65rem
      0.8rem;

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

    border-radius: 0;
  }


  .constellation-category--moodboards,
  .constellation-category--trackers,
  .constellation-category--fragments {
    flex-direction: row;

    text-align: left;
  }


  .constellation-category:hover {
    background: transparent;

    box-shadow: none;
  }


  .relic-constellation__enter {
    margin-top: 1.4rem;
  }

}


/* ==================================================
   09 — RESPONSIVE: GALLERY MOBILE
   ================================================== */

@media (max-width: 620px) {

  .gallery-wing--moodboards
  .gallery-exhibition,
  .gallery-wing--templates
  .gallery-exhibition,
  .gallery-wing--trackers
  .gallery-exhibition,
  .gallery-wing--graphics
  .gallery-exhibition,
  .gallery-wing--playlists
  .gallery-exhibition,
  .gallery-wing--fragments
  .gallery-exhibition {
    display: block;
  }


  .gallery-relic {
    width:
      min(
        100%,
        390px
      );

    margin:
      0
      auto
      4.5rem;
  }


  .gallery-relic:last-child {
    margin-bottom: 0;
  }

}


/* ==================================================
   10 — RESPONSIVE: SMALL MOBILE
   ================================================== */

@media (max-width: 560px) {

  .relic-record {
    padding: 0;
  }


  .relic-record__case {
    width: 100%;

    min-height: 100%;

    max-height: 100vh;

    border: 0;
  }


  .relic-record__header {
    position: sticky;

    z-index: 30;

    top: 0;

    padding:
      0.75rem
      1rem;
  }


  .relic-record__accession
  span:last-child {
    display: none;
  }


  .relic-record__close {
    font-size: 0;
  }


  .relic-record__close span {
    font-size: 1.2rem;
  }


  .relic-record__artifact {
    padding:
      1.5rem
      1rem;
  }


  .relic-record__artifact-label {
    margin-bottom: 0.55rem;
  }


  .relic-record__artifact-display {
    min-height: 280px;
  }


  .relic-record__artifact-display
  .playlist-relic {
    width: min(270px, 74%);
  }


  .relic-record__artifact-display
  .template-relic {
    width: min(230px, 70%);
    height: 280px;
  }


  .relic-record__artifact-display
  .tracker-relic {
    width: min(310px, 88%);
    height: 250px;
  }


  .relic-record__artifact-display
  .graphic-relic {
    width: min(225px, 65%);
    height: 300px;
  }


  .relic-record__artifact-display
  .fragment-relic {
    width: min(260px, 76%);
  }


  .relic-record__artifact-display
  .fragment-relic__case {
    height: 270px;
  }


  .relic-record__artifact-display
  .fragment-relic__scrap {
    height: 195px;
  }


  .relic-record__dossier {
    padding:
      1.6rem
      1.25rem;
  }


  .relic-record__title h2 {
    font-size: 2.6rem;
  }


  .relic-record__footer {
    grid-template-columns: 1fr;
  }


  .relic-record__navigation {
    position: sticky;

    bottom: 0;
  }

}


/* ==================================================
   11 — RESPONSIVE: NARROW MOBILE
   ================================================== */

@media (max-width: 520px) {

  .heavenly-gallery {
    padding:
      2.4rem
      0
      3.5rem;
  }


  .gallery-index {
    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    padding-inline: 0;
  }


  .gallery-index__identity
  span:last-child {
    display: none;
  }


  .gallery-filters {
    order: 3;

    width: 100%;
  }


  .gallery-relic__light {
    width: 55%;
  }


  .gallery-relic__plaque {
    width: 84%;
  }


  .gallery-wing__title {
    letter-spacing: 0.27em;
  }


  .gallery-signature {
    margin-top: 0;
  }


  .gallery-signature__line {
    width: 45px;
  }


  .gallery-signature p {
    font-size: 0.78rem;
  }

}


/* ==================================================
   12 — REDUCED MOTION
   ================================================== */

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

  .reliquary__artifact,
  .reliquary__artifact-inner,
  .reliquary__face::after,
  .relic-constellation__artifact::before,
  .reliquary__glow::after,
  .constellation-star,
  .relic-constellation__enter strong,
  .gallery-loading span {
    animation: none;
  }


  .gallery-relic__frame,
  .gallery-relic__record,
  .gallery-filter,
  .playlist-relic__sleeve,
  .template-relic__paper--front,
  .tracker-relic__page,
  .graphic-relic,
  .fragment-relic__case,
  .relic-record,
  .relic-record__case {
    transition: none;
  }

}


/* ✦ END — CURATED RELICS ✦ */
/* ==================================================
   09 — FINAL ATMOSPHERE PASS
   ================================================== */

.relic-constellation,
.heavenly-gallery {
  isolation: isolate;
}

.relic-atmosphere {
  position: absolute;
  z-index: -10;
  pointer-events: none;
}

.relic-atmosphere--hero {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: url("../assets/images/shelf-arches.jpg") center 42% / cover no-repeat;
  opacity: 0.20;
}

.relic-constellation > *:not(.relic-atmosphere) {
  position: relative;
}

.heavenly-gallery {
  background:
    linear-gradient(180deg, rgba(255,249,250,.90), rgba(250,229,230,.76) 52%, rgba(255,249,250,.91));
}

.relic-atmosphere--gallery {
  z-index: 0;
  inset: 0;
  background: url("../assets/tbr/tbr-vault-bg.png") center top / 100% auto repeat-y;
  opacity: 0.18;
}

.heavenly-gallery::before {
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.54) 0%, rgba(255,249,250,.16) 42%, transparent 72%);
}

.heavenly-gallery::after {
  z-index: 1;
}

.heavenly-gallery__inner {
  z-index: 2;
}

@media (max-width: 650px) {
  .relic-atmosphere--hero {
    background-position: center top;
    opacity: 0.16;
  }

  .relic-atmosphere--gallery {
    background-size: auto 760px;
    opacity: 0.15;
  }
}

/* ==================================================
   10 — GALLERY BACKGROUND VISIBILITY FIX
   Keep the gallery itself visibly atmospheric instead
   of leaving the artwork buried behind the pearl wash.
   ================================================== */

.heavenly-gallery {
  background-color: #fff7f8;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 249, 250, 0.52) 0%,
      rgba(250, 229, 230, 0.38) 52%,
      rgba(255, 249, 250, 0.56) 100%
    ),
    url("../assets/tbr/tbr-vault-bg.png");
  background-size:
    100% 100%,
    100% auto;
  background-position:
    center top,
    center top;
  background-repeat:
    no-repeat,
    repeat-y;
}

/* The image now lives on the gallery itself, so this
   helper layer is intentionally neutralized. */
.relic-atmosphere--gallery {
  display: none;
}

.heavenly-gallery::before {
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 249, 250, 0.10) 40%,
      transparent 70%
    );
}

@media (max-width: 650px) {
  .heavenly-gallery {
    background-size:
      100% 100%,
      auto 760px;
  }
}

/* ==================================================
   11 — GALLERY ENTRANCE SPACING
   Give the gallery background room to establish itself
   before the collection index begins.
   ================================================== */

.heavenly-gallery {
  padding-top: 5rem;
}

@media (max-width: 760px) {
  .heavenly-gallery {
    padding-top: 3.75rem;
  }
}

@media (max-width: 520px) {
  .heavenly-gallery {
    padding-top: 3.25rem;
  }
}


/* ==================================================
   12 — HERO → GALLERY CELESTIAL BEAM
   Same transition language used on Wrap-Ups: this is
   a luminous divider OVER the seam, not an image fade.
   ================================================== */

.relic-section-beam {
  position: relative;
  z-index: 6;
  height: 0;
  pointer-events: none;
}

.relic-section-beam::before {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  top: -56px;
  height: 112px;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 244, 247, 0.90) 24%,
      rgba(246, 214, 217, 0.42) 50%,
      rgba(246, 214, 217, 0.08) 70%,
      transparent 82%
    );
  filter: blur(10px);
  opacity: 0.92;
}


/* ==================================================
   13 — FINAL GALLERY ENTRANCE SPACING
   Pull the collection index toward the celestial beam
   and reduce dead space before each relic wing heading.
   ================================================== */

.heavenly-gallery {
  padding-top: 1.9rem;
}

.gallery-wing {
  padding-top: 1rem;
}

@media (max-width: 760px) {
  .heavenly-gallery {
    padding-top: 1.65rem;
  }

  .gallery-wing {
    padding-top: 1.35rem;
  }
}

@media (max-width: 520px) {
  .heavenly-gallery {
    padding-top: 1.4rem;
  }
}