/* atheory conventions: Lexend, all lowercase, everything in atheory blue on lavender white.
   Hierarchy comes from weight (300 body, 600 emphasis) and fill, not from colour or big size jumps. */
:root{
  --blue:#3300FF;           /* text, borders, buttons */
  --on-blue:#FFFFFF;
  --ground:#F6F5FF;
  --surface:transparent;
  --tint:#ECE6FF;           /* hover / pressed wash */
  --line:#3300FF;
  --soft:rgba(51,0,255,.22); /* hairlines inside boxes */
  --font:"Lexend",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --blue:#BFAAFF; --on-blue:#150055; --ground:#150055; --surface:transparent; --tint:#2A1590;
    --line:#BFAAFF; --soft:rgba(191,170,255,.25);
  }
}
:root[data-theme="dark"]{
  --blue:#BFAAFF; --on-blue:#150055; --ground:#150055; --surface:transparent; --tint:#2A1590;
  --line:#BFAAFF; --soft:rgba(191,170,255,.25);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .brand img{filter:brightness(0) invert(78%) sepia(30%) saturate(900%) hue-rotate(205deg)} }
:root[data-theme="dark"] .brand img{filter:brightness(0) invert(78%) sepia(30%) saturate(900%) hue-rotate(205deg)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--ground);color:var(--blue);font-family:var(--font);font-weight:300;font-size:16px;line-height:1.55;text-transform:lowercase;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:var(--blue);text-underline-offset:3px}
b,strong{font-weight:600}
button{font:inherit;text-transform:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.bar{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 16px 0;max-width:960px;margin:0 auto}
.brand img{display:block;height:auto;width:84px}
.wrap{width:100%;max-width:960px;margin:0 auto;padding:32px 16px 48px;display:flex;flex-direction:column;gap:28px}

/* type scale: kept tight on purpose */
.hero{display:flex;flex-direction:column;gap:6px}
.eyebrow{margin:0;font-size:14px;letter-spacing:.08em}
h1{margin:0;font-weight:600;font-size:2rem;line-height:1.15;letter-spacing:-.02em}
.tag{margin:0;font-size:1rem}
h2{margin:0;font-weight:600;font-size:1.125rem}
h3{margin:0;font-weight:600;font-size:1rem}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px}
.card p{margin:0}
.btn{appearance:none;border:1px solid var(--blue);background:var(--blue);color:var(--on-blue);padding:11px 22px;border-radius:999px;font-weight:400;cursor:pointer;align-self:flex-start}
.btn:hover{filter:brightness(1.15)}
.btn.ghost{background:transparent;color:var(--blue)}
.btn.ghost:hover{background:var(--tint);filter:none}
.link{appearance:none;background:none;border:0;color:var(--blue);cursor:pointer;padding:6px 0;font-size:15px;text-decoration:underline;text-underline-offset:3px}
.alt summary{cursor:pointer;font-size:15px}
.alt[open] summary{margin-bottom:12px}
.row{display:flex;gap:8px;flex-wrap:wrap}
input[type=email]{flex:1 1 220px;font:inherit;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--ground);color:var(--blue)}
input::placeholder{color:var(--blue);opacity:.5}
.fine{font-size:15px;margin:0}
ol.fine{padding-left:20px;display:flex;flex-direction:column;gap:4px}
.meter{height:6px;border-radius:99px;border:1px solid var(--line);overflow:hidden}
.meter span{display:block;height:100%;width:0;background:var(--blue);transition:width .2s}
.drop{border:1.5px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;cursor:pointer}
.drop.over,.drop:hover{background:var(--tint)}

/* four boxes */
.tally{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tally div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.tally b{font-size:1.5rem;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.tally span{font-size:14px}
@media (max-width:640px){.tally{grid-template-columns:repeat(2,minmax(0,1fr))}}

.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.grow{flex:1}
.chip{appearance:none;border:1px solid var(--line);background:var(--surface);padding:6px 14px;border-radius:999px;font-size:15px;cursor:pointer;color:var(--blue)}
.chip:hover{background:var(--tint)}
.chip[aria-pressed="true"]{background:var(--blue);color:var(--on-blue)}

#picks{display:flex;flex-direction:column;gap:8px}
.pick{display:grid;grid-template-columns:70px 1fr;gap:12px;font-size:15px}
.pick .pd{font-variant-numeric:tabular-nums}

#months{display:flex;flex-direction:column;gap:28px}
.month{display:flex;flex-direction:column;gap:10px}
.month-head{display:flex;align-items:baseline;gap:14px}
.month-head .rule{flex:1;height:1px;background:var(--line)}
.month-head .count{font-size:14px}
.gigs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gig{display:grid;grid-template-columns:52px 1fr auto;gap:0 16px;align-items:center;background:var(--surface);border:1px solid var(--soft);border-radius:var(--r);padding:12px 12px 12px 16px}
.gig:hover{border-color:var(--line)}
.gig.hl{border-color:var(--line);box-shadow:inset 0 0 0 1px var(--line);background:var(--tint)}
.when{display:flex;flex-direction:column;line-height:1.15;font-variant-numeric:tabular-nums}
.when .d{font-size:1.125rem;font-weight:600}
.when .w{font-size:13px}
.who{display:flex;flex-direction:column;min-width:0}
.who .name{font-weight:600;font-size:1rem;overflow-wrap:anywhere}
.who .place,.who .note{font-size:15px}
.role{font-size:13px;font-weight:300;margin-left:8px}
.meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tagp{font-size:13px;padding:2px 10px;border-radius:999px;border:1px solid var(--soft);white-space:nowrap}
.tagp.small{border-color:var(--line);font-weight:600}
.tagp.new{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.tagp.songs{border-color:transparent;padding-left:4px;padding-right:4px}
.fav{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--blue);width:34px;height:34px;border-radius:50%;font-size:16px;line-height:1;cursor:pointer;display:inline-grid;place-items:center;flex-shrink:0}
.fav:hover{background:var(--tint)}
.fav[aria-pressed="true"]{background:var(--blue);color:var(--on-blue)}
@media (max-width:640px){
  .gig{grid-template-columns:44px 1fr;row-gap:8px}
  .meta{grid-column:2;justify-content:flex-start}
}
.empty{text-align:center;padding:32px 0}
.band{margin-top:auto;aspect-ratio:8817/1189;min-height:72px;max-height:220px;background:#F6F5FF url(footer-band.png) left center/cover no-repeat;display:flex;align-items:flex-end;justify-content:flex-start;padding:12px 16px}
.band p{margin:0;color:#fff;font-size:14px}

/* proper names keep their real casing; everything else follows the house lowercase */
.who .name,.who .place,.pick b,.pick .pv{text-transform:none}
.err{border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;background:var(--tint)}
#v-in{display:flex;flex-direction:column;gap:20px}
.tix{font-size:13px;white-space:nowrap;margin:0 4px}
#hl-list{display:flex;flex-direction:column;gap:8px}
.jump{text-decoration:none}.jump:hover{text-decoration:underline}

.btn.sm{padding:6px 16px;font-size:15px;align-self:auto}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--soft)}
.tabs a{text-decoration:none;padding:6px 0 10px;margin-bottom:-1px;border-bottom:2px solid transparent}
.tabs a[aria-selected="true"]{font-weight:600;border-bottom-color:var(--blue)}
.pane{display:flex;flex-direction:column;gap:20px}
input[type=search]{font:inherit;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--blue);max-width:360px;text-transform:none}
.venues{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.venues a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border:1px solid var(--soft);border-radius:var(--r);padding:12px 16px;text-decoration:none;height:100%}
.venues a:hover{border-color:var(--line)}
.venues .vn{font-weight:600;text-transform:none}
.venues .vc{font-size:14px;white-space:nowrap}
.back{text-decoration:none;font-size:15px}
.vhead{display:flex;flex-direction:column;gap:2px}
.vhead h2{font-size:1.5rem;text-transform:none}
.gig.mine{border-color:var(--line)}
.who .bill{font-size:15px;text-transform:none}
.who .bill b{font-weight:600}
.place a{text-decoration:none}.place a:hover{text-decoration:underline}