feat(layout): wider canvas + 'Project Bifrost' wordmark + section-link utility

- Width: --content-max 72rem → 83rem (15% wider, per the v3 follow-up
  spec). Every page that uses var(--content-max) gets the new bound.
- Wordmark in the top-left nav: Fenja logo · "Project Bifrost". 'Bifrost'
  is serif italic with a horizontal pigment-rainbow gradient
  (terracotta → ochre → copper → indigo → heather), background-clip:text.
  The bullet separator uses --on-surface-muted at 1rem.
- Global .section-link utility class: serif italic, terracotta, no
  underline, no all-caps. Modifier --ink for use on the dark events card.
  This becomes the only italic body text on the site (along with the
  Bifrost wordmark); everywhere else loses italics in the next commit.

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

src/layouts/AppLayout.astro

@@ -28,6 +28,8 @@ const year = new Date().getFullYear();
       <div class="nav-inner">
         <a href="/" class="wordmark-link" aria-label="Project Bifrost — home">
           <img src="/logo.svg" alt="Fenja AI" class="wordmark" />
+          <span class="wordmark-sep" aria-hidden="true">·</span>
+          <span class="wordmark-project">Project <em class="wordmark-bifrost">Bifrost</em></span>
         </a>
 
         <nav class="nav-right" aria-label="Main navigation">
@@ -110,16 +112,47 @@ const year = new Date().getFullYear();
     flex-shrink: 0;
     display: flex;
     align-items: center;
+    gap: var(--space-3);
     border-bottom: none;
+    color: var(--on-surface);
   }
   .wordmark-link:hover {
     border-bottom: none;
+    color: var(--on-surface);
   }
   .wordmark {
     height: 22px;
     width: auto;
     display: block;
   }
+  .wordmark-sep {
+    color: var(--on-surface-muted);
+    font-size: 1rem;
+    line-height: 1;
+  }
+  .wordmark-project {
+    font-family: var(--font-sans);
+    font-size: var(--text-body-md);
+    font-weight: 500;
+    color: var(--on-surface);
+    letter-spacing: 0;
+  }
+  .wordmark-bifrost {
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-weight: 400;
+    background-image: linear-gradient(
+      90deg,
+      var(--pigment-terracotta) 0%,
+      var(--pigment-ochre)      28%,
+      var(--pigment-copper)     54%,
+      var(--pigment-indigo)     78%,
+      var(--pigment-heather)    100%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
 
   /* ── Nav links ──────────────────────────────────────────────────── */
   .nav-right {

src/styles/global.css

@@ -232,6 +232,31 @@ a:hover {
 .ghost-border        { border: var(--ghost-border); }
 .ghost-border-bottom { border-bottom: var(--ghost-border); }
 
+/* --- Section link — prominent italic serif, placed at the bottom of
+       its respective box or article. See points 8 + 10 in the v3 spec:
+       italics are reserved for links + the Bifrost wordmark. --- */
+.section-link {
+  display: inline-block;
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: var(--text-body-md);
+  color: var(--pigment-terracotta);
+  text-decoration: none;
+  border-bottom: none;
+  transition: opacity var(--duration-fast) var(--ease-standard);
+}
+.section-link:hover {
+  border-bottom: none;
+  opacity: 0.78;
+  color: var(--pigment-terracotta);
+}
+.section-link--ink {
+  color: var(--ink-text);
+}
+.section-link--ink:hover {
+  color: var(--ink-text);
+}
+
 /* --- Focus ring --- */
 :focus-visible {
   outline: 2px solid var(--secondary);

src/styles/tokens.css

@@ -129,6 +129,6 @@
   --duration-slow: 420ms;
 
   /* --- Layout --- */
-  --content-max: 72rem;   /* 1152px */
+  --content-max: 83rem;   /* 1328px — 15% wider than the original 72rem */
   --reading-max: 42rem;   /*  672px */
 }