/* Stroud Common Music — simple, clean, accessible styles */
:root{
  --bg:#0f172a;         /* slate-900 */
  --card:#0b1224;       /* slightly lighter than bg */
  --text:#e5e7eb;       /* gray-200 */
  --muted:#9ca3af;      /* gray-400 */
  --accent:#34d399;     /* emerald-400 */
  --accent-2:#93c5fd;   /* blue-300 */
  --border:#1f2937;     /* gray-800 */
  --link:#a78bfa;       /* violet-400 */
  --link-hover:#c4b5fd; /* violet-300 */
  --shadow: 0 10px 25px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(52,211,153,.12), transparent 60%),
              radial-gradient(1000px 500px at 110% 10%, rgba(147,197,253,.12), transparent 60%),
              var(--bg);
  line-height:1.6;
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:24px;
}

header{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  position: sticky;
  top:0;
  backdrop-filter: blur(6px);
  z-index: 10;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-logo{
  width:40px;height:40px;border-radius:12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow);
}

h1,h2,h3{line-height:1.2;margin:0 0 12px}
h1{font-size: clamp(24px, 4vw, 36px)}
h2{font-size: clamp(20px, 3vw, 28px)}
p{margin:0 0 12px;color:var(--text)}

.nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:10px;
}
.nav a{
  text-decoration:none;
  color:var(--text);
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  transition: all .2s ease;
  font-weight:600;
}
.nav a:hover{transform:translateY(-1px); border-color: var(--link-hover); color:var(--link-hover)}
.nav a.active{background:var(--link); color:#0b1020; border-color: transparent}

.hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:center;
}
@media (max-width: 860px){
  .hero{grid-template-columns:1fr}
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
  box-shadow: var(--shadow);
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
@media (max-width: 1024px){ .grid{ grid-template-columns: repeat(2,1fr) } }
@media (max-width: 640px){ .grid{ grid-template-columns: 1fr } }

.footer{
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:14px;
  margin-top:40px;
  padding-top:14px;
}

.figure{
  width:100%; aspect-ratio: 16/9; border-radius:16px; border:1px solid var(--border);
  background: #0a0f1e;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted);
}

/* Artists list */
.artist-list{display:grid; grid-template-columns: repeat(2, 1fr); gap:18px}
@media (max-width: 900px){ .artist-list{ grid-template-columns: 1fr } }
.artist-card{
  display:grid; grid-template-columns: 120px 1fr; gap:16px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:16px; padding:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.artist-card img{
  width:100%; height:100px; object-fit:cover; border-radius:12px; border:1px solid var(--border);
}
.artist-card b a{ color:var(--link); text-decoration:none }
.artist-card b a:hover{ color:var(--link-hover); text-decoration:underline }
.artist-meta{color:var(--muted); font-size:14px}

/* What's on */
.event{
  display:grid; grid-template-columns: 120px 1fr; gap:16px;
  border:1px solid var(--border);
  border-radius:16px; padding:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.event-date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px dashed var(--border); border-radius:12px; padding:10px; font-weight:700;
}
.event h3{margin:0}
.event .where{ color:var(--muted); font-size:14px }