diff --git a/ui/src/lib/components/Countdown.svelte b/ui/src/lib/components/Countdown.svelte
index 206d305..476bdca 100644
--- a/ui/src/lib/components/Countdown.svelte
+++ b/ui/src/lib/components/Countdown.svelte
@@ -1,54 +1,72 @@
 <script lang="ts">
-	interface Props {
-		target: Date;
-		compact?: boolean;
-		pastMessage?: string;
-	}
+  interface Props {
+    target: Date;
+    compact?: boolean;
+    pastMessage?: string;
+  }
 
-	let { target, compact = false, pastMessage = 'The big day is here!' }: Props = $props();
+  let {
+    target,
+    compact = false,
+    pastMessage = "The big day is here!",
+  }: Props = $props();
 
-	let now = $state(Date.now());
+  let now = $state(Date.now());
 
-	$effect(() => {
-		const id = setInterval(() => (now = Date.now()), 1000);
-		return () => clearInterval(id);
-	});
+  $effect(() => {
+    const id = setInterval(() => (now = Date.now()), 1000);
+    return () => clearInterval(id);
+  });
 
-	const diffMs = $derived(Math.max(0, target.getTime() - now));
-	const isPast = $derived(diffMs <= 0);
+  const diffMs = $derived(Math.max(0, target.getTime() - now));
+  const isPast = $derived(diffMs <= 0);
 
-	const days = $derived(Math.floor(diffMs / 86_400_000));
-	const hours = $derived(Math.floor((diffMs % 86_400_000) / 3_600_000));
-	const minutes = $derived(Math.floor((diffMs % 3_600_000) / 60_000));
-	const seconds = $derived(Math.floor((diffMs % 60_000) / 1000));
+  const days = $derived(Math.floor(diffMs / 86_400_000));
+  const hours = $derived(Math.floor((diffMs % 86_400_000) / 3_600_000));
+  const minutes = $derived(Math.floor((diffMs % 3_600_000) / 60_000));
+  const seconds = $derived(Math.floor((diffMs % 60_000) / 1000));
 
-	const units = $derived([
-		{ label: 'days', value: days },
-		{ label: 'hours', value: hours },
-		{ label: 'minutes', value: minutes },
-		{ label: 'seconds', value: seconds }
-	]);
+  const units = $derived([
+    { label: "days", value: days },
+    { label: "hours", value: hours },
+    { label: "minutes", value: minutes },
+    { label: "seconds", value: seconds },
+  ]);
 </script>
 
 {#if isPast}
-	<p class={compact ? 'text-lg font-medium sm:text-xl' : 'text-surface-50 text-xl font-medium'}>{pastMessage}</p>
+  <p
+    class={compact
+      ? "text-lg font-medium sm:text-xl  sm:text-md"
+      : "text-surface-50 text-2xl  sm:text-md font-medium"}
+  >
+    {pastMessage}
+  </p>
 {:else if compact}
-	<div class="flex items-baseline gap-2 text-lg sm:text-xl" role="timer" aria-live="polite">
-		{#each units as unit, i (unit.label)}
-			{#if i > 0}<span class="text-secondary-300/60">·</span>{/if}
-			<span class="font-semibold tabular-nums">{unit.value}</span>
-			<span class="text-secondary-100/80 text-base">{unit.label}</span>
-		{/each}
-	</div>
+  <div class="flex items-baseline gap-2 z-10" role="timer" aria-live="polite">
+    {#each units as unit, i (unit.label)}
+      {#if i > 0}<span class="text-secondary-300/60">·</span>{/if}
+      <span class="font-semibold tabular-nums text-md md:text-3xl"
+        >{unit.value}</span
+      >
+      <span class="text-secondary-100/80 text-md md:text-3xl">{unit.label}</span
+      >
+    {/each}
+  </div>
 {:else}
-	<div class="flex gap-4 sm:gap-8" role="timer" aria-live="polite">
-		{#each units as unit (unit.label)}
-			<div class="flex flex-col items-center">
-				<span class="text-secondary-400 text-4xl font-bold tabular-nums sm:text-6xl">
-					{String(unit.value).padStart(2, '0')}
-				</span>
-				<span class="text-surface-200 text-base tracking-wide uppercase sm:text-lg">{unit.label}</span>
-			</div>
-		{/each}
-	</div>
+  <div class="flex gap-4 sm:gap-8" role="timer" aria-live="polite">
+    {#each units as unit (unit.label)}
+      <div class="flex flex-col items-center">
+        <span
+          class="text-secondary-400 text-4xl font-bold tabular-nums sm:text-6xl"
+        >
+          {String(unit.value).padStart(2, "0")}
+        </span>
+        <span
+          class="text-surface-200 text-base tracking-wide uppercase sm:text-lg"
+          >{unit.label}</span
+        >
+      </div>
+    {/each}
+  </div>
 {/if}
diff --git a/ui/src/lib/components/PhotoBackground.svelte b/ui/src/lib/components/PhotoBackground.svelte
index 0303c95..660e5a8 100644
--- a/ui/src/lib/components/PhotoBackground.svelte
+++ b/ui/src/lib/components/PhotoBackground.svelte
@@ -1,87 +1,99 @@
 <script lang="ts">
-	import { backOut, cubicIn } from 'svelte/easing';
-	import { browser } from '$app/environment';
+  import { backOut, cubicIn } from "svelte/easing";
+  import { browser } from "$app/environment";
 
-	const modules = import.meta.glob('../../../assets/photos/*.{jpg,jpeg,png,JPG,JPEG,PNG}', {
-		eager: true,
-		import: 'default',
-		query: '?url'
-	}) as Record<string, string>;
+  const modules = import.meta.glob(
+    "../../../assets/photos/*.{jpg,jpeg,png,JPG,JPEG,PNG}",
+    {
+      eager: true,
+      import: "default",
+      query: "?url",
+    },
+  ) as Record<string, string>;
 
-	function shuffle<T>(items: T[]): T[] {
-		const result = [...items];
-		for (let i = result.length - 1; i > 0; i--) {
-			const j = Math.floor(Math.random() * (i + 1));
-			[result[i], result[j]] = [result[j], result[i]];
-		}
-		return result;
-	}
+  function shuffle<T>(items: T[]): T[] {
+    const result = [...items];
+    for (let i = result.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [result[i], result[j]] = [result[j], result[i]];
+    }
+    return result;
+  }
 
-	// Randomized client-side only: shuffling during SSR/prerender would bake one
-	// order into the static HTML while the client picks another, causing a
-	// hydration mismatch on the <img src>.
-	let photos = $state<string[]>([]);
-	const intervalMs = 6000;
+  // Randomized client-side only: shuffling during SSR/prerender would bake one
+  // order into the static HTML while the client picks another, causing a
+  // hydration mismatch on the <img src>.
+  let photos = $state<string[]>([]);
+  const intervalMs = 6000;
 
-	let index = $state(0);
-	let reducedMotion = $state(false);
+  let index = $state(0);
+  let reducedMotion = $state(false);
 
-	// Each photo flies in/out from a random angle with its own spin and pop, so
-	// no two transitions look alike.
-	function funky(node: HTMLElement, { duration, variant }: { duration: number; variant: 'in' | 'out' }) {
-		if (reducedMotion) {
-			return { duration: 400, css: (t: number) => `opacity: ${t}` };
-		}
-		const angle = Math.random() * Math.PI * 2;
-		const dist = 55 + Math.random() * 55;
-		const rot = Math.random() * 80 - 40;
-		const scaleFrom = 0.5 + Math.random() * 0.3;
-		const x = Math.cos(angle) * dist;
-		const y = Math.sin(angle) * dist;
-		return {
-			duration: duration + Math.random() * 300,
-			easing: variant === 'in' ? backOut : cubicIn,
-			css: (t: number, u: number) => `
+  // Each photo flies in/out from a random angle with its own spin and pop, so
+  // no two transitions look alike.
+  function funky(
+    node: HTMLElement,
+    { duration, variant }: { duration: number; variant: "in" | "out" },
+  ) {
+    if (reducedMotion) {
+      return { duration: 400, css: (t: number) => `opacity: ${t}` };
+    }
+    const angle = Math.random() * Math.PI * 2;
+    const dist = 55 + Math.random() * 55;
+    const rot = Math.random() * 80 - 40;
+    const scaleFrom = 0.5 + Math.random() * 0.3;
+    const x = Math.cos(angle) * dist;
+    const y = Math.sin(angle) * dist;
+    return {
+      duration: duration + Math.random() * 300,
+      easing: variant === "in" ? backOut : cubicIn,
+      css: (t: number, u: number) => `
 				transform: translate(${u * x}%, ${u * y}%) rotate(${u * rot}deg) scale(${1 - u * (1 - scaleFrom)});
 				opacity: ${t};
-			`
-		};
-	}
+			`,
+    };
+  }
 
-	$effect(() => {
-		if (!browser) return;
-		photos = shuffle(Object.values(modules));
-	});
+  $effect(() => {
+    if (!browser) return;
+    photos = shuffle(Object.values(modules));
+  });
 
-	$effect(() => {
-		if (!browser) return;
-		const query = window.matchMedia('(prefers-reduced-motion: reduce)');
-		reducedMotion = query.matches;
-		const onChange = (event: MediaQueryListEvent) => (reducedMotion = event.matches);
-		query.addEventListener('change', onChange);
-		return () => query.removeEventListener('change', onChange);
-	});
+  $effect(() => {
+    if (!browser) return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    reducedMotion = query.matches;
+    const onChange = (event: MediaQueryListEvent) =>
+      (reducedMotion = event.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  });
 
-	$effect(() => {
-		if (photos.length < 2) return;
-		const id = setInterval(() => {
-			index = (index + 1) % photos.length;
-		}, intervalMs);
-		return () => clearInterval(id);
-	});
+  $effect(() => {
+    if (photos.length < 2) return;
+    const id = setInterval(() => {
+      index = (index + 1) % photos.length;
+    }, intervalMs);
+    return () => clearInterval(id);
+  });
 </script>
 
 {#if photos.length > 0}
-	<div class="pointer-events-none bg-surface-950 absolute inset-0 overflow-hidden" aria-hidden="true">
-		{#key index}
-			<img
-				src={photos[index]}
-				alt=""
-				class="absolute inset-0 h-full w-full object-contain"
-				in:funky={{ duration: 900, variant: 'in' }}
-				out:funky={{ duration: 700, variant: 'out' }}
-			/>
-		{/key}
-		<div class="absolute inset-0 bg-surface-950/65 dark:bg-surface-950/75"></div>
-	</div>
+  <div
+    class="pointer-events-none absolute inset-0 overflow-hidden"
+    aria-hidden="true"
+  >
+    {#key index}
+      <img
+        src={photos[index]}
+        alt=""
+        class="absolute inset-0 h-full w-full object-cover md:object-contain"
+        in:funky={{ duration: 900, variant: "in" }}
+        out:funky={{ duration: 700, variant: "out" }}
+      />
+    {/key}
+    <div
+      class="absolute inset-0 bg-surface-950/65 dark:bg-surface-950/75"
+    ></div>
+  </div>
 {/if}
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index aa63bee..4a72546 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -1,45 +1,93 @@
 <script lang="ts">
-	import '../app.css';
-	import favicon from '$lib/assets/favicon.svg';
-	import { page } from '$app/state';
-	import Countdown from '$lib/components/Countdown.svelte';
-	import { createWeddingInfo } from '$lib/wedding-info.svelte';
+  import "../app.css";
+  import favicon from "$lib/assets/favicon.svg";
+  import { page } from "$app/state";
+  import Countdown from "$lib/components/Countdown.svelte";
+  import { createWeddingInfo } from "$lib/wedding-info.svelte";
 
-	let { children } = $props();
+  let { children } = $props();
 
-	const wedding = createWeddingInfo();
+  const wedding = createWeddingInfo();
 
-	const links = [
-		{ href: '/', label: 'Home' },
-		{ href: '/rsvp', label: 'RSVP' },
-		{ href: '/photos', label: 'Photos' }
-	];
+  const links = [
+    { href: "/", label: "Home" },
+    { href: "/rsvp", label: "RSVP" },
+    { href: "/photos", label: "Photos" },
+  ];
+
+  let menuOpen = $state(false);
+
+  $effect(() => {
+    page.url.pathname;
+    menuOpen = false;
+  });
 </script>
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
 
-<div class="bg-surface-50 dark:bg-surface-950 flex min-h-screen flex-col">
-	<div class="sticky top-0 z-20 flex flex-col">
-		<nav class="bg-primary-950 flex items-center justify-between px-4 py-3 sm:px-8">
-			<a href="/" class="text-surface-50 font-malibu text-xl tracking-wide">Zoé &amp; Shaldon</a>
-			<div class="flex gap-2">
-				{#each links as link (link.href)}
-					<a
-						href={link.href}
-						class="btn field-sm {page.url.pathname === link.href
-							? 'preset-filled-secondary-500'
-							: 'text-surface-100 hover:text-secondary-400'}"
-					>
-						{link.label}
-					</a>
-				{/each}
-			</div>
-		</nav>
-		<div class="text-surface-50 flex justify-center px-4 py-3 drop-shadow-[0_2px_6px_rgba(0,0,0,0.6)]">
-			<Countdown target={wedding.date} compact pastMessage="Already married! 🎉" />
-		</div>
-	</div>
-	<main class="flex flex-1 flex-col">
-		{@render children()}
-	</main>
+<div
+	class="bg-surface-50 dark:bg-surface-950 flex min-h-screen flex-col bg-[url('/patterns/damask.svg')] bg-repeat [background-size:160px_160px]"
+>
+  <div class="sticky top-0 z-20 flex flex-col">
+    <nav
+      class="bg-primary-950 flex items-center justify-between px-4 py-3 sm:px-8"
+    >
+      <a
+        href="/"
+        class="text-surface-50 font-malibu hidden text-3xl tracking-wide sm:inline"
+        >Zoé &amp; Shaldon</a
+      >
+      <Countdown
+        target={wedding.date}
+        compact
+        pastMessage="Already married! 🎉"
+      />
+      <div class="hidden gap-2 sm:flex">
+        {#each links as link (link.href)}
+          <a
+            href={link.href}
+            class="btn field-sm {page.url.pathname === link.href
+              ? 'preset-filled-secondary-500'
+              : 'text-surface-100 hover:text-secondary-400'}"
+          >
+            {link.label}
+          </a>
+        {/each}
+      </div>
+      <button
+        type="button"
+        class="text-surface-50 flex items-center justify-center p-2 sm:hidden"
+        aria-label="Menu"
+        aria-expanded={menuOpen}
+        onclick={() => (menuOpen = !menuOpen)}
+      >
+        {#if menuOpen}
+          <svg viewBox="0 0 24 24" class="size-6" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" d="M6 6l12 12M18 6L6 18" />
+          </svg>
+        {:else}
+          <svg viewBox="0 0 24 24" class="size-6" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" d="M4 7h16M4 12h16M4 17h16" />
+          </svg>
+        {/if}
+      </button>
+    </nav>
+    {#if menuOpen}
+      <div class="bg-primary-950 border-primary-800 flex flex-col gap-1 border-t px-4 py-3 sm:hidden">
+        {#each links as link (link.href)}
+          <a
+            href={link.href}
+            class="btn field-sm w-full {page.url.pathname === link.href
+              ? 'preset-filled-secondary-500'
+              : 'text-surface-100 hover:text-secondary-400'}"
+          >
+            {link.label}
+          </a>
+        {/each}
+      </div>
+    {/if}
+  </div>
+  <main class="flex flex-1 flex-col">
+    {@render children()}
+  </main>
 </div>
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
index 4db0d42..6ec9590 100644
--- a/ui/src/routes/+page.svelte
+++ b/ui/src/routes/+page.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <section
-  class="relative flex flex-1 items-center justify-center overflow-hidden px-4 py-16 text-center"
+  class="relative flex flex-1 items-center justify-center overflow-hidden px-4 py-16 text-center z-10"
 >
   <PhotoBackground />
 
diff --git a/ui/src/routes/photos/+page.svelte b/ui/src/routes/photos/+page.svelte
index 1fa49a4..446b55c 100644
--- a/ui/src/routes/photos/+page.svelte
+++ b/ui/src/routes/photos/+page.svelte
@@ -65,7 +65,7 @@
 	{#if !isOpen}
 		<div class="flex flex-col items-center gap-6 text-center">
 			<h1 class="font-serif text-4xl">Photo uploads open on the wedding day</h1>
-			<p class="text-surface-600-400 text-lg">Come back on {formatFullDate(wedding.date)} to share your photos with Zoé &amp; Shaldon.</p>
+			<p class="text-surface-600-400 text-2xl">Come back on {formatFullDate(wedding.date)} to share your photos with Zoé &amp; Shaldon.</p>
 		</div>
 	{:else if status === 'done'}
 		<div class="preset-filled-primary-500 rounded-base max-w-md p-4 text-center">
@@ -74,36 +74,36 @@
 	{:else}
 		<div class="w-full max-w-md">
 			<h1 class="font-serif text-4xl">Share your photos</h1>
-			<p class="text-surface-600-400 mt-2 mb-8 text-lg">
+			<p class="text-surface-600-400 mt-2 mb-8 text-2xl">
 				Upload photos from the day — up to {MAX_FILES} at a time, {MAX_SIZE_MB}MB each.
 			</p>
 
 			<form class="flex flex-col gap-4" onsubmit={onSubmit}>
 				<label class="label">
-					<span class="label-text">Name *</span>
-					<input class="input border border-surface-300 focus:border-primary-500 dark:border-surface-700" type="text" required bind:value={name} disabled={status === 'submitting'} />
+					<span class="label-text text-2xl">Name *</span>
+					<input class="input border border-surface-300 focus:border-primary-500 dark:border-surface-700 text-2xl" type="text" required bind:value={name} disabled={status === 'submitting'} />
 				</label>
 
 				<label class="label">
-					<span class="label-text">Message to the couple (optional)</span>
-					<textarea class="textarea border border-surface-300 focus:border-primary-500 dark:border-surface-700" rows="3" bind:value={message} disabled={status === 'submitting'}
+					<span class="label-text text-2xl">Message to the couple (optional)</span>
+					<textarea class="textarea border border-surface-300 focus:border-primary-500 dark:border-surface-700 text-2xl" rows="3" bind:value={message} disabled={status === 'submitting'}
 					></textarea>
 				</label>
 
 				<label class="label">
-					<span class="label-text">Email (optional)</span>
-					<input class="input border border-surface-300 focus:border-primary-500 dark:border-surface-700" type="email" bind:value={email} disabled={status === 'submitting'} />
+					<span class="label-text text-2xl">Email (optional)</span>
+					<input class="input border border-surface-300 focus:border-primary-500 dark:border-surface-700 text-2xl" type="email" bind:value={email} disabled={status === 'submitting'} />
 				</label>
 
 				<label class="label">
-					<span class="label-text">Phone (optional)</span>
-					<input class="input border border-surface-300 focus:border-primary-500 dark:border-surface-700" type="tel" bind:value={phone} disabled={status === 'submitting'} />
+					<span class="label-text text-2xl">Phone (optional)</span>
+					<input class="input border border-surface-300 focus:border-primary-500 dark:border-surface-700 text-2xl" type="tel" bind:value={phone} disabled={status === 'submitting'} />
 				</label>
 
 				<label class="label">
-					<span class="label-text">Photos *</span>
+					<span class="label-text text-2xl">Photos *</span>
 					<input
-						class="input border border-surface-300 focus:border-primary-500 dark:border-surface-700"
+						class="input border border-surface-300 focus:border-primary-500 dark:border-surface-700 text-2xl"
 						type="file"
 						accept="image/*"
 						multiple
@@ -114,10 +114,10 @@
 				</label>
 
 				{#if status === 'error'}
-					<p class="text-error-500 text-base">{errorMessage}</p>
+					<p class="text-error-500 text-2xl">{errorMessage}</p>
 				{/if}
 
-				<button class="btn preset-filled-secondary-500 mt-2" type="submit" disabled={status === 'submitting'}>
+				<button class="btn preset-filled-secondary-500 mt-2 text-2xl" type="submit" disabled={status === 'submitting'}>
 					{status === 'submitting' ? 'Uploading…' : 'Upload photos'}
 				</button>
 			</form>
diff --git a/ui/src/routes/qr/+page.svelte b/ui/src/routes/qr/+page.svelte
index 852ba53..8caeaa8 100644
--- a/ui/src/routes/qr/+page.svelte
+++ b/ui/src/routes/qr/+page.svelte
@@ -7,7 +7,7 @@
 
 <section class="flex flex-1 items-center justify-center px-4 py-16">
 	<div class="border-surface-300 dark:border-surface-700 flex flex-col items-center gap-4 border px-6 py-10 text-center">
-		<p class="text-primary-600-400 text-base tracking-[0.25em] uppercase">Scan to visit</p>
+		<p class="text-primary-600-400 text-2xl tracking-[0.25em] uppercase">Scan to visit</p>
 		<h1 class="font-malibu text-4xl">Zoé &amp; Shaldon</h1>
 
 		<QrCode value={wedding.siteUrl} class="flex flex-col items-center gap-4">
@@ -15,7 +15,7 @@
 				<QrCode.Pattern />
 			</QrCode.Frame>
 
-			<p class="text-surface-700 dark:text-surface-300 text-base break-all">{wedding.siteUrl}</p>
+			<p class="text-surface-700 dark:text-surface-300 text-2xl break-all">{wedding.siteUrl}</p>
 
 			<QrCode.DownloadTrigger mimeType="image/png" fileName="zoe-and-shaldon-qr.png">
 				Download PNG
diff --git a/ui/src/routes/rsvp/+page.svelte b/ui/src/routes/rsvp/+page.svelte
index 7fd828c..bf092c3 100644
--- a/ui/src/routes/rsvp/+page.svelte
+++ b/ui/src/routes/rsvp/+page.svelte
@@ -60,7 +60,7 @@
 </script>
 
 <section
-  class="relative flex flex-1 items-center justify-center overflow-hidden px-4 py-16"
+  class="relative flex flex-1 items-center justify-center overflow-hidden px-4 py-16 z-10"
 >
   <PhotoBackground />
 
@@ -159,7 +159,7 @@
         </div>
 
         <label class="label">
-          <span class="label-text text-surface-100"
+          <span class="label-text text-surface-100 text-2xl"
             >Message to the couple (optional)</span
           >
           <textarea
diff --git a/ui/static/patterns/damask.svg b/ui/static/patterns/damask.svg
new file mode 100644
index 0000000..7643a35
--- /dev/null
+++ b/ui/static/patterns/damask.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
+	<g fill="none" stroke="#D9A441" stroke-width="1" stroke-opacity="0.35">
+		<path d="M80,0 L160,80 L80,160 L0,80 Z" />
+	</g>
+	<g fill="#D9A441">
+		<circle cx="80" cy="80" r="3" fill-opacity="0.28" />
+		<circle cx="80" cy="71" r="7" fill-opacity="0.14" />
+		<circle cx="80" cy="89" r="7" fill-opacity="0.14" />
+		<circle cx="71" cy="80" r="7" fill-opacity="0.14" />
+		<circle cx="89" cy="80" r="7" fill-opacity="0.14" />
+		<circle cx="80" cy="0" r="2" fill-opacity="0.3" />
+		<circle cx="160" cy="80" r="2" fill-opacity="0.3" />
+		<circle cx="80" cy="160" r="2" fill-opacity="0.3" />
+		<circle cx="0" cy="80" r="2" fill-opacity="0.3" />
+	</g>
+</svg>