:root{
  --teal:#6FCBDA; --teal-deep:#1C6A92; --teal-soft:#BDEAF1;
  --coral:#F26A5A; --coral-soft:#FBC4BB;
  --yellow:#F7C63E; --blue:#2E91C4;
  --cream:#FDF5E6; --cream-2:#FBEFD8;
  --ink:#225268; --ink-soft:#6D8A99;
  --clay-out:8px 8px 22px rgba(28,106,146,.18), -7px -7px 18px rgba(255,255,255,.85);
  --clay-out-lg:14px 16px 38px rgba(28,106,146,.22), -10px -10px 24px rgba(255,255,255,.9);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
::selection{background:var(--coral);color:#fff}
body{font-family:'Nunito',sans-serif;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--blue)}

nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:rgba(253,245,230,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 4px 18px rgba(28,106,146,.08)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(28,106,146,.2))}
.brand-name{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.2rem;line-height:1;color:var(--ink)}
.brand-name .k{color:var(--coral)} .brand-name .y{color:var(--blue)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--coral);color:#fff;font-family:'Baloo 2',cursive;font-weight:700;font-size:.9rem;padding:10px 20px;border-radius:30px;text-decoration:none;box-shadow:6px 6px 16px rgba(242,106,90,.35);transition:transform .18s}
.nav-cta:hover{transform:translateY(-2px)}

.song-page{max-width:1080px;margin:0 auto;padding:30px 24px 70px}
.crumb{font-size:.85rem;font-weight:700;color:var(--ink-soft);margin-bottom:24px}
.crumb a{color:var(--ink-soft);text-decoration:none}
.crumb a:hover{color:var(--coral)}
.crumb b{color:var(--ink)}
.crumb span{margin:0 6px;opacity:.6}

.hero-song{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:#fff;border-radius:36px;padding:36px;box-shadow:var(--clay-out-lg)}
@media(max-width:780px){.hero-song{grid-template-columns:1fr;gap:26px;padding:24px}}
.media .cover{width:100%;height:auto;border-radius:26px;display:block;box-shadow:var(--clay-out)}
.embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:26px;overflow:hidden;box-shadow:var(--clay-out);background:#000}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.meta .song-tag{display:inline-block;font-family:'Baloo 2',cursive;font-weight:700;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;padding:5px 14px;border-radius:30px;margin-bottom:14px}
.meta h1{font-family:'Baloo 2',cursive;font-weight:800;font-size:clamp(1.8rem,4.4vw,2.8rem);line-height:1.08;color:var(--ink)}
.meta .sub{font-size:1.05rem;color:var(--ink-soft);font-weight:700;margin-top:8px}
.meta .lede{font-size:1rem;color:var(--ink-soft);font-weight:600;margin-top:16px;line-height:1.65}

.listen{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.lbtn{display:inline-flex;align-items:center;gap:8px;font-family:'Baloo 2',cursive;font-weight:700;font-size:.95rem;padding:13px 22px;border-radius:34px;color:#fff;text-decoration:none;transition:transform .16s}
.lbtn:hover{transform:translateY(-3px)}
.lbtn.ytm{background:#FF0000;box-shadow:6px 6px 16px rgba(255,0,0,.3)}
.lbtn.sp{background:#1DB954;color:#06371d;box-shadow:6px 6px 16px rgba(29,185,84,.3)}
.lbtn.ap{background:#fc3c44;box-shadow:6px 6px 16px rgba(252,60,68,.3)}

.follow{margin-top:30px;padding-top:22px;border-top:1px solid rgba(28,106,146,.12)}
.follow-l{display:block;font-weight:700;color:var(--ink);font-size:.9rem;margin-bottom:12px}
.follow-row{display:flex;flex-wrap:wrap;gap:10px}
.fbtn{font-family:'Baloo 2',cursive;font-weight:700;font-size:.85rem;padding:9px 18px;border-radius:30px;color:#fff;text-decoration:none;transition:transform .16s}
.fbtn:hover{transform:translateY(-2px)}
.fbtn.yt{background:#FF0000} .fbtn.ig{background:#C13584} .fbtn.tt{background:#010101}

.related{margin-top:56px}
.related h2{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.5rem;color:var(--ink);margin-bottom:22px;text-align:center}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:780px){.rgrid{grid-template-columns:repeat(2,1fr)}}
.rcard{text-decoration:none;background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--clay-out);transition:transform .22s,box-shadow .22s;display:flex;flex-direction:column}
.rcard:hover{transform:translateY(-6px);box-shadow:var(--clay-out-lg)}
.rcard img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.rname{font-family:'Baloo 2',cursive;font-weight:700;font-size:.92rem;color:var(--ink);padding:13px 14px 16px;line-height:1.25}

/* ===== Album tracklist ===== */
.tracklist-wrap{margin-top:52px}
.tracklist-wrap h2{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.5rem;color:var(--ink);margin-bottom:22px;text-align:center}
.tracklist{list-style:none;max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.track{display:flex;align-items:center;gap:16px;background:#fff;border-radius:22px;padding:14px 20px;box-shadow:var(--clay-out);flex-wrap:wrap}
.track .tnum{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.1rem;color:var(--teal-deep);min-width:34px;text-align:center;opacity:.7}
.tmeta{flex:1 1 200px;min-width:0}
.tmeta .tname{display:block;font-family:'Baloo 2',cursive;font-weight:700;font-size:1.05rem;color:var(--ink);line-height:1.2}
.tmeta .tsub{display:block;font-size:.85rem;color:var(--ink-soft);font-weight:600;margin-top:2px}
.tlinks{display:flex;flex-wrap:wrap;gap:8px}
.tlink{display:inline-flex;align-items:center;gap:6px;font-family:'Baloo 2',cursive;font-weight:700;font-size:.82rem;padding:8px 15px;border-radius:26px;color:#fff;text-decoration:none;transition:transform .16s}
.tlink:hover{transform:translateY(-2px)}
.tlink.yt{background:#FF0000} .tlink.sp{background:#1DB954;color:#06371d} .tlink.ap{background:#fc3c44}
@media(max-width:560px){.track{gap:10px}.tlink{font-size:.78rem;padding:7px 13px}}

footer{background:var(--teal-deep);color:#fff;padding:48px 24px 36px}
.foot-inner{max-width:1080px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.foot-inner .brand-name{color:#fff}
.foot-inner .brand-name .k{color:var(--yellow)} .foot-inner .brand-name .y{color:var(--teal-soft)}
.foot-inner p{font-size:.92rem;font-weight:600;color:rgba(255,255,255,.72)}
.foot-soc{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.foot-soc a{font-size:.85rem;font-weight:700;color:#fff;text-decoration:none;background:rgba(255,255,255,.12);padding:8px 16px;border-radius:30px;transition:background .2s}
.foot-soc a:hover{background:var(--coral)}
.copy{font-size:.8rem;color:rgba(255,255,255,.6);margin-top:6px}