/* ==========================================================
   THE ANGEL ARCHIVE — CELESTIAL WRAP-UPS
   ========================================================== */


/* ==========================================================
   01. ROOT
   ========================================================== */

:root {
  --pearl: #fff9fa;
  --cloud-blush: #fae5e6;
  --heaven-pink: #f6d6d9;
  --pearl-rose: #f1ced2;
  --angel-mist: #f8dbe2;
  --cherub-rose: #e1a5ae;
  --archive-rose: #c87985;
  --ink-rose: #5e3d45;
  --dusty-ink: #8b6b72;

  --white-glass:
    rgba(255, 249, 250, 0.78);

  --rose-line:
    rgba(200, 121, 133, 0.22);

  --soft-shadow:
    0 22px 70px
    rgba(94, 61, 69, 0.10);

  --page-width: 1240px;
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  color:
    var(--ink-rose);

  background:
    linear-gradient(
      180deg,
      #fffafb 0%,
      #fdf2f4 24%,
      #fff9fa 52%,
      #fbecef 76%,
      #fffafa 100%
    );

  font-family:
    "DM Sans",
    sans-serif;
}


button,
input,
select {
  font: inherit;
}


button {
  color: inherit;
}

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


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

  margin-inline:
    auto;
}

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

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

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

  width: 10px;
  height: 10px;

  border-radius: 50%;

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

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

  pointer-events: none;

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

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

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

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

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

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

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

  left: 0;
  top: 0;

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

  font-size: 0.8rem;

  pointer-events: none;

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

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

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

@keyframes cursor-sparkle-fade {

  0% {
    opacity: 0;

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

  20% {
    opacity: 1;

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

  100% {
    opacity: 0;

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

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

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

}


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

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

  top: 22px;
  left: 50%;

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

  transform: translate(-50%, 0);

  opacity: 1;
  visibility: visible;

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


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

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


.archive-nav__inner {
  display: grid;

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

  align-items: center;

  min-height: 64px;

  padding: 8px 18px 8px 26px;

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

  border-radius: 999px;

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

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

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


.archive-nav__logo {
  justify-self: start;

  color: var(--archive-rose);

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

  text-decoration: none;

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


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

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


.archive-nav__link {
  position: relative;

  padding: 8px 0;

  color: var(--dusty-ink);

  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;

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

  text-decoration: none;

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


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

  position: absolute;

  left: 50%;
  bottom: 2px;

  width: 0;
  height: 1px;

  background: var(--archive-rose);

  transform: translateX(-50%);

  transition: width 220ms ease;
}


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

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


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


.archive-nav__archivist {
  justify-self: end;

  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

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

  border-radius: 50%;

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

  color: var(--archive-rose);

  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;

  text-decoration: none;

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


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

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

  transform: scale(1.05);
}


.archive-nav__menu {
  display: none;

  justify-self: end;

  width: 44px;
  height: 44px;

  padding: 0;

  border: 0;

  background: transparent;
}


.archive-nav__menu span {
  display: block;

  width: 20px;
  height: 1px;

  margin: 6px auto;

  background: var(--archive-rose);

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


.archive-nav__mobile {
  display: none;

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

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

  border-radius: 28px;

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

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

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


.archive-nav__mobile a {
  display: block;

  padding: 11px 8px;

  color: var(--dusty-ink);

  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;

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

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


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


@media (max-width: 850px) {

  .archive-nav {
    top: 14px;

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


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

    min-height: 58px;

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


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


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


  .archive-nav__menu {
    display: block;
  }

}


/* ==========================================================
   03. HERO
   ========================================================== */

.wrap-hero {
  position: relative;

  display: grid;
  place-items: center;

  min-height:
    300px;

  overflow: hidden;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255, 255, 255, 0.98)
      0 18%,
      rgba(255, 244, 247, 0.88)
      42%,
      rgba(248, 219, 226, 0.48)
      72%,
      transparent 100%
    );
}


.wrap-hero::before,
.wrap-hero::after {
  content: "";

  position: absolute;

  width: 520px;
  height: 300px;

  border-radius: 50%;

  filter:
    blur(14px);

  opacity: 0.55;

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


.wrap-hero::before {
  left: -180px;
  bottom: 10px;

  transform:
    rotate(12deg);
}


.wrap-hero::after {
  right: -180px;
  top: 70px;

  transform:
    rotate(-12deg);
}


.wrap-hero__content {
  position: relative;
  z-index: 2;

  max-width:
    780px;

  margin:
    0 auto;

  padding:
    100px 0;
}


.wrap-eyebrow,
.wrap-section-kicker {
  margin:
    0 0 20px;

  color:
    var(--archive-rose);

  font-size:
    0.69rem;

  font-weight:
    600;

  letter-spacing:
    0.25em;

  text-transform:
    uppercase;
}


.wrap-hero h1 {
  margin: 0;

  color:
    var(--ink-rose);

  font-family:
    "Cormorant Garamond",
    serif;

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

  font-weight:
    500;

  line-height:
    0.75;

  letter-spacing:
    -0.04em;
}


.wrap-hero h1 span {
  display: block;

  margin-top:
    20px;

  color:
    var(--archive-rose);

  font-family:
    "Allura",
    cursive;

  font-size:
    0.77em;

  font-weight:
    400;

  letter-spacing:
    0;
}


.wrap-hero__tagline {
  margin:
    12px 0 0;

  color:
    var(--dusty-ink);

  font-family:
    "Cormorant Garamond",
    serif;

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

  font-style:
    italic;
}


.wrap-hero__copy {
  max-width:
    570px;

  margin:
    12px auto 0;

  color:
    var(--dusty-ink);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.05rem;

  line-height:
    1.50;
}


.wrap-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  width:
    min(
      330px,
      75%
    );

  margin:
    27px auto 0;

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


.wrap-ornament span {
  width:
    110px;
  height:
    1px;

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


.wrap-ornament span:last-child {
  transform:
    scaleX(-1);
}


.wrap-ornament b {
  font-weight:
    400;
}

/* ==========================================================
   HERO — CELESTIAL YEAR CONSTELLATION
   ========================================================== */

.wrap-hero__constellation {
  position: absolute;

  z-index: 1;

  left: 50%;
  top: 50%;

  width:
    min(
      1180px,
      96vw
    );

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

  pointer-events:
    none;
}


.wrap-hero__constellation svg {
  display: block;

  width: 100%;
  height: auto;

  overflow: visible;
}


/* Constellation Lines */

.wrap-hero__constellation-lines {
  fill: none;

  stroke:
    rgba(200, 121, 133, 0.18);

  stroke-width: 1;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Main Month Points */

.wrap-hero__constellation-point circle {
  fill:
    rgba(200, 121, 133, 0.34);

  filter:
    drop-shadow(
      0 0 6px
      rgba(225, 165, 174, 0.22)
    );
}


.wrap-hero__constellation-point text {
  fill:
    rgba(139, 107, 114, 0.34);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    12px;

  font-style:
    italic;

  letter-spacing:
    0.08em;
}


/* Slightly Brighter Anchor Stars */

.wrap-hero__constellation-point--bright circle {
  fill:
    rgba(200, 121, 133, 0.42);

  filter:
    drop-shadow(
      0 0 8px
      rgba(225, 165, 174, 0.28)
    );
}


/* Decorative Symbols */

.wrap-hero__constellation-symbol {
  fill:
    rgba(200, 121, 133, 0.42);

  font-family:
    "Cormorant Garamond",
    serif;

  text-anchor:
    middle;
}


.wrap-hero__constellation-symbol--one {
  font-size:
    22px;
}


.wrap-hero__constellation-symbol--two {
  font-size:
    19px;
}


.wrap-hero__constellation-symbol--three {
  font-size:
    18px;
}


/* ==========================================================
   04. YEAR PICKER
   ========================================================== */

.wrap-year-nav {
  padding:
    65px 0 40px;

  text-align:
    center;
}


.wrap-year-picker {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  padding:
    9px;

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

  border-radius:
    999px;

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

  box-shadow:
    0 12px 40px
    rgba(94, 61, 69, 0.06);

  backdrop-filter:
    blur(15px);
}


.wrap-year-picker__years {
  display: flex;
  align-items: center;
  gap: 5px;
}


.wrap-year-picker button {
  border: 0;

  cursor: pointer;
}


.wrap-year-picker__years button {
  min-width:
    82px;

  padding:
    11px 17px;

  border-radius:
    999px;

  color:
    var(--dusty-ink);

  background:
    transparent;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.04rem;

  font-weight:
    600;

  transition:
    180ms ease;
}


.wrap-year-picker__years button:hover {
  color:
    var(--archive-rose);

  background:
    rgba(248, 219, 226, 0.35);
}


.wrap-year-picker__years button.is-active {
  color:
    white;

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

  box-shadow:
    0 8px 22px
    rgba(200, 121, 133, 0.23);
}


.wrap-year-picker__arrow {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius:
    50%;

  color:
    var(--archive-rose);

  background:
    transparent;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.7rem;

  transition:
    background 180ms ease;
}


.wrap-year-picker__arrow:hover {
  background:
    var(--cloud-blush);
}


/* ==========================================================
   05. YEAR OVERVIEW
   ========================================================== */

.wrap-overview {
  padding:
    0px 0 1px;
}


.wrap-overview__heading {
  max-width:
    650px;

  margin:
    0 auto 48px;

  text-align:
    center;
}


.wrap-script {
  margin:
    0 0 1px;

  color:
    var(--cherub-rose);

  font-family:
    "Allura",
    cursive;

  font-size:
    2.25rem;
}


.wrap-overview__heading h2,
.monthly-archive__heading h2 {
  margin:
    0;

  color:
    var(--ink-rose);

  font-family:
    "Cormorant Garamond",
    serif;

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

  font-weight:
    500;

  letter-spacing:
    0.03em;
}


.wrap-overview__heading > p:last-child,
.monthly-archive__heading > p:last-child {
  color:
    var(--dusty-ink);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.04rem;

  font-style:
    italic;
}

.wrap-overview.is-loading strong {
  opacity: 0.38;

  animation:
    wrapDataPulse 1.4s ease-in-out infinite;
}


@keyframes wrapDataPulse {

  0%,
  100% {
    opacity: 0.28;
  }

  50% {
    opacity: 0.62;
  }

}


.wrap-overview__card {
  position: relative;

  overflow: hidden;

  padding:
    25px 25px 25px;

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

  border-radius:
    34px;

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

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

  backdrop-filter:
    blur(20px);
}


.wrap-overview__halo {
  position: absolute;

  left: 50%;
  top: -180px;

  width: 500px;
  height: 300px;

  transform:
    translateX(-50%);

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

  border-radius:
    50%;
}


.wrap-overview__primary {
  position: relative;
  z-index: 2;

  display: grid;

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

  align-items: center;

  gap: 20px;

  padding-bottom:
    40px;

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

  text-align:
    center;
}


.wrap-overview__primary article {
  display: grid;
  gap: 4px;
}


.wrap-overview__primary strong {
  color:
    var(--archive-rose);

  font-family:
    "Cormorant Garamond",
    serif;

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

  font-weight:
    500;
}


.wrap-overview__primary span {
  color:
    var(--dusty-ink);

  font-size:
    0.68rem;

  font-weight:
    600;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


.wrap-overview__primary i {
  color:
    rgba(200, 121, 133, 0.38);

  font-style:
    normal;
}


.wrap-overview__secondary {
  display: grid;

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

  gap: 20px;

  padding-top:
    34px;
}


.wrap-overview__secondary article {
  display: grid;
  gap: 8px;

  text-align:
    center;
}


.wrap-overview__secondary small {
  color:
    var(--dusty-ink);

  font-size:
    0.64rem;

  font-weight:
    600;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


.wrap-overview__secondary strong {
  color:
    var(--ink-rose);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.35rem;

  font-weight:
    600;
}


/* ==========================================================
   06. MONTHLY ARCHIVE
   ========================================================== */

.monthly-archive {
  position: relative;

  padding:
    75px 0 100px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(250, 229, 230, 0.24),
      rgba(255, 249, 250, 0.65),
      rgba(248, 219, 226, 0.2)
    );
}


.monthly-archive__heading {
  max-width:
    650px;

  margin:
    0 auto 150px;

  text-align:
    center;
}


.month-timeline {
  position: relative;

  display: grid;
  gap: 0px;

  max-width:
    1080px;

  margin:
    0 auto;
}


.month-timeline__path {
  position: absolute;

  left: 50%;
  top: 15px;
  bottom: 15px;

  width:
    1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(200, 121, 133, 0.34) 5%,
      rgba(200, 121, 133, 0.2) 95%,
      transparent
    );
}


.month-entry {
  position: relative;

  display: grid;

  margin-top: -125px;

  grid-template-columns:
    1fr 70px 1fr;

  align-items: center;
}


.month-entry--left .month-card {
  grid-column:
    1;
}


.month-entry--right .month-card {
  grid-column:
    3;
}


.month-entry__marker {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 3;

  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

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

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

  border-radius:
    50%;

  color:
    var(--archive-rose);

  background:
    var(--pearl);

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


.month-card {
  position: relative;

  width: 100%;

  padding:
    30px 32px 27px;

  overflow: hidden;

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

  border-radius:
    28px;

  cursor: pointer;

  color:
    var(--ink-rose);

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

  box-shadow:
    0 20px 60px
    rgba(94, 61, 69, 0.08);

  text-align:
    left;

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


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

  position: absolute;

  top: 15px;
  right: 18px;

  width: 80px;
  height: 35px;

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

  border-radius:
    50%;
}


.month-card:hover {
  transform:
    translateY(-7px);

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

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


.month-card__heading {
  display: grid;

  grid-template-columns:
    1fr auto;

  align-items: end;
}


.month-card__heading small {
  grid-column:
    1 / -1;

  margin-bottom:
    4px;

  color:
    var(--cherub-rose);

  font-size:
    0.62rem;

  font-weight:
    600;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.month-card__heading h3 {
  margin: 0;

  color:
    var(--ink-rose);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    2.55rem;

  font-weight:
    500;
}


.month-card__heading span {
  padding-bottom:
    7px;

  color:
    var(--archive-rose);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1rem;

  font-style:
    italic;
}


.month-card__tagline {
  min-height:
    44px;

  margin:
    7px 0 18px;

  color:
    var(--dusty-ink);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.05rem;

  font-style:
    italic;

  line-height:
    1.5;
}


.month-card__covers {
  position: relative;

  height:
    158px;

  margin:
    0 0 17px;
}


.month-cover {
  position: absolute;

  top: 50%;

  display: grid;
  place-items: center;

  width:
    105px;
  aspect-ratio:
    2 / 3;

  border:
    5px solid
    rgba(255, 255, 255, 0.9);

  border-radius:
    7px;

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

  background:
    linear-gradient(
      145deg,
      #e8b6bd,
      #c87985
    );

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

  font-size:
    1.25rem;
}


.month-cover--1 {
  left: 23%;

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


.month-cover--2 {
  left: 50%;

  z-index: 2;

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


.month-cover--3 {
  left: 77%;

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


.month-card__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;

  padding:
    12px 0;

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

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

  color:
    var(--dusty-ink);

  font-size:
    0.66rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.month-card__stats b {
  color:
    rgba(200, 121, 133, 0.45);

  font-weight:
    400;
}


.month-card__open {
  display: block;

  margin-top:
    15px;

  color:
    var(--archive-rose);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    0.95rem;

  font-style:
    italic;

  font-weight:
    600;

  text-align:
    center;
}


/* ==========================================================
   08. FOOTER
   ========================================================== */

.archive-footer {
  position: relative;

  padding:
    18px
    var(--page-padding, 32px)
    16px;

  background:
    linear-gradient(
      rgba(255, 249, 250, 0.85),
      rgba(246, 214, 217, 0.85)
    ),
    url("/assets/images/shelf-arches.jpg");

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

  border-top:
    1px solid
    rgba(255, 255, 255, 0.6);
}


.archive-footer__inner {
  width: min(100%, 900px);

  margin: 0 auto;

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

  text-align: center;
}


/* ==========================================================
   BRAND
   ========================================================== */

.archive-footer__brand h2 {
  margin: 0;

  color: var(--archive-rose);

  font-family: "Allura", cursive;

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

  line-height: 0.9;
}


.archive-footer__brand p {
  margin:
    1px
    0
    9px;

  color: var(--dusty-ink);

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

  font-size: 0.68rem;

  line-height: 1;
}


/* ==========================================================
   BOOKISH LINKS
   ========================================================== */

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

  gap: 11px;

  padding:
    7px
    18px;

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

  border-radius: 999px;

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

  backdrop-filter:
    blur(8px);

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


.archive-footer__links a {
  position: relative;

  color: var(--dusty-ink);

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

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

  letter-spacing: 0.1em;

  text-transform: uppercase;

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


.archive-footer__links a:hover {
  color: var(--archive-rose);

  text-shadow:
    0 0 10px
    rgba(225, 165, 174, 0.3);
}


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

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

  font-size: 0.65rem;

  opacity: 0.75;
}


/* ==========================================================
   CREDIT
   ========================================================== */

.archive-footer__credit {
  margin:
    7px
    0
    0;

  color:
    rgba(145, 103, 112, 0.62);

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

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

  line-height: 1;
}


/* ==========================================================
   RESPONSIVE — FOOTER
   ========================================================== */

@media (max-width: 600px) {

  .archive-footer {
    padding:
      18px
      var(--page-padding, 22px);
  }


  .archive-footer__links {
    flex-wrap: wrap;

    gap:
      6px
      10px;
  }

}


/* ==========================================================
   09. MONTHLY RECORD OVERLAY
   ========================================================== */

body.wrap-record-open {
  overflow:
    hidden;
}


.wrap-record {
  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  display:
    grid;

  place-items:
    center;

  padding:
    28px;

  visibility:
    hidden;

  opacity:
    0;

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


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

  opacity:
    1;
}


.wrap-record__backdrop {
  position:
    absolute;

  inset:
    0;

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

  backdrop-filter:
    blur(10px);
}


.wrap-record__window {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      1120px,
      100%
    );

  max-height:
    calc(100vh - 56px);

  overflow-y:
    auto;

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

  border-radius:
    34px;

  background:
    linear-gradient(
      160deg,
      #fffafb,
      #fdf0f2
    );

  box-shadow:
    0 40px 110px
    rgba(94, 61, 69, 0.24);

  scrollbar-width:
    thin;

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


.wrap-record__window::-webkit-scrollbar {
  width:
    4px;
}


.wrap-record__window::-webkit-scrollbar-track {
  background:
    transparent;
}


.wrap-record__window::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


.wrap-record__close {
  position:
    sticky;

  top:
    18px;

  z-index:
    10;

  display:
    grid;
  place-items:
    center;

  width:
    42px;
  height:
    42px;

  margin:
    18px 18px -60px auto;

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

  border-radius:
    50%;

  cursor:
    pointer;

  color:
    var(--archive-rose);

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

  box-shadow:
    0 7px 25px
    rgba(94, 61, 69, 0.08);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.6rem;
}


.wrap-record__content {
  padding:
    90px
    clamp(
      30px,
      7vw,
      90px
    )
    80px;
}


.record-hero {
  max-width:
    820px;

  margin:
    0 auto;

  text-align:
    center;
}


.record-hero__eyebrow {
  color:
    var(--archive-rose);

  font-size:
    0.65rem;

  font-weight:
    600;

  letter-spacing:
    0.22em;

  text-transform:
    uppercase;
}


.record-hero h2 {
  margin:
    5px 0 -5px;

  color:
    var(--ink-rose);

  font-family:
    "Cormorant Garamond",
    serif;

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

  font-weight:
    500;

  line-height:
    0.9;
}


.record-hero__year {
  color:
    var(--cherub-rose);

  font-family:
    "Allura",
    cursive;

  font-size:
    3rem;
}


.record-hero__tagline {
  max-width:
    650px;

  margin:
    25px auto 0;

  color:
    var(--dusty-ink);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.25rem;

  font-style:
    italic;

  line-height:
    1.6;
}


.record-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 26px;

  margin:
    38px auto 0;

  padding:
    18px 22px;

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

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

  color:
    var(--dusty-ink);

  font-size:
    0.7rem;

  font-weight:
    600;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


.record-stats b {
  color:
    var(--cherub-rose);

  font-weight:
    400;
}


.record-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;

  margin:
    10px auto;

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


.record-divider::before,
.record-divider::after {
  content: "";

  width:
    90px;
  height:
    1px;

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


.record-divider::after {
  transform:
    scaleX(-1);
}


.record-mood {
  width:
    fit-content;

  margin:
    0 auto 22px;

  padding:
    18px 32px;

  transform:
    rotate(-1.5deg);

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

  border-radius:
    9px;

  color:
    var(--archive-rose);

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

  box-shadow:
    0 12px 30px
    rgba(94, 61, 69, 0.07);

  text-align:
    center;
}


.record-mood small {
  display:
    block;

  margin-bottom:
    5px;

  font-size:
    0.59rem;

  font-weight:
    600;

  letter-spacing:
    0.2em;

  text-transform:
    uppercase;
}


.record-mood strong {
  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.35rem;

  font-style:
    italic;

  font-weight:
    500;
}


.record-highlights {
  display:
    grid;

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

  gap:
    18px;

  margin:
    0 auto 65px;
}


.record-highlight {
  padding:
    30px 25px;

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

  border-radius:
    20px;

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

  text-align:
    center;
}


.record-highlight small {
  display:
    block;

  margin-bottom:
    8px;

  color:
    var(--archive-rose);

  font-size:
    0.59rem;

  font-weight:
    600;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


.record-highlight strong {
  color:
    var(--ink-rose);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.2rem;

  font-weight:
    600;

  line-height:
    1.35;
}


.record-quote {
  max-width:
    760px;

  margin:
    0 auto 25px;

  text-align:
    center;
}


.record-quote small,
.record-thoughts small,
.record-shelf > small {
  display:
    block;

  margin-bottom:
    12px;

  color:
    var(--archive-rose);

  font-size:
    0.61rem;

  font-weight:
    600;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.record-quote blockquote {
  margin:
    0;

  color:
    var(--ink-rose);

  font-family:
    "Cormorant Garamond",
    serif;

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

  font-style:
    italic;

  line-height:
    1.45;
}


.record-thoughts {
  max-width:
    780px;

  margin:
    0 auto 40px;

  padding:
    20px;

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

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

  text-align:
    center;
}


.record-thoughts h3 {
  margin:
    0 0 15px;

  color:
    var(--ink-rose);

  font-family:
    "Allura",
    cursive;

  font-size:
    2.7rem;

  font-weight:
    400;
}


.record-thoughts p {
  margin:
    0;

  color:
    var(--dusty-ink);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.08rem;

  line-height:
    1.85;
}


.record-shelf {
  text-align:
    center;
}


.record-shelf h3 {
  margin:
    0 0 35px;

  color:
    var(--ink-rose);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    2.4rem;

  font-weight:
    500;
}


.record-shelf__books {
  display:
    flex;
  justify-content:
    center;
  flex-wrap:
    wrap;

  gap:
    22px;
}


.record-book {
  display:
    grid;
  place-items:
    center;

  width:
    125px;
  aspect-ratio:
    2 / 3;

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

  border-radius:
    8px;

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

  background:
    linear-gradient(
      145deg,
      #e8b6bd,
      #c87985
    );

  box-shadow:
    0 15px 35px
    rgba(94, 61, 69, 0.14);

  font-size:
    1.4rem;
}

.record-book img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: inherit;
}


/* ==========================================================
   10. RESPONSIVE
   ========================================================== */

@media (
  max-width: 900px
) {

  .wrap-overview__primary {
    grid-template-columns:
      repeat(2, 1fr);

    gap:
      30px;
  }


  .wrap-overview__primary i {
    display:
      none;
  }


  .wrap-overview__secondary {
    grid-template-columns:
      1fr;
  }


  .month-timeline__path {
    left:
      22px;
  }


  .month-entry {
    display:
      block;

    padding-left:
      68px;
  }


  .month-entry__marker {
    left:
      22px;
  }


  .record-highlights {
    grid-template-columns:
      1fr;
  }

}


@media (
  max-width: 600px
) {

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


  .wrap-hero {
    min-height:
      550px;
  }


  .wrap-hero h1 {
    font-size:
      3.7rem;
  }


  .wrap-year-picker {
    width:
      100%;

    justify-content:
      space-between;
  }


  .wrap-year-picker__years {
    overflow-x:
      auto;
  }


  .wrap-year-picker__years button {
    min-width:
      68px;
  }


  .wrap-overview__card {
    padding:
      38px 22px;
  }


  .wrap-overview__primary {
    grid-template-columns:
      1fr 1fr;
  }


  .month-card {
    padding:
      30px 24px 27px;
  }


  .month-card__covers {
    transform:
      scale(0.9);
  }


  .wrap-record {
    padding:
      10px;
  }


  .wrap-record__window {
    max-height:
      calc(100vh - 20px);

    border-radius:
      23px;
  }


  .wrap-record__content {
    padding:
      80px 22px 55px;
  }


  .record-hero h2 {
    font-size:
      4rem;
  }


  .record-thoughts {
    padding:
      35px 5px;
  }

}

/* ==========================================================
   FORCE HIDE DEFAULT CURSOR
   Keeps browser pointer from appearing over clickable items
   ========================================================== */

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

/* ==========================================================
   WRAP-UPS — CELESTIAL ENVIRONMENT PASS
   Background atmosphere only. Existing layouts stay intact.
   ========================================================== */


/* ----------------------------------------------------------
   1. HERO — CELESTIAL ARCHITECTURE
   ---------------------------------------------------------- */

.wrap-hero {
  isolation: isolate;

  background-color: #fff8f9;

  background-image:
    linear-gradient(
      180deg,
      rgba(255, 250, 251, 0.56) 0%,
      rgba(255, 248, 250, 0.44) 52%,
      rgba(255, 248, 249, 0.70) 100%
    ),
    radial-gradient(
      ellipse at 50% 42%,
      rgba(255, 255, 255, 0.48) 0%,
      rgba(255, 249, 250, 0.22) 42%,
      transparent 72%
    ),
    url("/assets/images/shelf-arches.jpg");

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

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

  background-repeat:
    no-repeat;
}


/* Replace the old giant white blobs with soft side haze */

.wrap-hero::before {
  left: -8%;
  bottom: -70px;

  width: 48%;
  height: 260px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.72),
      rgba(255, 247, 249, 0.28) 52%,
      transparent 76%
    );

  filter: blur(18px);
  opacity: 0.72;

  transform: none;
}


/* Hero → year-record pearl transition */

.wrap-hero::after {
  left: -5%;
  right: -5%;
  top: auto;
  bottom: -48px;

  width: auto;
  height: 112px;

  border-radius: 0;

  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;

  transform: none;
}


/* Keep hero artwork/content above the atmosphere */

.wrap-hero__constellation {
  z-index: 1;
}

.wrap-hero__content {
  z-index: 2;
}


/* ----------------------------------------------------------
   2. YEAR RECORD — ONE CONTINUOUS ENVIRONMENT
   Year picker + "2026 in Stories"
   ---------------------------------------------------------- */

.wrap-year-nav,
.wrap-overview {
  position: relative;

  background-color: #fff9fa;

  background-image:
    linear-gradient(
      180deg,
      rgba(255, 250, 251, 0.80),
      rgba(255, 247, 249, 0.58)
    ),
    radial-gradient(
      circle at 14% 34%,
      rgba(246, 214, 217, 0.26),
      transparent 26rem
    ),
    radial-gradient(
      circle at 86% 62%,
      rgba(255, 255, 255, 0.72),
      transparent 28rem
    );

  background-repeat: no-repeat;
}


/* No visual break between picker + overview */

.wrap-year-nav {
  z-index: 2;

  padding-top: 78px;
  padding-bottom: 40px;
}

.wrap-overview {
  z-index: 1;

  padding-bottom: 82px;
}


/* Let the year stats glass feel slightly more luminous */

.wrap-overview__card {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.88),
      rgba(250, 229, 230, 0.50)
    );

  box-shadow:
    0 24px 70px rgba(94, 61, 69, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}


/* ----------------------------------------------------------
   3. YEAR RECORD → MONTHLY ARCHIVE TRANSITION
   ---------------------------------------------------------- */

.wrap-overview::after {
  content: "";

  position: absolute;
  z-index: 3;

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

  height: 112px;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 246, 248, 0.82) 30%,
      rgba(246, 214, 217, 0.34) 54%,
      transparent 82%
    );

  filter: blur(10px);
}


/* ----------------------------------------------------------
   4. MONTHLY ARCHIVE — DREAMY STORY SKY
   ---------------------------------------------------------- */

.monthly-archive {
  isolation: isolate;

  background-color: #fff7f9;

  background-image:
  linear-gradient(
    180deg,
    rgba(255, 249, 250, 0.86) 0%,
    rgba(255, 247, 249, 0.78) 20%,
    rgba(255, 249, 250, 0.74) 70%,
    rgba(255, 247, 249, 0.86) 100%
  ),
  radial-gradient(
    circle at 15% 18%,
    rgba(255, 255, 255, 0.82),
    transparent 24rem
  ),
  radial-gradient(
    circle at 82% 42%,
    rgba(246, 214, 217, 0.18),
    transparent 30rem
  ),
  radial-gradient(
    circle at 24% 76%,
    rgba(246, 214, 217, 0.16),
    transparent 28rem
  ),
    url("/assets/images/shelf-ethereal.jpg");

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

  background-position:
    center,
    center,
    center,
    center,
    center top;

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


/* Pearl veil right at the entrance of the timeline */

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

  position: absolute;
  z-index: 0;

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

  height: 165px;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.76),
      rgba(255, 249, 250, 0.28) 48%,
      transparent 100%
    );
}


/* Existing content stays above the background */

.monthly-archive > .wrap-shell {
  position: relative;
  z-index: 1;
}


/* ----------------------------------------------------------
   5. MOBILE BACKGROUND BEHAVIOR
   ---------------------------------------------------------- */

@media (max-width: 700px) {

  .wrap-hero {
    background-position:
      center,
      center,
      center top;
  }

  .monthly-archive {
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      auto 760px;
  }

}

/* ==========================================================
   WRAP-UPS — SECTION 2 / YEAR RECORD ATMOSPHERE
   ========================================================== */

.wrap-year-nav,
.wrap-overview {
  background-color: #fff9fa;

  background-image:
    linear-gradient(
      rgba(255, 249, 250, 0.84),
      rgba(255, 247, 249, 0.88)
    ),
    url("/assets/images/shelf-test.jpg");

  background-size:
    cover;

  background-position:
    center;

  background-repeat:
    no-repeat;
}

/* Keep decorative atmosphere behind interactive month cards */
.monthly-archive::before,
.monthly-archive::after,
.wrap-overview::after {
  pointer-events: none;
}

.monthly-archive > .wrap-shell {
  position: relative;
  z-index: 2;
}

.month-timeline,
.month-entry,
.month-card {
  position: relative;
  z-index: 3;
}

.month-card {
  pointer-events: auto;
}
/* ==========================================================
   11. ARCHIVE VOLUMES — CELESTIAL YEAR RECORD
   Reframes the year selector + overview as one archival artifact.
   ========================================================== */

.wrap-year-nav {
  padding: 74px 0 28px;
}

.wrap-year-nav .wrap-section-kicker {
  margin-bottom: 28px;
}

.wrap-year-picker {
  position: relative;
  gap: 2px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.wrap-year-picker::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 48px;
  right: 48px;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(200, 121, 133, 0.22) 12%,
    rgba(200, 121, 133, 0.30) 50%,
    rgba(200, 121, 133, 0.22) 88%,
    transparent
  );
}

.wrap-year-picker__years {
  position: relative;
  z-index: 1;
  gap: clamp(10px, 2vw, 28px);
}

.wrap-year-picker__years button {
  position: relative;
  min-width: 72px;
  padding: 16px 13px;
  border-radius: 50%;
  color: var(--dusty-ink);
  background: rgba(255, 249, 250, 0.82);
  box-shadow: 0 0 0 7px rgba(255, 249, 250, 0.72);
  font-size: 1rem;
  transition:
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.wrap-year-picker__years button::before {
  content: "✦";
  position: absolute;
  left: 50%;
  top: -8px;
  color: rgba(200, 121, 133, 0.34);
  font-size: 0.48rem;
  transform: translateX(-50%);
}

.wrap-year-picker__years button:hover {
  color: var(--archive-rose);
  background: rgba(255, 249, 250, 0.96);
  box-shadow:
    0 0 0 7px rgba(255, 249, 250, 0.78),
    0 8px 22px rgba(200, 121, 133, 0.10);
  transform: translateY(-2px);
}

.wrap-year-picker__years button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #dc9aa5, #c87985);
  box-shadow:
    0 0 0 8px rgba(255, 249, 250, 0.90),
    0 0 0 9px rgba(200, 121, 133, 0.12),
    0 12px 28px rgba(200, 121, 133, 0.24);
}

.wrap-year-picker__years button.is-active::before {
  color: var(--archive-rose);
  text-shadow: 0 0 10px rgba(225, 165, 174, 0.55);
}

.wrap-year-picker__arrow {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  background: rgba(255, 249, 250, 0.72);
  box-shadow: 0 0 0 5px rgba(255, 249, 250, 0.56);
}

.wrap-year-picker__arrow:hover {
  background: rgba(250, 229, 230, 0.82);
}

.wrap-overview {
  overflow: hidden;
  padding-top: 8px;
  padding-bottom: 92px;
}

.wrap-overview__shell {
  position: relative;
}

.wrap-overview__shell::before,
.wrap-overview__shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  pointer-events: none;
  border: 1px solid rgba(200, 121, 133, 0.11);
  border-radius: 50%;
  transform: translateX(-50%);
}

.wrap-overview__shell::before {
  top: -88px;
  width: min(780px, 72vw);
  height: 360px;
}

.wrap-overview__shell::after {
  top: -48px;
  width: min(620px, 60vw);
  height: 280px;
  border-color: rgba(200, 121, 133, 0.075);
}

.wrap-overview__heading,
.wrap-overview__card {
  position: relative;
  z-index: 2;
}

.wrap-overview__heading {
  margin-bottom: 54px;
}

.wrap-overview__heading::after {
  content: "♡";
  display: block;
  width: 170px;
  margin: 26px auto 0;
  color: rgba(200, 121, 133, 0.52);
  background: linear-gradient(
    90deg,
    rgba(200, 121, 133, 0),
    rgba(200, 121, 133, 0.24) 42%,
    rgba(200, 121, 133, 0) 58%
  );
  font-family: "Cormorant Garamond", serif;
  font-size: 0.9rem;
  line-height: 1px;
  text-align: center;
}

.wrap-overview .wrap-script {
  margin-bottom: 3px;
  color: var(--cherub-rose);
  font-size: 2.4rem;
}

.wrap-overview__heading h2 {
  font-size: clamp(3rem, 5.5vw, 4.7rem);
  letter-spacing: 0.055em;
}

.wrap-overview__heading > p:last-child {
  margin-top: 13px;
}

.wrap-overview__inscription {
  position: absolute;
  z-index: 1;
  top: 96px;
  display: grid;
  gap: 7px;
  color: rgba(139, 107, 114, 0.26);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  line-height: 1.35;
  text-transform: uppercase;
  pointer-events: none;
}

.wrap-overview__inscription--left {
  left: 18px;
  text-align: left;
}

.wrap-overview__inscription--right {
  right: 18px;
  text-align: right;
}

.wrap-overview__card::before {
  content: "✦";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -12px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 24px;
  color: rgba(200, 121, 133, 0.50);
  background: #fff9fa;
  font-size: 0.62rem;
  transform: translateX(-50%);
}

@media (max-width: 900px) {
  .wrap-overview__inscription {
    display: none;
  }
}

@media (max-width: 600px) {
  .wrap-year-nav {
    padding-top: 66px;
  }

  .wrap-year-picker {
    width: 100%;
  }

  .wrap-year-picker::before {
    left: 34px;
    right: 34px;
  }

  .wrap-year-picker__years {
    gap: 7px;
    padding: 8px 4px;
  }

  .wrap-year-picker__years button {
    min-width: 58px;
    padding: 13px 9px;
    box-shadow: 0 0 0 4px rgba(255, 249, 250, 0.74);
  }

  .wrap-overview__shell::before {
    width: 92vw;
  }

  .wrap-overview__shell::after {
    width: 76vw;
  }

  .wrap-overview .wrap-script {
    font-size: 2.05rem;
  }
}


/* ==========================================================
   12. FINAL YEAR RECORD — ONE CONTINUOUS ENVIRONMENT
   ========================================================== */

.wrap-year-record {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #fff9fa;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 249, 250, 0.78) 0%,
      rgba(255, 247, 249, 0.74) 48%,
      rgba(255, 249, 250, 0.84) 100%
    ),
    url("../assets/images/shelf-test.jpg");
  background-size: cover;
  background-position: center 46%;
  background-repeat: no-repeat;
}

/* IMPORTANT: these two sections no longer paint their own backgrounds. */
.wrap-year-record > .wrap-year-nav,
.wrap-year-record > .wrap-overview {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.wrap-year-record::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto 0;
  height: 130px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.64),
    rgba(255, 249, 250, 0.18) 60%,
    transparent 100%
  );
}

.wrap-year-record > section {
  position: relative;
  z-index: 1;
}

.wrap-hero::before,
.wrap-hero::after,
.wrap-overview::after,
.monthly-archive::before,
.monthly-archive::after,
.wrap-year-record::before {
  pointer-events: none;
}