style: convert project sizing to scalable rem units with responsive root font scaling

src/components/ScenicHeroJourney.module.css

@@ -21,7 +21,7 @@
   position: relative;
   width: 100%;
   height: auto;
-  min-height: clamp(580px, 48vw, 700px);
+  min-height: clamp(36.25rem, 48vw, 43.75rem);
   overflow: hidden;
   background: var(--bg-page);
 }
@@ -120,7 +120,7 @@
 @media (max-width: 1100px) and (min-width: 651px) {
   .heroStage {
     height: auto;
-    min-height: clamp(540px, 64vw, 640px);
+    min-height: clamp(33.75rem, 64vw, 40rem);
   }
 
   /* Left — visible slice ≈ width - 150px, always < content padding */
@@ -156,20 +156,20 @@
 @media (max-width: 650px) {
   .heroStage {
     height: auto;
-    min-height: 540px;
+    min-height: 33.75rem;
   }
 
   .backdropLeft {
     top: clamp(75px, 16vw, 95px);
     bottom: auto;
-    left: clamp(-140px, calc(20vw - 230px), -100px);
+    left: clamp(-100px, calc(20vw - 230px), -100px);
     width: clamp(200px, 44vw, 250px);
   }
 
   .backdropRight {
     top: clamp(82px, 18vw, 102px);
     bottom: auto;
-    right: clamp(-150px, calc(20vw - 240px), -120px);
+    right: clamp(-130px, calc(20vw - 240px), -120px);
     width: clamp(210px, 46vw, 260px);
   }
 
@@ -191,7 +191,7 @@
 @media (min-width: 1441px) {
   .heroStage {
     height: auto;
-    min-height: 680px;
+    min-height: 42.5rem;
     overflow: visible;
   }