/* Anna Log — release catalog sections (Phase 1). Uses the variables defined in annalog.css. */
.rel-section{margin-top:65px;scroll-margin-top:20px}
.rel-section:first-of-type{margin-top:0}
.rel-section .section-head{margin-bottom:28px}
.rel-section .section-head h2{margin:0}
[data-releases][data-state=loading]{min-height:120px;opacity:.55;transition:opacity .3s}
[data-releases][data-state=ready],[data-releases][data-state=empty]{animation:relIn .35s ease}
@keyframes relIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* artwork */
.rel-art{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#0c0711;border-bottom:1px solid var(--line)}
.rel-art img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
a.rel-art:hover img{transform:scale(1.03)}
.rel-art.is-empty{display:flex;flex-direction:column;justify-content:space-between;padding:22px;background:radial-gradient(ellipse at 70% 20%,#2a1638,transparent 65%),repeating-linear-gradient(0deg,transparent 0 7px,rgba(206,145,237,.05) 7px 8px),#0c0711}
.rel-art-mark{font-size:20px;font-weight:900;letter-spacing:-1px;color:var(--text)}
.rel-art-mark span{color:var(--purple)}
.rel-art-title{font:11px/1.5 Consolas,'Courier New',monospace;letter-spacing:1.5px;color:var(--gold);text-transform:uppercase;overflow-wrap:anywhere}

/* shared body */
.rel-body{padding:24px}
.rel-meta{margin-bottom:12px;color:var(--purple)}
.rel-title{font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.4px;overflow-wrap:anywhere}
.rel-title--large{font-size:clamp(28px,3vw,42px);font-weight:500;letter-spacing:-1px}
.rel-desc{font-size:14px;color:var(--muted);margin-top:12px!important;max-width:520px}
.rel-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:20px}
.rel-links .button{padding:12px 16px;gap:14px}
.rel-links .text-link{color:var(--purple)}
.rel-links .text-link span,.rel-links .button span{margin-left:6px}
.rel-links--compact{margin-top:0;gap:6px 16px;justify-content:flex-end}
.rel-empty{font-size:14px;color:var(--muted);padding:24px;border:1px dashed var(--line)}

.rel-more{margin-top:10px}
.rel-more summary{cursor:pointer;font:11px Consolas,'Courier New',monospace;letter-spacing:1.4px;text-transform:uppercase;color:var(--purple);list-style:none}
.rel-more summary::-webkit-details-marker{display:none}
.rel-more[open] summary{margin-bottom:4px}
.rel-profiles{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.rel-profiles .text-link{color:var(--purple)}

/* New Songs — fixed-height cards */
.rel-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:20px;
    align-items:stretch;
}

.rel-card{
    display:flex;
    flex-direction:column;
    height:680px;
    min-height:0;
    border:1px solid var(--line);
    border-top:2px solid var(--gold);
    background:var(--panel);
    transition:border-color .2s;
    overflow:hidden;
}

.rel-card:hover{
    border-color:#5d4569;
    border-top-color:var(--gold);
}

.rel-card .rel-art{
    flex-shrink:0;
}

.rel-card .rel-body{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
}

.rel-card .rel-title{
    flex-shrink:0;
}

.rel-card .rel-desc{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:10px;
    scrollbar-width:thin;
    scrollbar-color:#9660b5 #211529;
}

/* Chrome / Edge scrollbar */
.rel-card .rel-desc::-webkit-scrollbar{
    width:6px;
}

.rel-card .rel-desc::-webkit-scrollbar-track{
    background:#211529;
    border-radius:4px;
}

.rel-card .rel-desc::-webkit-scrollbar-thumb{
    background:#9660b5;
    border-radius:4px;
}

.rel-card .rel-links{
    flex-shrink:0;
    margin-top:auto;
    padding-top:20px;
}

/* New Albums */
.rel-albums{display:grid;gap:28px}
.rel-album{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);border:1px solid var(--line);border-top:2px solid var(--purple);background:var(--panel)}
.rel-album>.rel-art{border-bottom:0;border-right:1px solid var(--line)}
.rel-album .rel-body{padding:40px 44px;align-self:center}
.rel-tracks{margin-top:28px;border-top:1px solid var(--line)}
.rel-tracks summary{cursor:pointer;padding:16px 0;font:11px Consolas,'Courier New',monospace;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);list-style:none}
.rel-tracks summary::-webkit-details-marker{display:none}
.rel-tracks summary::after{content:' +';color:var(--purple)}
.rel-tracks[open] summary::after{content:' –'}
.rel-track-list li{padding:14px 0;gap:14px}
.rel-track-list .track-title{font-size:16px}

/* track rows shared by album cards and the album page */
.track-list .rel-track-links{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.track-list .rel-track-links .text-link{color:var(--purple);font-size:11px;white-space:nowrap}

/* Music Archive */
.rel-year{font:12px Consolas,'Courier New',monospace;letter-spacing:2px;color:var(--gold);padding:22px 0 8px;border-bottom:1px solid var(--line)}
.rel-archive-list{list-style:none;padding:0;margin:0 0 10px}
.rel-archive-list li{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.rel-archive-date{font:11px Consolas,'Courier New',monospace;color:var(--muted)}
.rel-archive-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.rel-archive-info .track-title{font-size:17px}
.rel-archive-type{font:10px Consolas,'Courier New',monospace;letter-spacing:1.4px;text-transform:uppercase;color:var(--purple)}

/* ---------- Platform icons (v2) ----------
   Brand marks come from Simple Icons (CC0), pinned to one release on jsDelivr.
   They are drawn as masks, so they take the link's own colour.
   Platforms without a published mark (Audius, Mureka) fall back to a plain waveform glyph. */
.pi{display:inline-block;flex:0 0 auto;width:1.15em;height:1.15em;vertical-align:-.2em;background-color:currentColor;-webkit-mask:var(--pi) center/contain no-repeat;mask:var(--pi) center/contain no-repeat;margin:0!important}
.pi--suno{--pi:url("https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/suno.svg")}
.pi--youtube{--pi:url("https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/youtube.svg")}
.pi--x{--pi:url("https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/x.svg")}
.pi--spotify{--pi:url("https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/spotify.svg")}
.pi--apple-music{--pi:url("https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/applemusic.svg")}
.pi--soundcloud{--pi:url("https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/soundcloud.svg")}
.pi--bandcamp{--pi:url("https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/bandcamp.svg")}
.pi--tidal{--pi:url("https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/tidal.svg")}
.pi--deezer{--pi:url("https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/deezer.svg")}
.pi--hyperfollow{--pi:url("https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/distrokid.svg")}
.pi--generic{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10h2v4H3zM7 7h2v10H7zM11 4h2v16h-2zM15 8h2v8h-2zM19 11h2v2h-2z'/%3E%3C/svg%3E")}

/* Icon links: icon, label, arrow sit on one line */
.plink{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.plink>span{margin-left:0!important}
.plink .plink-arrow{opacity:.8}
.button.plink{justify-content:flex-start}
.rel-links .button.plink{gap:.55em}

/* Suno leads: the first Suno link on a card or row gets a gold edge so it reads first */
.text-link.plink--lead{color:var(--gold)!important}

/* Profile row: icon pills */
.rel-profiles .plink{padding:10px 16px;border:1px solid var(--line);border-radius:999px;color:var(--purple)}
.rel-profiles .plink:hover{border-color:var(--purple);color:var(--text)}
.rel-profiles .button.plink{border-radius:999px;color:#170b20}

/* Compact rows (archive, tracklists): icon and short label */
.rel-links--compact .plink,.rel-track-links .plink{gap:.4em}

/* ---------- Featured spotlight (v3) ---------- */
.editorial-head--feature{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:40px;align-items:center}
.editorial-head--feature .deck{max-width:440px}
.rel-spotlight{display:grid;grid-template-columns:minmax(120px,.42fr) minmax(0,2fr);gap:26px;align-items:center}
.rel-spotlight-head .eyebrow{margin-bottom:12px}
.rel-spotlight-label{font-size:clamp(24px,2.3vw,36px);line-height:1.18;letter-spacing:-.8px;font-weight:500;color:var(--text);overflow-wrap:anywhere}
.rel-album--spotlight{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;box-shadow:0 0 0 1px rgba(206,145,237,.18),0 24px 60px -30px rgba(206,145,237,.45)}
.rel-album--spotlight .rel-body{padding:30px 32px}
.rel-title--spotlight{font-size:clamp(24px,2.4vw,34px);font-weight:500;letter-spacing:-.8px;line-height:1.15}
.rel-album--spotlight .rel-desc{font-size:13px}
.rel-album--spotlight .rel-tracks{margin-top:20px}
[data-releases=featured][data-state=loading]{min-height:320px}
.spotlight-fallback{border:1px solid var(--line);border-top:2px solid var(--purple);background:var(--panel);padding:30px}
.spotlight-fallback h2{font-size:28px;margin:6px 0 18px}

@media(max-width:1180px){
  .editorial-head--feature{grid-template-columns:1fr;gap:34px}
  .editorial-head--feature .deck{max-width:760px}
}
@media(max-width:900px){
  .rel-spotlight{grid-template-columns:1fr;gap:16px}
  .rel-album{grid-template-columns:1fr}
  .rel-album>.rel-art{border-right:0;border-bottom:1px solid var(--line)}
  .rel-album .rel-body{padding:28px 24px}
}
@media(max-width:650px){
  .rel-section{margin-top:50px}
  .rel-grid{grid-template-columns:1fr 1fr;gap:12px}
  .rel-card .rel-body{padding:16px}
  .rel-title{font-size:17px}
  .rel-card .rel-links .button{padding:10px 12px;font-size:10px;width:100%}
  .rel-archive-list li{grid-template-columns:minmax(0,1fr);gap:6px}
  .rel-links--compact{justify-content:flex-start}
  .track-list .rel-track-links{flex-direction:row;gap:14px;grid-column:2;align-items:center}
}
@media(max-width:380px){.rel-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){[data-releases]{animation:none!important}.rel-art img{transition:none}}
