fix: artist hero uses <img> with responsive object-position for better crop

Switching from background-image (inline JS, single position for all sizes)
to an <img> element lets CSS media queries apply different object-position:
- Mobile: center top (portrait images show face in upper portion)
- Desktop: center 30% (wide banner, lower anchor avoids showing only hair)

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

src/views/detail.js

@@ -70,6 +70,7 @@ export async function loadArtistDetail(artist) {
   const tsEl   = document.getElementById('artist-topsongs-section');
   const albEl  = document.getElementById('artist-albums-section');
   hero.style.background = 'linear-gradient(135deg, var(--surface2), var(--surface))';
+  hero.querySelector('.artist-hero-img')?.remove();
   const overlay = hero.querySelector('.artist-hero-overlay');
   if(overlay) overlay.style.background = '';
   [bioEl, simEl, tsEl, albEl].forEach(el => { if(el) el.innerHTML = ''; });
@@ -108,7 +109,12 @@ export async function loadArtistDetail(artist) {
   // ── Hero ──
   const img = imgRes.status === 'fulfilled' ? imgRes.value : null;
   if(img) {
-    hero.style.background = `url('${img}') center 20%/cover no-repeat`;
+    hero.style.background = '';
+    const heroImg = document.createElement('img');
+    heroImg.className = 'artist-hero-img';
+    heroImg.alt = '';
+    heroImg.src = img;
+    hero.insertBefore(heroImg, hero.firstChild);
     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%)';
   }