Hero editor: larger faithful canvas + real moon from the hero art

Addresses feedback that the editor was too small/cramped (elements overlapping)
and that the generated CSS moon looked bad.

- AdminLayout: the /admin/hero view now uses the full content width (no 1000px cap)
- HeroEditor canvas is a scaled 1280x720 "stage" (transform: scale to fit the
  column, capped at ~66vh). Because viewport-unit fonts and % positions scale
  together, the canvas is now a faithful miniature of the live hero — the default
  text block and CTA buttons no longer overlap. Drag snaps to the 8px stage grid;
  resize math is scale-aware.
- Moon element now renders the actual moon cropped from the hero artwork
  (client/public/assets/img/hero-moon.png, circular alpha mask) instead of the CSS
  dot; MoonPanel exposes size + glow.

Verified: at 1440px the canvas is ~785x442 with the panel beside it, default
elements don't overlap, and the moon loads the real image. Build clean.

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

client/src/routes/admin/AdminLayout.jsx

@@ -41,6 +41,8 @@ export default function AdminLayout() {
   const navigate = useNavigate()
   const location = useLocation()
   const title = TITLES[location.pathname] || 'Admin'
+  // The hero canvas editor needs room — let it use the full content width.
+  const wide = location.pathname === '/admin/hero'
   const modeDot = mode === 'live' ? 'var(--mode-live)' : 'var(--mode-maint)'
 
   // Keep the admin out of search indexes (belt-and-suspenders with robots.txt).
@@ -147,7 +149,7 @@ export default function AdminLayout() {
           </div>
         </header>
 
-        <div style={{ flex: 1, padding: '30px 32px 60px', maxWidth: 1000, width: '100%' }}>
+        <div style={{ flex: 1, padding: '30px 32px 60px', maxWidth: wide ? 'none' : 1000, width: '100%' }}>
           <Outlet />
         </div>
       </main>