fix: match header wordmark to product typography

Render the SQLStack header wordmark in Space Grotesk 700 with normal
letter-spacing, matching the product names, while keeping its 22px size.

Author: kvlonge

styles.css

@@ -68,7 +68,7 @@ img { display: block; object-fit: contain; }
 .site-header { border-bottom: 1px solid var(--line); }
 .header-inner { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
 .brand { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); text-decoration: none; }
-.brand span { font-size: 22px; font-weight: 750; letter-spacing: -.8px; }
+.brand span { font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0; }
 .nav-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--muted); }
 .nav-icon:hover { color: var(--ink); }
 .nav-icon:focus-visible { outline-offset: 3px; }

tests/website.spec.mjs

@@ -50,6 +50,10 @@ test('approved products, sharing assets and responsive navigation work in both t
     await expect(page.getByRole('heading', { level: 1 })).toHaveText('Your data stack. Engineered for safer change.');
     await expect(page.locator('.hero .lede')).toHaveText('Rust-backed SQL and Python tools for data engineers.');
     await expect(page.getByRole('heading', { level: 3 })).toHaveText(names);
+    const wordmark = page.locator('.brand span');
+    for (const [property, value] of [['font-family', '"Space Grotesk", sans-serif'], ['font-weight', '700'], ['letter-spacing', 'normal'], ['font-size', '22px']]) {
+      await expect(wordmark).toHaveCSS(property, value);
+    }
     await expect(page.getByRole('link', { name: 'SQLStack on GitHub', exact: true })).toHaveAttribute('href', 'https://github.com/sqlstack-io');
     for (const [name, website] of [['SQLBuild', 'https://sqlbuild.com'], ['SQLTide', 'https://sqltide.io/'], ['SQLClean', 'https://sqlclean.io'], ['Fensu', 'https://fensu.io/']]) {
       const card = page.getByRole('article', { name, exact: true });