:root {
  --ink: #17171a; --muted: #6b6b73; --line: #e4e4e8; --bg: #fff; --accent: #b4341f;
  --radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #ececef; --muted: #9a9aa3; --line: #2c2c31; --bg: #131316; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: inherit; }
main { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

header.site {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  max-width: 46rem; margin: 0 auto; padding: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; text-decoration: none; letter-spacing: -0.01em; }
.search { display: flex; gap: .5rem; margin-left: auto; flex-wrap: wrap; }
.search input, .search select, .search button {
  font: inherit; padding: .35rem .6rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg); color: inherit;
}
.search button { cursor: pointer; }
/* An input's default width is wider than its box, so without this the row cannot
   shrink and the header overflows instead of wrapping. */
.search input { min-width: 0; }
.search__q { flex: 1 1 9rem; }
.search__near { white-space: nowrap; }
.search__near.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.search__near[disabled] { cursor: progress; color: var(--muted); }
/* Every icon on this site sits beside the word it illustrates and is marked
   aria-hidden, so none of them has to carry meaning alone. Sized in em to track the
   text they label, and dimmed so they support the word rather than compete with it.
   Fixed width keeps a column of links aligned when the glyphs differ. */
.fa-solid, .fa-brands, .fa-regular {
  font-size: .85em; opacity: .7; width: 1em; text-align: center;
}
/* Full strength where the icon is the affordance: the primary button, and the
   Facebook mark, which is recognised by its colour and shape rather than read. */
.button .fa-solid, .actions .fa-brands { opacity: 1; }

.results__filter { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.search__error { margin: .4rem 0 0; color: var(--accent); font-size: .85rem; }

/* A bill reads as one line whether or not anybody has resolved the names in it, so
   the separator is quiet and a resolved name is a link rather than a badge. */
.event__lineup .sep, .detail__lineup .sep { color: var(--muted); }

h1 { font-size: 1.6rem; letter-spacing: -0.02em; margin: 0 0 .25rem; }
h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em;
     color: var(--muted); margin: 2rem 0 .5rem; font-weight: 600; }
.lede { color: var(--muted); margin-top: 0; }

.presets { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 0; }
.presets a {
  text-decoration: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .8rem; font-size: .9rem;
}

.events { display: flex; flex-direction: column; }
.event {
  display: grid; grid-template-columns: 11rem 1fr auto; gap: 1rem;
  padding: .75rem 0; border-top: 1px solid var(--line); align-items: baseline;
}
.event__when { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.event__title { margin: 0; font-size: 1.02rem; font-weight: 600; }
.event__title a { text-decoration: none; }
.event__title a:hover { text-decoration: underline; }
.event__lineup, .event__where { margin: .15rem 0 0; font-size: .88rem; color: var(--muted); }
.event__meta { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem;
               font-size: .85rem; white-space: nowrap; }
.price { font-variant-numeric: tabular-nums; }
/* Sold out. The only availability state published (§5) and the only one styled:
   there is no "available" class because there is no such claim to make. Weight and
   colour rather than a filled badge — it belongs to the row it is in, and sixty
   rows with three loud badges in them read as an error state. */
.sold-out { color: var(--accent); font-weight: 600; }
p.sold-out { margin: 1.5rem 0 -0.75rem; font-weight: 500; }
.details { font-weight: 600; text-decoration: none; }
.distance, .space { color: var(--muted); }

.detail__when { color: var(--muted); margin-bottom: .25rem; }
.unknown { color: var(--muted); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 1.5rem 0; }
.facts dt { color: var(--muted); font-size: .9rem; }
.facts dd { margin: 0; }
.actions { display: flex; gap: 1rem; align-items: center; margin: 1.5rem 0; }
.button {
  background: var(--ink); color: var(--bg); text-decoration: none;
  padding: .5rem 1rem; border-radius: var(--radius); font-weight: 600;
}
.provenance { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line);
              color: var(--muted); font-size: .85rem; }

.notice { background: color-mix(in srgb, var(--accent) 8%, transparent);
          border-left: 3px solid var(--accent); padding: .6rem .8rem;
          border-radius: 0 var(--radius) var(--radius) 0; font-size: .9rem; }
.empty, .count { color: var(--muted); }
.more { margin-top: 1.5rem; }

.venues { list-style: none; padding: 0; }
.venues li { padding: .5rem 0; border-top: 1px solid var(--line); }
.venues .city, .venues .count, .venues .operated { color: var(--muted); font-size: .9rem; }

pre { background: color-mix(in srgb, var(--ink) 6%, transparent);
      padding: .8rem; border-radius: var(--radius); overflow-x: auto; }

footer.site { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem;
              border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }

@media (max-width: 34rem) {
  .event { grid-template-columns: 1fr; gap: .2rem; }
  .event__meta { align-items: flex-start; flex-direction: row; gap: .8rem; }
  .search { margin-left: 0; width: 100%; }
  .search__q { flex-basis: 100%; }
}


.facets { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1rem 0 .5rem; }
.facet {
  text-decoration: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .25rem .7rem; font-size: .85rem;
}
.facet.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.facet__count { opacity: .6; font-variant-numeric: tabular-nums; }
.facets__coverage { color: var(--muted); font-size: .82rem; margin: .25rem 0 1rem; }
.genres { color: var(--muted); font-size: .8rem; }

.facet.is-clear { border-style: dashed; }
.facet.is-excluded { border-color: var(--accent); color: var(--accent); }
.facets--excluded { margin-top: 0; }
.breadths { display: flex; gap: .3rem; flex-wrap: wrap; margin: .25rem 0 .5rem; font-size: .8rem; }
.breadth { text-decoration: none; color: var(--muted); padding: .2rem .5rem; border-radius: var(--radius); }
.breadth.is-active { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }

.by-genre { margin-top: 2rem; }

/* Status ------------------------------------------------------------------ */

table.status { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; }
table.status th { text-align: left; font-weight: 600; color: var(--muted); padding: 0.4rem 0.6rem 0.4rem 0; border-bottom: 1px solid var(--line); }
table.status td { padding: 0.5rem 0.6rem 0.5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.status tr.is-bad td { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.status__role { color: var(--muted); font-size: 0.85em; }
.status__never { color: var(--muted); }
.status__off { color: var(--muted); font-style: italic; }
.status__bad { color: var(--accent); }
.status__note { color: var(--muted); font-size: 0.85rem; max-width: 46rem; }

.status__alert { border: 1px solid var(--accent); border-radius: 6px; padding: 0.8rem 1rem; margin: 1.5rem 0; }
.status__alert h2 { margin: 0 0 0.4rem; font-size: 1rem; }
.status__problems { margin: 0; padding-left: 1.1rem; }
.status__problems li { margin: 0.15rem 0; }