Small update to the Matcher project

.tool-versions

@@ -0,0 +1 @@
+nodejs 18.0.0

src/pages/projects/matcher/index.md

@@ -36,21 +36,17 @@ But first, we needed a brand.
 
 ![Matcher Logo](images/logos@2x.png)
 
-<article role="article">
-
-Quite frankly, this was one of the rare cases where the brand pretty much designed itself. For the logo, A2 Type's outstanding [Regular](https://www.a2-type.co.uk/regular) pulls most of the weight, only being complemented by a few scribbles that mimic coaching instructions. These follow a bit of a pattern but can be used in a number of different ways, keeping the logo recognizable but never boring.
-
-As for the colour scheme, it's ripped right off of the courts we used to play in. Perhaps unsurprisingly, I've come to realize these look more or less the same anywhere in the world, almost always using a combination of 2 out of 4 possible colours. By adding them all together, we had a brand palette.
-
-</article>
-
 ![Colour scheme inspiration](images/colours@2x.png)
 
 ![Kit Combinations](images/kits@2x.png)
 
 <article role="article">
 
-With the brand settled, it was time to move on to the UI. One of the biggest temptations, when you're designing an app like this, is to focus on the desktop experience first and then try to gracefully degrade it so it fits on smaller screens. I went with the opposite approach: started out by designing everything mobile‑first, and then tried to scale it up so it looks good everywhere. In all fairness, the app still ended up looking better on phones than it does on desktop, but I'm happy to report that it's just as usable on every device—and all versions share the exact same set of features.
+Quite frankly, this was one of the rare cases where the brand pretty much designed itself. For the logo, A2 Type's outstanding [Regular](https://www.a2-type.co.uk/regular) pulls most of the weight, only being complemented by a few scribbles that mimic coaching instructions. These follow a bit of a pattern but can be used in a number of different ways, keeping the logo recognizable but never boring.
+
+As for the colour scheme, it's ripped right off of the courts we used to play in. Perhaps unsurprisingly, I've come to realize these look more or less the same anywhere in the world, almost always using a combination of 2 out of 4 possible colours. By adding them all together, we had a brand palette.
+
+With the brand settled, it was time to move on to the UI. I fully committed to a mobile‑first approach, designing the interface to feel as close to a native app as possible and then slowly scaling everything up so it looked good on larger screens as well. In all fairness, the app still ended up looking better on phones than it does on desktop, but I'm happy to report that it's just as usable on every device—and all versions share the exact same set of features.
 
 </article>
 

src/templates/projectTemplate.js

@@ -48,29 +48,20 @@ const ProjectContent = styled.section`
  line-height: 1.6;
  margin: 0 auto 1em auto;
  max-width: 44ch;
- letter-spacing: -0.01em;
+ letter-spacing: -0.018em;
  hyphens: none;
  }
 
  blockquote {
- text-align: center;
-
  p {
  font-style: italic;
  font-feature-settings: 'dlig', 'liga', 'calt';
- font-size: ${rem(22)};
+ font-size: ${rem(20)};
  letter-spacing: -0.03em;
 
  line-height: 1.4;
- margin: 1.4em auto;
+ margin: 1em 0;
  max-width: 35ch;
-
- strong {
- font-weight: bold;
- }
- em {
- font-weight: normal;
- }
  }
  }
 
@@ -101,7 +92,7 @@ const ProjectContent = styled.section`
  margin-bottom: ${rem(28)};
  }
  article blockquote p {
- font-size: ${rem(28)};
+ font-size: ${rem(22)};
  }
  }
  @media ${(props) => props.theme.mediumUp} {
@@ -112,7 +103,7 @@ const ProjectContent = styled.section`
  font-size: ${rem(20)};
  }
  article blockquote p {
- font-size: ${rem(26)};
+ font-size: ${rem(24)};
  }
  }
  @media ${(props) => props.theme.largeUp} {
@@ -127,7 +118,7 @@ const ProjectContent = styled.section`
  font-size: ${rem(22)};
  }
  article blockquote p {
- font-size: ${rem(30)};
+ font-size: ${rem(28)};
  }
  }
  @media ${(props) => props.theme.xxlargeUp} {
@@ -142,7 +133,7 @@ const ProjectContent = styled.section`
  font-size: ${rem(26)};
  }
  article blockquote p {
- font-size: ${rem(36)};
+ font-size: ${rem(32)};
  }
  }
 `