spotters: fix random 404 on client navigation (random is a page load, not an endpoint shadowed by [slug]); square logo tiles everywhere

src/lib/cars/BrandBadge.svelte

@@ -22,11 +22,14 @@
 {/if}
 
 <style>
+	/* Every logo sits in a fixed square tile (object-fit: contain, centred, padded, neutral
+	   background), so wide wordmarks and tall crests line up in grids and lists. */
 	.badge,
 	.tile {
 		display: inline-grid;
 		place-items: center;
 		flex-shrink: 0;
+		aspect-ratio: 1;
 	}
 	.badge {
 		border-radius: 999px;
@@ -43,26 +46,31 @@
 			0 2px 8px hsl(var(--hue) 60% 20% / 0.4);
 	}
 	.tile {
+		overflow: hidden;
 		border-radius: 0.55rem;
-		background: #fff;
-		padding: 0.2rem;
+		background: #f6f6f4;
+		padding: 12%;
 		box-shadow:
 			0 0 0 1px rgb(0 0 0 / 0.08),
 			0 2px 8px rgb(0 0 0 / 0.35);
 	}
 	.tile img {
+		display: block;
 		width: 100%;
 		height: 100%;
+		min-width: 0;
+		min-height: 0;
 		object-fit: contain;
+		object-position: center;
 	}
 	.sm {
-		width: 1.9rem;
-		height: 1.9rem;
+		width: 2.1rem;
+		height: 2.1rem;
 		font-size: 0.7rem;
 	}
 	.tile.sm {
-		width: 2.6rem;
-		padding: 0.18rem 0.25rem;
+		padding: 0.2rem;
+		border-radius: 0.45rem;
 	}
 	.md {
 		width: 2.6rem;
@@ -76,19 +84,18 @@
 	}
 	.tile.lg {
 		border-radius: 1rem;
-		padding: 0.5rem;
 	}
+	/* xl fills the parent's height and stays square inside it. */
 	.xl {
-		width: 100%;
 		height: 100%;
+		max-width: 100%;
 		font-size: 1.6rem;
 	}
 	.badge.xl {
-		width: 3.6rem;
 		height: 3.6rem;
+		width: 3.6rem;
 	}
 	.tile.xl {
-		border-radius: 0.6rem;
-		padding: 0.6rem 0.8rem;
+		border-radius: 0.7rem;
 	}
 </style>

src/lib/cars/BrandTile.svelte

@@ -44,10 +44,10 @@
 		display: grid;
 		place-items: center;
 		width: 100%;
-		aspect-ratio: 16 / 9;
+		aspect-ratio: 4 / 3;
 	}
 	.compact .mark {
-		aspect-ratio: 2 / 1;
+		aspect-ratio: 3 / 2;
 	}
 	.name {
 		max-width: 100%;

src/lib/planes/MakerTile.svelte

@@ -44,10 +44,10 @@
 		display: grid;
 		place-items: center;
 		width: 100%;
-		aspect-ratio: 16 / 9;
+		aspect-ratio: 4 / 3;
 	}
 	.compact .mark {
-		aspect-ratio: 2 / 1;
+		aspect-ratio: 3 / 2;
 	}
 	.name {
 		max-width: 100%;

src/lib/trains/MakerTile.svelte

@@ -48,10 +48,10 @@
 		display: grid;
 		place-items: center;
 		width: 100%;
-		aspect-ratio: 16 / 9;
+		aspect-ratio: 4 / 3;
 	}
 	.compact .mark {
-		aspect-ratio: 2 / 1;
+		aspect-ratio: 3 / 2;
 	}
 	.name {
 		max-width: 100%;