styles/typography.css

@@ -4,11 +4,12 @@
   --font-size-small: 0.875rem;
   --font-size-lead: 1.125rem;
 
-  --font-size-h1: 1.802rem;
-  --font-size-h2: 1.602rem;
-  --font-size-h3: 1.424rem;
-  --font-size-h4: 1.266rem;
-  --font-size-h5: 1.125rem;
+  /* Fluid typography (768px to 1024px) */
+  --font-size-h1: clamp(1.802rem, 5.71vw, 3.247rem);
+  --font-size-h2: clamp(1.602rem, 4.51vw, 2.566rem);
+  --font-size-h3: clamp(1.424rem, 3.56vw, 2.027rem);
+  --font-size-h4: clamp(1.266rem, 3.17vw, 1.802rem);
+  --font-size-h5: clamp(1.125rem, 2.82vw, 1.602rem);
 
   --line-height-body: 1.5;
   --line-height-heading: 1.2;
@@ -28,7 +29,7 @@
   --font-heading-color: #302e2e;
 }
 
-@media (min-width: 768px) {
+/* @media (min-width: 768px) {
   :root {
     --font-size-h1: 2.566rem;
     --font-size-h2: 2.281rem;
@@ -37,8 +38,8 @@
     --font-size-h5: 1.602rem;
   }
 }
-
-@media (min-width: 1024px) {
+*/
+/* @media (min-width: 1024px) {
   :root {
     --font-size-h1: 3.247rem;
     --font-size-h2: 2.566rem;
@@ -46,7 +47,7 @@
     --font-size-h4: 1.802rem;
     --font-size-h5: 1.602rem;
   }
-}
+} */
 
 a {
   color: inherit;