Darken inactive nav links and actions from #bbb/#ddd to #888.
Move user link out of nav to the header so nav stays centered.
Add bottom border to separate header from content.

Assisted-by: Claude Opus 4.6 via Claude Code

diff --git a/lib/ketchup/views/layout.rb b/lib/ketchup/views/layout.rb
index 040585b..a00f570 100644
--- a/lib/ketchup/views/layout.rb
+++ b/lib/ketchup/views/layout.rb
@@ -46,9 +46,12 @@ module Views
                   class: ["view-link", ("view-link--active" if @active_view == view_key)]
                 ) { label }
               end
-              a(href: "/series/new", class: "header-action") { "+ New" }
-              a(href: "/users/#{@current_user[:id]}", class: "header-user") { @current_user[:login] }
+              a(
+                href: "/series/new",
+                class: ["header-action", ("header-action--active" if @active_view == :new)]
+              ) { "+New" }
             end
+            a(href: "/users/#{@current_user[:id]}", class: "header-user") { @current_user[:login] }
           end
           yield
           div(
diff --git a/lib/ketchup/views/series/new.rb b/lib/ketchup/views/series/new.rb
index 155de2e..459817f 100644
--- a/lib/ketchup/views/series/new.rb
+++ b/lib/ketchup/views/series/new.rb
@@ -13,7 +13,7 @@ module Views
       end
 
       def view_template
-        render Layout.new(current_user: @current_user, title: "New Series — Ketchup") do
+        render Layout.new(current_user: @current_user, title: "New Series — Ketchup", active_view: :new) do
           div(class: "wrapper flow") do
             h1 { "New Series" }
 
diff --git a/public/css/app.css b/public/css/app.css
index 53efbb0..e9b3564 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -45,6 +45,7 @@ h2 { font-size: var(--step-0); font-weight: 600; }
   align-items: baseline;
   padding: var(--space-xs) var(--space-l);
   font-size: var(--step--2);
+  border-block-end: 1px solid #ddd;
 }
 
 .site-name {
@@ -63,7 +64,7 @@ h2 { font-size: var(--step-0); font-weight: 600; }
 }
 
 .header-action {
-  color: #bbb;
+  color: #888;
   text-decoration: none;
   letter-spacing: 0.03em;
 }
@@ -72,8 +73,13 @@ h2 { font-size: var(--step-0); font-weight: 600; }
   color: #222;
 }
 
+.header-action--active {
+  color: #c00;
+  font-weight: 600;
+}
+
 .header-user {
-  color: #ddd;
+  color: #888;
   text-decoration: none;
   letter-spacing: 0.03em;
 }
@@ -83,7 +89,7 @@ h2 { font-size: var(--step-0); font-weight: 600; }
 }
 
 .view-link {
-  color: #bbb;
+  color: #888;
   text-decoration: none;
   letter-spacing: 0.03em;
 }