fix: extend recipe hero images into status bar safe area

Account for env(safe-area-inset-top) in the hero negative margin-top
so images fill the status bar area on edge-to-edge Android instead of
leaving empty space.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.21.1",
+	"version": "1.21.2",
 	"private": true,
 	"type": "module",
 	"scripts": {

src/lib/components/recipes/TitleImgParallax.svelte

@@ -46,7 +46,7 @@
 
 .section {
   margin-bottom: -20vh;
-  margin-top: calc(-3.5rem - 12px);
+  margin-top: calc(-3.5rem - 12px - env(safe-area-inset-top, 0px));
   transform-origin: center top;
   transform: scaleY(calc(1 - var(--scale)));
 }

src/routes/[recipeLang=recipeLang]/+page.svelte

@@ -137,7 +137,7 @@
 	margin-bottom: calc(var(--parallax-scale) * (20vh - min(60vh, 520px)));
 	transform-origin: center top;
 	transform: scaleY(calc(1 - var(--parallax-scale)));
-	margin-top: calc(-3.5rem - 12px);
+	margin-top: calc(-3.5rem - 12px - env(safe-area-inset-top, 0px));
 }
 @media (prefers-reduced-motion) {
 	.hero-section {