/* --- self-hosted type -------------------------------------------------
   Lexend, latin subset, variable weight 100-900 in a single file. SIL Open
   Font License, self-hosted, so the page makes no external font request.

   Chosen on the letterforms, checked against two Anjuna sleeves rather than
   guessed: the wordmark's capital A has a FLAT, truncated apex. Jost's is
   pointed and so is Futura's — both were rendered against the artwork and
   both are wrong. Lexend's is flat and its proportions sit closest.

   NOTE THE SUBSET. An earlier build shipped a Poppins containing no Latin
   glyphs, because Google serves one file per subset and lists devanagari
   first. It failed silently — the @font-face resolved, the request returned
   200 — and every browser fell through to Futura. Any font swap must render a
   string through the shipped file and confirm the glyphs exist before it is
   committed. A 200 OK is not evidence.
--------------------------------------------------------------------- */
@font-face{
  font-family:Lexend;
  src:url(/fonts/lexend-latin.woff2) format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#081324;
  --bg-2:#0d1c31;
  --panel:#0f2138;
  --line:#1b3350;
  --ink:#ffffff;
  --ink-2:#a8bcd4;
  --ink-3:#6e86a3;
  --accent:#4da3ff;
  --radius:10px;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Lexend',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400;          /* normal body text */
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  letter-spacing:0.01em;
}

/* ---------------------------------------------------------- masthead */
.masthead{
  padding:56px 28px 28px;
  max-width:1180px;
  margin:0 auto;
}
.wordmark{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0;
  font-size:clamp(28px,4.4vw,44px);
  font-weight:500;          /* medium — the sleeve wordmark is solid, not hairline */
  letter-spacing:-0.015em;
}
.wordmark em{font-style:normal;color:var(--ink-2)}  /* same weight; the colour separates them */
.mark{
  height:0.62em;width:auto;flex:none;
  fill:var(--ink);
}
.tagline{
  margin:12px 0 0 calc(1.26em + 16px);
  color:var(--ink-3);
  font-size:14px;
  font-weight:300;
}

/* ------------------------------------------------------------- layout */
main{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px 80px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.banner{
  background:rgba(240,180,41,.10);
  border:1px solid rgba(240,180,41,.35);
  border-radius:var(--radius);
  padding:14px 18px;color:#f0d9a8;font-size:14px;font-weight:300;
}
.banner code{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#f0b429}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 24px;
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.panel-head h2{
  margin:0;
  font-size:13px;
  font-weight:400;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.count{
  margin-left:10px;
  color:var(--ink-3);
  letter-spacing:0.02em;
  text-transform:none;
  font-weight:300;
}

/* ----------------------------------------------------------- controls */
.btn{
  appearance:none;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  padding:9px 16px;
  font:inherit;
  font-weight:300;
  cursor:pointer;
  transition:border-color .15s, background .15s, opacity .15s;
  text-decoration:none;
  display:inline-block;
}
.btn:hover:not(:disabled){border-color:var(--accent);background:rgba(77,163,255,.08)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-accent{border-color:var(--accent);color:var(--accent)}
.btn-ghost{border-color:transparent;color:var(--ink-3)}
.btn-ghost:hover{border-color:var(--line);background:transparent}

.input,.select{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--ink);
  padding:9px 12px;
  font:inherit;
  font-weight:300;
  min-width:0;
}
.input::placeholder{color:var(--ink-3)}
.input:focus,.select:focus{outline:none;border-color:var(--accent)}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg-btn{
  appearance:none;background:transparent;border:0;color:var(--ink-3);
  padding:8px 14px;font:inherit;font-weight:300;cursor:pointer;
}
.seg-btn.is-on{background:rgba(77,163,255,.14);color:var(--ink)}
.seg-sm .seg-btn{padding:7px 12px;font-size:13px}

.where-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* A class that sets display beats the UA rule for [hidden], so the attribute
   silently stopped working on .where-row. Make it authoritative. */
[hidden]{display:none !important}
.where-row .input{flex:1 1 220px}
.sep{color:var(--ink-3);font-size:13px}
.radius{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:13px;white-space:nowrap}
.where-status{margin:14px 0 0;color:var(--ink-3);font-size:13px}
.where-status.is-set{color:var(--accent)}

.artist-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.input-search{min-width:220px}

/* ------------------------------------------------------------- chips */
.cap-note{margin:0 0 14px;color:#f0b429;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chips.is-collapsed{max-height:44px;overflow:hidden}
.chips-more{
  appearance:none;background:transparent;border:1px dashed var(--line);
  border-radius:999px;padding:5px 13px;font:inherit;font-size:13px;font-weight:300;
  color:var(--ink-3);cursor:pointer;
}
.chips-more:hover{border-color:var(--accent);color:var(--ink)}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(77,163,255,.12);
  border:1px solid rgba(77,163,255,.35);
  border-radius:999px;padding:5px 8px 5px 13px;font-size:13px;font-weight:300;
}
.chip button{
  appearance:none;background:transparent;border:0;color:var(--ink-2);
  cursor:pointer;font-size:15px;line-height:1;padding:0 3px;
}
.chip button:hover{color:#fff}

/* ------------------------------------------------------- artist grid */
.artist-grid{
  display:grid;
  /* 190px columns wrapped long names onto three lines with the badges landing
     on top of them. 280px holds "Above & Beyond" and its tags on one line. */
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:2px;
  max-height:340px;
  overflow-y:auto;
  padding-right:6px;
}
.artist{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:6px;cursor:pointer;
  font-weight:300;color:var(--ink-2);
  transition:background .12s,color .12s;
  min-width:0;              /* let the name truncate instead of pushing tags */
}
.artist .nm{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.artist:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.artist.is-on{background:rgba(77,163,255,.14);color:var(--ink)}
.artist .box{
  width:13px;height:13px;flex:none;border:1px solid var(--ink-3);border-radius:3px;
}
.artist.is-on .box{background:var(--accent);border-color:var(--accent)}
.artist .tag{flex:none;margin-left:8px;font-size:10px;letter-spacing:.1em;color:var(--ink-3)}
.artist .tag-live{flex:none;margin-left:auto;color:var(--accent)}
.artist .tag-live + .tag{margin-left:8px}

/* ----------------------------------------------------------- results */
.results{display:flex;flex-direction:column;gap:2px}
.empty{color:var(--ink-3);margin:6px 0;font-weight:300}
.month{
  margin:20px 0 8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line);padding-bottom:8px;
}
.month:first-child{margin-top:0}
.event{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:16px;align-items:baseline;
  padding:13px 8px;border-radius:8px;
  text-decoration:none;color:inherit;
  transition:background .12s;
}
.event:hover{background:rgba(255,255,255,.04)}
.event .date{color:var(--accent);font-size:13px;font-weight:300;white-space:nowrap}
.event .who{font-weight:300}
.event .where{color:var(--ink-3);font-size:13px;margin-top:2px}
.event .dist{color:var(--ink-3);font-size:12px;white-space:nowrap}

/* ------------------------------------------------------------- modal */
.modal{
  background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;max-width:560px;width:calc(100% - 40px);
}
.modal::backdrop{background:rgba(4,10,20,.72)}
.modal h3{margin:0 0 10px;font-weight:300;font-size:19px}
.modal-p{color:var(--ink-2);font-size:14px;margin:0 0 18px}
.modal-label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.input-url{width:100%;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.modal-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.modal-hint{color:var(--ink-3);font-size:12px;margin:16px 0 0}

/* ------------------------------------------------------------- footer */
.foot{
  max-width:1180px;margin:0 auto;padding:0 28px 48px;
  color:var(--ink-3);font-size:12px;
  display:flex;gap:10px;flex-wrap:wrap;
}
.dot{opacity:.5}

@media (max-width:640px){
  .masthead{padding:36px 20px 20px}
  main{padding:0 20px 60px}
  .panel{padding:18px 16px}
  .event{grid-template-columns:56px 1fr;gap:12px}
  .event .dist{display:none}
}


/* --- date inputs + country picker ------------------------------------- */
.input-date{
  padding:7px 10px; font:inherit; font-size:14px; font-weight:300;
  color-scheme:dark; min-width:9.5rem;
}
#panel-when .where-row{ align-items:center; }
.label-tag{
  margin-left:6px; font-size:10px; letter-spacing:.08em; opacity:.62;
}