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.

CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.1.1] - 2026-09-14
+
+### Fixed
+
+- Language switch no longer overlaps the header logo on narrow viewports (~390px, e.g. iPhone 14
+  Pro): it now stacks centered above the wordmark on phones, and only moves to the header's
+  top-right corner from tablet width up.
+- Article card thumbnails no longer use an overly aggressive portrait crop (`4:5`) that sliced
+  through text baked into cover images — changed to `3:2`, matching the featured cover on the home
+  page and the article detail page.
+
 ## [2.1.0] - 2026-09-11
 
 ### Added

frontend/app/components/ArticleCard.vue

@@ -53,7 +53,7 @@ const href = computed(() => localePath(props.locale, `/blog/${props.article.slug
 
 .cover {
   width: 100%;
-  aspect-ratio: 4 / 5;
+  aspect-ratio: 3 / 2;
   object-fit: cover;
   background: var(--color-surface);
   transition: transform 0.4s ease;

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;
+  display: flex;
-  top: 0;
+  justify-content: center;
-  right: var(--space);
+  margin-bottom: 0.75rem;
+}
+
+@media (min-width: 48rem) {
+  .lang-switch-header {
+    position: absolute;
+    top: 0;
+    right: var(--space);
+    margin-bottom: 0;
+  }
 }
 
 .wordmark {