diff --git a/frontend/src/routes/art/+page.svelte b/frontend/src/routes/art/+page.svelte
index a13369b..fc4eb24 100644
--- a/frontend/src/routes/art/+page.svelte
+++ b/frontend/src/routes/art/+page.svelte
@@ -82,6 +82,8 @@
   });
   let dlName = $derived(art ? `${(art.title || 'artwork').replace(/[^\w \-]+/g, '').trim()}.jpg` : 'artwork.jpg');
 
+  let detailsOpen = $state(true);   // mobile: collapse the writeup to bring the controls up near the art
+
   let copied = $state(false);
   async function share() {
     const url = art?.source_url || location.href;
@@ -127,14 +129,24 @@
             {#if attribution}<p class="attribution">{attribution}</p>{/if}
           </div>
           <div class="body">
-            {#if art.blurb}<p class="blurb">{art.blurb}</p>{/if}
-            <div class="meta-cols">
-              <div class="meta"><span class="meta-label">Collection</span><span class="meta-val">{art.museum}</span></div>
-              {#if art.license}<div class="meta"><span class="meta-label">Rights</span><span class="meta-val">{art.license}</span></div>{/if}
+            <button class="details-toggle" onclick={() => (detailsOpen = !detailsOpen)}
+                    aria-expanded={detailsOpen} aria-controls="art-details">
+              About this piece
+              <svg class="chev" class:open={detailsOpen} viewBox="0 0 24 24" width="14" height="14"
+                   fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M6 9l6 6 6-6" />
+              </svg>
+            </button>
+            <div class="body-content" id="art-details" class:collapsed={!detailsOpen}>
+              {#if art.blurb}<p class="blurb">{art.blurb}</p>{/if}
+              <div class="meta-cols">
+                <div class="meta"><span class="meta-label">Collection</span><span class="meta-val">{art.museum}</span></div>
+                {#if art.license}<div class="meta"><span class="meta-label">Rights</span><span class="meta-val">{art.license}</span></div>{/if}
+              </div>
+              {#if art.source_url}
+                <a class="cta" href={art.source_url} target="_blank" rel="noopener">View at {art.museum} →</a>
+              {/if}
             </div>
-            {#if art.source_url}
-              <a class="cta" href={art.source_url} target="_blank" rel="noopener">View at {art.museum} →</a>
-            {/if}
           </div>
         </div>
 
@@ -270,7 +282,9 @@
     box-shadow: 0 16px 40px -22px rgba(120, 95, 50, 0.32);
   }
   .left { flex: 1; min-width: 0; padding: clamp(28px, 4vw, 50px) clamp(24px, 3.4vw, 46px); display: flex; flex-direction: column; justify-content: center; }
-  .head, .body { display: flex; flex-direction: column; }   /* so .cta align-self works (no overlap) */
+  .head, .body, .body-content { display: flex; flex-direction: column; }   /* so .cta align-self works */
+  .details-toggle { display: none; }    /* desktop: the writeup is always shown in the left column */
+  .chev { transition: transform 0.2s ease; }
   .kicker { display: inline-flex; align-items: center; gap: 9px; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
   .kicker-rule { width: 18px; height: 2px; background: var(--accent); border-radius: 2px; }
   .art-title { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); margin: 14px 0 0; }
@@ -313,7 +327,17 @@
     .left, .right { display: contents; }              /* promote head/body/art-stage/controls */
     .head { order: 1; padding: clamp(22px, 5vw, 28px) clamp(18px, 5vw, 22px) 14px; }
     .art-stage { order: 2; background: var(--art-band); padding: 22px 18px; box-sizing: border-box; }
-    .body { order: 3; padding: 20px clamp(18px, 5vw, 22px) 4px; }
+    .body { order: 3; padding: 6px clamp(18px, 5vw, 22px) 4px; }
+    /* writeup collapses (tap "About this piece") so the controls rise up beside the art */
+    .details-toggle {
+      display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
+      background: none; border: none; cursor: pointer; padding: 14px 0;
+      font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
+      text-transform: uppercase; color: var(--label); -webkit-tap-highlight-color: transparent;
+      border-top: 1px solid rgba(120, 95, 50, 0.16);
+    }
+    .chev.open { transform: rotate(180deg); }
+    .body-content.collapsed { display: none; }
     .controls { order: 4; width: auto; max-width: none; box-sizing: border-box;
                 margin: 16px clamp(14px, 4vw, 18px) clamp(20px, 5vw, 24px);
                 background: #fff; border: 1px solid #ece3d0; border-radius: 16px; padding: 18px 16px; }
@@ -513,8 +537,10 @@
     /* The image's SHORT edge + the frame's rail/mat map to the phone's narrow width, so
        cap it there (max-height, pre-rotation) with a modest fixed frame so the whole
        moulding always fits; the long edge (max-width → screen height) stays generous. */
-    .lightbox.rotate .lb-frame { max-width: 92vh; --rail: 16px; --mat: 16px; }
-    .lightbox.rotate .lb-frame img { max-width: 88vh; max-height: 74vw; }
+    .lightbox.rotate .lb-frame { max-width: 92vh; }   /* rail/mat keep scaling with thickness */
+    /* short edge (→ screen width after rotation) capped low enough that the frame fits even
+       at max thickness; the long edge stays generous */
+    .lightbox.rotate .lb-frame img { max-width: 88vh; max-height: 60vw; }
     .lightbox.rotate .lb-frame.frame--none img { max-width: 94vh; max-height: 92vw; }
   }
 </style>