/* IBM Plex Sans and IBM Plex Mono (owner pick 2026-11-14), self-hosted (SIL
   Open Font License 1.1: https://openfontlicense.org, license file
   IBMPlex-OFL.txt next to the fonts; files from @fontsource). The same latin +
   latin-ext subsets Google Fonts serves; unicode-range loads latin-ext only
   when a page needs it. Plex Mono sets times and lengths. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-ext-600.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* "Slick" (owner 2026-11-14): an editorial catalogue. Near-white page, ink
   type, hairline-divided lists instead of cards, 4-6px corners at most, one
   deep indigo accent for links, near-black buttons. Unknown tracks are amber:
   a thin left marker and amber text, never a tinted block.
   Text contrast (WCAG AA, checked both modes): --ink, --muted, --acc-ink and
   --open-ink on --bg and --surface; --on-btn on --btn; --open-ink on --open-tint. */
:root {
  --bg: #fafafa; --surface: #ffffff; --sunk: #f0f0f0; --ink: #0a0a0a; --muted: #6b6b6b;
  --line: #e5e5e5; --line-2: #d4d4d4; --field-line: #8f8f8f;
  --acc: #3730a3; --acc-ink: #3730a3; --acc-tint: #eef0fb;
  --btn: #0a0a0a; --on-btn: #ffffff;
  --seg: #cfcfcf; --seg-hover: #9a9a9a; --seg-open: #c2610c; --seg-open-hover: #92400e;
  --open-ink: #b45309; --open-mark: #d97706; --open-tint: #fffaf0; --open-line: #f3d9b1;
  --gutter: 16px; --wide: 1360px;
  --body: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 4px; --r-2: 6px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a; --surface: #111111; --sunk: #1a1a1a; --ink: #ededed; --muted: #a1a1a1;
    --line: #262626; --line-2: #333333; --field-line: #707070;
    --acc: #a5b4fc; --acc-ink: #a5b4fc; --acc-tint: #1c1f33;
    --btn: #ededed; --on-btn: #0a0a0a;
    --seg: #3d3d3d; --seg-hover: #6b6b6b; --seg-open: #d97706; --seg-open-hover: #f59e0b;
    --open-ink: #f2a541; --open-mark: #d97706; --open-tint: #17120a; --open-line: #4a3517;
  }
}
@media (min-width: 720px) { :root { --gutter: 24px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; } }

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--body); letter-spacing: -.003em; overflow-wrap: break-word; display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body > main { flex: 1 0 auto; width: 100%; }
a { color: var(--acc-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--btn); color: var(--on-btn); padding: 8px 12px; border-radius: var(--r); z-index: 10; }
.skip:focus { top: 8px; }
.muted { color: var(--muted); }
.sprite { display: none; }
/* A small play triangle (CSS, so no emoji glyph on phones). */
.tri { display: inline-block; flex: none; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; margin-right: 6px; }

/* Top bar: the wordmark (its mark is a tiny timeline), plain text nav. */
.mast { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 0 var(--gutter); height: 56px; background: var(--bg); border-bottom: 1px solid var(--line); }
@media (min-width: 1100px) { .mast { padding-left: max(var(--gutter), calc((100% - var(--wide)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--wide)) / 2)); } }
.mast .brand, footer.sleeve .wm { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 600 16px/1 var(--body); letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.logo { width: 18px; height: 10px; flex: none; background: linear-gradient(to right, var(--ink) 0 38%, transparent 38% 48%, var(--ink) 48% 70%, transparent 70% 80%, var(--seg-open) 80%); }
nav.band { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 28px); }
nav.band a { color: var(--muted); font: 500 14px/1 var(--body); text-decoration: none; white-space: nowrap; padding: 6px 0; border-bottom: 1px solid transparent; }
nav.band a:hover { color: var(--ink); }
nav.band a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
nav.band a.signin { color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r); padding: 7px 11px; }
nav.band a.signin:hover { border-color: var(--ink); }
@media (max-width: 600px) {
  .mast { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 0; row-gap: 4px; }
  nav.band { width: 100%; gap: 18px; overflow-x: auto; }
  nav.band a { font-size: 14px; padding: 10px 0 11px; }
  nav.band a.signin { margin-left: auto; padding: 6px 10px; }
}

main { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 32px var(--gutter) 0; }
@media (min-width: 1100px) { main { padding-top: 44px; } }
nav.crumbs { font-size: 13px; color: var(--muted); margin: 0 0 20px; }
nav.crumbs a { color: var(--muted); }
nav.crumbs a:hover { color: var(--ink); }
nav.crumbs .sep { margin: 0 .5em; }

/* Type: sentence case, weights 500/600, tight headings. */
.display { font: 600 clamp(26px, 2.8vw, 34px)/1.15 var(--body); letter-spacing: -.028em; margin: 0 0 10px; overflow-wrap: anywhere; text-wrap: balance; }
.kicker { font: 500 12px/1.2 var(--mono); color: var(--muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.lede { font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 40em; margin: 0 0 18px; text-wrap: pretty; }
h2.label { font: 600 14px/1.3 var(--body); letter-spacing: -.01em; color: var(--ink); margin: 44px 0 12px; }
.col > h2.label:first-child, .ix > h2.label:first-child, .duo h2.label { margin-top: 0; }
h2.label.split { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
h2.label.split a { font-weight: 500; font-size: 13px; color: var(--muted); }
h2.label.split a:hover { color: var(--ink); }
p.meta { color: var(--muted); font-size: 14px; margin: 0 0 6px; }
p.meta .sep { margin: 0 .5em; }
.btn { display: inline-flex; align-items: center; background: var(--btn); color: var(--on-btn); border: 0; border-radius: var(--r); font: 500 14px/1 var(--body); padding: 11px 16px; text-decoration: none; cursor: pointer; }
.btn:hover { text-decoration: none; opacity: .86; }

/* Columns. A ".card" is a plain column now: no box. */
.card { background: none; border: 0; padding: 0; }
.split { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 56px; align-items: start; }
.split > .col { min-width: 0; }
@media (min-height: 700px) { .side { position: sticky; top: 24px; } }
.side .display { font-size: 24px; line-height: 1.2; letter-spacing: -.024em; margin-bottom: 8px; }
.head { margin: 0 0 28px; }
.head .lede { margin-bottom: 0; }
.head .paste { margin-top: 20px; }
.solo { max-width: 680px; margin: 8px auto 0; }
.solo > :last-child { margin-bottom: 0; }
.prose { line-height: 1.65; }
.prose h2.label { font-size: 17px; margin: 32px 0 8px; }
.prose ul { padding-left: 1.2em; margin: 12px 0; }
.prose li { margin: 6px 0; }
.legal .prose { max-width: 46em; }
.legal .prose > :first-child { margin-top: 0; }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .side { position: static; }
}

/* Home: an editorial headline left, the line and the link box right. */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: end; padding: 24px 0 48px; border-bottom: 1px solid var(--line); }
.hero-h { font-size: clamp(38px, 5.6vw, 76px); line-height: .98; letter-spacing: -.045em; font-weight: 600; margin: 0; }
.hero-h span:last-child { display: block; color: var(--muted); }
.hero-copy .lede { margin-bottom: 20px; }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); padding: 8px 0 36px; gap: 20px; } }
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; margin-top: 40px; }
.duo > :only-child { grid-column: 1 / -1; }
@media (max-width: 1000px) { .duo { grid-template-columns: minmax(0, 1fr); } }

/* The link box. */
.paste { display: flex; gap: 8px; max-width: 560px; margin: 0; }
.paste input { flex: 1; min-width: 0; height: 42px; font: 400 15px/1.3 var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--r); padding: 0 12px; }
.paste input::placeholder { color: var(--muted); opacity: 1; }
.paste input:focus-visible { outline-offset: 0; }
.paste button { flex: none; height: 42px; background: var(--btn); color: var(--on-btn); border: 0; border-radius: var(--r); font: 500 14px/1 var(--body); padding: 0 18px; cursor: pointer; }
.paste button:hover { opacity: .86; }
.paste button:disabled { opacity: .5; cursor: default; }

/* Lists: rows divided by hairlines. */
ul.list, ol.list, ol.moments, ol.tracks { list-style: none; margin: 0; padding: 0; }
.list, ol.moments { border-top: 1px solid var(--line); }
.list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 11px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.list li > a, .list li > span:first-child { min-width: 0; color: var(--ink); font-weight: 500; }
.list li > a:hover { color: var(--ink); }
.list .meta { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.list .open-n { color: var(--open-ink); font-weight: 500; }
ol.records { counter-reset: rank; }
ol.records li { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; }
ol.records li::before { counter-increment: rank; content: counter(rank); font: 400 13px/1.55 var(--mono); color: var(--muted); }

/* A set as a row: thumbnail, title + uploader, then length / named / unknown. */
ul.setrows li.setrow { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 0 18px; padding: 10px 0; }
.setrow .thumb { display: block; width: 80px; aspect-ratio: 16 / 9; border-radius: 3px; background: var(--sunk); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.setrow .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.setrow .title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.setrow .title a { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setrow .title a::after { content: ""; position: absolute; inset: 0; }
.setrow .title a:hover { text-decoration: none; }
.setrow:hover .title a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.setrow .up { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setrow .stats { display: grid; grid-template-columns: 5.2em 6.6em 7.4em; text-align: right; font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.setrow .len { font-family: var(--mono); font-size: 12.5px; }
.setrow .open-n { color: var(--open-ink); font-weight: 500; }
.duo .setrow .stats { grid-template-columns: 5.2em 6.6em 7.4em; }
@media (max-width: 640px) {
  ul.setrows li.setrow { grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; align-items: start; }
  .setrow .thumb { width: 64px; margin-top: 2px; }
  .setrow .title a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .setrow .stats { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: left; margin-top: 4px; }
  .setrow .stats > :empty { display: none; }
  .setrow .stats > :not(:empty) ~ :not(:empty)::before { content: "·"; margin: 0 .45em; color: var(--muted); font-family: var(--body); }
}

/* /sets: Records, Artists, Labels under the list, as hairline columns. */
.index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px 48px; margin-top: 56px; }
.index .ix p { margin: 0; padding-top: 11px; border-top: 1px solid var(--line); font-size: 14px; }

/* Unknown tracks, one entry per set: its name, the count, the times to play. */
ol.moments li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: baseline; padding: 13px 0 14px; border-bottom: 1px solid var(--line); }
ol.moments .set { color: var(--ink); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
ol.moments .set:hover { text-decoration: underline; text-underline-offset: 3px; }
ol.moments .open-n { color: var(--open-ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
ol.moments .times { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
ol.moments .times a { display: inline-flex; align-items: center; font: 500 12.5px/1 var(--mono); text-decoration: none; border-radius: 3px; padding: 5px 7px; }
ol.moments .times .t { color: var(--open-ink); background: var(--open-tint); box-shadow: inset 0 0 0 1px var(--open-line); }
ol.moments .times .t .tri { border-left-width: 6px; border-top-width: 3.5px; border-bottom-width: 3.5px; margin-right: 5px; }
ol.moments .times .t:hover { box-shadow: inset 0 0 0 1px var(--open-ink); }
ol.moments .times .more { color: var(--muted); font-family: var(--body); font-size: 13px; }
ol.moments .times .more:hover { color: var(--ink); }

/* Set page: the info column. */
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.pill { display: inline-block; color: var(--ink); border-radius: 3px; padding: 3px 7px; font-size: 12.5px; line-height: 1.35; box-shadow: inset 0 0 0 1px var(--line-2); }
.pill.tag { color: var(--open-ink); background: var(--open-tint); font-weight: 500; text-decoration: none; box-shadow: inset 0 0 0 1px var(--open-line); }
.pill.tag:hover { box-shadow: inset 0 0 0 1px var(--open-ink); }
.tl .bar { position: relative; height: 8px; margin: 22px 0 6px; background: var(--sunk); }
.blk { position: absolute; top: 0; bottom: 0; background: var(--seg); box-shadow: 1px 0 0 var(--bg); }
.blk::after { content: ""; position: absolute; inset: -9px 0; }
.blk:hover { background: var(--seg-hover); }
.blk.open { background: var(--seg-open); z-index: 1; }
.blk.open:hover, .blk.open:focus-visible { background: var(--seg-open-hover); }
.axis { display: flex; justify-content: space-between; color: var(--muted); font: 400 11.5px/1.4 var(--mono); }
.at { margin: 18px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; }
.at label { font-weight: 500; }
.at input { width: 100%; height: 34px; font: 500 14px/1 var(--mono); color: var(--ink); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--r); padding: 0 10px; }
.at output { grid-column: 1 / -1; min-width: 0; }
.at output .is-open { color: var(--open-ink); font-weight: 500; }
.at output .is-hint { color: var(--muted); font-style: italic; }
.listen { display: flex; align-items: center; justify-content: center; margin-top: 16px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px; color: var(--ink); font-weight: 500; font-size: 14px; text-decoration: none; }
.listen::before { content: ""; display: inline-block; margin-right: 8px; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.listen:hover { text-decoration: none; border-color: var(--ink); }
.cue:empty { display: none; }
.cue { margin: 0 0 18px; }
.cue-btn { display: flex; align-items: center; justify-content: center; width: 100%; background: var(--btn); color: var(--on-btn); border: 0; border-radius: var(--r); font: 500 14px/1 var(--body); padding: 12px 14px; cursor: pointer; text-decoration: none; }
.cue-btn:hover { opacity: .86; text-decoration: none; }
.note { margin: 10px 0 0; font-size: 14px; }
.note p { margin: 0 0 8px; }
.player { margin: 0 0 18px; }
.player a { position: relative; display: block; }
.player img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
.player .play { position: absolute; left: 50%; top: 50%; width: 52px; height: 36px; margin: -18px 0 0 -26px; background: rgba(10, 10, 10, .78); border-radius: var(--r); }
.player a:hover .play { background: #0a0a0a; }
/* impeccable-disable-next-line border-accent-on-rounded: CSS triangle play icon (borders draw the shape, no radius) */
.player .play::after { content: ""; position: absolute; left: 21px; top: 11px; border-left: 12px solid #ffffff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.player iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r); background: #000; }

/* Set page: the tracklist, rows divided by hairlines, times in mono. */
ol.tracks { border-top: 1px solid var(--line); }
.tracks li.row { position: relative; display: grid; grid-template-columns: 4.6em 1.2em minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 11px 10px 11px 12px; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.tracks .t { color: var(--muted); font: 400 13px/1.4 var(--mono); }
.tracks .mark { font-size: 12px; line-height: 1; text-align: center; color: var(--muted); }
.tracks .mark.verified { color: var(--acc-ink); }
.tracks .name { min-width: 0; }
.tracks .name b { display: block; font-weight: 500; }
.tracks .by { display: block; color: var(--muted); font-size: 13px; }
.tracks .by a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.tracks .by a:hover { color: var(--ink); text-decoration-color: currentColor; }
.tracks .by a.rec { display: inline-block; margin-left: 8px; color: var(--muted); border-radius: 3px; padding: 0 5px; font-size: 12px; text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-2); }
.tracks .by a.rec:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tracks .links { display: flex; align-items: center; gap: 12px; }
.tracks .links a { display: inline-flex; color: var(--muted); }
.tracks .links a:hover { color: var(--ink); }
.tracks .links svg { width: 16px; height: 16px; fill: currentColor; }
.tracks .play-at { align-items: center; font: 500 12px/1 var(--body); color: var(--ink); border-radius: 3px; padding: 5px 8px 5px 7px; box-shadow: inset 0 0 0 1px var(--line-2); text-decoration: none; }
.tracks .links a.play-at { color: var(--ink); }
.tracks .play-at .tri { border-left-width: 6px; border-top-width: 3.5px; border-bottom-width: 3.5px; margin-right: 5px; }
.tracks .play-at:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--ink); }
/* Named rows: "Listen" shows on hover or keyboard focus only (kept quiet). */
.tracks li.row:not(.open) .play-at { opacity: 0; }
.tracks li.row:not(.open):hover .play-at, .tracks li.row:not(.open) .play-at:focus-visible { opacity: 1; }
@media (hover: none), (max-width: 480px) {
  .tracks li.row:not(.open) .play-at { display: none; }
  .tracks li.row:not(.open) .links:not(:has(> a:not(.play-at))) { display: none; }
}
.tracks li.open { background: var(--open-tint); box-shadow: inset 2px 0 0 var(--open-mark); }
.tracks li.open .t, .tracks li.open b, .tracks li.open .ask { color: var(--open-ink); }
.tracks li.open b { font-weight: 600; }
.tracks li.open .play-at { color: var(--open-ink); box-shadow: inset 0 0 0 1px var(--open-line); background: var(--surface); }
.tracks li.open .play-at:hover { box-shadow: inset 0 0 0 1px var(--open-ink); }
.tracks li:target, .tracks li.jump { background: var(--acc-tint); box-shadow: inset 2px 0 0 var(--acc); }
.tracks li.open:target, .tracks li.open.jump { background: var(--open-tint); box-shadow: inset 3px 0 0 var(--open-mark), inset 0 0 0 1px var(--open-line); }
.tracks li.empty { display: block; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--muted); margin: 14px 0 0; }
.facts .cards { border-top: 1px solid var(--line); }
.facts .card { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.facts h3 { font: 400 13px/1.55 var(--body); color: var(--muted); margin: 0; }
.facts p { margin: 0; font-size: 14px; }
.set .island:not(:empty) { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 480px) {
  .tracks li.row { grid-template-columns: 4.4em 1em minmax(0, 1fr); padding: 11px 8px 11px 10px; }
  .tracks .links { grid-column: 3; margin-top: 6px; }
  .facts .card { grid-template-columns: minmax(0, 1fr); }
}

/* Footer: the wordmark and one line left, link columns across the right,
   the colophon on its own hairline row. */
footer.sleeve { margin: 96px 0 0; padding: 40px var(--gutter) 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 28px 40px; font-size: 14px; }
@media (min-width: 1100px) { footer.sleeve { padding-left: max(var(--gutter), calc((100% - var(--wide)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--wide)) / 2)); } }
footer.sleeve div { display: flex; flex-direction: column; gap: 8px; }
footer.sleeve .fbrand { gap: 12px; }
footer.sleeve .fbrand p { margin: 0; color: var(--muted); max-width: 22em; }
footer.sleeve b { font: 500 13px/1.4 var(--body); color: var(--ink); margin-bottom: 2px; }
footer.sleeve div:not(.fbrand) a { color: var(--muted); text-decoration: none; }
footer.sleeve div:not(.fbrand) a:hover { color: var(--ink); }
footer.sleeve .colophon { grid-column: 1 / -1; color: var(--muted); font-size: 13px; margin: 12px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { footer.sleeve { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; } footer.sleeve .fbrand { grid-column: 1 / -1; } }
@media (max-width: 380px) { footer.sleeve { font-size: 13px; gap: 24px 14px; } }

/* Still being identified: one status line, small spinners, "checking…" rows.
   Same size as what replaces them (no layout jump); still under reduced motion. */
.spin { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line-2); border-top-color: var(--ink); animation: that-spin .9s linear infinite; vertical-align: -1px; }
@keyframes that-spin { to { transform: rotate(360deg); } }
p.progress { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 14px; color: var(--muted); }
p.progress.done { color: var(--ink); }
.tracks li.pending .t, .tracks li.pending b { color: var(--muted); font-weight: 400; font-style: italic; }
.tracks li.open .spin { border-top-color: var(--open-mark); }
.note.pending { display: flex; align-items: center; gap: 8px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; border-right-color: var(--ink); } }