:root { color-scheme: dark; --bg:#111; --fg:#eee; --muted:#888; --accent:#a48cff; }
* { box-sizing: border-box; }
body { margin:0; padding:1.5rem; background:var(--bg); color:var(--fg); font-family:system-ui,sans-serif; line-height:1.5; max-width:52rem; margin-inline:auto; }
a { color:var(--accent); }
.site-header { display:flex; align-items:baseline; gap:1.5rem; flex-wrap:wrap; }
.site-title { font-size:1.4rem; font-weight:700; text-decoration:none; }
.page-nav { display:flex; gap:1rem; }
.page-nav a { font-size:.95rem; }
.crumbs { color:var(--muted); font-size:.85rem; margin:0 0 1rem; }
.tree-list { list-style:none; padding-left:1rem; }
.tree-list > li { margin:.6rem 0; }
.tree-list .meta { color:var(--muted); font-size:.9rem; }
.year { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:1.6rem 0 .4rem; padding-bottom:.3rem; border-bottom:1px solid #333; }
.intro { opacity:.9; }
.site-footer { margin-top:2rem; color:var(--muted); font-size:.8rem; }
.tracklist { color:var(--muted); }
byom-player { display:block; max-width:41.4rem; margin:0; }

/* Two-column app shell for interior pages (playlist/folder): fixed to the
   viewport; the nav sidebar and the main content each scroll independently, so
   the page itself doesn't grow and scroll as a whole. */
body.playlist, body.folder { max-width:64rem; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.layout { flex:1; min-height:0; display:grid; grid-template-columns:21.3rem minmax(0,1fr); gap:2.5rem; }
.sidebar { min-height:0; overflow-y:auto; padding-right:1rem; }
.layout > main { min-height:0; overflow-y:auto; }
byom-site-nav { display:block; }
.site-nav ul { list-style:none; margin:0; padding:0; font-size:.85rem; }
.site-nav ul ul { padding-left:.9rem; }
.site-nav li { margin:.5rem 0; }
.site-nav a { text-decoration:none; color:var(--fg); opacity:.75; }
.site-nav a:hover { opacity:1; }
.site-nav a[aria-current="page"] { color:var(--accent); opacity:1; font-weight:600; }
.site-nav .nav-meta { display:block; color:var(--muted); font-size:.72rem; line-height:1.35; }
.site-nav .nav-year { list-style:none; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:.9rem 0 .25rem; }
@media (max-width:48rem) {
  body.playlist, body.folder { height:auto; display:block; overflow:visible; }
  .layout { grid-template-columns:1fr; }
  .sidebar, .layout > main { overflow:visible; }
}

body.embed { padding:.5rem; }
.embed-attribution { display:block; font-size:.75rem; color:var(--muted); margin-top:.4rem; }

.playlist-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(18rem,1fr)); gap:1rem; margin:.4rem 0 0; }
.playlist-card { display:flex; gap:.75rem; align-items:flex-start; padding:.55rem; border-radius:8px; text-decoration:none; color:var(--fg); background:#1c1c1c; }
.playlist-card:hover { background:#232323; }
.playlist-card .cover { width:5.25rem; height:5.25rem; border-radius:6px; object-fit:cover; flex:none; background:#222; }
.playlist-card .cover.placeholder { background:linear-gradient(135deg,#2a2a2a,#1a1a1a); }
.playlist-card .body { display:flex; flex-direction:column; min-width:0; overflow-wrap:anywhere; }
.playlist-card .title { font-weight:600; }
.playlist-card .meta { color:var(--muted); font-size:.82rem; margin-top:.15rem; }
.playlist-card .blurb { color:#c2c2c2; font-size:.85rem; margin-top:.35rem; }

.site-nav .nav-leaf { display:flex; gap:.5rem; align-items:center; }
.site-nav .nav-cover { width:2.2rem; height:2.2rem; border-radius:4px; object-fit:cover; flex:none; background:#222; }
.site-nav .nav-text { display:flex; flex-direction:column; min-width:0; }