Add footer partner links and simplify preview behavior

Footer changes:
- Add "Treefort Music Fest 2026" and "Powered by Spotify Web API" links
- Styled with zine aesthetic (thick borders, box shadows)

Preview section behavior:
- Two-column layout maintained throughout (preview left, auth/loading right)
- Loading section appears in right column while scanning
- Preview removed when real results load
- Mobile: auth/loading on top, preview below

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: commitconfirm

src/callback.html

@@ -94,6 +94,10 @@ <h3>Your Treefort Matches</h3>
       </main>
 
       <footer>
+        <div class="footer-partners">
+          <a href="https://treefortmusicfest.com/" target="_blank" rel="noopener noreferrer" class="partner-link">Treefort Music Fest 2026</a>
+          <a href="https://developer.spotify.com/documentation/web-api" target="_blank" rel="noopener noreferrer" class="partner-link">Powered by Spotify Web API</a>
+        </div>
         <p class="disclaimer">Not affiliated with, endorsed by, or associated with Treefort Music Fest or Spotify.</p>
         <p class="disclaimer">Use at your own risk — no guarantees of accuracy.</p>
         <p class="footer-links">

src/index.html

@@ -94,6 +94,10 @@ <h3>Your Treefort Matches</h3>
       </main>
 
       <footer>
+        <div class="footer-partners">
+          <a href="https://treefortmusicfest.com/" target="_blank" rel="noopener noreferrer" class="partner-link">Treefort Music Fest 2026</a>
+          <a href="https://developer.spotify.com/documentation/web-api" target="_blank" rel="noopener noreferrer" class="partner-link">Powered by Spotify Web API</a>
+        </div>
         <p class="disclaimer">Not affiliated with, endorsed by, or associated with Treefort Music Fest or Spotify.</p>
         <p class="disclaimer">Use at your own risk — no guarantees of accuracy.</p>
         <p class="footer-links">

src/style.css

@@ -350,6 +350,38 @@ footer {
   font-size: 0.875rem;
 }
 
+.footer-partners {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.partner-link {
+  display: inline-block;
+  font-family: 'Ubuntu', sans-serif;
+  font-weight: 700;
+  font-size: 1rem;
+  padding: 0.75rem 1.25rem;
+  background-color: var(--white);
+  color: var(--black);
+  text-decoration: none;
+  border: 3px solid var(--black);
+  box-shadow: 3px 3px 0 var(--black);
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.partner-link:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 5px 5px 0 var(--black);
+}
+
+.partner-link:active {
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 var(--black);
+}
+
 .disclaimer {
   margin-bottom: 0.5rem;
   color: #666;
@@ -830,9 +862,10 @@ footer {
   gap: 2rem;
 }
 
-/* Mobile: auth/setup first, preview second */
+/* Mobile: auth/setup/loading first, preview second */
 .landing-grid #auth-section,
-.landing-grid #setup-section {
+.landing-grid #setup-section,
+.landing-grid #loading-section {
   order: 1;
 }
 
@@ -856,7 +889,8 @@ footer {
   }
 
   .landing-grid #auth-section,
-  .landing-grid #setup-section {
+  .landing-grid #setup-section,
+  .landing-grid #loading-section {
     order: 2;
     margin: 0;
     max-width: none;

src/ui.js

@@ -187,7 +187,7 @@ export function initUI(lineup) {
  * @param {number} trackCount - Number of tracks fetched so far
  */
 export function showLoading(trackCount = 0) {
-  const main = document.querySelector('main');
+  const landingGrid = document.querySelector('.landing-grid');
 
   // Check if loading section already exists
   let loadingSection = document.getElementById('loading-section');
@@ -199,10 +199,12 @@ export function showLoading(trackCount = 0) {
       authSection.classList.add('hidden');
     }
 
-    // Create loading section
+    // Create loading section inside landing-grid (replaces auth section's spot)
     loadingSection = document.createElement('section');
     loadingSection.id = 'loading-section';
-    main.insertBefore(loadingSection, main.firstChild);
+    if (landingGrid) {
+      landingGrid.appendChild(loadingSection);
+    }
   }
 
   loadingSection.innerHTML = `
@@ -232,6 +234,18 @@ export function showResults(matchedArtists, lastUpdated) {
     authSection.classList.add('hidden');
   }
 
+  // Remove preview section - real results replace it
+  const previewSection = document.getElementById('preview-section');
+  if (previewSection) {
+    previewSection.remove();
+  }
+
+  // Hide landing grid
+  const landingGrid = document.querySelector('.landing-grid');
+  if (landingGrid) {
+    landingGrid.classList.add('hidden');
+  }
+
   // Show results section
   let resultsSection = document.getElementById('results-section');
   if (!resultsSection) {
@@ -426,12 +440,13 @@ function renderSimilarArtists(container, similarArtists) {
 }
 
 /**
- * Show the auth section (initial state)
+ * Show the auth section (after Client ID is set, before auth)
  */
 export function showAuth() {
   const authSection = document.getElementById('auth-section');
   const resultsSection = document.getElementById('results-section');
   const loadingSection = document.getElementById('loading-section');
+  const setupSection = document.getElementById('setup-section');
 
   if (authSection) {
     authSection.classList.remove('hidden');
@@ -442,6 +457,10 @@ export function showAuth() {
   if (loadingSection) {
     loadingSection.remove();
   }
+  // Hide setup section when showing auth
+  if (setupSection) {
+    setupSection.classList.add('hidden');
+  }
 }
 
 /**