Tighten spacing and layout on phones

src/components/Contact.astro

@@ -128,4 +128,18 @@ const links = [
       text-align: center;
     }
   }
+
+  /* Phones: one button per row, all the same width. */
+  @media (max-width: 480px) {
+    .links {
+      flex-direction: column;
+      max-width: 320px;
+      margin-inline: auto;
+    }
+
+    .links a {
+      width: 100%;
+      justify-content: center;
+    }
+  }
 </style>

src/components/Figures.astro

@@ -70,4 +70,40 @@ import { figures } from '../data/profile';
       font-size: 34px;
     }
   }
+
+  /* Phones: one figure per row, the number beside its label. */
+  @media (max-width: 560px) {
+    .figures {
+      grid-template-columns: 1fr;
+      gap: 0;
+      padding-block: 24px;
+    }
+
+    .figure,
+    .figure:first-child,
+    .figure:nth-child(3) {
+      flex-direction: row-reverse;
+      justify-content: start;
+      align-items: center;
+      gap: 20px;
+      padding: 16px 0;
+      border-left: 0;
+      border-top: 1px solid var(--border);
+    }
+
+    .figure:first-child {
+      border-top: 0;
+    }
+
+    dd {
+      flex: none;
+      width: 88px;
+      font-size: 32px;
+    }
+
+    dt {
+      margin-top: 0;
+      max-width: none;
+    }
+  }
 </style>

src/components/Hero.astro

@@ -146,4 +146,12 @@ import Download from './icons/Download.astro';
       max-width: 320px;
     }
   }
+
+  /* Phones: the two buttons share the row, or stack at full width. */
+  @media (max-width: 480px) {
+    .actions .btn {
+      flex: 1 1 auto;
+      justify-content: center;
+    }
+  }
 </style>

src/components/Nav.astro

@@ -134,6 +134,20 @@ const links = [
       font-size: 13px;
     }
   }
+
+  /* The smallest phones: the name and the button must still fit side by side. */
+  @media (max-width: 380px) {
+    .logo {
+      font-size: 13px;
+      letter-spacing: 0;
+    }
+
+    .small {
+      padding: 7px 12px;
+      font-size: 12.5px;
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .logo,
     .small,

src/styles/global.css

@@ -257,3 +257,10 @@ h2 {
     font-size: 32px;
   }
 }
+
+/* Phones: a narrower gutter leaves the content room to breathe. */
+@media (max-width: 480px) {
+  .wrap {
+    padding: 0 20px;
+  }
+}