feat(about): implement 90-degree orthogonal isometric river with large-screen overflow and responsive timeline

src/components/RiverJourney.module.css

@@ -1,7 +1,7 @@
 .journeySection {
   position: relative;
   width: 100%;
-  height: 1050px;
+  height: 65.625rem;
   overflow: hidden;
   background: var(--bg-page);
 }
@@ -87,11 +87,11 @@
     transform var(--motion-duration-default) var(--motion-ease-out);
 }
 
-.step05 { top: 116px; right: 46px; }
-.step04 { top: 334px; right: 250px; }
-.step03 { top: 500px; left: 48%; }
-.step02 { top: 690px; left: 25%; }
-.step01 { top: 826px; left: 70px; }
+.step05 { top: 7.25rem; right: 2.875rem; }
+.step04 { top: 20.875rem; right: 15.625rem; }
+.step03 { top: 31.25rem; left: 48%; }
+.step02 { top: 43.125rem; left: 25%; }
+.step01 { top: 51.625rem; left: 4.375rem; }
 
 .stepNumber {
   flex: 0 0 auto;
@@ -124,11 +124,11 @@
     width: 14.375rem;
   }
 
-  .step05 { top: 90px; right: 32px; }
-  .step04 { top: 300px; right: 10%; }
-  .step03 { top: 490px; left: 48%; }
-  .step02 { top: 690px; left: 24%; }
-  .step01 { top: 850px; left: 32px; }
+  .step05 { top: 5.625rem; right: 2rem; }
+  .step04 { top: 18.75rem; right: 10%; }
+  .step03 { top: 30.625rem; left: 48%; }
+  .step02 { top: 43.125rem; left: 24%; }
+  .step01 { top: 53.125rem; left: 2rem; }
 }
 
 @media (max-width: 760px) {
@@ -172,7 +172,7 @@
     flex-direction: column;
     gap: var(--space-3);
     margin-top: 13.75rem;
-    padding-left: 1.25rem;
+    padding-left: 1.5rem;
   }
 
   .stepsList::before {
@@ -180,8 +180,8 @@
     position: absolute;
     top: 1.25rem;
     bottom: 1.25rem;
-    left: 0.3125rem;
-    width: 1px;
+    left: 0.5rem;
+    width: 2px;
     background: var(--border-strong);
   }
 
@@ -203,18 +203,33 @@
     content: '';
     position: absolute;
     top: 1.375rem;
-    left: -1.25rem;
-    width: 0.5625rem;
-    height: 0.5625rem;
+    left: -1rem;
+    width: 0.625rem;
+    height: 0.625rem;
+    transform: translateX(-50%);
     border: 3px solid var(--bg-page);
     border-radius: 50%;
     background: var(--accent-default);
   }
 }
 
+@media (min-width: 1441px) {
+  .journeySection {
+    overflow: visible;
+  }
+
+  .journeySection::after {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+    width: 100vw;
+  }
+}
+
 @media (hover: hover) and (pointer: fine) {
   .stepCard:hover {
     border-color: var(--accent-default);
     transform: translateY(-2px);
   }
 }
+