/art mobile: fix horizontal overflow (controls width:100% + margins)

The mobile controls card kept its base width:100% and also got side margins,
so 100%+margins overflowed the viewport → sideways scroll. Set width:auto
(flex stretch fills minus margins) + box-sizing:border-box, and add
overflow-x:clip on .room as a seatbelt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/routes/art/+page.svelte

@@ -240,6 +240,7 @@
     font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
     display: flex;
     flex-direction: column;
+    overflow-x: clip;        /* seatbelt: nothing can scroll the page sideways */
   }
 
   /* /art runs wider than the hub's 1180 column — the artwork is the point, and the
@@ -313,7 +314,8 @@
     .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; }
-    .controls { order: 4; max-width: none; margin: 16px clamp(14px, 4vw, 18px) clamp(20px, 5vw, 24px);
+    .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; }
     .meta-cols { gap: 28px; }
     .cta { align-self: stretch; text-align: center; }