Replace the dual-span show/hide approach with a purely CSS solution:
font-size: 0 collapses the link text on mobile, and ::after injects
the icon. The HTML stays clean with plain text links — no extra markup
needed. Screen readers still see the original text content.

https://claude.ai/code/session_01TfeEX8ySJ9sRCi4gyXQzkb

diff --git a/lib/ketchup/views/layout.rb b/lib/ketchup/views/layout.rb
index 8c9f2f5..134c379 100644
--- a/lib/ketchup/views/layout.rb
+++ b/lib/ketchup/views/layout.rb
@@ -51,20 +51,14 @@ module Views
         end
         body do
           header(class: "site-header") do
-            a(href: "/", class: "site-name") do
-              span(class: "hide-mobile") { "Ketchup" }
-              span(class: "show-mobile", aria_hidden: "true") { "🍅" }
-            end
+            a(href: "/", class: "site-name") { "Ketchup" }
             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") do
-              span(class: "hide-mobile") { @current_user[:login] }
-              span(class: "show-mobile", aria_hidden: "true") { "👤" }
-            end
+            a(href: "/users/#{@current_user[:id]}", class: "header-user") { @current_user[:login] }
           end
           yield
           render_footer
diff --git a/public/css/app.css b/public/css/app.css
index 42039ba..9b41200 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -12,8 +12,6 @@
   margin-inline: auto;
 }
 
-.show-mobile { display: none; }
-
 /* -------------------- */
 /* Global styles */
 /* -------------------- */
@@ -697,8 +695,20 @@ button[type="submit"]:not(.complete-btn):hover {
     align-items: center;
   }
 
-  .hide-mobile { display: none; }
-  .show-mobile { display: inline; }
+  .site-name,
+  .header-user {
+    font-size: 0;
+  }
+
+  .site-name::after {
+    content: "🍅";
+    font-size: var(--step--1);
+  }
+
+  .header-user::after {
+    content: "👤";
+    font-size: var(--step--1);
+  }
 
   .main-column {
     flex: none;