:root {
  /* --- neutral ramp (cool-neutral signature) --- */
  --raw-000:#FFFFFF; --raw-100:#F7F7F9; --raw-200:#EEEEF1; --raw-300:#E3E3E8;
  --raw-400:#C9C9D1; --raw-500:#AEAEB6; --raw-600:#6E6E76; --raw-700:#3A3A3F; --raw-800:#1C1C1E;

  /* --- semantic content surfaces (SOLID — no blur) --- */
  --color-bg-app:#EAEAEF;
  --color-bg-surface:#F7F7F9;
  --color-bg-overlay:#FFFFFF;
  --color-bg-inset:#E3E3E8;
  --color-bg-row-alt:#F1F1F4;

  /* --- text --- */
  --color-text-primary:#1C1C1E;
  --color-text-secondary:#6E6E76;
  --color-text-tertiary:#8E8E96;
  --color-text-disabled:#AEAEB6;
  --color-text-inverse:#FFFFFF;

  /* --- borders --- */
  --color-border:#C9C9D1;
  --color-border-strong:#AEAEB6;
  --color-border-subtle:#E3E3E8;

  /* --- accent (reserved) --- */
  --color-accent:#3D7CE0;
  --color-accent-hover:#6398EA;
  --color-accent-pressed:#2C5FB8;
  --color-accent-subtle:#E9F0FC;

  /* --- highlight (search-term mark) --- */
  --color-mark-bg:#FCE7B0;
  --color-mark-fg:#3A2E00;

  /* --- glass tiers --- */
  --glass-bg:rgba(255,255,255,0.42);
  --glass-bg-topbar:rgba(255,255,255,0.50);
  --glass-bg-faint:rgba(255,255,255,0.20);
  --glass-bg-strong:rgba(255,255,255,0.58);
  --glass-bg-subtle:rgba(255,255,255,0.80);
  --glass-bg-selected:rgba(255,255,255,0.52);
  --glass-bg-hover:rgba(255,255,255,0.72);
  --glass-border:rgba(255,255,255,0.6);
  --glass-blur:20px; --glass-blur-sm:9px; --glass-saturate:180%;
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,0.55);
  --glass-shadow:0 10px 30px rgba(30,30,45,.14);
  --glass-shadow-sm:0 2px 10px rgba(30,30,45,.10);

  /* --- type --- */
  --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',ui-sans-serif,system-ui,Roboto,Helvetica,Arial,sans-serif;
  --font-read:var(--font-ui);
  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;

  /* --- spacing --- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  /* --- radius --- */
  --radius-glass-sm:10px; --radius-glass-md:14px; --radius-glass-lg:18px; --radius-pill:9999px;

  /* --- motion --- */
  --dur-fast:80ms; --dur-default:150ms; --dur-slow:240ms; --dur-deliberate:360ms;
  --ease:cubic-bezier(.25,.10,.25,1);
  --ease-enter:cubic-bezier(0,0,.20,1);
  --ease-exit:cubic-bezier(.40,0,1,1);

  /* --- structure --- */
  --h-topbar:64px;
  --w-sidebar:264px;

  --ambient-splash:
    radial-gradient(circle at 14% 18%, #3B6FE0 0%, transparent 42%),
    radial-gradient(circle at 84% 12%, #C0563B 0%, transparent 38%),
    radial-gradient(circle at 72% 82%, #4FBE8B 0%, transparent 46%),
    radial-gradient(circle at 18% 88%, #7A5BD0 0%, transparent 40%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --raw-000:#000000;
    --color-bg-app:#141417;
    --color-bg-surface:#1F1F23;
    --color-bg-overlay:#26262B;
    --color-bg-inset:#18181B;
    --color-bg-row-alt:#232327;

    --color-text-primary:#F2F2F5;
    --color-text-secondary:#A9A9B2;
    --color-text-tertiary:#86868E;
    --color-text-disabled:#5A5A62;
    --color-text-inverse:#FFFFFF;

    --color-border:#3A3A40;
    --color-border-strong:#4C4C54;
    --color-border-subtle:#2C2C31;

    --color-accent:#5A93EC;
    --color-accent-hover:#7BABF0;
    --color-accent-pressed:#3D7CE0;
    --color-accent-subtle:rgba(90,147,236,0.18);

    --color-mark-bg:rgba(252,210,80,0.30);
    --color-mark-fg:#F7E3A0;

    /* dark glass: dim translucent, elevate by lightness not shadow */
    --glass-bg:rgba(58,58,66,0.44);
    --glass-bg-topbar:rgba(60,60,68,0.54);
    --glass-bg-faint:rgba(52,52,60,0.30);
    --glass-bg-strong:rgba(64,64,72,0.62);
    --glass-bg-subtle:rgba(48,48,54,0.86);
    --glass-bg-selected:rgba(90,90,100,0.42);
    --glass-bg-hover:rgba(80,80,90,0.55);
    --glass-border:rgba(255,255,255,0.12);
    --glass-highlight:inset 0 1px 0 rgba(255,255,255,0.14);
    --glass-shadow:0 12px 34px rgba(0,0,0,.5);
    --glass-shadow-sm:0 2px 12px rgba(0,0,0,.4);

    --ambient-splash:
      radial-gradient(circle at 14% 18%, #2B4FA0 0%, transparent 42%),
      radial-gradient(circle at 84% 12%, #7A2E1F 0%, transparent 38%),
      radial-gradient(circle at 72% 82%, #1F6B4A 0%, transparent 46%),
      radial-gradient(circle at 18% 88%, #4A3585 0%, transparent 40%);
  }
}

* { box-sizing:border-box; }
/* hidden must win over the display:flex/grid class rules below */
[hidden] { display:none !important; }

html { height:100%; overflow-x:clip; }
body {

  position:relative;
  height:100%; min-height:100lvh;
  margin:0;
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.45;
  color:var(--color-text-primary);
  background:var(--color-bg-app);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--ambient-splash);
  background-size:120% 120%; background-position:center;
  filter:blur(80px) saturate(1.25);
  opacity:.85;
}
@media (prefers-color-scheme: dark) { body::before { opacity:.7; } }

/* ---- SF-symbol icon helper ---- */
.icon { display:inline-block; vertical-align:middle; fill:currentColor; flex:none; }

/* ---- boot / loading ---- */
.boot {
  position:fixed; inset:0; display:grid; place-items:center; z-index:10;
  color:var(--color-text-secondary); font-size:14px;
}
.boot.err { color:var(--color-critical,#C6303A); padding:0 24px; text-align:center; }

.app {
  position:relative; z-index:1;
  height:100vh; height:100lvh;
  display:flex; flex-direction:column;
}

:root { --toolbar-gap:0px; }
@supports (height:100lvh) and (height:100svh) {
  :root { --toolbar-gap:calc(100lvh - 100svh); }
}

/* ---- Top bar (glass) ---- */

.topbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--h-topbar);
  display:flex; align-items:center; gap:var(--space-3);
  padding:0 var(--space-4);
  background:var(--glass-bg-topbar);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(1.02);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(1.02);
  box-shadow:var(--glass-highlight), 0 1px 0 var(--color-border-subtle);
  border-bottom:1px solid var(--glass-border);
}
.brand { display:flex; align-items:center; gap:var(--space-3); min-width:0; }
.brand-mark {
  width:34px; height:34px; border-radius:var(--radius-glass-sm); flex:none;
  background:linear-gradient(150deg, var(--color-accent), #7A5BD0);
  box-shadow:var(--glass-highlight), var(--glass-shadow-sm);
  display:grid; place-items:center;
}
.brand-logo { width:20px; height:auto; fill:#fff; display:block; }
.brand-text { display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.brand-title { font-size:15px; font-weight:var(--w-semibold); letter-spacing:-.01em; margin-bottom:2px; }
.brand-sub { font-size:11px; color:var(--color-text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* search field — pill glass */

.topbar-nav { margin-left:auto; display:flex; align-items:center; gap:2px; flex:none; }

.topbar-nav-btn { text-decoration:none; }
.about-nav-item { text-decoration:none; }
.topbar-nav-btn.on { color:var(--color-accent); }
@media (max-width:560px) { .topbar-nav { gap:0; } }

.search {
  position:relative;
  display:flex; align-items:center; gap:var(--space-2);
  width:min(420px, 46vw);
  height:40px; padding:0 var(--space-3);
  border-radius:var(--radius-pill);
  background:var(--glass-bg-strong);
  backdrop-filter:blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-highlight);
  transition:box-shadow var(--dur-default) var(--ease);
}
.search:focus-within { box-shadow:var(--glass-highlight), 0 0 0 3px var(--color-accent-subtle); }
.search-glyph { color:var(--color-text-secondary); display:flex; }
.search-input {
  flex:1; min-width:0; border:0; background:none; outline:none;
  font:inherit; font-size:14px; color:var(--color-text-primary);

  line-height:normal;

  align-self:stretch; height:auto; padding:0; margin:0;
}
.search-input::placeholder { color:var(--color-text-tertiary); }
.search-input::-webkit-search-cancel-button { -webkit-appearance:none; }

.search-input::-webkit-search-decoration { -webkit-appearance:none; }

/* generic glass icon button */
.icon-btn {
  -webkit-appearance:none; appearance:none; border:0; cursor:pointer;
  display:grid; place-items:center; flex:none;
  width:32px; height:32px; border-radius:var(--radius-pill);
  background:transparent; color:var(--color-text-secondary);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background:var(--glass-bg-hover); color:var(--color-text-primary); }
.icon-btn:active { transform:scale(.94); }
.search-clear { margin-right:-4px; }

.menu-btn { display:none; }

.body { flex:1; min-height:0; display:flex; }

/* ---- Sidebar (glass floating card) ---- */
.sidebar {
  flex:none; width:var(--w-sidebar);
  padding:calc(var(--h-topbar) + var(--space-4)) var(--space-3) var(--space-4) var(--space-4);
  overflow-y:auto; overscroll-behavior:contain;
}
.sidebar-inner {
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(1.03);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(1.03);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-glass-lg);
  box-shadow:var(--glass-highlight), var(--glass-shadow);
  padding:var(--space-2);
}
.facet-group { padding:var(--space-2) var(--space-1); }
.facet-group + .facet-group { border-top:1px solid var(--glass-border); }
.facet-head {
  width:100%; -webkit-appearance:none; appearance:none; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2); border-radius:var(--radius-glass-sm);
  color:var(--color-text-secondary); font-family:inherit;
}
.facet-head:hover { background:var(--glass-bg-hover); }
.facet-head .icon { color:var(--color-text-secondary); }
.facet-title {
  font-size:11px; font-weight:var(--w-semibold); text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-text-header,var(--color-text-secondary));
}
.facet-count-badge {
  margin-left:auto; font-size:11px; color:var(--color-text-tertiary);
  font-variant-numeric:tabular-nums;
}
.facet-chev { margin-left:var(--space-2); color:var(--color-text-tertiary); }
.facet-group[data-open="false"] .facet-list { display:none; }
.facet-list { list-style:none; margin:var(--space-1) 0 0; padding:0; max-height:280px; overflow-y:auto; }
.facet-item {
  display:flex; align-items:center; gap:var(--space-2);
  width:100%; -webkit-appearance:none; appearance:none; border:0; background:none; cursor:pointer;
  padding:6px var(--space-2); border-radius:var(--radius-glass-sm);
  font-family:inherit; font-size:13px; color:var(--color-text-primary); text-align:left;
  transition:background var(--dur-fast) var(--ease);
}
.facet-item:hover { background:var(--glass-bg-hover); }
.facet-item[aria-pressed="true"] { background:var(--glass-bg-selected); font-weight:var(--w-medium); }
.facet-item[aria-pressed="true"] .facet-check { opacity:1; }
.facet-check { opacity:0; color:var(--color-accent); flex:none; }
.facet-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.facet-badge {
  flex:none; font-size:11px; color:var(--color-text-tertiary);
  font-variant-numeric:tabular-nums;
}
.facet-more {
  margin-top:var(--space-1); padding:6px var(--space-2); font-size:12px;
  color:var(--color-accent); background:none; border:0; cursor:pointer; font-family:inherit;
}
.facet-more:hover { text-decoration:underline; }

/* ---- search-bar filter suggestions ---- */
.suggest {
  position:absolute; z-index:300; left:0; right:0; top:calc(100% + 6px);
  max-height:min(60vh, 420px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--color-bg-overlay);
  border:1px solid var(--color-border); border-radius:var(--radius-glass-md);
  box-shadow:var(--glass-shadow); padding:var(--space-1);
}
.suggest-group {
  display:flex; align-items:center; gap:6px; padding:6px var(--space-2) 2px;
  font-size:10px; font-weight:var(--w-semibold); text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-text-tertiary);
}
.suggest-group .icon { color:var(--color-text-tertiary); }
.suggest-item {
  display:flex; align-items:center; gap:var(--space-2); width:100%;
  -webkit-appearance:none; appearance:none; border:0; background:none; cursor:pointer;
  padding:7px var(--space-2); border-radius:var(--radius-glass-sm);
  font-family:inherit; font-size:13px; color:var(--color-text-primary); text-align:left;
}
.suggest-item:hover, .suggest-item.active { background:var(--color-accent-subtle); }
.suggest-item.on { color:var(--color-accent-pressed); }
@media (prefers-color-scheme: dark){ .suggest-item.on { color:var(--color-accent-hover); } }
.si-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.si-on { color:var(--color-accent); display:flex; }
.si-count { flex:none; font-size:11px; color:var(--color-text-tertiary); font-variant-numeric:tabular-nums; }
.si-aka { color:var(--color-text-tertiary); font-weight:400; }
.suggest-empty { padding:10px var(--space-2); font-size:13px; color:var(--color-text-secondary); }

/* ---- back to top ---- */
.to-top {
  position:fixed; right:24px; bottom:24px; z-index:150;
  width:44px; height:44px; border-radius:var(--radius-pill);
  -webkit-appearance:none; appearance:none; border:1px solid var(--glass-border); cursor:pointer;
  display:grid; place-items:center; color:var(--color-text-primary);
  background:var(--glass-bg-faint);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:var(--glass-highlight), var(--glass-shadow-sm);
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.to-top:hover { background:var(--glass-bg); transform:translateY(-2px); }
.to-top:active { transform:translateY(0); }

.scrim { display:none; }

.content {
  flex:1; min-width:0; overflow-y:auto; outline:none;

  padding:calc(var(--h-topbar) + var(--space-4)) var(--space-6)
          calc(var(--space-12) + var(--toolbar-gap) + env(safe-area-inset-bottom));
}
.content-head {
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  margin-bottom:var(--space-4);
}
.result-count { font-size:13px; color:var(--color-text-secondary); font-variant-numeric:tabular-nums; }
.result-count b { color:var(--color-text-primary); font-weight:var(--w-semibold); }
.active-filters { display:flex; gap:var(--space-2); flex-wrap:wrap; flex:1; min-width:0; }
.chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 6px 4px 8px; border-radius:var(--radius-pill);
  background:var(--color-accent-subtle); color:var(--color-accent-pressed);
  font-size:12px; font-weight:var(--w-medium);
}
.chip .icon { opacity:.8; }
.chip-val { white-space:nowrap; }
@media (prefers-color-scheme: dark){ .chip{ color:var(--color-accent-hover);} }
.chip-x {
  -webkit-appearance:none; appearance:none; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; color:inherit; padding:2px; border-radius:var(--radius-pill);
}
.chip-x:hover { background:rgba(0,0,0,.08); }
.chip.clear-all { background:transparent; color:var(--color-text-secondary); padding-left:6px; }
.chip.clear-all:hover { color:var(--color-text-primary); text-decoration:underline; }

.sort { margin-left:auto; display:flex; align-items:center; gap:var(--space-2); }
.sort-label { font-size:12px; color:var(--color-text-secondary); }
.select-wrap { position:relative; display:inline-flex; align-items:center; }
.select {
  -webkit-appearance:none; appearance:none; cursor:pointer; font-family:inherit;
  font-size:13px; color:var(--color-text-primary);
  padding:7px 28px 7px 12px; border-radius:var(--radius-pill);
  background:var(--glass-bg-strong);
  backdrop-filter:blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
  border:1px solid var(--glass-border); box-shadow:var(--glass-highlight);
}
.select:focus-visible { outline:none; box-shadow:var(--glass-highlight),0 0 0 3px var(--color-accent-subtle); }
.select-chev { position:absolute; right:10px; pointer-events:none; color:var(--color-text-secondary); display:flex; }

/* ---- results ---- */
.results { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.card {
  --_pad:var(--space-4);
  position:relative; display:flex; gap:var(--space-4);
  text-align:left; width:100%; cursor:pointer; font-family:inherit;
  -webkit-appearance:none; appearance:none;
  background:var(--color-bg-surface);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-glass-md);
  padding:var(--_pad);
  box-shadow:var(--glass-shadow-sm);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-default) var(--ease), border-color var(--dur-default) var(--ease);
}
.card:hover { border-color:var(--color-border); box-shadow:var(--glass-shadow); transform:translateY(-1px); }
.card:focus-visible { outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px var(--color-accent-subtle); }
.card:active { transform:translateY(0); }
.card-body { min-width:0; flex:1; }

.card-thumb {

  position:relative; flex:none; width:130px; height:130px;
  border-radius:var(--radius-glass-sm);
  overflow:hidden; background:var(--color-bg-inset);
}
.cover-img {
  position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover;

  -webkit-user-drag:none; user-drag:none;
}

.listen-badge {
  -webkit-appearance:none; appearance:none; border:0; cursor:pointer; padding:0; font:inherit;
  position:absolute; right:6px; bottom:6px; z-index:1;
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); color:#fff;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.listen-badge:hover { background:var(--color-accent); transform:scale(1.08); }
.listen-badge:focus-visible { outline:none; box-shadow:0 0 0 3px var(--color-accent-subtle); }

.listen-badge .icon { position:relative; left:-0.5px; pointer-events:none; }

.float-player {
  position:fixed; left:var(--space-4); bottom:var(--space-4); z-index:60;
  width:min(375px, calc(100vw - var(--space-4) * 2));
  background:var(--glass-bg-subtle);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-radius:var(--radius-glass-lg);

  box-shadow:0 20px 50px rgba(20,20,40,.4), 0 4px 16px rgba(0,0,0,.25), 0 0 32px rgba(120,140,255,.14);
  padding:var(--space-3);
  animation:float-player-in var(--dur-default) var(--ease-enter);
}
@keyframes float-player-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.float-player-close {
  position:absolute; top:-10px; right:-10px; z-index:1;
  width:26px; height:26px; border-radius:50%; border:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:center;
  background:var(--color-bg-surface); color:var(--color-text-secondary);
  box-shadow:var(--glass-shadow-sm); cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.float-player-close:hover {
  background-color:var(--color-bg-surface);
  background-image:linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
  color:var(--color-accent);
}

.float-player-body {
  margin:calc(var(--space-3) * -1);
  border-radius:var(--radius-glass-lg);
  overflow:hidden;
}
.float-player-body .bc-embed { display:block; }
.float-player-body .am-embed, .float-player-body .sp-embed,
.float-player-body .td-embed, .float-player-body .bc-embed-lg,
.float-player-body .yt-embed { max-width:100%; border-radius:0; }
/* The floating player is 375px wide for a portrait music embed. A 16:9 video
   in that width is 211px tall, which is a postage stamp -- so the box itself
   widens for a video and keeps its own aspect. */
.float-player.is-video { width:min(480px, calc(100vw - var(--space-4) * 2)); }
.bc-embed-lg { display:block; width:100%; height:450px; border:0; } /* matches .am-embed's 375x450 footprint */
@media (max-width:560px) {
  .float-player { left:var(--space-2); right:var(--space-2); bottom:var(--space-2); width:auto; }
}

.cover-ph {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(var(--ph-angle, 135deg), var(--ph-a), var(--ph-b));
}
.cover-ph span {
  color:#fff; font-weight:var(--w-semibold); letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  font-size:15px;
}
.sheet-thumb .cover-ph span { font-size:72px; }

.card-head { display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap; }

.card-link {
  display:contents;              /* the flex row keeps laying out artist + album itself */
  text-decoration:none; color:inherit;
}
.card-link:focus-visible .card-artist {
  outline:none; border-radius:4px;
  box-shadow:0 0 0 3px var(--color-accent-subtle);
}
.card-artist { font-size:16px; font-weight:var(--w-semibold); letter-spacing:-.01em; color:var(--color-text-primary); }

/* the artist name as a filter, on the card and in the sheet. Rendered only
   where there is a real pointer, so it inherits the heading it sits in and
   shows nothing until hovered -- a title that reads as a title, and turns out
   to be clickable. */
.card-artist-link, .sheet-artist-link {
  -webkit-appearance:none; appearance:none; border:0; background:none; padding:0;
  font:inherit; color:inherit; letter-spacing:inherit; cursor:pointer;
  text-decoration:none; border-radius:4px;
  transition:color var(--dur-fast) var(--ease);
}
.card-artist-link:hover, .sheet-artist-link:hover { color:var(--color-accent-pressed); }
.card-artist-link:focus-visible, .sheet-artist-link:focus-visible {
  outline:none; box-shadow:0 0 0 3px var(--color-accent-subtle);
}
@media (prefers-color-scheme: dark) {
  .card-artist-link:hover, .sheet-artist-link:hover { color:var(--color-accent-hover); }
}
/* the separator between co-billed artists, in the card head and the sheet
   heading -- lighter than the names it sits between, and never read out. */
.artist-sep {
  font-weight:var(--w-regular); color:var(--color-text-tertiary);
  margin:0 4px;
}
.card-album { font-size:15px; color:var(--color-text-secondary); font-style:italic; }
.card-album.unknown { font-style:normal; color:var(--color-text-tertiary); }

.card-year, .sheet-year { color:var(--color-text-tertiary); font-style:normal; font-weight:var(--w-regular); }
.card-year { font-size:13px; margin-left:6px; }
.sheet-year { font-size:15px; margin:3px 0 0; }
.card-meta {
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  margin-top:6px; font-size:12px; color:var(--color-text-secondary);
}
.card-meta .mi { display:inline-flex; align-items:center; gap:5px; }
.card-meta .mi .icon { color:var(--color-text-tertiary); }
/* clickable label / issue on cards */
.mi-link {
  -webkit-appearance:none; appearance:none; border:0; background:none; cursor:pointer;
  font:inherit; font-size:12px; color:var(--color-text-secondary);
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 7px; margin:-2px -3px; border-radius:var(--radius-pill);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mi-link .icon { color:var(--color-text-tertiary); }
.mi-link:hover { background:var(--color-accent-subtle); color:var(--color-accent-pressed); }
.mi-link:hover .icon { color:var(--color-accent); }
.mi-link:focus-visible { outline:none; background:var(--color-accent-subtle); box-shadow:0 0 0 2px var(--color-accent-subtle); }
@media (prefers-color-scheme: dark){ .mi-link:hover, .mi-link:focus-visible { color:var(--color-accent-hover); } }

.mi-group { display:inline-flex; align-items:center; gap:0; flex-wrap:wrap; }

.mi-group .mi-link { margin-inline:0; padding-inline:5px; }
.mi-group .mi-link:first-child { margin-left:-3px; padding-left:7px; }
.mi-sep { font-size:12px; color:var(--color-text-tertiary); margin:0 2px; }

.card-snippet {
  margin-top:var(--space-3); font-size:13px; line-height:1.55; color:var(--color-text-secondary);
  overflow:hidden; max-height:calc(1.55em * 2); /* JS trims to whole words + ellipsis; this is the no-JS cap */
}
.card-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:var(--space-3); }
.tag-pill {
  font-size:11px; font-weight:var(--w-medium); color:var(--color-text-secondary);
  background:var(--color-bg-inset); border-radius:var(--radius-pill); padding:2px 9px;
}
/* clickable genre pills (cards + sheet) */
.tag-link {
  -webkit-appearance:none; appearance:none; border:0; cursor:pointer; font-family:inherit;
  /* The appearance resets say what this was written against: the <button>
     pills app.js renders, which carry no underline to remove. The
     server-rendered ones are <a> -- same classes, same look intended -- and
     were underlined by the UA on every page that ships them in the markup.
     Here rather than on the anchor, so the two element types cannot diverge. */
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tag-link:hover { background:var(--color-accent-subtle); color:var(--color-accent-pressed); }
.tag-link:focus-visible { outline:none; box-shadow:0 0 0 2px var(--color-accent-subtle); }
@media (prefers-color-scheme: dark){ .tag-link:hover { color:var(--color-accent-hover); } }
mark { background:var(--color-mark-bg); color:var(--color-mark-fg); border-radius:3px; padding:0 1px; }

.empty { text-align:center; padding:var(--space-16) var(--space-4); color:var(--color-text-secondary); }
.empty h3 { color:var(--color-text-primary); font-size:16px; margin:0 0 6px; }
.empty a { color:var(--color-accent); text-decoration:underline; cursor:pointer; }
.empty a:hover { color:var(--color-accent-hover); }

.sheet-overlay { position:fixed; inset:0; z-index:300; display:flex; justify-content:center; }
.sheet-scrim {
  position:absolute; inset:0; background:rgba(20,20,30,.42);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  animation:fade var(--dur-default) var(--ease);
}
.sheet {
  position:relative; margin:clamp(16px,4vh,56px) var(--space-4); align-self:flex-start;
  width:min(760px, 100%); max-height:calc(100dvh - clamp(32px,8vh,112px));
  display:flex; flex-direction:column;
  background:var(--color-bg-overlay); color:var(--color-text-primary);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-glass-lg);
  box-shadow:0 24px 60px rgba(20,20,40,.32);
  overflow:hidden; outline:none;
  animation:sheet-in var(--dur-slow) var(--ease-enter);
}
.sheet-chrome {
  position:sticky; top:0; z-index:2; flex:none;
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background:var(--glass-bg-subtle);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom:1px solid var(--color-border-subtle);
  box-shadow:var(--glass-highlight);
}

.sheet-back {
  display:inline-flex; align-items:center; gap:6px; flex:none;
  padding:6px 10px; margin-left:-4px; border-radius:var(--radius-pill);
  font-size:13px; font-weight:var(--w-medium);
  color:var(--color-text-secondary); text-decoration:none;
  max-width:min(46ch, 42vw);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sheet-back:hover { background:var(--glass-bg-hover); color:var(--color-text-primary); }
.sheet-back .icon { flex:none; }
.back-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sheet-feedback { margin-left:auto; }
.sheet-chrome .sheet-close { margin-left:0; }

.sheet-chrome .sheet-back + .sheet-close { margin-left:auto; }
@media (max-width:560px) { .sheet-back { max-width:56vw; } }

.sheet-chrome .src { font-size:12px; color:var(--color-text-secondary); font-weight:var(--w-medium); margin-left:var(--space-2); }
.sheet-close { margin-left:auto; }

.sheet-chrome .sheet-close:only-child { margin-left:auto; }

/* --space-10 does not exist either, so this padding was dropped entirely and
   the error sat hard against the chrome. */
.sheet-error { max-width:34em; margin:0 auto; text-align:center; padding-top:var(--space-8); }
.sheet-error h2 { font-size:19px; font-weight:var(--w-semibold); margin-bottom:var(--space-3); }
.sheet-error p { color:var(--color-text-secondary); font-size:14px; margin-bottom:var(--space-3); }
.btn-pill {
  display:inline-block; text-decoration:none;
  -webkit-appearance:none; appearance:none; border:0; cursor:pointer; font:inherit;
  font-size:13px; font-weight:var(--w-medium); color:#fff; background:var(--color-accent);
  padding:7px 16px; border-radius:var(--radius-pill); margin-top:var(--space-2);
  transition:background var(--dur-fast) var(--ease);
}
.btn-pill:hover { background:var(--color-accent-pressed); }
.btn-pill:focus-visible { outline:none; box-shadow:0 0 0 3px var(--color-accent-subtle); }
.sheet-body { overflow-y:auto; padding:var(--space-6) clamp(20px,5vw,44px) var(--space-12); }
.sheet-head { display:flex; align-items:flex-start; gap:var(--space-4); }
.sheet-thumb {

  position:relative; flex:none; width:300px; height:300px; border-radius:var(--radius-glass-lg);
  overflow:hidden; background:var(--color-bg-inset); box-shadow:var(--glass-shadow-sm);
}

.sheet-head-text { min-width:0; flex:1; padding-top:6px; }
.sheet-artist { font-size:26px; font-weight:var(--w-bold); letter-spacing:-.02em; line-height:1.15; margin:0; }
/* The sheet is SERVER-RENDERED, so its artist link cannot be built behind a
   canHover() check the way the card's is. It ships in the markup either way
   and is switched off here instead -- same condition, expressed in the medium
   that has it. Inert by default so a touch device gets the heading it had. */
.sheet-artist-link { pointer-events:none; }
@media (hover: hover) and (pointer: fine) { .sheet-artist-link { pointer-events:auto; } }
.sheet-album { font-size:19px; color:var(--color-text-secondary); font-style:italic; margin:4px 0 0; }
.sheet-album.unknown { font-style:normal; }

.listen-links { display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-3); flex-wrap:nowrap; }
.listen-links .listen-link { flex:0 0 auto; min-width:0; }
.listen-links .listen-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (min-width: 561px) {
  /* --space-5 does not exist -- the scale is 1,2,3,4,6,8,12,16 -- so this
     was invalid and silently fell back to the --space-2 above, leaving the
     icon-only row half the intended spacing. */
  .listen-links { gap:var(--space-6); }
  .listen-links .listen-link span { display:none; }
  .listen-links .listen-link .icon { width:21px; height:21px; }

  .listen-links .listen-link {
    padding:4px; min-height:0; border:0; border-radius:0; background:none;

    color:var(--color-text-primary);
  }
  .listen-links .listen-link:hover,
  .listen-links .listen-link:focus-visible {
    background:none; color:var(--color-accent);
  }
}

@media (max-width: 560px) {
  /* ONE ROW, ICON ONLY. Seven stacked full-width buttons pushed the review
     itself off the first screen, which is the one thing a reader came for.
     The buttons share the width equally, so the row holds however many this
     release has without wrapping, and each stays a 44pt target. The name is
     carried by aria-label and title, as it already is on desktop. */
  .listen-links { gap:6px; flex-wrap:nowrap; }
  .listen-links .listen-link {
    flex:1 1 0; min-width:0; padding:0; min-height:44px;
    border:0; border-radius:0; background:none; color:var(--color-text-primary);
  }
  .listen-links .listen-link span { display:none; }
  .listen-links .listen-link .icon { width:22px; height:22px; }
}

.header-player { margin-top:var(--space-3); }
.bc-embed { display:block; width:100%; height:120px; border:0; }

.listen-link {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:40px; padding:0 14px; border-radius:var(--radius-pill);
  font-size:13.5px; font-weight:var(--w-medium); text-decoration:none;
  color:var(--color-accent); border:1px solid var(--color-accent);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.listen-link .icon { color:currentColor; }
.listen-link:hover { background:var(--color-accent); color:var(--color-text-inverse); }
.listen-link:focus-visible { outline:none; box-shadow:0 0 0 3px var(--color-accent-subtle); }

.player-dock { margin-top:var(--space-6); }
/* EVERY MUSIC EMBED SHARES APPLE'S BOX EXACTLY -- one rule rather than three
   that drift. The sheet's dock holds whichever of them this release has, at
   one size and in one place. Bandcamp is the one that gets promoted above the
   title.

   .td-embed WAS MISSING FROM THIS LIST and from every other sizing rule, so
   the TIDAL player rendered at the iframe default of 300x150 -- a squashed box
   beside two 375x450 ones. A comment in app.js asserted it "carries
   .am-embed's rules"; naming it here is what makes that true. */
.am-embed, .sp-embed, .td-embed {
  display:block; width:100%; max-width:375px; height:450px; border:0;
  border-radius:var(--radius-glass-md); overflow:hidden;
}
/* A VIDEO IS NOT AN ALBUM PLAYER. The music embeds are portrait boxes built
   around a sleeve; a YouTube video is 16:9 and letterboxes badly in one. Same
   dock, same placement, its own shape -- wider and much shorter. */
.yt-embed {
  display:block; width:100%; max-width:560px; aspect-ratio:16 / 9; height:auto;
  border:0; border-radius:var(--radius-glass-md); overflow:hidden;
}
.sheet-facts {
  display:flex; flex-wrap:wrap; gap:var(--space-2);
  margin:var(--space-4) 0; padding:var(--space-3) 0;
  border-top:1px solid var(--color-border-subtle); border-bottom:1px solid var(--color-border-subtle);
  font-size:13px; color:var(--color-text-secondary);
}
.sheet-fact { display:inline-flex; align-items:center; gap:6px; }
.sheet-fact .icon { color:var(--color-text-tertiary); }
.sheet-fact b { color:var(--color-text-primary); font-weight:var(--w-medium); }
.sheet-fact .link { cursor:pointer; color:var(--color-accent); }
.sheet-fact .link:hover { text-decoration:underline; }

.sheet-tags { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 var(--space-6); }
.sheet-tags .tag-pill { cursor:pointer; }
.sheet-tags .tag-pill:hover { background:var(--color-accent-subtle); color:var(--color-accent-pressed); }
.sheet-review { font-size:16px; line-height:1.72; color:var(--color-text-primary); max-width:66ch; }
.sheet-review p { margin:0 0 1.1em; }
.sheet-byline { margin-top:var(--space-8); padding-top:var(--space-4); border-top:1px solid var(--color-border-subtle);
  font-size:13px; color:var(--color-text-secondary); }

@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes sheet-in { from{opacity:0; transform:translateY(12px) scale(.99)} to{opacity:1; transform:none} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .card:hover { transform:none; }
}

/* solid fallback when backdrop-filter unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .search, .sidebar-inner, .select, .sheet-chrome { background:var(--color-bg-surface); }
  .topbar { background:var(--color-bg-surface); }
}

@media (max-width: 900px) {
  :root { --w-sidebar:288px; }
  .menu-btn { display:grid; }
  .brand-sub { display:none; }
  .search { width:min(320px,52vw); }
  .sidebar {

    position:fixed; top:var(--h-topbar); left:0; z-index:200;
    width:var(--w-sidebar); height:calc(100svh - var(--h-topbar));

    padding:var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
    transform:translateX(-108%); transition:transform var(--dur-slow) var(--ease);
  }

  .sidebar.open { transform:none; }

  .scrim {
    display:block; position:fixed; top:var(--h-topbar); left:0; right:0; z-index:150;
    height:calc(100lvh - var(--h-topbar));
    background:rgba(20,20,30,.35); animation:fade var(--dur-default) var(--ease);
  }
  .content {
    padding:calc(var(--h-topbar) + var(--space-4)) var(--space-4)
            calc(var(--space-12) + var(--toolbar-gap) + env(safe-area-inset-bottom));
  }

  .facet-list { max-height:min(280px, 45vh); overflow-y:auto; }
}
@media (max-width: 560px) {
  .topbar { gap:var(--space-2); padding:0 var(--space-3); }

  .brand-mark { display:none; }
  .card-album { font-size:14px; }

  .sheet-overlay { position:absolute; }

  .sheet { margin:0; height:100%; max-height:100%; border-radius:0; border:0; }
  .sheet-body { padding-bottom:calc(var(--space-12) + var(--toolbar-gap) + env(safe-area-inset-bottom)); }
  .sheet-overlay { }

  /* STRETCH, NOT SHRINK-TO-FIT. Stacked, the head's children take their
     cross size from the widest one, so the title, the player and the row of
     links were only as wide as whatever happened to be longest. */
  .sheet-head { flex-direction:column; align-items:stretch; }
  .sheet-thumb { width:min(300px, 100%); height:auto; aspect-ratio:1/1;
                 margin-inline:auto; }
  /* Centred down to the credit; the player, the links and the review
     itself stay left-aligned. */
  .sheet-artist, .sheet-album, .sheet-year, .sheet-credit { text-align:center; }
  .sheet-head-text { padding-top:0; }

  .sort { display:none; }

  .topbar:not(.search-active) .search {
    width:40px; height:40px; padding:0; justify-content:center; cursor:pointer;
  }
  .topbar:not(.search-active) .search-input,
  .topbar:not(.search-active) .search-clear,
  .topbar:not(.search-active) #searchSuggest { display:none; }
  .topbar.search-active .brand,
  .topbar.search-active .topbar-nav { display:none; }

  .topbar.search-active .search {
    position:absolute;
    left:calc(var(--space-3) + 32px + var(--space-2));  /* padding + .icon-btn + gap */
    right:var(--space-3);
    width:auto; min-width:0;
    top:50%; transform:translateY(-50%);
  }
  /* iOS Safari zooms the page on focus for any input under 16px */
  .search-input { font-size:16px; }
}

.topbar { min-width:0; }
.topbar > * { min-width:0; }

.about-body { padding-top:var(--space-4); }

.about-sheet .sheet-chrome .about-src {
  flex:none; margin:0; white-space:nowrap;
  font-size:15px; font-weight:var(--w-semibold); letter-spacing:-.01em;
  color:var(--color-text-primary);
}

.about-chrome { gap:var(--space-3); }

.about-nav { display:flex; gap:6px; flex-wrap:nowrap; min-width:0; margin-left:auto; }

.about-sheet .sheet-close { margin-left:0; }
.about-nav-item {
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:5px 10px; border-radius:var(--radius-pill);
  border:1px solid var(--color-border-subtle); background:var(--color-bg-surface);
  font:inherit; font-size:12px; font-weight:var(--w-medium); color:var(--color-text-secondary);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.about-nav-item:hover { background:var(--color-bg-inset); color:var(--color-text-primary); }
.about-nav-item .icon { color:var(--color-text-tertiary); }

.about-section { padding-bottom:var(--space-8); }

.about-section p { font-size:15px; line-height:1.65; margin:0 0 var(--space-4); }
.about-lede { font-size:17px !important; line-height:1.6 !important; color:var(--color-text-primary); }
.about-h {
  display:flex; align-items:center; gap:var(--space-2);
  font-size:19px; font-weight:var(--w-semibold); letter-spacing:-.01em; margin:0 0 var(--space-3);
}
.about-h .icon { color:var(--color-text-tertiary); }
.about-muted { color:var(--color-text-secondary); font-size:13px !important; }

/* ---- kindred sites ---- */
.site-list { display:grid; gap:var(--space-3); }
.site-card {
  display:block; padding:var(--space-4); text-decoration:none;
  border:1px solid var(--color-border-subtle); border-radius:var(--radius-glass-md);
  background:var(--color-bg-surface);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.site-card:hover { background:var(--color-bg-inset); border-color:var(--color-border); }
.site-name {
  display:flex; align-items:center; gap:6px;
  font-size:15px; font-weight:var(--w-semibold); color:var(--color-accent); margin-bottom:4px;
}
.site-note { display:block; font-size:13px; line-height:1.55; color:var(--color-text-secondary); }

/* ---- wanted issues ---- */
.pub-grid { display:grid; gap:var(--space-3); margin-bottom:var(--space-4); }
.pub {
  padding:var(--space-4);
  border:1px solid var(--color-border-subtle); border-radius:var(--radius-glass-md);
  background:var(--color-bg-surface);
}
.pub-head { display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; }
.pub-name { font-size:15px; font-weight:var(--w-semibold); margin:0; }
.pub-stat { font-size:12px; color:var(--color-text-tertiary); }
.pub-missing { font-size:12px !important; font-weight:var(--w-medium); color:var(--color-text-secondary); margin:var(--space-3) 0 6px !important; }
.pub-gaps { display:flex; gap:6px; flex-wrap:wrap; }
.gap-chip {
  display:inline-block; padding:3px 9px; border-radius:var(--radius-pill);
  background:var(--color-mark-bg); color:var(--color-mark-fg);
  font-size:12px; font-weight:var(--w-medium); font-variant-numeric:tabular-nums;
}
.pub-complete { display:flex; align-items:center; gap:6px; font-size:13px !important; color:var(--color-text-tertiary); margin:var(--space-3) 0 0 !important; }

/* ---- contact form ---- */
.contact-form { display:grid; gap:var(--space-4); max-width:520px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.field { display:grid; gap:6px; }
.field > span { font-size:13px; font-weight:var(--w-medium); color:var(--color-text-secondary); }

.field input, .field textarea {
  font:inherit; font-size:16px; color:var(--color-text-primary);
  padding:10px var(--space-3); border-radius:var(--radius-glass-sm);
  border:1px solid var(--color-border); background:var(--color-bg-overlay);
  outline:none; transition:box-shadow var(--dur-default) var(--ease), border-color var(--dur-default) var(--ease);
}
.field textarea { resize:vertical; line-height:1.55; }
.field input:focus, .field textarea:focus {
  border-color:var(--color-accent); box-shadow:0 0 0 3px var(--color-accent-subtle);
}
.form-actions { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.btn-primary {
  -webkit-appearance:none; appearance:none; border:0; cursor:pointer;
  padding:10px var(--space-6); border-radius:var(--radius-pill);
  background:var(--color-accent); color:var(--color-text-inverse);
  font:inherit; font-size:14px; font-weight:var(--w-semibold);
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-primary:hover:not(:disabled) { background:var(--color-accent-hover); }
.btn-primary:active:not(:disabled) { transform:scale(.97); }
.btn-primary:disabled { opacity:.55; cursor:default; }
.btn-secondary {
  -webkit-appearance:none; appearance:none; cursor:pointer;
  padding:10px var(--space-6); border-radius:var(--radius-pill);
  background:none; color:var(--color-text-secondary);
  border:1px solid var(--color-border);
  font:inherit; font-size:14px; font-weight:var(--w-medium);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn-secondary:hover { background:var(--color-bg-inset); color:var(--color-text-primary); }
.form-status { font-size:13px; color:var(--color-text-secondary); }
.form-status.is-error { color:#C0563B; }
.form-thanks { display:flex; align-items:center; gap:var(--space-2); font-size:15px; color:var(--color-text-primary); margin:0; }

.about-footer {
  margin-top:var(--space-8); padding-top:var(--space-4);
  border-top:1px solid var(--color-border-subtle);
  font-size:12px; line-height:1.6; color:var(--color-text-tertiary);
}

@media (prefers-color-scheme: dark) {
  .site-name { color:var(--color-accent-hover); }
  .form-status.is-error { color:#E08A70; }
}

@media (max-width: 900px) {
  .about-nav-item span { display:none; }
  .about-nav-item { padding:6px; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns:1fr; }
}

@media (max-width: 560px) {
  .card { --_thumb:124px; gap:var(--space-3); --_pad:var(--space-3); align-items:flex-start; }
  .card-thumb { align-self:center; }

  .card-thumb { width:var(--_thumb) !important; height:var(--_thumb) !important; }

  .card-body { min-height:var(--_thumb); }

  .card-snippet { display:none; }

  /* Artist and album stop sharing a line. */
  .card-head { flex-direction:column; align-items:stretch; gap:0; }
  .card-artist { font-size:15px; line-height:1.4; }
  .card-album  { font-size:14px; line-height:1.4; }

  .card-meta { display:block; margin-top:3px; font-size:12px; }
  .card-meta .mi {
    display:flex; align-items:center; gap:5px;
    max-width:100%; margin:0; padding:1px 0; line-height:1.45;
  }
  .card-meta .mi .icon { flex:none; }
  .card-meta .mi > span {
    min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* THE LABEL ROW GETS THE WHOLE WIDTH BEFORE IT IS ALLOWED TO TRUNCATE.
     As an inline-flex box it was sized against the shrunken width of its own
     flex child, so a name that fits twice over still came back clipped. */
  .card-meta .mi-group { display:flex; max-width:100%; }

  /* ONE ROW OF PILLS, WHOLE ONES ONLY. The row wraps as normal and the
     card clips at exactly one line height, so a pill that does not fit is
     simply not shown -- no half pill, and no trailing marker standing in
     for the ones that were dropped. */
  .card-tags {
    display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; max-width:100%;
    max-height:20px; overflow:hidden;
  }
  .card-tags .tag-pill { line-height:16px; }

  .card-artist, .card-album {
    display:block; max-width:100%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  .listen-badge { pointer-events:none; }

}

@media (hover: none), (pointer: coarse) {
  .card [data-addfilter] { pointer-events:none; }
}

.about-sheet[data-only] .about-section { display:none; }
.about-sheet[data-only="story"]   .about-section[data-section="story"],
.about-sheet[data-only="sites"]   .about-section[data-section="sites"],
.about-sheet[data-only="wanted"]  .about-section[data-section="wanted"],
.about-sheet[data-only="contact"] .about-section[data-section="contact"] { display:block; }
.about-nav-item.on { background:var(--color-accent-subtle); color:var(--color-accent-pressed); }
@media (prefers-color-scheme: dark){ .about-nav-item.on { color:var(--color-accent-hover); } }

.cover-img, .card-thumb img, .sheet-thumb img, .x-thumb img, .brand-logo {
  -webkit-user-drag:none; user-drag:none;
}

/* ============================================================ ENTITY PAGE ==
   An artist as a destination. THE CONTENT PLANE, SOLID -- no glass anywhere
   in here. Every frosted surface on this site is navigation or a control
   (.topbar, .search, .sidebar-inner, .to-top, .select, .listen-badge,
   .float-player, .sheet-scrim, .sheet-chrome); a frosted hero would be the
   largest glass surface in the archive sitting in the content layer, which is
   exactly the rule the rest of the site keeps.

   IT IS BUILT FROM THE TWO OBJECTS THE SITE ALREADY HAS. The head is
   .sheet-head at page scale; a release row is .card with a review list where
   the snippet goes. Someone arriving from the browse list meets the same
   object twice, which is what makes this read as one site. */
.entity-page {
  flex:1; min-width:0; overflow-y:auto;
  padding:calc(var(--h-topbar) + var(--space-6)) var(--space-6)
          calc(var(--space-16) + env(safe-area-inset-bottom));
}
/* ONE CENTRED COLUMN FOR EVERYTHING. The head at 1180 and the releases at
   820 gave the page two different left edges and read as two designs stacked.
   Same width throughout, centred, so the picture, the name and the records
   all share an axis. */
.entity-page > * { max-width:820px; margin-inline:auto; }


/* --- head ------------------------------------------------------------- */
/* A FLOAT, NOT A GRID -- the picture sits in the text the way a newspaper
   sets one. A grid column cannot release its text below the image: whatever
   is in the right column stays in the right column however short it is.
   Floated, the name and facts run beside the picture and the bio closes under
   it and takes the full measure. flow-root so the head contains the float
   rather than collapsing around it. */
.ent-head { display:flow-root; }
.ent-photo {
  position:relative; float:left; width:min(400px,48%); margin:0 var(--space-6) var(--space-4) 0;
  aspect-ratio:3/2; overflow:hidden;
  background:var(--color-bg-inset);
  border-radius:var(--radius-glass-lg);
  display:grid; place-items:center;
}
/* THE SAME SIZE AS A SEARCH RESULT'S COVER -- 130px, matching .card-thumb.
   It is the same object doing the same job, and showing a release smaller on
   the artist's own page than in a list of search results implied it mattered
   less there. position:relative is also what the play badge pins to. */
.ent-cover {
  position:relative; flex:none; width:130px; height:130px; overflow:hidden;
  background:var(--color-bg-inset);
  border-radius:var(--radius-glass-sm);
  display:grid; place-items:center;
}
/* ABSOLUTE, THE WAY .cover-img IS. object-fit only crops against a definite
   box, and height:100% on a CENTRED GRID ITEM whose container is sized by
   aspect-ratio does not give it one -- the image kept its own ratio, overflowed
   the 3:2 frame, and overflow:hidden clipped it from the top. Taking it out of
   flow makes the frame the box, so cover centres the crop. The grid centring on
   the container stays: it is what places .ent-mark when there is no picture. */
.ent-photo img, .ent-cover img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.ent-mark { width:26%; height:26%; fill:var(--color-text-tertiary); opacity:.3; }
.ent-cover .ent-mark { width:52%; height:52%; }

/* REAL SCALE. Everything here was the same weight -- 13px facts, 13px
   reviews, 13px label -- so nothing led. */
.ent-name {
  font-size:36px; font-weight:var(--w-bold); letter-spacing:-.03em;
  color:var(--color-text-primary); margin:0; line-height:1.05;
}
.ent-anv { margin:var(--space-2) 0 0; font-size:14px; color:var(--color-text-secondary); }

/* BLOCK, NOT FLEX. A flex container's box does not shorten beside a float --
   it overlaps it, and the row would sit on top of the picture. Inline-flow
   children wrap around it the way text does. */
.ent-facts {
  display:block;
  margin:var(--space-3) 0 0;
  /* PRIMARY, not the secondary that .result-count uses -- that sits on the
     flat --color-bg-app, this sits on the ambient gradient where #6E6E76
     loses most of its contrast. */
  font-size:13px; color:var(--color-text-primary);
}
/* One per line. Beside a float a block's line boxes shorten, so these stack
   and wrap against the picture the way the prose below them does. */
.ent-fact { display:block; margin:0 0 3px; }
/* Subtly larger than the coverage line under it -- where a band was from is
   the more human fact of the two. */
.ent-place { font-size:15px; }

/* --- bio -------------------------------------------------------------- */
/* No measure cap: beside the picture the float already narrows it, and below
   the picture the full 900 is the point -- that is the column the rest of the
   page uses. */
/* --space-5 DOES NOT EXIST -- the scale is 1,2,3,4,6,8,12,16. It was here,
   which made the whole shorthand invalid and left no gap at all under the
   links. */
.ent-bio { margin:var(--space-8) 0 0; }
.ent-bio p { margin:0 0 var(--space-3); font-size:14.5px; line-height:1.6;
  color:var(--color-text-primary); }
.ent-bio p:last-child { margin-bottom:0; }

/* --- discography ------------------------------------------------------ */
.ent-section {
  /* `auto` in the shorthand, not a later margin-inline rule -- this shorthand
     would reset one, which is exactly how the centring was lost twice. */
  margin:var(--space-12) auto var(--space-3);
  font-size:13px; font-weight:var(--w-semibold); letter-spacing:.06em;
  text-transform:uppercase; color:var(--color-text-primary);
}
.ent-releases { list-style:none; margin:0 auto; padding:0;
  display:flex; flex-direction:column; gap:var(--space-2); }

/* .card, in everything but name. */
.ent-release {
  display:flex; gap:var(--space-3); padding:var(--space-3);
  background:var(--color-bg-surface);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-glass-md);
  box-shadow:var(--glass-shadow-sm);
  transition:border-color var(--dur-default) var(--ease),
             box-shadow var(--dur-default) var(--ease);
}
/* The same lift .card has. A release row is that object with a review list
   where the snippet goes, so it should answer the pointer the same way. */
.ent-release:hover { border-color:var(--color-border); box-shadow:var(--glass-shadow); }
.ent-release-body { min-width:0; flex:1; }
.ent-release-title { margin:0; font-size:16px; font-weight:var(--w-semibold);
  letter-spacing:-.01em; color:var(--color-text-primary); }
.ent-release-meta { margin:1px 0 var(--space-2); font-size:12.5px;
  color:var(--color-text-secondary); }

.ent-revs { list-style:none; margin:0; padding:0; }
.ent-rev {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2);
  padding:2px 0; font-size:12.5px;
}
.ent-rev-meta { color:var(--color-text-secondary); }
/* Folded, not withheld -- the markup carries every review so a crawler and a
   reader without JavaScript both get all of them. */
.ent-rev.is-extra { display:none; }
.ent-revs.is-open .ent-rev.is-extra { display:flex; }

.ent-more {
  -webkit-appearance:none; appearance:none; border:0; background:none;
  padding:var(--space-2) 0 0; margin:0; font:inherit; font-size:13px;
  color:var(--color-accent); cursor:pointer; border-radius:4px;
}
.ent-more:hover { text-decoration:underline; }

/* Below the sidebar breakpoint the two columns fold -- which is the shape
   that was working already: picture, then name, then facts, then links, then
   prose, each filling the width. */
/* Below the sidebar breakpoint the float comes off and the picture goes full
   width -- the stacked shape that already worked on a phone. */
@media (max-width:900px) {
  .ent-photo { float:none; width:100%; margin:0 0 var(--space-4); }
}
@media (max-width:720px) {
  .entity-page { padding-left:var(--space-4); padding-right:var(--space-4); }
  .ent-name { font-size:34px; }
  .ent-cover { width:76px; height:76px; }
  .ent-section { margin-top:var(--space-8); }
}

/* An outbound link in the facts row -- accent, since it leaves the archive,
   and underlined on hover only so the row stays a quiet line of facts. */
.ent-link { color:var(--color-accent); text-decoration:none; }
.ent-link:hover { text-decoration:underline; }

/* OPTICAL SIZE, not nominal size, and MEASURED rather than guessed. Walking
   each path gives how much of its own viewBox the glyph actually covers:

     discogs 100%   bandcamp 100%   apple 95%
     instagram 81%  facebook 81%    link 69%

   Phosphor draws on a 256 grid with the shape inset to about 208 -- that is
   the whole 20% -- while the Discogs and Bandcamp marks fill their boxes edge
   to edge, so at one width the Phosphor ones read short. Scaled UP to meet
   them, since those two are sized right for the row.

   ONE NUMBER PER GLYPH; this is the only place to change it. */
.listen-link .icon[data-icon="facebook.logo"],
.listen-link .icon[data-icon="instagram.logo"] { transform:scale(1.23); }
/* The chain sits diagonally and covers less of its box than the rest. */
.listen-link .icon[data-icon="link"] { transform:scale(1.32); }
.listen-link .icon[data-icon="apple.logo"] { transform:scale(1.05); }
/* NO NUDGE FOR THE VINYL GLYPH. The old Discogs wordmark filled its 24-box
   edge to edge and needed none; the record that replaced it is a circle
   spanning 208 of its 256 box, which is already about as much ink as the
   glyphs either side of it. A 1.2 was tried on the theory that every Phosphor
   icon needs the correction facebook and instagram carry -- it does not, and
   at the 21px desktop size it made this one visibly the largest in the row. */

/* What the band plays, between the facts and the places to hear them --
   block, for .ent-facts' float reason. Same pills as a review carries and
   the same destination, so a reader who wants more of this sound is one
   click from every record in the archive that has it. */
/* THE SHEET'S PILLS, in a block box. .sheet-tags is a flex row and this
   cannot be: the head body is already flowing around the photograph, and a
   flex container's box does not shorten beside a float -- the same trap
   .ent-facts and .ent-links each sidestep.

   FONT-SIZE:0 IS WHAT MAKES THEM MATCH. A block box builds line boxes, and
   every line box is at least as tall as the container's own strut -- 15px of
   inherited text at body's 1.45, about 23px, against a pill that is only 20.
   The rows came out taller than the sheet's and the pills sat on a baseline
   instead of flush. A flex row has no strut; zeroing the font size is how a
   block box gets the same. .tag-pill sets its own 11px back, so nothing else
   has to know. vertical-align:top keeps a wrapped second row tight.

   6px margins to the sheet's gap:6px; cursor and hover come from .tag-link,
   which the markup on both sides carries. */
.ent-tags { display:block; margin-top:var(--space-3); font-size:0; }
.ent-tags .tag-pill { display:inline-block; vertical-align:top; margin:0 6px 6px 0; }

/* The link row: inherited from the sheet's .listen-links, but block rather
   than flex for the float's sake -- same reason as .ent-facts. The pills are
   inline-flex already, so they simply flow. */
.ent-links { display:block; margin-top:var(--space-4); }
.ent-links .listen-link { margin:0 var(--space-2) var(--space-2) 0; }

/* The page's own tool, on the name's first line. FLOATED, not a flex row:
   this sits inside the head body which is already flowing around the
   picture, and a flex container's box does not shorten beside a float -- it
   would render on top of the photograph. */
.ent-tools { float:right; margin:0 0 var(--space-2) var(--space-3); }
.ent-tool { color:var(--color-text-secondary); }
.ent-tool:hover { color:var(--color-accent); }

/* An artist page in the search suggestions. The picture is what tells this
   apart from the filter rows under it -- nothing else in the list has one --
   and the chevron replaces the count in the same slot: a count means "narrow
   to this many", a chevron means "go there". */
.si-page { gap: var(--space-2); }
.si-thumb {
  position: relative; flex: none; width: 33px; height: 22px; overflow: hidden;
  border-radius: 3px; background: var(--color-bg-inset);
}
.si-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.si-go { flex: none; color: var(--color-text-tertiary); display: flex; align-items: center; }

/* The artist-page group leaves the search; the groups under it narrow it.
   Carried by position and a rule, not by a caption explaining itself. */
.suggest-group-page { gap: var(--space-2); }
.suggest-split {
  height: 1px; margin: var(--space-2) 0;
  background: var(--color-border);
}
/* The placeholder glyph when a promoted artist has no photograph yet -- an
   empty grey box would read as an image that failed to load. */
.si-thumb .icon { color: var(--color-text-tertiary); opacity: .45; }
.si-thumb { display: flex; align-items: center; justify-content: center; }