🏗️🔧：stop the shared styles bending the front page

Three things the deploy preview showed.

_custom.scss makes every h1 a flex row and draws a rule after it. That
is right for a page heading and wrong for a sentence: the masthead
title became a row of siblings with a taupe line stuck on the end.

The footer carries `margin-top: -60px !important`, which the rest of
the site absorbs in the bottom padding on `main > .container`. This
page has no such container, so the footer sat over its last section.

And `main` here missed the `flex-shrink-0` that page.liquid gives it,
which the body's flex column wants.

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

Author: DerekNonGeneric

_assets/styles/_home.scss

@@ -26,8 +26,13 @@
 }
 
 // Scoped so the home page's own resets cannot reach the rest of the site.
+// The footer carries `margin-top: -60px !important`, which the rest of the
+// site absorbs with the bottom padding on `main > .container`. This page has
+// 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;
 }
 
 .home h1,
@@ -84,7 +89,11 @@
   margin-bottom: 1.25rem;
 }
 
+// _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.
 .masthead-title {
+  display: block;
   max-width: 22ch;
   font-size: clamp(1.75rem, 3.6vw, 3rem);
   font-weight: 700;
@@ -93,6 +102,10 @@
   text-wrap: balance;
 }
 
+.masthead-title::after {
+  content: none;
+}
+
 /* The four verbs are the project's own statement of what it is for. */
 .masthead-title em {
   font-style: normal;

collections/_pages/home.html

@@ -7,7 +7,7 @@
 eleventyImport:
   collections: ['post']
 ---
-<main>
+<main class="flex-shrink-0">
   <!-- ================= masthead: what it is + how to take part ======== -->
   <section class="masthead">
     <div class="wrap masthead-grid">