/* ==========================================================
   THE ANGEL ARCHIVE — READING CHALLENGES
   ========================================================== */

.challenges-page {
  --challenge-rose:
    #c87985;

  --challenge-lavender:
    #9c83ad;

  --challenge-sage:
    #819986;

  --challenge-gold:
    #b9955d;

  --challenge-ink:
    #6d4e54;

  --challenge-paper:
    #fff9fa;
}


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

.challenge-hero {
  position: relative;

  min-height:
    500;

  display: grid;

  place-items: center;

  overflow: hidden;

  padding:
    145px
    24px
    90px;

  background:
    linear-gradient(
      rgba(255,249,250,.76),
      rgba(255,243,246,.84)
    ),
    url("../assets/images/shelf-arches.jpg")
    center / cover
    no-repeat;

  text-align: center;
}


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

  position: absolute;

  width: 520px;
  height: 520px;

  top: 70px;
  left: 50%;

  transform:
    translateX(-50%);

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

  border-radius:
    50%;
}


.challenge-hero::after {
  content: "";

  position: absolute;

  width: 650px;
  height: 420px;

  top: 100px;
  left: 50%;

  transform:
    translateX(-50%)
    rotate(-10deg);

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

  border-radius:
    50%;
}


.challenge-hero__inner {
  position: relative;

  z-index: 2;

  width:
    min(
      760px,
      100%
    );
}


.challenge-hero__eyebrow {
  margin:
    0
    0
    .7rem;

  color:
    var(--archive-rose);

  font:
    600
    .65rem
    var(--font-body);

  letter-spacing:
    .22em;

  text-transform:
    uppercase;
}


.challenge-hero h1 {
  margin: 0;

  color:
    var(--ink-rose);

  font:
    400
    clamp(
      4.5rem,
      8vw,
      7rem
    )
    / .76
    var(--font-display);
}


.challenge-hero h1 span {
  display: block;
  width: fit-content;

  margin-top: 8px;
  margin-left: auto;
  margin-right: auto;

  color: var(--archive-rose);

  font-family: "Allura", cursive;
  font-size: 1.03em;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
}


.challenge-hero__copy {
  width: min(590px, 100%);

  margin: 1.7rem auto 0;

  color: var(--dusty-ink);

  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.7vw, 1.32rem);
  font-style: italic;
  line-height: 1.62;
}


.challenge-hero__button {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    .65rem;

  margin-top:
    1.6rem;

  padding:
    .8rem
    1.25rem;

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

  border-radius:
    999px;

  background:
    rgba(255,255,255,.52);

  color:
    var(--dusty-ink);

  font:
    600
    .62rem
    var(--font-body);

  letter-spacing:
    .14em;

  text-decoration:
    none;

  text-transform:
    uppercase;

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


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

  background:
    rgba(255,255,255,.84);

  box-shadow:
    0
    10px
    26px
    rgba(94,61,69,.08);
}


.challenge-hero__button span {
  color:
    var(--archive-rose);

  font-size:
    .9rem;
}


.challenge-hero__star {
  position: absolute;

  z-index: 1;

  color:
    rgba(200,121,133,.42);

  animation:
    challengeFloat
    5s
    ease-in-out
    infinite;
}


.challenge-hero__star--one {
  top:
    24%;

  left:
    10%;
}


.challenge-hero__star--two {
  top:
    31%;

  right:
    11%;

  animation-delay:
    -1.8s;
}


.challenge-hero__star--three {
  right:
    21%;

  bottom:
    22%;

  animation-delay:
    -3s;
}


.challenge-hero__ornament {
  position: absolute;

  z-index: 2;

  bottom:
    34px;

  left:
    50%;

  display: flex;

  width:
    min(
      420px,
      72%
    );

  align-items:
    center;

  gap:
    .8rem;

  transform:
    translateX(-50%);

  color:
    rgba(200,121,133,.52);
}


.challenge-hero__ornament i {
  height:
    1px;

  flex:
    1;

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


.challenge-hero__ornament i:nth-of-type(2) {
  background:
    linear-gradient(
      90deg,
      rgba(200,121,133,.3),
      transparent
    );
}


.challenge-hero__ornament b {
  font:
    400
    .75rem
    var(--font-display);
}

/* ---------- Archive Cupids ---------- */

.challenge-hero__cupids {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.challenge-hero__cupid {
  position: absolute;
  display: block;

  width: clamp(190px, 17vw, 260px);
  height: auto;

  opacity: 0.88;

  filter:
    drop-shadow(0 14px 20px rgba(94, 61, 69, 0.06));

  animation:
    challengeCupidFloat 7s ease-in-out infinite;
}


/* left — mirrored so she faces inward */

.challenge-hero__cupid--left {
  left: calc(50% - 550px);
  bottom: 125px;

  transform:
    scaleX(-1)
    rotate(4deg);
}


/* right — original direction faces inward */

.challenge-hero__cupid--right {
  right: calc(50% - 550px);
  bottom: 125px;

  transform:
    rotate(4deg);

  animation-delay: -3.5s;
}


@keyframes challengeCupidFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -7px;
  }
}

/* ==========================================================
   YEAR CONTROL BAR
   ========================================================== */

.challenge-controls {
  position: relative;

  z-index: 8;

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

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

  background:
    rgba(255,246,248,.9);

  backdrop-filter:
    blur(18px);
}


.challenge-controls__inner {
  width:
    min(
      1330px,
      calc(100% - 48px)
    );

  min-height:
    66px;

  margin:
    0
    auto;

  display: grid;

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

  align-items:
    center;

  gap:
    24px;
}


.challenge-controls__identity {
  justify-self:
    start;

  display:
    flex;

  align-items:
    center;

  gap:
    .55rem;

  color:
    rgba(109,78,84,.72);

  font:
    600
    .5rem
    var(--font-body);

  letter-spacing:
    .16em;
}


.challenge-controls__identity i {
  color:
    var(--archive-rose);

  font-style:
    normal;
}


.challenge-years {
  justify-self:
    center;

  display:
    flex;

  align-items:
    center;

  gap:
    .35rem;
}


.challenge-years button {
  appearance:
    none;

  padding:
    .55rem
    .85rem;

  border:
    1px solid
    transparent;

  border-radius:
    999px;

  background:
    transparent;

  color:
    rgba(109,78,84,.68);

  font:
    600
    .54rem
    var(--font-body);

  letter-spacing:
    .1em;

  text-transform:
    uppercase;

  cursor:
    pointer;

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


.challenge-years button:hover {
  color:
    var(--archive-rose);
}


.challenge-years button.is-active {
  border-color:
    rgba(200,121,133,.14);

  background:
    rgba(255,255,255,.76);

  color:
    var(--archive-rose);

  box-shadow:
    0
    5px
    16px
    rgba(94,61,69,.04);
}


.challenge-controls__count {
  justify-self:
    end;

  display:
    flex;

  align-items:
    baseline;

  gap:
    .55rem;

  color:
    rgba(109,78,84,.62);
}


.challenge-controls__count strong {
  color:
    var(--archive-rose);

  font:
    italic
    1.05rem
    var(--font-display);
}


.challenge-controls__count span {
  font:
    600
    .48rem
    var(--font-body);

  letter-spacing:
    .14em;
}


/* ==========================================================
   CHALLENGE VAULT
   ========================================================== */

.challenge-vault {
  position: relative;

  padding:
    5rem
    0
    8rem;

  background:
    linear-gradient(
      rgba(255,249,250,.84),
      rgba(255,249,250,.91)
    ),
    url("../assets/images/shelf-ethereal.jpg")
    center top / 100% auto
    repeat-y;
}


.challenge-vault::before {
  content: "";

  position: absolute;

  width:
    620px;

  height:
    620px;

  top:
    70px;

  left:
    50%;

  transform:
    translateX(-50%);

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

  border-radius:
    50%;

  pointer-events:
    none;
}


.challenge-vault__star {
  position:
    absolute;

  color:
    rgba(200,121,133,.32);

  pointer-events:
    none;

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


.challenge-vault__star--one {
  top:
    180px;

  left:
    8%;
}


.challenge-vault__star--two {
  top:
    330px;

  right:
    8%;

  animation-delay:
    -2.5s;
}


/* ==========================================================
   VAULT INTRO
   ========================================================== */

.challenge-vault__intro {
  position:
    relative;

  z-index:
    2;

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

  margin:
    0
    auto
    4.5rem;

  text-align:
    center;
}


.challenge-vault__chapter {
  display:
    flex;

  width:
    min(
      330px,
      80%
    );

  align-items:
    center;

  gap:
    .85rem;

  margin:
    0
    auto
    1.25rem;

  color:
    rgba(200,121,133,.55);
}


.challenge-vault__chapter span {
  height:
    1px;

  flex:
    1;

  background:
    rgba(200,121,133,.2);
}


.challenge-vault__chapter i {
  font-style:
    normal;
}


.challenge-vault__intro > p {
  margin:
    0
    0
    .65rem;

  color:
    var(--archive-rose);

  font:
    600
    .6rem
    var(--font-body);

  letter-spacing:
    .2em;

  text-transform:
    uppercase;
}


.challenge-vault__intro h2 {
  margin: 0;

  color:
    var(--dusty-ink);

  font:
    400
    clamp(
      3rem,
      5vw,
      4.5rem
    )
    / .95
    var(--font-display);
}


.challenge-vault__intro > span {
  display:
    block;

  width:
    min(
      590px,
      100%
    );

  margin:
    1rem
    auto
    0;

  color:
    rgba(109,78,84,.64);

  font:
    italic
    1rem
    / 1.55
    var(--font-display);
}


.challenge-vault__ornament {
  display:
    flex;

  width:
    180px;

  align-items:
    center;

  gap:
    .6rem;

  margin:
    1.4rem
    auto
    0;

  color:
    rgba(200,121,133,.46);
}


.challenge-vault__ornament i {
  height:
    1px;

  flex:
    1;

  background:
    rgba(200,121,133,.22);
}


.challenge-vault__ornament b {
  font:
    400
    .55rem
    var(--font-display);
}


/* ==========================================================
   CHALLENGE LIST
   ========================================================== */

.challenge-list {
  position:
    relative;

  z-index:
    3;

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

  margin:
    0
    auto;

  display:
    block;
}


/* ==========================================================
   CELESTIAL TRIAL
   ========================================================== */

.celestial-trial {
  --accent:
    var(--challenge-rose);

  --accent-soft:
    rgba(200,121,133,.09);

  position:
    relative;

  display:
    block;

  width:
    100%;

  margin:
    0
    0
    6.5rem;

  padding:
    0;
}


.celestial-trial:last-child {
  margin-bottom:
    0;
}


.celestial-trial.accent-rose {
  --accent:
    var(--challenge-rose);

  --accent-soft:
    rgba(200,121,133,.09);
}


.celestial-trial.accent-lavender {
  --accent:
    var(--challenge-lavender);

  --accent-soft:
    rgba(156,131,173,.09);
}


.celestial-trial.accent-sage {
  --accent:
    var(--challenge-sage);

  --accent-soft:
    rgba(129,153,134,.09);
}


.celestial-trial.accent-gold {
  --accent:
    var(--challenge-gold);

  --accent-soft:
    rgba(185,149,93,.09);
}


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

.celestial-trial__heading {
  position:
    relative;

  display:
    block;

  width:
    min(
      1050px,
      calc(100% - 72px)
    );

  min-height:
    112px;

  margin:
    0
    auto
    1.2rem;

  padding:
    0
    125px
    0
    0;
}


.celestial-trial__identity {
  display:
    block;

  max-width:
    700px;
}


.celestial-trial__code {
  margin:
    0
    0
    .45rem;

  color:
    var(--accent);

  font:
    600
    .52rem
    / 1.2
    var(--font-body);

  letter-spacing:
    .2em;

  text-transform:
    uppercase;
}


.celestial-trial__title {
  margin: 0;

  color:
    var(--dusty-ink);

  font:
    400
    clamp(
      2.8rem,
      4.6vw,
      3.9rem
    )
    / .95
    var(--font-display);

  letter-spacing:
    -.025em;
}


.celestial-trial__description {
  width:
    min(
      560px,
      100%
    );

  margin:
    .65rem
    0
    0;

  color:
    rgba(109,78,84,.62);

  font:
    italic
    .96rem
    / 1.5
    var(--font-display);
}


/* ==========================================================
   PROGRESS SEAL
   ========================================================== */

.celestial-trial__progress {
  position:
    absolute;

  top:
    2px;

  right:
    0;

  display:
    flex;

  width:
    94px;

  height:
    94px;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 27%,
      transparent
    );

  border-radius:
    50%;

  background:
    rgba(255,249,250,.66);

  box-shadow:
    inset
    0
    0
    0
    6px
    rgba(255,255,255,.34);

  text-align:
    center;
}


.celestial-trial__progress-star {
  position:
    absolute;

  top:
    -6px;

  left:
    50%;

  transform:
    translateX(-50%);

  padding:
    0
    .35rem;

  background:
    #fff9fa;

  color:
    var(--accent);

  font-size:
    .45rem;
}


.celestial-trial__progress strong {
  display:
    block;

  color:
    var(--accent);

  font:
    500
    1.25rem
    / 1
    var(--font-display);
}


.celestial-trial__progress strong i {
  opacity:
    .4;

  font-style:
    normal;
}


.celestial-trial__progress small {
  display:
    block;

  margin-top:
    .3rem;

  color:
    rgba(109,78,84,.5);

  font:
    600
    .38rem
    / 1.15
    var(--font-body);

  letter-spacing:
    .1em;

  text-transform:
    uppercase;
}


/* ==========================================================
   TRIAL DIVIDER
   ========================================================== */

.celestial-trial__divider {
  position:
    relative;

  width:
    min(
      1050px,
      calc(100% - 72px)
    );

  height:
    18px;

  margin:
    0
    auto
    1rem;
}


.celestial-trial__divider::before {
  content: "";

  position:
    absolute;

  top:
    50%;

  left:
    0;

  right:
    0;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(
        in srgb,
        var(--accent) 20%,
        transparent
      )
      15%,
      color-mix(
        in srgb,
        var(--accent) 20%,
        transparent
      )
      85%,
      transparent
    );
}


.celestial-trial__divider span {
  position:
    absolute;

  top:
    50%;

  left:
    0;

  width:
    var(--challenge-progress);

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--accent)
    );
}


.celestial-trial__divider i {
  position:
    absolute;

  top:
    50%;

  left:
    var(--challenge-progress);

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

  padding:
    0
    .4rem;

  background:
    #fff9fa;

  color:
    var(--accent);

  font:
    400
    .7rem
    var(--font-display);
}


/* ==========================================================
   PEARL SHELF
   ========================================================== */

.challenge-rail-wrap {
  position:
    relative;

  width:
    100%;

  padding:
    .9rem
    0
    .5rem;

  border-top:
    1px solid
    rgba(255,255,255,.8);

  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 12%,
      transparent
    );

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.44) 7%,
      rgba(255,255,255,.64) 50%,
      rgba(255,255,255,.44) 93%,
      transparent
    );
}


/* ==========================================================
   HORIZONTAL RAIL
   ========================================================== */

.challenge-rail {
  display:
    flex;

  gap:
    1.25rem;

  overflow-x:
    scroll;

  overflow-y:
    hidden;

  padding:
    .5rem
    3.3rem
    .85rem;

  scroll-behavior:
    smooth;

  scroll-snap-type:
    x proximity;

  scrollbar-width:
    auto;

  scrollbar-color:
    color-mix(
      in srgb,
      var(--accent) 68%,
      white
    )
    rgba(248,220,225,.22);
}


.challenge-rail::-webkit-scrollbar {
  height:
    8px;
}


.challenge-rail::-webkit-scrollbar-track {
  margin-inline:
    3.3rem;

  border-radius:
    999px;

  background:
    rgba(248,220,225,.22);
}


.challenge-rail::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--accent) 45%,
        white
      ),
      var(--accent),
      color-mix(
        in srgb,
        var(--accent) 45%,
        white
      )
    );
}


.challenge-rail::-webkit-scrollbar-thumb:hover {
  background:
    var(--accent);
}


/* ==========================================================
   RAIL ARROWS
   ========================================================== */

.challenge-rail__arrow {
  appearance:
    none;

  position:
    absolute;

  z-index:
    8;

  top:
    45%;

  display:
    grid;

  width:
    38px;

  height:
    38px;

  place-items:
    center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 28%,
      transparent
    );

  border-radius:
    50%;

  background:
    rgba(255,249,250,.95);

  color:
    var(--accent);

  box-shadow:
    0
    8px
    24px
    rgba(94,61,69,.08);

  font:
    400
    1.25rem
    var(--font-display);

  cursor:
    pointer;
}


.challenge-rail__arrow--left {
  left:
    .65rem;
}


.challenge-rail__arrow--right {
  right:
    .65rem;
}


/* ==========================================================
   SLOTS
   ========================================================== */

.challenge-slot {
  position:
    relative;

  flex:
    0
    0
    148px;

  scroll-snap-align:
    start;
}


.challenge-slot__cover {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    2 / 3;

  border-radius:
    12px;

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


.challenge-slot:hover
.challenge-slot__cover {
  transform:
    translateY(-5px);

  box-shadow:
    0
    16px
    30px
    rgba(94,61,69,.13);
}


.challenge-slot__cover img {
  display:
    block;

  width:
    100%;

  height:
    100%;

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

  border-radius:
    12px;

  object-fit:
    cover;
}


.challenge-slot__cover > span {
  position:
    absolute;

  z-index:
    3;

  top:
    -8px;

  left:
    50%;

  transform:
    translateX(-50%);

  display:
    grid;

  min-width:
    29px;

  height:
    29px;

  padding:
    0
    8px;

  place-items:
    center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 30%,
      white
    );

  border-radius:
    999px;

  background:
    rgba(255,249,250,.96);

  color:
    var(--accent);

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

  font:
    600
    .5rem
    var(--font-body);

  white-space:
    nowrap;
}


/* ==========================================================
   EMPTY SLOT
   ========================================================== */

.challenge-slot__blank {
  position:
    relative;

  display:
    flex;

  width:
    100%;

  aspect-ratio:
    2 / 3;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  padding:
    16px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 25%,
      transparent
    );

  border-radius:
    12px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      color-mix(
        in srgb,
        var(--accent) 7%,
        rgba(255,249,250,.84)
      )
    );

  text-align:
    center;

  box-shadow:
    inset
    0
    0
    28px
    rgba(255,255,255,.56);
}


.challenge-slot__blank::before {
  content: "";

  position:
    absolute;

  inset:
    7px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 15%,
      transparent
    );

  border-radius:
    8px;
}


.challenge-slot__blank::after {
  content: "";

  position:
    absolute;

  width:
    94px;

  height:
    94px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 11%,
      transparent
    );

  border-radius:
    50%;

  transform:
    rotate(-12deg);
}


.challenge-slot__spark {
  position:
    relative;

  z-index:
    2;

  margin-bottom:
    .7rem;

  color:
    var(--accent);

  font-size:
    .5rem;
}


.challenge-slot__blank strong {
  position:
    relative;

  z-index:
    2;

  color:
    var(--accent);

  font:
    500
    1rem
    / 1.15
    var(--font-display);
}


.accent-rose
.challenge-slot__blank strong {
  font-size:
    1.55rem;
}


.challenge-slot__blank small {
  position:
    relative;

  z-index:
    2;

  margin-top:
    .5rem;

  color:
    rgba(109,78,84,.46);

  font:
    italic
    .67rem
    / 1.2
    var(--font-display);
}


/* ==========================================================
   BOOK META
   ========================================================== */

.challenge-slot__meta {
  padding:
    .7rem
    .1rem
    0;

  text-align:
    center;
}


.challenge-slot__meta strong {
  display:
    block;

  overflow:
    hidden;

  color:
    var(--dusty-ink);

  font:
    500
    .83rem
    / 1.15
    var(--font-display);

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.challenge-slot__meta small {
  display:
    block;

  overflow:
    hidden;

  margin-top:
    .18rem;

  color:
    rgba(109,78,84,.47);

  font:
    .47rem
    var(--font-body);

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* ==========================================================
   EMPTY YEAR
   ========================================================== */

.challenge-empty {
  min-height:
    240px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--archive-rose);

  text-align:
    center;
}


/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes challengeFloat {

  0%,
  100% {

    transform:
      translateY(0)
      rotate(0);

  }


  50% {

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

  }

}


/* ==========================================================
   TABLET / MOBILE
   ========================================================== */

@media (max-width: 760px) {

  .challenge-hero {
    min-height:
      560px;

    padding:
      130px
      22px
      85px;
  }

.challenge-hero__cupid {
  width: 155px;
  opacity: 0.78;
}

.challenge-hero__cupid--left {
  left: -35px;
  right: auto;
  bottom: 20px;

  transform:
    scaleX(-1)
    rotate(4deg);
}

.challenge-hero__cupid--right {
  right: -35px;
  left: auto;
  bottom: 20px;

  transform:
    rotate(4deg);
}


  .challenge-hero::before {
    width:
      390px;

    height:
      390px;
  }


  .challenge-hero::after {
    width:
      470px;

    height:
      330px;
  }


  .challenge-hero h1 {
    font-size:
      clamp(
        4rem,
        17vw,
        5.8rem
      );
  }


  .challenge-controls {
    padding:
      0
      18px;
  }


  .challenge-controls__inner {
    display:
      flex;

    min-height:
      0;

    flex-direction:
      column;

    gap:
      12px;

    padding:
      17px
      0;
  }


  .challenge-years {
    flex-wrap:
      wrap;

    justify-content:
      center;
  }


  .challenge-controls__count {
    align-self:
      center;
  }


  .challenge-vault {
    padding:
      4rem
      0
      6rem;
  }


  .challenge-vault::before {
    width:
      430px;

    height:
      430px;
  }


  .challenge-vault__intro {
    margin-bottom:
      3.8rem;
  }


  .challenge-vault__intro h2 {
    font-size:
      clamp(
        2.8rem,
        12vw,
        3.8rem
      );
  }


  .challenge-list {
    width:
      calc(
        100% - 24px
      );
  }


  .celestial-trial {
    margin-bottom:
      5rem;
  }


  .celestial-trial__heading {
    width:
      calc(
        100% - 24px
      );

    min-height:
      92px;

    padding-right:
      82px;
  }


  .celestial-trial__title {
    font-size:
      clamp(
        2.3rem,
        10vw,
        3rem
      );
  }


  .celestial-trial__description {
    font-size:
      .84rem;
  }


  .celestial-trial__progress {
    width:
      68px;

    height:
      68px;
  }


  .celestial-trial__progress strong {
    font-size:
      .96rem;
  }


  .celestial-trial__progress small {
    font-size:
      .29rem;
  }


  .celestial-trial__divider {
    width:
      calc(
        100% - 24px
      );
  }


  .challenge-rail {
    gap:
      .9rem;

    padding:
      .45rem
      1rem
      .8rem;
  }


  .challenge-slot {
    flex-basis:
      120px;
  }


  .challenge-rail__arrow {
    display:
      none;
  }


  .challenge-rail::-webkit-scrollbar-track {
    margin-inline:
      1rem;
  }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 460px) {

  .challenge-controls__identity {
    font-size:
      .47rem;

    letter-spacing:
      .12em;
  }


  .challenge-vault__intro {
    width:
      calc(
        100% - 28px
      );
  }


  .celestial-trial__heading {
    padding-right:
      74px;
  }


  .celestial-trial__progress {
    width:
      62px;

    height:
      62px;
  }


  .challenge-slot {
    flex-basis:
      110px;
  }

  .challenge-hero__cupid {
  width: 125px;
  opacity: 0.7;
}

.challenge-hero__cupid--left {
  left: -42px;
  bottom: 15px;
}

.challenge-hero__cupid--right {
  right: -42px;
  bottom: 15px;
}

}


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

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

  .challenge-hero__star,
  .challenge-vault__star,
  .challenge-hero__cupid {
    animation:
      none;
  }


  .challenge-rail {
    scroll-behavior:
      auto;
  }

}

/* ==========================================================
   FINAL TRIAL POLISH
   ========================================================== */


/* ---------- Tighter challenge spacing ---------- */

.celestial-trial {
  margin-bottom: 5rem;
}


.celestial-trial__heading {
  min-height: 0;

  margin-bottom: 1.5rem;
}


/* ---------- Real progress ring ---------- */

.celestial-trial__progress {
  border: 0;

  background:
    radial-gradient(
      circle,
      rgba(255,249,250,.97) 0 66%,
      transparent 67%
    ),
    conic-gradient(
      var(--accent) 0deg var(--progress),
      color-mix(
        in srgb,
        var(--accent) 16%,
        white
      )
      var(--progress) 360deg
    );

  box-shadow:
    0 8px 24px rgba(94,61,69,.055),
    inset 0 0 0 7px rgba(255,255,255,.72);
}


.celestial-trial__progress::after {
  content: "";

  position: absolute;

  inset: 5px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 18%,
      transparent
    );

  border-radius: 50%;

  pointer-events: none;
}


/* ---------- Shelf ---------- */

.challenge-rail-wrap {
  margin-top: 0;

  overflow: visible;
}


/* give the books breathing room without creating a huge section */

.challenge-rail {
  padding-top: .65rem;

  padding-bottom: .8rem;
}


/* ---------- Move arrows outside books ---------- */

.challenge-rail__arrow {
  top: 40%;

  width: 40px;
  height: 40px;

  background:
    rgba(255,250,251,.98);

  box-shadow:
    0 8px 24px rgba(94,61,69,.11);
}


.challenge-rail__arrow--left {
  left: -50px;
}


.challenge-rail__arrow--right {
  right: -50px;
}


/* ---------- Slightly stronger scrollbar ---------- */

.challenge-rail::-webkit-scrollbar {
  height: 8px;
}


.challenge-rail::-webkit-scrollbar-thumb {
  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.35);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

  .celestial-trial {
    margin-bottom: 4rem;
  }


  .celestial-trial__heading {
    margin-bottom: 1.15rem;
  }

}

/* ==========================================================
   VAULT INTRO — FINAL SPACING
   ========================================================== */

.challenge-vault {
  padding-top: 2rem;
}


.challenge-vault__intro {
  margin-bottom: 2rem;
}
/* Angel Archive · Challenges palette and background match. */
.challenges-page {
 --ink-rose:#fff0e6;--dusty-ink:#f0d5cf;--archive-rose:#e9b9aa;--cherub-rose:#e8b8bd;
 --challenge-rose:#efb3bd;--challenge-lavender:#e9b9aa;--challenge-sage:#cbd5bc;--challenge-gold:#e7c18c;
 --challenge-ink:#fff0e6;--challenge-paper:#32101f;
 --trial-surface:linear-gradient(135deg,rgba(49,15,27,.97),rgba(79,24,40,.96) 50%,rgba(42,12,24,.98));
 --trial-shade:linear-gradient(90deg,rgba(30,8,20,.78) 0%,rgba(40,12,27,.58) 38%,rgba(40,12,27,.22) 72%,rgba(40,12,27,.12) 100%);
 background:#2a0c18;color:#fff0e6;
}
.challenges-page .challenge-hero {background:var(--trial-shade),url('../assets/images/cherry-background.png') center/cover no-repeat}
.challenges-page .challenge-hero h1 span {color:#e8b8bd}
.challenges-page .challenge-hero::before {border-color:rgba(255,225,210,.55)}
.challenges-page .challenge-hero::after {border-color:rgba(245,202,184,.45)}
.challenges-page .challenge-hero__star,.challenges-page .challenge-vault__star {color:#ffe1d2c0;text-shadow:0 0 12px #e9b9aa55}
.challenges-page .challenge-hero__cupid {filter:drop-shadow(0 14px 20px #14040d55)}
.challenges-page .challenge-hero__ornament {color:#e9b9aa}
.challenges-page .challenge-hero__ornament i {background:linear-gradient(90deg,transparent,#e9b9aa70)}
.challenges-page .challenge-hero__ornament i:nth-of-type(2) {background:linear-gradient(90deg,#e9b9aa70,transparent)}
.challenges-page .challenge-hero__button,
.challenges-page .challenge-years button.is-active,
.challenges-page .challenge-rail__arrow {background:var(--trial-surface);border-color:#e9b9aa70;color:#fff0e6;box-shadow:0 8px 24px #14040d55}
.challenges-page .challenge-hero__button:hover,
.challenges-page .challenge-years button:hover,
.challenges-page .challenge-rail__arrow:hover {background:linear-gradient(135deg,#672b40,#421426);color:#fff0e6;border-color:#e9b9aa}
.challenges-page .challenge-controls {background:var(--trial-surface);border-color:#e9b9aa40;backdrop-filter:none}
.challenges-page .challenge-controls__identity,
.challenges-page .challenge-controls__count,
.challenges-page .challenge-years button {color:#e7c6c1}
.challenges-page .challenge-years button.is-active {color:#fff0e6;box-shadow:inset 0 0 0 2px #e9b9aa18,0 8px 22px #14040d40}
.challenges-page .challenge-vault {
 background-color:#2a0c18;
 background-image:var(--trial-shade),url('../assets/images/heavenly-bookshelf-bg.png');
 background-size:100% 100%,100% auto;background-position:center,center top;background-repeat:no-repeat,repeat-y;
}
.challenges-page .challenge-vault::before {border-color:#e9b9aa30}
.challenges-page .challenge-vault__intro h2,
.challenges-page .celestial-trial__title,
.challenges-page .challenge-slot__meta strong {color:#fff0e6}
.challenges-page .challenge-vault__intro>span,
.challenges-page .celestial-trial__description,
.challenges-page .celestial-trial__progress small,
.challenges-page .challenge-slot__meta small,
.challenges-page .challenge-slot__blank small {color:#e7c6c1}
.challenges-page .challenge-vault__chapter,
.challenges-page .challenge-vault__ornament {color:#e9b9aa}
.challenges-page .challenge-vault__chapter span,
.challenges-page .challenge-vault__ornament i {background:#e9b9aa55}
.challenges-page .celestial-trial__progress {
 background:radial-gradient(circle,#32101f 0 66%,transparent 67%),conic-gradient(var(--accent) 0deg var(--progress),#70424c var(--progress) 360deg);
 box-shadow:0 8px 24px #14040d55,inset 0 0 0 7px #e9b9aa15;
}
.challenges-page .celestial-trial__progress::after {border-color:#e9b9aa50}
.challenges-page .celestial-trial__progress-star,
.challenges-page .celestial-trial__divider i {background:#32101f;color:var(--accent)}
.challenges-page .challenge-rail-wrap {background:var(--trial-surface);border-color:#e9b9aa40}
.challenges-page .challenge-slot__cover>span {background:var(--trial-surface);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 5px 14px #14040d55}
.challenges-page .challenge-slot__cover img {border-color:#e9b9aa45}
.challenges-page .challenge-slot:hover .challenge-slot__cover {box-shadow:0 16px 30px #14040d66}
.challenges-page .challenge-slot__blank {background:var(--trial-surface);box-shadow:inset 0 0 28px #e9b9aa09;border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.challenges-page .challenge-rail {scrollbar-color:var(--accent) #e9b9aa18}
.challenges-page .challenge-rail::-webkit-scrollbar-track {background:#e9b9aa18}
.challenges-page .challenge-rail::-webkit-scrollbar-thumb {background:linear-gradient(90deg,#b57d91,var(--accent));box-shadow:inset 0 0 0 1px #e9b9aa30}
.challenges-page :is(.challenge-hero__button,.challenge-years button,.challenge-rail__arrow):focus-visible {outline:2px solid #ffe1d2;outline-offset:4px}
@media(max-width:760px){.challenges-page .challenge-vault {background-size:100% 100%,auto 850px}}

/* Finished shared 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;
  }

}


/* ✦ Angel Archive — Final Celestial Footer ✦ */

.archive-footer {
  position: relative;

  background: linear-gradient(
  135deg,
  #310f1b 0%,
  #4f1828 50%,
  #2a0c18 100%
);

  border-top: 1px solid rgba(210, 148, 137, 0.75);

  box-shadow:
    0 -10px 38px rgba(16, 3, 10, 0.25),
    inset 0 1px 0 rgba(247, 195, 179, 0.18);

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


/* Matching navbar-inspired inner border */



.archive-footer__inner {
  position: relative;
  z-index: 1;
}


/* Angel Archive signature */

.archive-footer__brand h2 {
  color: #e9b9aa;
  font-size: 2.1rem;
  text-shadow: 0 0 18px rgba(233, 185, 170, 0.20);
}

/* Little tagline */

.archive-footer__brand p {
  color: #f0d5cf;
}

/* Social links glass pill */

.archive-footer__links {
  background: rgba(255, 240, 230, 0.07);
  border: 1px solid rgba(233, 185, 170, 0.32);

  box-shadow: inset 0 1px 0 rgba(255, 240, 230, 0.08);
}

/* Social link text */

.archive-footer__links a {
  color: #fff0e6;
}

.archive-footer__links a:hover {
  color: #e9b9aa;
  text-shadow: 0 0 12px rgba(233, 185, 170, 0.35);
}

/* Little heart separators */

.archive-footer__links > span {
  color: #e9b9aa;
  opacity: 0.85;
}

/* Copyright and credit */

.archive-footer__credit {
  color: #d8a9b1;
}



/* ✦ ANGEL ARCHIVE — CELESTIAL SIGNATURE FOOTER ✦ */

.archive-footer {
  padding: 25px var(--page-padding, 32px) 17px;
}

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

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand links"
    "credit credit";

  align-items: center;
  column-gap: 36px;
  row-gap: 22px;

  text-align: left;
}

/* Angel Archive signature */

.archive-footer__brand {
  grid-area: brand;
  justify-self: start;
}

.archive-footer__brand h2 {
  color: #e9b9aa;
  font-size: 3.1rem;
  line-height: 1;
}

.archive-footer__brand p {
  margin: 3px 0 0;
  color: #f0d5cf;
  font-size: 0.78rem;
  line-height: 1.3;
}

/* Remove the single enclosing links pill */

.archive-footer__links {
  grid-area: links;
  justify-self: end;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;

  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Each link becomes its own celestial pill */

.archive-footer__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 37px;
  padding: 10px 15px;

  border: 1px solid rgba(233, 185, 170, 0.42);
  border-radius: 999px;

  background: rgba(255, 240, 230, 0.07);

  color: #fff0e6;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-decoration: none;

  box-shadow: inset 0 1px 0 rgba(255, 240, 230, 0.08);

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

.archive-footer__links a:hover {
  transform: translateY(-3px);
  background: rgba(233, 185, 170, 0.18);
  border-color: rgba(255, 225, 210, 0.8);

  box-shadow:
    0 7px 20px rgba(20, 4, 13, 0.22),
    0 0 15px rgba(233, 185, 170, 0.12);
}

/* Hide the old heart separators between links */

.archive-footer__links > span {
  display: none;
}

/* Bottom copyright divider */

.archive-footer__credit {
  grid-area: credit;
  justify-self: stretch;

  margin: 0;
  padding-top: 14px;

  border-top: 1px solid rgba(233, 185, 170, 0.30);

  color: #d8a9b1;
  font-size: 0.68rem;
  line-height: 1.5;
  text-align: right;
}

/* Responsive footer */

@media (max-width: 900px) {
  .archive-footer__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "links"
      "credit";

    justify-items: center;
    row-gap: 17px;
    text-align: center;
  }

  .archive-footer__brand,
  .archive-footer__links {
    justify-self: center;
  }

  .archive-footer__links {
    justify-content: center;
  }

  .archive-footer__credit {
    text-align: center;
  }
}

@media (max-width: 500px) {
  .archive-footer {
    padding: 26px 18px 18px;
  }

  .archive-footer__brand h2 {
    font-size: 2.7rem;
  }

  .archive-footer__links {
    gap: 8px;
  }

  .archive-footer__links a {
    padding: 9px 12px;
    font-size: 0.62rem;
  }
}

.challenges-page .challenge-hero::before {
  animation: challengeRingClockwise 35s linear infinite;
}

.challenges-page .challenge-hero::after {
  animation: challengeRingCounterclockwise 45s linear infinite;
}

@keyframes challengeRingClockwise {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

@keyframes challengeRingCounterclockwise {
  from { transform: translateX(-50%) rotate(-10deg); }
  to   { transform: translateX(-50%) rotate(-370deg); }
}

@media (prefers-reduced-motion: reduce) {
  .challenges-page .challenge-hero::before,
  .challenges-page .challenge-hero::after {
    animation: none;
  }
}


/* Keep every challenge book in the same responsive cover frame. */
.challenges-page .challenge-slot { min-width: 0; }
.challenges-page .challenge-slot__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}
.challenges-page .challenge-slot__meta { overflow-wrap: anywhere; }