Finished book page: move QR code up to the top right of the hero; v2.10.5

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

src/App.css

@@ -9976,6 +9976,12 @@
   margin-bottom: 2.5rem;
 }
 
+/* Text column grows; the QR code sits at the top right of the hero */
+.finished-series-hero > div:not(.finished-series-cd):not(.finished-series-qr) {
+  flex: 1;
+  min-width: 0;
+}
+
 .finished-series-hero-img {
   width: 160px;
   height: 160px;
@@ -10098,16 +10104,16 @@
 }
 
 .finished-series-qr {
-  margin-top: 1.25rem;
+  flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.35rem;
-  width: fit-content;
+  gap: 0.45rem;
+  width: 140px;
 }
 
 .finished-series-qr-img {
-  width: 100px;
-  height: 100px;
+  width: 140px;
+  height: 140px;
   border-radius: 6px;
   border: 1px solid rgba(201, 168, 76, 0.25);
   display: block;
@@ -10405,6 +10411,15 @@
     gap: 1rem;
   }
 
+  .finished-series-qr {
+    width: 120px;
+  }
+
+  .finished-series-qr-img {
+    width: 120px;
+    height: 120px;
+  }
+
   .finished-series-hero-img {
     width: 120px;
     height: 120px;

src/App.tsx

@@ -1964,15 +1964,15 @@ function FinishedSeriesPage({ content }: { content: SiteContent }) {
                 </Link>
               )}
             </div>
-            {book.downloadQrUrl && book.downloadUrl && (
-              <div className="finished-series-qr">
-                <a href={book.downloadUrl} target="_blank" rel="noopener noreferrer">
-                  <img src={book.downloadQrUrl} alt={`QR code to download the ${book.title} album`} className="finished-series-qr-img" />
-                </a>
-                <p className="finished-series-qr-label">Scan to download the full album</p>
-              </div>
-            )}
           </div>
+          {book.downloadQrUrl && book.downloadUrl && (
+            <div className="finished-series-qr">
+              <a href={book.downloadUrl} target="_blank" rel="noopener noreferrer">
+                <img src={book.downloadQrUrl} alt={`QR code to download the ${book.title} album`} className="finished-series-qr-img" />
+              </a>
+              <p className="finished-series-qr-label">Scan to download the full album</p>
+            </div>
+          )}
         </div>
         <FinishedSeriesEpisodes highlights={book.highlights ?? []} episodes={episodes} loading={loading} />
       </main>