Put the header back in its corners, and give sound a control

The banner. It was a full-width bar with its own background and border, which
read as a second layer of chrome stretching past the content on both sides,
and because it reserved height at the top of the page it pushed the wordmark
out of the top-left corner and the icon rail down out of the top-right. It is
just the unit now, centred, sharing that line with both of them.

It is also thinner: a 468x60 full banner rather than a 728x90 leaderboard,
and 320x50 rather than 320x100 on a phone. Both are standard units. At 90px
the banner was deeper than the icon rail beside it, so it decided how far
down the whole page began; at 60px it is shorter than the rail and the
content offset is the rail's, not the banner's. The page below is unaffected
by whether an advert is there at all.

Below 980px the wordmark, the unit and the rail no longer fit on one line, so
the banner drops beneath them and the content clears both.

The mark. It was five shapes in a 32 pixel square: a chevron, an offset ghost
copy of that chevron, a full-width baseline, and a large filled block. That
is a drawing, not a mark, and the parts crowded each other so none of them
read. It is two shapes now, a chevron and the underscore cursor after it,
which is a shell prompt and the gesture anyone who has used a terminal
recognises.

The cursor blink faded to 0.15 opacity over an uneven 45/55 split, so it
ghosted rather than blinked. A terminal cursor is a hard square wave: fully
on, fully off, 530ms each way. Only the menu's title blinks now, because
something blinking in the corner of every screen is a distraction.

The menu title sat 16px right of the buttons underneath it. Centring the mark
and the name together as one box put the name off-centre, and the
absolutely-positioned mark overflowed the menu's padding, which moved the box
itself. It is a three column grid now, the third empty and the same width as
the first, so the wordmark is in the exact centre by construction with the
mark to its left. Measured 0px offset at six widths.

The corner wordmark is back on the menu. Leaving it off to avoid showing the
name twice made it look like it had gone missing, and it is the way back to
the menu from everywhere else, so it should be in the same place on every
screen.

Sound. The engine worked: one oscillator per keystroke, verified by counting
them. It was off by default and its only control was a line inside the
settings dialog, so the usual way to find it was to be told it existed. It is
a speaker in the top rail now, cycling off, click and mechanical, and it
defaults to mechanical. A browser will not start an audio context before a
user gesture and the first keystroke is one, so the first tone plays with the
first character: confirmed with a fresh profile under the default autoplay
policy, context running, six tones for six keystrokes.

The copies in the two settings panels are gone. One setting, one control.

3 browser tests pass, all 21 screen and viewport combinations clean, and the
margin rails still appear only above 1424px.

1 files changed, 84 insertions, 36 deletions

diff --git a/web/src/styles.css b/web/src/styles.css
index ee132d9..375f257 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -16,14 +16,15 @@
        header moves down when one is shown. --ad-banner-h is set on the root
        element by mountTopAdBanner and is 0px whenever the banner is hidden,
        so nothing below has to know whether a banner exists. */
-    --ad-banner-height: 6.5rem;
+    --ad-banner-height: 3.75rem;
     --ad-banner-h: 0px;
     /* Set from the measured top rail by renderTopRail, because the rail is
        one row signed in and two signed out. The fallback covers the moment
        before the first measurement lands. */
     --top-rail-h: 2.5rem;
-    /* Where content starts: below the banner, below the rail, plus a gap. */
-    --header-offset: calc(1rem + var(--top-rail-h) + 0.75rem + var(--ad-banner-h));
+    /* Where content starts. The banner sits beside the rail rather than above
+       it, so this clears whichever of the two is taller, not their sum. */
+    --header-offset: calc(1rem + max(var(--top-rail-h), var(--ad-banner-h)) + 0.75rem);
     /* App padding variable so we can compensate where needed */
     --app-padding: 1rem;
     /* Room at the foot of every screen for the fixed footer and the corner
@@ -216,7 +217,7 @@ body {
 /* The mark and wordmark together, fixed at the top-left of every screen. */
 .logo {
     position: fixed;
-    top: calc(1rem + var(--ad-banner-h));
+    top: 1rem;
     left: 1rem;
     display: flex;
     align-items: center;
@@ -236,22 +237,13 @@ body {
     overflow: visible;
 }
 
-.logo-mark-chevron,
-.logo-mark-baseline,
-.logo-mark-cursor {
-    stroke: var(--primary-color);
-    fill: var(--primary-color);
-}
-
 .logo-mark-chevron {
+    stroke: var(--primary-color);
     fill: none;
 }
 
-/* The offset copy underneath. Faint enough to read as a print misregistration
-   rather than a second chevron. */
-.logo-mark-ghost {
-    stroke: var(--secondary-color, var(--primary-color));
-    opacity: 0.55;
+.logo-mark-cursor {
+    fill: var(--primary-color);
 }
 
 /* Plain inline, not a flex container. As inline-flex the two halves became
@@ -282,16 +274,19 @@ body {
 /* The cursor blinks, at the same rate as the typing caret, because it is the
    same idea. Anyone who has asked not to see motion gets it held still. */
 @keyframes logo-cursor-blink {
-    0%, 45% { opacity: 1; }
-    55%, 100% { opacity: 0.15; }
+    0%, 50% { opacity: 1; }
+    50.01%, 100% { opacity: 0; }
 }
 
-.logo-mark-cursor {
-    animation: logo-cursor-blink 1.6s steps(1, end) infinite;
+/* Only the menu's own title blinks. The corner mark is on every screen, and
+   something blinking in the corner of every screen is a distraction rather
+   than a flourish. */
+.logo-hero .logo-mark-cursor {
+    animation: logo-cursor-blink 1.06s steps(1, end) infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .logo-mark-cursor {
+    .logo-hero .logo-mark-cursor {
         animation: none;
     }
 }
@@ -327,12 +322,48 @@ body {
 /* The menu's own title is the full lockup at size. It is not fixed to the
    corner like the one every other screen carries: the menu had both, so the
    name appeared twice on the same screen. */
+.logo-corner {
+    cursor: default;
+    opacity: 0.55;
+}
+
+.logo-corner:hover .logo-word-a {
+    color: var(--text-color);
+}
+
+.logo-corner:hover .logo-word-b {
+    color: var(--primary-color);
+}
+
 .logo-hero {
     position: static;
-    font-size: 3.25rem;
-    gap: 0.75rem;
+    /* Sized to the buttons beneath it rather than to nothing in particular:
+       the menu buttons are 250px wide at 1.2rem, and this sits above them. */
+    font-size: 2.5rem;
+    gap: 0;
     margin-bottom: 2rem;
     cursor: default;
+    /* Three columns, the third empty and the same width as the first. That
+       puts the wordmark in the exact centre of the row with the mark to its
+       left, which is what has to line up with the buttons underneath.
+       Centring the mark and the name together as one flex box put the name
+       16px right of everything below it. */
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    width: 100%;
+}
+
+.logo-hero .logo-mark {
+    grid-column: 1;
+    justify-self: end;
+    margin-right: 0.4em;
+    width: 1.05em;
+    height: 1.05em;
+}
+
+.logo-hero .logo-word {
+    grid-column: 2;
 }
 
 .logo-hero:hover .logo-word-a {
@@ -2495,7 +2526,7 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
    themselves into it. */
 .top-rail {
     position: fixed;
-    top: calc(1rem + var(--ad-banner-h));
+    top: 1rem;
     right: 1rem;
     z-index: 100;
     /* Two rows: the icons, and the sign-in links under them. As one row the
@@ -2982,6 +3013,13 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
    on :active, so a click on a button that opens a panel elsewhere on screen
    gave no feedback at the point of contact. */
 .menu-button:active:not(:disabled),
+/* A rail control that is switched on. The sound toggle is the only one where
+   the state is not obvious from the icon alone at a glance. */
+.corner-icon-button.active {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
 .corner-icon-button:active,
 .end-screen-button:active {
     transform: translateY(1px);
@@ -3879,19 +3917,19 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
     letter-spacing: 1px;
 }
 
+/* The unit itself, centred at the top of the page. Not a full-width bar: as
+   one it read as a second chrome layer stretching past the content on both
+   sides, and it pushed the wordmark and the icon rail down out of the corners
+   they belong in. On a wide window all three share the top line. */
 .ad-banner-top {
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: var(--ad-banner-height);
-    z-index: 90;
+    top: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 85;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--background-color);
-    border-bottom: var(--border-width) solid var(--border-color);
-    box-sizing: border-box;
 }
 
 .ad-banner-top[hidden] {
@@ -3902,9 +3940,6 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 100%;
-    padding: 0 1rem;
-    box-sizing: border-box;
 }
 
 /* No top margin in the banner: the bar centres it already. */
@@ -3926,6 +3961,19 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
     box-sizing: border-box;
 }
 
+/* Below this the wordmark, the unit and the icon rail do not fit on one line,
+   so the banner drops beneath the header row instead of colliding with it,
+   and the content column clears both. */
+@media (max-width: 980px) {
+    .ad-banner-top {
+        top: calc(1rem + var(--top-rail-h) + 0.5rem);
+    }
+
+    :root {
+        --header-offset: calc(1rem + var(--top-rail-h) + 0.5rem + var(--ad-banner-h) + 0.75rem);
+    }
+}
+
 /* The page margins. Hidden by default and shown only on a window wide enough
    to hold them beside the content without crowding it: the widest content
    column is 1040px, and two 160px rails with gaps need 1424px before they fit
@@ -3977,7 +4025,7 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
     }
 
     :root {
-        --ad-banner-height: 7rem;
+        --ad-banner-height: 3.125rem;
     }
 }