first publish

src/components/brand/Wordmark.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import { chrome as chromeDe, type Chrome } from "@/content/chrome";
+import { TransitionLink } from "@/components/motion/TransitionLink";
+
+export interface WordmarkProps {
+  size?: "nav" | "footer";
+  href?: string;
+  className?: string;
+  /** Optional monogram rendered before the name (header 28 px, footer 40 px). */
+  mark?: ReactNode;
+  /** Texte der Hülle. Ohne Angabe die deutsche Fassung. */
+  chrome?: Chrome;
+}
+
+/**
+ * HTML wordmark: ANELIA WOLF (Jost 300, ls .32em) over a gold hairline and the
+ * sub-line. One `<a>` with aria-label „Anelia Wolf – Startseite“.
+ * Nav: 1.0625rem, name only – rule and sub-line are the footer's job (the
+ * header row has no width to spare between 1024 and 1440). Footer: fluid
+ * 20–44 px name, sub-line gold at 0.45em / 0.18em tracking (spec §3.2: the
+ * sub never out-tracks the name).
+ */
+export function Wordmark({ size = "nav", href = "/", className, mark, chrome = chromeDe }: WordmarkProps) {
+  const footer = size === "footer";
+  return (
+    <TransitionLink
+      href={href}
+      aria-label={chrome.wordmark.ariaLabel}
+      className={cn("wordmark group inline-flex max-w-full items-center", footer ? "gap-4 sm:gap-6" : "gap-4", className)}
+    >
+      {mark && (
+        <span
+          aria-hidden="true"
+          className={cn("wordmark__mark shrink-0 [&_svg]:h-full [&_svg]:w-auto", footer ? "h-10" : "h-7")}
+        >
+          {mark}
+        </span>
+      )}
+      <span
+        className={cn(
+          "wordmark__text flex flex-col",
+          footer ? "min-w-0 text-[clamp(1.25rem,0.75rem+1.8vw,2.75rem)]" : "text-[1.0625rem]",
+        )}
+      >
+        <span
+          className={cn(
+            "wordmark__name whitespace-nowrap pl-[0.32em] font-sans text-[1em] font-light uppercase leading-none tracking-[0.32em]",
+            "text-fg",
+          )}
+        >
+          {chrome.wordmark.name}
+        </span>
+        <span
+          aria-hidden="true"
+          className={cn("wordmark__rule rule-gold", footer ? "my-[0.3em]" : "hidden")}
+        />
+        <span
+          className={cn(
+            "wordmark__sub pl-[0.22em] font-sans font-normal uppercase",
+            footer
+              ? "max-sm:whitespace-normal max-sm:leading-[1.5] sm:whitespace-nowrap sm:leading-none text-[0.55em] tracking-[0.18em] text-gold sm:text-[0.45em]"
+              : "hidden",
+          )}
+        >
+          {chrome.wordmark.sub}
+        </span>
+      </span>
+    </TransitionLink>
+  );
+}
+
+export default Wordmark;