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