/* Misc Rooftop — shared look for the schedule and archive pages (served at /archive/assets/site.css) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

@font-face { font-family: 'PantasiaMisc'; src: url('/fonts/PantasiaMisc-Regular.otf') format('opentype'); font-weight: normal; font-style: normal }
@font-face { font-family: 'PantasiaMisc'; src: url('/fonts/PantasiaMisc-RegularItalic.otf') format('opentype'); font-weight: normal; font-style: italic }

:root {
  --bg:      #0a0a0a;
  --bg2:     #111;
  --bg3:     #161616;
  --border:  #1e1e1e;
  --border2: #2a2a2a;
  --text:    #e8e6df;
  --muted:   #6a6a6a;
  --dim:     #333;
  --live:    #ff3b3b;
  --mono:    'IBM Plex Mono', monospace;
  --serif:   'PantasiaMisc', Georgia, serif;
}

html { background: var(--bg) }
body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 12px; line-height: 1.45; -webkit-font-smoothing: antialiased }
a { color: inherit; text-decoration: none }
img { display: block }
button { font-family: inherit }

.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 20px; border-bottom: 1px solid var(--border); background: rgba(10,10,10,.92); backdrop-filter: blur(8px) }
@media (max-width: 600px) { .topbar { padding: 0 16px } }

.muted { color: var(--muted) }
.muted-link { color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; transition: color .15s }
.muted-link:hover { color: var(--text) }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 12px; background: none; border: 1px solid var(--border2); border-radius: 2px; color: var(--text); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s }
.btn:hover { border-color: var(--text) }
.btn.solid { background: var(--text); border-color: var(--text); color: var(--bg) }
.btn.solid:hover { background: #fff; border-color: #fff }
.btn svg { width: 12px; height: 12px; fill: currentColor }

/* Artist faces: overlapping circles, photo or initials */
.faces { display: flex; flex-shrink: 0 }
.face { position: relative; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--bg3); border: 2px solid var(--bg); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; letter-spacing: .04em }
.face + .face { margin-left: -10px }
.face img { width: 100%; height: 100%; object-fit: cover }

.b2b { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .1em; margin: 0 6px; vertical-align: middle; font-style: normal }

/* ── Light theme (nav.js sets html[data-theme]; the palette's variables come from there too) ── */
html[data-theme="light"] .topbar { background: rgba(244,242,236,.92) }
html[data-theme="light"] .btn.solid:hover { background: #000; border-color: #000 }