From 9f14e9a4f4764b127087548fcbfb12b8e121e705 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Sun, 6 Sep 2026 13:58:17 +0330
Subject: [PATCH] style: convert project sizing to scalable rem units with
 responsive root font scaling

---
 src/components/EducationSection.module.css  |  28 ++--
 src/components/ExperienceSection.module.css |  70 +++++-----
 src/components/FooterSection.module.css     |  30 ++---
 src/components/HeroSection.module.css       |  96 +++++++-------
 src/components/MilestonesSection.module.css |  26 ++--
 src/components/ProjectsSection.module.css   | 140 ++++++++++----------
 src/components/RiverJourney.module.css      |  44 +++---
 src/components/ScenicHeroJourney.module.css |  12 +-
 src/components/SkillsSection.module.css     |  56 ++++----
 src/components/scenes/Scenes.module.css     |  10 +-
 src/styles/globals.css                      |  35 +++--
 src/styles/tokens.css                       | 120 ++++++++---------
 12 files changed, 342 insertions(+), 325 deletions(-)

diff --git a/src/components/EducationSection.module.css b/src/components/EducationSection.module.css
index c21cf08..7a635d7 100644
--- a/src/components/EducationSection.module.css
+++ b/src/components/EducationSection.module.css
@@ -1,8 +1,8 @@
 .educationSection {
   position: relative;
   width: 100%;
-  padding-top: 60px;
-  padding-bottom: 32px;
+  padding-top: 3.75rem;
+  padding-bottom: 2rem;
 }
 
 .card {
@@ -10,17 +10,17 @@
   background-color: transparent;
   border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);
-  padding: 24px 32px;
+  padding: 1.5rem 2rem;
   display: flex;
   align-items: center;
-  gap: 36px;
+  gap: 2.25rem;
   transition:
     border-color var(--motion-duration-fast) ease,
     transform var(--motion-duration-default) var(--motion-ease-out);
 }
 
 .crestCol {
-  width: 264px;
+  width: 16.5rem;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -28,8 +28,8 @@
 }
 
 .crestContainer {
-  width: 264px;
-  height: 192px;
+  width: 16.5rem;
+  height: 12rem;
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -48,7 +48,7 @@
   font-weight: 600;
   letter-spacing: 0.08em;
   color: var(--text-secondary);
-  margin-bottom: 2px;
+  margin-bottom: 0.125rem;
 }
 
 .date {
@@ -58,7 +58,7 @@
   letter-spacing: var(--letter-spacing-eyebrow);
   color: var(--text-muted);
   text-transform: uppercase;
-  margin-bottom: 12px;
+  margin-bottom: 0.75rem;
 }
 
 .detailsCol {
@@ -73,7 +73,7 @@
   line-height: var(--line-height-h3);
   font-weight: 700;
   color: var(--text-primary);
-  margin-bottom: 2px;
+  margin-bottom: 0.125rem;
 }
 
 .description {
@@ -100,16 +100,16 @@
 
   .crestCol,
   .crestContainer {
-    width: 180px;
-    height: 132px;
+    width: 11.25rem;
+    height: 8.25rem;
   }
 }
 
 @media (max-width: 480px) {
   .crestCol,
   .crestContainer {
-    width: 144px;
-    height: 108px;
+    width: 9rem;
+    height: 6.75rem;
   }
 }
 
diff --git a/src/components/ExperienceSection.module.css b/src/components/ExperienceSection.module.css
index dbeebc7..738233a 100644
--- a/src/components/ExperienceSection.module.css
+++ b/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;
   }
 }
diff --git a/src/components/FooterSection.module.css b/src/components/FooterSection.module.css
index f444c82..2704bb0 100644
--- a/src/components/FooterSection.module.css
+++ b/src/components/FooterSection.module.css
@@ -1,8 +1,8 @@
 .footerSection {
   position: relative;
   width: 100%;
-  max-width: 1440px;
-  height: 480px;
+  max-width: var(--layout-frame);
+  height: 30rem;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -16,7 +16,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 480px;
+  height: 30rem;
   z-index: 1;
 }
 
@@ -32,14 +32,14 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  margin-top: 84px;
+  margin-top: 5.25rem;
 }
 
 .ctaTitle {
   font-size: var(--font-size-display-footer);
   line-height: var(--line-height-display-footer);
   color: var(--text-primary);
-  margin-bottom: 12px;
+  margin-bottom: 0.75rem;
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
@@ -49,20 +49,20 @@
   color: var(--text-secondary);
   font-weight: 500;
   letter-spacing: var(--letter-spacing-eyebrow);
-  margin-bottom: 24px;
+  margin-bottom: 1.5rem;
 }
 
 .socialRow {
   display: flex;
   align-items: center;
-  gap: 48px;
+  gap: 3rem;
 }
 
 .socialItem {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 12px;
+  gap: 0.75rem;
   color: var(--text-primary);
   text-decoration: none;
   transition:
@@ -80,8 +80,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: 48px;
+  width: 3rem;
+  height: 3rem;
 }
 
 .socialIcon svg {
@@ -105,7 +105,7 @@
 @media (max-width: 900px) {
   .footerSection {
     height: auto;
-    min-height: 480px;
+    min-height: 30rem;
     padding: var(--space-10) var(--layout-page-gutter) var(--space-9);
   }
 
@@ -127,17 +127,17 @@
 
 @media (max-width: 560px) {
   .footerSection {
-    min-height: 560px;
+    min-height: 35rem;
     padding-top: var(--space-9);
   }
 
   .ctaTitle {
-    font-size: 36px;
-    line-height: 46px;
+    font-size: 2.25rem;
+    line-height: 2.875rem;
   }
 
   .ctaSubtitle {
-    max-width: 300px;
+    max-width: 18.75rem;
     margin-bottom: var(--space-7);
     font-size: var(--font-size-body-default);
     line-height: var(--line-height-body-default);
diff --git a/src/components/HeroSection.module.css b/src/components/HeroSection.module.css
index c1ad6b0..59fb907 100644
--- a/src/components/HeroSection.module.css
+++ b/src/components/HeroSection.module.css
@@ -20,7 +20,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: clamp(18px, 2.5vw, 32px) var(--layout-page-gutter) 0;
+  padding: clamp(1.125rem, 2.5vw, 2rem) var(--layout-page-gutter) 0;
 }
 
 /* ── Icon buttons ───────────────────────────────────────────── */
@@ -67,29 +67,29 @@
   align-items: center;
   justify-content: flex-start;
   width: 100%;
-  max-width: 920px;
+  max-width: 57.5rem;
   margin: 0 auto;
   height: auto;
   min-height: 100%;
-  padding-top: clamp(64px, 6.5vw, 96px);
-  padding-bottom: clamp(28px, 3vw, 40px);
-  padding-left: 20px;
-  padding-right: 20px;
+  padding-top: clamp(4rem, 6.5vw, 6rem);
+  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
   text-align: center;
 }
 
 /* ── Avatar ─────────────────────────────────────────────────── */
 .avatarWrapper {
-  margin-bottom: clamp(14px, 1.8vw, 22px);
+  margin-bottom: clamp(0.875rem, 1.8vw, 1.375rem);
 }
 
 .avatarRingOuter {
   display: inline-block;
-  padding: clamp(4px, 0.5vw, 7px);
+  padding: clamp(0.25rem, 0.5vw, 0.4375rem);
   border: clamp(2px, 0.25vw, 3px) solid var(--color-blue-700);
   border-radius: 50%;
   background: transparent;
-  box-shadow: 0 8px 32px var(--shadow-color);
+  box-shadow: 0 0.5rem 2rem var(--shadow-color);
 }
 
 [data-theme="dark"] .avatarRingOuter {
@@ -98,8 +98,8 @@
 
 .avatarContainer {
   position: relative;
-  width: clamp(100px, 13vw, 168px);
-  height: clamp(100px, 13vw, 168px);
+  width: clamp(6.25rem, 13vw, 10.5rem);
+  height: clamp(6.25rem, 13vw, 10.5rem);
   overflow: hidden;
   border: 0;
   border-radius: 50%;
@@ -113,9 +113,9 @@
 
 /* ── Display title ──────────────────────────────────────────── */
 .heroTitle {
-  margin-bottom: clamp(8px, 1vw, 14px);
+  margin-bottom: clamp(0.5rem, 1vw, 0.875rem);
   color: var(--text-primary);
-  font-size: clamp(32px, 3.6vw, 54px);
+  font-size: clamp(2rem, 3.6vw, 3.375rem);
   line-height: 1.15;
   text-shadow: none;
   white-space: nowrap;
@@ -123,9 +123,9 @@
 
 /* ── Subtitle ───────────────────────────────────────────────── */
 .heroSubtitle {
-  margin-bottom: clamp(20px, 2.8vw, 36px);
+  margin-bottom: clamp(1.25rem, 2.8vw, 2.25rem);
   color: var(--text-primary);
-  font-size: clamp(11px, 1vw, 15px);
+  font-size: clamp(0.6875rem, 1vw, 0.9375rem);
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
@@ -135,16 +135,16 @@
 .actionButtons {
   display: flex;
   align-items: center;
-  gap: clamp(10px, 1.4vw, 20px);
-  margin-bottom: clamp(18px, 2.2vw, 30px);
+  gap: clamp(0.625rem, 1.4vw, 1.25rem);
+  margin-bottom: clamp(1.125rem, 2.2vw, 1.875rem);
 }
 
 .heroButton {
-  min-width: clamp(80px, 9vw, 120px);
-  height: clamp(40px, 4.5vw, 52px);
-  padding: 0 clamp(16px, 2vw, 28px);
+  min-width: clamp(5rem, 9vw, 7.5rem);
+  height: clamp(2.5rem, 4.5vw, 3.25rem);
+  padding: 0 clamp(1rem, 2vw, 1.75rem);
   border-width: 2px;
-  font-size: clamp(13px, 1.1vw, 16px);
+  font-size: clamp(0.8125rem, 1.1vw, 1rem);
 }
 
 .heroButtonOutline {
@@ -181,11 +181,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: clamp(10px, 1.4vw, 18px);
+  gap: clamp(0.625rem, 1.4vw, 1.125rem);
   border: 0;
   background: transparent;
   color: var(--color-blue-700);
-  font-size: clamp(11px, 1vw, 14px);
+  font-size: clamp(0.6875rem, 1vw, 0.875rem);
   font-weight: 500;
   line-height: 1.6;
   white-space: nowrap;
@@ -198,7 +198,7 @@
 .contactItem {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 0.375rem;
   color: inherit;
   white-space: nowrap;
   transition: opacity var(--motion-duration-fast) ease;
@@ -221,7 +221,7 @@
 
 .contactDivider {
   width: 1px;
-  height: 18px;
+  height: 1.125rem;
   background: var(--color-blue-500);
   opacity: 0.6;
 }
@@ -235,20 +235,20 @@
 @media (max-width: 1100px) and (min-width: 651px) {
   .heroContentWrapper {
     height: auto;
-    min-height: clamp(540px, 64vw, 640px);
+    min-height: clamp(33.75rem, 64vw, 40rem);
   }
 
   .heroContent {
     height: auto;
-    min-height: clamp(540px, 64vw, 640px);
+    min-height: clamp(33.75rem, 64vw, 40rem);
     justify-content: flex-start;
-    padding-top: clamp(60px, 8vw, 90px);
-    padding-bottom: 40px;
+    padding-top: clamp(3.75rem, 8vw, 5.625rem);
+    padding-bottom: 2.5rem;
   }
 
   .heroTitle {
     /* Allow wrapping at tablet so text stays within the center zone */
-    max-width: 520px;
+    max-width: 32.5rem;
     white-space: normal;
   }
 
@@ -256,7 +256,7 @@
     /* Wrap contact items on narrow tablets */
     flex-wrap: wrap;
     justify-content: center;
-    gap: 8px 14px;
+    gap: 0.5rem 0.875rem;
     white-space: normal;
   }
 
@@ -271,36 +271,36 @@
 @media (max-width: 650px) {
   .heroContentWrapper {
     height: auto;
-    min-height: 540px;
+    min-height: 33.75rem;
   }
 
   .topBar {
-    padding: 16px 14px 0;
+    padding: 1rem 0.875rem 0;
   }
 
   .iconButton {
-    width: 40px;
-    height: 40px;
+    width: 2.5rem;
+    height: 2.5rem;
   }
 
   .heroContent {
     height: auto;
-    min-height: 540px;
-    padding: 66px 16px 40px;
+    min-height: 33.75rem;
+    padding: 4.125rem 1rem 2.5rem;
     justify-content: flex-start;
   }
 
   .heroTitle {
-    font-size: clamp(26px, 7.8vw, 36px);
+    font-size: clamp(1.625rem, 7.8vw, 2.25rem);
     white-space: normal;
-    max-width: 270px;
+    max-width: 17rem;
     line-height: 1.15;
   }
 
   .heroSubtitle {
     white-space: normal;
-    max-width: 250px;
-    font-size: 11px;
+    max-width: 15.625rem;
+    font-size: 0.6875rem;
     letter-spacing: 0.12em;
   }
 
@@ -308,23 +308,23 @@
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     width: 100%;
-    max-width: 276px;
-    gap: 6px;
+    max-width: 17.25rem;
+    gap: 0.375rem;
   }
 
   .heroButton {
     min-width: 0;
     width: auto;
-    height: 38px;
-    padding: 0 6px;
-    font-size: 12px;
+    height: 2.375rem;
+    padding: 0 0.375rem;
+    font-size: 0.75rem;
   }
 
   .contactBar {
     flex-direction: column;
-    gap: 5px;
+    gap: 0.3125rem;
     white-space: normal;
-    font-size: 11.5px;
+    font-size: 0.71875rem;
   }
 
   .contactItem {
diff --git a/src/components/MilestonesSection.module.css b/src/components/MilestonesSection.module.css
index f8dc20a..e161761 100644
--- a/src/components/MilestonesSection.module.css
+++ b/src/components/MilestonesSection.module.css
@@ -1,14 +1,14 @@
 .milestonesSection {
   position: relative;
   width: 100%;
-  padding-top: 40px;
-  padding-bottom: 80px;
+  padding-top: 2.5rem;
+  padding-bottom: 5rem;
 }
 
 .cardsList {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 1.5rem;
 }
 
 .certCard {
@@ -16,9 +16,9 @@
   background-color: transparent;
   border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);
-  padding: 24px 32px;
+  padding: 1.5rem 2rem;
   display: flex;
-  gap: 36px;
+  gap: 2.25rem;
   transition:
     border-color var(--motion-duration-fast) ease,
     transform var(--motion-duration-default) var(--motion-ease-out);
@@ -27,8 +27,8 @@
 
 .thumbnailContainer {
   position: relative;
-  width: 264px;
-  height: 192px;
+  width: 16.5rem;
+  height: 12rem;
   flex-shrink: 0;
   border-radius: var(--radius-sm);
   overflow: hidden;
@@ -49,7 +49,7 @@
 }
 
 .titleRow {
-  margin-bottom: 4px;
+  margin-bottom: 0.25rem;
 }
 
 .certTitle {
@@ -60,7 +60,7 @@
 }
 
 .issuerRow {
-  margin-bottom: 2px;
+  margin-bottom: 0.125rem;
 }
 
 .issuerText {
@@ -78,14 +78,14 @@
   letter-spacing: var(--letter-spacing-eyebrow);
   color: var(--text-muted);
   text-transform: uppercase;
-  margin-bottom: 12px;
+  margin-bottom: 0.75rem;
 }
 
 .description {
   font-size: var(--font-size-body-small);
   line-height: var(--line-height-body-small);
   color: var(--text-secondary);
-  margin-bottom: 16px;
+  margin-bottom: 1rem;
 }
 
 .actionRow {
@@ -97,7 +97,7 @@
 .viewCertLink {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 0.375rem;
   font-size: var(--font-size-body-default);
   font-weight: 600;
   color: var(--action-link);
@@ -142,6 +142,6 @@
   }
 
   .viewCertLink:hover {
-    gap: 10px;
+    gap: 0.625rem;
   }
 }
diff --git a/src/components/ProjectsSection.module.css b/src/components/ProjectsSection.module.css
index dcdf92d..b12247d 100644
--- a/src/components/ProjectsSection.module.css
+++ b/src/components/ProjectsSection.module.css
@@ -1,20 +1,20 @@
 .projectsSection {
   position: relative;
   width: 100%;
-  padding-top: 60px;
-  padding-bottom: 80px;
+  padding-top: 3.75rem;
+  padding-bottom: 5rem;
 }
 
 .headerRow {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: 44px;
+  margin-bottom: 2.75rem;
 }
 
 .arrowButtons {
   display: flex;
-  gap: 12px;
+  gap: 0.75rem;
   padding-top: 2px;
 }
 
@@ -100,17 +100,17 @@
   display: flex;
   align-items: stretch;
   width: max-content;
-  gap: 20px;
-  padding: 4px 0 8px;
+  gap: 1.25rem;
+  padding: 0.25rem 0 0.5rem;
 }
 
 .card {
   display: flex;
-  flex: 0 0 clamp(300px, 24vw, 340px);
+  flex: 0 0 clamp(18.75rem, 24vw, 21.25rem);
   flex-shrink: 0;
   flex-direction: column;
-  width: clamp(300px, 24vw, 340px);
-  min-height: 460px;
+  width: clamp(18.75rem, 24vw, 21.25rem);
+  min-height: 28.75rem;
   overflow: hidden;
   box-sizing: border-box;
   border: 1px solid var(--border-default);
@@ -139,19 +139,19 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  padding: 18px 16px;
+  padding: 1.125rem 1rem;
 }
 
 .cardTitleRow {
   display: flex;
   align-items: center;
-  gap: 7px;
-  margin-bottom: 6px;
+  gap: 0.4375rem;
+  margin-bottom: 0.375rem;
 }
 
 .cardTitle {
   color: var(--text-primary);
-  font-size: 18px;
+  font-size: 1.125rem;
   font-weight: 700;
   line-height: 1.25;
 }
@@ -166,9 +166,9 @@
 }
 
 .cardDate {
-  margin-bottom: 10px;
+  margin-bottom: 0.625rem;
   color: var(--text-muted);
-  font-size: 11px;
+  font-size: 0.6875rem;
   font-weight: 700;
   line-height: var(--line-height-label-small);
   letter-spacing: var(--letter-spacing-eyebrow);
@@ -177,10 +177,10 @@
 
 .cardDesc {
   display: -webkit-box;
-  margin-bottom: 16px;
+  margin-bottom: 1rem;
   overflow: hidden;
   color: var(--text-primary);
-  font-size: 13.5px;
+  font-size: 0.84375rem;
   font-weight: 400;
   line-height: 1.55;
   -webkit-box-orient: vertical;
@@ -193,12 +193,12 @@
 .tagList {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: 18px;
+  gap: 0.375rem;
+  margin-bottom: 1.125rem;
 }
 
 .tagBadge {
-  padding: 5px 12px;
+  padding: 0.3125rem 0.75rem;
   border: 0;
   border-radius: var(--radius-pill);
   background: var(--color-blue-200);
@@ -220,7 +220,7 @@
 .caseStudyLink {
   display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: 0.625rem;
   color: var(--color-blue-500);
   font-size: var(--font-size-body-small);
   font-weight: 600;
@@ -240,14 +240,14 @@
 .scrollbarWrapper {
   display: flex;
   justify-content: center;
-  margin-top: 40px;
+  margin-top: 2.5rem;
 }
 
 .scrollbar {
-  --thumb-width: 216px;
-  width: 480px;
+  --thumb-width: 13.5rem;
+  width: 30rem;
   max-width: 100%;
-  height: 20px;
+  height: 1.25rem;
   margin: 0;
   appearance: none;
   background: transparent;
@@ -255,14 +255,14 @@
 }
 
 .scrollbar::-webkit-slider-runnable-track {
-  height: 6px;
+  height: 0.375rem;
   border-radius: var(--radius-pill);
   background: var(--color-blue-200);
 }
 
 .scrollbar::-webkit-slider-thumb {
-  width: var(--thumb-width, 216px);
-  height: 6px;
+  width: var(--thumb-width, 13.5rem);
+  height: 0.375rem;
   margin-top: 0;
   appearance: none;
   border: 0;
@@ -271,15 +271,15 @@
 }
 
 .scrollbar::-moz-range-track {
-  height: 6px;
+  height: 0.375rem;
   border: 0;
   border-radius: var(--radius-pill);
   background: var(--color-blue-200);
 }
 
 .scrollbar::-moz-range-thumb {
-  width: var(--thumb-width, 216px);
-  height: 6px;
+  width: var(--thumb-width, 13.5rem);
+  height: 0.375rem;
   border: 0;
   border-radius: var(--radius-pill);
   background: var(--color-blue-400);
@@ -313,17 +313,17 @@
    ================================================================ */
 @media (max-width: 1440px) and (min-width: 1101px) {
   .carouselTrack {
-    gap: 20px;
+    gap: 1.25rem;
   }
 
   .card {
-    flex: 0 0 clamp(290px, 23vw, 330px);
-    width: clamp(290px, 23vw, 330px);
+    flex: 0 0 clamp(18.125rem, 23vw, 20.625rem);
+    width: clamp(18.125rem, 23vw, 20.625rem);
   }
 
   .scrollbar {
-    width: min(480px, 50vw);
-    --thumb-width: 120px;
+    width: min(30rem, 50vw);
+    --thumb-width: 7.5rem;
   }
 }
 
@@ -340,7 +340,7 @@
   .headerRow {
     align-items: flex-start;
     justify-content: space-between;
-    margin-bottom: 32px;
+    margin-bottom: 2rem;
   }
 
   .carouselViewport {
@@ -349,13 +349,13 @@
   }
 
   .carouselTrack {
-    gap: 20px;
+    gap: 1.25rem;
   }
 
   .card {
-    flex: 0 0 clamp(310px, 42vw, 350px);
-    width: clamp(310px, 42vw, 350px);
-    min-height: 450px;
+    flex: 0 0 clamp(19.375rem, 42vw, 21.875rem);
+    width: clamp(19.375rem, 42vw, 21.875rem);
+    min-height: 28rem;
     box-sizing: border-box;
     scroll-snap-align: start;
   }
@@ -365,17 +365,17 @@
   }
 
   .cardBody {
-    padding: 18px 16px;
+    padding: 1.125rem 1rem;
   }
 
   .cardTitle {
-    font-size: 18px;
+    font-size: 1.125rem;
   }
 
   .cardDesc {
-    font-size: 13.5px;
+    font-size: 0.84375rem;
     line-height: 1.55;
-    margin-bottom: 14px;
+    margin-bottom: 0.875rem;
     -webkit-line-clamp: 3;
     white-space: normal;
     word-break: normal;
@@ -383,39 +383,39 @@
   }
 
   .tagList {
-    gap: 6px;
-    margin-bottom: 16px;
+    gap: 0.375rem;
+    margin-bottom: 1rem;
   }
 
   .tagBadge {
-    padding: 3px 9px;
-    font-size: 11px;
+    padding: 0.25rem 0.5625rem;
+    font-size: 0.6875rem;
   }
 
   .scrollbarWrapper {
     display: flex;
     justify-content: center;
-    margin-top: 32px;
+    margin-top: 2rem;
   }
 
   .scrollbar {
-    width: min(360px, 60vw);
-    --thumb-width: 90px;
+    width: min(22.5rem, 60vw);
+    --thumb-width: 5.625rem;
   }
 }
 
 /* ================================================================
    MOBILE  ≤ 650px
-   Comfortable ~310px-330px card (~1 card visible with clean margins)
+   Clean 1-column layout: 1 card visible at a time with page gutter
    ================================================================ */
 @media (max-width: 650px) {
   .projectsSection {
-    padding-top: 48px;
-    padding-bottom: 64px;
+    padding-top: 3rem;
+    padding-bottom: 4rem;
   }
 
   .headerRow {
-    margin-bottom: 24px;
+    margin-bottom: 1.5rem;
   }
 
   .arrowButtons {
@@ -432,7 +432,7 @@
   }
 
   .carouselTrack {
-    gap: 16px;
+    gap: 1rem;
     width: max-content;
   }
 
@@ -444,7 +444,7 @@
     min-width: calc(100vw - (2 * var(--layout-page-gutter)));
     min-width: 100cqw;
     max-width: 100%;
-    min-height: 420px;
+    min-height: 26.25rem;
     box-sizing: border-box;
     scroll-snap-align: start;
     scroll-snap-stop: always;
@@ -455,17 +455,17 @@
   }
 
   .cardBody {
-    padding: 18px 16px;
+    padding: 1.125rem 1rem;
   }
 
   .cardTitle {
-    font-size: 18px;
+    font-size: 1.125rem;
   }
 
   .cardDesc {
-    font-size: 13px;
+    font-size: 0.8125rem;
     line-height: 1.5;
-    margin-bottom: 14px;
+    margin-bottom: 0.875rem;
     white-space: normal;
     word-break: normal;
     overflow-wrap: break-word;
@@ -473,25 +473,25 @@
   }
 
   .tagList {
-    gap: 6px;
-    margin-bottom: 16px;
+    gap: 0.375rem;
+    margin-bottom: 1rem;
   }
 
   .tagBadge {
-    padding: 3px 9px;
-    font-size: 11px;
+    padding: 0.25rem 0.5625rem;
+    font-size: 0.6875rem;
   }
 
   .scrollbarWrapper {
     display: flex;
     justify-content: center;
-    margin-top: 24px;
+    margin-top: 1.5rem;
   }
 
   .scrollbar {
-    width: min(200px, 60vw);
-    height: 16px;
-    --thumb-width: 60px;
+    width: min(12.5rem, 60vw);
+    height: 1rem;
+    --thumb-width: 3.75rem;
   }
 }
 
diff --git a/src/components/RiverJourney.module.css b/src/components/RiverJourney.module.css
index f153c7f..0088352 100644
--- a/src/components/RiverJourney.module.css
+++ b/src/components/RiverJourney.module.css
@@ -20,10 +20,10 @@
 
 .introBlock {
   position: absolute;
-  top: 112px;
+  top: 7rem;
   left: var(--layout-page-gutter);
   z-index: 3;
-  width: min(390px, calc(100% - (2 * var(--layout-page-gutter))));
+  width: min(24.375rem, calc(100% - (2 * var(--layout-page-gutter))));
   padding: var(--space-4);
   border-radius: var(--radius-md);
   background: var(--overlay-contact);
@@ -50,7 +50,7 @@
 }
 
 .underlineBar {
-  width: 120px;
+  width: 7.5rem;
   height: 3px;
   margin-bottom: var(--space-5);
   border-radius: var(--radius-pill);
@@ -74,13 +74,13 @@
 .stepCard {
   position: absolute;
   display: flex;
-  width: 250px;
+  width: 15.625rem;
   gap: var(--space-3);
   padding: var(--space-4);
   border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
   background: var(--overlay-contact);
-  box-shadow: 0 8px 24px var(--shadow-color);
+  box-shadow: 0 0.5rem 1.5rem var(--shadow-color);
   backdrop-filter: blur(8px);
   transition:
     border-color var(--motion-duration-fast) ease,
@@ -96,9 +96,9 @@
 .stepNumber {
   flex: 0 0 auto;
   color: var(--accent-default);
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: 800;
-  line-height: 28px;
+  line-height: 1.75rem;
 }
 
 .stepTitle {
@@ -117,11 +117,11 @@
 
 @media (max-width: 1024px) {
   .introBlock {
-    top: 80px;
+    top: 5rem;
   }
 
   .stepCard {
-    width: 230px;
+    width: 14.375rem;
   }
 
   .step05 { top: 90px; right: 32px; }
@@ -134,7 +134,7 @@
 @media (max-width: 760px) {
   .journeySection {
     height: auto;
-    min-height: 1120px;
+    min-height: 70rem;
     padding: var(--layout-section-padding) var(--layout-page-gutter);
   }
 
@@ -151,13 +151,13 @@
     padding: var(--space-4);
     border: 1px solid var(--border-default);
     background: var(--overlay-contact);
-    box-shadow: 0 8px 24px var(--shadow-color);
+    box-shadow: 0 0.5rem 1.5rem var(--shadow-color);
     backdrop-filter: blur(12px);
   }
 
   .heading {
-    font-size: 28px;
-    line-height: 38px;
+    font-size: 1.75rem;
+    line-height: 2.375rem;
   }
 
   .description {
@@ -171,16 +171,16 @@
     display: flex;
     flex-direction: column;
     gap: var(--space-3);
-    margin-top: 220px;
-    padding-left: 20px;
+    margin-top: 13.75rem;
+    padding-left: 1.25rem;
   }
 
   .stepsList::before {
     content: '';
     position: absolute;
-    top: 20px;
-    bottom: 20px;
-    left: 5px;
+    top: 1.25rem;
+    bottom: 1.25rem;
+    left: 0.3125rem;
     width: 1px;
     background: var(--border-strong);
   }
@@ -202,10 +202,10 @@
   .stepCard::before {
     content: '';
     position: absolute;
-    top: 22px;
-    left: -20px;
-    width: 9px;
-    height: 9px;
+    top: 1.375rem;
+    left: -1.25rem;
+    width: 0.5625rem;
+    height: 0.5625rem;
     border: 3px solid var(--bg-page);
     border-radius: 50%;
     background: var(--accent-default);
diff --git a/src/components/ScenicHeroJourney.module.css b/src/components/ScenicHeroJourney.module.css
index fc242d5..1fe282f 100644
--- a/src/components/ScenicHeroJourney.module.css
+++ b/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;
   }
 
diff --git a/src/components/SkillsSection.module.css b/src/components/SkillsSection.module.css
index 96a5696..ceeebe4 100644
--- a/src/components/SkillsSection.module.css
+++ b/src/components/SkillsSection.module.css
@@ -1,8 +1,8 @@
 .skillsSection {
   position: relative;
   width: 100%;
-  padding-top: 60px;
-  padding-bottom: 80px;
+  padding-top: 3.75rem;
+  padding-bottom: 5rem;
 }
 
 .mainCard {
@@ -10,9 +10,9 @@
   background-color: transparent;
   border: 1px solid var(--border-default);
   border-radius: var(--radius-xl);
-  padding: 36px 40px;
-  box-shadow: 0 4px 20px var(--shadow-color);
-  margin-bottom: 32px;
+  padding: 2.25rem 2.5rem;
+  box-shadow: 0 0.25rem 1.25rem var(--shadow-color);
+  margin-bottom: 2rem;
 }
 
 .cardEyebrow {
@@ -23,25 +23,25 @@
   text-transform: uppercase;
   font-weight: 700;
   color: var(--text-muted);
-  margin-bottom: 24px;
+  margin-bottom: 1.5rem;
 }
 
 .skillsBlock {
-  margin-bottom: 40px;
+  margin-bottom: 2.5rem;
 }
 
 .skillsGrid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  row-gap: 28px;
-  column-gap: 40px;
-  margin-bottom: 32px;
+  row-gap: 1.75rem;
+  column-gap: 2.5rem;
+  margin-bottom: 2rem;
 }
 
 .skillItem {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 0.625rem;
 }
 
 .skillName {
@@ -53,13 +53,13 @@
 
 .meterSegments {
   display: flex;
-  gap: 6px;
+  gap: 0.375rem;
   width: 100%;
 }
 
 .segment {
   flex: 1;
-  height: 6px;
+  height: 0.375rem;
   border-radius: 3px;
   background-color: var(--border-default);
   transition: background-color 0.2s ease;
@@ -72,11 +72,11 @@
 .badgeCloud {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 0.625rem;
 }
 
 .badgePill {
-  padding: 6px 16px;
+  padding: 0.375rem 1rem;
   border-radius: var(--radius-pill);
   background-color: var(--bg-subtle);
   border: 1px solid var(--border-default);
@@ -90,13 +90,13 @@
 }
 
 .toolsBlock {
-  padding-top: 16px;
+  padding-top: 1rem;
 }
 
 .toolsGrid {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
-  gap: 24px;
+  gap: 1.5rem;
 }
 
 .toolTile {
@@ -104,12 +104,12 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 132px;
-  height: 136px;
+  width: 8.25rem;
+  height: 8.5rem;
   background-color: transparent;
   border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);
-  padding: 16px 8px;
+  padding: 1rem 0.5rem;
   transition:
     opacity var(--motion-duration-default) ease,
     filter var(--motion-duration-default) ease,
@@ -125,12 +125,12 @@
 }
 
 .toolIconContainer {
-  width: 64px;
-  height: 64px;
+  width: 4rem;
+  height: 4rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 12px;
+  margin-bottom: 0.75rem;
 }
 
 .toolIcon {
@@ -150,11 +150,11 @@
 .filterTabsRow {
   display: flex;
   justify-content: center;
-  gap: 16px;
+  gap: 1rem;
 }
 
 .filterButton {
-  min-width: 180px;
+  min-width: 11.25rem;
 }
 
 [data-theme="dark"] .mainCard {
@@ -216,13 +216,13 @@
   }
 
   .toolTile {
-    height: 124px;
+    height: 7.75rem;
     padding: var(--space-3) var(--space-2);
   }
 
   .toolIconContainer {
-    width: 52px;
-    height: 52px;
+    width: 3.25rem;
+    height: 3.25rem;
   }
 
   .filterTabsRow {
diff --git a/src/components/scenes/Scenes.module.css b/src/components/scenes/Scenes.module.css
index f66a506..fec6e6a 100644
--- a/src/components/scenes/Scenes.module.css
+++ b/src/components/scenes/Scenes.module.css
@@ -9,16 +9,20 @@
 
 .heroScene {
   z-index: 0;
+  background:
+    linear-gradient(to bottom, #c7edfb 0%, #dff5fc 47%, #f8faff 82%, var(--bg-page) 100%);
 }
 
 .heroScene::after {
   content: '';
   position: absolute;
   inset: 0;
+  background: linear-gradient(to bottom, transparent 82%, var(--bg-page) 100%);
+}
+
+:global([data-theme="dark"]) .heroScene {
   background:
-    radial-gradient(ellipse 48% 58% at 50% 45%, var(--bg-page) 0 44%, transparent 82%),
-    linear-gradient(to bottom, transparent 68%, var(--bg-page) 100%);
-  opacity: 0.76;
+    linear-gradient(to bottom, #071936 0%, #06142f 50%, #020e28 82%, var(--bg-page) 100%);
 }
 
 .heroScene canvas,
diff --git a/src/styles/globals.css b/src/styles/globals.css
index fc355de..a8cc991 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -16,10 +16,23 @@
 }
 
 html {
+  font-size: 100%;
   scroll-behavior: smooth;
   color-scheme: light;
 }
 
+@media (max-width: 1024px) {
+  html {
+    font-size: 93.75%;
+  }
+}
+
+@media (max-width: 650px) {
+  html {
+    font-size: 87.5%;
+  }
+}
+
 html[data-theme="dark"] {
   color-scheme: dark;
 }
@@ -56,7 +69,7 @@ body {
   }
 }
 
-/* 1320px Inner Content Container with 60px Gutters */
+/* 1320px Inner Content Container with Page Gutters */
 .content-container {
   width: calc(100% - (2 * var(--layout-page-gutter)));
   max-width: var(--layout-container);
@@ -64,18 +77,18 @@ body {
   position: relative;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 650px) {
   .section-header {
     margin-bottom: var(--space-6);
   }
 
   .section-title {
-    font-size: 28px;
-    line-height: 38px;
+    font-size: 1.75rem;
+    line-height: 2.375rem;
   }
 
   .section-underline {
-    width: 88px;
+    width: 5.5rem;
   }
 }
 
@@ -84,7 +97,7 @@ body {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin-bottom: 40px;
+  margin-bottom: 2.5rem;
 }
 
 .section-eyebrow {
@@ -94,7 +107,7 @@ body {
   text-transform: uppercase;
   font-weight: 700;
   color: var(--text-secondary);
-  margin-bottom: 8px;
+  margin-bottom: 0.5rem;
 }
 
 .section-title-wrap {
@@ -108,11 +121,11 @@ body {
   line-height: var(--line-height-h2);
   font-weight: 700;
   color: var(--text-primary);
-  margin-bottom: 12px;
+  margin-bottom: 0.75rem;
 }
 
 .section-underline {
-  width: 120px;
+  width: 7.5rem;
   height: 3px;
   background-color: var(--accent-default);
   border-radius: var(--radius-pill);
@@ -129,9 +142,9 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: 0.5rem;
   height: var(--size-button-height);
-  padding: 0 24px;
+  padding: 0 1.5rem;
   border-radius: var(--radius-pill);
   font-size: var(--font-size-button);
   line-height: var(--line-height-button);
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 1bb16b5..730ebc5 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -21,65 +21,65 @@
   --color-border-strong-light: #A9BEDA;
   --color-border-strong-dark: #426B9D;
   --color-black: #000000;
-  --space-0: 0px;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 24px;
-  --space-6: 32px;
-  --space-7: 40px;
-  --space-8: 48px;
-  --space-9: 64px;
-  --space-10: 80px;
-  --space-11: 96px;
-  --space-12: 120px;
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 16px;
-  --radius-xl: 24px;
-  --radius-pill: 999px;
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 2.5rem;
+  --space-8: 3rem;
+  --space-9: 4rem;
+  --space-10: 5rem;
+  --space-11: 6rem;
+  --space-12: 7.5rem;
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
+  --radius-pill: 9999px;
   --stroke-default: 1px;
   --stroke-strong: 2px;
   --layout-frame: 1440px;
   --layout-container: 1320px;
-  --layout-page-gutter: 60px;
-  --layout-grid-gutter: 24px;
-  --layout-grid-column: 88px;
-  --layout-section-gap: 120px;
-  --layout-section-padding: 96px;
-  --layout-text-measure: 720px;
-  --size-icon-sm: 16px;
-  --size-icon-md: 20px;
-  --size-icon-lg: 24px;
-  --size-icon-button: 44px;
-  --size-button-height: 48px;
-  --size-social-button: 56px;
-  --size-avatar: 200px;
-  --size-journey-image: 96px;
-  --size-project-width: 360px;
-  --size-project-media-height: 225px;
-  --size-tool-tile: 72px;
-  --font-size-display-hero: 64px;
-  --font-size-display-footer: 48px;
-  --font-size-h1: 40px;
-  --font-size-h2: 32px;
-  --font-size-h3: 20px;
-  --font-size-body-large: 18px;
-  --font-size-body-default: 16px;
-  --font-size-body-small: 14px;
-  --font-size-label-small: 12px;
-  --font-size-button: 15px;
-  --line-height-display-hero: 72px;
-  --line-height-display-footer: 56px;
-  --line-height-h1: 52px;
-  --line-height-h2: 42px;
-  --line-height-h3: 28px;
-  --line-height-body-large: 30px;
-  --line-height-body-default: 26px;
-  --line-height-body-small: 22px;
-  --line-height-label-small: 18px;
-  --line-height-button: 20px;
+  --layout-page-gutter: 3.75rem;
+  --layout-grid-gutter: 1.5rem;
+  --layout-grid-column: 5.5rem;
+  --layout-section-gap: 7.5rem;
+  --layout-section-padding: 6rem;
+  --layout-text-measure: 45rem;
+  --size-icon-sm: 1rem;
+  --size-icon-md: 1.25rem;
+  --size-icon-lg: 1.5rem;
+  --size-icon-button: 2.75rem;
+  --size-button-height: 3rem;
+  --size-social-button: 3.5rem;
+  --size-avatar: 12.5rem;
+  --size-journey-image: 6rem;
+  --size-project-width: 22.5rem;
+  --size-project-media-height: 14.0625rem;
+  --size-tool-tile: 4.5rem;
+  --font-size-display-hero: 4rem;
+  --font-size-display-footer: 3rem;
+  --font-size-h1: 2.5rem;
+  --font-size-h2: 2rem;
+  --font-size-h3: 1.25rem;
+  --font-size-body-large: 1.125rem;
+  --font-size-body-default: 1rem;
+  --font-size-body-small: 0.875rem;
+  --font-size-label-small: 0.75rem;
+  --font-size-button: 0.9375rem;
+  --line-height-display-hero: 4.5rem;
+  --line-height-display-footer: 3.5rem;
+  --line-height-h1: 3.25rem;
+  --line-height-h2: 2.625rem;
+  --line-height-h3: 1.75rem;
+  --line-height-body-large: 1.875rem;
+  --line-height-body-default: 1.625rem;
+  --line-height-body-small: 1.375rem;
+  --line-height-label-small: 1.125rem;
+  --line-height-button: 1.25rem;
   --letter-spacing-eyebrow: 0.16em;
   --motion-duration-fast: 140ms;
   --motion-duration-default: 200ms;
@@ -161,14 +161,14 @@
 
 @media (max-width: 1024px) {
   :root {
-    --layout-page-gutter: 32px;
-    --layout-section-padding: 80px;
+    --layout-page-gutter: 2rem;
+    --layout-section-padding: 5rem;
   }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 650px) {
   :root {
-    --layout-page-gutter: 20px;
-    --layout-section-padding: 64px;
+    --layout-page-gutter: 1.25rem;
+    --layout-section-padding: 4rem;
   }
 }