Mobile

src/styles/global.css

@@ -954,9 +954,10 @@ body.docs-sidebar-open {
 @media (max-width: 900px) {
   :root {
     --nav-h: 60px;
-    /* Same pear size as desktop; no cradle on small screens */
-    --brand-logo: 96px;
-    --brand-top-inset: 4px;
+    /* Fit fully inside the bar — no overflow / cradle on mobile */
+    --brand-logo: 44px;
+    --brand-top-inset: 0px;
+    --brand-overhang: 0px;
   }
 
   .site-nav {
@@ -981,12 +982,13 @@ body.docs-sidebar-open {
   .nav-brand {
     order: 1;
     font-size: 1.1rem;
-    gap: 0.1rem;
+    gap: 0.35rem;
     height: calc(var(--nav-h) - 0px);
     min-height: calc(var(--nav-h) - 8px);
+    align-items: center;
   }
 
-  /* No cradle semicircle on mobile — pear still floats at full size */
+  /* No cradle on mobile */
   .nav-brand::before,
   .nav-brand::after,
   .site-nav.scrolled .nav-brand::before,
@@ -999,11 +1001,20 @@ body.docs-sidebar-open {
   }
 
   .nav-brand-text {
-    margin-left: -0.25rem;
+    margin-left: 0;
   }
 
   .nav-brand-logo {
-    margin-bottom: calc(-1 * var(--brand-overhang));
+    /* Sit flush in the bar — no hang above/below */
+    align-self: center;
+    margin: 0;
+    width: var(--brand-logo);
+    height: var(--brand-logo);
+    max-height: calc(var(--nav-h) - 12px);
+  }
+
+  .nav-brand:hover .nav-brand-logo {
+    transform: none;
   }
 
   .nav-toggle {
@@ -1192,18 +1203,18 @@ body.docs-sidebar-open {
 /* Very small phones */
 @media (max-width: 380px) {
   :root {
-    /* Keep full-size floating pear; cradle already off below 900px */
-    --brand-logo: 96px;
-    --brand-top-inset: 4px;
+    --brand-logo: 40px;
+    --brand-top-inset: 0px;
+    --brand-overhang: 0px;
   }
 
   .nav-brand {
     font-size: 1rem;
-    gap: 0.05rem;
+    gap: 0.25rem;
   }
 
   .nav-brand-text {
-    margin-left: -0.2rem;
+    margin-left: 0;
   }
 
   .container,