UI touch ups

site/src/styles/global.css

@@ -210,18 +210,37 @@ textarea:focus-visible {
   background: var(--surface-0);
   border-bottom: 1px solid var(--stroke-weak);
   padding: 14px 24px;
-  display: flex;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
-  justify-content: space-between;
+  gap: 12px;
+}
+
+.brand-logo-link {
+  display: inline-flex;
+  align-items: center;
+  justify-self: start;
+  border-radius: 10px;
+}
+
+.brand-logo {
+  width: 28px;
+  height: 28px;
+  display: block;
+  object-fit: contain;
 }
 
 .brand {
+  grid-column: 2;
+  justify-self: center;
   font-weight: 800;
   letter-spacing: -0.02em;
   font-size: 18px;
 }
 
 .nav {
+  grid-column: 3;
+  justify-self: end;
   display: flex;
   gap: 16px;
   font-weight: 600;
@@ -229,6 +248,8 @@ textarea:focus-visible {
 }
 
 .nav a {
+  display: inline-flex;
+  align-items: center;
   padding: 10px 12px;
   border-radius: 999px;
 }
@@ -237,6 +258,54 @@ textarea:focus-visible {
   color: var(--fg);
 }
 
+.title-hover-line {
+  position: relative;
+  --hover-line-left: 0;
+  --hover-line-right: 0;
+  --hover-line-bottom: -2px;
+}
+
+.title-hover-line::after {
+  content: "";
+  position: absolute;
+  left: var(--hover-line-left);
+  right: var(--hover-line-right);
+  bottom: var(--hover-line-bottom);
+  height: 2px;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--accent2) 72%, transparent),
+    color-mix(in srgb, var(--accent) 65%, transparent)
+  );
+  opacity: 0;
+  transform: scaleX(0.35);
+  transform-origin: center;
+  transition:
+    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 180ms ease,
+    filter 200ms ease;
+  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent2) 40%, transparent));
+  pointer-events: none;
+}
+
+.nav a.title-hover-line {
+  --hover-line-left: 12px;
+  --hover-line-right: 12px;
+  --hover-line-bottom: 7px;
+}
+
+.nav-hover-line-enabled .title-hover-line:hover::after {
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+.nav-hover-line-enabled .title-hover-line:focus-visible::after {
+  opacity: 0.9;
+  transform: scaleX(1);
+  transition: none;
+}
+
 .nav-toggle {
   display: none;
   align-items: center;
@@ -279,9 +348,23 @@ textarea:focus-visible {
 @media (max-width: 760px) {
   .site-header {
     position: sticky;
+    grid-template-columns: auto 1fr auto;
+    padding: 12px 14px;
+    gap: 10px;
+  }
+
+  .brand {
+    font-size: 17px;
+  }
+
+  .brand-logo {
+    width: 24px;
+    height: 24px;
   }
 
   .nav-toggle {
+    grid-column: 3;
+    justify-self: end;
     display: inline-flex;
   }
 
@@ -557,6 +640,11 @@ html[data-theme-transition="on"] .theme-notch-option {
     animation-duration: 0.001ms !important;
     animation-iteration-count: 1 !important;
   }
+
+  .title-hover-line::after {
+    transition: none !important;
+    filter: none;
+  }
 }
 
 .subnav {