Added wordmark to page

styles.css

@@ -10,6 +10,7 @@
   --font-family-supporting: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
   --site-content-width: 92rem;
   --site-horizontal-padding: clamp(1.25rem, 4vw, 4rem);
+  --website-header-height: clamp(8.5rem, 11vw, 10.5rem);
   --section-vertical-spacing: clamp(5.5rem, 10vw, 10rem);
 }
 
@@ -110,36 +111,35 @@ ul {
 }
 
 .website-header-inner {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
-  justify-content: space-between;
-  min-height: 7.5rem;
-  gap: 3rem;
+  min-height: var(--website-header-height);
+  column-gap: clamp(1.5rem, 3vw, 3rem);
 }
 
-.brand-wordmark-link {
-  display: inline-flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  align-items: flex-start;
-  color: var(--color-noel-black);
-  line-height: 1;
+.brand-logo-link {
+  display: block;
+  line-height: 0;
   text-decoration: none;
-  text-transform: uppercase;
 }
 
-.brand-wordmark-primary-line {
-  font-family: var(--font-family-editorial);
-  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
-  letter-spacing: 0.31em;
+.brand-logo-image {
+  display: block;
+  width: 100%;
+  height: auto;
 }
 
-.brand-wordmark-secondary-line {
-  margin-top: 0.5rem;
-  padding-left: 0.12rem;
-  font-size: 0.55rem;
-  font-weight: 600;
-  letter-spacing: 0.34em;
+.website-header-logo-link {
+  grid-column: 2;
+  justify-self: center;
+  width: clamp(18rem, 31vw, 29rem);
+}
+
+.primary-navigation {
+  grid-column: 3;
+  justify-self: end;
+  min-width: 0;
 }
 
 .primary-navigation-list {
@@ -184,8 +184,8 @@ ul {
   grid-template-columns: repeat(12, minmax(0, 1fr));
   grid-template-rows: auto auto 1fr;
   column-gap: clamp(1rem, 2vw, 2rem);
-  min-height: min(57rem, calc(100vh - 7.5rem));
-  min-height: min(57rem, calc(100svh - 7.5rem));
+  min-height: min(57rem, calc(100vh - var(--website-header-height)));
+  min-height: min(57rem, calc(100svh - var(--website-header-height)));
   padding-top: clamp(2rem, 5vw, 5rem);
   padding-bottom: clamp(4.5rem, 8vw, 7.5rem);
 }
@@ -811,8 +811,13 @@ ul {
   gap: clamp(2.5rem, 7vw, 8rem);
 }
 
-.brand-wordmark-link-light {
-  color: var(--color-weathered-paper);
+.website-footer-logo-link {
+  width: clamp(10rem, 15vw, 13rem);
+}
+
+.website-footer-logo-image {
+  opacity: 0.92;
+  filter: invert(1);
 }
 
 .website-footer-brand-column > p,
@@ -881,7 +886,36 @@ ul {
   }
 }
 
+@media (min-width: 64.0625rem) and (max-width: 75rem) {
+  .primary-navigation-list {
+    gap: 1.25rem;
+  }
+}
+
 @media (max-width: 64rem) {
+  .website-header-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: auto;
+    padding-block: 2rem 1.5rem;
+    gap: 1.5rem;
+  }
+
+  .website-header-logo-link {
+    width: min(20rem, 76vw);
+  }
+
+  .primary-navigation {
+    width: 100%;
+  }
+
+  .primary-navigation-list {
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0.6rem clamp(1.25rem, 3vw, 2rem);
+  }
+
   .homepage-hero-section {
     min-height: auto;
   }
@@ -982,9 +1016,6 @@ ul {
   }
 
   .website-header-inner {
-    flex-direction: column;
-    align-items: flex-start;
-    min-height: auto;
     padding-block: 1.75rem 1.2rem;
     gap: 1.35rem;
   }
@@ -994,7 +1025,7 @@ ul {
   }
 
   .primary-navigation-list {
-    justify-content: flex-start;
+    justify-content: center;
     gap: 0.4rem 1.6rem;
     flex-wrap: wrap;
   }