💄🔧：let the spacing this file asks for apply

Scoping the reset to `.home` gave it a class and an element, which
outranks a lone class, so around thirteen margins in this file were
computing to zero whatever they said. The gaps were not tight by
design; they were not being applied. `.masthead-lede` asked for
1.5rem and got none, and "Discord preferred" was never flush right.
Each is scoped to `.home` in turn now, the way `.home .wrap` already
was.

The post title and excerpt are spans inside a grid, which only
blockifies its own children, so they ran together as one line and took
no vertical margin. Both are blocks now.

With that working, the ones still cramped were opened: the stat pairs,
the area and work descriptions, the SDK lede, the channel list, the
excerpt.

The ring gains a little ink under 560px. At that width it is small
enough that 14% read as a smudge rather than an arc.

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

Author: DerekNonGeneric

_assets/styles/_home.scss

@@ -151,7 +151,7 @@
   color: var(--primary-tint);
 }
 
-.masthead-lede {
+.home .masthead-lede {
   max-width: 46ch;
   margin-top: 1.5rem;
   font-size: clamp(1rem, 1.3vw, 1.125rem);
@@ -187,7 +187,7 @@
   line-height: 1.2;
 }
 
-.join-note {
+.home .join-note {
   margin-left: auto;
   font-family: var(--mono);
   font-size: 0.6875rem;
@@ -196,8 +196,8 @@
   letter-spacing: 0.08em;
 }
 
-.join-channels {
-  margin-block: 0.25rem 0.875rem;
+.home .join-channels {
+  margin-block: 0.625rem 0.875rem;
 }
 
 .channel {
@@ -267,7 +267,7 @@
   color: var(--parchment);
 }
 
-.join-coc {
+.home .join-coc {
   margin-top: 0.75rem;
   font-size: 0.8125rem;
   color: rgb(231 231 214 / 58%);
@@ -329,7 +329,7 @@
 .stat {
   display: flex;
   flex-direction: column-reverse; /* value reads above its label */
-  gap: 0.125rem;
+  gap: 0.375rem;
 }
 
 // Bootstrap's reboot bolds every dt; these dl/dt/dd pairs are borrowed for
@@ -377,13 +377,13 @@
   letter-spacing: -0.015em;
 }
 
-.sdk-lede {
+.home .sdk-lede {
   max-width: 58ch;
-  margin-top: 0.875rem;
+  margin-top: 1rem;
   font-size: 1.0625rem;
 }
 
-.areas {
+.home .areas {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
   gap: 1px;
@@ -404,20 +404,20 @@
   color: var(--primary-deep);
 }
 
-.area-name {
+.home .area-name {
   margin-top: 0.5rem;
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.25;
 }
 
-.area-what {
-  margin-top: 0.375rem;
+.home .area-what {
+  margin-top: 0.5rem;
   font-size: 0.875rem;
   color: #4b433c;
 }
 
-.areas-note {
+.home .areas-note {
   margin-top: 0.875rem;
   font-size: 0.875rem;
   color: #4b433c;
@@ -472,7 +472,7 @@
   user-select: none;
 }
 
-.install-note {
+.home .install-note {
   max-width: 60ch;
   margin-top: 0.75rem;
   font-size: 0.875rem;
@@ -513,7 +513,7 @@
 
 /* --- Latest ---------------------------------------------------------- */
 
-.post {
+.home .post {
   display: grid;
   grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
   gap: 0.375rem 1.5rem;
@@ -522,18 +522,18 @@
   border-bottom: 1px solid rgb(167 151 139 / 55%);
 }
 
-.post:hover .post-title {
+.home .post:hover .post-title {
   text-decoration: underline;
 }
 
-.post-meta {
+.home .post-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   align-items: baseline;
 }
 
-.post-cat {
+.home .post-cat {
   padding: 0.0625rem 0.4375rem;
   font-family: var(--mono);
   font-size: 0.6875rem;
@@ -543,33 +543,39 @@
   background-color: var(--tertiary);
 }
 
-.post-date {
+.home .post-date {
   font-family: var(--mono);
   font-size: 0.75rem;
   color: #6b6259;
 }
 
-.post-title {
+// Both are spans, kept for the grid's sake (see `.post`), but not blockified
+// by it: only `.post-body`, the direct grid item, is. Left as spans they run
+// on as one paragraph, title-text-then-excerpt, and `margin-top` below does
+// nothing — inline boxes do not take vertical margin.
+.home .post-title {
+  display: block;
   font-size: 1.25rem;
   font-weight: 700;
   line-height: 1.25;
   color: var(--primary-deep);
 }
 
-.post-excerpt {
+.home .post-excerpt {
+  display: block;
   max-width: 62ch;
-  margin-top: 0.25rem;
+  margin-top: 0.5rem;
   font-size: 0.9375rem;
   color: var(--ink);
 }
 
 /* --- How we work ------------------------------------------------------ */
 
-.work-list {
+.home .work-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
   gap: 0;
-  margin-top: 0.25rem;
+  margin-top: 0.5rem;
 }
 
 .work-item {
@@ -582,13 +588,13 @@
   font-weight: 700;
 }
 
-.work-what {
-  margin-top: 0.25rem;
+.home .work-what {
+  margin-top: 0.5rem;
   font-size: 0.875rem;
   color: #4b433c;
 }
 
-.elsewhere {
+.home .elsewhere {
   margin-top: 1.5rem;
   font-size: 0.875rem;
   color: #4b433c;
@@ -607,11 +613,19 @@
 }
 
 @media (width < 560px) {
+  // At this width the stacked grid shows only a small corner of the ring,
+  // below the fixed navbar, with the two-column join panel it otherwise
+  // crosses nowhere in sight. 14% reads clearly next to that panel's own
+  // text; alone in the corner it needs more ink to still read as deliberate.
+  .masthead-ring {
+    opacity: 0.2;
+  }
+
   .post {
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .join-note {
+  .home .join-note {
     width: 100%;
     margin-left: 0;
   }