fixes small gap between navbar and media player on mobile

src/app/app.scss

@@ -1,5 +1,9 @@
 @use '../styles/variables' as *;
 
+// Bar heights (keep in sync so player sits flush below navbar)
+$navbar-height-mobile: 64px;
+$navbar-height-desktop: 52px;
+
 app-navbar {
   position: fixed;
   top: 0;
@@ -8,25 +12,24 @@ app-navbar {
   z-index: 200;
 }
 
-// Mobile: navbar is taller (stacked brand text), so give the player room
 app-media-player {
   position: fixed;
-  top: 64px;
+  top: $navbar-height-mobile;
   left: 0;
   right: 0;
   z-index: 199;
 }
 
 main {
-  padding-top: 108px;
+  padding-top: calc(#{$navbar-height-mobile} + 44px);
 }
 
 @media (min-width: #{$bp-md}) {
   app-media-player {
-    top: 52px;
+    top: $navbar-height-desktop;
   }
 
   main {
-    padding-top: 96px;
+    padding-top: calc(#{$navbar-height-desktop} + 44px);
   }
 }

src/app/navbar/navbar.component.scss

@@ -165,6 +165,36 @@
 
 // Responsive
 @media (max-width: #{$bp-md - 1px}) {
+  .navbar {
+    height: 64px;
+    padding: $spacing-xs 0;
+  }
+
+  .navbar-inner {
+    height: 100%;
+  }
+
+  .brand-flower {
+    width: 28px;
+    height: 28px;
+  }
+
+  .brand-name {
+    gap: 0;
+  }
+
+  .brand-mountain {
+    font-size: 1.15rem;
+  }
+
+  .brand-accent {
+    font-size: 0.9rem;
+  }
+
+  .brand-tagline {
+    font-size: 0.55rem;
+  }
+
   .navbar-toggle {
     display: flex;
   }