/* =====================================================
   COZYPAWTALES — page-specific styles
   Load order: fonts.css → style.css → cozypawtales.css
   (this file relies on the variables defined in style.css)
   ===================================================== */

:root {
  --cozy-cream: #fff7f0;
  --cozy-pink-soft: #ffe7f0;
  --cozy-peach: #fff1e6;
  --cozy-amber: #ff8a4c;
  --cozy-ice: #5fb0e6;
  --cozy-pink: #ff6b9d;
  --cozy-moon: #8179d6;
  --cozy-sun: #f3b83f;
  --cozy-water: #72b9d8;
  --cozy-purple: #66558f;

  /* Main dark text colour for the complete CozyPawTales page. */
  --ink: var(--cozy-purple);
}

body { background: var(--cozy-cream); }
.cozy-page .topnav { background: rgba(255, 247, 240, 0.88); }

/* keep the footer dark even though --ink is overridden to purple above */
.footer { background: #2a1f3d; }

/* ---------- QUICK LINKS AT THE TOP ---------- */
.cozy-top-links {
  padding: .9rem var(--pad);
  background: linear-gradient(90deg, #fff8dc 0%, #fff0df 50%, #fff8dc 100%);
  border-bottom: 1px solid rgba(42, 31, 61, .08);
}

.cozy-top-links-inner {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  flex-wrap: wrap;
}

.cozy-top-links-label {
  margin-right: .25rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.cozy-top-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: .5rem 1rem;
  border: 1.5px solid rgba(255, 107, 157, .28);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--cozy-pink);
  font-size: .84rem;
  font-weight: 700;
  transition: transform .25s, background .25s, color .25s, box-shadow .25s;
}

.cozy-top-link:hover {
  transform: translateY(-2px);
  border-color: var(--cozy-pink);
  background: var(--cozy-pink);
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(255,107,157,.7);
}

.cozy-top-link--kofi {
  border-color: transparent;
  background: linear-gradient(120deg, #ff6b9d, #ff8a4c);
  color: #fff;
  box-shadow: 0 10px 22px -14px rgba(255,107,157,.7);
}

.cozy-top-link--kofi:hover {
  background: linear-gradient(120deg, #ff6b9d, #ff8a4c);
  color: #fff;
}

/* ---------- HERO ---------- */
.cozy-hero {
  position: relative;
  padding: 4.5rem var(--pad) 5rem;
  background: linear-gradient(180deg, #fff7f0 0%, #ffe7f0 100%);
  text-align: center;
  overflow: hidden;
}

.cozy-hero-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cozy-hero-deco span {
  position: absolute;
  border-radius: 50%;
  filter: blur(75px);
  opacity: .42;
}

.cozy-hero-deco .c1 {
  top: -10%;
  left: -7%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, var(--cozy-pink), transparent 70%);
}

.cozy-hero-deco .c2 {
  right: -8%;
  bottom: -10%;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, var(--cozy-amber), transparent 70%);
  opacity: .32;
}

.cozy-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
}

.cozy-kicker {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cozy-pink);
}

.cozy-title {
  margin-bottom: .7rem;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 8vw, 5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.04em;
}

.cozy-title em {
  font-style: italic;
  font-weight: 500;
}

.cozy-rainbow-text {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--r1),
    var(--r2),
    var(--r3),
    var(--r4),
    var(--r5),
    var(--r6),
    var(--r7),
    var(--r1)
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cozy-rainbow-shift 8s linear infinite;
}

@keyframes cozy-rainbow-shift {
  from { background-position: 0% 50%; }
  to { background-position: 240% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cozy-rainbow-text { animation: none; }
}

.cozy-tag {
  margin-bottom: 1.3rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.75rem);
  font-style: italic;
  font-weight: 300;
  color: var(--ink-soft);
}

.cozy-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.1rem;
  margin-bottom: 0;
  border: 1.5px solid rgba(255, 107, 157, .30);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-soft);
}

/* ---------- SHARED SECTION STYLES ---------- */
.cozy-section { padding: 5rem var(--pad); }
.cozy-section-inner { max-width: 1060px; margin: 0 auto; }

.cozy-head {
  max-width: 760px;
  margin: 0 auto 2.7rem;
  text-align: center;
}

.cozy-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.35rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.cozy-head h2 em {
  color: var(--cozy-pink);
  font-style: italic;
  font-weight: 500;
}

.cozy-title-amber,
.cozy-title-frosty {
  position: relative;
  display: inline-block;
  font-style: italic;
  font-weight: 500;
}

.cozy-title-amber {
  color: #e96824;
  text-shadow: 0 5px 18px rgba(255, 138, 76, .16);
}

.cozy-title-frosty {
  color: #3387c7;
  text-shadow: 0 5px 18px rgba(95, 176, 230, .18);
}

.cozy-head p {
  margin-top: .85rem;
  color: var(--ink-soft);
}

/* ---------- CHARACTER CARDS ---------- */
.cozy-main-bg {
  background: linear-gradient(90deg, #e5f4ff 0%, #f5efff 48%, #fff0e2 100%);
}

.cozy-character-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 860px;
  margin: 0 auto;
}

.cozy-character-card {
  overflow: hidden;
  border: 1.5px solid rgba(42, 31, 61, .08);
  border-radius: 28px;
  text-align: center;
  box-shadow: 0 18px 42px -30px rgba(42,31,61,.35);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s;
}

.cozy-character-card:hover {
  transform: translateY(-5px) rotate(-.35deg);
  box-shadow: 0 28px 54px -30px rgba(42,31,61,.42);
}

.cozy-character-card--amber {
  background: linear-gradient(160deg, #fff2e8, #ffd7bd);
}

.cozy-character-card--frosty {
  background: linear-gradient(160deg, #eff8ff, #cfe9fa);
}

.cozy-character-media {
  position: relative;
  min-height: 250px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255,255,255,.34);
}

.cozy-character-media img {
  width: 100%;
  height: 270px;
  object-fit: cover;
}

.cozy-media-fallback {
  display: none;
  font-size: 4rem;
}

.cozy-character-media.is-empty .cozy-media-fallback,
.cozy-friend-media.is-empty .cozy-media-fallback,
.cozy-more-friend.is-empty .cozy-media-fallback,
.cozy-story-picture.is-empty .cozy-media-fallback {
  display: block;
}

.cozy-character-copy {
  padding: 1.7rem 1.7rem 2rem;
}

.cozy-character-copy h3,
.cozy-friend-card h3 {
  margin-bottom: .2rem;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
}

.cozy-character-card--amber h3 { color: #df5e1f; }
.cozy-character-card--frosty h3 { color: #2d7db8; }

.cozy-character-role {
  margin-bottom: .9rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.cozy-character-copy p,
.cozy-friend-card p {
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.6;
}

/* ---------- UNIVERSE / FRIENDS ---------- */
.cozy-universe-bg {
  background: linear-gradient(180deg, #ffe7f0 0%, #fff3e8 100%);
}

.cozy-universe-intro {
  max-width: 740px;
  margin: -1rem auto 2.4rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid rgba(255, 107, 157, .18);
  border-radius: 20px;
  background: rgba(255,255,255,.58);
  text-align: center;
  color: var(--ink-soft);
}

.cozy-friends-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.cozy-friend-card {
  overflow: hidden;
  border: 1.5px solid rgba(42, 31, 61, .08);
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  text-align: center;
  box-shadow: 0 18px 42px -30px rgba(42,31,61,.34);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s;
}

.cozy-friend-card:hover {
  transform: translateY(-5px) rotate(.35deg);
  box-shadow: 0 28px 54px -30px rgba(42,31,61,.42);
}

.cozy-friend-media {
  min-height: 250px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cozy-friend-media--otters {
  background: linear-gradient(160deg, #e8f8ff, #c8ebf7);
}

.cozy-friend-media--sheep {
  background: linear-gradient(160deg, #f0ecff, #fff0c9);
}

.cozy-friend-media img {
  width: 100%;
  height: 270px;
  object-fit: cover;
}

.cozy-friend-card-copy { padding: 1.7rem 1.7rem 2rem; }
.cozy-friend-card--otters h3 { color: #3185a8; }
.cozy-friend-card--sheep h3 { color: #8070c7; }

/* ---------- MORE FRIENDS — IMAGE ONLY ---------- */
.cozy-more-friends-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  max-width: 900px;
  margin: 2rem auto 0;
  padding-top: 2rem;
  border-top: 1px dashed rgba(42, 31, 61, .16);
}

.cozy-more-friend {
  min-height: 210px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 8px;
  border: 1.5px solid rgba(42, 31, 61, .08);
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 18px 38px -28px rgba(42,31,61,.38);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}

.cozy-more-friend:nth-child(3n + 1) { transform: rotate(-1.2deg); }
.cozy-more-friend:nth-child(3n + 2) { transform: rotate(1deg); }
.cozy-more-friend:nth-child(3n) { transform: rotate(-.5deg); }

.cozy-more-friend:hover {
  transform: translateY(-4px) rotate(0deg);
  box-shadow: 0 26px 48px -28px rgba(42,31,61,.44);
}

.cozy-more-friend img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 15px;
}

/* ---------- BEHIND THE SCENES ---------- */
.cozy-behind-bg {
  background: linear-gradient(180deg, #edf4ff 0%, #f3ecff 58%, #fff7f0 100%);
}

.cozy-behind-head h2 {
  color: var(--cozy-purple);
}

.cozy-behind-head h2 em {
  background: linear-gradient(90deg, #8a72d5, var(--cozy-pink), var(--cozy-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cozy-video {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(640px, 100%);
  margin: 0 auto 1rem;
  overflow: hidden;
  border-radius: 24px;
  background:
    url('cozypawtalesimages/cozy-bts.jpg') center/cover no-repeat,
    linear-gradient(135deg, #ff9ec0, #ffd0a8);
  box-shadow: 0 22px 50px -22px rgba(255, 107, 157, .55);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s;
}

.cozy-video:hover {
  transform: translateY(-4px) scale(1.008);
  box-shadow: 0 30px 60px -22px rgba(255,107,157,.62);
}

.cozy-video .play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  padding-left: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: var(--cozy-pink);
  font-size: 1.5rem;
  box-shadow: 0 10px 24px -6px rgba(0,0,0,.3);
  transform: translate(-50%, -50%);
  transition: transform .3s, background .3s, color .3s;
}

.cozy-video:hover .play {
  background: var(--cozy-pink);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.1);
}

.cozy-video-cap {
  margin-bottom: 3rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
}

.cozy-story-layout {
  display: grid;
  grid-template-columns: minmax(0, 680px) 230px;
  gap: 2.4rem;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}

.cozy-letter {
  font-size: 1.04rem;
  line-height: 1.78;
  color: var(--ink-soft);
}

.cozy-letter p { margin-bottom: 1.1rem; }

.cozy-letter .cozy-opening {
  margin-bottom: 1.7rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
}

.cozy-story-chapter {
  margin: 0;
  padding: 0;
}

.cozy-story-chapter h3 {
  position: relative;
  display: inline-block;
  margin-bottom: 1.15rem;
  padding: 0 .15rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 550;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink);
}

.cozy-heading-word {
  font-style: italic;
  font-weight: 650;
}

.cozy-heading-word--pink { color: #ef6f9f; }
.cozy-heading-word--purple { color: #9a7bc4; }
.cozy-heading-word--orange { color: #e87632; }
.cozy-heading-word--blue { color: #438fc7; }
.cozy-heading-word--gold { color: #d98b27; }

.cozy-heading-word--rainbow {
  background: linear-gradient(90deg, #ef6f9f, #e87632, #d9a42b, #4b9bd3, #8a72d5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cozy-story-chapter--intro {
  --chapter-accent: #a16ed2;
  --chapter-accent-2: #ff83b3;
}

.cozy-story-chapter--origin {
  --chapter-accent: #ef7b35;
  --chapter-accent-2: #ffb047;
}

.cozy-story-chapter--characters {
  --chapter-accent: #4b9bd3;
  --chapter-accent-2: #9379db;
}

.cozy-story-chapter--work {
  --chapter-accent: #ec6e9d;
  --chapter-accent-2: #f4a341;
}

.cozy-letter strong {
  color: var(--ink);
  font-weight: 760;
}

/* Small rainbow dividers between the story chapters */
.cozy-story-divider {
  position: relative;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: .45rem 0 1.65rem;
}

.cozy-story-divider::before {
  content: "";
  width: min(480px, calc(100% - 1.5rem));
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--r1) 10%, var(--r2) 23%, var(--r3) 36%,
    var(--r4) 50%, var(--r5) 64%, var(--r6) 77%,
    var(--r7) 90%,
    transparent 100%);
  opacity: .68;
}

.cozy-story-divider span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(255, 107, 157, .18);
  border-radius: 50%;
  background: #f2efff;
  color: var(--cozy-pink);
  font-size: .92rem;
  box-shadow: 0 8px 20px -16px rgba(42,31,61,.55);
}

.cozy-pull {
  margin: 2rem 0;
  padding: .3rem 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--cozy-pink);
}

.cozy-story-gallery {
  position: sticky;
  top: 105px;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.cozy-story-picture {
  min-height: 190px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 8px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 38px -24px rgba(42,31,61,.35);
}

.cozy-story-picture:nth-child(1) { transform: rotate(2deg); }
.cozy-story-picture:nth-child(2) { transform: rotate(-2deg); }
.cozy-story-picture:nth-child(3) { transform: rotate(1.2deg); }

.cozy-story-picture img {
  width: 100%;
  min-height: 174px;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.cozy-story-picture .cozy-media-fallback {
  padding: 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink-mute);
}

/* ---------- SUPPORT ---------- */
.cozy-support-bg {
  background: linear-gradient(180deg, #fff8dc 0%, #fff1df 100%);
  text-align: center;
}

.cozy-support h2 {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.35rem);
  font-weight: 300;
  letter-spacing: -.025em;
}

.cozy-support h2 em {
  color: var(--cozy-pink);
  font-style: italic;
  font-weight: 500;
}

.cozy-support-lede {
  max-width: 52ch;
  margin: 0 auto 2rem;
  color: var(--ink-soft);
}

.cozy-kofi {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1.05rem 2.4rem;
  border-radius: 999px;
  background: linear-gradient(120deg, #ff6b9d, #ff8a4c);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 700;
  box-shadow: 0 14px 30px -10px rgba(255, 107, 157, .55);
  transition: transform .3s, box-shadow .3s;
}

.cozy-kofi:hover {
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 20px 40px -10px rgba(255,107,157,.65);
}

.cozy-support-note {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .03em;
  color: var(--ink-mute);
}

.cozy-find {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: 2.8rem;
}

.cozy-find a {
  padding: .7rem 1.4rem;
  border: 2px solid var(--cozy-pink);
  border-radius: 999px;
  background: #fff;
  color: var(--cozy-pink);
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 600;
  transition: all .3s;
}

.cozy-find a:hover {
  background: var(--cozy-pink);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .cozy-story-layout {
    grid-template-columns: 1fr;
    max-width: 720px;
  }

  .cozy-story-gallery {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    order: -1;
  }

  .cozy-story-picture {
    min-height: 150px;
  }
}

@media (max-width: 700px) {
  .cozy-more-friends-grid { grid-template-columns: 1fr; max-width: 520px; }
  .cozy-more-friend img { height: 240px; }
  .cozy-section { padding: 4rem var(--pad); }

  .cozy-character-grid,
  .cozy-friends-grid {
    grid-template-columns: 1fr;
  }

  .cozy-character-media,
  .cozy-friend-media {
    min-height: 220px;
  }

  .cozy-character-media img,
  .cozy-friend-media img {
    height: 240px;
  }
}

@media (max-width: 620px) {
  .cozy-top-links { padding: .8rem var(--pad); }
  .cozy-top-links-label {
    width: 100%;
    margin: 0 0 .15rem;
    text-align: center;
  }
  .cozy-top-link {
    flex: 1 1 calc(50% - .65rem);
    max-width: 180px;
  }
}

@media (max-width: 520px) {
  .cozy-hero { padding-top: 2.5rem; }

  .cozy-chip {
    max-width: 100%;
    white-space: normal;
    justify-content: center;
  }

  .cozy-story-chapter {
    padding: 1.35rem 1.2rem .35rem;
  }

  .cozy-story-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .cozy-story-picture:last-child {
    grid-column: 1 / -1;
    max-width: 220px;
    width: 100%;
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cozy-character-card,
  .cozy-friend-card,
  .cozy-video,
  .cozy-kofi,
  .cozy-find a,
  .cozy-top-link {
    transition: none;
  }
}

/* ---------- SONGS (frost & flame) ---------- */
.cozy-songs-bg {
  background: linear-gradient(180deg, #eaf3ff 0%, #fdeede 100%);
}

.cozy-songs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.cozy-song {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid rgba(42, 31, 61, .08);
  border-radius: 26px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 18px 42px -30px rgba(42,31,61,.34);
}

.cozy-song-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}

.cozy-song-thumb--frost {
  background:
    url('cozypawtalesimages/song-frost.jpg') center/cover no-repeat,
    linear-gradient(135deg, #9cc7ef, #cfe9fa);
}

.cozy-song-thumb--flame {
  background:
    url('cozypawtalesimages/song-flame.jpg') center/cover no-repeat,
    linear-gradient(135deg, #ff9ec0, #ffce9c);
}

.cozy-song-thumb .play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding-left: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: var(--cozy-pink);
  font-size: 1.3rem;
  box-shadow: 0 10px 24px -6px rgba(0,0,0,.3);
  transform: translate(-50%, -50%);
  transition: transform .3s, background .3s, color .3s;
}

.cozy-song-thumb:hover .play {
  background: var(--cozy-pink);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.1);
}

.cozy-song-body {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.5rem 1.6rem 1.7rem;
}

.cozy-song-body h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
}

.cozy-song--frost h3 { color: #2d7db8; }
.cozy-song--flame h3 { color: #df5e1f; }

.cozy-song-note {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.cozy-lyrics {
  margin-top: .5rem;
  padding-top: .9rem;
  border-top: 1px dashed rgba(42, 31, 61, .14);
}

.cozy-lyrics > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem;
  border: 1.5px solid rgba(255, 107, 157, .3);
  border-radius: 999px;
  background: #fff;
  color: var(--cozy-pink);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  transition: background .25s, color .25s;
}

.cozy-lyrics > summary::-webkit-details-marker { display: none; }

.cozy-lyrics > summary::after {
  content: "▾";
  font-size: .95rem;
  line-height: 1;
  transition: transform .25s;
}

.cozy-lyrics[open] > summary::after { transform: rotate(180deg); }

.cozy-lyrics > summary:hover {
  background: var(--cozy-pink);
  color: #fff;
}

.cozy-lyrics-body { margin-top: 1.1rem; }

.cozy-lyric-label {
  display: block;
  margin: 1.1rem 0 .35rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cozy-pink);
}

.cozy-lyric-label:first-child { margin-top: 0; }

.cozy-lyrics-body p {
  margin: 0 0 .2rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

@media (max-width: 700px) {
  .cozy-songs-grid { grid-template-columns: 1fr; max-width: 520px; }
}