feat(website): brand layer — teal palette, table logo, wordmark, footer

Anchor the site to the product's identity (Phase B branding):
- Accent palette mapped to the app's in-TUI teal (--sl-color-accent-*,
  light + dark); trim the splash hero's oversized desktop bottom padding.
- Header logo: a database-table glyph with a teal primary-key cell
  (light/dark variants); favicon redrawn to match.
- Landing wordmark 'RELational PLAYground': teal picks out REL+PLAY
  ('relplay', the domain) and R/D/B/M/S (spelling out RDBMS). Sizes
  locked in em off one master scale so the lockup zooms as a rigid unit.
- Footer override: default footer + an understated company (Lazy
  Evaluation Ltd) and source/issues line.

No engine names or 'DSL' in user-facing copy.

website/src/components/Footer.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * Footer override: render Starlight's default footer (pagination, last-updated,
+ * "Built with Starlight"), then append a small, understated brand line — the
+ * company (linked to its disclosures) and an unobtrusive source/issues link
+ * (true to "people can join in, but don't advertise it loudly").
+ */
+import Default from '@astrojs/starlight/components/Footer.astro';
+---
+
+<Default><slot /></Default>
+
+<div class="relplay-footer">
+	<p>
+		Made by <a href="https://www.lazyevaluation.biz/">Lazy Evaluation Ltd</a>
+		<span class="sep">·</span>
+		<a href="https://git.lazyeval.net/oli/rdbms-playground">Source &amp; issues</a>
+	</p>
+</div>
+
+<style>
+	.relplay-footer {
+		margin-top: 1rem;
+		padding-top: 1rem;
+		border-top: 1px solid var(--sl-color-hairline);
+	}
+	.relplay-footer p {
+		margin: 0;
+		font-size: var(--sl-text-xs);
+		color: var(--sl-color-gray-3);
+	}
+	.relplay-footer a {
+		color: var(--sl-color-gray-2);
+		text-decoration: none;
+	}
+	.relplay-footer a:hover {
+		color: var(--sl-color-text-accent);
+		text-decoration: underline;
+	}
+	.relplay-footer .sep {
+		margin: 0 0.4rem;
+		opacity: 0.6;
+	}
+</style>

website/src/components/Wordmark.astro

@@ -0,0 +1,78 @@
+---
+/**
+ * Brand lockup — "RELational PLAYground" doing double duty:
+ *
+ *   RELational              ┐
+ *   DataBase Management Sys  │  PLAYground   (PLAYground large, spanning both rows)
+ *
+ * Two hidden readings, both drawn out in teal:
+ *   • the domain brand  →  REL + PLAY  =  "relplay"
+ *   • the acronym       →  R(elational) D(ataBase) M(anagement) S(ystem) = RDBMS,
+ *     so a learner who doesn't know what RDBMS stands for sees it spelled out.
+ *
+ * Decorative; the product name stays "RDBMS Playground". The DOM order reads
+ * naturally to screen readers: "RELational DataBase Management System PLAYground".
+ */
+---
+
+<p class="relplay-lockup">
+	<span class="rl">
+		<span class="rl-left">
+			<span class="rl-rel"><span class="t">REL</span><span class="m">ational</span></span>
+			<span class="rl-dbms"
+				><span class="t">D</span>ata<span class="t">B</span>ase <span class="t">M</span
+				>anagement <span class="t">S</span>ystem</span
+			>
+		</span>
+		<span class="rl-play"><span class="t">PLAY</span><span class="m">ground</span></span>
+	</span>
+</p>
+
+<style>
+	.relplay-lockup {
+		text-align: center;
+		margin: 0.5rem 0 2.25rem;
+	}
+	/* The whole lockup scales from ONE master font-size: every child size and
+	   margin below is in `em`, so the composition is rigid and just zooms as a
+	   unit (like an image) — it can't break differently across viewports. The
+	   master clamp keeps it ~2rem on desktop (REL 2rem / PLAY 4rem) and shrinks
+	   it enough to fit small phones without overflow. */
+	.rl {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4em;
+		font-family:
+			ui-monospace, 'Cascadia Code', 'JetBrains Mono', 'Source Code Pro', Menlo,
+			Consolas, monospace;
+		letter-spacing: -0.02em;
+		font-weight: 500;
+		text-align: left;
+		font-size: clamp(1rem, 0.5rem + 2.6vw, 2rem);
+	}
+	.rl-left {
+		display: inline-flex;
+		flex-direction: column;
+		line-height: 1.05;
+	}
+	.rl-rel {
+		font-size: 1em; /* = master → 2rem on desktop */
+	}
+	.rl-dbms {
+		margin-top: 0.3em;
+		font-size: 0.4em; /* = 0.8rem on desktop */
+		white-space: nowrap;
+	}
+	.rl-play {
+		font-size: 2em; /* = 4rem on desktop */
+		line-height: 0.95;
+		margin-top: 0.05em; /* ≈ your 0.2rem nudge: it sat a touch high */
+	}
+	.t {
+		color: var(--sl-color-text-accent);
+		font-weight: 700;
+	}
+	.m {
+		color: var(--sl-color-gray-3);
+	}
+</style>