/* albums.css — album page only (pageStyle: albums). Album hero, track
   table, credit rows, gauge, FAQ, sources, related albums, and the pure-CSS
   cover-art LQIP placeholder decoder. Loaded with global.css. */

/* =====================================================
	 Album Page (new layout) — ported from album-design preview
	 Self-contained under .album; reuses .credit-link for auto-links.
	 ===================================================== */

/* full-bleed hero needs this so 100vw width can't create a scrollbar */
body { overflow-x: hidden; }

.album {
	--album-bg:          #060b17;
	--album-bg-mid:      #0b1220;
	--album-surface:     #0f1825;
	--album-surface-2:   #162030;
	--album-border:      #1d3045;
	--album-border-lit:  #3d5c80;
	--album-text:        #cdd9e5;
	--album-dim:         #8b9bb4;
	--album-purple:      #b07bfc;
	--album-magenta:     #f857a6;
	--album-blue:        #56b0ff;
	--album-cyan:        #3dd6f5;
	--album-high:        #3ddc84;
	--album-mid:         #ffd23f;
	--album-low:         #ff6b6b;
	--album-none:        #4a5568;
	--album-aurora:      linear-gradient(135deg, #b07bfc 0%, #f857a6 50%, #56b0ff 100%);
	--album-nebula:      linear-gradient(135deg, #b07bfc 0%, #3dd6f5 100%);
	--album-emerald:     linear-gradient(135deg, #3ddc84 0%, #3dd6f5 100%);
	--album-font-mono:   "Roboto Mono", "SF Mono", "Fira Code", Consolas, monospace;
	color: var(--album-text);
	margin: -2rem -1.5rem 0;
}

/* ── shared section heading ── */
.album-sec { margin: 0 auto 4rem; max-width: 1200px; padding: 0 1.5rem; }
.album-h {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--album-dim);
	margin-bottom: 1.5rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--album-border);
}
.album-h::before {
	content: '';
	width: 3px; height: 14px;
	background: var(--album-aurora);
	border-radius: 2px;
	flex-shrink: 0;
}
.album-h__count {
	margin-left: auto;
	font-family: var(--album-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--album-border-lit);
}

/* ── Sales region toggle (pill inside sales stat card) ── */
.sales-toggle {
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	display: flex;
	gap: 1px;
	padding: 2px;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 5px;
	z-index: 2;
}
.sales-toggle__btn {
	width: 22px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	padding: 0;
	position: relative;
	transition: background 0.15s;
}
.sales-toggle__btn--active {
	background: rgba(255,255,255,0.08);
}
.sales-toggle__icon {
	width: 13px;
	height: 13px;
	display: block;
	pointer-events: none;
	opacity: 0.3;
	transition: opacity 0.15s;
}
.sales-toggle__btn--active .sales-toggle__icon {
	opacity: 1;
}
.sales-toggle__btn::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: #12111a;
	color: #e0d0ff;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
	border: 1px solid rgba(255,255,255,0.1);
	z-index: 100;
}
.sales-toggle__btn:hover::after {
	opacity: 1;
}

/* ── Hero ── */
.album-hero {
	display: block;
	position: relative;
	overflow: hidden;
	padding: 2rem 0 3.5rem;
	/* full-bleed: background reaches the screen edges while inner content
	   stays aligned with the page container below */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 3.5rem;
	background:
		radial-gradient(ellipse 70% 55% at 75% 15%, rgba(176,123,252,0.20) 0%, transparent 60%),
		radial-gradient(ellipse 55% 50% at 10% 90%, rgba(86,176,255,0.14) 0%, transparent 60%),
		radial-gradient(ellipse 45% 40% at 95% 85%, rgba(248,87,166,0.12) 0%, transparent 60%),
		linear-gradient(180deg, #0b1220 0%, #060b17 100%);
	border-bottom: 1px solid var(--album-border);
}
/* CSS-only starfield */
.album-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7), transparent),
		radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.5), transparent),
		radial-gradient(1px 1px at 80% 20%, rgba(176,123,252,0.8), transparent),
		radial-gradient(1.5px 1.5px at 35% 80%, rgba(86,176,255,0.7), transparent),
		radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,0.6), transparent),
		radial-gradient(1px 1px at 12% 60%, rgba(61,214,245,0.7), transparent),
		radial-gradient(1px 1px at 48% 12%, rgba(255,255,255,0.5), transparent),
		radial-gradient(1.5px 1.5px at 70% 40%, rgba(248,87,166,0.6), transparent);
	background-repeat: repeat;
	background-size: 320px 240px;
	opacity: 0.9;
	pointer-events: none;
}
.album-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.album-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45rem;
	font-size: 0.8rem;
	color: var(--album-dim);
	margin-bottom: 2rem;
}
.album-breadcrumb a { color: var(--album-dim); text-decoration: underline dotted rgba(139,155,180,0.35); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.15s, text-decoration-color 0.15s; }
.album-breadcrumb a:hover { color: var(--album-purple); text-decoration-color: rgba(176,123,252,0.4); }
.album-breadcrumb__sep { font-size: 0.6rem; color: var(--album-border-lit); }
.album-breadcrumb__current { color: var(--album-text); }

.album-hero__grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2.5rem;
	align-items: center;
}

.album-hero__left {
	display: flex;
	align-items: center;
	gap: 1.8rem;
	min-width: 0;
}
.album-hero__info { min-width: 0; }
.album-cover {
	width: 170px;
	height: 170px;
	flex-shrink: 0;
	border-radius: 10px;
	object-fit: cover;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
	border: 1px solid var(--album-border-lit);
}
@media (max-width: 700px) {
	.album-hero__left { flex-direction: column; align-items: flex-start; gap: 1.3rem; }
	.album-cover { width: 140px; height: 140px; }
}

/* ---- Cover-art LQIP placeholder (pure-CSS, no request) ----
   Lean Rada CSS-only LQIP technique: https://leanrada.com/notes/css-only-lqip/
   Each album cover img carries style="--lqip:<int>" (album.coverArtLqip). The rule
   below decodes that integer into a blurred gradient preview that paints instantly,
   then the real cover loads over it. Needs mod()/round()/pow()/oklab()/relative-color
   (Chrome 119+, Safari 16.4+, Firefox 128+); older browsers just show no placeholder. */

[style*="--lqip:"]:where([loading=lazy],[preload=none],.force-lqip) {
  --lqip-ca: mod(round(down, calc((var(--lqip) + 524288) / 262144)), 4);
  --lqip-cb: mod(round(down, calc((var(--lqip) + 524288) / 65536)), 4);
  --lqip-cc: mod(round(down, calc((var(--lqip) + 524288) / 16384)), 4);
  --lqip-cd: mod(round(down, calc((var(--lqip) + 524288) / 4096)), 4);
  --lqip-ce: mod(round(down, calc((var(--lqip) + 524288) / 1024)), 4);
  --lqip-cf: mod(round(down, calc((var(--lqip) + 524288) / 256)), 4);
  --lqip-ll: mod(round(down, calc((var(--lqip) + 524288) / 64)), 4);
  --lqip-aaa: mod(round(down, calc((var(--lqip) + 524288) / 8)), 8);
  --lqip-bbb: mod(calc(var(--lqip) + 524288), 8);

  --lqip-ca-clr: hsl(0 0% calc(var(--lqip-ca) / 3 * 100%));
  --lqip-cb-clr: hsl(0 0% calc(var(--lqip-cb) / 3 * 100%));
  --lqip-cc-clr: hsl(0 0% calc(var(--lqip-cc) / 3 * 100%));
  --lqip-cd-clr: hsl(0 0% calc(var(--lqip-cd) / 3 * 100%));
  --lqip-ce-clr: hsl(0 0% calc(var(--lqip-ce) / 3 * 100%));
  --lqip-cf-clr: hsl(0 0% calc(var(--lqip-cf) / 3 * 100%));
  --lqip-base-clr: oklab(
    calc(var(--lqip-ll) / 3 * 0.6 + 0.2)
      calc(var(--lqip-aaa) / 8 * 0.7 - 0.35)
      calc((var(--lqip-bbb) + 1) / 8 * 0.7 - 0.35)
  );

  --lqip-stop10: 2%;
  --lqip-stop20: 8%;
  --lqip-stop30: 18%;
  --lqip-stop40: 32%;
  background-blend-mode:
    hard-light, hard-light, hard-light, hard-light, hard-light, hard-light,
    overlay, overlay, overlay, overlay, overlay, overlay,
    normal;
  background-image: radial-gradient(
      50% 75% at 16.67% 25%,
      rgb(from var(--lqip-ca-clr) r g b / 50%),
      rgb(from var(--lqip-ca-clr) r g b / calc(50% - var(--lqip-stop10) / 2)) 10%,
      rgb(from var(--lqip-ca-clr) r g b / calc(50% - var(--lqip-stop20) / 2)) 20%,
      rgb(from var(--lqip-ca-clr) r g b / calc(50% - var(--lqip-stop30) / 2)) 30%,
      rgb(from var(--lqip-ca-clr) r g b / calc(50% - var(--lqip-stop40) / 2)) 40%,
      rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop40) / 2)) 60%,
      rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop30) / 2)) 70%,
      rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop20) / 2)) 80%,
      rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop10) / 2)) 90%,
      transparent
    ),
    radial-gradient(
      50% 75% at 83.33% 25%,
      rgb(from var(--lqip-cc-clr) r g b / 50%),
      rgb(from var(--lqip-cc-clr) r g b / calc(50% - var(--lqip-stop10) / 2)) 10%,
      rgb(from var(--lqip-cc-clr) r g b / calc(50% - var(--lqip-stop20) / 2)) 20%,
      rgb(from var(--lqip-cc-clr) r g b / calc(50% - var(--lqip-stop30) / 2)) 30%,
      rgb(from var(--lqip-cc-clr) r g b / calc(50% - var(--lqip-stop40) / 2)) 40%,
      rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop40) / 2)) 60%,
      rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop30) / 2)) 70%,
      rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop20) / 2)) 80%,
      rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop10) / 2)) 90%,
      transparent
    ),
    radial-gradient(
      50% 75% at 50% 25%,
      rgb(from var(--lqip-cb-clr) r g b / 50%),
      rgb(from var(--lqip-cb-clr) r g b / calc(50% - var(--lqip-stop10) / 2)) 10%,
      rgb(from var(--lqip-cb-clr) r g b / calc(50% - var(--lqip-stop20) / 2)) 20%,
      rgb(from var(--lqip-cb-clr) r g b / calc(50% - var(--lqip-stop30) / 2)) 30%,
      rgb(from var(--lqip-cb-clr) r g b / calc(50% - var(--lqip-stop40) / 2)) 40%,
      rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop40) / 2)) 60%,
      rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop30) / 2)) 70%,
      rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop20) / 2)) 80%,
      rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop10) / 2)) 90%,
      transparent
    ),
    radial-gradient(
      50% 75% at 16.67% 75%,
      rgb(from var(--lqip-cd-clr) r g b / 50%),
      rgb(from var(--lqip-cd-clr) r g b / calc(50% - var(--lqip-stop10) / 2)) 10%,
      rgb(from var(--lqip-cd-clr) r g b / calc(50% - var(--lqip-stop20) / 2)) 20%,
      rgb(from var(--lqip-cd-clr) r g b / calc(50% - var(--lqip-stop30) / 2)) 30%,
      rgb(from var(--lqip-cd-clr) r g b / calc(50% - var(--lqip-stop40) / 2)) 40%,
      rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop40) / 2)) 60%,
      rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop30) / 2)) 70%,
      rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop20) / 2)) 80%,
      rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop10) / 2)) 90%,
      transparent
    ),
    radial-gradient(
      50% 75% at 83.33% 75%,
      rgb(from var(--lqip-cf-clr) r g b / 50%),
      rgb(from var(--lqip-cf-clr) r g b / calc(50% - var(--lqip-stop10) / 2)) 10%,
      rgb(from var(--lqip-cf-clr) r g b / calc(50% - var(--lqip-stop20) / 2)) 20%,
      rgb(from var(--lqip-cf-clr) r g b / calc(50% - var(--lqip-stop30) / 2)) 30%,
      rgb(from var(--lqip-cf-clr) r g b / calc(50% - var(--lqip-stop40) / 2)) 40%,
      rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop40) / 2)) 60%,
      rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop30) / 2)) 70%,
      rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop20) / 2)) 80%,
      rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop10) / 2)) 90%,
      transparent
    ),
    radial-gradient(
      50% 75% at 50% 75%,
      rgb(from var(--lqip-ce-clr) r g b / 50%),
      rgb(from var(--lqip-ce-clr) r g b / calc(50% - var(--lqip-stop10) / 2)) 10%,
      rgb(from var(--lqip-ce-clr) r g b / calc(50% - var(--lqip-stop20) / 2)) 20%,
      rgb(from var(--lqip-ce-clr) r g b / calc(50% - var(--lqip-stop30) / 2)) 30%,
      rgb(from var(--lqip-ce-clr) r g b / calc(50% - var(--lqip-stop40) / 2)) 40%,
      rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop40) / 2)) 60%,
      rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop30) / 2)) 70%,
      rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop20) / 2)) 80%,
      rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop10) / 2)) 90%,
      transparent
    ),
    radial-gradient(
      50% 75% at 16.67% 25%,
      var(--lqip-ca-clr),
      rgb(from var(--lqip-ca-clr) r g b / calc(100% - var(--lqip-stop10))) 10%,
      rgb(from var(--lqip-ca-clr) r g b / calc(100% - var(--lqip-stop20))) 20%,
      rgb(from var(--lqip-ca-clr) r g b / calc(100% - var(--lqip-stop30))) 30%,
      rgb(from var(--lqip-ca-clr) r g b / calc(100% - var(--lqip-stop40))) 40%,
      rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop40))) 60%,
      rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop30))) 70%,
      rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop20))) 80%,
      rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop10))) 90%,
      transparent
    ),
    radial-gradient(
      50% 75% at 50% 25%,
      var(--lqip-cb-clr),
      rgb(from var(--lqip-cb-clr) r g b / calc(100% - var(--lqip-stop10))) 10%,
      rgb(from var(--lqip-cb-clr) r g b / calc(100% - var(--lqip-stop20))) 20%,
      rgb(from var(--lqip-cb-clr) r g b / calc(100% - var(--lqip-stop30))) 30%,
      rgb(from var(--lqip-cb-clr) r g b / calc(100% - var(--lqip-stop40))) 40%,
      rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop40))) 60%,
      rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop30))) 70%,
      rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop20))) 80%,
      rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop10))) 90%,
      transparent
    ),
    radial-gradient(
      50% 75% at 83.33% 25%,
      var(--lqip-cc-clr),
      rgb(from var(--lqip-cc-clr) r g b / calc(100% - var(--lqip-stop10))) 10%,
      rgb(from var(--lqip-cc-clr) r g b / calc(100% - var(--lqip-stop20))) 20%,
      rgb(from var(--lqip-cc-clr) r g b / calc(100% - var(--lqip-stop30))) 30%,
      rgb(from var(--lqip-cc-clr) r g b / calc(100% - var(--lqip-stop40))) 40%,
      rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop40))) 60%,
      rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop30))) 70%,
      rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop20))) 80%,
      rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop10))) 90%,
      transparent
    ),
    radial-gradient(
      50% 75% at 16.67% 75%,
      var(--lqip-cd-clr),
      rgb(from var(--lqip-cd-clr) r g b / calc(100% - var(--lqip-stop10))) 10%,
      rgb(from var(--lqip-cd-clr) r g b / calc(100% - var(--lqip-stop20))) 20%,
      rgb(from var(--lqip-cd-clr) r g b / calc(100% - var(--lqip-stop30))) 30%,
      rgb(from var(--lqip-cd-clr) r g b / calc(100% - var(--lqip-stop40))) 40%,
      rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop40))) 60%,
      rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop30))) 70%,
      rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop20))) 80%,
      rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop10))) 90%,
      transparent
    ),
    radial-gradient(
      50% 75% at 50% 75%,
      var(--lqip-ce-clr),
      rgb(from var(--lqip-ce-clr) r g b / calc(100% - var(--lqip-stop10))) 10%,
      rgb(from var(--lqip-ce-clr) r g b / calc(100% - var(--lqip-stop20))) 20%,
      rgb(from var(--lqip-ce-clr) r g b / calc(100% - var(--lqip-stop30))) 30%,
      rgb(from var(--lqip-ce-clr) r g b / calc(100% - var(--lqip-stop40))) 40%,
      rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop40))) 60%,
      rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop30))) 70%,
      rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop20))) 80%,
      rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop10))) 90%,
      transparent
    ),
    radial-gradient(
      50% 75% at 83.33% 75%,
      var(--lqip-cf-clr),
      rgb(from var(--lqip-cf-clr) r g b / calc(100% - var(--lqip-stop10))) 10%,
      rgb(from var(--lqip-cf-clr) r g b / calc(100% - var(--lqip-stop20))) 20%,
      rgb(from var(--lqip-cf-clr) r g b / calc(100% - var(--lqip-stop30))) 30%,
      rgb(from var(--lqip-cf-clr) r g b / calc(100% - var(--lqip-stop40))) 40%,
      rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop40))) 60%,
      rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop30))) 70%,
      rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop20))) 80%,
      rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop10))) 90%,
      transparent
    ),
    linear-gradient(0deg, var(--lqip-base-clr), var(--lqip-base-clr));
}


.album-eyebrow {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background: var(--album-nebula);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	margin-bottom: 0.9rem;
}
.album-hero__title {
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 0.95;
	margin-bottom: 1rem;
	padding-bottom: 0.08em;
	background: var(--album-aurora);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	filter: drop-shadow(0 0 34px rgba(176,123,252,0.4));
}
.album-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.85rem;
	font-size: 1rem;
	color: var(--album-text);
	margin-bottom: 0.6rem;
}
.album-hero__meta b { font-weight: 700; }
.album-hero__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--album-border-lit); }
.album-hero__producers { font-size: 0.9rem; color: var(--album-dim); margin-bottom: 1.25rem; }
.album-hero__producers .album-link { color: var(--album-blue); }

.album-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.album-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.28rem 0.75rem;
	border-radius: 5px;
	font-size: 0.76rem;
	font-weight: 500;
	background: rgba(176,123,252,0.08);
	border: 1px solid rgba(176,123,252,0.25);
	color: var(--album-purple);
}
.album-chip--label {
	background: rgba(61,214,245,0.08);
	border-color: rgba(61,214,245,0.25);
	color: var(--album-cyan);
}

/* ── Hero gauge (authorship ring) ── */
.album-gauge-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	padding: 1.75rem 2rem;
	border-radius: 16px;
	border: 1px solid transparent;
	background:
		linear-gradient(var(--album-surface), var(--album-surface)) padding-box,
		linear-gradient(135deg, rgba(61,220,132,0.5), rgba(61,214,245,0.4)) border-box;
	box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.album-gauge-wrap:has(.score-mid) {
	background:
		linear-gradient(var(--album-surface), var(--album-surface)) padding-box,
		linear-gradient(135deg, rgba(255,210,63,0.55), rgba(255,160,30,0.4)) border-box;
}
.album-gauge-wrap:has(.score-low),
.album-gauge-wrap:has(.score-none) {
	background:
		linear-gradient(var(--album-surface), var(--album-surface)) padding-box,
		linear-gradient(135deg, rgba(255,107,107,0.55), rgba(255,70,100,0.4)) border-box;
}
.album-gauge {
	position: relative;
	width: 168px;
	height: 168px;
	border-radius: 50%;
	background: conic-gradient(var(--album-high) calc(var(--val) * 1%), var(--album-surface-2) 0);
	display: grid;
	place-items: center;
	filter: drop-shadow(0 0 20px rgba(61,220,132,0.35));
	--glow-rgb: 61,220,132;
}
.album-gauge::before {
	content: '';
	position: absolute;
	inset: 20px;
	border-radius: 50%;
	background: var(--album-surface);
	border: 1px solid var(--album-border);
	box-shadow: inset 0 0 18px rgba(var(--glow-rgb), 0.18);
}
.album-gauge__inner { position: relative; text-align: center; line-height: 1; }
.album-gauge__num {
	font-size: 2.9rem;
	font-weight: 900;
	letter-spacing: -0.04em;
	color: var(--album-high);
	text-shadow: 0 0 24px rgba(61,220,132,0.5);
}
.album-gauge__num span { font-size: 1.3rem; font-weight: 700; }
.album-gauge__cap {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--album-dim);
	margin-top: 0.35rem;
}
.album-gauge-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.32rem 0.9rem;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 700;
	background: rgba(61,220,132,0.1);
	border: 1px solid rgba(61,220,132,0.38);
	color: var(--album-high);
	box-shadow: 0 0 12px rgba(61,220,132,0.18);
}
.album-gauge-sub { font-size: 0.74rem; color: var(--album-dim); text-align: center; max-width: 180px; }
/* gauge + badge adapt to the authorship score (base style above is the green "high" look) */
.album-gauge.score-mid { background: conic-gradient(var(--album-mid) calc(var(--val) * 1%), var(--album-surface-2) 0); filter: drop-shadow(0 0 20px rgba(255,210,63,0.3)); --glow-rgb: 255,210,63; }
.album-gauge.score-mid .album-gauge__num { color: var(--album-mid); text-shadow: 0 0 24px rgba(255,210,63,0.5); }
.album-gauge.score-low,
.album-gauge.score-none { background: conic-gradient(var(--album-low) calc(var(--val) * 1%), var(--album-surface-2) 0); filter: drop-shadow(0 0 20px rgba(255,107,107,0.3)); --glow-rgb: 255,107,107; }
.album-gauge.score-low .album-gauge__num,
.album-gauge.score-none .album-gauge__num { color: var(--album-low); text-shadow: 0 0 24px rgba(255,107,107,0.5); }
.album-gauge-badge.score-mid { background: rgba(255,210,63,0.1); border-color: rgba(255,210,63,0.38); color: var(--album-mid); box-shadow: 0 0 12px rgba(255,210,63,0.18); }
.album-gauge-badge.score-low,
.album-gauge-badge.score-none { background: rgba(255,107,107,0.1); border-color: rgba(255,107,107,0.38); color: var(--album-low); box-shadow: 0 0 12px rgba(255,107,107,0.18); }

/* ── Authorship breakdown ── */
.album-breakdown {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 1.5rem;
}
.album-panel {
	background: var(--album-surface);
	border: 1px solid var(--album-border);
	border-radius: 12px;
	padding: 1.5rem 1.75rem;
}
.album-panel__title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--album-text);
	margin-bottom: 0.4rem;
}
.album-panel__sub { font-size: 0.84rem; color: var(--album-dim); line-height: 1.6; margin-bottom: 1.5rem; }

.album-bar {
	position: relative;
	display: flex;
	height: 38px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--album-border);
	margin-bottom: 1.25rem;
	background-color: var(--album-surface-2);
}
/* The outside-writers hatch lives on an oversized pseudo-element drifted with a
   transform (not background-position). Animating background-position re-tiles the
   repeating gradient each frame and leaves a vertical seam; translating one painted
   layer does not, and the oversize + parent clip hide its moving edges. The out
   segment is transparent and sits over this; the self segment paints opaque on top. */
.album-bar::before {
	content: '';
	position: absolute;
	inset: -12px;
	background-image: repeating-linear-gradient(45deg,
		transparent 0, transparent 3px,
		rgba(139,155,180,0.02) 3px, rgba(139,155,180,0.02) 6px);
	animation: album-hatch-drift 7s linear infinite;
	pointer-events: none;
}
/* one 6px stripe period is 6*sqrt(2)px along the 45deg axis, so an 8.49px x-shift
   loops seamlessly */
@keyframes album-hatch-drift { to { transform: translateX(8.49px); } }
.album-bar__pct {
	position: absolute;
	top: 0;
	bottom: 0;
	left: max(24px, calc(var(--score) * 0.5%));
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	font-size: 1rem;
	font-weight: 700;
	font-family: var(--album-font-mono);
	color: #fff;
	text-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 8px rgba(0,0,0,0.4);
	pointer-events: none;
	white-space: nowrap;
}
.album-bar__seg {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 700;
	font-family: var(--album-font-mono);
	color: #06121a;
	transition: width 0.4s;
}
.album-bar__seg--self { background: linear-gradient(135deg, #3ddc84, #2bb56b); }
.album-bar__seg--out  { background: transparent; color: var(--album-dim); }
@media (prefers-reduced-motion: reduce) {
	.album-split__track::before, .album-bar::before { animation: none; }
}

.album-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.album-legend__item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--album-dim); }
.album-legend__dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.album-legend__dot--self { background: var(--album-high); }
.album-legend__dot--out  { background: var(--album-none); }
.album-legend__item b { color: var(--album-text); }
/* breakdown legend: stack the muted descriptor under the bold count */
.album-legend .album-legend__item { align-items: flex-start; }
.album-legend .album-legend__dot { margin-top: 0.2em; }
.album-legend__txt { display: flex; flex-direction: column; gap: 0; line-height: 1.35; }
.album-legend__sub { color: var(--album-dim); }

.album-split { display: flex; flex-direction: column; gap: 1rem; }
.album-split__row { display: flex; flex-direction: column; gap: 0.4rem; }
.album-split__head { display: flex; justify-content: space-between; font-size: 0.82rem; }
.album-split__head span:first-child { color: var(--album-text); font-weight: 600; }
.album-split__head span:last-child { font-family: var(--album-font-mono); color: var(--album-dim); }
.album-split__track {
	position: relative;
	height: 7px;
	border-radius: 4px;
	overflow: hidden;
	background-color: var(--album-surface-2);
}
/* empty space reads as a faint diagonal hatch tinted by this bar's --accent, with a
   slow drift so empty bars feel alive. Same oversized-pseudo + transform approach as
   .album-bar::before so the drift leaves no seam. */
.album-split__track::before {
	content: '';
	position: absolute;
	inset: -12px;
	background-image: repeating-linear-gradient(45deg,
		transparent 0, transparent 3px,
		color-mix(in srgb, var(--accent, #6a7a91) 15%, transparent) 3px,
		color-mix(in srgb, var(--accent, #6a7a91) 15%, transparent) 6px);
	animation: album-hatch-drift 7s linear infinite;
	pointer-events: none;
}
.album-split__fill { position: relative; z-index: 1; height: 100%; border-radius: 4px; }

/* ── Stat cards ── */
.album-stat-wrap {
	position: relative;
	transition: transform 0.2s;
}
.album-stat-wrap:hover { transform: translateY(-2px); }
.album-stat-wrap:hover .album-stat { border-color: var(--album-border-lit); transform: none; }
.album-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
}
.album-stat {
	position: relative;
	overflow: hidden;
	padding: 1.4rem 1.25rem;
	border-radius: 12px;
	background: var(--album-surface);
	border: 1px solid var(--album-border);
	transition: border-color 0.2s, transform 0.2s;
}
.album-stat:hover { border-color: var(--album-border-lit); transform: translateY(-2px); }

.album-stat::after {
	content: '';
	position: absolute;
	top: -30px; right: -30px;
	width: 90px; height: 90px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(176,123,252,0.12), transparent 70%);
}
.album-stat__icon {
	font-size: 1rem;
	color: var(--album-purple);
	margin-bottom: 0.7rem;
}
.album-stat__value {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--album-text);
	margin-bottom: 0.3rem;
}
.album-stat__label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--album-dim);
}

/* ── Awards & Recognition ── */
.album-awards { display: flex; flex-direction: column; gap: 0.6rem; }
.album-award {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1.1rem;
	border-radius: 10px;
	background: var(--album-surface);
	border: 1px solid var(--album-border);
	font-size: 0.9rem;
	color: var(--album-text);
}
.album-award i { color: var(--album-mid); font-size: 1rem; flex-shrink: 0; }

/* ── Callout + description ── */
.album-callout {
	position: relative;
	overflow: hidden;
	padding: 1.5rem 1.75rem;
	border-radius: 12px;
	border: 1px solid transparent;
	background:
		linear-gradient(var(--album-surface-2), var(--album-surface-2)) padding-box,
		linear-gradient(135deg, rgba(176,123,252,0.5), rgba(86,176,255,0.5)) border-box;
	margin-bottom: 1.5rem;
}
.album-callout__label {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var(--album-nebula);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	margin-bottom: 0.6rem;
}
.album-callout__label i { -webkit-text-fill-color: var(--album-purple); color: var(--album-purple); }
.album-callout__text { font-size: 0.97rem; line-height: 1.75; color: var(--album-text); }
.album-desc { font-size: 0.96rem; line-height: 1.8; color: var(--album-dim); max-width: 850px; }
.album-desc b { color: var(--album-text); font-weight: 600; }

/* ── Track table ── */
.album-table-wrap {
	border: 1px solid var(--album-border);
	border-radius: 12px;
	overflow: hidden;
}
.album-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.album-table thead th {
	background: var(--album-surface-2);
	padding: 0.85rem 1rem;
	text-align: left;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--album-dim);
	border-bottom: 1px solid var(--album-border);
	white-space: nowrap;
}
.album-table tbody tr { border-bottom: 1px solid var(--album-border); transition: background 0.15s; }
.album-table tbody tr:last-child { border-bottom: none; }
.album-table tbody tr:hover { background: rgba(176,123,252,0.04); }
.album-table td { padding: 0.9rem 1rem; vertical-align: top; color: var(--album-dim); }

.album-track-num {
	font-family: var(--album-font-mono);
	font-size: 0.82rem;
	color: var(--album-border-lit);
	width: 34px;
}
.album-track-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	color: var(--album-text);
	min-width: 180px;
}
.album-auth-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.album-auth-dot--self { background: var(--album-high); box-shadow: 0 0 7px rgba(61,220,132,0.6); }
.album-auth-dot--out  { background: var(--album-none); }
/* per-track single chart-peak badge */
.album-single-peak {
	display: inline-flex;
	align-items: center;
	margin-left: 0.4rem;
	padding: 0.05rem 0.45rem;
	border-radius: 12px;
	font-size: 0.62rem;
	font-weight: 700;
	font-family: var(--album-font-mono);
	letter-spacing: 0.02em;
	background: rgba(255,210,63,0.1);
	border: 1px solid rgba(255,210,63,0.4);
	color: var(--album-mid);
	white-space: nowrap;
	vertical-align: middle;
}
.album-single-peak--one {
	background: rgba(61,220,132,0.12);
	border-color: rgba(61,220,132,0.45);
	color: var(--album-high);
}
/* credit links — match the existing .credit-link style site-wide */
.album-link,
.album-link--self { color: var(--album-blue); border-bottom: 1px dotted color-mix(in srgb, var(--album-blue) 45%, transparent); transition: border-color 0.15s; }
.album-link:hover,
.album-link--self:hover { border-bottom-color: var(--album-blue); }
/* one credit per line within a cell */
.album-credit { display: block; }
.album-credit + .album-credit { margin-top: 0.35rem; }
.album-table-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-bottom: 1rem;
}
.album-muted { color: var(--album-border-lit); }
.album-role { color: var(--album-border-lit); font-size: 0.8rem; }

/* ── Songwriter spotlight ── */
.album-people {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1rem;
}
.album-person {
	display: block;
	padding: 1.25rem 1.35rem;
	border-radius: 12px;
	text-decoration: none;
	border: 1px solid var(--album-border);
	background: var(--album-surface);
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.album-person:hover { border-color: rgba(176,123,252,0.45); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(176,123,252,0.14); }
.album-person__top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.album-person__avatar {
	width: 42px; height: 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 1rem;
	font-weight: 800;
	color: #06121a;
	background: var(--album-aurora);
	flex-shrink: 0;
}
.album-person__name { font-size: 1rem; font-weight: 700; color: var(--album-text); line-height: 1.2; }
.album-person__role { font-size: 0.74rem; color: var(--album-dim); margin-top: 0.15rem; }
.album-person__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 0.85rem;
	border-top: 1px solid var(--album-border);
	font-size: 0.78rem;
	color: var(--album-dim);
}
.album-person__count { font-family: var(--album-font-mono); color: var(--album-cyan); }

/* ── Related albums ── */
.album-albums {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}
.album-album {
	display: block;
	padding: 1.1rem 1.25rem;
	border-radius: 10px;
	text-decoration: none;
	border: 1px solid var(--album-border);
	background: var(--album-surface);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.album-album:hover { border-color: rgba(176,123,252,0.4); box-shadow: 0 4px 20px rgba(176,123,252,0.1); }
.album-album__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.55rem; }
.album-album__year { font-size: 0.72rem; font-family: var(--album-font-mono); color: var(--album-dim); }
.album-album__title { font-size: 0.98rem; font-weight: 700; color: var(--album-text); margin-bottom: 0.2rem; }
.album-album__label { font-size: 0.76rem; color: var(--album-dim); }
.album-album__foot {
	display: flex;
	justify-content: space-between;
	margin-top: 0.85rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--album-border);
	font-size: 0.7rem;
	font-family: var(--album-font-mono);
	color: var(--album-dim);
}
.album-mini-badge {
	font-size: 0.68rem;
	font-weight: 700;
	padding: 0.1rem 0.5rem;
	border-radius: 12px;
}
.album-mini-badge--high { background: rgba(61,220,132,0.1); border: 1px solid rgba(61,220,132,0.35); color: var(--album-high); }
.album-mini-badge--mid  { background: rgba(255,210,63,0.1); border: 1px solid rgba(255,210,63,0.35); color: var(--album-mid); }
.album-mini-badge--low  { background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.35); color: var(--album-low); }
.album-mini-badge--none { background: rgba(74,85,104,0.18); border: 1px solid rgba(74,85,104,0.38); color: var(--album-dim); }

/* ── Sources ── */
.album-sources { display: flex; flex-direction: column; gap: 0.6rem; }
.album-source {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.85rem 1.1rem;
	border-radius: 8px;
	background: var(--album-surface);
	border: 1px solid var(--album-border);
	font-size: 0.86rem;
	color: var(--album-text);
	text-decoration: none;
	transition: border-color 0.2s;
}
.album-source:hover { border-color: var(--album-border-lit); }
.album-source i { color: var(--album-dim); }
.album-source__ext { margin-left: auto; font-size: 0.72rem; color: var(--album-border-lit); }
.album-source__ext i { color: inherit; }

/* ── FAQ accordion (native <details>, no JS) ── */
.album-faq { display: flex; flex-direction: column; gap: 0.75rem; }
.album-faq__item {
	border: 1px solid var(--album-border);
	border-radius: 10px;
	background: var(--album-surface);
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.album-faq__item[open] {
	border-color: rgba(176,123,252,0.4);
	box-shadow: 0 4px 22px rgba(176,123,252,0.08);
	background: rgba(176,123,252,0.05);
}
.album-faq__q {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.1rem 1.35rem;
	cursor: pointer;
	font-size: 0.97rem;
	font-weight: 600;
	color: var(--album-text);
	list-style: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}
.album-faq__q::-webkit-details-marker { display: none; }
.album-faq__q:hover { color: var(--album-purple); background: rgba(176,123,252,0.04); }
.album-faq__q-text { flex: 1; }
.album-faq__q-icon { color: var(--album-cyan); font-size: 0.9rem; flex-shrink: 0; }
.album-faq__icon {
	margin-left: auto;
	color: var(--album-dim);
	font-size: 0.82rem;
	transition: transform 0.25s, color 0.2s;
	flex-shrink: 0;
}
.album-faq__item[open] .album-faq__icon { transform: rotate(180deg); color: var(--album-purple); }
.album-faq__a {
	padding: 0 1.35rem 1.25rem 3.2rem;
	font-size: 0.9rem;
	line-height: 1.75;
	color: var(--album-dim);
}
.album-faq__a a { color: var(--album-blue); }
.album-faq__a b { color: var(--album-text); font-weight: 600; }
@media (max-width: 560px) {
	.album-faq__a { padding-left: 1.35rem; }
}

/* ── Album page responsive ── */
@media (max-width: 860px) {
	.album-hero__grid { grid-template-columns: 1fr; }
	.album-breakdown { grid-template-columns: 1fr; }
	.album-table-wrap { overflow-x: auto; }
	.album-table { min-width: 760px; }
}