:root{--rail:0px;--accent:#6aabf1;--bg:#0d1117;--bg2:#161b22;--fg:#e6edf3;--muted:#8b949e;--code-bg:#2a3340;--r:10px}
[data-theme=light]{--bg:#f6f8fa;--bg2:#fff;--fg:#1f2328;--muted:#59636e;--code-bg:#e4e9ef}
@media (min-width:721px){:root{--rail:330px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark light}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:1.2}
button{font:inherit;color:inherit;cursor:pointer;background:var(--bg2);border:1px solid var(--code-bg);border-radius:var(--r);padding:.4rem .8rem}
button:hover{border-color:var(--accent)}

/* nav */
.nav{position:fixed;top:max(.75rem,env(safe-area-inset-top));left:.75rem;z-index:50;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.nav a{text-decoration:none}
.nav code{display:inline-block;font:600 .85rem/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;background:var(--code-bg);color:#dbe7f5;border:1px solid var(--accent);border-radius:6px;padding:.4rem .55rem;box-shadow:0 2px 10px #0006}
[data-theme=light] .nav code{color:#1f2328}
.nav a:hover code,.nav a:focus-visible code{background:var(--accent);color:#0d1117}

/* hero */
.home-flow{display:flex;flex-direction:column}
.hero{order:1;position:relative;min-height:60svh;background:var(--hero) center 25%/cover no-repeat,var(--bg2);display:flex;align-items:flex-end;padding-right:clamp(0px,calc(2*var(--rail) + 1100px - 100vw),var(--rail))}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 28%,transparent 65%)}
.hero-text{position:relative;z-index:1;width:100%;max-width:1100px;margin:0 auto;padding:1.5rem 1.25rem 2rem;text-align:center}
.hero h1{margin:0;font-size:clamp(2rem,7vw,4.5rem)}
.hero p{margin:.9rem 0 0;color:var(--muted);font-size:1.1rem}
.col-area{order:2;display:flex;flex-direction:column;padding-right:clamp(0px,calc(2*var(--rail) + 1100px - 100vw),var(--rail))}
.col-area .follow-wrap{order:1}.col-area .releases{order:2}
.follow-wrap,.releases{width:100%;max-width:1100px;margin-inline:auto}
.rail-social{display:none}
@media (min-width:721px){.col-area .follow-wrap{display:none}.rail-social{display:block}}
body.has-rail:not(.home) main{padding-right:clamp(0px,calc(2*var(--rail) + var(--cw,820px) - 100vw),var(--rail))}
body.release-page main{--cw:960px}

/* follow */
.follow{padding:1rem 1.25rem}
.follow h2{margin:.5rem 0;text-align:center}
.follow ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.follow a{display:inline-block;padding:.4rem .8rem;border:1px solid var(--accent);border-radius:999px}
.follow a:hover{background:var(--accent);color:#0d1117;text-decoration:none}

/* releases */
.releases{padding:1rem 0 2rem}
.releases h2{padding:0 1.25rem;text-align:center}
.releases h3{padding:0 1.25rem;text-align:center;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem}
.rail{display:flex;justify-content:safe center;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem 1.25rem 1.5rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail .card{flex:0 0 min(70vw,260px);scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.5rem}
.card{display:block;color:var(--fg)}
.cover-link{display:block;position:relative;z-index:2;height:100%}
.card-text{display:block;color:var(--fg);text-decoration:none!important}
.sleeve{position:relative;display:block;aspect-ratio:1;margin-right:14%}
.cover{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;border-radius:4px;box-shadow:0 6px 18px #0008}
.vinyl{position:absolute;z-index:1;top:3%;left:0;width:94%;aspect-ratio:1;border-radius:50%;border:2px solid #6b7280;
  background:radial-gradient(circle,var(--accent) 0 13%,#14181d 14% 16%,transparent 17%),
  conic-gradient(from 30deg,#ffffff1f,transparent 18%,#ffffff1f 36%,transparent 54%,#ffffff1f 72%,transparent 90%),
  repeating-radial-gradient(circle,#1c2026 0 2px,#4b5563 3px 3.5px);
  box-shadow:0 0 0 1px #0008,inset 0 0 12px #0009;
  transform:translateX(18%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.card:hover .vinyl,.card:active .vinyl,.card:focus-within .vinyl{transform:translateX(34%) rotate(40deg)}
.card-title{display:block;margin-top:.6rem;font-weight:600}
.card-sub{display:block;color:var(--muted);font-size:.9rem}

/* player */
.player{display:flex;align-items:center;gap:.75rem;margin:1rem 1.25rem;padding:.75rem;background:var(--bg2);border:1px solid var(--code-bg);border-radius:var(--r)}
.player-cover{width:56px;height:56px;border-radius:6px;object-fit:cover;background:var(--code-bg);flex:none}
.player-main{flex:1;min-width:0}
.player-title{display:block;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wave{width:100%;height:48px;display:block;cursor:pointer;touch-action:none}
.player-ctl,.player-vol{display:flex;align-items:center;gap:.35rem}
.player-ctl button{padding:.35rem .55rem}
.player-time{font:.8rem ui-monospace,monospace;color:var(--muted);min-width:2.5rem}

/* pages */
.page{max-width:820px;margin:0 auto;padding:5rem 1.25rem 2rem}
.release-cover{width:100%;max-width:420px;border-radius:6px;margin-bottom:1rem}
.subtitle{color:var(--muted);margin-top:-.5rem}
.meta{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1rem}
.meta dt{color:var(--muted)}.meta dd{margin:0}
.tracklist{padding-left:1.25rem}.tracklist button{border:0;background:none;padding:.2rem 0;text-align:left}
.links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.links a{display:inline-block;padding:.4rem .8rem;border:1px solid var(--accent);border-radius:999px}
.videos{display:grid;gap:1rem}.videos iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r)}
.release .player{margin-left:0;margin-right:0}

/* footer / consent */
.footer{padding:2rem 1.25rem;text-align:center;color:var(--muted);font-size:.9rem}
.footer p{margin:.25rem 0}
.consent{position:fixed;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:60;width:min(340px,calc(100vw - 1.5rem));display:flex;flex-direction:column;gap:.6rem;background:var(--bg2);border:1px solid var(--accent);border-radius:var(--r);padding:.8rem;font-size:.85rem;box-shadow:0 8px 30px #0008}
.consent[hidden]{display:none}.consent p{margin:0}
@media (max-width:720px){
  .consent{padding:.6rem;gap:.45rem;font-size:.75rem;line-height:1.4}
  .consent .consent-btns{flex-wrap:nowrap;gap:.35rem}
  .consent .consent-btns button{padding:.4rem .3rem;font-size:.75rem;min-height:36px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* player extras */
.pp{width:2.6rem;height:2.6rem;border-radius:50%;padding:0;flex:none;border-color:var(--accent)}
.player-meta{display:flex;align-items:center;gap:.5rem;min-width:0}
.vol{width:90px;accent-color:var(--accent)}
.eq{display:none;align-items:flex-end;gap:2px;height:14px;flex:none}
.player.playing .eq{display:inline-flex}
.eq i{display:block;width:3px;height:3px;background:var(--accent);border-radius:1px}
.player.playing .eq i{animation:eq .9s ease-in-out infinite}
.player.playing .eq i:nth-child(2){animation-delay:-.3s}.player.playing .eq i:nth-child(3){animation-delay:-.6s}.player.playing .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}
.player-vol button{border:0;background:none;padding:.2rem .4rem}

/* mini player (every page except music/release pages): fixed top-right */
.player-wrap{position:fixed;top:max(.75rem,env(safe-area-inset-top));right:.75rem;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.player.mini{margin:0;padding:.3rem .5rem;gap:.4rem;width:min(280px,calc(100vw - 6.5rem));background:color-mix(in srgb,var(--bg2) 62%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:999px}
.player.mini .player-cover,.player.mini .wave,.player.mini .player-time,.player.mini [data-act=prev]{display:none}
.player.mini .player-main{flex:1;min-width:0}
.player.mini .pp{width:2rem;height:2rem;font-size:.8rem}
.player.mini .player-title{font-size:.75rem;font-weight:500}
.player.mini .vol{width:60px}
.player.mini .eq{order:2}
.player.mini .player-vol button,.player.mini .player-ctl button{font-size:.85rem;padding:.2rem .4rem;border:0;background:none}
@media (max-width:720px){
  .player.mini{width:min(210px,calc(100vw - 6.5rem))}
  .player.mini .vol,.player.mini .player-vol,.player.mini .player-ctl{display:none}
  .player.mini .player-meta{cursor:pointer}
  .release .player{flex-wrap:wrap}.release .player-main{flex-basis:calc(100% - 4rem)}
}

/* desktop mini player: title on top, controls + eq below */
@media (min-width:721px){
  .player.mini{display:grid;width:300px;grid-template-columns:auto auto auto 1fr auto 72px;grid-template-areas:"t t t t t t" "pv pp nx eq mu vo";row-gap:.4rem;column-gap:.3rem;align-items:center;border-radius:var(--r);padding:.65rem .8rem}
  .player.mini .player-main,.player.mini .player-meta,.player.mini .player-ctl,.player.mini .player-vol{display:contents}
  .player.mini .player-title{grid-area:t;font-size:.9rem}
  .player.mini [data-act=prev]{display:inline-block;grid-area:pv}
  .player.mini .pp{grid-area:pp;width:2.2rem;height:2.2rem}
  .player.mini [data-act=next]{grid-area:nx}
  .player.mini .eq{grid-area:eq;justify-self:center;display:inline-flex;visibility:hidden}
  .player.mini.playing .eq{visibility:visible}
  .player.mini [data-act=mute]{grid-area:mu}
  .player.mini .vol{grid-area:vo;width:100%}
}

/* consent */
.consent-btns{display:flex;flex-wrap:wrap;gap:.5rem}
.consent-btns button{flex:1 1 auto}
.linklike{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline}
.prefs{max-width:440px;width:calc(100% - 2rem);background:var(--bg2);color:var(--fg);border:1px solid var(--accent);border-radius:var(--r);padding:1.25rem}
.prefs::backdrop{background:#000a}
.prefs h2{margin-top:0}
.prefs .row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.prefs .row span{font-size:.9rem;color:var(--muted)}.prefs .row strong{color:var(--fg)}
.prefs input[type=checkbox]{width:1.25rem;height:1.25rem;accent-color:var(--accent);flex:none}

/* background canvas */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* theme toggle (round, under the nav links) */
.nav #theme-toggle{width:2rem;height:2rem;padding:0;border-radius:50%;background:var(--code-bg);border:1px solid var(--accent);font-size:1rem;line-height:1;margin-top:.15rem;box-shadow:0 2px 10px #0006}
.nav #theme-toggle:hover{background:var(--accent);color:#0d1117}

/* social card under the general player (desktop) */
.rail-social{width:300px;border-radius:var(--r);background:color-mix(in srgb,var(--bg2) 62%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.rail-social .follow{padding:.7rem .8rem}
.rail-social .follow h2{font-size:.95rem;margin:0 0 .5rem}
.rail-social .follow ul{gap:.35rem}
.rail-social .follow a{padding:.25rem .6rem;font-size:.8rem}

/* share, breadcrumbs, 404 */
.share{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:1.5rem 0}
.share span{color:var(--muted);margin-right:.25rem}
.share a,.share button{font-size:.85rem;padding:.3rem .7rem;border:1px solid var(--code-bg);border-radius:999px;background:none;color:var(--accent);text-decoration:none}
.share a:hover,.share button:hover{border-color:var(--accent)}
.btn{display:inline-block;padding:.6rem 1.2rem;border:1px solid var(--accent);border-radius:999px}
.btn:hover{background:var(--accent);color:#0d1117;text-decoration:none}
.notfound{text-align:center}.notfound h1{font-size:4rem;margin-bottom:.5rem}

/* nav wrapper + mobile hamburger menu */
.nav-items{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.nav #menu-toggle{display:none;width:2.4rem;height:2.4rem;padding:0;border-radius:8px;background:var(--code-bg);border:1px solid var(--accent);font-size:1.15rem;line-height:1;box-shadow:0 2px 10px #0006}
.nav #menu-toggle:hover{background:var(--accent);color:#0d1117}
@media (max-width:720px){
  .nav{left:auto;right:.75rem;align-items:flex-end}
  .nav #menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-items{display:none;align-items:flex-end}
  .nav.open .nav-items{display:flex}
  .player-wrap{left:.75rem;right:auto;align-items:flex-start}
  .player.mini{width:min(210px,calc(100vw - 5rem))}
}

/* hero height: 60svh on mobile, 80svh on larger screens */
@media (min-width:721px){.hero{min-height:80svh}}
.rail-social:not(:has(.follow)){display:none!important}

/* markdown pages */
.md h2{margin-top:2rem}.md h3{margin-top:1.5rem}
.md ul,.md ol{padding-left:1.25rem}
.md blockquote{border-left:3px solid var(--accent);margin:1rem 0;padding:.25rem 1rem;color:var(--muted)}
.md table{border-collapse:collapse;display:block;overflow-x:auto;max-width:100%}
.md th,.md td{border:1px solid var(--code-bg);padding:.4rem .6rem;text-align:left}
.md code{background:var(--code-bg);border-radius:4px;padding:.1rem .35rem;font-size:.9em}
.md pre{overflow-x:auto;background:var(--bg2);padding:.75rem;border-radius:var(--r)}.md pre code{background:none;padding:0}
.md img{border-radius:var(--r)}
.md hr{border:0;border-top:1px solid var(--code-bg);margin:2rem 0}

/* icons */
.ic{width:1.25rem;height:1.25rem;display:block;flex:none}
.follow a.ic-link{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;padding:0;border-radius:50%}
.rail-social .follow a.ic-link{width:2.1rem;height:2.1rem;padding:0}
.rail-social .follow .ic{width:1.1rem;height:1.1rem}
.links a{display:inline-flex;align-items:center;gap:.45rem}

/* release detail: cover + info side by side */
.page.release{max-width:960px}
.release-head{display:grid;gap:1.25rem}
.release-head .release-cover{margin:0}
.release-info h1{margin-top:0}
.release h3{margin:2rem 0 .75rem}
.release h3.listen{margin-top:2rem;font-size:1.25rem}
@media (min-width:721px){
  .page.release{display:grid;grid-template-columns:minmax(220px,380px) 1fr;grid-template-areas:"cover info" "cover links" "cover share";column-gap:2rem;align-content:start}
  .release>*{grid-column:1/-1}
  .release-head{display:contents}
  .release-head .release-cover{grid-area:cover}
  .release-info{grid-area:info}
  .release>.release-links{grid-area:links}
  .release>.release-links h3{margin-top:1rem}
  .release>.share{grid-area:share;margin:.5rem 0 0}
}
.tracklist{list-style:none;padding:0}
.tracklist button{display:flex;gap:.75rem;width:100%;border:0;background:none;padding:.4rem .2rem;text-align:left;border-radius:6px}
.tracklist button:hover{background:var(--bg2)}
.tracklist .tn{font:.85rem ui-monospace,monospace;color:var(--muted);min-width:1.6rem}
.tracklist .current{color:var(--accent)}

/* cover play button (general player) */
.cover-play{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);width:3.4rem;height:3.4rem;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;line-height:1;color:#fff;background:rgba(13,17,23,.42);border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:.85;transition:opacity .2s,transform .2s}
.cover-play:hover,.cover-play:focus-visible{opacity:1;transform:translate(-50%,-50%) scale(1.08);border-color:var(--accent)}

/* social card: max 4 icons per row */
.rail-social .follow ul{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;gap:.5rem}