style(header): shrink aside-hero title to text-3xl on mobile

The long uppercase Symposium hero title ran large at text-4xl on narrow
phones. Start at text-3xl, keep md:text-5xl at the desktop breakpoint.

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

src/components/SiteHeader.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
+import { useWindowScroll } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import { RouterLink, useRoute } from 'vue-router'
 import { cn } from '@/lib/utils'
@@ -26,6 +27,18 @@ const route = useRoute()
 
 const mobileOpen = ref(false)
 
+// Hide the header on scroll-down, reveal on scroll-up — the standard VueUse
+// recipe: `useWindowScroll` for the reactive position, then compare against
+// the watcher's previous value for direction. Always shown near the top of
+// the page; the 8px deadband stops jitter from tiny scroll deltas.
+const hidden = ref(false)
+const { y } = useWindowScroll()
+watch(y, (cur, prev) => {
+  if (cur < 80) hidden.value = false
+  else if (cur - prev > 8) hidden.value = true
+  else if (prev - cur > 8) hidden.value = false
+})
+
 interface NavItem {
   to: string
   label: string
@@ -88,7 +101,8 @@ watch(() => route.path, closeMobile)
 
 <template>
   <header
-    class="sticky top-0 z-40 border-b border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150"
+    class="sticky top-0 z-40 border-b border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150 transition-transform duration-300 ease-out"
+    :class="hidden && !mobileOpen ? '-translate-y-full' : 'translate-y-0'"
   >
     <div class="mx-auto max-w-7xl px-4 lg:px-6">
       <div class="flex h-16 items-center justify-between gap-4">

src/components/layout/PageHero.vue

@@ -28,7 +28,7 @@ const hasAside = () => !!slots.aside
         <p v-if="kicker" class="font-display text-xs uppercase tracking-[0.3em] text-accent">
           {{ kicker }}
         </p>
-        <h1 class="mt-3 font-display text-4xl uppercase leading-tight tracking-wider md:text-5xl">
+        <h1 class="mt-3 font-display text-3xl uppercase leading-tight tracking-wider md:text-5xl">
           {{ title }}
         </h1>
         <p v-if="lede" class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">