Fleet: alternating full-width cards for wider boat photos

Replace the 2-column portrait card grid with alternating full-width cards
(image edge-to-edge on one half, specs padded on the other, sides flip per
boat) so landscape boat photos get their width.

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

website/src/routes/+page.svelte

@@ -307,17 +307,17 @@
 			<h2 class="font-heading text-3xl font-bold uppercase tracking-wide text-white sm:text-4xl lg:text-5xl">The Fleet</h2>
 		</div>
 
-		<div class="grid gap-6 md:grid-cols-2 lg:gap-10">
-			{#each fleet as boat}
-				<div class="reveal overflow-hidden rounded-xl border border-white/5 bg-deep/80 transition-all hover:border-cyan-500/30">
-					<div class="aspect-[3/4] overflow-hidden sm:aspect-[4/5]">
-						<img src={boat.image} alt={boat.name} class="h-full w-full object-cover transition-transform duration-500 hover:scale-105" loading="lazy" />
+		<div class="space-y-8 lg:space-y-12">
+			{#each fleet as boat, i}
+				<div class="reveal group grid overflow-hidden rounded-xl border border-white/5 bg-deep/80 transition-all hover:border-cyan-500/30 md:grid-cols-2">
+					<div class="overflow-hidden {i % 2 === 1 ? 'md:order-2' : ''}">
+						<img src={boat.image} alt={boat.name} class="aspect-[4/3] h-full w-full object-cover transition-transform duration-700 group-hover:scale-105 sm:aspect-[3/2] md:aspect-auto" loading="lazy" />
 					</div>
-					<div class="p-5 sm:p-8">
-						<h3 class="font-heading text-2xl font-bold uppercase text-white sm:text-3xl">{boat.name}</h3>
+					<div class="flex flex-col justify-center p-6 sm:p-8 lg:p-10 {i % 2 === 1 ? 'md:order-1' : ''}">
+						<h3 class="font-heading text-3xl font-bold uppercase text-white sm:text-4xl">{boat.name}</h3>
 						<p class="mt-1 text-sm font-medium text-cyan-400">{boat.brand} · {boat.year}</p>
-						<p class="mt-3 text-sm leading-relaxed text-slate-300">{boat.desc}</p>
-						<div class="mt-4 flex flex-wrap gap-2 text-xs">
+						<p class="mt-4 text-base leading-relaxed text-slate-300">{boat.desc}</p>
+						<div class="mt-5 flex flex-wrap gap-2 text-xs">
 							<span class="rounded-full border border-cyan-500/20 bg-cyan-500/10 px-3 py-1 text-cyan-300">{boat.engine}</span>
 							<span class="rounded-full border border-cyan-500/20 bg-cyan-500/10 px-3 py-1 text-cyan-300">{boat.capacity}</span>
 						</div>