feat(mail): add site URL handling and notification headers

* include site URL in Mailer for absolute URLs
* add header method for email notifications

ui/src/routes/venue/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhotoBackground from "$lib/components/PhotoBackground.svelte";
   import { createWeddingInfo } from "$lib/wedding-info.svelte";
 
   const wedding = createWeddingInfo();
@@ -10,13 +11,19 @@
   );
 </script>
 
-<section class="flex flex-1 items-center justify-center px-4 py-16">
-  <div class="w-full max-w-md">
-    <h1 class="font-serif text-4xl">The Venue</h1>
+<section
+  class="relative flex flex-1 items-center justify-center overflow-hidden px-4 py-16 z-10"
+>
+  <PhotoBackground />
+
+  <div
+    class="border-surface-50/70 text-shadow-sm text-shadow-black/60 relative z-10 w-full max-w-md border px-6 py-12 sm:px-14 sm:py-16"
+  >
+    <h1 class="text-surface-50 font-serif text-4xl">The Venue</h1>
 
     <div class="mt-6 flex flex-col gap-1">
-      <p class="text-2xl">{wedding.venueName}</p>
-      <p class="text-surface-600-400 text-2xl">{wedding.venueAddress}</p>
+      <p class="text-surface-100 text-2xl">{wedding.venueName}</p>
+      <p class="text-surface-200 text-2xl">{wedding.venueAddress}</p>
     </div>
 
     <a
@@ -28,17 +35,17 @@
       Get directions
     </a>
 
-    <div class="border-surface-300 dark:border-surface-700 mt-10 border-t pt-6">
-      <h2 class="font-serif text-3xl">Parking</h2>
-      <p class="text-surface-600-400 mt-2 text-2xl">
+    <div class="border-surface-50/30 mt-10 border-t pt-6">
+      <h2 class="text-surface-50 font-serif text-3xl">Parking</h2>
+      <p class="text-surface-100 mt-2 text-2xl">
         Secure parking is available on-site at the venue.
       </p>
     </div>
 
-    <div class="border-surface-300 dark:border-surface-700 mt-10 border-t pt-6">
-      <h2 class="font-serif text-3xl">Accommodation</h2>
-      <p class="mt-2 text-2xl">Plaaskombuis Meyerton</p>
-      <div class="text-surface-600-400 mt-1 flex flex-col text-2xl">
+    <div class="border-surface-50/30 mt-10 border-t pt-6">
+      <h2 class="text-surface-50 font-serif text-3xl">Accommodation</h2>
+      <p class="text-surface-100 mt-2 text-2xl">Plaaskombuis Meyerton</p>
+      <div class="text-surface-200 mt-1 flex flex-col text-2xl">
         <a href="tel:0163644144" class="hover:text-secondary-400">016 364 4144</a>
         <a href="mailto:marisel@plaaskombuis.co.za" class="hover:text-secondary-400"
           >marisel@plaaskombuis.co.za</a