diff --git a/src/components/games/ApiPasswordForm.svelte b/src/components/games/ApiPasswordForm.svelte
index b163a40..12bcc1a 100644
--- a/src/components/games/ApiPasswordForm.svelte
+++ b/src/components/games/ApiPasswordForm.svelte
@@ -1,49 +1,50 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { writable } from "svelte/store";
+  import { onMount, onDestroy, createEventDispatcher } from "svelte";
 
-	const dispatch = createEventDispatcher<{ change: string }>();
+  const dispatch = createEventDispatcher<{ change: string }>();
 
-	let apiPassword = '';
-	let state: 'edit' | 'view' = 'edit';
-	let unsubscribe: () => void;
+  let apiPassword = "";
+  let state: "edit" | "view" = "edit";
+  let unsubscribe: () => void;
 
-	function onSubmit() {
-		state = 'view';
-		if (localStorage) {
-			localStorage.setItem('apiPassword', apiPassword);
-		}
-		dispatch('change', apiPassword);
-	}
+  function onSubmit() {
+    state = "view";
+    if (localStorage) {
+      localStorage.setItem("apiPassword", apiPassword);
+    }
+    dispatch("change", apiPassword);
+  }
 
-	function onEdit() {
-		state = 'edit';
-	}
+  function onEdit() {
+    state = "edit";
+  }
 
-	onMount(() => {
-		if (localStorage !== undefined) {
-			apiPassword = localStorage.getItem('apiPassword') || '';
-		}
+  onMount(() => {
+    if (localStorage !== undefined) {
+      apiPassword = localStorage.getItem("apiPassword") || "";
+    }
 
-		if (apiPassword.length > 0) {
-			dispatch('change', apiPassword);
-			state = 'view';
-		}
-	});
+    if (apiPassword.length > 0) {
+      dispatch("change", apiPassword);
+      state = "view";
+    }
+  });
 </script>
 
 <section>
-	{#if apiPassword.length === 0}
-		<p>
-			To save things to the ledger you need to enter the password. Right now you haven't set one.
-		</p>
-	{/if}
-	{#if state === 'view'}
-		<button on:click={onEdit}>Edit Password</button>
-	{:else}
-		<form on:submit|preventDefault={onSubmit}>
-			<input type="text" bind:value={apiPassword} />
-			<input type="submit" value="Set Password" />
-		</form>
-	{/if}
+  {#if apiPassword.length === 0}
+    <p>
+      To save things to the ledger you need to enter the password. Right now you
+      haven't set one.
+    </p>
+  {/if}
+  {#if state === "view"}
+    <button on:click={onEdit}>Edit Password</button>
+  {:else}
+    <form on:submit|preventDefault={onSubmit}>
+      <input type="text" bind:value={apiPassword} />
+      <input type="submit" value="Set Password" />
+    </form>
+  {/if}
 </section>
diff --git a/src/content/blog/2024-06-18-summer-hours-2024.md b/src/content/blog/2024-06-18-summer-hours-2024.md
new file mode 100644
index 0000000..ca8e249
--- /dev/null
+++ b/src/content/blog/2024-06-18-summer-hours-2024.md
@@ -0,0 +1,16 @@
+---
+title: Summer Hours 2024
+date: 2024-06-18T06:18:13.110Z
+slug: 2024-06-18-summer-hours-2024
+author: Thomas Wilson
+
+---
+It's that time of year when I intentionally set-aside the guilt of not writing all the blog posts I want to, in favour of spending time outside.  
+
+In the great tradition, I'll be on Summer Hours for the next few months.  Spending times outside, ideally eating and drinking good food. 
+
+In July I'm getting married - which I am _incredibly_ excited for. 
+
+Around that, I'll be attending other weddings, spending time with family and friends, and lapping up what little sunshine as are bestowed on these Great British Isles. 
+
+✌️☀️
\ No newline at end of file
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 3875a55..3d43578 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -43,19 +43,30 @@
 
 <Navbar />
 <main class="thomaswilson-container">
-  <section class="thomaswilson-strapline section">
+  <section class="thomaswilson-strapline section heading">
     <h1>Blog</h1>
-    <p>
+    <div class="summer-hours">
+      <p class="summer-hours__emoji">☀️🥂🌻</p>
+      <p class="summer-hours__text">
+        I'm currently out of office for the summer. I'm getting married in July,
+        and I'll be spending as much time as possible out-of-doors in August.
+        I'll be back at keyboard in September.
+      </p>
+      <p class="summer-hours__signature">--TJW 2024-06-17</p>
+    </div>
+
+    <p class="heading__text">
       It has been been
       <span
         class="days-since"
-        class:days-since-success="{daysSinceLastPublish === 0}"
+        class:days-since-success={daysSinceLastPublish === 0}
       >
         {daysSinceLastPublish}
       </span>
       {daysSinceLastPublish === 1 ? "day" : "days"} since I last published something.
     </p>
-    <p>
+
+    <p class="heading__text">
       I have written {numberOfBlogPostsThisYear}
       {numberOfBlogPostsThisYear === 1 ? "piece" : "pieces"} so far this year. On
       average I publish something every {averageDaysBetweenPosts} days ({numberOfPosts}
@@ -70,14 +81,14 @@
     <ul class="posts">
       {#each posts as post, index}
         <BlogPostListItem
-          index="{index}"
-          content_type="{post.content_type}"
-          book_review="{post.book_review}"
-          date="{post.date}"
-          numberOfPosts="{posts.length}"
-          preview="{post.preview}"
-          slug="{post.slug}"
-          title="{post.title}"
+          {index}
+          content_type={post.content_type}
+          book_review={post.book_review}
+          date={post.date}
+          numberOfPosts={posts.length}
+          preview={post.preview}
+          slug={post.slug}
+          title={post.title}
         />
       {/each}
     </ul>
@@ -85,6 +96,12 @@
 </main>
 
 <style lang="scss">
+  .heading {
+    gap: var(--spacing-base);
+    display: grid;
+    grid-template-columns: 100%;
+  }
+
   .posts {
     list-style: none;
     margin: 0;
@@ -122,4 +139,31 @@
       box-shadow: 0 0 0 5px rgba(54, 130, 127, 0);
     }
   }
+
+  .summer-hours {
+    border: 2px solid var(--brand-orange);
+    padding: var(--spacing-md) var(--spacing-lg);
+    border-radius: 8px;
+    margin-top: var(--spacing-base);
+    gap: 0px;
+    font-size: var(--font-size-sm);
+  }
+
+  .summer-hours__emoji {
+    font-family: sans-serif;
+    font-size: var(--font-size-xl);
+    margin: 0;
+  }
+
+  .summer-hours__text {
+    margin: 0;
+    font-size: var(--font-size-base);
+    line-height: 150%;
+  }
+
+  .summer-hours__signature {
+    margin: 0;
+    font-size: var(--font-size-sm);
+    text-align: right;
+  }
 </style>
diff --git a/src/routes/home/HomepageHeader.svelte b/src/routes/home/HomepageHeader.svelte
index 39a788f..a45421f 100644
--- a/src/routes/home/HomepageHeader.svelte
+++ b/src/routes/home/HomepageHeader.svelte
@@ -12,17 +12,18 @@
 
 <section class="homepage-header">
   <h1 class="title">(Thomas) Wilson</h1>
-  <p class="body">
-    I love the craft of making well-built things, especially software and
-    clothes. My embarrassing but earnest goal is to:
-  </p>
+  <p class="body">Hand-maker of things, notably software and clothes.</p>
+  <p class="body">My personal goal is to:</p>
   <blockquote class="mission-statement">
-    make things stronger which don&apos;t rely on exploitation, excessive waste, or
-    dishonesty; and to try and build a kinder, fairer world even when it's hard.
+    make things stronger which don&apos;t rely on exploitation, excessive waste,
+    or dishonesty; and to try and build a kinder, fairer world even when it's
+    hard.
   </blockquote>
   <p class="body">
-    I try to think and be curious, which is why I keep a <a href="/blog">weblog</a
-    > and, equally worth mentioning, what got me through a
+    I try to think and be curious, which is why I keep a <a href="/blog"
+      >weblog</a
+    >
+    and, equally worth mentioning, what got me through a
     <a
       class="thesis"
       target="_blank"
@@ -49,8 +50,8 @@
       href="https://www.laka.co.uk"
       target="_blank"
       rel="noopener noreferrer">Laka</a
-    >, making insurance genuinely fairer. Before that, I was Head of
-    Software Engineering at
+    >, making insurance genuinely fairer. Before that, I was Head of Software
+    Engineering at
     <a href="https://www.oxwash.com" target="_blank" rel="noopener noreferrer"
       >Oxwash</a
     >, building tools for actually sustainable laundry and wet cleaning.
@@ -83,6 +84,7 @@
 
   .body {
     text-align: left;
+    line-height: 160%;
   }
 
   .latest-blog-posts {
diff --git a/src/styles/thomaswilson.css b/src/styles/thomaswilson.css
index dbb84c7..449e47a 100644
--- a/src/styles/thomaswilson.css
+++ b/src/styles/thomaswilson.css
@@ -1,99 +1,113 @@
 @font-face {
-    font-family: 'FivoSansModern-Regular';
-    src: url('/FivoSansModern-Regular.otf');
-    font-display: swap;
+  font-family: "FivoSansModern-Regular";
+  src: url("/FivoSansModern-Regular.otf");
+  font-display: swap;
 }
 
 :root {
-    --brand-orange: #ff8c0d;
-    --brand-purple: #464d77;
-    --brand-green: #36827f;
-    --brand-blue: #00a0e9;
-    --white: #fff;
-    --gray-100: #f8f9fa;
-    --gray-200: #e9ecef;
-    --gray-300: #dee2e6;
-    --gray-400: #ced4da;
-    --gray-500: #adb5bd;
-    --gray-600: #6c757d;
-    --gray-700: #495057;
-    --gray-800: #343a40;
-    --gray-900: #212529;
-    --gray-950: #1a1e23;
-    --gray-1000: #0a0c0e;
-    --font-family-mono: monospace;
-    --font-family-title: 'FivoSansModern-Regular', sans-serif;
-    --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
-        sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-    --font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
+  --brand-orange: #ff8c0d;
+  --brand-purple: #464d77;
+  --brand-green: #36827f;
+  --brand-blue: #00a0e9;
+  --white: #fff;
+  --gray-100: #f8f9fa;
+  --gray-200: #e9ecef;
+  --gray-300: #dee2e6;
+  --gray-400: #ced4da;
+  --gray-500: #adb5bd;
+  --gray-600: #6c757d;
+  --gray-700: #495057;
+  --gray-800: #343a40;
+  --gray-900: #212529;
+  --gray-950: #1a1e23;
+  --gray-1000: #0a0c0e;
+  --font-family-mono: monospace;
+  --font-family-title: "FivoSansModern-Regular", sans-serif;
+  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
 
-    --line-height: 120%;
-    --line-height-sm: 120%;
-    --line-height-md: 138%;
-    --line-height-lg: 145%;
+  --line-height: 120%;
+  --line-height-sm: 120%;
+  --line-height-md: 138%;
+  --line-height-lg: 145%;
 
-    --font-size-base: 1rem;
-    --spacing-base: 1rem;
-    --spacing-sm: 0.25rem;
-    --spacing-md: 0.5rem;
-    --spacing-lg: 1rem;
-    --spacing-xl: 1.5rem;
-    --navbar-height: 75px;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 2rem;
+  --spacing-base: 1rem;
+  --spacing-sm: 0.25rem;
+  --spacing-md: 0.5rem;
+  --spacing-lg: 1rem;
+  --spacing-xl: 1.5rem;
+  --navbar-height: 75px;
 
-    --font-size-sm: 0.875rem;
-    --font-size: 1.12rem;
-    --font-size-md: 1.25rem;
-    --font-size-lg: 1.5rem;
+  --font-size-sm: 0.875rem;
+  --font-size: 1.12rem;
+  --font-size-md: 1.25rem;
+  --font-size-lg: 1.5rem;
 
-    --btn-border: 0;
-    --btn-padding: var(--spacing-sm);
-    --btn-border-radius: 0.25rem;
-    --btn-font-size: 1.08rem;
-    --btn-text-decoration: none;
+  --btn-border: 0;
+  --btn-padding: var(--spacing-sm);
+  --btn-border-radius: 0.25rem;
+  --btn-font-size: 1.08rem;
+  --btn-text-decoration: none;
 }
 
 body {
-    font-family: var(--font-family-sans);
-    line-height: var(--line-height-md);
-    min-height: 100vh;
-    background-color: var(--colour-scheme-background);
-    color: var(--colour-scheme-text);
-    transition: 0.3s ease;
-    transition-property: background-color, color;
+  font-family: var(--font-family-sans);
+  line-height: var(--line-height-md);
+  min-height: 100vh;
+  background-color: var(--colour-scheme-background);
+  color: var(--colour-scheme-text);
+  transition: 0.3s ease;
+  transition-property: background-color, color;
 }
 
 .thomaswilson-container {
-    --container-padding: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: calc(100vh - var(--navbar-height) - calc(2 * var(--container-padding)));
-    padding: var(--container-padding);
+  --container-padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(
+    100vh - var(--navbar-height) - calc(2 * var(--container-padding))
+  );
+  padding: var(--container-padding);
 }
 
 .thomaswilson-container .section {
-    padding: 24px;
-    width: 100%;
-    max-width: 750px;
-    font-size: 1.19rem;
-    line-height: var(--line-height-md);
-    padding-bottom: var(--spacing-base);
-    padding-bottom: 2rem;
+  padding: 24px;
+  width: 100%;
+  max-width: 750px;
+  font-size: 1.19rem;
+  line-height: var(--line-height-md);
+  padding-bottom: var(--spacing-base);
+  padding-bottom: 2rem;
 }
 
 .thomaswilson-strapline .title {
-    font-family: var(--font-family-title);
-    font-size: var(--font-size-base);
-    font-weight: 700;
-    margin: 0;
+  font-family: var(--font-family-title);
+  font-size: var(--font-size-base);
+  font-weight: 700;
+  margin: 0;
 }
 
 .thomaswilson-strapline p {
-    font-size: 1.4rem;
-    line-height: var(--line-height-md);
-    letter-spacing: -0.25px;
-    font-weight: 200;
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-md);
+  letter-spacing: -0.25px;
+  font-weight: 200;
+}
+
+@container (width < 500px) {
+  .thomaswilson-strapline p {
+    font-size: ;
+  }
 }
 
 h1,
@@ -102,73 +116,73 @@ h3,
 h4,
 h5,
 h6 {
-    font-family: var(--font-family-title);
-    font-weight: 700;
-    margin: 0;
-    color: var(--colour-scheme-text);
-    padding-top: 12px;
-    padding-bottom: 8px;
-    line-height: var(--line-height);
+  font-family: var(--font-family-title);
+  font-weight: 700;
+  margin: 0;
+  color: var(--colour-scheme-text);
+  padding-top: 12px;
+  padding-bottom: 8px;
+  line-height: var(--line-height);
 }
 
-h2 { 
-    font-size: 2.25rem;
-    padding-top: 0.7rem;
-    padding-bottom: 0.5rem;
+h2 {
+  font-size: 2.25rem;
+  padding-top: 0.7rem;
+  padding-bottom: 0.5rem;
 }
 
 p,
 li,
-a, 
+a,
 blockquote {
-    font-size: var(--font-size);
-    line-height: var(--line-height-lg);
-    font-family: var(--font-family-mono);
-    margin: 0;
-    color: var(--colour-scheme-text);
-    padding: 8px 0;
+  font-size: var(--font-size);
+  line-height: var(--line-height-lg);
+  font-family: var(--font-family-mono);
+  margin: 0;
+  color: var(--colour-scheme-text);
+  padding: 8px 0;
 }
 
 blockquote {
-    border-style: solid;
-    padding: 0.25rem 0 0.5rem 1rem;
-    border-width: 0px;
-    border-left: 4px solid var(--brand-orange);
-    opacity: 0.85;
-    max-width: 60ch;
+  border-style: solid;
+  padding: 0.25rem 0 0.5rem 1rem;
+  border-width: 0px;
+  border-left: 4px solid var(--brand-orange);
+  opacity: 0.85;
+  max-width: 60ch;
 }
 
 ul,
 ol {
-    padding-left: var(--spacing-base);
+  padding-left: var(--spacing-base);
 }
 
 .thomaswilson-button {
-    border: var(--btn-border);
-    padding: var(--btn-padding);
-    border-radius: var(--btn-border-radius);
-    font-size: var(--btn-font-size);
-    text-decoration: var(--btn-text-decoration);
+  border: var(--btn-border);
+  padding: var(--btn-padding);
+  border-radius: var(--btn-border-radius);
+  font-size: var(--btn-font-size);
+  text-decoration: var(--btn-text-decoration);
 }
 
 .thomaswilson-button:hover {
-    text-decoration: none;
-    cursor: pointer;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
 }
 
 img {
-    max-width: 100%;
-    height: auto;
+  max-width: 100%;
+  height: auto;
 }