Added wordmark to page

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=tradition-mix-blend-overlap">
+    <link rel="stylesheet" href="styles.css?version=logo-wordmark-scale-two">
   </head>
 
   <body id="top">
@@ -23,9 +23,19 @@
 
     <header class="website-header">
       <div class="site-width-boundary website-header-inner">
-        <a class="brand-wordmark-link" href="#top" aria-label="Noel Design Atelier, back to top">
-          <span class="brand-wordmark-primary-line">Noel</span>
-          <span class="brand-wordmark-secondary-line">Design Atelier</span>
+        <a
+          class="brand-logo-link website-header-logo-link"
+          href="#top"
+          aria-label="Noel Design Atelier, back to top"
+        >
+          <img
+            class="brand-logo-image website-header-logo-image"
+            src="images/logo.webp"
+            width="4167"
+            height="1063"
+            alt=""
+            decoding="async"
+          >
         </a>
 
         <nav class="primary-navigation" aria-label="Primary navigation">
@@ -382,9 +392,20 @@
     <footer class="website-footer">
       <div class="site-width-boundary website-footer-grid">
         <div class="website-footer-brand-column">
-          <a class="brand-wordmark-link brand-wordmark-link-light" href="#top" aria-label="Noel Design Atelier, back to top">
-            <span class="brand-wordmark-primary-line">Noel</span>
-            <span class="brand-wordmark-secondary-line">Design Atelier</span>
+          <a
+            class="brand-logo-link website-footer-logo-link"
+            href="#top"
+            aria-label="Noel Design Atelier, back to top"
+          >
+            <img
+              class="brand-logo-image website-footer-logo-image"
+              src="images/logo.webp"
+              width="4167"
+              height="1063"
+              alt=""
+              loading="lazy"
+              decoding="async"
+            >
           </a>
           <p>Seasonal environments composed with intention.</p>
         </div>

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;
   }