🏗️🔧：fix what the port to Liquid broke

Four more, found by reading the built page rather than waiting to be
told.

The navbar offset sat on `main`, which has no background, so the body's
parchment showed through it as a pale band between the dark navbar and
the dark masthead. The masthead takes the room itself now.

The logogram is an include, so it arrives with a viewBox and no width
or height, and the class carrying its size had moved to the wrapper. It
was falling back to the default 300x150. Its brand teal is set on the
shapes themselves and clears only 4.14:1 against the ink, so the tint
goes back over it.

The focus ring was ink on ink. Over the masthead, which is where the
links people are meant to follow live, there was nothing to see. The
dark sections get a parchment ring.

`wrap` is a common enough name to be taken by another page later, and
the widths it reads are declared only on .home, so it is scoped.

Signed-off-by: Derek Lewis <DerekNonGeneric@inf.is>
Assisted-by: Claude-Code:claude-opus-5

Author: DerekNonGeneric

_assets/styles/_home.scss

@@ -31,7 +31,6 @@
 // no such container, so it needs the room itself or the footer sits on top of
 // the last section.
 .home main {
-  padding-top: var(--nav-h);
   padding-bottom: 104px;
 }
 
@@ -61,16 +60,31 @@
   outline-offset: 2px;
 }
 
-.wrap {
+// The masthead and the rail are ink, and so is the ring above, so it would be
+// invisible over exactly the section holding the links people are meant to
+// follow.
+.masthead :focus-visible,
+.sdk-rail :focus-visible {
+  outline-color: var(--parchment);
+}
+
+// `wrap` is a common enough name that another page could take it later and
+// silently inherit these, and the widths it reads are only declared on .home.
+.home .wrap {
   max-width: var(--wrap);
   padding-inline: var(--gutter);
   margin-inline: auto;
 }
 
 /* --- Masthead ------------------------------------------------------ */
 
+// The navbar is fixed, so the room for it is taken here rather than on
+// `main`. Padding on `main` would sit above this section and show the body's
+// parchment through it, putting a pale band between the dark navbar and the
+// dark masthead.
 .masthead {
-  padding-block: clamp(2.5rem, 6vw, 4.5rem);
+  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem));
+  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
   color: var(--parchment);
   background-color: var(--ink);
 }
@@ -89,6 +103,24 @@
   margin-bottom: 1.25rem;
 }
 
+// The logogram is an include, so it arrives without width or height and
+// would otherwise fall back to the default 300x150. Its brand teal is also
+// set on the shapes themselves, and only clears 4.14:1 against the ink here,
+// so the tint is put back over it.
+.masthead-mark svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.masthead-mark circle {
+  stroke: var(--primary-tint);
+}
+
+.masthead-mark path {
+  fill: var(--primary-tint);
+}
+
 // _custom.scss makes every h1 a flex row and draws a rule after it, which is
 // right for a page heading and wrong for a sentence. This one is a sentence,
 // and as a flex container its words would lay out as siblings in a row.