diff --git a/e2e/navigation.spec.ts b/e2e/navigation.spec.ts
index adda410..36b72dd 100644
--- a/e2e/navigation.spec.ts
+++ b/e2e/navigation.spec.ts
@@ -34,6 +34,26 @@ test.describe('Navigation', () => {
 		await expect(footer.locator('a[href="/feed.xml"]')).toBeVisible();
 		await expect(footer.locator('a[href="/feed.json"]')).toBeVisible();
 	});
+
+	test('footer keeps bottom clearance in preview-sized viewports', async ({ page }) => {
+		await page.setViewportSize({ width: 390, height: 844 });
+		await page.goto('/cv');
+		await page.evaluate(() => window.scrollTo(0, document.documentElement.scrollHeight));
+
+		const clearance = await page.evaluate(() => {
+			const footer = Array.from(document.querySelectorAll('footer')).at(-1);
+			if (!footer) return 0;
+
+			const visibleDescendants = Array.from(footer.querySelectorAll('*'))
+				.map((element) => element.getBoundingClientRect())
+				.filter((rect) => rect.width > 0 && rect.height > 0);
+			const lowestContentBottom = Math.max(...visibleDescendants.map((rect) => rect.bottom));
+
+			return window.innerHeight - lowestContentBottom;
+		});
+
+		expect(clearance).toBeGreaterThanOrEqual(88);
+	});
 });
 
 test.describe('About Page', () => {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8e2873e..47cd633 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -288,7 +288,7 @@
 		{@render children()}
 	</main>
 
-	<footer class="bg-surface-100-900 border-t border-surface-300-700 py-6 text-center text-sm text-surface-500">
+	<footer class="bg-surface-100-900 border-t border-surface-300-700 pt-6 pb-[calc(6rem+env(safe-area-inset-bottom))] md:pb-16 text-center text-sm text-surface-500">
 		<div class="container mx-auto px-4 flex flex-wrap items-center justify-center gap-x-4 gap-y-2">
 			<p>
 				Dedicated to the <a