/* WenderSong. Vista Night palette: Fraunces display, Nunito Sans body, lamplight accent. */
:root {
  --night:#1C2340; --deep:#111527; --lamp:#E9B56A; --cream:#F4EFE2;
  --dusk:#8E93B4; --panel:#161C33; --line:#2A3152;
  --disp:'Fraunces', Georgia, serif;
  --body:'Nunito Sans', system-ui, -apple-system, Segoe UI, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
html { background:var(--deep); }
body {
  background:linear-gradient(160deg, var(--night) 0%, var(--deep) 900px);
  background-repeat:no-repeat;
  color:var(--cream); font-family:var(--body); line-height:1.6;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
a { color:inherit; }
.wrap { max-width:1040px; margin:0 auto; padding:0 24px; }
.disp { font-family:var(--disp); }
.lamp { color:var(--lamp); }
.dusk { color:var(--dusk); }

/* header / footer */
.site-head, .site-foot { padding:22px 0; }
.site-foot { margin-top:80px; padding:40px 0 60px; border-top:1px solid var(--line); color:var(--dusk); font-size:14px; }
.wordmark { font-family:var(--disp); font-weight:600; font-size:24px; letter-spacing:.01em; text-decoration:none; }
.eyebrow { font-size:13px; letter-spacing:.30em; text-transform:uppercase; color:var(--dusk); font-weight:700; }

/* buttons */
.btn {
  display:inline-block; padding:15px 30px; border-radius:999px; font-weight:700;
  text-decoration:none; font-size:16px; transition:transform .12s ease, opacity .12s ease;
}
.btn:hover { transform:translateY(-1px); }
.btn-gold { background:var(--lamp); color:var(--deep); }
.btn-ghost { border:1px solid #ffffff33; color:var(--cream); }

/* moon accent */
.moon { width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle at 40% 38%, #F6D9A6, var(--lamp) 66%, rgba(233,181,106,0) 72%);
  box-shadow:0 0 60px 8px rgba(233,181,106,.22); }

/* lyric block */
.lyrics { font-family:var(--disp); font-size:20px; line-height:1.5; }
.lyrics .sec { display:block; margin:22px 0 6px; font-family:var(--body);
  font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--dusk); font-weight:700; }
.lyrics .nm { color:var(--lamp); }

.card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px; }
.pill { display:inline-block; padding:8px 16px; border-radius:999px; border:1px solid var(--line);
  color:var(--dusk); font-size:14px; }
audio { width:100%; margin-top:8px; }