diff --git a/website/.vitepress/theme/HeroImage.vue b/website/.vitepress/theme/HeroImage.vue
index a25009d..6e2420f 100644
--- a/website/.vitepress/theme/HeroImage.vue
+++ b/website/.vitepress/theme/HeroImage.vue
@@ -38,8 +38,11 @@ import { withBase } from 'vitepress'
   text-align: center;
 }
 @media (min-width: 960px) {
+  /* Fill the image column rather than a fixed width, so it never overflows
+     into the (possibly long, e.g. Burmese) heading. */
   .hero-demo-img {
-    width: 620px;
+    width: 100%;
+    max-width: 560px;
   }
 }
 @media (max-width: 640px) {
diff --git a/website/.vitepress/theme/custom.css b/website/.vitepress/theme/custom.css
index a61e311..16b7b89 100644
--- a/website/.vitepress/theme/custom.css
+++ b/website/.vitepress/theme/custom.css
@@ -104,6 +104,18 @@ html[data-theme] {
   --vp-home-hero-image-filter: blur(76px);
 }
 
+/* Keep the hero demo strictly in its own column so long headings (e.g. Burmese)
+   never collide with it: cap the text column and cancel VitePress's leftward
+   image shift. */
+@media (min-width: 960px) {
+  .VPHero.has-image .container .main {
+    max-width: 500px;
+  }
+  .VPHero .image-container {
+    transform: translateY(-32px);
+  }
+}
+
 /* Native widgets (scrollbars, form controls) follow each theme. */
 html[data-theme='dark'],
 html[data-theme='nord'],