*,*::before,*::after{box-sizing:border-box}
:root{
 --void:#070910; --deep:#0d1320; --mist:#151d2e;
 --dim:#7f8daa; --soft:#bcc7db; --pale:#e8edf6; --moon:#93accd;
 --display:"Didot","Hoefler Text","Bodoni 72",Georgia,serif;
 --book:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
 --util:ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--soft);font-family:var(--book);
 font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
 background:
  radial-gradient(60% 45% at 22% 0%,rgba(80,110,170,.16),transparent 70%),
  radial-gradient(50% 40% at 88% 22%,rgba(60,80,140,.11),transparent 72%)}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:72px 26px 110px}

header{margin-bottom:46px}
h1{font-family:var(--display);font-weight:400;color:var(--pale);margin:0;
 font-size:clamp(31px,5.6vw,50px);line-height:1.08;letter-spacing:-.012em}
h1 em{display:block;font-style:normal;font-size:.42em;letter-spacing:.2em;
 text-transform:uppercase;color:var(--dim);margin-top:19px;font-family:var(--util);font-weight:450}
.count{font-family:var(--util);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
 color:var(--dim);margin:28px 0 0;opacity:.85}
nav{margin-top:26px;display:flex;gap:26px;font-family:var(--util);font-size:11px;
 letter-spacing:.15em;text-transform:uppercase}
nav a{color:var(--dim);text-decoration:none;padding-bottom:6px;border-bottom:1px solid transparent;
 transition:color .45s ease,border-color .45s ease}
nav a:hover{color:var(--soft)}
nav a[aria-current]{color:var(--pale);border-bottom-color:var(--moon)}

.search{margin:34px 0 0;max-width:330px}
.search input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--mist);
 color:var(--pale);font-family:var(--book);font-size:15px;padding:9px 2px;outline:none;
 transition:border-color .5s ease}
.search input::placeholder{color:var(--dim);opacity:.6}
.search input:focus{border-bottom-color:var(--moon)}
.none{color:var(--dim);font-size:15px;padding:52px 0}

/* ---- comments wall ---- */
.wall{columns:3 300px;column-gap:22px;margin-top:44px}
.b{break-inside:avoid;background:var(--deep);border-radius:16px;padding:24px 25px 21px;
 margin:0 0 22px;display:block;width:100%;text-align:left;border:0;color:inherit;font:inherit;
 cursor:pointer;position:relative;
 animation:rise .9s cubic-bezier(.22,.68,.28,1) backwards;animation-delay:calc(var(--i)*22ms);
 transition:background .55s ease,transform .55s ease}
.b:hover{background:#111827;transform:translateY(-2px)}
.b:focus{outline:none}
.b:focus-visible{outline:1px solid var(--moon);outline-offset:5px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.b .t{font-family:var(--book);font-size:16px;line-height:1.72;color:var(--soft);margin:0;
 white-space:pre-wrap;overflow-wrap:anywhere;max-height:20em;overflow:hidden}
.b.open .t{max-height:none}
.b.clip:not(.open)::after{content:"";position:absolute;left:0;right:0;height:5.5em;
 bottom:74px;background:linear-gradient(transparent,var(--deep));pointer-events:none;
 border-radius:0 0 16px 16px}
.b:hover.clip:not(.open)::after{background:linear-gradient(transparent,#111827)}
.b .meta{margin-top:16px;font-family:var(--util);font-size:11.5px;color:var(--moon);
 letter-spacing:.03em}
.b .meta .lk{color:var(--dim);opacity:.8;margin-left:9px;letter-spacing:.06em}
.b .song{margin-top:11px;font-family:var(--util);font-size:10px;letter-spacing:.11em;
 text-transform:uppercase;color:var(--dim);opacity:.72;line-height:1.6}
.more{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.mb{font-family:var(--util);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--dim);background:transparent;border:1px solid var(--mist);border-radius:999px;
 padding:11px 24px;cursor:pointer;transition:color .45s ease,border-color .45s ease}
.mb:hover{color:var(--pale);border-color:var(--moon)}

/* ---- songs grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
 gap:52px 34px;margin-top:50px}
.card{appearance:none;background:none;border:0;padding:0;margin:0;text-align:left;color:inherit;
 font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:14px;
 animation:rise .9s cubic-bezier(.22,.68,.28,1) backwards;animation-delay:calc(var(--i)*26ms)}
.shot{display:block;line-height:0;overflow:hidden;
 -webkit-mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,.45) 89%,transparent 100%);
 mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,.45) 89%,transparent 100%)}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
 filter:saturate(.72) brightness(1.06) contrast(1.04);
 transition:filter 1.1s ease,transform 1.1s ease}
.card:hover .shot img,.card:focus-visible .shot img{
 filter:saturate(1.08) brightness(1.3) contrast(1.02);transform:scale(1.018)}
.ct{font-family:var(--book);font-size:15.5px;line-height:1.35;color:var(--soft);
 transition:color .5s ease;margin-top:-4px}
.card:hover .ct,.card:focus-visible .ct{color:var(--pale)}
.cm{font-family:var(--util);font-size:10.5px;letter-spacing:.085em;text-transform:uppercase;
 color:var(--dim);line-height:1.6;opacity:.8}
.card:focus{outline:none}
.card:focus-visible{outline:1px solid var(--moon);outline-offset:11px}

/* ---- dialog ---- */
dialog{background:var(--deep);color:var(--soft);border:0;border-radius:2px;padding:0;
 max-width:660px;width:92vw;max-height:88vh;box-shadow:0 40px 120px rgba(0,0,0,.8)}
dialog::backdrop{background:rgba(4,6,11,.9)}
.dh{position:sticky;top:0;background:linear-gradient(var(--deep) 76%,transparent);
 padding:30px 38px 22px;z-index:2}
.dh h2{font-family:var(--display);font-weight:400;font-size:24px;color:var(--pale);
 margin:0 0 11px;letter-spacing:-.008em;line-height:1.2;padding-right:34px}
.dh .meta{font-family:var(--util);font-size:10.5px;letter-spacing:.085em;text-transform:uppercase;
 color:var(--dim)}
.dh .meta a{color:var(--moon);text-decoration:none;border-bottom:1px solid transparent}
.dh .meta a:hover{border-bottom-color:var(--moon)}
.x{position:absolute;top:26px;right:28px;background:none;border:0;color:var(--dim);font-size:23px;
 line-height:1;cursor:pointer;padding:5px;font-family:var(--util)}
.x:hover{color:var(--pale)}
.dbody{padding:4px 38px 46px;overflow-y:auto;max-height:calc(88vh - 118px)}
.c{padding:23px 0;border-bottom:1px solid rgba(255,255,255,.038)}
.c:last-child{border-bottom:0}
.who{font-family:var(--util);font-size:12px;letter-spacing:.03em;color:var(--moon)}
.when{font-family:var(--util);font-size:10.5px;letter-spacing:.06em;color:var(--dim);
 margin-left:10px;opacity:.75}
.tx{font-family:var(--book);font-size:17px;line-height:1.75;color:var(--soft);margin-top:10px;
 white-space:pre-wrap;overflow-wrap:anywhere}
.lk2{font-family:var(--util);font-size:10.5px;letter-spacing:.06em;color:var(--dim);
 margin-top:11px;opacity:.7}
.tag{font-size:8.5px;letter-spacing:.1em;color:var(--dim);border:1px solid var(--mist);
 padding:2px 6px;margin-left:8px;vertical-align:1.5px;font-family:var(--util)}

footer{margin-top:96px;font-family:var(--util);font-size:10.5px;letter-spacing:.085em;
 text-transform:uppercase;color:var(--dim);opacity:.62;line-height:2}
@media(max-width:640px){.wrap{padding:52px 20px 76px}.grid{gap:40px 22px}
 .wall{columns:1;column-gap:0}.dh,.dbody{padding-left:24px;padding-right:24px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}