/* =====================================================
   YUNA'S LIBRARY GLASS OVERRIDE
   Final visual layer for the archive and story pages.
===================================================== */

:root {
  --library-ink: rgba(255, 248, 255, 0.95);
  --library-soft: rgba(255, 238, 250, 0.78);
  --library-muted: rgba(255, 231, 248, 0.58);
  --library-haze: rgba(222, 188, 242, 0.24);
  --library-blush: rgba(255, 190, 220, 0.20);
  --library-line: rgba(255, 238, 255, 0.30);
  --library-line-bright: rgba(255, 242, 255, 0.54);
}

html {
  min-height: 100%;
  background-color: #18143a !important;
  background-image: url("/assets/hand-desktop-bg.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

body {
  min-height: 100vh !important;
  padding: 0 clamp(16px, 3vw, 32px) 5rem !important;
  font-family: "IM Fell English", Georgia, serif !important;
  color: var(--library-ink) !important;
  background: transparent !important;
}

body::after {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 231, 248, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(12, 16, 46, 0.38), rgba(68, 38, 86, 0.18) 42%, rgba(18, 15, 48, 0.58)) !important;
}

body::before {
  filter: saturate(0.98) contrast(1.02) brightness(0.96) !important;
}

nav {
  width: min(920px, 100%) !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 1.45rem 0 0 !important;
  color: var(--library-ink) !important;
}

nav a::after,
.nav-brand::after {
  content: none !important;
  display: none !important;
}

.nav-brand,
.nav-back {
  font-family: Cinzel, Georgia, serif !important;
  font-size: 0.68rem !important;
  line-height: 1.35 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 248, 255, 0.76) !important;
  text-decoration: none !important;
  text-shadow: 0 0 18px rgba(255, 220, 245, 0.20) !important;
}

.nav-back {
  letter-spacing: 0.12em !important;
  opacity: 0.72 !important;
}

.nav-brand:hover,
.nav-back:hover {
  color: rgba(255, 255, 255, 0.96) !important;
  opacity: 1 !important;
}

.hero {
  max-width: 920px !important;
  margin: clamp(3.2rem, 8vh, 5.2rem) auto 0 !important;
}

.hero-eyebrow,
.category,
.card-cat,
.card-date,
.card-read,
.related-label,
.related-card-cat,
.meta-item,
.task-label,
.task-meaning,
.gate-number,
.day-number,
.gift-label {
  color: var(--library-muted) !important;
  text-shadow: none !important;
}

.hero h1,
.parchment h1,
.prose h2,
.card-title,
.related-card-title,
.task-title,
.gift-title {
  color: var(--library-ink) !important;
  text-shadow: 0 0 24px rgba(255, 224, 248, 0.18) !important;
}

.hero-sub,
.subtitle,
.prose p,
.prose em,
.prose strong,
.pull-quote p,
.cta-block p,
.scroll-footer p,
.library-footer p,
.library-footer .manifesto,
.task-item,
.gate-text,
.day-text,
.gift-desc {
  color: var(--library-soft) !important;
}

.hero-divider::before,
.hero-divider::after,
.meta,
.scroll-footer,
.prose h2 {
  border-color: rgba(255, 238, 255, 0.14) !important;
}

.hero-divider::before,
.hero-divider::after {
  background: linear-gradient(to right, transparent, rgba(255, 238, 255, 0.40), transparent) !important;
}

.card-list {
  width: min(920px, 100%) !important;
  max-width: 920px !important;
  gap: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.glass-card {
  grid-template-columns: 4px 1fr !important;
  min-height: 86px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 238, 255, 0.24) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 54%, rgba(209, 151, 206, 0.08)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 16px 18px 30px rgba(255, 255, 255, 0.035),
    0 18px 48px rgba(23, 16, 55, 0.16) !important;
  backdrop-filter: blur(8px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(150%) !important;
}

.glass-card + .glass-card {
  border-top: 1px solid rgba(255, 238, 255, 0.24) !important;
}

.glass-card::before {
  background:
    linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, 0.12) 42%, transparent 62%),
    radial-gradient(circle at 88% 14%, rgba(255, 223, 246, 0.16), transparent 24%) !important;
}

.glass-card:hover,
.glass-card.featured,
.glass-card.featured:hover {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055) 54%, rgba(229, 162, 214, 0.12)) !important;
  border-color: var(--library-line-bright) !important;
  transform: translateY(-2px) !important;
}

.card-spine,
.glass-card.featured .card-spine,
.glass-card:hover .card-spine {
  background: linear-gradient(180deg, rgba(255, 241, 255, 0.32), rgba(255, 211, 236, 0.58), rgba(197, 188, 255, 0.30)) !important;
}

.glass-card.featured .card-title,
.glass-card:hover .card-title {
  color: rgba(255, 255, 255, 0.98) !important;
}

.card-content {
  padding: 1.15rem clamp(1.25rem, 3vw, 2rem) !important;
}

.card-title {
  font-size: clamp(1.02rem, 2.1vw, 1.24rem) !important;
}

.card-read {
  opacity: 0.56 !important;
}

.scroll-wrap {
  max-width: 860px !important;
  margin: 1.7rem auto 0 !important;
}

.parchment {
  overflow: hidden !important;
  border-radius: 28px !important;
  padding: clamp(2.2rem, 5vw, 4.1rem) clamp(1.45rem, 5vw, 4rem) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.18), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(255, 205, 235, 0.12), transparent 30%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.052) 48%, rgba(183, 153, 221, 0.10)) !important;
  border: 1px solid var(--library-line) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 18px 18px 46px rgba(255, 255, 255, 0.038),
    0 30px 82px rgba(17, 13, 48, 0.32) !important;
  backdrop-filter: blur(9px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(150%) !important;
}

.parchment::before {
  inset: 1px !important;
  border-radius: 27px !important;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.18), transparent 18%),
    linear-gradient(118deg, transparent 16%, rgba(255, 255, 255, 0.10) 42%, transparent 62%) !important;
  opacity: 0.68 !important;
  z-index: 1 !important;
}

.parchment::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 231, 248, 0.16), transparent 34%),
    linear-gradient(180deg, transparent, rgba(65, 34, 92, 0.10)) !important;
  z-index: 1 !important;
}

.parchment-inner {
  position: relative !important;
  z-index: 3 !important;
}

.category {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.4rem 0.7rem !important;
  margin-bottom: 1.35rem !important;
  border: 1px solid rgba(255, 238, 255, 0.20) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.parchment h1 {
  font-size: clamp(1.85rem, 5vw, 2.8rem) !important;
  line-height: 1.18 !important;
  margin-bottom: 0.8rem !important;
}

.subtitle {
  font-size: clamp(1.05rem, 2.3vw, 1.22rem) !important;
  line-height: 1.65 !important;
}

.meta {
  border-bottom: 1px solid rgba(255, 238, 255, 0.14) !important;
  gap: 1rem !important;
}

.meta-dot {
  background: rgba(255, 238, 255, 0.44) !important;
}

.prose {
  max-width: 680px !important;
  margin: 0 auto !important;
}

.prose p {
  font-size: clamp(1.05rem, 2vw, 1.15rem) !important;
  line-height: 1.9 !important;
  text-align: left !important;
  hyphens: none !important;
}

.prose p.drop-cap::first-letter {
  color: rgba(255, 236, 251, 0.98) !important;
  text-shadow:
    0 0 18px rgba(255, 205, 237, 0.34),
    0 0 44px rgba(192, 166, 255, 0.20) !important;
}

.prose h2 {
  padding-top: 1.35rem !important;
  border-top: 1px solid rgba(255, 238, 255, 0.16) !important;
  letter-spacing: 0.18em !important;
}

.pull-quote,
.cta-block,
.task-item,
.gate-item,
.day-item,
.gift-item {
  border: 1px solid rgba(255, 238, 255, 0.24) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.13), transparent 30%),
    rgba(255, 255, 255, 0.055) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(16, 12, 44, 0.12) !important;
  backdrop-filter: blur(6px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
}

.pull-quote {
  border-left: 1px solid rgba(255, 238, 255, 0.24) !important;
  border-right: 1px solid rgba(255, 238, 255, 0.24) !important;
}

.cta-block::before {
  color: rgba(255, 238, 255, 0.86) !important;
  background: rgba(56, 34, 86, 0.72) !important;
  border: 1px solid rgba(255, 238, 255, 0.18) !important;
  border-radius: 999px !important;
}

.cta-btn {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 238, 255, 0.34) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--library-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 30px rgba(18, 14, 48, 0.16) !important;
  backdrop-filter: blur(7px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(150%) !important;
}

.cta-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 248, 255, 0.62) !important;
  color: #fff !important;
}

.tasks,
.gates,
.nine-days,
.gifts {
  display: grid !important;
  gap: 1rem !important;
}

.gates {
  border-left: 1px solid rgba(255, 238, 255, 0.18) !important;
  padding-left: clamp(0.8rem, 2vw, 1.35rem) !important;
}

.gate-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 0.45rem !important;
  padding: 1rem 1.15rem 1.05rem !important;
  overflow: hidden !important;
}

.gate-number {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: clamp(0.54rem, 1.45vw, 0.62rem) !important;
  line-height: 1.35 !important;
  letter-spacing: clamp(0.12em, 0.8vw, 0.18em) !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

.gate-text {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.freq-table {
  width: 100% !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(255, 238, 255, 0.24) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

.freq-table th,
.freq-table td {
  color: var(--library-soft) !important;
  border-color: rgba(255, 238, 255, 0.12) !important;
  background: transparent !important;
}

.freq-table th {
  color: var(--library-ink) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

.related {
  max-width: 860px !important;
}

.related-grid {
  gap: 12px !important;
  border: 0 !important;
  background: transparent !important;
}

.related-card {
  border: 1px solid rgba(255, 238, 255, 0.24) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.13), transparent 30%),
    rgba(255, 255, 255, 0.055) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 44px rgba(16, 12, 44, 0.12) !important;
  backdrop-filter: blur(6px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
}

.related-card:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 248, 255, 0.48) !important;
}

.library-footer {
  max-width: 920px !important;
}

@media (max-width: 700px) {
  html {
    background-image: url("/assets/hand-mobile-bg.webp") !important;
  }

  body {
    padding-inline: 14px !important;
  }

  nav {
    padding-top: 1.1rem !important;
    gap: 1rem !important;
  }

  .nav-brand,
  .nav-back {
    font-size: 0.58rem !important;
    letter-spacing: 0.12em !important;
  }

  .hero {
    margin-top: 3rem !important;
  }

  .hero-eyebrow,
  .card-cat,
  .card-date,
  .meta-item,
  .category {
    letter-spacing: 0.18em !important;
  }

  .card-inner {
    align-items: flex-start !important;
  }

  .glass-card {
    min-height: auto !important;
    border-radius: 18px !important;
  }

  .parchment {
    border-radius: 22px !important;
    padding: 2.1rem 1.25rem 2.5rem !important;
  }

  .parchment::before {
    border-radius: 21px !important;
  }

  .pull-quote,
  .cta-block,
  .related-card,
  .task-item,
  .gate-item,
  .day-item,
  .gift-item {
    border-radius: 18px !important;
    padding: 1.35rem !important;
  }
}