UX: better full-width support for wide logos (#149)

Helps avoid situations like this:


![image](https://github.com/user-attachments/assets/78adec74-8fb7-457f-b592-da1b56a98b1a)


Some examples...


text-logos

![image](https://github.com/user-attachments/assets/c87333cb-727a-4167-af76-a5db0b3cd20c)

![image](https://github.com/user-attachments/assets/8cc62ab9-4f3e-4697-a763-851dc21aa2ec)

![image](https://github.com/user-attachments/assets/e36ffa7e-a3a9-463a-b448-833da2b3bc69)

image-logos

![image](https://github.com/user-attachments/assets/962f33c1-d83c-4d74-a707-ec1fb867d557)

![image](https://github.com/user-attachments/assets/0014505a-bfab-4616-962a-c1a5fa30938e)

![image](https://github.com/user-attachments/assets/32d9730a-1a43-49ac-b160-b6dd610f4482)

scss/desktop-full-width.scss

@@ -13,12 +13,28 @@ $sidebar-width: 17em;
 }
 
 .d-header #site-logo {
-  // constraining the logo to fit its grid container
   // this prevents the logo from shifting header content
   // when the sidebar is opened
   max-height: 100%;
   max-width: 100%;
   object-fit: contain; // contains logo without squishing/stretching
+
+  // allows some flexibility for wide logos
+  body:not(.has-sidebar-page) & {
+    max-width: unset;
+    @include breakpoint("mobile-extra-large") {
+      max-width: 25vw;
+    }
+  }
+}
+
+.d-header #site-text-logo {
+  font-size: clamp(var(--font-0), 2.5vw, var(--font-up-2));
+  .has-sidebar-page & {
+    white-space: wrap;
+    line-height: var(--line-height-small);
+    @include line-clamp(2);
+  }
 }
 
 #main-outlet-wrapper {
@@ -150,7 +166,7 @@ $sidebar-width: 17em;
     overflow: visible;
 
     .title {
-      flex: 1 0 auto;
+      flex: 1 1 auto;
     }
   }