fix: artist hero desktop uses blurred backdrop + natural-proportion portrait

Single object-position can never work well for portrait photos in a ~6:1 wide
banner — we'd only see ~11% of the image height no matter the value.

Desktop now uses two layers:
  1. artist-hero-bg: same image, blurred + darkened, fills full banner width
  2. artist-hero-img: sharp portrait anchored to the right at natural proportions
     (height: 100%, width: auto — no cropping, full face visible)

Mobile unchanged (cover + center center was already working great).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/views/detail.js

@@ -71,6 +71,7 @@ export async function loadArtistDetail(artist) {
   const albEl  = document.getElementById('artist-albums-section');
   hero.style.background = 'linear-gradient(135deg, var(--surface2), var(--surface))';
   hero.querySelector('.artist-hero-img')?.remove();
+  hero.querySelector('.artist-hero-bg')?.remove();
   const overlay = hero.querySelector('.artist-hero-overlay');
   if(overlay) overlay.style.background = '';
   [bioEl, simEl, tsEl, albEl].forEach(el => { if(el) el.innerHTML = ''; });
@@ -110,11 +111,15 @@ export async function loadArtistDetail(artist) {
   const img = imgRes.status === 'fulfilled' ? imgRes.value : null;
   if(img) {
     hero.style.background = '';
+    const bgEl = document.createElement('div');
+    bgEl.className = 'artist-hero-bg';
+    bgEl.style.backgroundImage = `url('${img}')`;
+    hero.insertBefore(bgEl, overlay);
     const heroImg = document.createElement('img');
     heroImg.className = 'artist-hero-img';
     heroImg.alt = '';
     heroImg.src = img;
-    hero.insertBefore(heroImg, hero.firstChild);
+    hero.insertBefore(heroImg, overlay);
     if(overlay) overlay.style.background = 'linear-gradient(to right,rgba(7,7,15,.95) 0%,rgba(7,7,15,.35) 55%,rgba(7,7,15,.75) 100%)';
   }
 

styles.css

@@ -824,12 +824,15 @@ button:focus{outline:none}
 .artist-hero{height:220px;border-radius:14px;overflow:hidden;position:relative;margin-bottom:24px;background:linear-gradient(135deg,var(--surface2),var(--surface))}
 .artist-hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(7,7,15,.85) 0%,transparent 100%);display:flex;align-items:flex-end;padding:20px 28px}
 .artist-hero-name{font-size:32px;font-weight:800;letter-spacing:-1px}
+.artist-hero-bg{display:none}
 .artist-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
 @media(min-width:769px){
   .artist-hero{height:320px;border-radius:16px}
   .artist-hero-overlay{padding:28px 36px}
   .artist-hero-name{font-size:46px;letter-spacing:-2px}
-  .artist-hero-img{object-position:center 30%}
+  /* Desktop: blurred backdrop fills width, sharp portrait sits at natural proportions on the right */
+  .artist-hero-bg{display:block;position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(28px) brightness(0.3) saturate(0.7);transform:scale(1.08)}
+  .artist-hero-img{top:0;right:0;bottom:0;left:auto;width:auto;height:100%;object-fit:unset}
 }
 
 /* ── MISC ── */