feat(brand): BRAND_* env scheme — instance branding without a rebuild

Replace baked-in UOM/MysticMoon/UOMysticmoon branding with a BRAND_* env
scheme so one prebuilt image runs as any shard; UOMysticmoon becomes the
first tenant that sets these vars rather than a special case in the code.

Architecture (chosen because the app ships as a prebuilt image):
- server/src/config/brand.js + bot/src/brand.js read BRAND_* once at boot,
  with Runic Gateway defaults.
- Text/colors reach the SPA at RUNTIME through the existing public settings
  API (settings.model.getPublic -> SiteContext), so no client rebuild. The
  admin-editable site title + contact email still override BRAND_NAME/email.
- SiteContext applies BRAND_ACCENT_COLOR to the --accent CSS var at runtime.
- Express templates the built index.html <title>/description/OG/favicon at
  serve time from BRAND_* (renderIndexHtml in app.js).
- Server-side consumers read brand directly: emails, TOTP issuer, API docs,
  boot logs, HTML error page. Bot uses it for embed color + logs.

Assets: logo/hero/favicon delivered from a ./brand:/app/brand bind-mount
(BRAND_LOGO/HERO/FAVICON), with neutral defaults baked in; hero falls back
to a built-in image when unset.

Scope: also genericized package.json names (uomysticmoon-* -> runic-gateway-*)
and the DB_NAME/DB_USER/COOKIE_NAME code defaults (runic_gateway/runic/
rg_token). Production keeps its real values by pinning them in .env — see
.env.uomysticmoon.example, which reproduces the exact UOMysticmoon identity
(proof the substitution works). Changing a deployed COOKIE_NAME invalidates
existing sessions, so UOMysticmoon pins uomm_token.

Verified: 193 server tests pass, client builds, app.js loads + templates the
built index.html, brand transform injects title/description/OG/favicon.

client/src/routes/public/About.jsx

@@ -3,14 +3,14 @@ import PageHeader from '../../components/PageHeader.jsx'
 import { useSite } from '../../contexts/SiteContext.jsx'
 
 export default function About() {
-  const { contactEmail } = useSite()
+  const { contactEmail, siteShortName } = useSite()
   return (
     <PublicLayout section="website">
       <div className="shell-narrow page-body">
-        <PageHeader eyebrow="About" title="About Mysticmoon" />
+        <PageHeader eyebrow="About" title={`About ${siteShortName}`} />
         <div className="prose">
           <p>
-            Mysticmoon is an independent, privately-run Ultima Online shard built by a small group of long-time players.
+            {siteShortName} is an independent, privately-run Ultima Online shard built by a small group of long-time players.
             It is not affiliated with or endorsed by the owners of Ultima Online — it is a labor of love for the old
             worlds and the friendships made in them.
           </p>

client/src/routes/public/Maintenance.jsx

@@ -2,14 +2,12 @@ import { Link } from 'react-router-dom'
 import MoonDot from '../../components/MoonDot.jsx'
 import { useSite } from '../../contexts/SiteContext.jsx'
 
-const HERO_BG =
-  "linear-gradient(180deg,rgba(11,15,20,0.55) 0%,rgba(11,15,20,0.74) 60%,rgba(11,15,20,0.92) 100%),url('/assets/img/uomysticmoon-main-hero.png')"
-
 export default function Maintenance() {
-  const { settings, contactEmail } = useSite()
+  const { settings, contactEmail, siteShortName, heroImage } = useSite()
+  const heroBg = `linear-gradient(180deg,rgba(11,15,20,0.55) 0%,rgba(11,15,20,0.74) 60%,rgba(11,15,20,0.92) 100%),url('${heroImage}')`
   const message =
     settings.maintenance_message ||
-    'Mysticmoon is in maintenance while we shape its towns, roads, and dungeons. The gates will open soon. Until then, follow along as the world wakes.'
+    `${siteShortName} is in maintenance while we shape its towns, roads, and dungeons. The gates will open soon. Until then, follow along as the world wakes.`
 
   return (
     <main
@@ -22,7 +20,7 @@ export default function Maintenance() {
         padding: '80px max(18px,calc((100% - 760px)/2))',
         overflow: 'hidden',
         backgroundColor: 'var(--bg-deep)',
-        backgroundImage: HERO_BG,
+        backgroundImage: heroBg,
         backgroundPosition: 'center',
         backgroundRepeat: 'no-repeat',
         backgroundSize: 'cover',

client/src/routes/public/News.jsx

@@ -4,9 +4,11 @@ import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
 import { useAsync } from '../../lib/useAsync.js'
 import { longDate } from '../../lib/format.js'
 import { api } from '../../api/client.js'
+import { useSite } from '../../contexts/SiteContext.jsx'
 
 export default function News() {
   const { loading, error, data } = useAsync(() => api.posts('news'))
+  const { siteShortName } = useSite()
   const posts = data || []
 
   return (
@@ -15,7 +17,7 @@ export default function News() {
         <PageHeader
           eyebrow="Development"
           title="News & Updates"
-          lead="Progress notes and announcements as Mysticmoon takes shape."
+          lead={`Progress notes and announcements as ${siteShortName} takes shape.`}
         />
         <section style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
           {loading && <Loading />}

client/src/routes/public/Portal.jsx

@@ -9,10 +9,10 @@ import { defaultLayout, parseLayout, heroBackground } from '../../lib/heroLayout
 const PREVIEW = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('preview') === '1'
 
 export default function Portal() {
-  const { settings } = useSite()
+  const { settings, siteShortName, siteTitle, heroImage } = useSite()
   const teaser =
     settings.homepage_teaser ||
-    'Mysticmoon is still being shaped beneath a midnight sky — a quiet preview for the news, screenshots, guides, and community notes to come as the world wakes.'
+    `${siteShortName} is still being shaped beneath a midnight sky — a quiet preview for the news, screenshots, guides, and community notes to come as the world wakes.`
 
   // Published layout (public). Falls back to the pre-populated default if missing,
   // malformed, the wrong version, or empty — so the hero is never blank.
@@ -34,9 +34,9 @@ export default function Portal() {
   }, [])
 
   const active = (PREVIEW && draft) || (published && published.elements.length ? published : null)
-  const layout = active || defaultLayout(teaser)
+  const layout = active || defaultLayout(teaser, siteTitle)
   const isDefault = !active
-  const bgStyle = heroBackground(layout, { isDefault })
+  const bgStyle = heroBackground(layout, { isDefault, defaultImage: heroImage })
   const elements = [...layout.elements].sort((a, b) => (a.z || 0) - (b.z || 0))
 
   return (

client/src/routes/public/Website.jsx

@@ -1,24 +1,26 @@
 import { Link } from 'react-router-dom'
 import PublicLayout from '../../components/PublicLayout.jsx'
 import PageHeader from '../../components/PageHeader.jsx'
+import { useSite } from '../../contexts/SiteContext.jsx'
 
 const CARDS = [
   { kicker: 'Gallery', title: 'Gameplay Pictures', body: 'Screenshots from towns, dungeons, events, and daily life on the shard.', to: '/site/screenshots' },
   { kicker: 'Updates', title: 'Development News', body: 'Progress notes, shard milestones, and public announcements.', to: '/site/news' },
   { kicker: 'Community', title: 'Five on Friday', body: 'Weekly questions, small previews, and notes from the team.', to: '/site/five-on-friday' },
   { kicker: 'Long-form', title: 'Monthly Newsletter', body: 'Fuller summaries for players who want the whole picture.', to: '/site/newsletter' },
-  { kicker: 'Reference', title: 'Wiki', body: 'Guides and reference pages for the Mysticmoon world.', to: '/wiki' },
+  { kicker: 'Reference', title: 'Wiki', body: 'Guides and reference pages for the game world.', to: '/wiki' },
   { kicker: 'Live', title: 'Shard Status', body: 'Launch state, test windows, and known issues.', to: '/site/status' },
 ]
 
 export default function Website() {
+  const { siteShortName } = useSite()
   return (
     <PublicLayout section="website">
       <div className="shell page-body">
         <PageHeader
           center
           eyebrow="Public portal"
-          title="Mysticmoon Website"
+          title={`${siteShortName} Website`}
           lead="A home for gameplay pictures, development updates, community posts, monthly newsletters, and weekly Five on Friday notes."
         />
         <section className="grid-3">