Who is here on the wordmark's line; every form carries a signed-in person's name and address

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GT37Z1Xtfd9pUuQtMTg6Yt

style/main.css

@@ -176,10 +176,6 @@ main.not-found {
 /* Who is here and the way in or out: top right of every page, on a
    site that has sign-in. */
 .session {
-  position: absolute;
-  top: 1rem;
-  right: 1.5rem;
-  z-index: 5;
   display: flex;
   gap: 0.9rem;
   align-items: baseline;
@@ -201,6 +197,47 @@ main.not-found {
   color: var(--ink-dim);
 }
 
+/* The wordmark's line, with who is here on it: the mark centred and the
+   session at the right edge, level with the mark. A skin that sets
+   everything on one left edge spreads the two apart instead (see
+   Klingenberg Bygg's and Gullberg's). On a narrow screen the session
+   drops under the mark rather than over it. */
+.hero-top {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.hero-top .session {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.hero-bar .hero-top {
+  justify-content: space-between;
+}
+
+.hero-bar .hero-top .session {
+  position: static;
+  transform: none;
+}
+
+@media (max-width: 34rem) {
+  .hero-top {
+    flex-wrap: wrap;
+  }
+
+  .hero-top .session {
+    position: static;
+    transform: none;
+  }
+}
+
 /* A page with pictures: the wordmark is a bar of its own, the strip
    runs the full width under it, and the question follows. */
 .hero-slides {