Render both text ("Ketchup" / username) and icons (🍅 / 👤) in the
header, toggling visibility with .hide-mobile / .show-mobile utility
classes at the 48rem breakpoint. Desktop retains original text styling.

https://claude.ai/code/session_01TfeEX8ySJ9sRCi4gyXQzkb

diff --git a/lib/ketchup/views/layout.rb b/lib/ketchup/views/layout.rb
index f67cbda..8c9f2f5 100644
--- a/lib/ketchup/views/layout.rb
+++ b/lib/ketchup/views/layout.rb
@@ -51,14 +51,20 @@ module Views
         end
         body do
           header(class: "site-header") do
-            a(href: "/", class: "site-name", aria_label: "Ketchup home") { "🍅" }
+            a(href: "/", class: "site-name") do
+              span(class: "hide-mobile") { "Ketchup" }
+              span(class: "show-mobile", aria_hidden: "true") { "🍅" }
+            end
             nav(class: "site-nav") do
               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", aria_label: @current_user[:login]) { "👤" }
+            a(href: "/users/#{@current_user[:id]}", class: "header-user") do
+              span(class: "hide-mobile") { @current_user[:login] }
+              span(class: "show-mobile", aria_hidden: "true") { "👤" }
+            end
           end
           yield
           render_footer
diff --git a/public/css/app.css b/public/css/app.css
index de678ae..42039ba 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -12,6 +12,8 @@
   margin-inline: auto;
 }
 
+.show-mobile { display: none; }
+
 /* -------------------- */
 /* Global styles */
 /* -------------------- */
@@ -42,7 +44,7 @@ h2 { font-size: var(--step-0); font-weight: 600; }
 
 .site-header {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: var(--space-s);
   padding: var(--space-xs) var(--space-l);
   font-size: var(--step--1);
@@ -50,6 +52,9 @@ h2 { font-size: var(--step-0); font-weight: 600; }
 }
 
 .site-name {
+  font-weight: 600;
+  font-size: var(--step--1);
+  letter-spacing: 0.03em;
   text-decoration: none;
 }
 
@@ -57,7 +62,7 @@ h2 { font-size: var(--step-0); font-weight: 600; }
   flex: 1;
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: baseline;
   gap: var(--space-s);
 }
 
@@ -78,7 +83,14 @@ h2 { font-size: var(--step-0); font-weight: 600; }
 }
 
 .header-user {
+  color: #888;
   text-decoration: none;
+  letter-spacing: 0.03em;
+}
+
+.header-user:hover {
+  color: #222;
+  font-weight: 600;
 }
 
 /* -------------------- */
@@ -682,8 +694,12 @@ button[type="submit"]:not(.complete-btn):hover {
 @media (max-width: 48rem) {
   .site-header {
     padding-inline: var(--space-s);
+    align-items: center;
   }
 
+  .hide-mobile { display: none; }
+  .show-mobile { display: inline; }
+
   .main-column {
     flex: none;
     align-self: stretch;