style(site): shorter about, less space above it, softer header line

src/components/Header.astro

@@ -54,14 +54,14 @@ const path = pagePath(Astro.url);
     margin: 0 calc(var(--gutter) * -1);
     padding: var(--header-space) var(--gutter);
     background: color-mix(in srgb, var(--bg) 80%, transparent);
-    -webkit-backdrop-filter: blur(16px) saturate(1.4);
-    backdrop-filter: blur(16px) saturate(1.4);
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
     box-shadow: 0 1px 0 transparent;
     transition: box-shadow 0.2s ease;
   }
 
   header[data-scrolled] {
-    box-shadow: 0 1px 0 var(--rule);
+    box-shadow: 0 1px 0 color-mix(in srgb, var(--rule) 60%, transparent);
   }
 
   .bar {

src/layouts/Base.astro

@@ -9,9 +9,11 @@ interface Props {
   description: string;
   /** Off for pages search engines should skip, such as the 404 page. */
   indexable?: boolean;
+  /** Less space above the title, for a longer page. */
+  compact?: boolean;
 }
 
-const { title, description, indexable = true } = Astro.props;
+const { title, description, indexable = true, compact = false } = Astro.props;
 const canonical = new URL(pagePath(Astro.url), Astro.site);
 const image = new URL('/og.png', Astro.site).href;
 ---
@@ -44,7 +46,7 @@ const image = new URL('/og.png', Astro.site).href;
   </head>
   <body>
     <Header />
-    <main class="col">
+    <main class:list={['col', { compact }]}>
       <slot />
     </main>
     <Footer />

src/pages/about.astro

@@ -12,29 +12,26 @@ const next = [
 ---
 
 <Base
+  compact
   title="About Marfa"
   description="Why Marfa exists, how it was rebuilt this year, and what’s next: Marfa 0.1, TestFlight for the Mac and iOS apps, and Marfa Cloud."
 >
   <h1>About</h1>
   <p>
-    Marfa grew out of a frustration. After trying more apps than I can count, every switch meant leaving something
-    behind. It also draws on experience with customer data platforms, where one well-modelled source of data is the
-    whole point.
+    Marfa grew out of a frustration: every time I switched apps, something got left behind. It also draws on work with
+    customer data platforms, where one well-modelled source of data is the whole point.
   </p>
   <p>
-    That matters more now that agents can build an app in an afternoon. Apps can come and go; the data underneath
-    should last, and make sense to whatever reads it next.
+    That matters more now that agents can build an app in an afternoon. Apps come and go; the data underneath should
+    last.
   </p>
   <p>
-    Marfa has been rebuilt more than once this year. It began as a hosted service that tried to be compatible with
-    everything, which pulled it away from what mattered most: a sound data model and a server you can rely on. So it
-    became something you run yourself, with a Rust core under its command-line tool and native apps. Marfa Cloud will
-    follow as an optional relay for reaching it from anywhere, without holding your data.
-  </p>
-  <p>
-    It’s a personal project, not a business. It ships when it works, not before. Marfa is free and open source, so anyone
-    can run it, build on it or take it somewhere new.
+    Marfa was rebuilt more than once this year. It began as a hosted service that tried to work with everything, which
+    pulled it away from what mattered: a sound data model and a server you can rely on. Now you run it yourself, with a
+    Rust core under its command-line tool and native apps. Marfa Cloud will follow as an optional relay for reaching it
+    from anywhere, without holding your data.
   </p>
+  <p>It’s a personal project, not a business, and it ships when it works. Marfa is free and open source.</p>
 
   <h2>What’s next</h2>
   <ol class="next">

src/styles/global.css

@@ -98,6 +98,10 @@ main {
   padding: var(--top) 0 var(--end);
 }
 
+main.compact {
+  padding-top: calc(var(--top) * 0.5);
+}
+
 h1 {
   margin: 0 0 calc(var(--gap) + 6px);
   font-size: var(--title-size);