:root{
  /* Without this the browser paints its form controls light, so a dark text
     colour lands on a white surface in every open dropdown. The "16.83:1"
     measurement that used to sit here was taken on the REVIEW SAMPLE, which
     has dropdowns; the shipped site had none until 7 October, so it measured
     a control that was not on the page. The declaration is right and stays;
     the number is gone. */
  color-scheme:dark;
  /* --faint was #6b6167 = 3.32:1 on --bg, below the 4.5:1 minimum, and it is
     the colour of the footer, every card date, the town-chip counts and the
     geolocation status line — the one element that has to deliver an error
     message. Now 5.92:1. Measured, not estimated. */
  --ink:#f4f1f2; --dim:#9a9095; --faint:#948a90;
  --bg:#0c0a0b; --panel:#141011; --line:#241d1f;
  --red:#e0143f; --red-soft:#ff3d63;
  /* The brand red is 4.08:1 on the background — fine for a filled button,
     short of the minimum for 12.5px uppercase text. The eyebrow uses a
     lifted red at 5.81:1 and reads as the same colour. */
  --eyebrow:#ff4066;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* The header is sticky and ~96px tall. Without this, jumping to #upcoming
   or #signup hid the top of the target behind it. */
[id]{scroll-margin-top:110px}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:"Alfa Slab One",Georgia,serif;font-weight:400;letter-spacing:-.01em}

/* nav */
header{position:sticky;top:0;z-index:50;background:rgba(12,10,11,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;gap:28px;height:96px}
.logo{display:flex;align-items:center;gap:14px;font-family:"Alfa Slab One",serif;font-size:19px}
.logo img{width:72px;height:72px;display:block;flex:none}
nav .links{display:flex;gap:26px;margin-left:auto;font-size:15px;color:var(--dim)}
nav .links a:hover{color:var(--ink)}
.btn{display:inline-block;padding:11px 22px;border-radius:999px;font-weight:600;font-size:15px;
  border:1px solid transparent;transition:.15s;white-space:nowrap}
.btn-r{background:var(--red);color:#fff}
.btn-r:hover{background:var(--red-soft)}
.btn-o{border-color:#463a3d;color:var(--ink)}
.btn-o:hover{border-color:var(--ink)}
nav .btn{margin-left:26px}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero:before{content:"";position:absolute;inset:0;
  background:radial-gradient(1100px 600px at 78% 30%,rgba(224,20,63,.30),transparent 62%),
             radial-gradient(700px 420px at 12% 85%,rgba(120,20,60,.22),transparent 65%)}
.hero .wrap{position:relative;padding:86px 24px 78px;max-width:1180px}
.eyebrow{color:var(--eyebrow);font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 18px}
.hero h1{font-size:clamp(38px,6.4vw,74px);line-height:1.02;margin:0 0 22px;max-width:15ch}
.hero p.lede{font-size:18px;color:var(--dim);max-width:52ch;margin:0 0 34px}
.cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.geo-note{font-size:13.5px;color:var(--faint);margin:16px 0 0}

/* sections */
section{padding:76px 0;border-bottom:1px solid var(--line)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 34px}
.head h2{font-size:clamp(29px,4.2vw,46px);margin:0;line-height:1.05}
.more{color:var(--red);font-weight:600;font-size:15px;white-space:nowrap}
.more:hover{color:var(--red-soft)}

/* event cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;
  display:flex;flex-direction:column;transition:.16s}
.card:hover{border-color:#40282e;transform:translateY(-2px)}
.mark{aspect-ratio:16/10;display:grid;place-items:center;position:relative}
.mark:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(12,10,11,.7))}
.mark span{font-family:"Alfa Slab One",serif;font-size:40px;color:rgba(255,255,255,.28);
  letter-spacing:.02em}
.mark.tall{aspect-ratio:3/2}
.card .shot{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.card-b{padding:16px 17px 18px;display:flex;flex-direction:column;gap:5px;flex:1}
.pill{align-self:flex-start;background:rgba(224,20,63,.15);color:var(--red-soft);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;margin:0 0 3px}
.card h3{font-family:"Inter",sans-serif;font-weight:700;font-size:16.5px;line-height:1.3;
  margin:0;letter-spacing:-.01em}
.card .venue{color:var(--red);font-size:14.5px;margin:0}
.card .when{color:var(--faint);font-size:13.5px;margin:auto 0 0;padding-top:10px;
  display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.card .when.stack{flex-direction:column;gap:2px;align-items:flex-start}
.card .where{color:var(--dim)}

/* who it's for */
.who{display:grid;grid-template-columns:1.06fr 1fr;gap:18px}
.who .right{display:grid;grid-template-rows:1fr 1fr;gap:18px}
.who>.panel,.who .right>.panel{min-height:238px}
.panel{position:relative;border-radius:13px;overflow:hidden;border:1px solid var(--line);
  padding:30px;display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;
  background:var(--panel)}
.panel:before{content:"";position:absolute;inset:0;opacity:.5}
.p1:before{background:linear-gradient(145deg,#6d1a24,#2a1018 70%)}
.p2:before{background:linear-gradient(145deg,#3a2450,#161022 70%)}
.p3:before{background:linear-gradient(145deg,#7d2a12,#241208 70%)}
.p1{min-height:100%}
.panel>*{position:relative}
.panel h3{font-size:clamp(23px,3vw,33px);margin:6px 0 10px}
.panel p{color:#cfc4c8;margin:0 0 16px;max-width:44ch;font-size:15px}
.panel .more{font-size:14.5px}

/* cities */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;
  padding:9px 17px;font-size:14.5px;color:var(--dim);transition:.14s}
.chip b{color:var(--faint);font-weight:600;margin-left:9px;font-size:13px}
.chip:hover{border-color:var(--red);color:var(--ink)}

/* near me results */
#near{display:none;margin-top:26px}
#near.on{display:block}
.nearlist{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.nearrow{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:14px 16px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.nearrow .d{color:var(--red);font-weight:700;font-size:14px;white-space:nowrap}
.nearrow b{font-weight:600;font-size:15px;display:block}
.nearrow small{color:var(--faint)}

/* signup */
.signup{background:linear-gradient(145deg,#1b1012,var(--panel));border:1px solid var(--line);
  border-radius:16px;padding:46px;display:flex;gap:40px;align-items:center;flex-wrap:wrap}
.signup h2{font-size:clamp(25px,3.4vw,38px);margin:0 0 10px}
.signup p{color:var(--dim);margin:0;max-width:46ch}
.signup form{display:flex;gap:10px;flex:1;min-width:290px;flex-wrap:wrap}
/* The form was replaced on 7 October by a mailto button, because the form
   it replaced discarded the address and claimed otherwise. */
.signup .btn{align-self:center}
.signup input{flex:1;min-width:210px;background:#0d0a0b;border:1px solid #38292d;
  border-radius:999px;padding:13px 20px;color:var(--ink);font-size:15px;font-family:inherit}
.signup input:focus{outline:none;border-color:var(--red)}

/* sponsors — two tiers, above the footer */
.sponsors{border-top:1px solid var(--line);padding:38px 0 8px}
.sponsors h3{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:0 0 16px;text-align:center}
.sponsors + .sponsors{border-top:0;padding-top:26px}
.sponrow{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.spon{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
/* 2:1, which is the shape every one of the logos already is, so they
   fill their panel instead of floating in white. At this size only two
   fit a row, which is what makes the band rotate. */
.sponsors.t1 .spon{width:400px;height:200px}
/* 290 rather than 265, so three fit a row instead of four. With Southern
   Farm Co removed on 25 September there are four tier 2 sponsors, and at
   265px all four fitted — the band would have sat perfectly still, which
   is the fault David found on the 24th. Verified rotating at 1600, 1440,
   1280, 1180, 1024, 900, 820, 768, 600, 520, 414 and 360px. */
.sponsors.t2 .spon{width:290px;height:145px}
.spon img{width:100%;height:100%;object-fit:contain;display:block;padding:6px}
a.spon:hover{border-color:var(--red)}
.spon[hidden]{display:none}
/* the membership badge is not an advertisement and does not sit with them */
.member{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);
  margin-top:30px;padding:22px 0 0;color:var(--faint);font-size:13.5px}
.member img{width:104px;height:58px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:8px;flex:none}
.member a{color:var(--dim);text-decoration:underline}
@media(max-width:900px){
  .sponsors.t1 .spon{width:calc(50% - 7px);height:140px}
  .sponsors.t2 .spon{width:calc(33.333% - 10px);height:92px}
}
@media(max-width:520px){
  .sponsors.t1 .spon{width:calc(50% - 7px);height:104px}
  .sponsors.t2 .spon{width:calc(50% - 7px);height:88px}
}

/* stats + footer */
.stats{display:flex;gap:46px;flex-wrap:wrap;color:var(--dim);font-size:15px}
.stats b{font-family:"Alfa Slab One",serif;font-weight:400;color:var(--ink);
  font-size:30px;display:block;line-height:1.25}
footer{padding:44px 0 60px;color:var(--faint);font-size:14px}
footer .fl{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:20px}
footer a:hover{color:var(--ink)}

@media(max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .who{grid-template-columns:1fr}
  .p1{min-height:260px}
  .nearlist{grid-template-columns:repeat(2,1fr)}

  /* THE NAVIGATION USED TO BE `nav .links{display:none}` HERE.
     No hamburger, no drawer, no footer fallback — so every visitor on a
     phone or a tablet, on all 10,273 pages, had the logo and one button and
     no route to Events, Venues or Artists. Most people looking for live
     music tonight are on a phone. Found 7 October, by driving the site in a
     real browser at 390px, which nothing had done.
     The links now wrap onto a second row and scroll sideways if they must,
     so they are reachable at any width without a script. */
  nav{flex-wrap:wrap;height:auto;padding:14px 0 0;gap:14px}
  nav .links{order:3;width:100%;margin:0 -24px;padding:4px 24px 12px;gap:22px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav .links::-webkit-scrollbar{display:none}
  nav .links a{white-space:nowrap;padding:4px 0}
  nav .btn{margin-left:auto}
}
@media(max-width:620px){
  nav{gap:10px;height:auto}
  .logo img{width:56px;height:56px}
  nav .btn{margin-left:auto;padding:10px 15px;font-size:14px}
  .logo{font-size:15px}
  .grid{grid-template-columns:1fr}
  .nearlist{grid-template-columns:1fr}
  .signup{padding:30px}
  section{padding:54px 0}
  .hero .wrap{padding:60px 24px 54px}
}

main.wrap{padding:38px 22px 70px}
h1.page{font-family:'Alfa Slab One',Georgia,serif;font-size:31px;line-height:1.15;margin:0 0 6px}
.crumb{font-size:13px;opacity:.72;margin:0 0 18px}
.crumb a{color:inherit}
.meta{font-size:15px;opacity:.85;margin:0 0 20px}
.prose p{margin:0 0 14px}
.prose h2{font-size:19px;margin:26px 0 10px}
.rows{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:14px;align-items:flex-start;padding:13px 15px;
  border:1px solid rgba(128,128,128,.28);border-radius:9px}
/* min-width let the date column size to its content, so the title started
   at a different x on every row of every list. Fixed width, tabular digits. */
.row .when{font-size:13px;opacity:.75;width:250px;flex:none;
  font-variant-numeric:tabular-nums}
.row .what{font-weight:600}
/* "+N more dates" on a collapsed row. David asked for the next date PLUS a
   count, so the row says how much more there is instead of hiding it. */
.row .more{display:inline-block;margin-left:10px;font-size:12px;font-weight:600;
  opacity:.7;white-space:nowrap}
.row.past{opacity:.72}
/* A ROW THAT HAS PASSED SINCE THE PAGE WAS BUILT.
   .row.past is set by the build and sits under its own honest heading —
   "Recent shows here", "Other nights at X" — where the heading already says
   it. .elapsed is set in the browser, on a row that was upcoming when the
   page was written and is not any more, so it is sitting under a "Coming up"
   heading that now lies. That one needs words, not just a dimmer: dimming
   alone is indistinguishable from nothing being wrong. The tag is a CSS
   pseudo-element, so it costs nothing per row in the upload. */
.row.elapsed{opacity:.62}
.row.elapsed .when::after{content:"Passed";display:inline-block;margin-left:9px;
  vertical-align:1px;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 8px;border-radius:99px;
  background:rgba(128,128,128,.22)}
.rows .nowpast{font-size:13px;opacity:.8;font-style:italic;margin:12px 0 0}
.passed{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 9px;border-radius:99px;
  background:rgba(128,128,128,.22);margin-bottom:12px}
.pattern{font-size:13px;opacity:.75;font-style:italic}
/* A FAILED IFRAME USED TO PAINT A LARGE WHITE SLAB ON A BLACK PAGE.
   .map set no background, and nor did the Tally or YouTube embeds, so the
   browser's default white showed through whenever the remote host was slow,
   blocked or ad-blocked: a 300px pale block on ~9,400 event and venue pages,
   and a full 1136x900 one where the submission form should be. Found by
   driving the site in a browser with remote hosts unreachable, which is also
   what a visitor on a bad connection has. */
.map,.embed,.tallywrap,.ytbox{background:var(--panel);color:var(--dim)}
.map{margin:22px 0;border-radius:9px;overflow:hidden;min-height:0}
.map iframe,.embed iframe,.tallywrap iframe{background:var(--panel);border:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}

/* ── THE FILTER BAR AND THE INITIALS PANEL ────────────────────────────
   Both existed in sample.py, the renderer that produced the review sample
   David approved on 30 September. Neither existed in this one. filters.js
   shipped on 10,272 pages with nothing to bind to, and 1,264 pages rendered
   an empty photograph slot. Restored 7 October, after David found it. */
/* filters.js hides a row with `row.hidden = true`. The browser's own
   [hidden]{display:none} is a USER-AGENT rule, and `.row{display:flex}` and
   `.card{...}` are AUTHOR rules, which win — so every "hidden" row stayed on
   screen. The counter said "20 of 753" and all 753 were still visible.
   Found by typing into the restored search box and watching nothing happen,
   which is the test nobody had run. */
[hidden]{display:none !important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:22px 0 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.filterbar .fl{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--faint)}
.filterbar .fl.grow{flex:1 1 260px}
.filterbar input[type=search]{width:100%;background:#ffffff0d;border:1px solid var(--line);
  color:var(--ink);border-radius:9px;padding:10px 13px;font:inherit;font-size:15px}
.filterbar input[type=search]:focus{outline:none;border-color:var(--red)}
.filterbar select{background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:9px 10px;font:inherit;font-size:13.5px;max-width:200px}
.filterbar select:focus{outline:none;border-color:var(--red)}
/* Some browsers paint the open dropdown themselves and ignore the select's
   colours. Stating them on the option as well covers those. */
.filterbar select option{background:var(--panel);color:var(--ink)}
.fcount{font-size:12.5px;color:var(--faint);margin-left:auto;white-space:nowrap}
.fclear{font-size:12.5px;color:var(--red-soft);text-decoration:underline}
@media(max-width:640px){
  .filterbar{padding:11px}
  .filterbar .fl{width:100%}
  .filterbar select{max-width:none;flex:1}
  .fcount{margin-left:0}
}
.mark{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  font-family:'Alfa Slab One',Georgia,serif;color:#ffffffcc;border-radius:9px;
  font-size:34px;letter-spacing:.02em}
.mark.big{max-width:560px;margin:18px 0 6px;font-size:52px}
.card .mark{margin:0 0 10px;font-size:26px;border-radius:7px}
.card .poster{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  border-radius:7px;margin:0 0 10px}
.card{border:1px solid rgba(128,128,128,.28);border-radius:9px;padding:14px}
.card h3{margin:0 0 4px;font-size:16px}
.card p{margin:0;font-size:13px;opacity:.78}
.poster{max-width:100%;height:auto;border-radius:9px;margin:0 0 18px}
.vid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.vid iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:9px}
.vid.lead-row{grid-template-columns:1fr;max-width:820px}
.vsec{font-size:19px;margin:34px 0 14px}
.vcard{display:block;text-decoration:none;color:inherit}
.vthumb{position:relative;display:block;border-radius:9px;overflow:hidden;
  background:rgba(128,128,128,.18);aspect-ratio:16/9}
/* hqdefault.jpg is always 480x360, and a 16:9 video sits inside it with a
   45px black bar top and bottom. object-fit:cover on a 16:9 box scales to the
   width and crops exactly (360-270)/2 = 45px off each end — the bars, and
   nothing else. The first version multiplied that by a guessed 1.3 and ate a
   third of the picture. No magic number: the geometry does it. */
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vplay{position:absolute;left:50%;top:50%;width:62px;height:44px;margin:-22px 0 0 -31px;
  border-radius:11px;background:rgba(17,17,17,.72);transition:background .15s}
.vplay::after{content:"";position:absolute;left:24px;top:13px;border-style:solid;
  border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.vcard:hover .vplay,.vcard:focus-visible .vplay{background:#c2410c}
.vcard:focus-visible .vthumb{outline:3px solid #c2410c;outline-offset:3px}
.vt{display:block;margin:9px 2px 0;font-size:14px;font-weight:600;line-height:1.35}
.vframe iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:9px}
.msec{font-size:19px;margin:32px 0 12px}
.menugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:13px;margin:0 0 6px}
.menugrid a{display:block;padding:15px 17px;border-radius:10px;text-decoration:none;
  background:var(--panel);color:var(--ink);line-height:1.3;
  border:1px solid var(--line);transition:.15s}
.menugrid a:hover,.menugrid a:focus-visible{border-color:var(--red);background:#1b1012}
.menugrid .mt{display:block;font-weight:700;font-size:17px}
.menugrid .md{display:block;margin-top:4px;font-size:13px;opacity:.85}
.rewards{margin:34px 0 0;padding:24px;border:1px solid rgba(128,128,128,.35);
  border-radius:10px}
.rewards h2{margin:0 0 8px;font-size:20px}
.rewards p{margin:0 0 16px;font-size:15px}
.shirtrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:16px;margin:0 0 20px}
.shirt{margin:0}
.shirt img{width:100%;height:auto;border-radius:9px;display:block;
  background:rgba(128,128,128,.14)}
.shirt figcaption{margin-top:7px;font-size:13px;opacity:.78}
.payrow{display:flex;flex-wrap:wrap;gap:11px;margin:4px 0 4px}
/* These were hard-coded navy #1F3A5F on a site whose brand colour is red, so
   "Claim your venue — $50 a month" rendered duller than the secondary button
   beside it. Inverted hierarchy on the two pages that take money. */
.payopt{display:inline-block;padding:13px 22px;border-radius:999px;font-weight:700;
  font-size:16px;text-decoration:none;background:var(--red);color:#fff;
  border:1px solid transparent;transition:background .15s}
.payopt:hover,.payopt:focus-visible{background:var(--red-soft)}
.payopt.free{background:transparent;color:var(--ink);border-color:#463a3d}
.payopt.free:hover,.payopt.free:focus-visible{border-color:var(--ink);background:transparent}
/* Pictures and links recovered from the original page markup */
.prose img,.prose .inline-shot{max-width:100%;height:auto;border-radius:9px;
  margin:6px 0 10px;display:block}
.prose a{color:var(--red-soft);text-decoration:underline;text-underline-offset:2px}
.notfound{max-width:720px}
.notfound .big{font-family:'Alfa Slab One',Georgia,serif;font-size:56px;
  line-height:1;margin:0 0 10px;opacity:.5}
.nf-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;margin:26px 0 0}
.nf-links a{display:block;padding:14px 16px;border-radius:9px;background:var(--panel);
  color:var(--ink);text-decoration:none;font-weight:700;border:1px solid var(--line)}
.nf-links a:hover,.nf-links a:focus-visible{border-color:var(--red);background:#1b1012}
.nf-links span{display:block;font-weight:400;font-size:13px;opacity:.85;margin-top:3px}
.alpha{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px}
.lean{list-style:none;margin:0 0 26px;padding:0;columns:2;column-gap:30px}
.lean li{break-inside:avoid;padding:3px 0;font-size:14px}
.lean span{opacity:.6;font-variant-numeric:tabular-nums;margin-right:7px}
@media(max-width:700px){.lean{columns:1}}
.alpha a{padding:5px 11px;border:1px solid rgba(128,128,128,.32);border-radius:7px;
  font-size:14px;text-decoration:none}
@media(max-width:640px){.row{flex-direction:column;gap:5px}
  .row .when{width:auto;flex:0 1 auto}}