/* Readability first. The catalogue is a directory people scan quickly, so
   contrast, hierarchy and hit targets outrank atmosphere everywhere the two
   disagree. Both palettes are checked against WCAG AA for body text.

   Layout in three sizes:
     wide    — band list pinned open beside the grid
     tablet  — same, narrower; the grid gives up a column
     narrow  — band list becomes a drawer, tabs move to a bottom bar within
               thumb reach, and the release sheet takes the whole screen */

:root,
:root[data-theme="dark"] {
  --bg: #17171b;
  --surface: #202027;
  --raised: #292930;
  --ink: #f4f2f0;
  --dim: #b6b3bd;
  --faint: #8a8794;
  --line: #383842;
  --accent: #ef8b46;
  --accent-ink: #1a1207;
  --accent-soft: #ef8b4626;
  --scroll: #43434f;
  --scroll-hover: #5b5b6a;
  --shadow: 0 18px 48px rgba(0, 0, 0, .55);
  --veil: rgba(8, 8, 11, .66);
}

:root[data-theme="light"] {
  --bg: #f6f5f2;
  --surface: #ffffff;
  --raised: #efedea;
  --ink: #191a1d;
  --dim: #55535c;
  --faint: #7b7984;
  --line: #dbd8d2;
  --accent: #b04c17;
  --accent-ink: #ffffff;
  --accent-soft: #b04c1718;
  --scroll: #c8c4bd;
  --scroll-hover: #a9a49b;
  --shadow: 0 18px 44px rgba(30, 25, 20, .18);
  --veil: rgba(40, 34, 28, .42);
}

:root {
  --radius: 6px;
  --bar-h: 60px;
  --side-w: 268px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* A `display` rule on an element that also carries `hidden` beats the browser
   default, leaving an invisible overlay that eats every click. Never optional. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- scrollbars ---------- */

/* The default bar is a bright slab against a dark page and the first thing the
   eye lands on. Thin, themed, and out of the way. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

::-webkit-scrollbar-thumb {
  background: var(--scroll);
  border-radius: 999px;
  /* Border of page colour keeps the thumb from touching the edges. */
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); background-clip: content-box; }

/* ---------- top bar ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.mark {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--accent);
  transition: transform .12s;
}
.brand:hover .mark { transform: scale(1.08); }
.brand small {
  display: block;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--faint);
}

.search { position: relative; flex: 1; max-width: 560px; min-width: 0; }
.search input {
  width: 100%;
  padding: 10px 42px 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}
:root[data-theme="light"] .search input { background: var(--surface); }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search input::placeholder { color: var(--faint); }

#hint {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font: 11px var(--font);
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  pointer-events: none;
}
.search input:focus + #hint { opacity: 0; }

.tabs { display: flex; gap: 3px; }
.tabs button {
  background: none;
  border: 1px solid transparent;
  padding: 8px 14px;
  border-radius: var(--radius);
  color: var(--dim);
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
}
.tabs button:hover { color: var(--ink); background: var(--raised); }
.tabs button.on { color: var(--accent); background: var(--accent-soft); }

.icon-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--dim);
  cursor: pointer;
  padding: 8px 11px;
  line-height: 1;
  flex: none;
}
.icon-btn:hover { color: var(--ink); border-color: var(--accent); }

/* ---------- layout ---------- */

.layout { display: flex; align-items: flex-start; }

.sidebar {
  position: sticky;
  top: var(--bar-h);
  width: var(--side-w);
  flex: none;
  height: calc(100vh - var(--bar-h));
  height: calc(100dvh - var(--bar-h));
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.side-head { position: relative; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }

/* The open drawer covers the toggle that opened it, so on narrow screens it
   carries its own way out rather than relying on a tap outside. */
.drawer-close { display: none; }
.side-head input {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}
:root[data-theme="light"] .side-head input { background: var(--surface); }
.side-head input:focus { border-color: var(--accent); }
.side-head p {
  margin: 9px 2px 0;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

.bandlist {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 8px 20px;
}

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  padding: 7px 9px;
  border-radius: var(--radius);
  color: var(--dim);
  cursor: pointer;
  text-align: left;
}
.row:hover { background: var(--raised); color: var(--ink); }
.row.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.row b { font-weight: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row span { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--faint); flex: none; }
.row.on span { color: var(--accent); }

.letterhead {
  margin: 14px 9px 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}
.letterhead:first-child { margin-top: 2px; }

main { flex: 1; min-width: 0; padding: 20px 24px 80px; outline: none; }

/* Drawer backdrop — only ever visible on narrow screens. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--veil);
}

/* ---------- lead strip ---------- */

.lead {
  margin: 0 0 18px;
  padding: 12px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  color: var(--dim);
  font-size: 13.5px;
  max-width: 78ch;
}
.lead a { color: var(--accent); text-decoration: none; font-weight: 500; }
.lead a:hover { text-decoration: underline; }

.linky {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.linky:hover { text-decoration: underline; }

/* ---------- toolbar ---------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  color: var(--dim);
  font-size: 13px;
}
.toolbar .count { color: var(--ink); font-weight: 600; font-size: 16px; }
.toolbar select {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 7px 9px;
  border-radius: var(--radius);
  max-width: 100%;
}

.filters { gap: 7px; }
.selects { gap: 8px; flex-wrap: wrap; }
.selects select { flex: 0 1 auto; min-width: 0; }
.pill {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--dim);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
.pill b { font-weight: 400; opacity: .65; }
.pill:hover { color: var(--ink); border-color: var(--accent); }
.pill.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pill.on b { opacity: .8; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip::after { content: "×"; font-size: 15px; opacity: .8; }

/* ---------- release grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 24px 16px;
}

.card {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  border-radius: var(--radius);
}
.card:hover .art { border-color: var(--accent); transform: translateY(-2px); }
.card:hover b { color: var(--accent); }

.art {
  position: relative;
  aspect-ratio: 1;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: border-color .12s, transform .12s;
}
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art .letter { font-size: 46px; font-weight: 700; color: var(--faint); opacity: .5; }
.art .n {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}

.card b { display: block; margin-top: 9px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.card i {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--dim);
  margin-top: 2px;
}
.card b, .card i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.more {
  display: block;
  margin: 32px auto 0;
  padding: 11px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--dim);
  cursor: pointer;
  font-weight: 500;
}
.more:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- feed ---------- */

.feed { max-width: 740px; }
.post {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
}
.post time { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.post p { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.post a { color: var(--accent); }

/* ---------- description page ---------- */

/* Prose gets a reading measure, and centres itself once the band list is
   hidden on this tab so it does not cling to the left edge of a wide page. */
.page { max-width: 68ch; margin: 0 auto; padding-bottom: 20px; }
.page h1 { font-size: 27px; margin: 6px 0 10px; letter-spacing: -.01em; }
.page h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  margin: 32px 0 8px;
}
.page p { margin: 0 0 12px; color: var(--dim); }
.page-lead { font-size: 17px; color: var(--ink) !important; line-height: 1.5; }
.page .open { margin-top: 6px; }
.fineprint { font-size: 12px; color: var(--faint) !important; margin-top: 26px; }

/* Flex rather than grid: a grid leaves empty cells on the last row, which
   read as a broken tile because the gaps are drawn as borders. Flex items
   stretch instead, so the block always ends flush. */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 22px 0 6px;
}
.stats div {
  flex: 1 1 118px;
  background: var(--surface);
  padding: 14px 15px;
}
.stats b {
  display: block;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.stats span { font-size: 12px; color: var(--faint); }

.keys { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.keys span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.page kbd {
  font: 12px var(--font);
  background: var(--raised);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--ink);
}

/* ---------- detail sheet ---------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--veil);
  display: grid;
  place-items: center;
  padding: 24px;
}
.sheet .inner {
  position: relative;
  width: min(740px, 100%);
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 26px;
}
.sheet .top { display: flex; gap: 22px; margin-bottom: 20px; }
.sheet .art { width: 176px; flex: none; }
.sheet h2 { margin: 3px 0 0; font-size: 23px; line-height: 1.25; }
.sheet .band {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.sheet .band:hover { text-decoration: underline; }
.sheet .meta { color: var(--dim); font-size: 13px; margin: 9px 0 16px; }
.sheet .meta a { color: var(--accent); }

.tracks { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.tracks li {
  display: flex;
  gap: 12px;
  padding: 9px 6px;
  border-radius: 4px;
  border-bottom: 1px solid var(--line);
}
.tracks li:hover { background: var(--raised); }
.tracks li > span:first-child { color: var(--faint); width: 24px; flex: none; text-align: right; }
.tracks li > span:last-child { color: var(--faint); margin-left: auto; font-variant-numeric: tabular-nums; }
.tracks a { flex: 1; text-decoration: none; overflow-wrap: anywhere; }
.tracks li:hover a { color: var(--accent); }

.open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}
.open:hover { filter: brightness(1.08); }

.tagrow { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.tagrow button {
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--dim);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.tagrow button:hover { color: var(--accent); border-color: var(--accent); }

.close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: 0;
  color: var(--faint);
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
  width: 40px;
  height: 40px;
}
.close:hover { color: var(--ink); }

.loading, .empty { color: var(--dim); padding: 44px 0; }
.empty b { color: var(--ink); }
.empty code {
  display: inline-block;
  margin-top: 6px;
  background: var(--raised);
  padding: 3px 8px;
  border-radius: 4px;
}

.side-toggle { display: none; }

/* ---------- tablet ---------- */

@media (max-width: 1180px) {
  :root { --side-w: 232px; }
  main { padding: 18px 18px 80px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 20px 14px; }
  .sheet .art { width: 150px; }
}

/* ---------- narrow: phones and small tablets ---------- */

@media (max-width: 900px) {
  .bar { gap: 10px; padding: 0 12px; }
  .side-toggle { display: block; }
  .brand small { display: none; }
  .mark { width: 24px; height: 24px; }
  .search { max-width: none; }

  /* Tabs leave the crowded header for a bar within thumb reach. */
  .tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    gap: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tabs button {
    flex: 1;
    border-radius: 0;
    padding: 13px 6px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tabs button.on { background: none; box-shadow: inset 0 -2px 0 var(--accent); }

  main { padding: 16px 14px calc(80px + env(safe-area-inset-bottom, 0)); }

  /* The band list becomes a drawer over the grid rather than stealing width. */
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 86vw);
    height: 100dvh;
    z-index: 60;
    box-shadow: var(--shadow);
  }
  .sidebar .side-head { padding: 14px 52px 10px 14px; }
  .drawer-close {
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    background: none;
    border: 0;
    color: var(--dim);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
  }
  .drawer-close:hover { color: var(--ink); }

  .lead { font-size: 13px; padding: 11px 13px; }

  /* Pills scroll sideways instead of stacking into a wall. Selects do not:
     they are dropdowns, and hiding one off the edge of a scrolling row makes
     it unfindable. They wrap onto their own row instead. */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
    margin-bottom: 10px;
  }
  .filters::-webkit-scrollbar { height: 5px; }

  /* Content sliced flush at the edge reads as a broken layout. The fade says
     "there is more", and only appears while there actually is. */
  .filters.scrollable {
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  }
  .filters .pill:last-child { margin-right: 10px; }

  .selects { margin-bottom: 14px; }
  /* Basis rather than a fixed fraction: three across on a phone held
     sideways, two upright, without a breakpoint for each case. */
  .selects select { flex: 1 1 150px; max-width: 100%; }

  .post { grid-template-columns: 1fr; gap: 6px; }

  .sheet { padding: 0; }
  .sheet .inner {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0));
  }
  .sheet .top { flex-direction: column; gap: 16px; }
  .sheet .art { width: 168px; }
  .sheet h2 { font-size: 21px; }

  .page h1 { font-size: 23px; }
  .page-lead { font-size: 16px; }
}

@media (max-width: 560px) {
  /* The bottom bar already says which view this is, so the words can go —
     but the mark stays, because it is the way back to the catalogue. */
  .wordmark { display: none; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 18px 12px; }
  .card b { font-size: 13px; }
  .card i { font-size: 12px; }
  .stats div { flex-basis: 40%; }
  .chip { max-width: 200px; }
}

/* A phone held sideways has ~390px of height. The header, the lead strip and
   two rows of filters fill all of it, so the catalogue itself is pushed off
   screen entirely. Anything explanatory gives way to content here. */
@media (max-height: 560px) and (orientation: landscape) {
  :root { --bar-h: 48px; }
  .lead { display: none; }
  .bar { height: 48px; }
  main { padding-top: 12px; padding-bottom: 62px; }
  .toolbar { margin-bottom: 10px; }
  .tabs button { padding: 9px 6px; }
  .sheet .top { flex-direction: row; }
  .sheet .art { width: 120px; }
  .sheet .inner { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}