Resolved blending issue with headers

index.html

@@ -15,7 +15,7 @@
       href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap"
       rel="stylesheet"
     >
-    <link rel="stylesheet" href="styles.css?version=editorial-expansion-2">
+    <link rel="stylesheet" href="styles.css?version=dynamic-headline-contrast-filter-test">
   </head>
 
   <body id="top">
@@ -40,10 +40,16 @@
     </header>
 
     <main id="main-content">
-      <section class="site-width-boundary homepage-hero-section" aria-labelledby="homepage-hero-title">
+      <section
+        class="site-width-boundary homepage-hero-section image-overlap-heading-dynamic-inversion-container"
+        aria-labelledby="homepage-hero-title"
+      >
         <p class="section-context-label">Seasonal environment design <span aria-hidden="true">/</span> Pacific Northwest</p>
 
-        <h1 class="homepage-hero-title" id="homepage-hero-title">
+        <h1
+          class="homepage-hero-title image-overlap-heading-dynamic-inversion"
+          id="homepage-hero-title"
+        >
           <span>Composing</span>
           <span>the season.</span>
         </h1>

styles.css

@@ -216,7 +216,7 @@ ul {
   font-family: var(--font-family-editorial);
   font-size: clamp(4.2rem, 9.8vw, 9.6rem);
   font-weight: 400;
-  letter-spacing: -0.055em;
+  letter-spacing: 0.04em;
   line-height: 0.88;
   text-transform: uppercase;
 }
@@ -225,6 +225,26 @@ ul {
   display: block;
 }
 
+.image-overlap-heading-dynamic-inversion-container {
+  isolation: isolate;
+}
+
+.homepage-hero-section.image-overlap-heading-dynamic-inversion-container {
+  background-color: var(--color-weathered-paper);
+}
+
+.image-overlap-heading-dynamic-inversion {
+  color: var(--color-noel-black);
+}
+
+@supports (mix-blend-mode: difference) {
+  .image-overlap-heading-dynamic-inversion {
+    color: var(--color-weathered-paper);
+    filter: grayscale(1);
+    mix-blend-mode: difference;
+  }
+}
+
 .homepage-hero-introduction {
   align-self: end;
   grid-column: 1 / 5;
@@ -374,7 +394,7 @@ ul {
   font-family: var(--font-family-editorial);
   font-size: clamp(2.4rem, 4vw, 4.5rem);
   font-weight: 400;
-  letter-spacing: -0.045em;
+  letter-spacing: 0.035em;
   line-height: 1.03;
   text-transform: uppercase;
 }
@@ -417,7 +437,7 @@ ul {
   font-family: var(--font-family-editorial);
   font-size: clamp(5rem, 13.2vw, 12.5rem);
   font-weight: 400;
-  letter-spacing: -0.065em;
+  letter-spacing: 0.04em;
   line-height: 0.78;
   text-transform: uppercase;
 }
@@ -504,6 +524,7 @@ ul {
 
 .work-heading-grid .oversized-editorial-title {
   grid-column: 1 / 9;
+  font-size: clamp(5rem, 12.4vw, 11.15rem);
 }
 
 .work-introduction-copy {
@@ -568,13 +589,17 @@ ul {
 }
 
 .client-fit-content-grid {
+  position: relative;
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   align-items: center;
   gap: clamp(3rem, 7vw, 7rem);
+  isolation: isolate;
 }
 
 .client-fit-heading-content {
+  position: relative;
+  z-index: 2;
   grid-column: 1 / 6;
 }
 
@@ -588,11 +613,16 @@ ul {
   font-family: var(--font-family-editorial);
   font-size: clamp(3.2rem, 6.5vw, 7rem);
   font-weight: 400;
-  letter-spacing: -0.055em;
+  letter-spacing: 0.035em;
   line-height: 0.94;
   text-transform: uppercase;
 }
 
+.client-fit-title {
+  position: relative;
+  z-index: 3;
+}
+
 .client-fit-positioning-copy {
   max-width: 29rem;
   margin-top: 2rem;
@@ -604,6 +634,8 @@ ul {
 }
 
 .client-fit-image-figure {
+  position: relative;
+  z-index: 1;
   grid-column: 6 / 13;
 }
 
@@ -860,6 +892,7 @@ ul {
 
   .work-heading-grid .oversized-editorial-title {
     grid-column: 1 / 8;
+    font-size: clamp(5rem, 10.6vw, 6.85rem);
   }
 
   .work-introduction-copy {
@@ -896,6 +929,14 @@ ul {
 }
 
 @media (max-width: 48rem) {
+  .homepage-hero-title {
+    letter-spacing: 0.03em;
+  }
+
+  .oversized-editorial-title {
+    letter-spacing: 0.03em;
+  }
+
   .website-header-inner {
     flex-direction: column;
     align-items: flex-start;
@@ -921,7 +962,7 @@ ul {
 
   .homepage-hero-title {
     margin-top: 3.25rem;
-    font-size: clamp(3.8rem, 17vw, 7.5rem);
+    font-size: clamp(3.7rem, 16vw, 7.1rem);
     line-height: 0.92;
   }
 
@@ -961,10 +1002,14 @@ ul {
   }
 
   .oversized-editorial-title {
-    font-size: clamp(4.35rem, 18vw, 8.5rem);
+    font-size: clamp(4rem, 15.5vw, 7.3rem);
     line-height: 0.88;
   }
 
+  .work-heading-grid .oversized-editorial-title {
+    font-size: clamp(4rem, 15.5vw, 7.3rem);
+  }
+
   .approach-content-grid {
     margin-top: 2.5rem;
   }
@@ -1072,8 +1117,8 @@ ul {
   }
 
   .homepage-hero-title {
-    font-size: clamp(3.35rem, 17vw, 5.25rem);
-    letter-spacing: -0.065em;
+    font-size: clamp(3.05rem, 15.25vw, 4.8rem);
+    letter-spacing: 0.02em;
   }
 
   .homepage-hero-title span:last-child {
@@ -1086,15 +1131,22 @@ ul {
 
   .editorial-statement-title {
     font-size: clamp(2.15rem, 10.5vw, 3.3rem);
+    letter-spacing: 0.025em;
   }
 
   .oversized-editorial-title {
-    font-size: clamp(3.7rem, 18vw, 5.5rem);
+    font-size: clamp(3.15rem, 15.5vw, 5rem);
+    letter-spacing: 0.02em;
+  }
+
+  .work-heading-grid .oversized-editorial-title {
+    font-size: clamp(3.15rem, 15.5vw, 5rem);
   }
 
   .client-fit-title,
   .contact-title {
     font-size: clamp(2.75rem, 13vw, 4.1rem);
+    letter-spacing: 0.025em;
   }
 
   .work-gallery-grid figcaption {