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

src/components/ExperienceSection.module.css

@@ -1,26 +1,26 @@
 .experienceSection {
   position: relative;
   width: 100%;
-  padding-top: 60px;
-  padding-bottom: 80px;
+  padding-top: 3.75rem;
+  padding-bottom: 5rem;
 }
 
 .timeline {
   display: flex;
   flex-direction: column;
   position: relative;
-  margin-top: 20px;
+  margin-top: 1.25rem;
 }
 
 .timelineItem {
   display: flex;
   position: relative;
-  min-height: 180px;
+  min-height: 11.25rem;
 }
 
 .spineColumn {
   position: relative;
-  width: 40px;
+  width: 2.5rem;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
@@ -28,11 +28,11 @@
 }
 
 .nodeDot {
-  width: 14px;
-  height: 14px;
+  width: 0.875rem;
+  height: 0.875rem;
   border-radius: 50%;
   background-color: var(--color-slate-400);
-  margin-top: 6px;
+  margin-top: 0.375rem;
   z-index: 2;
   transition:
     background-color var(--motion-duration-fast) ease,
@@ -46,8 +46,8 @@
 
 .verticalLine {
   position: absolute;
-  top: 20px;
-  bottom: 14px;
+  top: 1.25rem;
+  bottom: 0.875rem;
   width: 2px;
   background-color: var(--border-strong);
   z-index: 1;
@@ -56,21 +56,21 @@
 .itemContent {
   display: flex;
   flex-grow: 1;
-  padding-left: 20px;
-  padding-bottom: 36px;
-  gap: 36px;
+  padding-left: 1.25rem;
+  padding-bottom: 2.25rem;
+  gap: 2.25rem;
 }
 
 .identityCol {
-  width: 360px;
+  width: 22.5rem;
   flex-shrink: 0;
 }
 
 .metaRow {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 14px;
+  gap: 0.5rem;
+  margin-bottom: 0.875rem;
 }
 
 .dateBadge {
@@ -85,7 +85,7 @@
 .locationWrapper {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 0.25rem;
   font-size: var(--font-size-label-small);
   color: var(--text-muted);
 }
@@ -102,12 +102,12 @@
 .roleIdentityRow {
   display: flex;
   align-items: flex-start;
-  gap: 10px;
+  gap: 0.625rem;
 }
 
 .logoContainer {
-  width: 72px;
-  height: 72px;
+  width: 4.5rem;
+  height: 4.5rem;
   border-radius: var(--radius-md);
   overflow: hidden;
   background: transparent;
@@ -127,7 +127,7 @@
 .roleTitles {
   display: flex;
   flex-direction: column;
-  padding-top: 4px;
+  padding-top: 0.25rem;
 }
 
 .roleTitle {
@@ -147,36 +147,36 @@
 
 .detailsCol {
   flex-grow: 1;
-  max-width: 820px;
-  padding-top: 4px;
+  max-width: 51.25rem;
+  padding-top: 0.25rem;
 }
 
 .summary {
   font-size: var(--font-size-body-small);
   line-height: var(--line-height-body-small);
   color: var(--text-secondary);
-  margin-bottom: 12px;
+  margin-bottom: 0.75rem;
 }
 
 .bulletList {
   list-style: none;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 0.5rem;
 }
 
 .bulletItem {
   display: flex;
   align-items: flex-start;
-  gap: 10px;
+  gap: 0.625rem;
 }
 
 .bulletDot {
-  width: 5px;
-  height: 5px;
+  width: 0.3125rem;
+  height: 0.3125rem;
   border-radius: 50%;
   background-color: var(--text-muted);
-  margin-top: 10px;
+  margin-top: 0.625rem;
   flex-shrink: 0;
 }
 
@@ -209,9 +209,9 @@
   }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 650px) {
   .spineColumn {
-    width: 24px;
+    width: 1.5rem;
   }
 
   .itemContent {
@@ -223,12 +223,12 @@
   }
 
   .logoContainer {
-    width: 60px;
-    height: 60px;
+    width: 3.75rem;
+    height: 3.75rem;
   }
 
   .roleTitle {
-    font-size: 18px;
-    line-height: 26px;
+    font-size: 1.125rem;
+    line-height: 1.625rem;
   }
 }