Fix mobile header overlap and thumbnail crop ratio

The language switch overlapped the centered logo on narrow viewports
(~390px), and article card covers used an overly aggressive 4:5 crop
that sliced through text baked into cover images.

frontend/app/layouts/default.vue

@@ -105,10 +105,22 @@ const strings = computed(() => STRINGS[locale.value])
   position: relative;
 }
 
+/* Stacked and centred above the wordmark on phones — there isn't room
+   beside the centred logo without overlapping it. Pinned to the corner
+   again once the header has space to spare. */
 .lang-switch-header {
-  position: absolute;
-  top: 0;
-  right: var(--space);
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0.75rem;
+}
+
+@media (min-width: 48rem) {
+  .lang-switch-header {
+    position: absolute;
+    top: 0;
+    right: var(--space);
+    margin-bottom: 0;
+  }
 }
 
 .wordmark {