From 7b8f5c98708ecce4c581e665c1e52ac421f4cf2e Mon Sep 17 00:00:00 2001
From: Chris Lowis <chris.lowis@gmail.com>
Date: Mon, 15 Dec 2025 12:15:33 +0000
Subject: [PATCH] Introduce `stack` to add consistent vertical spacing

The default value of `--space` here is 1.4rem, to match the
default paragraph spacing.
---
 assets/css/app.css | 14 ++++++++++++++
 index.html         | 14 +++++++-------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index f3cd5f2..25e3f24 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -172,6 +172,20 @@ section {
   padding: var(--space-sm);
 }
 
+.stack {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.stack > * {
+  margin-block: 0;
+}
+
+.stack > * + * {
+  margin-block-start: var(--space, 1.4rem);
+}
+
 .header {
   display: flex;
   padding: var(--space-lg) var(--space-md);
diff --git a/index.html b/index.html
index 50732a3..2b53762 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@ title: CoTech
 layout: default
 ---
 
-<section>
+<section class="stack">
   <h1>We're building a cooperative digital economy</h1>
 
   <p class="large">CoTech is a UK-wide network of creative technology companies
@@ -13,7 +13,7 @@ layout: default
   <a href="#">Join the network</a>
 </section>
 
-<section>
+<section class="stack">
   <h2>Our services</h2>
 
   <p class="intro">Between our member co-ops, we cover the full digital and creative
@@ -22,7 +22,7 @@ layout: default
   particularly when it comes to democratic ownership and
   decision-making.</p>
 
-  <div class="box">
+  <div class="box stack">
     <h3 class="title">Digital products & platforms</h3>
     <ul>
       <li>Websites & web apps 
(WordPress, Drupal, Webflow, custom)</li>
@@ -36,7 +36,7 @@ layout: default
     </ul>
   </div>
 
-  <div class="box">
+  <div class="box stack">
     <h3 class="title">Design & content</h3>
     <ul>
       <li>User research & testing</li>
@@ -49,7 +49,7 @@ layout: default
     </ul>
   </div>
 
-  <div class="box">
+  <div class="box stack">
     <h3 class="title">Marketing & comms</h3>
     <ul>
       <li>Digital strategy & campaigns</li>
@@ -61,7 +61,7 @@ layout: default
     </ul>
   </div>
 
-  <div class="box">
+  <div class="box stack">
     <h3 class="title">Coop & organisational development</h3>
     <ul>
       <li>Cooperative Development</li>
@@ -72,7 +72,7 @@ layout: default
   </div>
 </section>
 
-<section id="members">
+<section id="members" class="stack">
   <h2>Our members</h2>
   <p class="intro">Meet the coops behind CoTech</p>