2.2.3

Mobile fixes

assets/css/header.css

@@ -31,8 +31,13 @@
   align-items: flex-start;
 }
 
-.header-left .utci-search-wrap {
+/* Wraps the location line + the reveal-on-demand search overlay so the
+   search can position itself directly over the location to save space. */
+.utci-loc-search {
+  position: relative;
   margin-top: 18px;
+  width: 300px;
+  max-width: 100%;
 }
 
 /* Right column — now hosts the "Why it feels like this" panel,
@@ -76,16 +81,94 @@
   margin-top: 14px;
 }
 
-/* "↳ Location, Somewhere" */
+/* "↳ Location, Somewhere" + the magnifier that reveals the search */
 .utci-current-loc {
   font-family: Fraunces, serif;
   font-style: italic;
   font-weight: 800;
   font-size: 18px;
-  margin-top: 8px;
+  margin-top: 0;
   margin-bottom: 0;
   color: #1e1208;
   text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* The location name doubles as a search trigger — styled to read as plain
+   text but with a subtle hover cue so it's discoverable. */
+.utci-loc-name {
+  flex: 0 1 auto;
+  font: inherit;
+  color: inherit;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  border-bottom: 1px dashed transparent;
+  transition: color 0.2s, border-color 0.2s;
+}
+
+/* Map pin sits just ahead of the location name; nudge it onto the text
+   baseline and tint it brass so it reads as a location marker. */
+.utci-loc-pin {
+  flex: 0 0 auto;
+  align-self: center;
+  position: relative;
+  top: 1px;
+  color: #c8922a;
+}
+
+.utci-loc-name:hover {
+  color: #c8922a;
+  border-bottom-color: #c8922a80;
+}
+
+.utci-loc-name:focus-visible {
+  outline: none;
+  color: #c8922a;
+  border-bottom-color: #c8922a;
+}
+
+/* Small brass magnifying-glass button sitting beside the location name */
+.utci-search-toggle {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1.5px solid #c9b08a;
+  border-radius: 999px;
+  background: #fffcf2;
+  color: #9a7a3a;
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
+}
+
+.utci-search-toggle:hover {
+  color: #c8922a;
+  border-color: #c8922a;
+  background: #fef3dc;
+}
+
+.utci-search-toggle:focus-visible {
+  outline: none;
+  border-color: #c8922a;
+  box-shadow: 0 0 0 3px #c8922a24;
+}
+
+.utci-search-toggle[aria-expanded="true"] {
+  color: #fff;
+  background: #c8922a;
+  border-color: #c8922a;
 }
 
 /* The lat/lon below the location */
@@ -95,6 +178,7 @@
   font-size: 11px;
   color: #b09870;
   display: block;
+  flex-basis: 100%;          /* drop onto its own line below the name + magnifier */
   margin-top: 4px;
   margin-left: 0;
   letter-spacing: 0.08em;
@@ -211,6 +295,26 @@
   width: 300px;
 }
 
+/* When revealed, the search floats over the location line rather than
+   occupying its own vertical slot — keeps the header compact. */
+.utci-search-overlay {
+  position: absolute;
+  top: -4px;
+  left: 0;
+  width: 100%;
+  z-index: 60;
+}
+
+.utci-search-overlay .utci-search {
+  box-shadow: 0 6px 20px #64461426;   /* lift it off the location underneath */
+}
+
+/* The 300px wrapper would let .utci-fetch-time's default right-align drift to
+   the far edge; keep it left-aligned beneath the coords as before. */
+.utci-loc-search .utci-fetch-time {
+  text-align: left;
+}
+
 .utci-search-label {
   font-family: Manrope, sans-serif;
   font-size: 10px;
@@ -327,8 +431,13 @@
     width: 250px;
   }
 
-  .utci-current-loc {
+  .utci-loc-search {
+    width: 100%;
     margin-top: 4px;              /* tighten gap above location on mobile */
+  }
+
+  .utci-current-loc {
+    justify-content: center;      /* centre name + magnifier on mobile */
     text-align: center;
   }
 
@@ -336,8 +445,8 @@
     text-align: center;
   }
 
-  .utci-fetch-time {
-    text-align: center;
+  .utci-loc-search .utci-fetch-time {
+    text-align: center;           /* match the desktop override's specificity */
   }
 
   .utci-search-wrap {