💄🔧：show enough of the ring to read as round

An SVG with a viewBox cannot stretch: the default preserveAspectRatio
letterboxes rather than distorts. So the oval was not the drawing, it
was how much of it reached the page. At 375px the circle's centre
landed at y=54, behind a navbar 74px tall, leaving only the cap below
its widest point. A cap is an oval.

Up by a fifth instead of a third puts the centre clear of the navbar at
every width, so the curve closes visibly.

The svg takes `height: auto` rather than `100%`, so it squares itself
off its own ratio instead of depending on the parent's height, and the
markup says preserveAspectRatio outright rather than leaning on the
default.

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

Author: DerekNonGeneric

_assets/styles/_home.scss

@@ -108,13 +108,21 @@
   color: var(--primary-tint);
   pointer-events: none;
   opacity: 0.14;
-  transform: translate(30%, -30%);
+
+  // Up by a fifth, not a third. At a third the circle's centre sits behind
+  // the fixed navbar on a phone, so all that shows is the cap below its
+  // widest point, and a cap reads as an oval. A fifth keeps the centre clear
+  // of the navbar at every width, so the curve is legible as a circle.
+  transform: translate(30%, -20%);
 }
 
+// `height: auto` rather than `100%`: with a viewBox the SVG carries its own
+// 1:1 ratio, so it squares itself off its width and does not depend on the
+// parent's height resolving to anything in particular.
 .masthead-ring svg {
   display: block;
   width: 100%;
-  height: 100%;
+  height: auto;
 }
 
 // Positioned children paint over static ones, so the content says outright

collections/_pages/home.html

@@ -16,7 +16,10 @@
       repeat.
     -->
     <div class="masthead-ring" aria-hidden="true">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid meet">
         <circle
           cx="50"
           cy="50"