feat: ProjectLockup component

src/components/ProjectLockup.astro

@@ -0,0 +1,67 @@
+---
+interface Props {
+  size?: 'hero' | 'lg' | 'md';
+  alignment?: 'left' | 'center';
+  showWordmark?: boolean;
+}
+
+const { size = 'hero', alignment = 'left', showWordmark = true } = Astro.props;
+
+const sizeClass = `lockup--${size}`;
+const alignClass = `lockup--${alignment}`;
+---
+<div class:list={['lockup', sizeClass, alignClass]}>
+  <p class="lockup-name">
+    <span class="lockup-regular">Project </span><em class="lockup-bold-italic">Bifrost</em><span class="lockup-period">.</span>
+  </p>
+  {showWordmark && (
+    <div class="lockup-wordmark-row">
+      <img src="/logo.svg" alt="Fenja AI" class="lockup-wordmark" />
+    </div>
+  )}
+</div>
+
+<style>
+  .lockup {
+    display: flex;
+    flex-direction: column;
+  }
+  .lockup--left  { align-items: flex-start; text-align: left; }
+  .lockup--center { align-items: center;    text-align: center; }
+
+  /* ── Project name ────────────────────────────────────────────────── */
+  .lockup-name {
+    font-family: var(--font-serif);
+    letter-spacing: var(--tracking-tight);
+    line-height: var(--leading-tight);
+    color: var(--on-surface);
+    margin: 0;
+  }
+
+  .lockup-regular      { font-weight: 400; font-style: normal; }
+  .lockup-bold-italic  { font-weight: 700; font-style: italic; }
+  .lockup-period       { font-weight: 700; font-style: italic; }
+
+  /* ── Sizes ───────────────────────────────────────────────────────── */
+  .lockup--hero .lockup-name { font-size: var(--text-display-lg); }
+  .lockup--lg   .lockup-name { font-size: var(--text-display-md); }
+  .lockup--md   .lockup-name { font-size: var(--text-headline-lg); }
+
+  /* ── Fenja wordmark ──────────────────────────────────────────────── */
+  .lockup-wordmark-row {
+    display: flex;
+    align-items: center;
+  }
+
+  .lockup--hero .lockup-wordmark-row { margin-top: var(--space-5); }
+  .lockup--lg   .lockup-wordmark-row { margin-top: var(--space-4); }
+  .lockup--md   .lockup-wordmark-row { margin-top: var(--space-3); }
+
+  .lockup-wordmark {
+    opacity: 0.45;
+    display: block;
+  }
+  .lockup--hero .lockup-wordmark { height: 18px; }
+  .lockup--lg   .lockup-wordmark { height: 16px; }
+  .lockup--md   .lockup-wordmark { height: 14px; }
+</style>