feat(docs-site): use the funk wordmark logo instead of "punktfunk" text

Swap the plain "punktfunk" text in the nav and landing hero for the real
brand wordmark from the marketing site. The source asset is a single
light-violet variant (made for dark surfaces), so it's painted as a CSS
mask and coloured per theme — deep-violet on light, light-violet on dark —
to stay legible with the docs' light/dark toggle.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

docs-site/src/components/Wordmark.tsx

@@ -0,0 +1,27 @@
+// The punktfunk "funk" wordmark — the real brand typo from the marketing site.
+// The source asset is a single light-violet variant (made for dark surfaces), so
+// rather than an <img> we paint it as a CSS mask and colour it per theme: the
+// deep-violet brand on light, the light-violet lens highlight on dark (matching
+// the site). Size it by setting a height (e.g. `h-5`); width follows the 579×136
+// aspect ratio.
+const maskStyle = {
+  maskImage: 'url(/funk-wordmark.webp)',
+  WebkitMaskImage: 'url(/funk-wordmark.webp)',
+  maskRepeat: 'no-repeat',
+  WebkitMaskRepeat: 'no-repeat',
+  maskSize: 'contain',
+  WebkitMaskSize: 'contain',
+  maskPosition: 'center',
+  WebkitMaskPosition: 'center',
+} as const
+
+export default function Wordmark({ className = '' }: { className?: string }) {
+  return (
+    <span
+      role="img"
+      aria-label="punktfunk"
+      style={maskStyle}
+      className={`inline-block aspect-[579/136] bg-[var(--pf-brand)] dark:bg-[var(--pf-highlight)] ${className}`}
+    />
+  )
+}

docs-site/src/lib/layout.shared.tsx

@@ -1,5 +1,6 @@
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'
 import BrandMark from '@/components/BrandMark'
+import Wordmark from '@/components/Wordmark'
 
 // Shared chrome (nav title, links) for both the docs layout and the home layout.
 // The lens mark + wordmark mirror the punktfunk marketing site's header.
@@ -9,7 +10,7 @@ export function baseOptions(): BaseLayoutProps {
       title: (
         <>
           <BrandMark className="size-6" />
-          <span className="font-display font-semibold tracking-tight">punktfunk</span>
+          <Wordmark className="h-4" />
         </>
       ),
     },

docs-site/src/routes/index.tsx

@@ -1,6 +1,7 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { HomeLayout } from 'fumadocs-ui/layouts/home'
 import BrandMark from '@/components/BrandMark'
+import Wordmark from '@/components/Wordmark'
 import { baseOptions } from '@/lib/layout.shared'
 
 export const Route = createFileRoute('/')({ component: Home })
@@ -10,7 +11,7 @@ function Home() {
     <HomeLayout {...baseOptions()}>
       <main className="flex flex-1 flex-col items-center justify-center gap-6 px-4 py-24 text-center">
         <BrandMark className="size-20 drop-shadow-[0_8px_30px_rgba(108,91,243,0.45)]" />
-        <h1 className="font-display text-4xl font-bold tracking-tight">punktfunk</h1>
+        <Wordmark className="h-12 md:h-14" />
         <p className="max-w-xl text-fd-muted-foreground">
           Linux-first, low-latency desktop and game streaming — a shared Rust protocol
           core with native clients per platform.