feat(home/hero): use Berry Rotunda for the title font

Swap the hero wordmark font from Sketch Gothic School (free for personal
use only) to Berry Rotunda — a public-domain rotunda/insular face that
suits the celtic-knot theme and carries no licensing constraints for
commercial/web use. Self-host as woff2/woff and drop the old font files.
The SVG clip viewBox auto-fits to the new glyph metrics.

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

src/style.css

@@ -3,13 +3,14 @@
 
 @custom-variant dark (&:is(.dark *));
 
-/* Self-hosted blackletter used for the hero title ("Sketch Gothic School").
+/* Self-hosted rotunda used for the hero title ("Berry Rotunda", public
-   Only needed to shape the SVG clip glyphs the hero video shows through. */
+   domain). Only needed to shape the SVG clip glyphs the hero video shows
+   through. */
 @font-face {
-  font-family: 'Sketch Gothic School';
+  font-family: 'Berry Rotunda';
   src:
-    url('./assets/fonts/sketch-gothic-school.woff2') format('woff2'),
+    url('./assets/fonts/berry-rotunda.woff2') format('woff2'),
-    url('./assets/fonts/sketch-gothic-school.woff') format('woff');
+    url('./assets/fonts/berry-rotunda.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
@@ -98,7 +99,7 @@
     'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
   --font-display: 'Aboreto', 'Cormorant Garamond', Georgia, serif;
   --font-script: 'Tangerine', 'Allura', cursive;
-  --font-blackletter: 'Sketch Gothic School', 'UnifrakturMaguntia', serif;
+  --font-title: 'Berry Rotunda', 'UnifrakturMaguntia', serif;
 }
 
 @layer base {

src/views/HomeView.vue

@@ -20,7 +20,7 @@ const tileStyle = {
 
 const { t } = useI18n()
 
-// The hero title is SVG text (Sketch Gothic School) used as a clip over the
+// The hero title is SVG text (Berry Rotunda) used as a clip over the
 // wordmark video. Measure the rendered glyph box once the font loads and fit
 // the viewBox/foreignObject to it, so the wordmark fills the SVG width without
 // clipping regardless of the font's metrics.
@@ -110,7 +110,7 @@ const featuredEvents = [
           {{ t('common.tagline') }}
         </p>
         <h1 class="sr-only">Château du Faune</h1>
-        <!-- Hero title: blackletter text clips the forest/cloud video so it
+        <!-- Hero title: rotunda text clips the forest/cloud video so it
              appears to drift through the letters. The SVG scales by viewBox
              (always one line); a gold drop-shadow gives the engraved edge. -->
         <svg
@@ -126,7 +126,7 @@ const featuredEvents = [
                 x="550"
                 y="122"
                 text-anchor="middle"
-                font-family="'Sketch Gothic School', 'UnifrakturMaguntia', serif"
+                font-family="'Berry Rotunda', 'UnifrakturMaguntia', serif"
                 font-size="120"
               >
                 Château du Faune