web/app/globals.css

@@ -62,11 +62,9 @@ body {
 .nav-links {
   display: flex;
   align-items: center;
-  gap: 2rem;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  gap: 1.25rem;
+  flex: 1;
+  justify-content: center;
 }
 
 /* Indivdual Link Styles */
@@ -2650,7 +2648,24 @@ body {
 
 /* Mobile / Responsive */
 
-@media (max-width: 768px) {
+/* Compact nav at mid-range widths before collapsing to hamburger */
+@media (min-width: 1101px) and (max-width: 1350px) {
+  .nav-links {
+    gap: 0.25rem;
+  }
+
+  .nav-link {
+    font-size: 0.9rem;
+    padding: 0.4rem 0.5rem;
+  }
+
+  .nav-auth {
+    gap: 0.35rem;
+    padding-left: 0.5rem;
+  }
+}
+
+@media (max-width: 1100px) {
   .navbar {
     padding: 0.5rem 1rem;
   }
@@ -2706,7 +2721,7 @@ body {
   display: none;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1100px) {
   /* Show hamburger bar, hide desktop nav */
   .nav-mobile-bar {
     display: flex;