---
/**
 * 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>