:root {
  --bg:        #f4efe6;
  --bg-card:  #fbf7ef;
  --ink:       #1a1714;
  --ink-soft:  #4a423a;
  --ink-mute:  #8b8278;
  --line:      #e3dccf;
  --line-soft: #ece5d6;
  --accent:    #b8431f;
  --accent-ink:#5a1d0a;
  --accent-teal: #2f6363;
  --accent-mustard: #b88a1f;
  --accent-moss: #4a7a47;
  --accent-moss-deep: #3d6b3a;
  --accent-moss-ink: #2c4e2a;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --shadow: 0 1px 2px rgba(26,23,20,0.04), 0 8px 24px rgba(26,23,20,0.06);
  --shadow-hover: 0 4px 8px rgba(26,23,20,0.06), 0 16px 40px rgba(26,23,20,0.10);

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

/* ============================================================
   RECORD SHOP SCENE — fixed, never scrolls
   wood wall + framed posters + turntable + chalkboard + crates
   ============================================================ */
body {
  /* faint paper grain on top of everything */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  background-size: 160px 160px;
  background-attachment: fixed;
}

.shop-scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Wood-plank wall — fills viewport, never scrolls */
.shop-wall {
  position: absolute;
  inset: 0;
  background:
    /* vertical plank seams */
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 159px,
      rgba(90, 55, 25, 0.16) 159px,
      rgba(90, 55, 25, 0.16) 160px,
      transparent 160px,
      transparent 161px
    ),
    /* warm wash that's slightly darker toward edges to suggest a room */
    radial-gradient(ellipse at center,
      rgba(244, 239, 230, 0) 0%,
      rgba(120, 80, 40, 0.08) 60%,
      rgba(80, 50, 25, 0.16) 100%);
}

/* Floor strip at the bottom — a darker wood band where the crates sit */
.shop-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background:
    linear-gradient(180deg,
      rgba(60, 35, 18, 0.0) 0%,
      rgba(60, 35, 18, 0.18) 35%,
      rgba(40, 22, 10, 0.30) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(40, 22, 10, 0.12) 0,
      rgba(40, 22, 10, 0.12) 1px,
      transparent 1px,
      transparent 80px
    );
}

/* SVG illustrations on each side wall — fixed via parent .shop-scene */
.shop-art {
  position: absolute;
  top: 70px;
  bottom: 0;
  width: 300px;
  height: calc(100vh - 70px);
  opacity: 0.92;
}
.shop-art-left  { left: 0; }
.shop-art-right { right: 0; }

/* Hide the side art on narrow screens — too crowded */
@media (max-width: 1100px) {
  .shop-art { display: none; }
}

/* keep all real content above the scene */
.site-header, .page, .site-footer { position: relative; z-index: 1; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* HEADER */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  position: relative;
  font-size: 14px; color: var(--ink-soft); font-weight: 500;
  padding: 6px 12px; border-radius: var(--r-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms ease;
}
.site-nav a:hover { color: var(--accent-ink); }
.site-nav a.active {
  color: var(--ink);
  font-weight: 600;
}
.site-nav a.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -2px;
  height: 2px;
  background: var(--accent-ink);
  border-radius: 2px;
}

/* PAGE */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 40px 80px;
}

.back {
  display: inline-block;
  font-size: 14px;
  color: var(--ink-mute);
  margin-bottom: 24px;
}
.back:hover { color: var(--accent-ink); }

/* HERO */
.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
/* v2: editorial hero — left-aligned headline + right-aligned search/stats column */
.hero-v2 {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 28px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
/* groove: second hairline below the divider, like a record groove or master-tape leader */
.hero-v2::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--line);
  opacity: 0.55;
}
.hero-v2 .hero-left { flex: 1 1 auto; min-width: 0; }
.hero-v2 .hero-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  min-width: 280px;
}
.hero-v2 h1 { font-size: 64px; margin-top: 4px; }
.hero-v2 .lede { max-width: 620px; margin-bottom: 0; }

/* Search box in the hero */
.hero-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 320px;
  max-width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hero-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}
.hero-search-icon { color: var(--ink-mute); flex: 0 0 auto; }
.hero-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  padding: 0;
}
.hero-search input::placeholder { color: var(--ink-mute); }
.hero-search input::-webkit-search-cancel-button { display: none; }
.hero-search-clear {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 999px;
  transition: color .15s ease, background-color .15s ease;
}
.hero-search-clear:hover { color: var(--ink); background-color: rgba(0,0,0,0.06); }
.stat-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stat-line .stat-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: none;
}
.stat-line .stat-l { margin-right: 2px; }
.stat-line .stat-sep { margin: 0 8px; color: var(--line); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-ink);
  background: rgba(184, 67, 31, 0.08);
  border: 1px solid rgba(184, 67, 31, 0.35);
  border-radius: 2px;
  padding: 4px 10px 3px;
  margin: 0 0 14px;
  transform: rotate(-1.2deg);
  transform-origin: left center;
  box-shadow: 1px 1px 0 rgba(184, 67, 31, 0.10);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  font-variation-settings: "opsz" 120;
}
.lede {
  max-width: 540px;
  color: var(--ink-soft);
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
.lede-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-right: 4px;
}

/* SIDE A · LIBRARY leader stamp — record-label inner ring vibe */
.side-leader {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.side-leader-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fbf7ef;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1;
  padding-top: 1px;
}
.side-leader-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}
.side-leader-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.stats {
  display: flex;
  gap: 32px;
  margin: 0;
}
.stats div { text-align: right; }
.stats dt {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin: 0 0 4px;
}
.stats dd {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
}

/* RARITY MEDALLION BADGE — inline SVG shield with score + tier band */
.rarity-badge {
  display: inline-block;
  width: 36px;
  margin-left: 10px;
  vertical-align: -0.32em;
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(26, 23, 20, 0.22));
}
.rarity-badge svg { width: 100%; height: auto; display: block; overflow: visible; }
.rarity-badge.lg { width: 64px; margin-left: 16px; vertical-align: -0.18em; }

/* Tier gradient stops (top → bottom of shield) */
.rarity-badge.tier-grail    .g-top { stop-color: #d76a4a; } .rarity-badge.tier-grail    .g-bot { stop-color: #8a2a14; }
.rarity-badge.tier-scarce   .g-top { stop-color: #e3a665; } .rarity-badge.tier-scarce   .g-bot { stop-color: #a06c1f; }
.rarity-badge.tier-uncommon .g-top { stop-color: #b6c498; } .rarity-badge.tier-uncommon .g-bot { stop-color: #5e6e3f; }
.rarity-badge.tier-common   .g-top { stop-color: #cfc8b5; } .rarity-badge.tier-common   .g-bot { stop-color: #7e7561; }

/* Ribbon tails — darker tone per tier */
.rarity-badge.tier-grail    .ribbon { fill: #5e1a08; }
.rarity-badge.tier-scarce   .ribbon { fill: #6e4612; }
.rarity-badge.tier-uncommon .ribbon { fill: #3f4a26; }
.rarity-badge.tier-common   .ribbon { fill: #574f3f; }

.rarity-badge .shield-ring { stroke: rgba(255, 255, 255, 0.42); stroke-width: 0.7; }
.rarity-badge .groove { stroke: rgba(255, 255, 255, 0.5); stroke-width: 0.6; }
.rarity-badge .groove-dot { fill: rgba(255, 255, 255, 0.7); }
.rarity-badge .score {
  font-size: 20px;
  fill: #fff;
  letter-spacing: -0.02em;
}
.rarity-badge .tier {
  font-size: 6.5px;
  letter-spacing: 0.18em;
  fill: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}
.rarity-badge.lg .score { font-size: 22px; }
.rarity-badge.lg .tier  { font-size: 7px; }

/* SHOWCASE TRIO — large editorial 3-up band beneath the hero */
.showcase-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 56px;
}
.showcase-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 200ms ease;
}
.showcase-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(0,0,0,0);
  box-shadow:
    0 1px 0 var(--stripe) inset,
    0 12px 28px -10px rgba(26, 23, 20, 0.22),
    0 4px 10px -4px rgba(26, 23, 20, 0.12);
}
.showcase-tile.placeholder {
  opacity: 0.55;
  pointer-events: none;
}

/* Tier stripe sits on the top edge of the card */
.showcase-tile::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--stripe);
  z-index: 2;
}
.showcase-tile.kind-rarest      { --stripe: linear-gradient(90deg, #b03219, #8a2a14 60%, #5e1a08); }
.showcase-tile.kind-collectable { --stripe: linear-gradient(90deg, #d3a05b, #a06c1f 60%, #6e4612); }
.showcase-tile.kind-valuable    { --stripe: linear-gradient(90deg, #93a571, #5e6e3f 60%, #3f4a26); }

/* Cover: large square with overlaid kicker + badge */
.showcase-tile-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #1a1714;
  overflow: hidden;
}
/* Subtle corner scrims to guarantee badge legibility against busy cover art */
.showcase-tile-cover::before,
.showcase-tile-cover::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.showcase-tile-cover::before {
  top: 0; left: 0; right: 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 100%);
}
.showcase-tile-cover::after {
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(0deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.30) 55%, rgba(0,0,0,0) 100%);
}
.showcase-tile-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
.showcase-tile:hover .showcase-tile-cover img { transform: scale(1.035); }
.showcase-tile-cover.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
}
.showcase-tile-cover.empty svg { width: 56px; height: 56px; opacity: 0.5; }

/* Kicker label — top-left chip over the cover */
.showcase-kicker {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 5px 9px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a1714;
  background: #fcf8f0;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.32);
}

/* Metric badge — bottom-right over cover, glassy dark */
.showcase-badge {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  padding: 8px 12px 9px;
  background: #14120f;
  color: #fcf8f0;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
  min-width: 64px;
  text-align: right;
}
.showcase-badge .badge-l {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(252, 248, 240, 0.7);
  line-height: 1;
  margin-bottom: 3px;
}
.showcase-badge .badge-v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variation-settings: "opsz" 60;
}

/* Body */
.showcase-tile-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.showcase-tile-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.showcase-tile-artist {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.showcase-tile-artist .yr { color: var(--ink-mute); }
.showcase-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 8px 0 0;
  font-weight: 600;
}
.showcase-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-mute);
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.showcase-empty-msg {
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
  margin: 0;
}

/* edition line on cards */
.edition-line {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-mute);
  margin-top: 6px;
}

/* EDITION + RARITY PANELS (album detail) */
.edition-panel, .rarity-panel {
  margin: 0 0 40px;
  padding: 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.edition-panel h2, .rarity-panel h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.edition-name {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 10px;
  font-style: italic;
}
.edition-body { margin: 0; color: var(--ink-soft); max-width: 65ch; font-size: 15px; }

.rarity-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.rarity-head h2 { margin: 0; }
.rarity-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-weight: 600;
}
.rarity-tag.tier-grail    { color: #6c2424; border-color: #c98a8a; background: #f7e6e6; }
.rarity-tag.tier-scarce   { color: #7a4a14; border-color: #d8a878; background: #fbecd6; }
.rarity-tag.tier-uncommon { color: #4a5238; border-color: #b6bd9c; background: #eef0e3; }
.rarity-tag.tier-common   { color: #6b6b6b; border-color: #cfcabd; background: #f0ece1; }
.rarity-bar {
  margin: 18px 0 0;
}
.rarity-track {
  position: relative;
  height: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.rarity-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b8431f 0%, #d4924e 40%, #b6bd9c 70%, #cfcabd 100%);
}
.rarity-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 10px;
}
.rarity-notes { margin: 20px 0 0; color: var(--ink-soft); max-width: 65ch; font-size: 14.5px; }

/* VALUE & COLLECTABILITY PANEL (album detail) */
.value-panel {
  margin: 0 0 40px;
  padding: 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.value-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.value-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.value-amount {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.value-cell {
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 6px);
}
.value-cell-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.value-cell-figure {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.05;
}
.value-cell-of {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-mute);
}
.value-cell-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.value-notes {
  margin: 18px 0 0;
  color: var(--ink-soft);
  max-width: 65ch;
  font-size: 14.5px;
}
.kv-value {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.kv-value-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: 4px;
}

/* TOP-5 PANEL (top artists + top genres) */
.top-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
.top-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 22px;
}
.top-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.top-sub {
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  font-size: 10px;
}
.top-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-list li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.top-list li:last-child { border-bottom: none; }
.rank {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.top-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.top-name:hover { color: var(--accent-ink); }
.top-name.as-link {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.top-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

/* CONTROLS (sort + genre filter) */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: 32px;
}
.sort-control { display: flex; align-items: center; gap: 10px; }
.sort-control label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.sort-control select {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 7px 28px 7px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%238b8278' stroke-width='1.4'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .15s ease;
}
.sort-control select:hover { border-color: var(--ink-mute); }
.sort-control select:focus { outline: none; border-color: var(--accent); }

.genre-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

/* Genre filter section pinned below the library grid */
.genre-filter-section {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.genre-filter-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin: 0 0 14px;
}

/* Active-filter indicator next to the Sort dropdown */
.genre-active-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.chip.inline { padding: 4px 6px 4px 12px; }
.chip-clear {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 999px;
  opacity: 0.7;
  transition: opacity .15s ease, background-color .15s ease;
}
.chip-clear:hover { opacity: 1; background-color: rgba(0,0,0,0.08); }
.chip {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--ink-mute); color: var(--ink); }
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.chip-n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  background: var(--bg);
  border-radius: 999px;
  padding: 1px 6px;
}
.chip.active .chip-n { color: #fff; background: rgba(255,255,255,0.18); }

/* GROUPED RESULTS (when sorted by artist/genre) */
.group { margin-bottom: 48px; }
.group:last-child { margin-bottom: 0; }
.group-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.group-title a:hover { color: var(--accent-ink); }
.group-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
}
.no-results {
  text-align: center;
  padding: 60px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* genre tags inside cards */
.genre-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.chip-mini {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-soft);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}

/* GRID */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 32px;
}
.card {
  background: transparent;
  display: flex; flex-direction: column;
  transition: transform .2s ease;
}
.card:hover { transform: translateY(-2px); }
.card:hover .cover { box-shadow: var(--shadow-hover); }
.cover {
  aspect-ratio: 1/1;
  background: var(--bg-card);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease;
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute);
}
.cover-placeholder.big { background: var(--bg-card); border-radius: var(--r-lg); }

.card-body { padding: 14px 4px 0; }
.card-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 2px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  justify-content: space-between;
}
.card-body h3 .rarity-badge { flex: 0 0 auto; margin-top: 2px; }
.artist { margin: 0 0 6px; color: var(--ink-soft); font-size: 14px; }
.meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.meta-sub { margin-top: 4px; }
.dot { color: var(--line); }

/* ALBUM DETAIL */
.album-hero {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 56px;
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.album-cover {
  aspect-ratio: 1/1;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
}
.album-cover img { width: 100%; height: 100%; object-fit: cover; }
.album-info h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  margin: 0 0 6px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.album-artist {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: var(--accent-ink);
  margin: 0 0 24px;
}
.album-artist a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.kv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
  margin: 0 0 24px;
}
.kv div { border-top: 1px solid var(--line); padding-top: 10px; }
.kv dt {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin: 0 0 4px;
}
.kv dd { margin: 0; font-size: 15px; color: var(--ink); }
.kv dd .kv-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.kv dd .kv-link:hover,
.kv dd .kv-link:focus-visible {
  color: var(--accent);
  border-bottom-color: currentColor;
  outline: none;
}
.notes { margin-top: 16px; color: var(--ink-soft); font-size: 15px; max-width: 60ch; }
.source a { color: var(--accent); font-family: var(--font-mono); font-size: 12px; }

/* TRACKS */
.tracklist h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.tracks { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.tracks li {
  display: grid;
  grid-template-columns: 36px 1fr auto 60px;
  align-items: center;
  gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.tracks li:hover { background: var(--bg-card); }
.tn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}
.ttitle { font-size: 15px; }
.twriters { font-size: 12px; color: var(--ink-mute); font-style: italic; }
.tdur { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); text-align: right; }
.muted { color: var(--ink-mute); }

/* ARTIST */
.artist-hero { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.artist-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}
.artist-hero .kv { max-width: 600px; }
.bio { margin-top: 20px; max-width: 65ch; color: var(--ink-soft); }

/* EMPTY */
.empty {
  text-align: center;
  padding: 80px 20px;
  max-width: 480px;
  margin: 0 auto;
}
.empty-icon { color: var(--ink-mute); margin-bottom: 16px; }
.empty h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.empty p { color: var(--ink-soft); margin: 0; }

/* FOOTER */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 22px 40px 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.site-footer .footer-beta { color: var(--ink-soft, var(--ink-mute)); }
.site-footer .footer-beta a {
  color: var(--accent, #2f6f4a);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  text-transform: none;
  letter-spacing: 0.02em;
}
.site-footer .footer-beta a:hover { opacity: 0.85; }

/* RESPONSIVE */
@media (max-width: 980px) {
  .showcase-trio { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
  .showcase-tile-cover { aspect-ratio: 16 / 9; }
  .hero-v2 h1 { font-size: 48px; }
  .hero-v2 { flex-direction: column; align-items: stretch; gap: 24px; }
  .hero-v2 .hero-right { align-items: stretch; min-width: 0; }
  .hero-search { width: 100%; }
}

@media (max-width: 768px) {
  .site-header, .page { padding-left: 20px; padding-right: 20px; }
  .hero { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero h1 { font-size: 40px; }
  .stats { gap: 24px; }
  .stats div { text-align: left; }
  .album-hero { grid-template-columns: 1fr; gap: 24px; }
  .album-cover { max-width: 340px; }
  .album-info h1 { font-size: 36px; }
  .tracks li { grid-template-columns: 28px 1fr auto; }
  .twriters { display: none; }
  .controls { flex-direction: column; align-items: stretch; gap: 16px; }
  .top-panel { grid-template-columns: 1fr; gap: 16px; }
}

/* states */
.loading, .error {
  text-align: center;
  padding: 100px 20px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.error { color: var(--accent-ink); }
.error .muted { display: block; margin-top: 8px; font-size: 11px; color: var(--ink-mute); text-transform: none; letter-spacing: 0; }

/* ===========================================================================
   Next Spin — homepage teaser + dedicated page
   =========================================================================== */

/* --- Homepage teaser strip --- */
.ns-teaser {
  margin: 32px 0 36px;
  padding: 22px 26px;
  background:
    linear-gradient(180deg, #fbf7ef 0%, #f7efe1 100%);
  border: 1px solid rgba(184, 67, 31, 0.22);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(26,23,20,0.04), 0 8px 22px -16px rgba(26,23,20,0.22);
  position: relative;
}
.ns-teaser-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.ns-teaser-kicker {
  color: var(--accent-ink);
  font-weight: 600;
}
.ns-teaser-sep { color: var(--ink-mute); }
.ns-teaser-tag {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.ns-teaser-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: start;
}
.ns-teaser-cover {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 4px;
  overflow: hidden;
  background: #1a1410;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 8px 18px -10px rgba(26,23,20,0.35);
}
.ns-teaser-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-teaser-body { min-width: 0; }
.ns-teaser-context {
  color: var(--ink-mute);
  font-size: 13px;
  margin: 0 0 6px;
}
.ns-teaser-context a, .ns-anchor-link { color: var(--accent-ink); font-weight: 500; }
.ns-teaser-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.ns-teaser-title a { color: inherit; text-decoration: none; }
.ns-teaser-title a:hover { color: var(--accent-ink); }
.ns-teaser-artist {
  font-weight: 400;
  font-size: 16px;
  color: var(--ink-soft);
  font-style: italic;
  margin-left: 4px;
}
.ns-teaser-yr { color: var(--ink-mute); font-style: normal; }
.ns-teaser-reason {
  margin: 4px 0 14px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  max-width: 64ch;
}
.ns-teaser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ns-teaser-pos {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mid, #5b574e);
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border: 1px solid var(--ink-line, #d9d2c5);
  border-radius: 999px;
  background: rgba(20, 30, 30, 0.03);
}
.ns-teaser-loading, .ns-teaser-error .ns-teaser-body { color: var(--ink-mute); font-style: italic; }

/* --- Picker settings strip (homepage teaser, read-only summary) --- */
.ns-settings-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: rgba(20, 30, 30, 0.035);
  border: 1px solid rgba(20, 30, 30, 0.08);
  border-radius: 8px;
}
.ns-settings-strip-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.ns-settings-strip-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}
.ns-settings-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink-soft);
  border: 1px solid rgba(20, 30, 30, 0.12);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ns-settings-strip-edit {
  font-size: 11px;
  font-weight: 600;
  color: rgb(47, 99, 99);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 120ms ease;
}
.ns-settings-strip-edit:hover {
  background: rgba(47, 99, 99, 0.10);
  text-decoration: none;
}

/* --- Lock chips (teaser + page) --- */
.ns-lockchips, .ns-lockoffers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.ns-lockchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 11px;
  background: rgba(47, 99, 99, 0.14);
  color: var(--ink);
  border: 1px solid rgba(47, 99, 99, 0.32);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.ns-lockchip:hover { background: rgba(47, 99, 99, 0.22); border-color: rgba(47, 99, 99, 0.55); }
.ns-lockchip-x {
  font-size: 14px;
  line-height: 1;
  color: var(--ink-mute);
  margin-left: 2px;
}
.ns-lockoffer {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px dashed rgba(20, 30, 30, 0.30);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.ns-lockoffer:hover {
  color: var(--ink);
  border-color: rgba(47, 99, 99, 0.55);
  background: rgba(47, 99, 99, 0.06);
}
.ns-lock-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(20, 30, 30, 0.14);
}
.ns-lock-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ns-lock-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
}

/* --- Configure picker: "Options saved" pill + footer return button --- */
.ns-control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ns-control-header .ns-control-title { margin: 0; }
.ns-save-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: rgba(47, 99, 99, 0.10);
  color: var(--ink-soft);
  border: 1px solid rgba(47, 99, 99, 0.28);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: help;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.ns-save-pill svg { color: rgb(47, 99, 99); flex-shrink: 0; }
.ns-save-pill.is-flash {
  background: rgba(47, 99, 99, 0.28);
  color: var(--ink);
  border-color: rgba(47, 99, 99, 0.70);
  animation: nsSavePillFlash 1100ms ease-out 1;
}
@keyframes nsSavePillFlash {
  0%   { transform: scale(1); }
  18%  { transform: scale(1.06); }
  100% { transform: scale(1); background: rgba(47, 99, 99, 0.10); color: var(--ink-soft); border-color: rgba(47, 99, 99, 0.28); }
}
.ns-page-footer {
  display: flex;
  justify-content: flex-end;
  margin: 32px 0 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(20, 30, 30, 0.10);
}
.ns-btn-return {
  text-decoration: none;
}

/* --- Match pill --- */
.ns-match-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: rgba(47, 99, 99, 0.10);
  color: var(--accent-teal);
  border: 1px solid rgba(47, 99, 99, 0.28);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.ns-match-score {
  padding: 2px 5px;
  background: var(--accent-teal);
  color: #fbf7ef;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
}

/* --- Buttons --- */
.ns-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.ns-btn:disabled { opacity: 0.55; cursor: wait; }
.ns-btn-primary {
  background: var(--accent);
  color: #fbf7ef;
  border-color: var(--accent);
}
.ns-btn-primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
.ns-btn-secondary {
  background: #fbf7ef;
  color: var(--ink);
  border-color: rgba(26,23,20,0.18);
}
.ns-btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.ns-btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: rgba(26,23,20,0.16);
}
.ns-btn-ghost:hover { color: var(--accent-ink); border-color: var(--accent); background: rgba(184, 67, 31, 0.06); }

/* --- Dedicated page hero --- */
.ns-page-hero {
  margin: 8px 0 28px;
  max-width: 760px;
}
.ns-page-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 4px 0 12px;
}
.ns-page-hero .lede { color: var(--ink-soft); font-size: 15px; max-width: 60ch; line-height: 1.55; }

/* --- Controls panel --- */
.ns-controls {
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.10);
  border-radius: 6px;
  padding: 22px 24px;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
.ns-control-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  margin: 0 0 12px;
  font-weight: 600;
}
.ns-theme-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ns-theme-chip {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(26,23,20,0.18);
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.ns-theme-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.ns-theme-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fbf7ef;
}
.ns-filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.ns-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ns-field-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  font-weight: 600;
}
.ns-field select {
  appearance: none;
  background: #fbf7ef;
  border: 1px solid rgba(26,23,20,0.18);
  border-radius: 4px;
  padding: 8px 28px 8px 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%231a1714' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.ns-field select:focus { border-color: var(--accent); outline: none; }
.ns-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-bottom: 14px;
}
.ns-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.ns-toggle input { accent-color: var(--accent); width: 14px; height: 14px; }
.ns-toggle:hover { color: var(--ink); }
.ns-actions-bar {
  display: flex;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(26,23,20,0.08);
  padding-top: 14px;
}

/* --- Result grid --- */
.ns-result { margin-bottom: 36px; }
.ns-result-head { margin-bottom: 14px; }
.ns-result-eyebrow {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0;
}
.ns-result-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 760px) {
  .ns-result-grid { grid-template-columns: 1fr; }
}

/* Anchor card */
.ns-anchor-card {
  display: block;
  background: #1a1714;
  color: #f4efe6;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 14px 30px -22px rgba(26,23,20,0.65);
  transition: transform 0.15s;
}
.ns-anchor-card:hover { transform: translateY(-2px); }
.ns-anchor-card.empty {
  background: #fbf7ef;
  color: var(--ink-soft);
  border: 1px dashed rgba(26,23,20,0.2);
  padding: 22px;
}
.ns-anchor-cover {
  aspect-ratio: 1 / 1;
  background: #0a0805;
}
.ns-anchor-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-anchor-body { padding: 14px 16px 16px; }
.ns-anchor-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-mustard);
  margin: 0 0 6px;
  font-weight: 600;
}
.ns-anchor-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  margin: 0 0 4px;
}
.ns-anchor-artist {
  font-size: 13px;
  color: rgba(244,239,230,0.78);
  margin: 0 0 8px;
}
.ns-anchor-tags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ns-chip-mini {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(244,239,230,0.10);
  color: rgba(244,239,230,0.82);
  border-radius: 999px;
  font-size: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ns-anchor-empty { font-size: 13px; margin: 8px 0 0; line-height: 1.5; }

/* Suggestion cards */
.ns-suggestions { display: block; }
.ns-primary-slot { margin-bottom: 28px; }
.ns-suggest-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.10);
  border-radius: 6px;
}
.ns-suggest-card.primary {
  border-color: rgba(184, 67, 31, 0.35);
  background:
    linear-gradient(180deg, #fbf7ef 0%, #f7eddd 100%);
  box-shadow: 0 10px 28px -22px rgba(184, 67, 31, 0.45);
}
.ns-suggest-cover {
  display: block;
  aspect-ratio: 1 / 1;
  width: 140px;
  border-radius: 4px;
  overflow: hidden;
  background: #1a1410;
  box-shadow: 0 8px 18px -12px rgba(26,23,20,0.5);
}
.ns-suggest-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-suggest-body { min-width: 0; }
.ns-suggest-role {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  font-weight: 600;
  margin: 0 0 4px;
}
.ns-suggest-card.primary .ns-suggest-role { color: var(--accent-ink); }
.ns-suggest-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  margin: 0 0 4px;
}
.ns-suggest-title a { color: var(--ink); text-decoration: none; }
.ns-suggest-title a:hover { color: var(--accent-ink); }
.ns-suggest-artist {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.ns-suggest-reason {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 12px;
  max-width: 56ch;
}
.ns-suggest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ns-alternates-group { margin-top: 4px; }
.ns-alternates-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(26,23,20,0.10);
}
.ns-alternates {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.ns-empty-card {
  padding: 30px;
  background: var(--bg-card);
  border: 1px dashed rgba(26,23,20,0.18);
  border-radius: 6px;
  text-align: center;
}
.ns-empty-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 6px;
}
.ns-empty-card p { color: var(--ink-mute); margin: 0; }
.ns-muted { color: var(--ink-mute); font-size: 13px; }

/* Section titles */
.ns-section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.ns-section-sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 14px; }

/* Override search */
.ns-override { margin: 8px 0 36px; }
.ns-search-wrap { position: relative; max-width: 560px; }
.ns-search-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(26,23,20,0.18);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
}
.ns-search-input:focus { border-color: var(--accent); outline: none; }
.ns-search-results {
  margin-top: 6px;
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.14);
  border-radius: 4px;
  max-height: 360px;
  overflow-y: auto;
  box-shadow: 0 14px 28px -20px rgba(26,23,20,0.35);
}
.ns-search-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(26,23,20,0.06);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.ns-search-row:last-child { border-bottom: 0; }
.ns-search-row:hover { background: rgba(184, 67, 31, 0.06); }
.ns-search-cover {
  width: 36px; height: 36px;
  background: #1a1410;
  border-radius: 3px;
  overflow: hidden;
}
.ns-search-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-search-meta { display: flex; flex-direction: column; min-width: 0; }
.ns-search-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.ns-search-artist { font-size: 11.5px; color: var(--ink-mute); }
.ns-search-cue {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
  font-weight: 600;
}
.ns-search-empty { padding: 14px; color: var(--ink-mute); font-size: 13px; margin: 0; }

/* History list */
.ns-history-list { display: flex; flex-direction: column; gap: 0; }
.ns-history-row {
  display: grid;
  grid-template-columns: 44px 36px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.08);
  border-top: 0;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  transition: background 0.12s;
}
.ns-history-row:first-child { border-top: 1px solid rgba(26,23,20,0.08); border-radius: 4px 4px 0 0; }
.ns-history-row:last-child { border-radius: 0 0 4px 4px; }
.ns-history-row:hover { background: rgba(184, 67, 31, 0.05); }
.ns-history-idx {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  text-align: center;
}
.ns-history-row:first-child .ns-history-idx {
  color: #fbf7ef;
  background: var(--accent);
  border-radius: 999px;
  padding: 2px 0;
}
.ns-history-cover { width: 36px; height: 36px; border-radius: 3px; overflow: hidden; background: #1a1410; }
.ns-history-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-history-meta { display: flex; flex-direction: column; min-width: 0; }
.ns-history-title { font-weight: 600; color: var(--ink); }
.ns-history-artist { color: var(--ink-mute); font-size: 11.5px; }
.ns-history-source {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-teal);
  padding: 2px 8px;
  background: rgba(47, 99, 99, 0.08);
  border-radius: 999px;
}
.ns-history-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-mute);
}
@media (max-width: 640px) {
  .ns-history-row { grid-template-columns: 36px 36px 1fr auto; }
  .ns-history-source { display: none; }
  .ns-teaser-row { grid-template-columns: 80px 1fr; }
  .ns-teaser-cover { width: 80px; height: 80px; }
  .ns-teaser-title { font-size: 19px; }
  .ns-page-hero h1 { font-size: 36px; }
}

/* ---------------------------------------------------------------------------
   Now Spinning — live homepage card (chalkboard-inspired)
   --------------------------------------------------------------------------- */
.now-spinning-card {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 22px;
  align-items: stretch;
  margin: 22px 0 4px;
  padding: 18px 22px 18px 18px;
  background:
    linear-gradient(180deg, #1d2f27 0%, #16261f 100%);
  border: 1px solid #0e1a14;
  border-radius: 8px;
  box-shadow:
    0 2px 0 #5a3a20,                        /* warm wood ledge */
    0 10px 22px -10px rgba(10, 12, 10, 0.55),
    inset 0 0 0 1px rgba(255, 247, 230, 0.04);
  color: #fbf7ef;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.now-spinning-card:hover {
  transform: translateY(-1px);
  box-shadow:
    0 2px 0 #5a3a20,
    0 14px 26px -10px rgba(10, 12, 10, 0.6),
    inset 0 0 0 1px rgba(255, 247, 230, 0.06);
}
.now-spinning-card::before {
  /* faint chalk-dust texture on the board */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 247, 230, 0.05) 0, transparent 38%),
    radial-gradient(circle at 88% 78%, rgba(255, 247, 230, 0.04) 0, transparent 42%);
  pointer-events: none;
}
.now-spinning-loading, .now-spinning-empty {
  grid-template-columns: 1fr;
  min-height: 96px;
  padding: 18px 22px;
}

.ns-kicker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ns-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #b8431f;
  box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18);
  animation: nsPulse 2.2s ease-in-out infinite;
}
.ns-dot-off {
  background: #6b6258;
  box-shadow: none;
  animation: none;
}
@keyframes nsPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(184, 67, 31, 0.06); }
}
.ns-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b88a1f;
}

.ns-cover {
  position: relative;
  width: 168px; height: 168px;
  border-radius: 4px;
  overflow: hidden;
  background: #0a0805;
  box-shadow:
    0 1px 0 rgba(255, 247, 230, 0.04),
    0 6px 14px -6px rgba(0, 0, 0, 0.5);
}
.ns-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ns-cover-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 247, 230, 0.35);
}
.ns-disc {
  position: absolute;
  right: -52px; top: 50%;
  transform: translateY(-50%);
  width: 110px; height: 110px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #b8431f 0 18%, transparent 18.5%),
    repeating-radial-gradient(circle at 50% 50%,
      #15110d 0 2px, #1a1410 2px 4px);
  box-shadow:
    0 0 0 1.5px #0a0805,
    0 4px 10px -3px rgba(0, 0, 0, 0.55);
  opacity: 0.94;
}

.ns-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-right: 6px;
}
.ns-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 2px 0 6px;
  color: #fbf7ef;
}
.ns-artist {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  color: #e9dcc1;
  margin: 0 0 6px;
}
.ns-year {
  color: #b88a1f;
  font-size: 14px;
}
.ns-sidetrack {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #b88a1f;
  margin: 4px 0 2px;
}
.ns-note {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(251, 247, 239, 0.78);
  margin: 6px 0 4px;
}
.ns-cta {
  display: inline-block;
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b8431f;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
a.now-spinning-card:hover .ns-cta {
  color: #d96b3a;
  border-bottom-color: #d96b3a;
}
.ns-empty-line {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: #e9dcc1;
  margin: 4px 0;
}
.ns-empty-sub { margin: 4px 0 0; }
.ns-empty-link {
  color: #b8431f;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(184, 67, 31, 0.4);
}
.ns-empty-link:hover { border-bottom-color: #b8431f; }
.ns-loading {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: rgba(251, 247, 239, 0.6);
}

@media (max-width: 640px) {
  .now-spinning-card { grid-template-columns: 110px 1fr; gap: 14px; padding: 14px; }
  .ns-cover { width: 110px; height: 110px; }
  .ns-disc { display: none; }
  .ns-title { font-size: 22px; }
  .ns-artist { font-size: 14px; }
}

/* ---------------------------------------------------------------------------
   Album page editorial upgrade — NOW SPINNING badge, story, trivia, lyrics
   --------------------------------------------------------------------------- */
.album-now-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(184, 67, 31, 0.08);
  border: 1px solid rgba(184, 67, 31, 0.28);
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.album-now-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18);
  animation: nsPulse 2.2s ease-in-out infinite;
}
.album-hero.is-now-spinning {
  border-left: 3px solid var(--accent);
  padding-left: 18px;
}
.album-year { color: var(--ink-mute); font-size: 0.92em; }
.album-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 14px;
}
.album-action {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  padding: 6px 12px;
  background: rgba(184, 67, 31, 0.06);
  border: 1px solid rgba(184, 67, 31, 0.25);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.album-action:hover {
  background: rgba(184, 67, 31, 0.12);
  border-color: var(--accent);
}
.album-action[disabled],
.album-action:disabled {
  cursor: default;
  opacity: 1;
}
.album-action.album-action-primary {
  background: var(--accent);
  color: #fbf7ef;
  border-color: var(--accent);
  cursor: pointer;
  font-weight: 600;
}
.album-action.album-action-primary:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}
.album-action.album-action-primary:disabled {
  background: var(--ink-mute);
  border-color: var(--ink-mute);
  cursor: wait;
}
.album-action.album-action-current {
  background: rgba(47, 99, 99, 0.12);
  color: var(--accent-teal);
  border-color: rgba(47, 99, 99, 0.4);
  font-weight: 600;
}

/* Current-spin strip (editable) */
.current-spin-strip {
  margin: 18px 0 8px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid rgba(184, 67, 31, 0.2);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}
.cs-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-teal);
  margin-bottom: 10px;
}
.cs-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
}
.cs-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-field-wide { flex: 1 1 220px; }
.cs-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cs-input {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  padding: 6px 10px;
  background: #fdfaf3;
  border: 1px solid rgba(26, 23, 20, 0.18);
  border-radius: 4px;
  color: var(--ink);
  min-width: 60px;
}
.cs-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(184, 67, 31, 0.18);
}
.cs-input-narrow { width: 72px; }
.cs-save, .cs-stop {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid;
  transition: background 0.15s ease;
}
.cs-save {
  color: #fbf7ef;
  background: var(--accent);
  border-color: var(--accent);
}
.cs-save:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.cs-stop {
  color: var(--ink-soft);
  background: transparent;
  border-color: rgba(26, 23, 20, 0.25);
}
.cs-stop:hover { background: rgba(26, 23, 20, 0.05); }
.cs-status {
  margin: 8px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-mute);
  min-height: 14px;
}

/* Read-only spin strip (shown on someone else's public vault) */
.cs-fields-readonly {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cs-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(26, 23, 20, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  color: var(--ink);
}
.cs-pill .cs-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cs-pill-note {
  font-style: italic;
  color: var(--ink-soft);
}

/* Read-only view chrome: hidden nav links */
body.vv-readonly-view .site-nav a.is-hidden { display: none; }

/* Story section */
.album-story {
  margin: 28px 0 6px;
  padding: 22px 26px;
  background: var(--bg-card);
  border: 1px solid rgba(26, 23, 20, 0.08);
  border-radius: 6px;
  position: relative;
}
.album-story-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.album-story-body {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.album-story-body p { margin: 0 0 14px; }
.album-story-body p:last-child { margin-bottom: 0; }
.album-story-body p:first-child::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 3.2em;
  float: left;
  line-height: 0.9;
  padding: 4px 10px 0 0;
  color: var(--accent);
}
.album-story-empty .album-story-body { font-style: italic; }

/* Trivia section */
.album-trivia {
  margin: 22px 0 6px;
  padding: 20px 26px;
  background: #f8f3ea;
  border: 1px dashed rgba(26, 23, 20, 0.16);
  border-radius: 6px;
}
.album-trivia-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-teal);
  margin: 0 0 12px;
}
.album-trivia-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.album-trivia-list li {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  padding-left: 18px;
  position: relative;
}
.album-trivia-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 6px; height: 6px;
  background: var(--accent-mustard);
  border-radius: 50%;
}

@media (max-width: 640px) {
  .album-story { padding: 18px; }
  .album-story-body { font-size: 16px; }
  .album-trivia { padding: 16px 18px; }
  .cs-input-narrow { width: 60px; }
}

/* ============================================================
   Enrichment — admin strip + per-album CTA + source footers
   ============================================================ */
.enrich-admin {
  margin: 18px 0 6px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid rgba(47, 99, 99, 0.25);
  border-left: 3px solid var(--accent-teal);
  border-radius: 6px;
}
.enrich-admin-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.enrich-admin-meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.enrich-admin-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-teal); font-weight: 700;
}
.enrich-admin-count {
  font-size: 14px; color: var(--ink); font-weight: 500;
}
.enrich-admin-fail {
  font-size: 11px; color: var(--accent); font-weight: 600;
  padding: 2px 8px; background: rgba(184,67,31,0.1); border-radius: 3px;
}
.enrich-admin-actions { display: flex; align-items: center; gap: 12px; }
.enrich-progress {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--ink-soft);
}
.enrich-admin-btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
  background: var(--accent-teal); color: #fbf7ef;
  border: 1px solid var(--accent-teal);
  padding: 7px 14px; border-radius: 4px; cursor: pointer;
  transition: background 0.15s ease;
}
.enrich-admin-btn:hover:not(:disabled) { background: #1f4a4a; border-color: #1f4a4a; }
.enrich-admin-btn:disabled { opacity: 0.55; cursor: default; }
.enrich-admin-bar {
  margin-top: 10px; height: 4px;
  background: rgba(47, 99, 99, 0.12); border-radius: 2px; overflow: hidden;
}
.enrich-admin-bar-fill {
  height: 100%; background: var(--accent-teal);
  transition: width 0.4s ease;
}

/* Per-album Generate CTA */
.enrich-cta {
  margin: 24px 0;
  padding: 22px 24px;
  background: var(--bg-card);
  border: 1px dashed rgba(184, 67, 31, 0.35);
  border-radius: 6px;
  text-align: center;
}
.enrich-cta-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 8px;
}
.enrich-cta-body {
  font-size: 14px; color: var(--ink-soft); margin: 0 auto 14px;
  max-width: 520px; line-height: 1.55;
}
.enrich-cta-error {
  font-size: 12px; color: var(--accent); margin: 0 0 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.enrich-status {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--ink-mute);
  margin-top: 10px; min-height: 1em;
}

/* Source footer under story / trivia */
.enrich-foot {
  margin-top: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; color: var(--ink-mute);
  letter-spacing: 0.04em;
  padding-top: 8px;
  border-top: 1px dashed rgba(0,0,0,0.08);
}
.enrich-foot a { color: var(--accent-teal); text-decoration: none; }
.enrich-foot a:hover { text-decoration: underline; }
.enrich-refresh {
  margin-left: 10px;
  background: none; border: 1px solid rgba(184, 67, 31, 0.3);
  color: var(--accent-ink); font-family: inherit; font-size: 10px;
  padding: 2px 8px; border-radius: 3px; cursor: pointer; text-transform: uppercase;
  letter-spacing: 0.08em;
}
.enrich-refresh:hover { background: rgba(184, 67, 31, 0.08); }

/* =========================================================================
   Vault Paths
   ========================================================================= */

/* --- Homepage teaser (mirrors ns-teaser, mustard-leaning accent) --- */
.vp-teaser {
  margin: 28px 0 36px;
  padding: 22px 26px;
  background:
    linear-gradient(180deg, #fbf7ef 0%, #f5ecdc 100%);
  border: 1px solid rgba(184, 138, 31, 0.28);
  border-left: 4px solid var(--accent-mustard);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(26,23,20,0.04), 0 8px 22px -16px rgba(26,23,20,0.22);
  position: relative;
}
.vp-teaser-eyebrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.vp-teaser-kicker { color: var(--accent-ink); font-weight: 600; }
.vp-teaser-sep    { color: var(--ink-mute); }
.vp-teaser-tag {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; text-transform: none;
  letter-spacing: 0; font-size: 13px; color: var(--ink-soft);
}
.vp-teaser-count {
  margin-left: auto;
  padding: 3px 8px;
  background: rgba(184, 138, 31, 0.14);
  color: var(--accent-mustard);
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
}
.vp-teaser-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: start;
}
.vp-teaser-cover {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px;
  border-radius: 4px; overflow: hidden;
  background: #1a1410; color: rgba(251, 247, 239, 0.45);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 8px 18px -10px rgba(26,23,20,0.35);
}
.vp-teaser-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-teaser-cover .vp-cover-ghost { width: 60%; height: 60%; display: flex; }
.vp-teaser-cover .vp-cover-ghost svg { width: 100%; height: 100%; }
.vp-teaser-body { min-width: 0; }
.vp-teaser-context { color: var(--ink-mute); font-size: 13px; margin: 0 0 6px; }
.vp-teaser-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: 22px; line-height: 1.18;
  letter-spacing: -0.01em; color: var(--ink);
  margin: 0 0 6px;
}
.vp-teaser-title a { color: inherit; text-decoration: none; }
.vp-teaser-title a:hover { color: var(--accent-ink); }
.vp-teaser-artist {
  font-weight: 400; font-size: 16px;
  color: var(--ink-soft); font-style: italic; margin-left: 4px;
}
.vp-teaser-yr { color: var(--ink-mute); font-style: normal; }
.vp-teaser-reason {
  margin: 4px 0 14px; color: var(--ink-soft);
  font-size: 14px; line-height: 1.5; max-width: 64ch;
}
.vp-teaser-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vp-teaser { transition: opacity 180ms ease, transform 180ms ease; }
.vp-teaser-shuffling { opacity: 0.35; transform: scale(0.995); }
.vp-teaser-loading, .vp-teaser-error .vp-teaser-body {
  color: var(--ink-mute); font-style: italic;
}
.vp-teaser-empty .vp-teaser-body { color: var(--ink-soft); }

/* --- Seedling state (Vault Paths, pre-threshold) --- */
/* Shown when a user hasn't logged enough listening sessions yet. The teaser
   variant is a slimmed-down version of vp-teaser; the page variant
   (vp-seedling) is a full-bleed card that replaces the workbench. */
.vp-teaser-seedling .vp-teaser-body p {
  color: var(--ink-soft);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  line-height: 1.45;
  margin: 0 0 6px;
}
.vp-teaser-hint {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 8px 0 0;
}

.vp-seedling {
  margin: 12px 0 48px;
  display: flex;
  justify-content: flex-start;
}
.vp-seedling-card {
  max-width: 640px;
  width: 100%;
  padding: 36px 38px;
  background: linear-gradient(180deg, #fbf7ef 0%, #f3e9d6 100%);
  border: 1px solid rgba(184, 138, 31, 0.28);
  border-left: 4px solid var(--accent-mustard);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(26,23,20,0.04), 0 12px 32px -18px rgba(26,23,20,0.28);
}
.vp-seedling-kicker {
  color: var(--accent-ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}
.vp-seedling-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 12px;
}
.vp-seedling-lede {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 56ch;
}
.vp-seedling-progress {
  height: 8px;
  background: rgba(26, 20, 16, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.vp-seedling-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-mustard) 0%, var(--accent-ink) 100%);
  border-radius: 999px;
  transition: width 240ms ease;
}
.vp-seedling-meta {
  color: var(--ink-mute);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.vp-seedling-meta strong { color: var(--accent-ink); font-weight: 700; }
.vp-seedling-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
@media (max-width: 640px) {
  .vp-seedling-card { padding: 26px 22px; }
  .vp-seedling-title { font-size: 24px; }
}

/* --- Page hero --- */
.vp-hero {
  margin: 8px 0 24px;
  max-width: 760px;
}
.vp-hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: 48px; line-height: 1.05;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 4px 0 12px;
}
.vp-hero-lede {
  color: var(--ink-soft); font-size: 15px;
  max-width: 60ch; line-height: 1.55;
}

/* --- Generator bar --- */
.vp-genbar {
  margin: 0 0 22px;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.10);
  border-radius: 6px;
}
.vp-genbar-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.vp-genbar-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600; font-size: 18px; color: var(--ink);
  margin: 0;
}
.vp-genbar-sub { color: var(--ink-mute); font-size: 13px; font-style: italic; }
.vp-genbar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vp-chip {
  padding: 6px 12px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid rgba(26,23,20,0.18);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.vp-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.vp-chip.active {
  background: var(--accent);
  color: #fbf7ef;
  border-color: var(--accent);
}
.vp-genbar-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vp-genbar-limit {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-soft); font-size: 13px;
}
.vp-genbar-limit input {
  width: 64px; padding: 6px 8px;
  border: 1px solid rgba(26,23,20,0.18);
  border-radius: 4px; background: #fbf7ef;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; color: var(--ink);
}
.vp-genbar-limit input:focus { outline: none; border-color: var(--accent); }

/* --- Tabs --- */
.vp-tabs {
  display: flex; gap: 4px;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(26,23,20,0.12);
}
.vp-tab {
  padding: 10px 16px;
  background: transparent; border: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.vp-tab:hover { color: var(--accent-ink); }
.vp-tab.active {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* --- List + cards --- */
.vp-list { display: flex; flex-direction: column; gap: 14px; }
.vp-loading, .vp-empty {
  padding: 32px 0; text-align: center; font-style: italic;
}
.vp-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.10);
  border-left: 3px solid rgba(26,23,20,0.18);
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vp-card:hover {
  border-color: rgba(184, 67, 31, 0.30);
  box-shadow: 0 6px 16px -12px rgba(26,23,20,0.20);
}
.vp-card-pinned {
  border-left-color: var(--accent-moss, #4a7a47);
  background: linear-gradient(180deg, var(--bg-card) 0%, #f3f6ee 100%);
}
.vp-card-resolved { border-left-color: var(--accent-teal); background: linear-gradient(180deg, #fbf7ef 0%, #f1f5f3 100%); }
.vp-card-cover {
  display: flex; align-items: center; justify-content: center;
  width: 80px; height: 80px;
  background: #1a1410; color: rgba(251, 247, 239, 0.45);
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 6px 14px -10px rgba(26,23,20,0.32);
}
.vp-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-card-cover .vp-cover-ghost { width: 56%; height: 56%; display: flex; }
.vp-card-cover .vp-cover-ghost svg { width: 100%; height: 100%; }
.vp-card-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.vp-card-head { display: flex; flex-direction: column; gap: 8px; }
.vp-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: 18px;
  line-height: 1.22; letter-spacing: -0.005em;
  color: var(--ink); margin: 0;
}
.vp-card-title a { color: inherit; text-decoration: none; }
.vp-card-title a:hover { color: var(--accent-ink); }
/* Title-as-button (unresolved paths): inherits typographic styling from .vp-card-title */
.vp-card-title-btn {
  display: inline; appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; letter-spacing: inherit; text-align: left;
  cursor: pointer; line-height: inherit;
}
.vp-card-title-btn:hover { color: var(--accent-ink); }
.vp-card-title-btn:focus-visible { outline: 2px solid var(--accent-moss, #4f6f44); outline-offset: 3px; border-radius: 2px; }
.vp-card-chev {
  display: inline-block; margin-left: 6px;
  font-weight: 600; color: var(--ink-mute);
  transition: transform 160ms ease;
}
.vp-card-title-btn[aria-expanded="true"] .vp-card-chev { transform: rotate(90deg); color: var(--accent-ink); }
/* Expand button in the card footer */
.vp-btn-expand .vp-expand-icon {
  display: inline-block; transition: transform 160ms ease;
}
.vp-btn-expand[aria-expanded="true"] .vp-expand-icon { transform: rotate(90deg); }
/* Collapsed state — the [hidden] attribute already hides it, but keep this for clarity */
.vp-pressing-collapsed[hidden] { display: none; }
/* Open state — a subtle fade-in so the drawer doesn't pop */
.vp-pressing-open { animation: vp-pressing-fade 180ms ease-out both; }
@keyframes vp-pressing-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vp-card-artist {
  font-weight: 400; font-size: 14px;
  color: var(--ink-soft); font-style: italic; margin-left: 4px;
}
.vp-card-yr { color: var(--ink-mute); font-style: normal; }
.vp-card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vp-card-reason {
  margin: 0; color: var(--ink-soft);
  font-size: 13.5px; line-height: 1.5;
}
.vp-card-notes {
  margin: 0; padding: 8px 12px;
  background: rgba(184, 138, 31, 0.08);
  border-left: 2px solid var(--accent-mustard);
  border-radius: 0 4px 4px 0;
  color: var(--ink-soft); font-size: 13px;
}
.vp-card-notes-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent-mustard);
  font-weight: 700; margin-right: 6px;
}
.vp-card-actions { display: flex; gap: 8px; margin-top: 4px; }
.vp-card-backups {
  font-size: 12.5px; color: var(--ink-soft);
}
.vp-card-backups summary {
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-mute);
  padding: 4px 0; outline: none;
}
.vp-card-backups summary:hover { color: var(--accent-ink); }
.vp-card-backups[open] summary { color: var(--accent-ink); margin-bottom: 6px; }

/* --- Version blocks --- */
.vp-version {
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13px;
}
.vp-version-preferred {
  background: rgba(47, 99, 99, 0.07);
  border: 1px solid rgba(47, 99, 99, 0.22);
}
.vp-version-backup {
  background: rgba(26,23,20,0.03);
  border: 1px dashed rgba(26,23,20,0.14);
  margin-top: 6px;
}
.vp-version-head {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 6px;
}
.vp-version-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.12em; font-weight: 700;
  color: var(--accent-teal);
}
.vp-version-backup .vp-version-label { color: var(--ink-mute); }
.vp-version-why {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-size: 12.5px;
  color: var(--ink-soft);
}
.vp-version-lines {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  color: var(--ink); font-size: 13px;
}
.vp-version-lines span { white-space: nowrap; }
.vp-version-lines span:not(:last-child)::after {
  content: '·'; margin-left: 10px; color: var(--ink-mute);
}
.vp-version-avoid {
  margin: 6px 0 0; padding: 4px 8px;
  background: rgba(184, 67, 31, 0.07);
  border-left: 2px solid var(--accent);
  color: var(--ink-soft); font-size: 12px;
  border-radius: 0 3px 3px 0;
}

/* --- Pills (source + status) --- */
.vp-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.vp-pill-rust    { background: rgba(184, 67, 31, 0.10); color: var(--accent-ink);    border-color: rgba(184, 67, 31, 0.28); }
.vp-pill-teal    { background: rgba(47, 99, 99, 0.10);  color: var(--accent-teal);   border-color: rgba(47, 99, 99, 0.28); }
.vp-pill-mustard { background: rgba(184, 138, 31, 0.12); color: var(--accent-mustard); border-color: rgba(184, 138, 31, 0.32); }
.vp-pill-ink     { background: rgba(26, 23, 20, 0.06);  color: var(--ink-soft);      border-color: rgba(26, 23, 20, 0.16); }

/* --- Priority bar --- */
.vp-prio {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; color: var(--ink-mute);
}
.vp-prio-bar {
  display: inline-block; width: 56px; height: 5px;
  background: rgba(26,23,20,0.10);
  border-radius: 999px; overflow: hidden;
}
.vp-prio-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent-mustard), var(--accent));
  border-radius: 999px;
}
.vp-prio-n { font-weight: 700; color: var(--ink-soft); letter-spacing: 0.05em; }

/* --- Buttons (parallel to ns-btn for consistency) --- */
.vp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.vp-btn:disabled { opacity: 0.55; cursor: wait; }
.vp-btn-primary {
  background: var(--accent); color: #fbf7ef; border-color: var(--accent);
}
.vp-btn-primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
.vp-btn-ghost {
  background: transparent; color: var(--ink-soft); border-color: rgba(26,23,20,0.16);
}
.vp-btn-ghost:hover { color: var(--accent-ink); border-color: var(--accent); background: rgba(184, 67, 31, 0.06); }

/* "I bought this" — primary positive action on Vault Path cards.
   Muted moss green echoes the pinned state but reads as a confirmed acquisition. */
.vp-btn-bought {
  background: var(--accent-moss);
  color: #fbfaf4;
  border-color: var(--accent-moss-deep);
  font-weight: 600;
}
.vp-btn-bought:hover {
  background: var(--accent-moss-deep);
  border-color: var(--accent-moss-deep);
  color: #fbfaf4;
}
.vp-bought-icon {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  transform: translateY(-0.5px);
}

/* Manual Add Album banner shown when the user arrived from a Vault Path "I bought this" button. */
.from-path-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  margin: 0 0 16px;
  background: rgba(95, 122, 88, 0.10);
  border-left: 3px solid var(--accent-moss-deep);
  border-radius: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.from-path-banner-body { flex: 1 1 auto; }
.from-path-banner-body strong { color: var(--accent-moss-deep); margin-right: 4px; }
.from-path-banner-body em { font-style: italic; }
.from-path-banner-link {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
  white-space: nowrap;
  padding-top: 2px;
}
.from-path-banner-link:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .from-path-banner { flex-direction: column; gap: 8px; }
}

/* --- Mobile --- */
@media (max-width: 720px) {
  .vp-teaser-row { grid-template-columns: 64px 1fr; gap: 14px; }
  .vp-teaser-cover { width: 64px; height: 64px; }
  .vp-teaser-title { font-size: 18px; }
  .vp-teaser-artist { font-size: 14px; }
  .vp-hero-title { font-size: 34px; }
  .vp-card { grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 16px; }
  .vp-card-cover { width: 64px; height: 64px; }
  .vp-card-title { font-size: 16px; }
  .vp-tabs { overflow-x: auto; }
  .vp-tab { white-space: nowrap; }
}

/* =========================================================================
   Vault Paths — Pinned state (green) + Pressing Notes drawer
   ========================================================================= */

/* Pin button — pinned variant
   Muted forest green: tasteful, editorial, never neon. */
.vp-btn-pinned {
  background: var(--accent-moss);
  color: #fbfaf4;
  border-color: var(--accent-moss-deep);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.vp-btn-pinned:hover:not(:disabled) {
  background: var(--accent-moss-deep);
  border-color: var(--accent-moss-deep);
  color: #fbfaf4;
}
.vp-btn-pinned:disabled {
  opacity: 0.85;
  cursor: progress;
}
.vp-pin-icon {
  display: inline-block;
  font-size: 0.95em;
  line-height: 1;
  margin-right: 2px;
  transform: translateY(-0.5px);
}

/* "Actively hunting" pill in the meta row */
.vp-pill-hunting {
  background: rgba(74, 122, 71, 0.10);
  color: var(--accent-moss-ink);
  border-color: rgba(74, 122, 71, 0.32);
  gap: 6px;
}
.vp-hunting-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-moss);
  box-shadow: 0 0 0 0 rgba(74, 122, 71, 0.45);
  animation: vp-hunt-pulse 2.2s ease-out infinite;
  flex: 0 0 auto;
}
@keyframes vp-hunt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 122, 71, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(74, 122, 71, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 122, 71, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .vp-hunting-dot { animation: none; }
}

/* Pressing Notes drawer — inline expandable section
   Lives between card body content and .vp-card-actions footer.
   Light moss tint, never gamified. */
.vp-pressing {
  margin-top: 10px;
  padding: 14px 16px 16px;
  background: rgba(74, 122, 71, 0.06);
  border: 1px solid rgba(74, 122, 71, 0.18);
  border-radius: 6px;
}
.vp-pressing-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 10px;
}
.vp-pressing-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-moss-ink);
  font-weight: 700;
}
.vp-pressing-sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-mute);
}

/* Tag row */
.vp-pressing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.vp-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  background: rgba(26,23,20,0.04);
  color: var(--ink-soft);
}
.vp-tag-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  opacity: 0.75;
}
.vp-tag-avail-easy     { background: rgba(74, 122, 71, 0.12);  color: var(--accent-moss-ink);    border-color: rgba(74, 122, 71, 0.32); }
.vp-tag-avail-moderate { background: rgba(184, 138, 31, 0.12); color: var(--accent-mustard);     border-color: rgba(184, 138, 31, 0.32); }
.vp-tag-avail-hard     { background: rgba(184, 67, 31, 0.10);  color: var(--accent-ink);         border-color: rgba(184, 67, 31, 0.28); }
.vp-tag-price-budget   { background: rgba(47, 99, 99, 0.10);   color: var(--accent-teal);        border-color: rgba(47, 99, 99, 0.28); }
.vp-tag-price-mid      { background: rgba(184, 138, 31, 0.12); color: var(--accent-mustard);     border-color: rgba(184, 138, 31, 0.32); }
.vp-tag-price-premium  { background: rgba(184, 67, 31, 0.10);  color: var(--accent-ink);         border-color: rgba(184, 67, 31, 0.28); }
.vp-tag-source         { background: rgba(26, 23, 20, 0.05);   color: var(--ink-mute);           border-color: rgba(26, 23, 20, 0.10); }

/* Field grid — 2 col on desktop, 1 col on mobile */
.vp-pressing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 22px;
  margin: 0;
}
.vp-pressing-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  padding: 4px 0;
  border-top: 1px solid rgba(74, 122, 71, 0.14);
}
.vp-pressing-row:first-child,
.vp-pressing-row:nth-child(2) {
  border-top: 0;
  padding-top: 0;
}
.vp-pressing-key {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  font-weight: 600;
  margin: 0;
}
.vp-pressing-val {
  font-size: 13.5px;
  color: var(--ink);
  margin: 1px 0 0;
  line-height: 1.4;
}
.vp-pressing-note {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(74, 122, 71, 0.18);
}
.vp-pressing-loading {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--ink-mute);
  margin: 4px 0 0;
}

/* Mobile: stack grid + tighten padding */
@media (max-width: 720px) {
  .vp-pressing {
    padding: 12px 14px 14px;
  }
  .vp-pressing-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .vp-pressing-row {
    border-top: 1px solid rgba(74, 122, 71, 0.14);
    padding: 6px 0;
  }
  .vp-pressing-row:nth-child(2) {
    border-top: 1px solid rgba(74, 122, 71, 0.14);
    padding-top: 6px;
  }
  .vp-pressing-row:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

/* =========================================================================
   Vault Paths layout — side modules (Latest Listens + Active Hunts)
   ========================================================================= */

/* Three-column layout. Sides at fixed 260px, main fluid.
   The decorative shop-art SVGs only appear above 1100px, so the side
   modules effectively REPLACE them on the Vault Paths route in that range. */
.vp-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: start;
}
.vp-main { min-width: 0; }
.vp-side {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* On the Vault Paths route, fade the decorative gutters so the
   functional panels are the dominant frame. We don't hide them
   entirely — a faint trace preserves the record-shop atmosphere. */
body.on-vault-paths .shop-art { opacity: 0.18; transition: opacity 0.3s ease; }

/* Shared side-module header styling */
.vp-side-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px;
}
.vp-side-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  font-weight: 600;
}
.vp-side-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
}
.vp-side-loading,
.vp-side-empty {
  margin: 0;
  padding: 8px 4px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
}
.vp-side-foot {
  align-self: flex-start;
  margin-top: 2px;
  padding: 4px 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.vp-side-foot:hover {
  color: var(--accent);
  border-bottom-color: rgba(184, 67, 31, 0.45);
}

/* -------- Latest Listens list -------- */
.vp-ll-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid rgba(26, 23, 20, 0.10);
  border-radius: 6px;
  overflow: hidden;
}
.vp-ll-row + .vp-ll-row { border-top: 1px solid rgba(26, 23, 20, 0.08); }
.vp-ll-link {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.vp-ll-link:hover { background: rgba(184, 67, 31, 0.05); }
.vp-ll-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #1a1410;
  border-radius: 3px;
  overflow: hidden;
  flex: 0 0 auto;
}
.vp-ll-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-ll-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}
.vp-ll-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.vp-ll-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vp-ll-artist {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vp-ll-year { opacity: 0.7; }
.vp-ll-when {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-top: 1px;
}

/* -------- Active Hunts quick-link card -------- */
.vp-hunt-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
  padding: 16px 14px 14px;
  background: linear-gradient(180deg, var(--bg-card) 0%, #f0f4ec 100%);
  border: 1px solid rgba(74, 122, 71, 0.30);
  border-left: 3px solid var(--accent-moss);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.vp-hunt-card:hover {
  border-color: var(--accent-moss-deep);
  box-shadow: 0 8px 22px -14px rgba(74, 122, 71, 0.55);
  transform: translateY(-1px);
}
.vp-hunt-card:focus-visible {
  outline: 2px solid var(--accent-moss);
  outline-offset: 2px;
}
.vp-hunt-art {
  display: block;
  width: 92px;
  height: 92px;
  margin: 0 auto;
}
.vp-hunt-art svg { width: 100%; height: 100%; display: block; }
.vp-hunt-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vp-hunt-title {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  margin: 0;
}
.vp-hunt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  background: var(--accent-moss);
  color: #fbfaf4;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  transform: translateY(-1px);
}
.vp-hunt-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.vp-hunt-cta {
  margin-top: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-moss-ink);
  font-weight: 600;
}

/* -------- Pinned tab active accent (subtle moss tint) -------- */
.vp-tab[data-vp-tab="pinned"].active {
  color: var(--accent-moss-ink);
  border-bottom-color: var(--accent-moss);
}

/* -------- Mobile: stack the layout, drop sticky -------- */
@media (max-width: 980px) {
  .vp-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .vp-side {
    position: static;
    top: auto;
  }
  /* On mobile, surface the Active Hunts card ABOVE the main list
     (it's the most actionable element) and Latest Listens BELOW. */
  .vp-side-right { order: -1; }
  .vp-side-left  { order: 2; }
  .vp-main       { order: 1; }

  .vp-hunt-card {
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 14px;
  }
  .vp-hunt-art { width: 72px; height: 72px; margin: 0; }
}

/* === Phase C: Auth, Account, Add-album === */

/* Header layout: nav center, account right */
.site-header { gap: 24px; }
.site-nav { flex: 1; justify-content: flex-start; margin-left: 28px; }
.account-slot { display: flex; align-items: center; gap: 10px; }

.acct-anon { display: flex; align-items: center; gap: 8px; }
.acct-link {
  background: transparent; border: 0; font-size: 14px;
  color: var(--ink-soft); cursor: pointer; padding: 6px 10px;
  font-family: inherit; font-weight: 500;
}
.acct-link:hover { color: var(--accent-ink); }
.acct-cta {
  background: var(--ink); color: var(--bg-card);
  border: 1px solid var(--ink); border-radius: var(--r-sm);
  padding: 7px 14px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background 140ms ease, transform 140ms ease;
}
.acct-cta:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.acct-menu { position: relative; }
.acct-chip {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px 4px 4px;
  font-family: inherit; font-size: 14px; color: var(--ink);
  cursor: pointer; transition: border-color 140ms ease;
}
.acct-chip:hover { border-color: var(--ink-mute); }
.acct-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-ink); color: var(--bg-card);
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.acct-name { font-weight: 500; }

.acct-pop {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  min-width: 240px; padding: 6px; z-index: 30;
  display: flex; flex-direction: column;
  /* Hidden by default; revealed by hover or click (is-open). */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.acct-menu:hover .acct-pop,
.acct-menu:focus-within .acct-pop,
.acct-menu.is-open .acct-pop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 0s;
}
/* Invisible bridge so cursor can travel from chip to dropdown without losing hover */
.acct-pop::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.acct-pop a, .acct-pop button {
  text-align: left; background: transparent; border: 0;
  padding: 9px 14px; font-size: 14px; color: var(--ink);
  text-decoration: none; border-radius: var(--r-sm);
  font-family: inherit; cursor: pointer;
}
.acct-pop a:hover, .acct-pop button:hover { background: var(--line-soft); color: var(--accent-ink); }
.acct-pop-sep { height: 1px; background: var(--line); margin: 5px 8px; }
.acct-logout { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 11px; color: var(--ink-soft); }

/* Signed-out inline text links (About / Release notes) before sign-in CTAs */
.acct-anon .acct-link-text {
  font-size: 13.5px; color: var(--ink-soft); text-decoration: none;
  padding: 6px 8px; font-weight: 500; letter-spacing: 0.01em;
  transition: color 140ms ease;
}
.acct-anon .acct-link-text:hover { color: var(--accent-ink); }

/* Auth modal */
.auth-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(26,23,20,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(6px);
}
.auth-card {
  background: var(--bg-card); border-radius: var(--r-md);
  width: 100%; max-width: 420px;
  padding: 28px 28px 22px; position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.auth-close {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: 0; font-size: 24px;
  color: var(--ink-mute); cursor: pointer; line-height: 1;
  font-family: inherit;
}
.auth-close:hover { color: var(--ink); }
.auth-tabs { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.auth-tab {
  background: transparent; border: 0;
  padding: 10px 14px; font-size: 14px; font-weight: 500;
  color: var(--ink-mute); cursor: pointer; font-family: inherit;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.auth-tab.active { color: var(--ink); border-bottom-color: var(--accent-ink); font-weight: 600; }
.auth-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.auth-form .field label { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.auth-form .field input, .auth-form .field textarea {
  padding: 10px 12px; font-family: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
}
.auth-form .field input:focus { outline: none; border-color: var(--accent-ink); }
.field-hint { font-size: 12px; color: var(--ink-mute); }
.auth-err, .acct-err, .add-err {
  background: #f8e6e0; color: #6b1f0a;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13px; margin-bottom: 12px;
}
.acct-ok {
  background: #e3efe1; color: #234d1a;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13px; margin-bottom: 12px;
}
.acct-pw-form .field { margin-bottom: 14px; }
.acct-pw-form .field-label {
  display: block; font-size: 12px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;
}
.acct-pw-form input {
  width: 100%; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-family: inherit; font-size: 14px;
  color: var(--ink);
}
.acct-pw-form input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; border-color: var(--accent-ink); }
.auth-submit {
  width: 100%; padding: 11px;
  background: var(--ink); color: var(--bg-card);
  border: 0; border-radius: var(--r-sm);
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; margin-top: 4px;
  transition: background 140ms ease;
}
.auth-submit:hover:not(:disabled) { background: var(--accent-ink); }
.auth-submit:disabled { opacity: 0.6; cursor: wait; }
.auth-foot { font-size: 12.5px; color: var(--ink-mute); text-align: center; margin: 14px 0 0; }

/* Account settings page */
.account-page, .add-page { max-width: 720px; margin: 0 auto; padding: 36px 32px 64px; }
.account-head, .add-head { margin-bottom: 28px; }
.account-head h1, .add-head h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px; letter-spacing: -0.015em; margin: 4px 0 8px;
}
.account-head .eyebrow, .add-head .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent-ink); margin: 0;
}
.account-head .lede, .add-head .lede { color: var(--ink-soft); font-size: 15px; margin: 0; }

.acct-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-bottom: 24px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field .field-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; letter-spacing: 0.02em; }
.field input, .field textarea {
  padding: 10px 12px; font-family: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-ink); }

.acct-public {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; margin-bottom: 22px;
}
.acct-public legend {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); padding: 0 8px;
}
.check-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.check-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent-ink); }
.slug-row {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); overflow: hidden;
}
.slug-row .slug-prefix {
  padding: 10px 12px; background: var(--line-soft);
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft);
  border-right: 1px solid var(--line); white-space: nowrap;
}
.slug-row input { border: 0; flex: 1; font-family: var(--font-mono); }
.slug-link { font-size: 13px; color: var(--accent-ink); margin-top: 8px; display: inline-block; }

.acct-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.btn-primary {
  background: var(--ink); color: var(--bg-card);
  border: 1px solid var(--ink); border-radius: var(--r-sm);
  padding: 10px 18px; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background 140ms ease;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-secondary {
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 18px; font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; text-decoration: none;
}
.btn-secondary:hover { color: var(--ink); border-color: var(--ink-mute); }

/* Add album page */
.photo-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-bottom: 28px;
}
.photo-tile { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.photo-frame {
  width: 100%; aspect-ratio: 1;
  background: var(--line-soft);
  border: 1px dashed var(--ink-mute);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-empty {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute);
}
.btn-photo {
  background: var(--bg-card); border: 1px solid var(--ink);
  color: var(--ink); border-radius: var(--r-sm);
  padding: 9px 16px; font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
}
.btn-photo:hover { background: var(--ink); color: var(--bg-card); }
.photo-status {
  font-size: 12px; color: var(--ink-mute); margin: 0;
  min-height: 1em;
}
.add-form .field { margin-bottom: 16px; }

/* ============================ BARCODE SCANNER ============================ */
.barcode-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 18px 0 8px;
}
.barcode-viewfinder {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  background: #15110f;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.barcode-viewfinder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.barcode-reticle {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 38%;
  bottom: 38%;
  border: 2px solid rgba(241, 231, 210, 0.9);
  border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.barcode-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #f1e7d2;
  background: rgba(21, 17, 15, 0.65);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barcode-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.barcode-manual {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(90, 26, 38, 0.18);
}
.barcode-manual-label {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text-muted, #6c5a4e);
}
.barcode-manual-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.barcode-manual-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid rgba(90, 26, 38, 0.25);
  background: #fdf9ef;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.barcode-manual-form button { flex: 0 0 auto; }
@media (max-width: 480px) {
  .barcode-manual-form { flex-direction: column; }
  .barcode-manual-form button { width: 100%; }
}

@media (max-width: 640px) {
  .acct-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: 1fr; }
  .account-page, .add-page { padding: 24px 18px 48px; }
  .site-header { padding: 14px 18px; gap: 10px; flex-wrap: wrap; }
  .site-nav {
    margin-left: 0;
    flex-wrap: wrap;       /* allow links + Add CTA to wrap onto a second row */
    row-gap: 4px;
    width: 100%;            /* claim the full row so Add CTA can flow under */
    justify-content: flex-start;
  }
  /* Promote the Add-album CTA at small widths so it's always tappable. */
  .site-nav a.nav-add-cta {
    margin-left: auto;      /* push to end of its row, but it'll wrap if cramped */
    order: 99;              /* always last in source order at mobile too */
  }
  .acct-name { display: none; }
  .acct-anon .acct-link { display: none; }
  .acct-anon .acct-link-text { display: none; }
}

/* Mobile floating action button: an always-visible "+" anchor to #/add so the
   user never has to hunt for the CTA, even if the nav row scrolls.
   Hidden when signed-out, when viewing a public profile, or above 640px. */
.fab-add {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-maroon, #6b1f2a);
  color: #f6efe2;
  font-size: 30px;
  line-height: 56px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
  z-index: 60;
  display: none;
  font-weight: 400;
  font-family: var(--font-display, Georgia, serif);
}
.fab-add:hover, .fab-add:focus-visible {
  background: #4f1620;
  outline: none;
  transform: translateY(-1px);
  transition: transform 120ms ease, background 120ms ease;
}
.fab-add:active { transform: translateY(0); }
@media (max-width: 640px) {
  .fab-add.fab-add-visible { display: block; }
}

/* --- Phase C: clear the shop-art SVG decorations ---
   Above 1100px the .shop-art-left/right SVGs occupy 300px on each side.
   Pull page content inward so hero text doesn't overlap them.
   Placed at end of file so it wins source-order against the base .page rule. */
@media (min-width: 1101px) {
  .page { padding-left: 320px !important; padding-right: 320px !important; max-width: 1640px !important; }
  .site-header { padding-left: 320px !important; padding-right: 320px !important; }
  .site-footer { padding-left: 320px !important; padding-right: 320px !important; }
}
@media (min-width: 1700px) {
  .page { padding-left: 340px !important; padding-right: 340px !important; max-width: 1800px !important; }
  .site-header { padding-left: 340px !important; padding-right: 340px !important; }
  .site-footer { padding-left: 340px !important; padding-right: 340px !important; }
}

/* ============================================================
   Landing page — high-end vintage aesthetic
   ============================================================ */

/* Nav hides when logged out */
.site-nav.is-hidden { display: none !important; }

/* Kill the cheesy shop-scene SVGs everywhere — the photo backdrop carries the atmosphere now. */
.shop-scene { display: none !important; }
html, body { background: transparent !important; }
body { background-image: none !important; }   /* drop the body paper grain (we add a fresh one over the photo) */
.site-header {
  background: linear-gradient(180deg, rgba(244,239,230,0.94) 0%, rgba(244,239,230,0.82) 70%, rgba(244,239,230,0) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: none;
}
.site-footer { background: transparent; }
.page { background: transparent; }

/* Hero photographic backdrop — the wall photo backs the landing, the turntable photo backs the vault. */
.hero-bg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
body.logged-out .hero-bg-landing { display: block; }
body:not(.logged-out) .hero-bg-vault { display: block; }
.hero-bg picture,
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-bg img {
  object-fit: cover;
  /* Slightly desaturate + lift midtones so it sits behind type without competing */
  filter: contrast(0.95) saturate(0.85);
}
/* Warm cream veil — fades the photo so type stays readable but atmosphere comes through.
   Landing variant is asymmetric (heavier on the headline side so the lede reads,
   lighter on the right so the record wall is unmistakable). Bottom still fades to
   cream so the photo dissolves before the footer. */
.hero-bg-landing .hero-bg-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(244, 239, 230, 0.78) 0%, rgba(244, 239, 230, 0.66) 38%, rgba(244, 239, 230, 0.38) 70%, rgba(244, 239, 230, 0.28) 100%),
    linear-gradient(180deg, rgba(244, 239, 230, 0.05) 0%, rgba(244, 239, 230, 0) 35%, rgba(244, 239, 230, 0.45) 78%, rgba(244, 239, 230, 0.90) 100%);
}
/* Vault variant: the turntable should be clearly visible — just softened
   enough that album covers and metadata stay legible on top of it.
   Lighter at the top (where the hero/headline sits) so the photo reads,
   denser toward the middle where the cards stack. */
.hero-bg-vault .hero-bg-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(244, 239, 230, 0.55) 0%,
      rgba(244, 239, 230, 0.65) 30%,
      rgba(244, 239, 230, 0.78) 60%,
      rgba(244, 239, 230, 0.88) 100%);
}
.hero-bg-vault img {
  filter: contrast(1.0) saturate(0.85) brightness(1.0);
}
/* Subtle paper grain — SVG noise turbulence, ~4% opacity */
.hero-bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Landing layout */
.landing {
  padding: 12px 0 80px;
  position: relative;
}

/* Hero: two-column on desktop (copy left, large LP mark right), single column on mobile */
.land-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 0 96px;
  text-align: left;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}
.land-hero-copy {
  min-width: 0;
}
.land-hero-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
.land-mark-svg {
  width: 100%;
  height: auto;
  max-width: 440px;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(20, 8, 12, 0.28)) drop-shadow(0 6px 14px rgba(20, 8, 12, 0.18));
}
@media (max-width: 900px) {
  .land-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 0 64px;
    max-width: 760px;
  }
  .land-hero-mark {
    order: -1;
  }
  .land-mark-svg {
    max-width: 260px;
  }
}

.land-hero-rule {
  width: 56px;
  height: 1px;
  background: var(--ink);
  margin-bottom: 22px;
  opacity: 0.8;
}

.land-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.land-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 28px;
  font-variation-settings: "opsz" 144;
}
.land-title-line {
  display: block;
}
.land-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-ink);
}

.land-lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 520px;
  margin: 0 0 36px;
  font-variation-settings: "opsz" 18;
}

.land-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.land-cta {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 0;            /* sharp corners — feels printed */
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms, transform 80ms;
  line-height: 1;
}
.land-cta:active { transform: translateY(1px); }
.land-cta.primary {
  background: var(--ink);
  color: var(--bg-card);
  border-color: var(--ink);
}
.land-cta.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.land-cta.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.land-cta.ghost:hover { background: var(--ink); color: var(--bg-card); }

.land-foot-note {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin: 10px 0 0;
  font-family: var(--font-body);
}

/* Feature triad — magazine columns with big Fraunces numerals */
.land-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 0;
  border-top: 1px solid rgba(26, 23, 20, 0.12);
  border-bottom: 1px solid rgba(26, 23, 20, 0.12);
}
@media (max-width: 900px) {
  .land-features { grid-template-columns: 1fr; gap: 40px; padding: 56px 0; }
}

.land-feature {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.land-feature-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: 54px;
  line-height: 1;
  color: var(--accent);
  margin: 0 0 18px;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.02em;
}
.land-feature h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink);
  font-variation-settings: "opsz" 36;
}
.land-feature p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

/* Closing rule — centered editorial pull-quote */
.land-rule {
  text-align: center;
  padding: 96px 24px 32px;
  max-width: 720px;
  margin: 0 auto;
}
.land-rule-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--ink);
  font-variation-settings: "opsz" 96;
}
.land-rule-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-ink);
}
.land-rule-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 auto 32px;
  max-width: 540px;
}
.land-rule-cta { padding: 16px 32px; font-size: 13px; }

/* ============================================================
   Brand mark — Fraunces italic VV stamp (v4)
   ============================================================ */
.brand-mark { color: var(--ink); display: block; }
.brand { gap: 12px; }
.brand-name {
  letter-spacing: 0.01em;
}

/* ============================================================
   Admin — owner-only console
   ============================================================ */
.admin-wrap {
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 0 64px;
}
.admin-eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--ink-muted, #5f5448);
  margin-bottom: 8px;
}
.admin-title {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.05;
  margin: 0 0 6px;
  color: var(--ink);
}
.admin-sub {
  font-family: var(--font-body, "Inter", sans-serif);
  color: var(--ink-muted, #5f5448);
  margin: 0 0 32px;
  max-width: 560px;
}
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}
.admin-stat {
  background: rgba(255, 252, 246, 0.85);
  border: 1px solid rgba(26, 23, 20, 0.08);
  border-radius: 4px;
  padding: 20px 22px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.admin-stat-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  color: var(--ink-muted, #5f5448);
  margin-bottom: 8px;
}
.admin-stat-value {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
}
.admin-stat-meta {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 12px;
  color: var(--ink-muted, #5f5448);
  margin-top: 6px;
}

.admin-section-title {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  margin: 0 0 14px;
  color: var(--ink);
}
.admin-table-wrap {
  background: rgba(255, 252, 246, 0.85);
  border: 1px solid rgba(26, 23, 20, 0.08);
  border-radius: 4px;
  overflow-x: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 13px;
  min-width: 920px;
}
.admin-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  color: var(--ink-muted, #5f5448);
  padding: 12px 12px;
  border-bottom: 1px solid rgba(26, 23, 20, 0.08);
  background: rgba(26, 23, 20, 0.025);
  white-space: nowrap;
}
.admin-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(26, 23, 20, 0.05);
  color: var(--ink);
  vertical-align: middle;
  white-space: nowrap;
}
.admin-table td:nth-child(2) { white-space: normal; max-width: 180px; }
.admin-table td:nth-child(3) { font-size: 12.5px; color: var(--ink-muted, #5f5448); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(184, 67, 31, 0.03); }
.admin-table td.num { font-variant-numeric: tabular-nums; color: var(--ink-muted, #5f5448); }
.admin-role {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 2px;
  background: rgba(26, 23, 20, 0.08);
  color: var(--ink);
}
.admin-role[data-role="owner"] {
  background: #1a1714;
  color: #fbf7ef;
}
.admin-role[data-role="admin"] {
  background: #b8431f;
  color: #fbf7ef;
}

/* ----- admin: online status pill + last seen ----- */
.admin-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted, #5f5448);
  white-space: nowrap;
}
.admin-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(26, 23, 20, 0.22);
  box-shadow: 0 0 0 2px rgba(26, 23, 20, 0.04);
  flex-shrink: 0;
}
.admin-status.is-online {
  color: #2f7a3b;
  font-weight: 600;
}
.admin-status.is-online .admin-status-dot {
  background: #3aa14b;
  box-shadow: 0 0 0 3px rgba(58, 161, 75, 0.18);
  animation: admin-status-pulse 2.4s ease-in-out infinite;
}
@keyframes admin-status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(58, 161, 75, 0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(58, 161, 75, 0.06); }
}
.admin-lastseen {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-muted, #5f5448);
  white-space: nowrap;
}

.admin-empty {
  padding: 48px;
  text-align: center;
  color: var(--ink-muted, #5f5448);
  font-style: italic;
}

/* ----- admin: per-row plan select + delete button ----- */
.admin-plan-select {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  padding: 4px 22px 4px 8px;
  border: 1px solid rgba(26, 23, 20, 0.18);
  border-radius: 3px;
  background: #fbf7ef;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%235f5448' stroke-width='1.4' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.admin-plan-select:hover { border-color: rgba(184, 67, 31, 0.5); }
.admin-plan-select:focus {
  outline: none;
  border-color: #b8431f;
  box-shadow: 0 0 0 2px rgba(184, 67, 31, 0.15);
}
.admin-plan-select:disabled { opacity: 0.5; cursor: wait; }

.admin-actions-cell { text-align: right; }
.admin-delete-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border: 1px solid rgba(26, 23, 20, 0.18);
  border-radius: 2px;
  background: transparent;
  color: var(--ink-muted, #5f5448);
  cursor: pointer;
  transition: all 0.15s ease;
}
.admin-delete-btn:hover {
  background: #7a2417;
  border-color: #7a2417;
  color: #fbf7ef;
}
.admin-delete-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.admin-self-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted, #5f5448);
  opacity: 0.6;
}

/* =====================================================================
   THE CONSOLE — unified frame around Now Spinning, Next Spin,
   Vault Paths, and Latest Listens. Replaces the old stacked rows.
   ===================================================================== */
.console {
  margin: 18px 0 32px;
  padding: 18px 18px 20px;
  background:
    linear-gradient(180deg, rgba(255,253,247,0.65) 0%, rgba(251,247,239,0.45) 100%);
  border: 1px solid rgba(26, 23, 20, 0.10);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 8px 24px -16px rgba(26, 23, 20, 0.18);
  position: relative;
}
.console::before {
  /* faint inner ruled line evoking a mixer's panel */
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(26, 23, 20, 0.07);
  border-radius: 4px;
  pointer-events: none;
}
.console-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute, #5f5448);
  position: relative;
  z-index: 1;
}
.console-mark {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent, #b8431f);
  box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18);
  animation: console-pulse 2.4s ease-in-out infinite;
}
@keyframes console-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(184, 67, 31, 0.06); }
}
.console-kicker { color: var(--ink, #1a1714); font-weight: 600; letter-spacing: 0.22em; }
.console-sep    { opacity: 0.5; }
.console-tag    { font-style: italic; text-transform: none; letter-spacing: 0; font-family: 'Fraunces', Georgia, serif; font-size: 13px; color: var(--ink-mute, #5f5448); }

.console-grid {
  display: grid;
  /* Two columns: a wide "now" zone on the left (Now Spinning on top,
     Next Spin + Vault Paths in a row underneath) and the Latest Listens
     timeline as a tall right column. */
  grid-template-columns: minmax(0, 1fr) 250px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "anchor   listens"
    "sublane  listens";
  gap: 16px;
  position: relative;
  z-index: 1;
}
.console-cell-anchor  { grid-area: anchor; }
.console-cell-listens { grid-area: listens; }

/* The middle sub-lane that holds Next Spin and Vault Paths side-by-side */
.console-sublane {
  grid-area: sublane;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.console-cell-next,
.console-cell-paths { min-width: 0; }

/* Margin reset on existing teaser cards so they sit flush in console cells */
.console-cell .ns-teaser,
.console-cell .vp-teaser,
.console-cell .now-spinning-card {
  margin: 0;
  height: 100%;
}

/* When Next Spin / Vault Paths are in the narrow sublane, switch the grid
   to a single column so cover stacks above the body (no word-by-word wrap). */
.console-cell-next  .ns-teaser-row,
.console-cell-paths .vp-teaser-row {
  grid-template-columns: 1fr !important;
  gap: 12px;
  align-items: start;
}
.console-cell-next  .ns-teaser-cover,
.console-cell-paths .vp-teaser-cover {
  width: 84px !important;
  height: 84px !important;
}
.console-cell-next  .ns-teaser-cover img,
.console-cell-paths .vp-teaser-cover img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Trim heavy padding inside teasers so they fit the narrow column */
.console-cell-next  .ns-teaser,
.console-cell-paths .vp-teaser {
  padding: 16px 14px;
}
/* Smaller title/lede sizing in sublane teasers */
.console-cell-next  .ns-teaser-title,
.console-cell-paths .vp-teaser-title {
  font-size: 19px;
  line-height: 1.2;
}
.console-cell-next  .ns-teaser-reason,
.console-cell-paths .vp-teaser-reason {
  font-size: 12.5px;
  line-height: 1.45;
}
/* Buttons can wrap and shrink in narrow cells */
.console-cell-next  .ns-teaser-actions,
.console-cell-paths .vp-teaser-actions {
  flex-wrap: wrap;
  gap: 8px;
}
.console-cell-next  .ns-btn,
.console-cell-paths .vp-btn {
  font-size: 10px;
  padding: 6px 10px;
}
/* Tag chip can wrap, count pill moves below */
.console-cell-next  .ns-teaser-eyebrow,
.console-cell-paths .vp-teaser-eyebrow {
  flex-wrap: wrap;
  gap: 4px 6px;
}
.console-cell-paths .vp-teaser-count {
  margin-left: 0;
}

/* Soft seam between the now-lane and the listens column */
.console-cell-listens { border-left: 1px solid rgba(26, 23, 20, 0.08); padding-left: 16px; }

/* ---- Latest Listens vertical timeline (right column of console) ---- */
.ll-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.ll-col-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px 4px;
}
.ll-col-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink, #1a1714);
}
.ll-col-tag {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-mute, #5f5448);
}
.ll-col-loading,
.ll-col-empty {
  margin: 0;
  padding: 6px 2px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-mute, #5f5448);
}
.ll-stack {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
/* Vertical timeline rail */
.ll-stack::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(184, 67, 31, 0.6) 0%,
    rgba(26, 23, 20, 0.12) 35%,
    rgba(26, 23, 20, 0.05) 100%);
}
.ll-stack-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 4px 6px 4px 0;
  border-radius: 3px;
  position: relative;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ll-stack-row:hover {
  background: rgba(184, 67, 31, 0.05);
  transform: translateX(1px);
}
.ll-stack-tick {
  position: absolute;
  left: -12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fbf7ef;
  border: 1px solid rgba(26, 23, 20, 0.35);
  transform: translateY(-50%);
}
.ll-stack-row.is-latest .ll-stack-tick {
  background: var(--accent, #b8431f);
  border-color: var(--accent, #b8431f);
  box-shadow: 0 0 0 2px rgba(184, 67, 31, 0.18);
}
.ll-stack-thumb {
  width: 36px; height: 36px;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(26, 23, 20, 0.06);
  flex-shrink: 0;
}
.ll-stack-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ll-stack-dot {
  width: 100%; height: 100%;
  display: block;
  background: radial-gradient(circle, rgba(26,23,20,0.18) 0%, rgba(26,23,20,0.06) 70%);
}
.ll-stack-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.ll-stack-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink, #1a1714);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ll-stack-artist {
  font-size: 11.5px;
  color: var(--ink-mute, #5f5448);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ll-stack-when {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute, #5f5448);
  opacity: 0.75;
  margin-top: 1px;
}
.ll-col-foot {
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 2px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-ink, #7a2417);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.ll-col-foot:hover {
  color: var(--accent, #b8431f);
  border-bottom-color: rgba(184, 67, 31, 0.45);
}

/* ---- Mobile: collapse console to single column ---- */
@media (max-width: 980px) {
  .console { padding: 14px 14px 16px; }
  .console-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "anchor"
      "sublane"
      "listens";
    gap: 12px;
  }
  .console-sublane { grid-template-columns: 1fr; }
  .console-cell-listens {
    border-left: none;
    border-top: 1px solid rgba(26, 23, 20, 0.07);
    padding-left: 0;
    padding-top: 12px;
  }
  /* On mobile, restore the original side-by-side cover+body for the teasers */
  .console-cell-next  .ns-teaser-row,
  .console-cell-paths .vp-teaser-row {
    flex-direction: row;
    align-items: center;
  }
}

/* ---- The Console as its own page: larger frame, taller listens lane ---- */
.console-page {
  margin: 22px 0 48px;
  padding: 24px 24px 28px;
}
.console-grid-page {
  /* Same two-column shape, but with a wider Latest Listens lane since it now
     shows the last 10 spins instead of 5. */
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
}
.console-grid-page .console-sublane { gap: 18px; }
.console-grid-page .console-cell-listens .ll-stack {
  /* Roomier vertical timeline for 10 entries */
  max-height: none;
}
.hero-console h1 {
  /* Slightly tighter hero so the Console gets the visual weight */
  margin-bottom: 4px;
}
.hero-console .lede { margin-top: 4px; }
@media (max-width: 980px) {
  .console-page { padding: 16px 14px 18px; }
  .console-grid-page { grid-template-columns: 1fr; gap: 14px; }
}

/* Vault Paths: 2-col variant (Latest Listens lives in The Console now) */
.vp-layout.vp-layout-2col {
  grid-template-columns: minmax(0, 1fr) 260px;
}
@media (max-width: 980px) {
  .vp-layout.vp-layout-2col { grid-template-columns: 1fr; }
}

/* --- Top-nav "Add album" CTA (tasteful moss accent) --- */
.site-nav a.nav-add-cta { white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--accent-moss);
  border-radius: 999px;
  color: var(--accent-moss-ink);
  background: rgba(74, 122, 71, 0.06);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.site-nav a.nav-add-cta span[aria-hidden="true"] {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-moss-deep);
}
.site-nav a.nav-add-cta:hover {
  background: rgba(74, 122, 71, 0.14);
  border-color: var(--accent-moss-deep);
  color: var(--accent-moss-ink);
}
.site-nav a.nav-add-cta.active::after { display: none; }
@media (max-width: 720px) {
  .site-nav a.nav-add-cta { white-space: nowrap; margin-left: 6px; padding: 5px 10px 5px 8px; font-size: 12px; }
}

/* ===== Beta-full waitlist panel (auth modal swap) ===== */
.beta-full { padding: 32px 28px 28px; text-align: left; }
.beta-full-eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px;
  color: var(--ink-mute); font-weight: 600; margin: 0 0 8px;
}
.beta-full-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: 24px; line-height: 1.2;
  color: var(--ink); margin: 0 0 12px;
}
.beta-full-lede {
  color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; margin: 0 0 18px;
}
.beta-full-form .field { margin-bottom: 12px; }
.beta-full-actions { margin-top: 8px; }

/* ===== Admin: Beta access section ===== */
.admin-beta {
  margin: 0 0 28px;
  background: var(--surface, #fff);
  border: 1px solid var(--rule, #e6e1d8);
  border-radius: 12px;
  padding: 18px 20px;
}
.admin-beta-grid {
  display: grid; gap: 24px;
  /* Right column gets more room — it hosts the waitlist table with action buttons. */
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr);
}
@media (max-width: 800px) {
  .admin-beta-grid { grid-template-columns: 1fr; }
}
/* Grid children with tables need min-width:0 to prevent intrinsic table width
   from forcing the column wider than the card. */
.admin-beta-grid > .admin-beta-form,
.admin-beta-grid > .admin-beta-waitlist { min-width: 0; }
.admin-beta-waitlist { overflow-x: auto; }
.admin-wl-table { width: 100%; table-layout: auto; }
.admin-wl-actions { white-space: nowrap; text-align: right; }
.admin-wl-actions .admin-btn { margin-left: 4px; }
.admin-beta-label {
  display: block; font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-mute); margin: 0 0 4px;
}
.admin-beta-hint {
  color: var(--ink-soft); font-size: 13px; line-height: 1.5; margin: 0 0 12px;
}
.admin-beta-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.admin-beta-row input[type="number"] {
  width: 110px; padding: 8px 10px;
  border: 1px solid var(--rule, #d8d2c4); border-radius: 6px;
  font: 600 16px 'Inter', system-ui, sans-serif; color: var(--ink);
  background: #fcfbf7;
}
.admin-beta-row input[type="number"]:focus {
  outline: 2px solid var(--accent-moss, #4f6f44); outline-offset: 1px;
  border-color: var(--accent-moss, #4f6f44);
}
.admin-beta-save {
  appearance: none; cursor: pointer;
  background: var(--accent-moss, #4f6f44); color: #fff;
  border: 0; border-radius: 6px; padding: 9px 16px;
  font: 600 13px 'Inter', system-ui, sans-serif;
  letter-spacing: 0.02em;
}
.admin-beta-save:hover { background: var(--accent-moss-deep, #3e5836); }
.admin-beta-save:disabled { opacity: 0.6; cursor: not-allowed; }
.admin-beta-status { font-size: 13px; color: var(--ink-soft); }
.admin-beta-status.is-ok    { color: var(--accent-moss-deep, #3e5836); font-weight: 600; }
.admin-beta-status.is-error { color: #a8462e; font-weight: 600; }
.admin-beta-meta {
  margin: 14px 0 0; font-size: 13px; color: var(--ink-soft);
}
.admin-beta-meta strong { color: var(--ink); }
.admin-beta-wl-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px; font-weight: 700; color: var(--ink);
  margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px;
}
.admin-beta-wl-count {
  display: inline-block; min-width: 24px; padding: 2px 8px;
  background: var(--accent-moss, #4f6f44); color: #fff;
  border-radius: 999px; font: 600 12px 'Inter', sans-serif;
  letter-spacing: 0.02em; text-align: center;
}
.admin-table-compact { font-size: 13px; }
.admin-table-compact th, .admin-table-compact td { padding: 6px 10px; }

/* === Beta pill (header) === */
.beta-pill {
  display: inline-block; margin-left: 10px;
  padding: 2px 9px; vertical-align: middle;
  background: var(--accent-moss, #4f6f44); color: #fff;
  border-radius: 999px;
  font: 600 10px/1.5 'Inter', sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  user-select: none; cursor: default;
}

/* === Add Album: intake tabs (Photo / Manual) === */
.intake-tabs {
  display: flex; gap: 0; margin: 0 0 22px;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,0.08));
}
.intake-tab {
  appearance: none; background: none; border: none;
  padding: 10px 16px; cursor: pointer;
  font: 500 14px 'Inter', sans-serif;
  color: var(--ink-soft, #6a6a6a);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.intake-tab.is-active { color: var(--ink, #1a1a1a); border-bottom-color: var(--accent-moss, #4f6f44); }
.intake-tab:hover:not(.is-active) { color: var(--ink, #1a1a1a); }

.intake-pane[hidden] { display: none; }

/* "Identify with AI" CTA row */
.identify-row {
  display: flex; gap: 12px; align-items: center;
  margin: 20px 0 24px; padding: 16px;
  background: rgba(79, 111, 68, 0.04);
  border: 1px solid rgba(79, 111, 68, 0.16);
  border-radius: 8px;
}
.identify-row .identify-copy { flex: 1; font: 400 13px/1.5 'Inter', sans-serif; color: var(--ink-soft, #6a6a6a); }
.identify-row .identify-copy strong { color: var(--ink, #1a1a1a); font-weight: 600; }
.btn-identify {
  appearance: none; cursor: pointer;
  background: var(--accent-moss, #4f6f44); color: #fff;
  border: none; border-radius: 6px;
  padding: 10px 18px;
  font: 600 13px 'Inter', sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.btn-identify:hover:not(:disabled) { background: #3f5a36; }
.btn-identify:disabled { opacity: 0.5; cursor: not-allowed; }

/* Vision spinner / status */
.vision-status {
  margin: 12px 0; padding: 14px 16px;
  background: rgba(0,0,0,0.03); border-radius: 6px;
  font: 400 13px 'Inter', sans-serif; color: var(--ink-soft);
  display: flex; align-items: center; gap: 10px;
}
.vision-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(79, 111, 68, 0.2);
  border-top-color: var(--accent-moss, #4f6f44);
  border-radius: 50%;
  animation: vv-spin 0.8s linear infinite;
}
@keyframes vv-spin { to { transform: rotate(360deg); } }

/* Track list editor inside add form */
.track-editor { margin-top: 6px; }
.track-row {
  display: grid; grid-template-columns: 48px 1fr 80px 32px;
  gap: 8px; align-items: center; margin-bottom: 6px;
}
.track-row input {
  padding: 7px 10px; border: 1px solid var(--rule, rgba(0,0,0,0.12));
  border-radius: 4px; font: 400 13px 'Inter', sans-serif;
}
.track-row .track-num { text-align: center; }
.btn-track-remove {
  appearance: none; cursor: pointer;
  background: none; border: 1px solid var(--rule, rgba(0,0,0,0.12));
  border-radius: 4px; width: 28px; height: 28px;
  color: var(--ink-soft); font-size: 16px; line-height: 1;
}
.btn-track-remove:hover { color: #c44; border-color: #c44; }
.btn-track-add {
  appearance: none; cursor: pointer;
  background: none; border: 1px dashed var(--rule, rgba(0,0,0,0.18));
  border-radius: 4px; padding: 7px 14px;
  font: 500 12px 'Inter', sans-serif;
  color: var(--ink-soft);
  margin-top: 4px;
}
.btn-track-add:hover { color: var(--ink); border-color: var(--ink-soft); }

/* Edit / Delete buttons on album detail */
.album-action.album-action-edit { /* uses default album-action style */ }
.album-action.album-action-danger {
  color: #b03030; border-color: rgba(176, 48, 48, 0.3);
}
.album-action.album-action-danger:hover { background: #b03030; color: #fff; border-color: #b03030; }

/* === Community page === */
.community {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}
.community-hero {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,0.12));
}
.community-kicker {
  font: 500 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  margin: 0 0 14px;
}
.community-title {
  font: 600 44px/1.05 'Cormorant Garamond', 'Georgia', serif;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ink, #1c1c1a);
}
.community-lede {
  font: 400 16px/1.55 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0;
  max-width: 640px;
}
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.community-loading, .community-empty {
  grid-column: 1 / -1;
  padding: 32px 0;
  font: 400 14px/1.5 'Inter', sans-serif;
}
.community-card {
  display: flex;
  gap: 16px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  align-items: flex-start;
}
.community-card:hover {
  border-color: var(--ink-soft, rgba(0,0,0,0.35));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.community-cover {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 3px;
  overflow: hidden;
  background: #f4f3ef;
  border: 1px solid rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
}
.community-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.community-cover-empty {
  color: var(--ink-soft, #9a9994);
}
.community-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.community-card-kicker {
  font: 500 10.5px/1.35 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft, #7a7a75);
  margin: 0;
  /* Allow up to two lines so longer collection names ('The Buchanan Vinyl
     Collection') aren't truncated mid-word. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.community-card-name {
  font: 600 20px/1.2 'Cormorant Garamond', 'Georgia', serif;
  margin: 2px 0 4px;
  color: var(--ink, #1c1c1a);
  letter-spacing: -0.005em;
}
.community-card-meta {
  font: 400 12.5px/1.4 'Inter', sans-serif;
  color: var(--ink-soft, #6e6e69);
  margin: 0;
}
.community-card-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--rule, rgba(0,0,0,0.10));
  font: 500 13px/1 'Inter', sans-serif;
}
.community-card-count {
  color: var(--ink, #1c1c1a);
  letter-spacing: 0.01em;
}
.community-card-arrow {
  font-size: 16px;
  color: var(--accent, #4a7257);
  transition: transform 160ms ease;
}
.community-card:hover .community-card-arrow { transform: translateX(3px); }

@media (max-width: 640px) {
  .community { padding: 32px 18px 60px; }
  .community-title { font-size: 34px; }
  .community-grid { grid-template-columns: 1fr; }
}

/* Compact nav for anonymous visitors — keeps the Community link visible. */
.site-nav.nav-public-only a[data-nav].is-hidden { display: none; }

/* ============================================================
   Bulk Import — Add Album → "Bulk import" tab
   Editorial / collector aesthetic, matches .admin-beta + .rarity-panel
   ============================================================ */
.bulk-intro {
  margin: 4px 0 22px;
}
.bulk-title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink, #1d1b16);
  margin: 0 0 8px;
}
.bulk-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft, #58544b);
  margin: 0 0 10px;
  max-width: 62ch;
}
.bulk-lede strong { color: var(--ink, #1d1b16); font-weight: 600; }
.bulk-lede-mini {
  font-size: 13.5px;
  color: var(--ink-mute, #7a766d);
}

/* Drop zone */
.bulk-drop {
  border: 2px dashed var(--rule, #d8d2c4);
  border-radius: 14px;
  background: var(--surface-2, #faf7f0);
  padding: 44px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
  outline: none;
}
.bulk-drop:hover,
.bulk-drop:focus-visible {
  border-color: var(--accent, #4a7257);
  background: #f5f1e5;
}
.bulk-drop.is-over {
  border-color: var(--accent, #4a7257);
  background: #eef3ec;
  transform: scale(1.01);
}
.bulk-drop-icon {
  font-size: 38px;
  line-height: 1;
  color: var(--accent, #4a7257);
  margin-bottom: 10px;
}
.bulk-drop-title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #1d1b16);
  margin-bottom: 4px;
}
.bulk-drop-sub {
  font-size: 13.5px;
  color: var(--ink-mute, #7a766d);
}

/* Status line */
.bulk-status {
  margin: 14px 2px 0;
  font-size: 14px;
  color: var(--ink-soft, #58544b);
  min-height: 1.2em;
}
.bulk-status.is-err {
  color: #b03a2e;
  font-weight: 500;
}

/* Each step section */
.bulk-step {
  margin: 28px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--rule, #e6e1d8);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.bulk-step-title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #1d1b16);
  margin: 0 0 4px;
}
.bulk-step-sub {
  font-size: 13.5px;
  color: var(--ink-mute, #7a766d);
  margin: 0 0 14px;
  line-height: 1.5;
}
.bulk-step-commit {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Column mapping table */
.bulk-map-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.bulk-map-table th,
.bulk-map-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule, #ece7da);
  text-align: left;
  vertical-align: middle;
}
.bulk-map-table thead th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute, #7a766d);
  font-weight: 600;
  border-bottom: 1.5px solid var(--rule, #d8d2c4);
}
.bulk-map-name {
  font-weight: 600;
  color: var(--ink, #1d1b16);
  font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
  font-size: 13px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-map-sample {
  color: var(--ink-mute, #7a766d);
  font-size: 13px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-map-select {
  width: 100%;
  max-width: 240px;
  padding: 6px 10px;
  border: 1px solid var(--rule, #d8d2c4);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--ink, #1d1b16);
  font: inherit;
  font-size: 13.5px;
}
.bulk-map-select:focus {
  outline: none;
  border-color: var(--accent, #4a7257);
  box-shadow: 0 0 0 3px rgba(74,114,87,0.18);
}

/* Data preview table */
.bulk-preview-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule, #ece7da);
  border-radius: 8px;
  background: var(--surface-2, #faf7f0);
}
.bulk-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
  min-width: 100%;
}
.bulk-preview-table th,
.bulk-preview-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--rule, #ece7da);
  text-align: left;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bulk-preview-table thead th {
  background: #f1ece0;
  font-weight: 600;
  color: var(--ink, #1d1b16);
  position: sticky;
  top: 0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bulk-preview-table tbody tr:last-child td { border-bottom: 0; }

/* Commit button + hint */
.bulk-commit-btn {
  font-size: 15px;
  padding: 10px 20px;
}
.bulk-commit-hint {
  font-size: 13px;
  color: var(--ink-mute, #7a766d);
  flex: 1 1 240px;
}

/* Success celebration */
.bulk-success {
  margin: 28px 0 0;
  padding: 32px 24px;
  border: 1px solid var(--accent-soft, #cfded4);
  background: linear-gradient(180deg, #f3f8f4 0%, #faf7f0 100%);
  border-radius: 14px;
  text-align: center;
}
.bulk-success-num {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent, #4a7257);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.bulk-success-label {
  font-size: 16px;
  color: var(--ink, #1d1b16);
  font-weight: 500;
  margin-bottom: 12px;
}
.bulk-success-sub {
  font-size: 13.5px;
  color: var(--ink-mute, #7a766d);
  margin: 0 0 18px;
  line-height: 1.55;
}
.bulk-success-actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Errors disclosure */
.bulk-errs {
  margin: 12px auto 18px;
  max-width: 560px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--rule, #e6e1d8);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
}
.bulk-errs > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink, #1d1b16);
  list-style: none;
}
.bulk-errs > summary::-webkit-details-marker { display: none; }
.bulk-errs > summary::before {
  content: '▸ ';
  color: var(--ink-mute, #7a766d);
  font-size: 12px;
}
.bulk-errs[open] > summary::before { content: '▾ '; }
.bulk-errs ul {
  margin: 10px 0 4px;
  padding-left: 18px;
  color: var(--ink-soft, #58544b);
  line-height: 1.5;
}
.bulk-errs li { margin: 2px 0; }

@media (max-width: 640px) {
  .bulk-title { font-size: 24px; }
  .bulk-drop { padding: 32px 16px; }
  .bulk-success-num { font-size: 48px; }
  .bulk-map-name, .bulk-map-sample { max-width: 120px; }
}

/* ---------- Discogs import (Add Album → From Discogs tab) ---------- */

.discogs-conn {
  margin: 16px 0;
}
.discogs-conn-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--rule, #e5e2d8);
  background: #f7f4ec;
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
}
.discogs-conn-card strong {
  color: var(--ink, #1d1b16);
  font-weight: 600;
  font-size: 14px;
}
.discogs-conn-sub {
  color: var(--muted, #6b6657);
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.discogs-form {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}
.discogs-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.discogs-token-saved {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: -4px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.link-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent-ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-button:hover { color: var(--ink); }

/* Preview summary stats — horizontal 4-cell grid */
.dg-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0 8px;
}
.dg-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  border: 1px solid var(--rule, #e5e2d8);
  background: #fbf9f3;
  border-radius: 8px;
  text-align: center;
}
.dg-summary-stat strong {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--ink, #1d1b16);
  line-height: 1;
  letter-spacing: -0.01em;
}
.dg-summary-stat span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--muted, #6b6657);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dg-summary-stat.dg-stat-new {
  background: #f0f5ee;
  border-color: #cdd9c5;
}
.dg-summary-stat.dg-stat-new strong { color: #3d5a30; }

.dg-truncated {
  margin: 10px 0;
  padding: 10px 12px;
  background: #fff7e6;
  border: 1px solid #ead8b0;
  border-radius: 6px;
  color: #6b5a28;
  font-size: 13px;
}

.dg-nothing {
  margin: 14px 0;
  padding: 14px;
  background: #f7f4ec;
  border: 1px dashed var(--rule, #e5e2d8);
  border-radius: 8px;
  color: var(--muted, #6b6657);
  text-align: center;
  font-style: italic;
}

.dg-import-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 4px;
  padding: 14px;
  background: #f0f5ee;
  border: 1px solid #cdd9c5;
  border-radius: 8px;
}
.dg-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink, #1d1b16);
  cursor: pointer;
}
.dg-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #3d5a30;
}

.dg-details {
  margin: 14px 0;
  border: 1px solid var(--rule, #e5e2d8);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.dg-details > summary {
  padding: 12px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1d1b16);
  cursor: pointer;
  background: #f7f4ec;
  list-style: none;
  user-select: none;
}
.dg-details > summary::-webkit-details-marker { display: none; }
.dg-details > summary::before {
  content: '▸';
  display: inline-block;
  width: 14px;
  color: var(--muted, #6b6657);
  transition: transform 0.15s ease;
}
.dg-details[open] > summary::before { transform: rotate(90deg); }

.dg-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
}
.dg-table thead th {
  text-align: left;
  padding: 10px 12px;
  background: #fbf9f3;
  border-bottom: 1px solid var(--rule, #e5e2d8);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted, #6b6657);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dg-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1eee4;
  color: var(--ink, #1d1b16);
  vertical-align: top;
}
.dg-table tbody tr:last-child td { border-bottom: 0; }
.dg-cell-artist { font-weight: 500; }
.dg-cell-year, .dg-cell-reason {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted, #6b6657);
}

@media (max-width: 640px) {
  .dg-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .dg-summary-stat strong { font-size: 22px; }
  .dg-table { font-size: 12px; }
  .dg-table thead th, .dg-table tbody td { padding: 8px 10px; }
}

/* ---------- Discogs enrichment progress strip (library hero) ---------- */
.discogs-strip {
  margin: 6px 0 18px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid rgba(90, 26, 38, 0.22);
  border-left: 3px solid #5a1a26;
  border-radius: 6px;
}
.discogs-strip-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.discogs-strip-meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.discogs-strip-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #5a1a26; font-weight: 700;
}
.discogs-strip-count {
  font-size: 14px; color: var(--ink, #1d1b16); font-weight: 500;
}
.discogs-strip-rem {
  font-size: 11px; color: #5a1a26; font-weight: 600;
  padding: 2px 8px; background: rgba(90, 26, 38, 0.08); border-radius: 3px;
}
.discogs-strip-done {
  font-size: 11px; color: #3d5a30; font-weight: 600;
  padding: 2px 8px; background: rgba(61, 90, 48, 0.10); border-radius: 3px;
}
.discogs-strip-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.discogs-strip-sync {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--ink-soft, #6b6657);
}
.discogs-strip-btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
  background: #5a1a26; color: #fbf7ef;
  border: 1px solid #5a1a26;
  padding: 7px 14px; border-radius: 4px; cursor: pointer;
  text-decoration: none; display: inline-block;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.discogs-strip-btn:hover { background: #45131c; border-color: #45131c; }
.discogs-strip-bar {
  margin-top: 10px; height: 4px;
  background: rgba(90, 26, 38, 0.10); border-radius: 2px; overflow: hidden;
}
.discogs-strip-bar-fill {
  height: 100%; background: #5a1a26;
  transition: width 0.4s ease;
}

/* ---------- Community: Most-held albums widget ---------- */
.popular-albums {
  margin: 0 0 44px;
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,0.10));
}
.popular-albums-head { margin-bottom: 22px; }
.popular-albums-kicker {
  font: 500 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  margin: 0 0 12px;
}
.popular-albums-title {
  font: 600 28px/1.1 'Cormorant Garamond', 'Georgia', serif;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink, #1c1c1a);
}
.popular-albums-sub {
  font: 400 14px/1.55 'Inter', sans-serif;
  color: var(--ink-soft, #6b6b66);
  margin: 0;
  max-width: 560px;
}
.popular-albums-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.popular-albums-card {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 6px;
  align-items: flex-start;
}
.popular-albums-rank {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5a1a26;
  color: #fbf7ef;
  font: 600 13px/1 'Inter', sans-serif;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.popular-albums-cover {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  background: #f1eee4;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popular-albums-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.popular-albums-card-novert {
  color: var(--ink-soft, #9a9a92);
  font-size: 24px;
}
.popular-albums-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.popular-albums-artist {
  font: 500 11px/1.2 'Inter', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popular-albums-album {
  font: 600 16px/1.25 'Cormorant Garamond', 'Georgia', serif;
  margin: 0;
  color: var(--ink, #1c1c1a);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.popular-albums-stat {
  font: 400 12px/1.3 'Inter', sans-serif;
  color: var(--ink-soft, #6b6b66);
  margin: 6px 0 0;
}
.popular-albums-stat strong {
  font-weight: 600;
  color: var(--ink, #1c1c1a);
}
.popular-albums-empty {
  padding: 20px 22px;
  background: #f7f4ec;
  border: 1px dashed var(--rule, rgba(0,0,0,0.18));
  border-radius: 6px;
}
.popular-albums-empty p {
  margin: 0;
  font: 400 14px/1.5 'Inter', sans-serif;
  color: var(--ink, #1c1c1a);
}
.popular-albums-empty-sub {
  margin-top: 6px !important;
  font-size: 13px !important;
  color: var(--ink-soft, #6b6b66) !important;
}

@media (max-width: 640px) {
  .popular-albums-title { font-size: 24px; }
  .popular-albums-grid { grid-template-columns: 1fr; }
  .popular-albums-cover { flex-basis: 56px; width: 56px; height: 56px; }
}

/* ============================================================
   Brand mark variants — monochrome MVV monogram, archival imprint
   ============================================================ */
/* The brand mark is the FULL-color vinyl logo. No opacity tricks — the logo
   should read clearly wherever it appears. Sizes are tuned per surface. */
.brand-mark { display: inline-block; flex: 0 0 auto; vertical-align: middle; }

/* Section titles — sits next to page h1's like "The Vault", "Next Spin".
   Sized to feel like a publisher's mark beside the headline, not a tiny dot. */
.brand-mark--section {
  height: 40px; width: 40px;
}

/* Album detail eyebrow — smaller, sits next to the "Album" pill. */
.brand-mark--meta {
  height: 22px; width: 22px;
}

/* Console eyebrow — next to the all-caps "THE CONSOLE" label. */
.brand-mark--label {
  height: 18px; width: 18px;
}

/* Footer lockup. */
.brand-mark--footer {
  height: 32px; width: 32px;
}

/* Ghost watermark behind the Console hero — large, very faint. */
.brand-mark--ghost {
  height: 180px; width: 180px;
  opacity: 0.08;
  position: absolute;
  pointer-events: none;
}

/* Loading / empty state — centered above the message. */
.brand-mark--empty {
  height: 56px; width: 56px;
  display: block;
  margin: 0 auto 14px;
  opacity: 0.85;
}

/* Success state (e.g. bulk import) — larger, celebratory. */
.brand-mark--hero {
  height: 72px; width: 72px;
  display: block;
  margin: 0 auto 18px;
}

/* About page — large, prominent brand display. */
.brand-mark--display {
  height: 180px; width: 180px;
  display: block;
  margin: 0 auto 28px;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.22));
}

/* ghost watermark positioned in upper-right of the Console hero */
.hero-ghost {
  top: 12px;
  right: 16px;
}

/* page title row — h1 + section mark side by side */
.page-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.page-title-row > h1 { margin: 0; }

/* Album detail: eyebrow + meta brand mark together */
.album-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.album-eyebrow-row > .eyebrow { margin: 0; }

/* Bulk import success: subtle hero-size mark above the count */
.bulk-success-mark {
  margin-bottom: 8px;
}

/* Footer lockup: mark sits above the meta line, centered */
.site-footer .brand-mark--footer {
  margin: 0 auto 2px;
  display: block;
}

/* Console eyebrow: keep the brand mark snug with the kicker */
.console-eyebrow > .brand-mark--label {
  margin-right: 2px;
  /* sits next to "THE CONSOLE" all-caps label, NOT inside a chip */
}

@media (max-width: 640px) {
  .brand-mark--section { height: 32px; width: 32px; }
  .brand-mark--meta    { height: 18px; width: 18px; }
  .brand-mark--footer  { height: 26px; width: 26px; }
  .brand-mark--ghost   { height: 120px; width: 120px; }
  .brand-mark--empty   { height: 44px; width: 44px; }
  .brand-mark--hero    { height: 56px; width: 56px; }
  .brand-mark--display { height: 132px; width: 132px; margin-bottom: 22px; }
  .hero-ghost { top: 8px; right: 10px; }
}

/* === About page === */
.about-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 32px 96px;
}
.about-hero {
  text-align: center;
  margin-bottom: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,0.12));
}
.about-kicker {
  font: 500 11px/1 'Inter', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  margin: 0 0 14px;
}
.about-title {
  font: 600 52px/1.05 'Cormorant Garamond', 'Georgia', serif;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--ink, #1c1c1a);
}
.about-subtitle {
  font: 400 17px/1.55 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0 auto;
  max-width: 520px;
}
.about-letter {
  font: 400 17px/1.7 'Inter', sans-serif;
  color: var(--ink, #2a2622);
  max-width: 640px;
  margin: 0 auto;
}
.about-letter p {
  margin: 0 0 20px;
}
.about-salutation {
  font: 500 19px/1.5 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  color: var(--ink, #1c1c1a);
  margin-bottom: 24px !important;
}
.about-letter strong { font-weight: 600; color: var(--ink, #1c1c1a); }
.about-signoff {
  margin-top: 32px !important;
  padding-top: 24px;
  border-top: 1px solid var(--rule, rgba(0,0,0,0.10));
  font: 500 19px/1.4 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  color: var(--ink, #1c1c1a);
}
.about-signoff-meta {
  display: block;
  margin-top: 4px;
  font: 400 13px/1.4 'Inter', sans-serif;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--ink-soft, #6b6b66);
}
.about-cta {
  margin: 56px auto 0;
  padding: 22px 24px;
  max-width: 640px;
  background: var(--surface-soft, rgba(0,0,0,0.025));
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 8px;
}
.about-cta-line {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0;
  text-align: center;
}
.about-cta-line a { color: var(--accent, #5a1a26); text-decoration: underline; text-underline-offset: 2px; }
.about-cta-line a:hover { text-decoration: none; }

@media (max-width: 640px) {
  .about-page { padding: 40px 20px 64px; }
  .about-title { font-size: 38px; }
  .about-subtitle { font-size: 15px; }
  .about-letter { font-size: 16px; }
  .about-salutation { font-size: 17px; }
}

/* === Release notes / roadmap === */
.release-notes {
  max-width: 920px;
  margin: 0 auto;
  padding: 48px 32px 96px;
}
.release-hero {
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,0.12));
}
.release-kicker {
  font: 500 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  margin: 0 0 14px;
}
.release-title {
  font: 600 44px/1.05 'Cormorant Garamond', 'Georgia', serif;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ink, #1c1c1a);
}
.release-lede {
  font: 400 16px/1.55 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0;
  max-width: 640px;
}
.release-section {
  margin-top: 56px;
}
.release-section:first-of-type { margin-top: 0; }
.release-h2 {
  font: 600 28px/1.15 'Cormorant Garamond', 'Georgia', serif;
  margin: 0 0 6px;
  color: var(--ink, #1c1c1a);
}
.release-section-lede {
  font: 400 14px/1.55 'Inter', sans-serif;
  color: var(--ink-soft, #6b6b66);
  margin: 0 0 24px;
  max-width: 620px;
}
.release-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.release-feature {
  padding: 22px 22px 24px;
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 8px;
  background: var(--surface, rgba(255,255,255,0.6));
}
.release-feature h3 {
  font: 600 17px/1.3 'Inter', sans-serif;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  color: var(--ink, #1c1c1a);
}
.release-feature p {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0;
}
.release-roadmap,
.release-changelog {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.release-roadmap li,
.release-changelog li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 8px;
  background: var(--surface, rgba(255,255,255,0.6));
  align-items: start;
}
.release-roadmap-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent, #5a1a26);
  color: #f1e7d2;
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: start;
  width: max-content;
}
.release-changelog-date {
  font: 500 12px/1.3 'Inter', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  align-self: start;
  padding-top: 2px;
}
.release-roadmap li > div,
.release-changelog li > div {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
}
.release-roadmap li > div strong,
.release-changelog li > div strong {
  display: block;
  font: 600 15px/1.4 'Inter', sans-serif;
  color: var(--ink, #1c1c1a);
  margin-bottom: 3px;
}
/* Major initiative blocks — mobile, community redesign, etc. */
.release-initiative {
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 10px;
  padding: 26px 26px 22px;
  background: var(--surface, rgba(255,255,255,0.65));
  margin-bottom: 20px;
}
.release-initiative:last-child { margin-bottom: 0; }
.release-initiative-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.release-initiative-title {
  font: 600 22px/1.2 'Cormorant Garamond', 'Georgia', serif;
  margin: 0;
  color: var(--ink, #1c1c1a);
}
.release-initiative-lede {
  font: 400 15px/1.6 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0 0 18px;
  max-width: 720px;
}
.tag-initiative {
  background: #1c1c1a;
  color: #f1e7d2;
}
.release-phase-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.release-phase-list > li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--rule, rgba(0,0,0,0.08));
  border-radius: 7px;
  background: var(--surface-soft, rgba(0,0,0,0.018));
  align-items: start;
}
.release-phase-label {
  font: 600 11px/1.3 'Inter', sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent, #5a1a26);
  padding-top: 3px;
}
.release-phase-list > li p {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0;
}
@media (max-width: 720px) {
  .release-phase-list > li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.release-cta {
  margin-top: 56px;
  padding: 22px 24px;
  background: var(--surface-soft, rgba(0,0,0,0.025));
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 8px;
}
.release-cta-line {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0;
  text-align: center;
}
.release-cta-line a { color: var(--accent, #5a1a26); text-decoration: underline; text-underline-offset: 2px; }
.release-cta-line a:hover { text-decoration: none; }

@media (max-width: 640px) {
  .release-notes { padding: 32px 20px 64px; }
  .release-title { font-size: 34px; }
  .release-section { margin-top: 40px; }
  .release-h2 { font-size: 24px; }
  .release-roadmap li,
  .release-changelog li {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Footer links — small text links sitting under the brand mark */
.footer-links {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
  font: 400 12px/1.4 'Inter', sans-serif;
  letter-spacing: 0.04em;
}
.footer-links a {
  color: var(--ink-soft, #6b6b66);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.footer-links a:hover {
  color: var(--ink, #1c1c1a);
  border-bottom-color: var(--ink, #1c1c1a);
}
.footer-links .footer-link-sep {
  color: var(--ink-soft, #b8b3ad);
  user-select: none;
}

/* =============================================================================
   Upgrade Paths v2 — library-driven row layout (cream + maroon + moss palette)
   ============================================================================= */

.upgrade-intro {
  margin: 4px 0 18px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #fbf7ef 0%, #f6efe2 100%);
  border: 1px solid var(--ink-line, #d9d2c5);
  border-radius: 8px;
}
.upgrade-intro-lede {
  margin: 0 0 12px;
  font-family: var(--font-body, Georgia, serif);
  color: var(--ink, #1c1c1a);
  font-size: 0.95rem;
  line-height: 1.45;
}
.upgrade-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.upgrade-subtab {
  background: transparent;
  border: 1px solid var(--ink-line, #d9d2c5);
  color: var(--ink, #1c1c1a);
  font-family: var(--font-body, Georgia, serif);
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.upgrade-subtab:hover {
  border-color: var(--accent-maroon, #6b1f2a);
  color: var(--accent-maroon, #6b1f2a);
}
.upgrade-subtab.active {
  background: var(--accent-maroon, #6b1f2a);
  border-color: var(--accent-maroon, #6b1f2a);
  color: #f6efe2;
}
.upgrade-subtab-n {
  font-size: 0.75rem;
  opacity: 0.75;
}
.upgrade-subtab.active .upgrade-subtab-n { opacity: 0.95; }

.upgrade-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upgrade-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  padding: 12px 14px;
  background: #fdfaf3;
  border: 1px solid var(--ink-line, #d9d2c5);
  border-left: 3px solid var(--ink-line, #d9d2c5);
  border-radius: 6px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.upgrade-row:hover {
  border-color: var(--ink-soft, #b8b3ad);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.upgrade-row-pinned {
  border-left-color: var(--accent-maroon, #6b1f2a);
  background: linear-gradient(180deg, #fdfaf3 0%, #f9f0e1 100%);
}
.upgrade-row-dismissed {
  opacity: 0.7;
  border-left-color: var(--ink-soft, #b8b3ad);
}

.upgrade-row-cover {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0e9d8;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink-soft, #b8b3ad);
}
.upgrade-row-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.upgrade-row-cover-placeholder {
  font-size: 1.8rem;
}

.upgrade-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upgrade-row-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upgrade-row-title {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--ink, #1c1c1a);
  font-weight: 600;
}
.upgrade-row-title a {
  color: inherit;
  text-decoration: none;
}
.upgrade-row-title a:hover { color: var(--accent-maroon, #6b1f2a); }
.upgrade-row-artist {
  font-weight: 400;
  color: var(--ink-mid, #5b574e);
  font-size: 0.95rem;
}
.upgrade-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.upgrade-row-currentline {
  margin: 0;
  font-family: var(--font-body, Georgia, serif);
  font-size: 0.85rem;
  color: var(--ink-mid, #5b574e);
}
.upgrade-row-currentlbl {
  font-weight: 600;
  color: var(--ink, #1c1c1a);
  margin-right: 4px;
}
.upgrade-row-raritynote {
  margin: 2px 0 0 0;
  font-family: var(--font-body, Georgia, serif);
  font-size: 0.82rem;
  color: var(--ink-mid, #5b574e);
  line-height: 1.45;
  font-style: italic;
}
.upgrade-row-raritynote .upgrade-row-currentlbl {
  font-style: normal;
}
.upgrade-row-play, .upgrade-row-val {
  font-size: 0.78rem;
  color: var(--ink-mid, #5b574e);
}
.upgrade-row-val { font-variant-numeric: tabular-nums; }

/* Rarity pills — match Grail/Scarce/Uncommon/Common palette used elsewhere */
.upgrade-pill-grail    { background: #2a1a1f; color: #f6efe2; }
.upgrade-pill-scarce   { background: var(--accent-maroon, #6b1f2a); color: #f6efe2; }
.upgrade-pill-uncommon { background: #cfc0a4; color: #1c1c1a; }
.upgrade-pill-common   { background: #ece2cf; color: #1c1c1a; }
.upgrade-pill-n {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  opacity: 0.75;
}

.upgrade-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* Options drawer */
.upgrade-options {
  margin-top: 6px;
  padding: 12px 14px;
  background: #fbf7ef;
  border: 1px solid var(--ink-line, #d9d2c5);
  border-radius: 5px;
}
.upgrade-options[hidden] { display: none; }
.upgrade-options-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.upgrade-options-loading {
  font-style: italic;
  color: var(--ink-mid, #5b574e);
  display: flex;
  align-items: center;
  gap: 8px;
}
.upgrade-options-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--ink-line, #d9d2c5);
  border-top-color: var(--accent-maroon, #6b1f2a);
  border-radius: 50%;
  animation: upgradeSpin 0.8s linear infinite;
}
@keyframes upgradeSpin { to { transform: rotate(360deg); } }
.upgrade-options-error {
  color: var(--accent-maroon, #6b1f2a);
}
.upgrade-options-summary {
  margin: 0;
  font-family: var(--font-body, Georgia, serif);
  color: var(--ink, #1c1c1a);
  font-size: 0.92rem;
  line-height: 1.5;
}
.upgrade-options-current {
  margin: 0;
  font-family: var(--font-body, Georgia, serif);
  color: var(--ink-mid, #5b574e);
  font-size: 0.88rem;
  line-height: 1.5;
  padding: 8px 10px;
  background: #f3ecdc;
  border-left: 3px solid var(--ink-line, #d9d2c5);
  border-radius: 3px;
}
.upgrade-options-currentlbl {
  font-weight: 600;
  color: var(--ink, #1c1c1a);
  margin-right: 4px;
}
.upgrade-version-better {
  margin: 6px 0 0 0;
  padding-top: 6px;
  border-top: 1px dashed var(--ink-line, #d9d2c5);
  font-family: var(--font-body, Georgia, serif);
  font-size: 0.86rem;
  color: var(--ink, #1c1c1a);
  line-height: 1.45;
}
.upgrade-version-betterlbl {
  font-weight: 600;
  color: var(--accent-moss, #4f6f44);
  margin-right: 4px;
}

.upgrade-version {
  padding: 10px 12px;
  background: #fdfaf3;
  border: 1px solid var(--ink-line, #d9d2c5);
  border-radius: 4px;
}
.upgrade-version-preferred {
  border-left: 3px solid var(--accent-moss, #4f6f44);
}
.upgrade-version-backup {
  border-left: 3px solid var(--ink-line, #d9d2c5);
}
.upgrade-version-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 4px;
}
.upgrade-version-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--accent-moss, #4f6f44);
}
.upgrade-version-backup .upgrade-version-label { color: var(--ink-mid, #5b574e); }
.upgrade-version-why {
  font-size: 0.85rem;
  color: var(--ink-mid, #5b574e);
  font-style: italic;
}
.upgrade-version-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body, Georgia, serif);
  font-size: 0.9rem;
  color: var(--ink, #1c1c1a);
}
.upgrade-backups {
  font-size: 0.88rem;
}
.upgrade-backups > summary {
  cursor: pointer;
  font-family: var(--font-body, Georgia, serif);
  color: var(--ink-mid, #5b574e);
  padding: 4px 0;
}
.upgrade-backups[open] > summary { color: var(--ink, #1c1c1a); }
.upgrade-avoid {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--accent-maroon, #6b1f2a);
}
.upgrade-avoid-lbl {
  font-weight: 600;
  margin-right: 4px;
}
.upgrade-options-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.upgrade-options-stamp {
  font-size: 0.72rem;
  color: var(--ink-soft, #b8b3ad);
  font-style: italic;
}

@media (max-width: 560px) {
  .upgrade-row {
    grid-template-columns: 64px 1fr;
    gap: 10px;
    padding: 10px 12px;
  }
  .upgrade-row-cover { width: 64px; height: 64px; }
  .upgrade-row-title { font-size: 1rem; }
}

/* ============================ Catalog-number intake ============================ */
.catalog-candidate-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}
.catalog-candidate {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(90, 26, 38, 0.18);
  background: #fdf9ef;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}
.catalog-candidate:hover,
.catalog-candidate:focus-visible {
  border-color: var(--accent-moss, #4f6f44);
  background: #fbf5e3;
  outline: none;
}
.catalog-candidate-title {
  font-weight: 600;
  color: var(--ink, #1d1b16);
  margin-bottom: 2px;
}
.catalog-candidate-meta {
  font-size: 0.875rem;
  color: var(--text-muted, #6c5a4e);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}