diff --git a/web/src/components/Bayt.astro b/web/src/components/Bayt.astro
new file mode 100644
index 00000000..7d2fe26b
--- /dev/null
+++ b/web/src/components/Bayt.astro
@@ -0,0 +1,9 @@
+---
+// The couplet line (from the logo concepts): two half-lines tapering outward from a ✤. Decorative; coloured by the palette.
+const s = 13, petal = `M0,0 C${.45 * s},${-.35 * s} ${.25 * s},${-.9 * s} 0,${-s} C${-.25 * s},${-.9 * s} ${-.45 * s},${-.35 * s} 0,0Z`;
+const misra = (a: number, b: number, y = 16, h = 6) => `M${a},${y} Q${(a + b) / 2},${y - h * .9} ${b},${y - h / 2} L${b},${y + h / 2} Q${(a + b) / 2},${y + h * .9} ${a},${y}Z`;
+---
+<svg class="bayt" viewBox="0 0 280 32" aria-hidden="true">
+  <path class="misra" d={misra(124, 4)} /><path class="misra" d={misra(156, 276)} />
+  <g class="gul">{[45, 135, 225, 315].map((a) => <path transform={`translate(140 16) rotate(${a})`} d={petal} />)}<circle class="hole" cx="140" cy="16" r={s * .16} /></g>
+</svg>
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index b0f78b1f..d307a83b 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -12,13 +12,14 @@ const count = new Set(sections.flatMap((s) => s.poets.map((p) => p.id))).size;
 const token = Astro.locals.user ? Astro.cookies.get(COOKIE)?.value : undefined;
 const marked: number[] = token ? (await asUser(token, '/api/library/marks')).data.poets ?? [] : [];
 const card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`;
+import Bayt from '../components/Bayt.astro';
 ---
 <Base>
-  <section class="hero">
-    <img class="hero-logo" src="/logo/turanj.svg" width="120" height="120" alt="" />
-    <h1>اردو کا کلاسیکی ادب</h1>
-    <p>{ud(count)} شعرا و ادبا · ویکی ماخذ کے عوامی ملکیت متون</p>
+  <section class="masthead">
+    <img class="masthead-logo" src="/logo/turanj.svg" width="220" height="220" alt="" />
+    <h1><span class="name">دیوان</span><Bayt /><span class="tagline">اردو کا کلاسیکی ادب</span></h1>
   </section>
+  <p class="hero-count">{ud(count)} شعرا و ادبا · ویکی ماخذ کے عوامی ملکیت متون</p>
 
   {sections.length === 0 && <p class="muted">مواد تیار کیا جا رہا ہے۔ براہِ کرم کچھ دیر بعد دوبارہ تشریف لائیں۔</p>}
 
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index 5b27affa..d181e095 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -146,6 +146,21 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background:
 .hero { text-align: center; }
 .hero-logo { display: block; width: clamp(84px, 22vw, 120px); height: auto; margin: 4px auto 0; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .12)); }
 .hero p { margin: 0; }
+/* the home page masthead (as the share image): the logo beside دیوان and the headline, in a gold double frame */
+.masthead { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 7vw, 72px); margin: 4px 0 10px;
+  padding: clamp(18px, 4vw, 34px) clamp(16px, 4vw, 40px); background: var(--surface-raised);
+  border: 6px solid var(--accent); outline: 1.5px solid var(--accent); outline-offset: -14px; border-radius: 4px; }
+.masthead-logo { flex: none; width: clamp(110px, 24vw, 210px); height: auto; filter: drop-shadow(0 2px 8px rgb(0 0 0 / .12)); }
+.masthead h1 { display: flex; flex-direction: column; align-items: center; margin: 0; font-weight: 700; }
+.masthead h1::after { display: none; }
+.masthead .name { font-family: 'Noto Nastaliq Urdu', serif; color: var(--brand); font-size: clamp(2.8rem, 10vw, 5.2rem); line-height: 1.5;
+  margin-top: -.4em; padding-bottom: .3em; } /* Nastaliq: empty room above the ink, ink .27em below the box (measured) */
+/* the couplet line under the name: half-lines in the palette's blue, the ✤ in vermilion */
+.bayt { display: block; width: clamp(150px, 70%, 280px); height: auto; margin: 2px auto 16px; }
+.bayt .misra { fill: var(--action); } .bayt .gul { fill: var(--brand); } .bayt .hole { fill: var(--surface-raised); }
+.masthead .tagline { font-family: 'Noto Nastaliq Urdu', serif; color: var(--action); /* the palette's blue, as in the share image */ font-size: clamp(1.15rem, 3.6vw, 1.9rem); line-height: 2.1; }
+.hero-count { text-align: center; color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 6px; }
+@media (max-width: 520px) { .masthead { flex-direction: column; gap: 4px; } }
 
 /* poet / category */
 .intro { background: var(--surface-raised); border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 18px; white-space: pre-line; text-align: justify; }