Make the site responsive for phones, tablets, and desktop

Mobile-first layout with breakpoints at 48rem (tablet) and 64rem (desktop):
stacked nav on phones, progressive column counts for the article grid and
footer, scrollable markdown tables, larger tap targets on nav links.

frontend/app/layouts/default.vue

@@ -102,11 +102,17 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
 
 /* Header: centred wordmark over a thin rule of links. */
 .site-header {
-  padding-top: 2.5rem;
+  padding-top: 1.5rem;
   text-align: center;
   border-bottom: 1px solid var(--color-border);
 }
 
+@media (min-width: 48rem) {
+  .site-header {
+    padding-top: 2.5rem;
+  }
+}
+
 .wordmark {
   margin: 0;
 }
@@ -127,23 +133,24 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
 }
 
 .site-nav {
-  margin-top: 2rem;
+  margin-top: 1.25rem;
   border-top: 1px solid var(--color-border);
 }
 
+/* Phones stack the links above the language picker, both centred; from tablet
+   up they sit on one line with the picker pushed to the right. */
 .nav-inner {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem 2rem;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  padding-block: 0.9rem;
+  gap: 0.5rem;
+  padding-block: 0.6rem;
 }
 
 .site-nav ul {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.25rem 2rem;
+  gap: 0 1.25rem;
   justify-content: center;
   padding: 0;
   margin: 0;
@@ -154,10 +161,30 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
   text-transform: uppercase;
 }
 
+@media (min-width: 48rem) {
+  .site-nav {
+    margin-top: 2rem;
+  }
+
+  .nav-inner {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0.75rem 2rem;
+    padding-block: 0.9rem;
+  }
+
+  .site-nav ul {
+    gap: 0.25rem 2rem;
+  }
+}
+
 .site-nav a {
+  display: inline-block;
   text-decoration: none;
   color: var(--color-body);
-  padding-block: 0.25rem;
+  /* Roomy enough to tap accurately on a phone. */
+  padding-block: 0.6rem;
   border-bottom: 1px solid transparent;
 }
 
@@ -169,7 +196,13 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
 
 .site-main {
   flex: 1;
-  padding-block: 3.5rem 5rem;
+  padding-block: 2.25rem 3.5rem;
+}
+
+@media (min-width: 48rem) {
+  .site-main {
+    padding-block: 3.5rem 5rem;
+  }
 }
 
 /* Footer: columns, then a centred copyright line. */
@@ -179,13 +212,28 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
   border-top: 1px solid var(--color-border);
 }
 
+/* One column on phones, two on tablets, four on desktop — auto-fit would
+   otherwise leave the fourth block stranded on its own row on a tablet. */
 .footer-inner {
   display: grid;
-  gap: 2.5rem;
-  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  gap: 2rem;
+  grid-template-columns: 1fr;
   padding-bottom: 2.5rem;
 }
 
+@media (min-width: 48rem) {
+  .footer-inner {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2.5rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .footer-inner {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
 .footer-block p:last-of-type {
   margin-bottom: 0;
 }