diff --git a/static/style.css b/static/style.css
index 36762ca..09e3018 100644
--- a/static/style.css
+++ b/static/style.css
@@ -59,6 +59,10 @@ header {
   background: var(--surface);
 }
 .brand { display: flex; align-items: center; gap: 14px; }
+/* The title block (logo's neighbour) grows and may shrink, so the unit toggle is
+   pushed to the top-right on the logo's row and the long tagline wraps inside it
+   instead of bumping the toggle onto its own line. */
+.brand > div:not(.unit-toggle) { flex: 1 1 0; min-width: 0; }
 .logo {
   font-size: 30px;
   color: var(--accent);
@@ -248,7 +252,7 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
 
 /* --- header °F/°C unit toggle (sits at the top-right, left of the tabs) --- */
 .unit-toggle {
-  margin-left: auto; align-self: center; display: inline-flex; gap: 2px;
+  margin-left: auto; align-self: center; flex-shrink: 0; display: inline-flex; gap: 2px;
   background: var(--surface-2); border: 1px solid var(--border);
   border-radius: 11px; padding: 3px;
 }