:root {
  color-scheme: dark;
  --bg: #0d0f0d;
  --card: #151916;
  --line: #303630;
  --text: #f3f5ee;
  --muted: #a9b2a8;
  --lime: #c9f874;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.shell { width: min(100% - 48px, 1000px); margin: auto; }
.masthead, footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.masthead { min-height: 62px; border-bottom: 1px solid var(--line); }
.masthead a { font-weight: 900; letter-spacing: -.045em; }
.masthead a span { color: var(--lime); margin-left: .14em; }
.masthead-note, .eyebrow, .section-count {
  color: var(--muted); font: 600 .68rem/1.4 ui-monospace, monospace; letter-spacing: .12em;
}
.hero { text-align: center; padding: clamp(36px, 6vw, 68px) 0 clamp(40px, 6vw, 64px); }
.brand-mark { width: clamp(104px, 16vw, 156px); height: auto; border-radius: 50%; margin: 0 0 12px; }
.eyebrow { margin: 0 0 7px; }
.hero .eyebrow span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); margin: 0 5px 1px 0; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(3.8rem, 10vw, 7.6rem); line-height: .9; letter-spacing: -.085em; font-weight: 900; }
h1 span { color: var(--lime); }
.intro { margin-top: 17px; color: var(--muted); font-size: clamp(.95rem, 2vw, 1.08rem); }
.socials { display: flex; justify-content: center; gap: 9px; margin-top: 19px; }
.socials a { display: inline-flex; align-items: center; gap: 16px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 5px; font-size: .85rem; font-weight: 700; }
.socials a:hover { border-color: var(--lime); }
.socials span, .artist-copy > span { color: var(--lime); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin: 0 0 15px; padding-top: 18px; border-top: 1px solid var(--line); }
h2 { font-size: clamp(1.65rem, 4vw, 2.35rem); line-height: 1; letter-spacing: -.055em; }
.section-count { white-space: nowrap; padding-bottom: 2px; }
.artists { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.artist { background: var(--card); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.artist:hover { border-color: var(--lime); }
.artist img { display: block; width: 100%; height: auto; aspect-ratio: 1.18; object-fit: cover; }
.artist-copy { display: flex; gap: 6px; align-items: center; justify-content: space-between; padding: 12px; }
.artist-copy strong { display: block; font-size: 1.08rem; letter-spacing: -.025em; }
.artist-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: .74rem; }
.booking { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(16px, 4vw, 26px); margin: 27px 0; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.booking p:last-child { margin-top: 6px; color: var(--muted); font-size: .84rem; }
.booking-link { display: inline-flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 5px; background: var(--lime); color: #141b0b; font-weight: 800; font-size: .85rem; white-space: nowrap; }
.booking-link:hover { background: #dcffa1; }
footer { padding: 17px 0 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
footer a:hover { color: var(--text); }
@media (max-width: 660px) {
  .shell { width: min(100% - 32px, 1000px); }
  .artists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
}
@media (max-width: 380px) {
  .masthead-note { font-size: .57rem; }
  .booking { align-items: start; flex-direction: column; }
}