diff --git a/_assets/css/critical.scss b/_assets/css/critical.scss
index b4c790b..e94bcfe 100644
--- a/_assets/css/critical.scss
+++ b/_assets/css/critical.scss
@@ -125,7 +125,7 @@ ul.list-unstyled li {
 
 // limit width of article to optimise reading experience
 @include media-breakpoint-up(md) {
-  article, .index, .category {
+  .reading-optimised {
     width: 550px;
     margin-left: auto;
     margin-right: auto;
diff --git a/_layouts/categories.html b/_layouts/categories.html
index 8b9ef72..0ac84ca 100644
--- a/_layouts/categories.html
+++ b/_layouts/categories.html
@@ -2,29 +2,31 @@
 layout: default
 ---
 
-{{ content }}
-<ul class="post-list list-unstyled">
-    {% assign categories = page.categories | split:',' %}
-    {% assign posts = site.categories[categories.first] %}
-    {% for category in categories %}
-        {% if category != categories.first %}
-            {% assign posts = site.categories[category] | concat: posts %}
-        {% endif %}
-    {% endfor %}
-    {% assign posts = posts | sort: 'date' | reverse %}
-    {% for post in posts %}
-    <li class="mb-4">
-        <p class="small text-muted">
-            <span class="far fa-calendar-alt"></span>
-            <time datetime="{{ post.date | date_to_xmlschema }}">
-                {{ post.date | date: "%b %-d, %Y" }}
-            </time>
-            • {% include reading-time.html content=post.content %}
-        </p>
+<div class="reading-optimised">
+    {{ content }}
+    <ul class="post-list list-unstyled">
+        {% assign categories = page.categories | split:',' %}
+        {% assign posts = site.categories[categories.first] %}
+        {% for category in categories %}
+            {% if category != categories.first %}
+                {% assign posts = site.categories[category] | concat: posts %}
+            {% endif %}
+        {% endfor %}
+        {% assign posts = posts | sort: 'date' | reverse %}
+        {% for post in posts %}
+        <li class="mb-4">
+            <p class="small text-muted">
+                <span class="far fa-calendar-alt"></span>
+                <time datetime="{{ post.date | date_to_xmlschema }}">
+                    {{ post.date | date: "%b %-d, %Y" }}
+                </time>
+                • {% include reading-time.html content=post.content %}
+            </p>
 
-        <p class="h4 post-title">
-            <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title }}</a>
-        </p>
-    </li>
-    {% endfor %}
-</ul>
+            <p class="h4 post-title">
+                <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title }}</a>
+            </p>
+        </li>
+        {% endfor %}
+    </ul>
+</div>
diff --git a/_layouts/category.html b/_layouts/category.html
index 59f94d4..746a0b8 100644
--- a/_layouts/category.html
+++ b/_layouts/category.html
@@ -1,7 +1,8 @@
 ---
 layout: default
 ---
-<div class="category">
+
+<div class="reading-optimised">
     {{ content }}
     <ul class="post-list list-unstyled">
         {% for post in site.categories[page.category] %}
diff --git a/_layouts/page.html b/_layouts/page.html
index 59ae4a3..38965a4 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -1,7 +1,8 @@
 ---
 layout: default
 ---
-<article class="post">
+
+<article class="post reading-optimised">
 
   <header class="post-header">
     <h1 class="post-title">{{ page.title }}</h1>
diff --git a/_layouts/post.html b/_layouts/post.html
index a7e0ff3..c494f55 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,12 +1,13 @@
 ---
 layout: default
 ---
+
 {% if page.date_modified %}
 {% assign modified = page.date_modified %}
 {% else %}
 {% assign modified = page.date %}
 {% endif %}
-<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
+<article class="post reading-optimised" itemscope itemtype="http://schema.org/BlogPosting">
 
     <header class="post-header">
         <h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>