fix date zone

.gitignore

@@ -1,2 +1,5 @@
 # npm
 node_modules
+
+# local build
+_live

_config/filters.js

@@ -6,13 +6,52 @@ export default function(eleventyConfig) {
 		return Object.keys(target);
 	});
 
+	/* Exclude all posts with given URLs from a collection list */
+	eleventyConfig.addFilter("excludeFromCollection", function (collection=[], urls=[this.ctx.page.url]) {
+		return collection.filter(post => urls.indexOf(post.url) === -1);
+	});
+
+	/* Filter a collection by a set of tags, returning any that share one or more tags */
+	eleventyConfig.addFilter("filterByTags", function(collection=[], ...requiredTags) {
+		  return collection.filter(post => {
+			return requiredTags.flat().some(tag => post.data.tags.includes(tag));
+		});
+	});
+
+	/* Return n elements from a list */
+	eleventyConfig.addFilter("head", (collection=[], n) => {
+		if(!Array.isArray(collection) || collection.length === 0) {
+			return [];
+		}
+		if( n < 0 ) {
+			return collection.slice(n);
+		}
+
+		return collection.slice(0, n);
+	});
+
+
 	/* For <time> elements */
 	eleventyConfig.addFilter("htmlDateString", (dateObj) => {
 		return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat('yyyy-LL-dd');
 	});
 
+	/* What it says on the tin */
+	eleventyConfig.addFilter("randomize", function(array) {
+		// Create a copy of the array to avoid modifying the original
+		let shuffledArray = array.slice();
+
+		// Fisher-Yates shuffle algorithm
+		for (let i = shuffledArray.length - 1; i > 0; i--) {
+				const j = Math.floor(Math.random() * (i + 1));
+				[shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
+		}
+
+		return shuffledArray;
+	});
+
 	/* Human-readable dates */
-	eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
+	eleventyConfig.addFilter("readableDate", (dateObj, zone) => {
 		return DateTime.fromJSDate(dateObj, { zone: zone || "utc" })
 			.toLocaleString(DateTime.DATE_FULL);
 	});
@@ -22,12 +61,12 @@ export default function(eleventyConfig) {
 		return tags.filter(tag => ["all", "posts", "gallery", "reference", "tagPagination"].indexOf(tag) === -1);
 	});
 
-	/* What it says */
+	/* What it says on the tin */
 	eleventyConfig.addFilter("sortAlphabetically", strings =>
 		(strings || []).sort((b, a) => b.localeCompare(a))
 	);
 
-	/* Remove year from image filenames for OG metadata */
+	/* Remove year from image filenames for OG metadata file path */
 	eleventyConfig.addFilter("toOgFilename", (filename) => {
 		return filename.split("/")[1];
 	});

_includes/footer.njk

@@ -1,7 +1,7 @@
 <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon"
+      <a href="/colophon/"
       {% if page.url == "/colophon/" %}aria-current="page"{% endif %}>
         colophon
       </a>

_includes/head-content.njk

@@ -0,0 +1,35 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+{% set pageTitle %}{{ title }} | {{ metadata.title }}{% endset %}
+<title>{{ pageTitle }}</title>
+<meta name="description" content="{{ description or metadata.description }}">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
+
+<meta property="og:title" content="{{ title or metadata.title }}" />
+<meta property="og:type" content="website" />
+<meta property="og:description" content="{{ description or metadata.description }}" />
+<meta property="og:site_name" content="{{ metadata.title }}" />
+{% if image %}
+<meta property="og:image" content="/img/{{ image.src | toOgFilename }}" />
+<meta property="og:image:alt" content="{{ image.alt }}" />
+{% endif %}
+
+<meta name="generator" content="{{ eleventy.generator }}">
+
+{# Fonts #}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+{# Icons #}
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+{# Styles #}
+<style>{% include "css/main.css" %}</style>
+<style>{% include "css/nav.css" %}</style>
+<style>{% include "css/print.css" %}</style>
+
+<style>{% getBundle "css" %}</style>
+
+<script type="module">{% getBundle "js" %}</script>

_includes/header.njk

@@ -1,6 +1,6 @@
 <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -9,8 +9,7 @@
       {% for entry in collections.all | eleventyNavigation %}
       <li>
         <a href="{{ entry.url }}" title="{{ entry.data.label }}"
-        {% if entry.url == page.url %}aria-current="page"{% endif %}
-        aria-label="{{ entry.data.label }}">
+        {% if entry.url == page.url %}aria-current="page"{% endif %}>
           <i class="{{ entry.data.icon }}" aria-hidden="true"></i>
           <span class="menu-text">{{ entry.title }}</span>
         </a>

_includes/layouts/base.njk

@@ -1,51 +1,17 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    {% include "head-content.njk" %}
+  </head>
+  <body>
+    {% include "header.njk" %}
 
-  {% set pageTitle %}{{ title }} | {{ metadata.title }}{% endset %}
-  <title>{{ pageTitle }}</title>
-  <meta name="description" content="{{ description or metadata.description }}">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
+    <main id="main">
+      {{ content | safe }}
+    </main>
 
-  <meta property="og:title" content="{{ title or metadata.title }}" />
-  <meta property="og:type" content="website" />
-  <meta property="og:description" content="{{ description or metadata.description }}" />
-  <meta property="og:site_name" content="{{ metadata.title }}" />
-  {% if image %}
-  <meta property="og:image" content="/img/{{ image.src | toOgFilename }}" />
-  <meta property="og:image:alt" content="{{ image.alt }}" />
-  {% endif %}
+    {% include "footer.njk" %}
 
-  <meta name="generator" content="{{ eleventy.generator }}">
-
-  {# Fonts #}
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
-
-  {# Icons #}
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
-
-  {# Styles #}
-  <style>{% include "css/main.css" %}</style>
-  <style>{% include "css/nav.css" %}</style>
-  <style>{% include "css/print.css" %}</style>
-
-  <style>{% getBundle "css" %}</style>
-
-  <script type="module">{% getBundle "js" %}</script>
-</head>
-<body>
-  {% include "header.njk" %}
-
-  <main id="main">
-    {{ content | safe }}
-
-    <hr>
-  </main>
-
-  {% include "footer.njk" %}
-
-  <!-- This page `{{ page.url }}` was built on {% currentBuildDate %} -->
-<body>
+    <!-- This page `{{ page.url }}` was built on {% currentBuildDate %} -->
+  </body>
+</html>

_includes/layouts/post.njk

@@ -3,6 +3,7 @@ layout: base.njk
 ---
 {% css %}{% include "css/post.css" %}{% endcss %}
 {% css %}{% include "css/highlighting.css" %}{% endcss %}
+{% css %}{% include "css/lists.css" %}{% endcss %}
 {% js %}{% include "node_modules/@zachleat/heading-anchors/heading-anchors.js" %}{% endjs %}
 
 <heading-anchors content="<i class='fa-solid fa-anchor'></i>">
@@ -12,7 +13,7 @@ layout: base.njk
     <div class="post-metadata">
       <p>
         posted on
-        <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
+        <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate("America/Los_Angeles") }}</time>
         by {{ metadata.author }}
       </p>
       {% set relevantTags = tags | removeBasicTags %}
@@ -43,4 +44,16 @@ layout: base.njk
   {% set newerTitle = newerPost.data.title %}
   {% set inPost = true %}
   {% include "pagination.njk" %}
+
+  <hr>
+
+  {% set relevantTags = tags | removeBasicTags %}
+  {% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection([page.url, olderHref, newerHref]) | randomize | head(3) %}
+  {% if postlist.length %}
+  <section class="related-posts">
+    <h2>related posts</h2>
+    {% include "postlist.njk" %}
+  </section>
+  {% endif %}
+
 </heading-anchors>

_includes/layouts/tag-redirect.njk

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    {% include "head-content.njk" %}
+
+    <meta http-equiv="refresh" content="0; url=/tags/{{ tag }}">
+  </head>
+  <body>
+    {% include "header.njk" %}
+
+    <main id="main">
+      <h1>{{ title }}</h1>
+
+      {{ content | safe }}
+    </main>
+
+    {% include "footer.njk" %}
+
+    <!-- This page `{{ page.url }}` was built on {% currentBuildDate %} -->
+  <body>
+</html>

_includes/postlist.njk

@@ -5,7 +5,7 @@
 			{% if post.data.image %}
 			<img src="/img/{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
 			{% endif %}
-			<h2>{{ post.data.title }}</h2>
+			<h2 data-ha-exclude>{{ post.data.title }}</h2>
 			<ul class="postlist-tags">
 				{% for tag in post.data.tags | removeBasicTags %}
 				<li>{{ tag }}</li>

_site/aarons-mask/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>aaron&amp;#39;s mask | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="aaron&#39;s mask">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/aaron-mask.jpg">
-  <meta property="og:image:alt" content="A brown/grey leather mask of a long snouted dog with visible teeth and red detailing.">
-  
+<title>aaron&amp;#39;s mask | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="aaron&#39;s mask">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/aaron-mask.jpg">
+<meta property="og:image:alt" content="A brown/grey leather mask of a long snouted dog with visible teeth and red detailing.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/o-ring-bracelet/">
+			
+			<img src="/img/oring-bracelet.jpg" alt="A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps." loading="lazy" decoding="async" width="900" height="1200">
+			
+			<h2 data-ha-exclude="" id="o-ring-bracelet">o-ring bracelet</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/leatherworking-favorites/">
+			
+			<img src="/img/leather-harness-wip.jpg" alt="two pieces of a chest harness sitting on a messy workbench. both pieces are about 8 inches long total and consist of two large o-rings joined by a dark teal leather strap. the o rings and rivets are matte black." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="leatherworking-favorites">leatherworking favorites</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/makers-mark-keychain/">
+			
+			<img src="/img/makers-mark-keychain.jpg" alt="A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="makers-mark-keychain">maker&#39;s mark keychain</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/aarons-mask/` was built on 2026-02-20T01:52:49.455Z -->
-<body>
-</body></body>
+    <!-- This page `/aarons-mask/` was built on 2026-03-01T22:40:49.396Z -->
+  </body>
+</html>

_site/about/index.html

@@ -1,35 +1,36 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>about | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="about">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
+<title>about | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="about">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+<meta name="generator" content="Eleventy v3.1.2">
 
-  
-  
-  
-  
 
-  <style>:root {
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>:root {
 	color-scheme: light dark;
 
 	--font-family: 'Atkinson Hyperlegible Next', sans-serif;
@@ -48,7 +49,7 @@
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -80,8 +81,6 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -102,7 +101,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -121,7 +120,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -130,6 +128,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -291,13 +293,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -313,9 +311,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -508,6 +507,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -684,7 +685,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -915,11 +916,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -927,35 +929,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-current="page" aria-label="about Lee">
+        <a href="/about/" title="about Lee" aria-current="page">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -967,8 +969,8 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
 
 <heading-anchors content="<i class='fa-solid fa-anchor'></i>">
   <h1 id="about">about</h1>
@@ -1095,14 +1097,12 @@ export { HeadingAnchors }</script>
 
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1121,6 +1121,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/about/` was built on 2026-02-20T01:52:49.431Z -->
-<body>
-</body></body>
+    <!-- This page `/about/` was built on 2026-03-01T22:40:49.432Z -->
+  </body>
+</html>

_site/acadia-coloring-journal/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>Acadia coloring journal | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="Acadia coloring journal">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/acadia-coloring-journal.jpg">
-  <meta property="og:image:alt" content="A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park.">
-  
+<title>Acadia coloring journal | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="Acadia coloring journal">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/acadia-coloring-journal.jpg">
+<meta property="og:image:alt" content="A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1250,16 +1471,75 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/leather-long-stitch-journals/">
+			
+			<img src="/img/long-stitch-journals.jpg" alt="A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="leather-long-stitch-journals">leather long-stitch journals</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+				<li>book</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/stampede-journal/">
+			
+			<img src="/img/stampede-journal.jpg" alt="A 4-part collage of a hardcover book, showing a coloring page with &#39;stampede!&#39; written across it." loading="lazy" decoding="async" width="1000" height="1777">
+			
+			<h2 data-ha-exclude="" id="stampede-journal">stampede journal</h2>
+			<ul class="postlist-tags">
+				
+				<li>book</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/brookes-notebook/">
+			
+			<img src="/img/brooke-notebook.jpg" alt="A six panel collage showing the covers, endpapers, and some of the pages of a notebook." loading="lazy" decoding="async" width="1000" height="1500">
+			
+			<h2 data-ha-exclude="" id="brookes-notebook">brooke&#39;s notebook</h2>
+			<ul class="postlist-tags">
+				
+				<li>book</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1278,6 +1558,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/acadia-coloring-journal/` was built on 2026-02-20T01:52:49.433Z -->
-<body>
-</body></body>
+    <!-- This page `/acadia-coloring-journal/` was built on 2026-03-01T22:40:49.391Z -->
+  </body>
+</html>

_site/acadia-mitts/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>acadia mitts | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="acadia mitts">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/acadia-mitts.jpg">
-  <meta property="og:image:alt" content="a hand wearing a knitted fingerless mitten. it&#39;s knit in a slubby, almost tweedy yarn, with the body being blue grey stockinette and the cuffs and tips a vibrant green rib.">
-  
+<title>acadia mitts | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="acadia mitts">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/acadia-mitts.jpg">
+<meta property="og:image:alt" content="a hand wearing a knitted fingerless mitten. it&#39;s knit in a slubby, almost tweedy yarn, with the body being blue grey stockinette and the cuffs and tips a vibrant green rib.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,73 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/keffiyah-fishing-net-pattern/">
+			
+			<img src="/img/keffiyah-nets.jpg" alt="a knitted swatch. it&#39;s mostly white yarn, but a grid of dark red- purple- green yarn that looks like a chain link fence is built into it. the diagonal lines are achieved with floats of yarn from one row, then picked up and knit into several rows later." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="keffiyah-fishing-net-pattern">keffiyah fishing net pattern</h2>
+			<ul class="postlist-tags">
+				
+				<li>knit</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/pride-dice-bags/">
+			
+			<img src="/img/pride-dice-bags.jpg" alt="Several knitted drawstring dice bags sit in front of a bookshelf. They are in different pride flag colors; from right to left (skipping a few duplicates) bisexual, lesbian, nonbinary, trans, and genderqueer. The trans-colored dice bag in the center opens towards the camera, showing a variety of colorful dice inside." loading="lazy" decoding="async" width="1000" height="500">
+			
+			<h2 data-ha-exclude="" id="pride-dice-bags">pride dice bags</h2>
+			<ul class="postlist-tags">
+				
+				<li>knit</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/pink-socks/">
+			
+			<img src="/img/pink-socks.jpg" alt="Feet propped up on a car dashboard, with a desert landscape beyond. The feet are in salmon-colored socks with black flecks, and decorative lines running down the socks." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="pink-socks">pink socks</h2>
+			<ul class="postlist-tags">
+				
+				<li>knit</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1540,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/acadia-mitts/` was built on 2026-02-20T01:52:49.462Z -->
-<body>
-</body></body>
+    <!-- This page `/acadia-mitts/` was built on 2026-03-01T22:40:49.406Z -->
+  </body>
+</html>

_site/an-intro-to-git/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>an intro to git | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="an intro to git">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/goldeneye-tail.jpg">
-  <meta property="og:image:alt" content="Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash.">
-  
+<title>an intro to git | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="an intro to git">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/goldeneye-tail.jpg">
+<meta property="og:image:alt" content="Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1649,16 +1870,75 @@ codeberg  https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/domain-and-site-setup/">
+			
+			<img src="/img/crinkly-mushrooms.jpg" alt="Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="domain-and-site-setup">domain and site setup</h2>
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/backend-accessibility/">
+			
+			<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility</h2>
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/gender-in-data-models/">
+			
+			<img src="/img/peony.jpg" alt="Image unrelated to post. A light pink peony in full bloom, close up." loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="gender-in-data-models">gender in data models</h2>
+			<ul class="postlist-tags">
+				
+				<li>gender</li>
+				
+				<li>software</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1677,6 +1957,6 @@ codeberg  https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
 </footer>
 
 
-  <!-- This page `/an-intro-to-git/` was built on 2026-02-20T01:52:49.465Z -->
-<body>
-</body></body>
+    <!-- This page `/an-intro-to-git/` was built on 2026-03-01T22:40:49.409Z -->
+  </body>
+</html>

_site/anarchy-autism/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>anarchy autism | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="anarchy autism">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/anarchy-autism-rainbow-print.jpg">
-  <meta property="og:image:alt" content="A print in rainbow ink that says autism with the anarchy A.">
-  
+<title>anarchy autism | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="anarchy autism">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/anarchy-autism-rainbow-print.jpg">
+<meta property="og:image:alt" content="A print in rainbow ink that says autism with the anarchy A.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1256,16 +1477,79 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/chanterelle/">
+			
+			<img src="/img/chanterelle-print.jpg" alt="A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="chanterelle">chanterelle</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/killdeer/">
+			
+			<img src="/img/killdeer-print.jpg" alt="A print of a killdeer in black ink." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="killdeer">killdeer</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/trans-the-world/">
+			
+			<img src="/img/trans-the-world-print.jpg" alt="A print that reads &#39;trans the world&#39; surrounding an image of a globe and a trans symbol. It&#39;s in a ping-to-blue gradient." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="trans-the-world">trans the world</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>shirt</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1284,6 +1568,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/anarchy-autism/` was built on 2026-02-20T01:52:49.447Z -->
-<body>
-</body></body>
+    <!-- This page `/anarchy-autism/` was built on 2026-03-01T22:40:49.426Z -->
+  </body>
+</html>

_site/art-shows-and-events/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>art shows and events | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="art shows and events">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/pink-yellow-flowers.jpg">
-  <meta property="og:image:alt" content="Image unrelated to post. A cluster of small, four-petaled flowers, varying in color between a purpley-pink and yellow.">
-  
+<title>art shows and events | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="art shows and events">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/pink-yellow-flowers.jpg">
+<meta property="og:image:alt" content="Image unrelated to post. A cluster of small, four-petaled flowers, varying in color between a purpley-pink and yellow.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1247,16 +1468,21 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1275,6 +1501,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/art-shows-and-events/` was built on 2026-02-20T01:52:49.462Z -->
-<body>
-</body></body>
+    <!-- This page `/art-shows-and-events/` was built on 2026-03-01T22:40:49.405Z -->
+  </body>
+</html>

_site/artisans-cooperative-cards/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>artisans cooperative cards | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="artisans cooperative cards">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/artisans-coop-cards.jpg">
-  <meta property="og:image:alt" content="2 white greeting cards with the Artisans Cooperative logo, a chicken. One card has a single print of the chicken in black ink, and the other has two overlapping prints in blue and red ink">
-  
+<title>artisans cooperative cards | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="artisans cooperative cards">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/artisans-coop-cards.jpg">
+<meta property="og:image:alt" content="2 white greeting cards with the Artisans Cooperative logo, a chicken. One card has a single print of the chicken in black ink, and the other has two overlapping prints in blue and red ink">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1241,16 +1462,81 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/brown-creeper/">
+			
+			<img src="/img/brown-creeper-print.jpg" alt="2 copies of the same print side by side. In yellow, black, and purple ink, a brown creeper, a small bird, is depicted, well camouflaged against a tree trunk." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="brown-creeper">brown creeper</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/shrimp/">
+			
+			<img src="/img/shrimp-print.jpg" alt="A print of a small shrimp with slender little leggies in orange ink." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="shrimp">shrimp</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>sticker</li>
+				
+				<li>pin</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/heron/">
+			
+			<img src="/img/heron-print.jpg" alt="A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="heron">heron</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>shirt</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1269,6 +1555,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/artisans-cooperative-cards/` was built on 2026-02-20T01:52:49.445Z -->
-<body>
-</body></body>
+    <!-- This page `/artisans-cooperative-cards/` was built on 2026-03-01T22:40:49.424Z -->
+  </body>
+</html>

_site/artisans-cooperative-shirts/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>artisans cooperative shirts | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="artisans cooperative shirts">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/artisans-coop-shirt.jpg">
-  <meta property="og:image:alt" content="A black tank top laid on a desk. In white ink it reads &#39;Artisans Cooperative&#39; with a print of some chickens and a quail.">
-  
+<title>artisans cooperative shirts | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="artisans cooperative shirts">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/artisans-coop-shirt.jpg">
+<meta property="og:image:alt" content="A black tank top laid on a desk. In white ink it reads &#39;Artisans Cooperative&#39; with a print of some chickens and a quail.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1242,16 +1463,79 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/chanterelle/">
+			
+			<img src="/img/chanterelle-print.jpg" alt="A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="chanterelle">chanterelle</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/iris/">
+			
+			<img src="/img/iris-prints.jpg" alt="3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes." loading="lazy" decoding="async" width="1000" height="562">
+			
+			<h2 data-ha-exclude="" id="iris">iris</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/trans-the-world/">
+			
+			<img src="/img/trans-the-world-print.jpg" alt="A print that reads &#39;trans the world&#39; surrounding an image of a globe and a trans symbol. It&#39;s in a ping-to-blue gradient." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="trans-the-world">trans the world</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>shirt</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1270,6 +1554,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/artisans-cooperative-shirts/` was built on 2026-02-20T01:52:49.447Z -->
-<body>
-</body></body>
+    <!-- This page `/artisans-cooperative-shirts/` was built on 2026-03-01T22:40:49.425Z -->
+  </body>
+</html>

_site/artists-conk/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>artists conk! | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="artists conk!">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/artists-conk-leatherworking.jpg">
-  <meta property="og:image:alt" content="A hand holding a mushroom with a whitish surface. Scratched into the surface and showing up as brown lines is an illustration of many leatherworking tools.">
-  
+<title>artists conk! | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="artists conk!">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/artists-conk-leatherworking.jpg">
+<meta property="og:image:alt" content="A hand holding a mushroom with a whitish surface. Scratched into the surface and showing up as brown lines is an illustration of many leatherworking tools.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1225,16 +1446,21 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1253,6 +1479,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/artists-conk/` was built on 2026-02-20T01:52:49.450Z -->
-<body>
-</body></body>
+    <!-- This page `/artists-conk/` was built on 2026-03-01T22:40:49.428Z -->
+  </body>
+</html>

_site/azure-locations-and-file-crawling/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>azure locations and file crawling | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="azure locations and file crawling">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/azure-locations.jpg">
-  <meta property="og:image:alt" content="A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of resources applicable to a specific resource type">
-  
+<title>azure locations and file crawling | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="azure locations and file crawling">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/azure-locations.jpg">
+<meta property="og:image:alt" content="A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of resources applicable to a specific resource type">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1465,16 +1686,73 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/happy-solstice-2025/">
+			
+			<img src="/img/solstice-2025.jpg" alt="front and back of our solstice card from this year, designed in postcard format. long alt incoming... front - 4 picture collage. 1 - i&#39;m standing in the woods, looking to one side, wearing an elaborate knit scarf. 2 - silhouetted thistle-like flowers in front of a pink-purple sky. 3 - my wife brooke crouches down to draw a heart in charcoal on a beach log, with &#39;L + B&#39; written inside. 4 - brooke stands on a driftwood-covered beach looking hella cool in mirrored shades. our dog kes stands in front of her and looks off to one side eagerly. overlaid is the words &#39;happy solstice&#39; in cursive. back - split down the center like the back of a postcard. on the left side, a 5 picture collage. 1 - i stand on a rock at the edge of a calm alpine lake. overlaid is the words &#39;lee, brooke, kestrel, &amp; the flock&#39; in print lettering. 2 - an early spring fern curl. 3 - our six ducks, all facing to the left, not in a row but still very organized. 4 - brooke grins at the camera while hugging kestrel&#39;s head. kestrel looks maybe a bit distraught. 5 - silhouette of a heron in flight across an early morning blue sky. on the address side, i&#39;ve added a dahlia to represent the stamp, and written &#39;you!&#39; in the field that would normally hold the mailing address." loading="lazy" decoding="async" width="1000" height="1346">
+			
+			<h2 data-ha-exclude="" id="happy-solstice-2025">happy solstice 2025</h2>
+			<ul class="postlist-tags">
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/brookes-notebook/">
+			
+			<img src="/img/brooke-notebook.jpg" alt="A six panel collage showing the covers, endpapers, and some of the pages of a notebook." loading="lazy" decoding="async" width="1000" height="1500">
+			
+			<h2 data-ha-exclude="" id="brookes-notebook">brooke&#39;s notebook</h2>
+			<ul class="postlist-tags">
+				
+				<li>book</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/my-favorite-git-flag/">
+			
+			<img src="/img/shelf-mushrooms.jpg" alt="Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk." loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="my-favorite-git-flag">my favorite git flag</h2>
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1493,6 +1771,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/azure-locations-and-file-crawling/` was built on 2026-02-20T01:52:49.461Z -->
-<body>
-</body></body>
+    <!-- This page `/azure-locations-and-file-crawling/` was built on 2026-03-01T22:40:49.404Z -->
+  </body>
+</html>

_site/backend-accessibility/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>backend accessibility | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="backend accessibility">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/camelCase-print.jpg">
-  <meta property="og:image:alt" content="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font.">
-  
+<title>backend accessibility | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="backend accessibility">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/camelCase-print.jpg">
+<meta property="og:image:alt" content="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1295,16 +1516,73 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/azure-locations-and-file-crawling/">
+			
+			<img src="/img/azure-locations.jpg" alt="A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of resources applicable to a specific resource type" loading="lazy" decoding="async" width="1000" height="827">
+			
+			<h2 data-ha-exclude="" id="azure-locations-and-file-crawling">azure locations and file crawling</h2>
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/my-favorite-git-flag/">
+			
+			<img src="/img/shelf-mushrooms.jpg" alt="Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk." loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="my-favorite-git-flag">my favorite git flag</h2>
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/redirections/">
+			
+			<img src="/img/angle-brackets-uwu.jpg" alt="Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets." loading="lazy" decoding="async" width="1000" height="316">
+			
+			<h2 data-ha-exclude="" id="redirections">redirections</h2>
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1323,6 +1601,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/backend-accessibility/` was built on 2026-02-20T01:52:49.440Z -->
-<body>
-</body></body>
+    <!-- This page `/backend-accessibility/` was built on 2026-03-01T22:40:49.419Z -->
+  </body>
+</html>

_site/bag-strap/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>bag strap | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="bag strap">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/bag-strap.jpg">
-  <meta property="og:image:alt" content="A nylon webbing shoulder strap in bright teal with clips on each end.">
-  
+<title>bag strap | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="bag strap">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/bag-strap.jpg">
+<meta property="og:image:alt" content="A nylon webbing shoulder strap in bright teal with clips on each end.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/rachels-bracelets/">
+			
+			<img src="/img/rachel-bracelets.jpg" alt="Two pink leather bracelets with stainless steel hardware and aqua stitching." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="rachels-bracelets">rachel&#39;s bracelets</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/sunflower/">
+			
+			<img src="/img/sunflower.jpg" alt="A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center ." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="sunflower">sunflower</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/shrimp-cat-toy/">
+			
+			<img src="/img/two-shrimp.jpg" alt="Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange." loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="shrimp-cat-toy">shrimp cat toy</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/bag-strap/` was built on 2026-02-20T01:52:49.450Z -->
-<body>
-</body></body>
+    <!-- This page `/bag-strap/` was built on 2026-03-01T22:40:49.428Z -->
+  </body>
+</html>

_site/baseball-journal/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>baseball journal | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="baseball journal">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/baseball-journal.jpg">
-  <meta property="og:image:alt" content="A 3-part collage of a leather-covered book with baseball-style stitching across the spine.">
-  
+<title>baseball journal | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="baseball journal">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/baseball-journal.jpg">
+<meta property="og:image:alt" content="A 3-part collage of a leather-covered book with baseball-style stitching across the spine.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1244,16 +1465,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/blue-and-brown-leather-journal/">
+			
+			<img src="/img/blue-brown-leather-journal.jpg" alt="A three panel collage showcasing a blue and brown leather-covered journal." loading="lazy" decoding="async" width="1000" height="1776">
+			
+			<h2 data-ha-exclude="" id="blue-and-brown-leather-journal">blue and brown leather journal</h2>
+			<ul class="postlist-tags">
+				
+				<li>book</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/leather-strap-journal/">
+			
+			<img src="/img/leather-strap-journal.jpg" alt="A 3-part collage showing a blue journal with leather straps woven into the covers." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="leather-strap-journal">leather strap journal</h2>
+			<ul class="postlist-tags">
+				
+				<li>book</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/tiny-books/">
+			
+			<img src="/img/tiny-book.jpg" alt="A three panel collage showing a book held in the palm of a hand." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="tiny-books">tiny books</h2>
+			<ul class="postlist-tags">
+				
+				<li>book</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1272,6 +1548,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/baseball-journal/` was built on 2026-02-20T01:52:49.442Z -->
-<body>
-</body></body>
+    <!-- This page `/baseball-journal/` was built on 2026-03-01T22:40:49.422Z -->
+  </body>
+</html>

_site/become-unbutterable/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>become unbutterable | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="become unbutterable">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/become-unbutterable.jpg">
-  <meta property="og:image:alt" content="3 copies of the same stamp in orange ink are spread out next to the hand carved rubber stamp they were made from. They show a cat lying on his back with paws curled, holding a butter knife in his mouth. Text around the cat reads, in all caps, &#39;become unbutterable.&#39;">
-  
+<title>become unbutterable | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="become unbutterable">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/become-unbutterable.jpg">
+<meta property="og:image:alt" content="3 copies of the same stamp in orange ink are spread out next to the hand carved rubber stamp they were made from. They show a cat lying on his back with paws curled, holding a butter knife in his mouth. Text around the cat reads, in all caps, &#39;become unbutterable.&#39;">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1241,16 +1462,81 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/quorbs/">
+			
+			<img src="/img/quorbs-print.jpg" alt="A print in two layers of color showing two rotund quails on a branch. Most of the details are in black ink, then there is a layer with a brown gradient filling in some color on the head and breast." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="quorbs">quorbs</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/booby-congrats-on-the-top-surgery/">
+			
+			<img src="/img/booby-card.jpg" alt="A landscape-oriented white card with a two-color print of a blue-footed booby." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="booby-congrats-on-the-top-surgery">booby (congrats on the top surgery)</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/greeting-loons/">
+			
+			<img src="/img/greeting-loons.jpg" alt="A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="greeting-loons">greeting loons</h2>
+			<ul class="postlist-tags">
+				
+				<li>card</li>
+				
+				<li>print</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1269,6 +1555,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/become-unbutterable/` was built on 2026-02-20T01:52:49.432Z -->
-<body>
-</body></body>
+    <!-- This page `/become-unbutterable/` was built on 2026-03-01T22:40:49.390Z -->
+  </body>
+</html>

_site/bfl-silk-handspun/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>BFL/silk handspun | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="BFL/silk handspun">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/bfl-silk-handspun.jpg">
-  <meta property="og:image:alt" content="a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight.">
-  
+<title>BFL/silk handspun | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="BFL/silk handspun">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/bfl-silk-handspun.jpg">
+<meta property="og:image:alt" content="a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/light-grey-jacobs-handspun/">
+			
+			<img src="/img/light-grey-jacobs.jpg" alt="a skein of light grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="light-grey-jacobs-handspun">light grey jacobs handspun</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/charlie-the-alpaca-handspun/">
+			
+			<img src="/img/charlie-alpaca-handspun.jpg" alt="one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight" loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="charlie-the-alpaca-handspun">charlie the alpaca handspun</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/icelandic-lamb-handspun/">
+			
+			<img src="/img/icelandic-lamb.jpg" alt="a skein of black handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="icelandic-lamb-handspun">icelandic lamb handspun</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/bfl-silk-handspun/` was built on 2026-02-20T01:52:49.465Z -->
-<body>
-</body></body>
+    <!-- This page `/bfl-silk-handspun/` was built on 2026-03-01T22:40:49.410Z -->
+  </body>
+</html>

_site/big-pidge/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>big pidge | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="big pidge">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/big-pidge-print.jpg">
-  <meta property="og:image:alt" content="A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence.">
-  
+<title>big pidge | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="big pidge">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/big-pidge-print.jpg">
+<meta property="og:image:alt" content="A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1251,16 +1472,81 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/greeting-loons/">
+			
+			<img src="/img/greeting-loons.jpg" alt="A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="greeting-loons">greeting loons</h2>
+			<ul class="postlist-tags">
+				
+				<li>card</li>
+				
+				<li>print</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/bottom-growth/">
+			
+			<img src="/img/bottom-growth-prints.jpg" alt="4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="bottom-growth">bottom growth</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/booby-congrats-on-the-top-surgery/">
+			
+			<img src="/img/booby-card.jpg" alt="A landscape-oriented white card with a two-color print of a blue-footed booby." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="booby-congrats-on-the-top-surgery">booby (congrats on the top surgery)</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1279,6 +1565,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/big-pidge/` was built on 2026-02-20T01:52:49.441Z -->
-<body>
-</body></body>
+    <!-- This page `/big-pidge/` was built on 2026-03-01T22:40:49.420Z -->
+  </body>
+</html>

_site/block-printing-transfer-method/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>block printing transfer method | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="block printing transfer method">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/transfer-wip.jpg">
-  <meta property="og:image:alt" content="A pink block of carving material with a printed design of a bird attached to it. The paper has been partially rubbed away (process described in this post) to reveal the inked design on the carving material.">
-  
+<title>block printing transfer method | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="block printing transfer method">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/transfer-wip.jpg">
+<meta property="og:image:alt" content="A pink block of carving material with a printed design of a bird attached to it. The paper has been partially rubbed away (process described in this post) to reveal the inked design on the carving material.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1265,16 +1486,21 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1293,6 +1519,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/block-printing-transfer-method/` was built on 2026-02-20T01:52:49.440Z -->
-<body>
-</body></body>
+    <!-- This page `/block-printing-transfer-method/` was built on 2026-03-01T22:40:49.419Z -->
+  </body>
+</html>

_site/blue-and-brown-leather-journal/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>blue and brown leather journal | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="blue and brown leather journal">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/blue-brown-leather-journal.jpg">
-  <meta property="og:image:alt" content="A three panel collage showcasing a blue and brown leather-covered journal.">
-  
+<title>blue and brown leather journal | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="blue and brown leather journal">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/blue-brown-leather-journal.jpg">
+<meta property="og:image:alt" content="A three panel collage showcasing a blue and brown leather-covered journal.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1250,16 +1471,73 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/flocked-notebook/">
+			
+			<img src="/img/flocked-notebook.jpg" alt="A two panel collage showing the cover and endpapers of a thick notebook." loading="lazy" decoding="async" width="1000" height="1331">
+			
+			<h2 data-ha-exclude="" id="flocked-notebook">flocked notebook</h2>
+			<ul class="postlist-tags">
+				
+				<li>book</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/leather-long-stitch-journals/">
+			
+			<img src="/img/long-stitch-journals.jpg" alt="A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="leather-long-stitch-journals">leather long-stitch journals</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+				<li>book</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/orange-green-journal/">
+			
+			<img src="/img/orange-green-journal.jpg" alt="A 4-part collage of a slim handbound book." loading="lazy" decoding="async" width="1000" height="1777">
+			
+			<h2 data-ha-exclude="" id="orange-green-journal">orange green journal</h2>
+			<ul class="postlist-tags">
+				
+				<li>book</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1278,6 +1556,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/blue-and-brown-leather-journal/` was built on 2026-02-20T01:52:49.433Z -->
-<body>
-</body></body>
+    <!-- This page `/blue-and-brown-leather-journal/` was built on 2026-03-01T22:40:49.391Z -->
+  </body>
+</html>

_site/booby-congrats-on-the-top-surgery/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>booby (congrats on the top surgery) | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="booby (congrats on the top surgery)">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/booby-card.jpg">
-  <meta property="og:image:alt" content="A landscape-oriented white card with a two-color print of a blue-footed booby.">
-  
+<title>booby (congrats on the top surgery) | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="booby (congrats on the top surgery)">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/booby-card.jpg">
+<meta property="og:image:alt" content="A landscape-oriented white card with a two-color print of a blue-footed booby.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1244,16 +1465,79 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/on-the-ubiquity-of-enby/">
+			
+			<img src="/img/gender-census.jpg" alt="A screenshot of part of the Gender Census reports page, showing the header bar and a title that reads &#39;Gender Census 2023 Worldwide Report&#39;" loading="lazy" decoding="async" width="1000" height="364">
+			
+			<h2 data-ha-exclude="" id="on-the-ubiquity-of-enby">on the ubiquity of &#39;enby&#39;</h2>
+			<ul class="postlist-tags">
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/slightly-weird-man-club/">
+			
+			<img src="/img/slightly-weird-man-club-print.jpg" alt="A print that reads &#39;slightly weird man club&#39; in a nonbinary flag colored gradient" loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="slightly-weird-man-club">slightly weird man club</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>shirt</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/geese/">
+			
+			<img src="/img/geese-print.jpg" alt="Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS!" loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="geese">geese</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>shirt</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1272,6 +1556,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/booby-congrats-on-the-top-surgery/` was built on 2026-02-20T01:52:49.458Z -->
-<body>
-</body></body>
+    <!-- This page `/booby-congrats-on-the-top-surgery/` was built on 2026-03-01T22:40:49.399Z -->
+  </body>
+</html>

_site/bottom-growth/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>bottom growth | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="bottom growth">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/bottom-growth-prints.jpg">
-  <meta property="og:image:alt" content="4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac.">
-  
+<title>bottom growth | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="bottom growth">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/bottom-growth-prints.jpg">
+<meta property="og:image:alt" content="4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1239,16 +1460,79 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/flicker/">
+			
+			<img src="/img/flicker-print.jpg" alt="A print in black, brown, and red ink of a northern flicker (a type of woodpecker). Viewed from the back, he is looking over his shoulder and upward towards something unseen above him (my bird feeder)." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="flicker">flicker</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>shirt</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/fix-your-hearts/">
+			
+			<img src="/img/fix-your-hearts-print.jpg" alt="2 copies of the same print, one in black ink and one in dark teal. The print is text that reads &#39;fix your hearts or die&#39;, with the text shaped into a somewhat long and narrow heart." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="fix-your-hearts">fix your hearts</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/gender-in-data-models/">
+			
+			<img src="/img/peony.jpg" alt="Image unrelated to post. A light pink peony in full bloom, close up." loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="gender-in-data-models">gender in data models</h2>
+			<ul class="postlist-tags">
+				
+				<li>gender</li>
+				
+				<li>software</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1267,6 +1551,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/bottom-growth/` was built on 2026-02-20T01:52:49.456Z -->
-<body>
-</body></body>
+    <!-- This page `/bottom-growth/` was built on 2026-03-01T22:40:49.397Z -->
+  </body>
+</html>

_site/bowtie/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>bowtie | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="bowtie">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/bowtie.jpg">
-  <meta property="og:image:alt" content="A black leather bow tie with black stitching.">
-  
+<title>bowtie | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="bowtie">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/bowtie.jpg">
+<meta property="og:image:alt" content="A black leather bow tie with black stitching.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/sunflower/">
+			
+			<img src="/img/sunflower.jpg" alt="A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center ." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="sunflower">sunflower</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/zipper-bifold/">
+			
+			<img src="/img/zipper-bifold.jpg" alt="A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side." loading="lazy" decoding="async" width="1000" height="1777">
+			
+			<h2 data-ha-exclude="" id="zipper-bifold">zipper bifold</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/foldy-wallet-with-thumb-slide/">
+			
+			<img src="/img/foldy-thumb-slide.jpg" alt="A card wallet with one main pocket and one quick access slot with a thumb slide. The cover of the main pocket curves around the thumb slide." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="foldy-wallet-with-thumb-slide">foldy wallet with thumb slide</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/bowtie/` was built on 2026-02-20T01:52:49.456Z -->
-<body>
-</body></body>
+    <!-- This page `/bowtie/` was built on 2026-03-01T22:40:49.398Z -->
+  </body>
+</html>

_site/boypussy/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>boypussy | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="boypussy">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/boypussy-shirt.jpg">
-  <meta property="og:image:alt" content="A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font.">
-  
+<title>boypussy | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="boypussy">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/boypussy-shirt.jpg">
+<meta property="og:image:alt" content="A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1261,16 +1482,77 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/rope-one/">
+			
+			<img src="/img/rope-print-1.jpg" alt="A print of a nude trans woman in an asymmetrical rope harness." loading="lazy" decoding="async" width="1000" height="1242">
+			
+			<h2 data-ha-exclude="" id="rope-one">rope (one)</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/artisans-cooperative-cards/">
+			
+			<img src="/img/artisans-coop-cards.jpg" alt="2 white greeting cards with the Artisans Cooperative logo, a chicken. One card has a single print of the chicken in black ink, and the other has two overlapping prints in blue and red ink" loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="artisans-cooperative-cards">artisans cooperative cards</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/greeting-loons/">
+			
+			<img src="/img/greeting-loons.jpg" alt="A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="greeting-loons">greeting loons</h2>
+			<ul class="postlist-tags">
+				
+				<li>card</li>
+				
+				<li>print</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1289,6 +1571,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/boypussy/` was built on 2026-02-20T01:52:49.446Z -->
-<body>
-</body></body>
+    <!-- This page `/boypussy/` was built on 2026-03-01T22:40:49.425Z -->
+  </body>
+</html>

_site/brookes-collar/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>brooke&amp;#39;s collar | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="brooke&#39;s collar">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/lined-shearling-collar.jpg">
-  <meta property="og:image:alt" content="A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes.">
-  
+<title>brooke&amp;#39;s collar | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="brooke&#39;s collar">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/lined-shearling-collar.jpg">
+<meta property="og:image:alt" content="A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,73 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/zipper-bifold-green/">
+			
+			<img src="/img/zipper-bifold-green.jpg" alt="A collage showing a green leather wallet with a zippered pocket built into one external side." loading="lazy" decoding="async" width="1000" height="1332">
+			
+			<h2 data-ha-exclude="" id="zipper-bifold-green">zipper bifold (green)</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/x-acto-knife-sheath/">
+			
+			<img src="/img/knife-sheaths.jpg" alt="Several blades with leather sheaths, and a few extra sheaths. There&#39;s a #2 blade with an orange sheath with yellow stitching, a #11 blade with a blue sheath with light grey stitching, and a skiving knife with a plum sheath and pink stitching." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="x-acto-knife-sheath">x-acto knife sheath</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/tooled-leather-patches/">
+			
+			<img src="/img/pronoun-patch-scroll.jpg" alt="two tooled leather patches. they have scrolls tooled on them that read various pronoun sets." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="tooled-leather-patches">tooled leather patches</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1540,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/brookes-collar/` was built on 2026-02-20T01:52:49.450Z -->
-<body>
-</body></body>
+    <!-- This page `/brookes-collar/` was built on 2026-03-01T22:40:49.428Z -->
+  </body>
+</html>

_site/brookes-cuff-bracelets/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>brooke&amp;#39;s cuff bracelets | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="brooke&#39;s cuff bracelets">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/brooke-cuffs.jpg">
-  <meta property="og:image:alt" content="Olive green leather cuffs with silver spikes and a shearling lining.">
-  
+<title>brooke&amp;#39;s cuff bracelets | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="brooke&#39;s cuff bracelets">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/brooke-cuffs.jpg">
+<meta property="og:image:alt" content="Olive green leather cuffs with silver spikes and a shearling lining.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/vertical-card-wallet/">
+			
+			<img src="/img/vertical-card-wallet.jpg" alt="A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="vertical-card-wallet">vertical card wallet</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/sunflower/">
+			
+			<img src="/img/sunflower.jpg" alt="A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center ." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="sunflower">sunflower</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/double-bill-pocket-bifold/">
+			
+			<img src="/img/double-bill-pocket-bifold.jpg" alt="A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket." loading="lazy" decoding="async" width="1000" height="1777">
+			
+			<h2 data-ha-exclude="" id="double-bill-pocket-bifold">double bill pocket bifold</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/brookes-cuff-bracelets/` was built on 2026-02-20T01:52:49.455Z -->
-<body>
-</body></body>
+    <!-- This page `/brookes-cuff-bracelets/` was built on 2026-03-01T22:40:49.396Z -->
+  </body>
+</html>

_site/brookes-notebook/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>brooke&amp;#39;s notebook | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="brooke&#39;s notebook">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/brooke-notebook.jpg">
-  <meta property="og:image:alt" content="A six panel collage showing the covers, endpapers, and some of the pages of a notebook.">
-  
+<title>brooke&amp;#39;s notebook | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="brooke&#39;s notebook">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/brooke-notebook.jpg">
+<meta property="og:image:alt" content="A six panel collage showing the covers, endpapers, and some of the pages of a notebook.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1249,16 +1470,75 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/blue-and-brown-leather-journal/">
+			
+			<img src="/img/blue-brown-leather-journal.jpg" alt="A three panel collage showcasing a blue and brown leather-covered journal." loading="lazy" decoding="async" width="1000" height="1776">
+			
+			<h2 data-ha-exclude="" id="blue-and-brown-leather-journal">blue and brown leather journal</h2>
+			<ul class="postlist-tags">
+				
+				<li>book</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/butch-hands-pattern/">
+			
+			<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="butch-hands-pattern">butch hands pattern</h2>
+			<ul class="postlist-tags">
+				
+				<li>knit</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/azure-locations-and-file-crawling/">
+			
+			<img src="/img/azure-locations.jpg" alt="A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of resources applicable to a specific resource type" loading="lazy" decoding="async" width="1000" height="827">
+			
+			<h2 data-ha-exclude="" id="azure-locations-and-file-crawling">azure locations and file crawling</h2>
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1277,6 +1557,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/brookes-notebook/` was built on 2026-02-20T01:52:49.435Z -->
-<body>
-</body></body>
+    <!-- This page `/brookes-notebook/` was built on 2026-03-01T22:40:49.394Z -->
+  </body>
+</html>

_site/brookes-scarf/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>brooke&amp;#39;s scarf | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="brooke&#39;s scarf">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/brooke-scarf.jpg">
-  <meta property="og:image:alt" content="A diaphanous knit lacework scarf draped over the back of a chair. It is split down the long way into two colors - one tinted orange and one tinted mint blue. Both colors, the orange and the blue, are held double with the same variegated gray, making the piece more cohesive. The yarn overs in the lacework create airy repeating holes.">
-  
+<title>brooke&amp;#39;s scarf | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="brooke&#39;s scarf">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/brooke-scarf.jpg">
+<meta property="og:image:alt" content="A diaphanous knit lacework scarf draped over the back of a chair. It is split down the long way into two colors - one tinted orange and one tinted mint blue. Both colors, the orange and the blue, are held double with the same variegated gray, making the piece more cohesive. The yarn overs in the lacework create airy repeating holes.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1241,16 +1462,73 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/brookes-socks/">
+			
+			<img src="/img/brooke-socks.jpg" alt="Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="brookes-socks">brooke&#39;s socks</h2>
+			<ul class="postlist-tags">
+				
+				<li>knit</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/sideways-canvas-shirt/">
+			
+			<img src="/img/sideways-canvas.jpg" alt="someone&#39;s torso in a knitted short sleeve shirt. the front is teal, and the bit of back we can see is mustard yellow. looking closely, it&#39;s notable that the stitches are turned 90 degrees from a standard knit garment." loading="lazy" decoding="async" width="1000" height="1338">
+			
+			<h2 data-ha-exclude="" id="sideways-canvas-shirt">sideways canvas shirt</h2>
+			<ul class="postlist-tags">
+				
+				<li>knit</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/pride-dice-bags/">
+			
+			<img src="/img/pride-dice-bags.jpg" alt="Several knitted drawstring dice bags sit in front of a bookshelf. They are in different pride flag colors; from right to left (skipping a few duplicates) bisexual, lesbian, nonbinary, trans, and genderqueer. The trans-colored dice bag in the center opens towards the camera, showing a variety of colorful dice inside." loading="lazy" decoding="async" width="1000" height="500">
+			
+			<h2 data-ha-exclude="" id="pride-dice-bags">pride dice bags</h2>
+			<ul class="postlist-tags">
+				
+				<li>knit</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1269,6 +1547,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/brookes-scarf/` was built on 2026-02-20T01:52:49.463Z -->
-<body>
-</body></body>
+    <!-- This page `/brookes-scarf/` was built on 2026-03-01T22:40:49.407Z -->
+  </body>
+</html>

_site/brookes-socks/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>brooke&amp;#39;s socks | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="brooke&#39;s socks">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/brooke-socks.jpg">
-  <meta property="og:image:alt" content="Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray.">
-  
+<title>brooke&amp;#39;s socks | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="brooke&#39;s socks">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/brooke-socks.jpg">
+<meta property="og:image:alt" content="Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,75 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/sideways-canvas-shirt/">
+			
+			<img src="/img/sideways-canvas.jpg" alt="someone&#39;s torso in a knitted short sleeve shirt. the front is teal, and the bit of back we can see is mustard yellow. looking closely, it&#39;s notable that the stitches are turned 90 degrees from a standard knit garment." loading="lazy" decoding="async" width="1000" height="1338">
+			
+			<h2 data-ha-exclude="" id="sideways-canvas-shirt">sideways canvas shirt</h2>
+			<ul class="postlist-tags">
+				
+				<li>knit</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/on-the-shoulders-of-giants/">
+			
+			<img src="/img/on-the-shoulders.jpg" alt="ok so. five image collage showing the front, 3 inner spreads, and back of a riso-printed zine in green and light blue. it&#39;s called &#39;on the shoulders of giants&#39; and it&#39;s about a knitting technique I learned from Stephen west and how I built on that technique. it talks about joining two adjacent panels without seaming, instead knitting the second panel onto the selvedge of the first. then it uses that technique to approach two panels knit with significantly different weights of yarn" loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="on-the-shoulders-of-giants">on the shoulders of giants</h2>
+			<ul class="postlist-tags">
+				
+				<li>zine</li>
+				
+				<li>knit</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/butch-hands-pattern/">
+			
+			<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="butch-hands-pattern">butch hands pattern</h2>
+			<ul class="postlist-tags">
+				
+				<li>knit</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1542,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/brookes-socks/` was built on 2026-02-20T01:52:49.435Z -->
-<body>
-</body></body>
+    <!-- This page `/brookes-socks/` was built on 2026-03-01T22:40:49.393Z -->
+  </body>
+</html>

_site/brookes-suspenders/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>brooke&amp;#39;s suspenders | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="brooke&#39;s suspenders">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/brooke-suspenders.jpg">
-  <meta property="og:image:alt" content="a two image collage showing the front and back of a person, neck to waist. she&#39;s wearing leather suspenders with a button attachment, buckles for adjustment, and a stitched diamond where the straps cross in the back.">
-  
+<title>brooke&amp;#39;s suspenders | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="brooke&#39;s suspenders">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/brooke-suspenders.jpg">
+<meta property="og:image:alt" content="a two image collage showing the front and back of a person, neck to waist. she&#39;s wearing leather suspenders with a button attachment, buckles for adjustment, and a stitched diamond where the straps cross in the back.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/vertical-zipper-card-wallet/">
+			
+			<img src="/img/vertical-zipper-card-wallet.jpg" alt="A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="vertical-zipper-card-wallet">vertical zipper card wallet</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/o-ring-bracelet/">
+			
+			<img src="/img/oring-bracelet.jpg" alt="A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps." loading="lazy" decoding="async" width="900" height="1200">
+			
+			<h2 data-ha-exclude="" id="o-ring-bracelet">o-ring bracelet</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/leather-lighter-case/">
+			
+			<img src="/img/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="leather-lighter-case">leather lighter case</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/brookes-suspenders/` was built on 2026-02-20T01:52:49.463Z -->
-<body>
-</body></body>
+    <!-- This page `/brookes-suspenders/` was built on 2026-03-01T22:40:49.406Z -->
+  </body>
+</html>

_site/brown-creeper/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>brown creeper | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="brown creeper">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/brown-creeper-print.jpg">
-  <meta property="og:image:alt" content="2 copies of the same print side by side. In yellow, black, and purple ink, a brown creeper, a small bird, is depicted, well camouflaged against a tree trunk.">
-  
+<title>brown creeper | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="brown creeper">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/brown-creeper-print.jpg">
+<meta property="og:image:alt" content="2 copies of the same print side by side. In yellow, black, and purple ink, a brown creeper, a small bird, is depicted, well camouflaged against a tree trunk.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1235,16 +1456,73 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/kniphofia/">
+			
+			<img src="/img/kniphofia-print.jpg" alt="A print of a brightly colored flower in 4 layers of color" loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="kniphofia">kniphofia</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/tiny-portraits/">
+			
+			<img src="/img/tiny-portrait-stamps.jpg" alt="A collage showing various small (around an inch) stamps that depict people or animals." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="tiny-portraits">tiny portraits</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/greeting-quorbs/">
+			
+			<img src="/img/greeting-quorbs.jpg" alt="A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="greeting-quorbs">greeting quorbs</h2>
+			<ul class="postlist-tags">
+				
+				<li>card</li>
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1263,6 +1541,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/brown-creeper/` was built on 2026-02-20T01:52:49.460Z -->
-<body>
-</body></body>
+    <!-- This page `/brown-creeper/` was built on 2026-03-01T22:40:49.402Z -->
+  </body>
+</html>

_site/butch-hands-pattern/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>butch hands pattern | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="butch hands pattern">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/butch-hands.jpg">
-  <meta property="og:image:alt" content="Hands wearing a pair of pink and grey gloves with convertable mitten tops.">
-  
+<title>butch hands pattern | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="butch hands pattern">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/butch-hands.jpg">
+<meta property="og:image:alt" content="Hands wearing a pair of pink and grey gloves with convertable mitten tops.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1316,16 +1537,73 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/brookes-socks/">
+			
+			<img src="/img/brooke-socks.jpg" alt="Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="brookes-socks">brooke&#39;s socks</h2>
+			<ul class="postlist-tags">
+				
+				<li>knit</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/azure-locations-and-file-crawling/">
+			
+			<img src="/img/azure-locations.jpg" alt="A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of resources applicable to a specific resource type" loading="lazy" decoding="async" width="1000" height="827">
+			
+			<h2 data-ha-exclude="" id="azure-locations-and-file-crawling">azure locations and file crawling</h2>
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/acadia-mitts/">
+			
+			<img src="/img/acadia-mitts.jpg" alt="a hand wearing a knitted fingerless mitten. it&#39;s knit in a slubby, almost tweedy yarn, with the body being blue grey stockinette and the cuffs and tips a vibrant green rib." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="acadia-mitts">acadia mitts</h2>
+			<ul class="postlist-tags">
+				
+				<li>knit</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1344,6 +1622,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/butch-hands-pattern/` was built on 2026-02-20T01:52:49.436Z -->
-<body>
-</body></body>
+    <!-- This page `/butch-hands-pattern/` was built on 2026-03-01T22:40:49.417Z -->
+  </body>
+</html>

_site/chanterelle/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>chanterelle | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="chanterelle">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/chanterelle-print.jpg">
-  <meta property="og:image:alt" content="A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient.">
-  
+<title>chanterelle | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="chanterelle">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/chanterelle-print.jpg">
+<meta property="og:image:alt" content="A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1246,16 +1467,79 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/tiny-portraits/">
+			
+			<img src="/img/tiny-portrait-stamps.jpg" alt="A collage showing various small (around an inch) stamps that depict people or animals." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="tiny-portraits">tiny portraits</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/greeting-loons/">
+			
+			<img src="/img/greeting-loons.jpg" alt="A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="greeting-loons">greeting loons</h2>
+			<ul class="postlist-tags">
+				
+				<li>card</li>
+				
+				<li>print</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/trans-the-world/">
+			
+			<img src="/img/trans-the-world-print.jpg" alt="A print that reads &#39;trans the world&#39; surrounding an image of a globe and a trans symbol. It&#39;s in a ping-to-blue gradient." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="trans-the-world">trans the world</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>shirt</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1274,6 +1558,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/chanterelle/` was built on 2026-02-20T01:52:49.436Z -->
-<body>
-</body></body>
+    <!-- This page `/chanterelle/` was built on 2026-03-01T22:40:49.417Z -->
+  </body>
+</html>

_site/charlie-the-alpaca-handspun/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>charlie the alpaca handspun | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="charlie the alpaca handspun">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/charlie-alpaca-handspun.jpg">
-  <meta property="og:image:alt" content="one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight">
-  
+<title>charlie the alpaca handspun | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="charlie the alpaca handspun">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/charlie-alpaca-handspun.jpg">
+<meta property="og:image:alt" content="one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1225,8 +1446,8 @@ export { HeadingAnchors }</script>
     
     
     <li class="newer">
-      <a href="/crow/">
-        crow <i class="fa-solid fa-hand-point-right" aria-hidden="true"></i>
+      <a href="/screen-reader-optimizations/">
+        screen reader optimizations <i class="fa-solid fa-hand-point-right" aria-hidden="true"></i>
       </a>
     </li>
     
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/handcombed-jacobs-handspun/">
+			
+			<img src="/img/handcombed-jacobs.jpg" alt="a skein of dark grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="handcombed-jacobs-handspun">handcombed jacobs handspun</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/orion-handspun/">
+			
+			<img src="/img/orion-handspun.jpg" alt="3 skeins of handspun yarn, 1 large and 2 small. One of the small skeins is a little more inconsistent weight than the other two - this one was spun on drop spindle about 2 years ago. The other two are about a sport or maybe a DK weight. All three are a gold colorway with tiny hints of orange and a pale light green." loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="orion-handspun">orion handspun</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/petrichor-handspun/">
+			
+			<img src="/img/petrichor-handspun.jpg" alt="3 skeins of handspun yarn, 2 large and 1 small. the large ones are a rich earth-tone blend of reds, pinks, browns, and hints of green and gold. the smaller skein is similar but with a decidedly greener hue" loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="petrichor-handspun">petrichor handspun</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/charlie-the-alpaca-handspun/` was built on 2026-02-20T01:52:49.466Z -->
-<body>
-</body></body>
+    <!-- This page `/charlie-the-alpaca-handspun/` was built on 2026-03-01T22:40:49.412Z -->
+  </body>
+</html>

_site/circle-bag/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>circle bag | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="circle bag">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/circle-bag.jpg">
-  <meta property="og:image:alt" content="A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap.">
-  
+<title>circle bag | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="circle bag">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/circle-bag.jpg">
+<meta property="og:image:alt" content="A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/brookes-collar/">
+			
+			<img src="/img/lined-shearling-collar.jpg" alt="A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="brookes-collar">brooke&#39;s collar</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/leather-keychains/">
+			
+			<img src="/img/leather-keychains.jpg" alt="A picture of multiple leather keychains sitting on a wood table. Many of them are simple rectangle shapes with stitching around the edge; a few are odd wavy or geometric shapes. A few say things like &#39;MOM&#39; or &#39;EGG&#39;." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="leather-keychains">leather keychains</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/mousie/">
+			
+			<img src="/img/mousie.jpg" alt="A cat in a sunbeam snuggles a little leather mouse-shaped cat toy." loading="lazy" decoding="async" width="1000" height="1499">
+			
+			<h2 data-ha-exclude="" id="mousie">mousie</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/circle-bag/` was built on 2026-02-20T01:52:49.452Z -->
-<body>
-</body></body>
+    <!-- This page `/circle-bag/` was built on 2026-03-01T22:40:49.429Z -->
+  </body>
+</html>

_site/colophon/index.html

@@ -1,35 +1,36 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>colophon | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="colophon">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
+<title>colophon | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="colophon">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+<meta name="generator" content="Eleventy v3.1.2">
 
-  
-  
-  
-  
 
-  <style>:root {
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>:root {
 	color-scheme: light dark;
 
 	--font-family: 'Atkinson Hyperlegible Next', sans-serif;
@@ -48,7 +49,7 @@
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -80,8 +81,6 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -102,7 +101,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -121,7 +120,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -130,6 +128,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -291,13 +293,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -313,9 +311,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -508,6 +507,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -684,7 +685,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -915,11 +916,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -927,35 +929,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -967,8 +969,8 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
 
 <heading-anchors content="<i class='fa-solid fa-anchor'></i>">
   <h1 id="colophon">colophon</h1>
@@ -986,14 +988,12 @@ export { HeadingAnchors }</script>
 
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon" aria-current="page">
+      <a href="/colophon/" aria-current="page">
         colophon
       </a>
     </li>
@@ -1012,6 +1012,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/colophon/` was built on 2026-02-20T01:52:49.431Z -->
-<body>
-</body></body>
+    <!-- This page `/colophon/` was built on 2026-03-01T22:40:49.432Z -->
+  </body>
+</html>

_site/coming-out/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>coming out | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="coming out">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/coming-out-card-print.jpg">
-  <meta property="og:image:alt" content="A card and print in the same design - a chick and a broken eggshell, and a simple font reading &#39;congrats on coming out of your shell&#39;">
-  
+<title>coming out | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="coming out">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/coming-out-card-print.jpg">
+<meta property="og:image:alt" content="A card and print in the same design - a chick and a broken eggshell, and a simple font reading &#39;congrats on coming out of your shell&#39;">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1250,16 +1471,77 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/junco/">
+			
+			<img src="/img/junco-print.jpg" alt="A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="junco">junco</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/fat-raccoon/">
+			
+			<img src="/img/fat-raccoon-print.jpg" alt="A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="fat-raccoon">fat raccoon</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>shirt</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/tiny-mushrooms/">
+			
+			<img src="/img/pixels-mushrooms.jpg" alt="3 tiny mushroom stamps next to their impressions. They are all about 1 inch square. There is a chanterelle in yellow, a russula in pink, and witch&#39;s hat mycena in indigo." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="tiny-mushrooms">tiny mushrooms</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1278,6 +1560,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/coming-out/` was built on 2026-02-20T01:52:49.446Z -->
-<body>
-</body></body>
+    <!-- This page `/coming-out/` was built on 2026-03-01T22:40:49.424Z -->
+  </body>
+</html>

_site/comparing-text-editors/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>comparing text editors | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="comparing text editors">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/horsetail.jpg">
-  <meta property="og:image:alt" content="Image unrelated to post. Close up on a horsetail plant&#39;s stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint.">
-  
+<title>comparing text editors | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="comparing text editors">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/horsetail.jpg">
+<meta property="og:image:alt" content="Image unrelated to post. Close up on a horsetail plant&#39;s stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1456,16 +1677,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/domain-and-site-setup/">
+			
+			<img src="/img/crinkly-mushrooms.jpg" alt="Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="domain-and-site-setup">domain and site setup</h2>
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/backend-accessibility/">
+			
+			<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility</h2>
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/screen-reader-optimizations/">
+			
+			<img src="/img/crow.jpg" alt="Image unrelated to post. A crow poses on driftwood against a whitish sky." loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="screen-reader-optimizations">screen reader optimizations</h2>
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1484,6 +1760,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/comparing-text-editors/` was built on 2026-02-20T01:52:49.465Z -->
-<body>
-</body></body>
+    <!-- This page `/comparing-text-editors/` was built on 2026-03-01T22:40:49.410Z -->
+  </body>
+</html>

_site/congrats-on-the-autism-adhd/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>congrats on the autism/adhd | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="congrats on the autism/adhd">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/congrats-on-the.jpg">
-  <meta property="og:image:alt" content="4 greeting cards propped up on a keyboard. On the right hand side, two cards read &#39;Congrats on the Autism&#39;; one in rainbow ink and one in black ink with a glittery gold shadow. On the left, two cards read &#39;Congrats on the ADHD&#39;; one in red and one in black, both with glittery pink shadows.">
-  
+<title>congrats on the autism/adhd | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="congrats on the autism/adhd">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/congrats-on-the.jpg">
+<meta property="og:image:alt" content="4 greeting cards propped up on a keyboard. On the right hand side, two cards read &#39;Congrats on the Autism&#39;; one in rainbow ink and one in black ink with a glittery gold shadow. On the left, two cards read &#39;Congrats on the ADHD&#39;; one in red and one in black, both with glittery pink shadows.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1247,16 +1468,77 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/big-pidge/">
+			
+			<img src="/img/big-pidge-print.jpg" alt="A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="big-pidge">big pidge</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>shirt</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/spotted-towhee/">
+			
+			<img src="/img/spotted-towhee-print.jpg" alt="A block print of a spotted towhee mid-leap." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="spotted-towhee">spotted towhee</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/fix-your-hearts/">
+			
+			<img src="/img/fix-your-hearts-print.jpg" alt="2 copies of the same print, one in black ink and one in dark teal. The print is text that reads &#39;fix your hearts or die&#39;, with the text shaped into a somewhat long and narrow heart." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="fix-your-hearts">fix your hearts</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1275,6 +1557,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/congrats-on-the-autism-adhd/` was built on 2026-02-20T01:52:49.433Z -->
-<body>
-</body></body>
+    <!-- This page `/congrats-on-the-autism-adhd/` was built on 2026-03-01T22:40:49.390Z -->
+  </body>
+</html>

_site/congrats-on-the-gay/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>congrats on the gay | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="congrats on the gay">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/congrats-on-the-gay.jpg">
-  <meta property="og:image:alt" content="A greeting card reading, in black. &#39;Congrats on the,&#39; and then, in rainbow, &#39;Gay!&#39;">
-  
+<title>congrats on the gay | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="congrats on the gay">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/congrats-on-the-gay.jpg">
+<meta property="og:image:alt" content="A greeting card reading, in black. &#39;Congrats on the,&#39; and then, in rainbow, &#39;Gay!&#39;">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1253,16 +1474,81 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/anarchy-autism/">
+			
+			<img src="/img/anarchy-autism-rainbow-print.jpg" alt="A print in rainbow ink that says autism with the anarchy A." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="anarchy-autism">anarchy autism</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>sticker</li>
+				
+				<li>shirt</li>
+				
+				<li>pin</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/coming-out/">
+			
+			<img src="/img/coming-out-card-print.jpg" alt="A card and print in the same design - a chick and a broken eggshell, and a simple font reading &#39;congrats on coming out of your shell&#39;" loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="coming-out">coming out</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/gender/">
+			
+			<img src="/img/gender-notes.png" alt="A page of handwritten notes with some loosely drawn charts, described further in the post." loading="lazy" decoding="async" width="865" height="1080">
+			
+			<h2 data-ha-exclude="" id="gender">gender?</h2>
+			<ul class="postlist-tags">
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1281,6 +1567,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/congrats-on-the-gay/` was built on 2026-02-20T01:52:49.436Z -->
-<body>
-</body></body>
+    <!-- This page `/congrats-on-the-gay/` was built on 2026-03-01T22:40:49.413Z -->
+  </body>
+</html>

_site/contact/index.html

@@ -1,35 +1,36 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>contact | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="contact">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
+<title>contact | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="contact">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+<meta name="generator" content="Eleventy v3.1.2">
 
-  
-  
-  
-  
 
-  <style>:root {
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>:root {
 	color-scheme: light dark;
 
 	--font-family: 'Atkinson Hyperlegible Next', sans-serif;
@@ -48,7 +49,7 @@
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -80,8 +81,6 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -102,7 +101,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -121,7 +120,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -130,6 +128,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -291,13 +293,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -313,9 +311,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -508,6 +507,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -684,7 +685,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -915,11 +916,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -927,35 +929,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-current="page" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee" aria-current="page">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -967,8 +969,8 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
 
 <heading-anchors content="<i class='fa-solid fa-anchor'></i>">
   <h1 id="contact">contact</h1>
@@ -1069,14 +1071,12 @@ export { HeadingAnchors }</script>
 
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1095,6 +1095,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/contact/` was built on 2026-02-20T01:52:49.432Z -->
-<body>
-</body></body>
+    <!-- This page `/contact/` was built on 2026-03-01T22:40:49.433Z -->
+  </body>
+</html>

_site/coral-reef-handspun/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>coral reef handspun | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="coral reef handspun">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/coral-reef-handspun.jpg">
-  <meta property="og:image:alt" content="2 skeins, one large and one small, of a heathered grey yarn with hints of blue and orange in about a sport or DK weight.">
-  
+<title>coral reef handspun | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="coral reef handspun">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/coral-reef-handspun.jpg">
+<meta property="og:image:alt" content="2 skeins, one large and one small, of a heathered grey yarn with hints of blue and orange in about a sport or DK weight.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/light-grey-jacobs-handspun/">
+			
+			<img src="/img/light-grey-jacobs.jpg" alt="a skein of light grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="light-grey-jacobs-handspun">light grey jacobs handspun</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/orion-handspun/">
+			
+			<img src="/img/orion-handspun.jpg" alt="3 skeins of handspun yarn, 1 large and 2 small. One of the small skeins is a little more inconsistent weight than the other two - this one was spun on drop spindle about 2 years ago. The other two are about a sport or maybe a DK weight. All three are a gold colorway with tiny hints of orange and a pale light green." loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="orion-handspun">orion handspun</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/handspun-yarn-in-party-mix-and-orange-gold/">
+			
+			<img src="/img/handspun0.jpg" alt="4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="handspun-yarn-in-party-mix-and-orange-gold">handspun yarn in party mix and orange-gold</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/coral-reef-handspun/` was built on 2026-02-20T01:52:49.465Z -->
-<body>
-</body></body>
+    <!-- This page `/coral-reef-handspun/` was built on 2026-03-01T22:40:49.410Z -->
+  </body>
+</html>

_site/crow/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>crow | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="crow">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/crow-print.jpg">
-  <meta property="og:image:alt" content="a block print in dark indigo ink on white paper depicting a perched crow looking over one shoulder. one side of the crow is lit with fine feather detail, and the other side is almost entirely in shadow.">
-  
+<title>crow | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="crow">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/crow-print.jpg">
+<meta property="og:image:alt" content="a block print in dark indigo ink on white paper depicting a perched crow looking over one shoulder. one side of the crow is lit with fine feather detail, and the other side is almost entirely in shadow.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1217,15 +1438,15 @@ export { HeadingAnchors }</script>
   <ol class="pagination post-pagination">
     
     <li class="older">
-      <a href="/charlie-the-alpaca-handspun/">
-        <i class="fa-solid fa-hand-point-left" aria-hidden="true"></i> charlie the alpaca handspun
+      <a href="/screen-reader-optimizations/">
+        <i class="fa-solid fa-hand-point-left" aria-hidden="true"></i> screen reader optimizations
       </a>
     </li>
     
     
     <li class="newer">
-      <a href="/screen-reader-optimizations/">
-        screen reader optimizations <i class="fa-solid fa-hand-point-right" aria-hidden="true"></i>
+      <a href="/eleventy-lessons/">
+        eleventy lessons <i class="fa-solid fa-hand-point-right" aria-hidden="true"></i>
       </a>
     </li>
     
@@ -1233,16 +1454,85 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/flicker/">
+			
+			<img src="/img/flicker-print.jpg" alt="A print in black, brown, and red ink of a northern flicker (a type of woodpecker). Viewed from the back, he is looking over his shoulder and upward towards something unseen above him (my bird feeder)." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="flicker">flicker</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>shirt</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/flatfish/">
+			
+			<img src="/img/flatfish-print.jpg" alt="A print of a simple flatfish design inked in sepia." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="flatfish">flatfish</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/trans-rights-skull/">
+			
+			<img src="/img/trans-rights-print.jpg" alt="A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads &#39;trans rights!&#39;" loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="trans-rights-skull">trans rights skull</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>sticker</li>
+				
+				<li>pin</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1261,6 +1551,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/crow/` was built on 2026-02-20T01:52:49.467Z -->
-<body>
-</body></body>
+    <!-- This page `/crow/` was built on 2026-03-01T22:40:49.412Z -->
+  </body>
+</html>

_site/designing-a-bag/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>designing a bag | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="designing a bag">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/shoelace-bag.jpg">
-  <meta property="og:image:alt" content="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don&#39;t slide out.">
-  
+<title>designing a bag | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="designing a bag">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/shoelace-bag.jpg">
+<meta property="og:image:alt" content="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don&#39;t slide out.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1250,16 +1471,73 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/zipper-bifold/">
+			
+			<img src="/img/zipper-bifold.jpg" alt="A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side." loading="lazy" decoding="async" width="1000" height="1777">
+			
+			<h2 data-ha-exclude="" id="zipper-bifold">zipper bifold</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/azure-locations-and-file-crawling/">
+			
+			<img src="/img/azure-locations.jpg" alt="A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of resources applicable to a specific resource type" loading="lazy" decoding="async" width="1000" height="827">
+			
+			<h2 data-ha-exclude="" id="azure-locations-and-file-crawling">azure locations and file crawling</h2>
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/soras-collar/">
+			
+			<img src="/img/sora-collar.jpg" alt="A collage showing a red and black leather dog collar tooled with roses and the name Sora. It&#39;s fully stitched with dark red stitching and has brass hardware." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="soras-collar">sora&#39;s collar</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1278,6 +1556,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/designing-a-bag/` was built on 2026-02-20T01:52:49.463Z -->
-<body>
-</body></body>
+    <!-- This page `/designing-a-bag/` was built on 2026-03-01T22:40:49.406Z -->
+  </body>
+</html>

_site/domain-and-site-setup/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>domain and site setup | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="domain and site setup">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/crinkly-mushrooms.jpg">
-  <meta property="og:image:alt" content="Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass.">
-  
+<title>domain and site setup | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="domain and site setup">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/crinkly-mushrooms.jpg">
+<meta property="og:image:alt" content="Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1285,16 +1506,75 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/screen-reader-optimizations/">
+			
+			<img src="/img/crow.jpg" alt="Image unrelated to post. A crow poses on driftwood against a whitish sky." loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="screen-reader-optimizations">screen reader optimizations</h2>
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/gender-in-data-models/">
+			
+			<img src="/img/peony.jpg" alt="Image unrelated to post. A light pink peony in full bloom, close up." loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="gender-in-data-models">gender in data models</h2>
+			<ul class="postlist-tags">
+				
+				<li>gender</li>
+				
+				<li>software</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/redirections/">
+			
+			<img src="/img/angle-brackets-uwu.jpg" alt="Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets." loading="lazy" decoding="async" width="1000" height="316">
+			
+			<h2 data-ha-exclude="" id="redirections">redirections</h2>
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1313,6 +1593,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/domain-and-site-setup/` was built on 2026-02-20T01:52:49.450Z -->
-<body>
-</body></body>
+    <!-- This page `/domain-and-site-setup/` was built on 2026-03-01T22:40:49.428Z -->
+  </body>
+</html>

_site/double-bill-pocket-bifold/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>double bill pocket bifold | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="double bill pocket bifold">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/double-bill-pocket-bifold.jpg">
-  <meta property="og:image:alt" content="A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket.">
-  
+<title>double bill pocket bifold | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="double bill pocket bifold">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/double-bill-pocket-bifold.jpg">
+<meta property="og:image:alt" content="A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/vix-collar/">
+			
+			<img src="/img/vix-collar.jpg" alt="A collar rests on a leather-wrapped lighter. It is lined with shearling and built of two other layers of leather - a wider mustard yellow layer and a thinner teal layer over that. the teal layer holds a heart shaped o-ring in place." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="vix-collar">vix collar</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/sunflower/">
+			
+			<img src="/img/sunflower.jpg" alt="A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center ." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="sunflower">sunflower</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/rachels-bracelets/">
+			
+			<img src="/img/rachel-bracelets.jpg" alt="Two pink leather bracelets with stainless steel hardware and aqua stitching." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="rachels-bracelets">rachel&#39;s bracelets</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/double-bill-pocket-bifold/` was built on 2026-02-20T01:52:49.448Z -->
-<body>
-</body></body>
+    <!-- This page `/double-bill-pocket-bifold/` was built on 2026-03-01T22:40:49.426Z -->
+  </body>
+</html>

_site/dragon-mask/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>dragon mask | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="dragon mask">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/dragon-mask.jpg">
-  <meta property="og:image:alt" content="lee (a white person with glasses and a side shave) holds up a leather dragon mask in black and dark green. ze sticks hir tongue out at it.">
-  
+<title>dragon mask | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="dragon mask">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/dragon-mask.jpg">
+<meta property="og:image:alt" content="lee (a white person with glasses and a side shave) holds up a leather dragon mask in black and dark green. ze sticks hir tongue out at it.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1239,16 +1460,73 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/leather-lighter-case/">
+			
+			<img src="/img/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="leather-lighter-case">leather lighter case</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/fishhook-pride-keychains/">
+			
+			<img src="/img/fishhook-keychain-nonbinary.jpg" alt="a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="fishhook-pride-keychains">fishhook pride keychains</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/leatherworking-favorites/">
+			
+			<img src="/img/leather-harness-wip.jpg" alt="two pieces of a chest harness sitting on a messy workbench. both pieces are about 8 inches long total and consist of two large o-rings joined by a dark teal leather strap. the o rings and rivets are matte black." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="leatherworking-favorites">leatherworking favorites</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1267,6 +1545,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/dragon-mask/` was built on 2026-02-20T01:52:49.463Z -->
-<body>
-</body></body>
+    <!-- This page `/dragon-mask/` was built on 2026-03-01T22:40:49.407Z -->
+  </body>
+</html>

_site/dyeing-fiber/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>dyeing fiber | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="dyeing fiber">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/dyed-fiber.jpg">
-  <meta property="og:image:alt" content="4oz of yarn and a pound of wool, chunked out, drying on a drying rack outdoors. the yarn and half the wool is a mix of teals and greens; the other half of the wool is a beautiful orange-gold.">
-  
+<title>dyeing fiber | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="dyeing fiber">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/dyed-fiber.jpg">
+<meta property="og:image:alt" content="4oz of yarn and a pound of wool, chunked out, drying on a drying rack outdoors. the yarn and half the wool is a mix of teals and greens; the other half of the wool is a beautiful orange-gold.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/handspun-yarn-in-party-mix-and-orange-gold/">
+			
+			<img src="/img/handspun0.jpg" alt="4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="handspun-yarn-in-party-mix-and-orange-gold">handspun yarn in party mix and orange-gold</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/icelandic-lamb-handspun/">
+			
+			<img src="/img/icelandic-lamb.jpg" alt="a skein of black handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="icelandic-lamb-handspun">icelandic lamb handspun</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/spinners-dream-handspun/">
+			
+			<img src="/img/spinners-dream-handspun.jpg" alt="a skein of a lightly variegated grey yarn in about a sport or DK weight." loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="spinners-dream-handspun">spinner&#39;s dream handspun</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/dyeing-fiber/` was built on 2026-02-20T01:52:49.466Z -->
-<body>
-</body></body>
+    <!-- This page `/dyeing-fiber/` was built on 2026-03-01T22:40:49.411Z -->
+  </body>
+</html>

_site/ecommerce-options/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>ecommerce options | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="ecommerce options">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/loon.jpg">
-  <meta property="og:image:alt" content="Image unrelated to post. A loon rearing up with eir wings spread on a calm lake.">
-  
+<title>ecommerce options | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="ecommerce options">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/loon.jpg">
+<meta property="og:image:alt" content="Image unrelated to post. A loon rearing up with eir wings spread on a calm lake.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1266,16 +1487,21 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1294,6 +1520,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/ecommerce-options/` was built on 2026-02-20T01:52:49.447Z -->
-<body>
-</body></body>
+    <!-- This page `/ecommerce-options/` was built on 2026-03-01T22:40:49.425Z -->
+  </body>
+</html>

_site/eight-pocket-bifold/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>eight pocket bifold | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="eight pocket bifold">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/eight-pocket-bifold.jpg">
-  <meta property="og:image:alt" content="A 3-picture collage showing a hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a asymmetrical interior with a hidden pocket and 3 card pockets on the right, and a hidden pocket and 2 card pockets on the left. The left front pocket has a small naturally occuring hole.">
-  
+<title>eight pocket bifold | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="eight pocket bifold">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/eight-pocket-bifold.jpg">
+<meta property="og:image:alt" content="A 3-picture collage showing a hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a asymmetrical interior with a hidden pocket and 3 card pockets on the right, and a hidden pocket and 2 card pockets on the left. The left front pocket has a small naturally occuring hole.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/vertical-zipper-card-wallet/">
+			
+			<img src="/img/vertical-zipper-card-wallet.jpg" alt="A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="vertical-zipper-card-wallet">vertical zipper card wallet</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/lobstah/">
+			
+			<img src="/img/lobstah.jpg" alt="Two red leather lobster ornaments, about 4-5 in long each." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="lobstah">lobstah</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/bag-strap/">
+			
+			<img src="/img/bag-strap.jpg" alt="A nylon webbing shoulder strap in bright teal with clips on each end." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="bag-strap">bag strap</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/eight-pocket-bifold/` was built on 2026-02-20T01:52:49.448Z -->
-<body>
-</body></body>
+    <!-- This page `/eight-pocket-bifold/` was built on 2026-03-01T22:40:49.427Z -->
+  </body>
+</html>

_site/euphorbia/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>euphorbia | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="euphorbia">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/euphorbia-print.jpg">
-  <meta property="og:image:alt" content="A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers.">
-  
+<title>euphorbia | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="euphorbia">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/euphorbia-print.jpg">
+<meta property="og:image:alt" content="A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,75 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/hair/">
+			
+			<img src="/img/hair-print.jpg" alt="A print in black ink of belly hair." loading="lazy" decoding="async" width="1000" height="710">
+			
+			<h2 data-ha-exclude="" id="hair">hair</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/artisans-cooperative-shirts/">
+			
+			<img src="/img/artisans-coop-shirt.jpg" alt="A black tank top laid on a desk. In white ink it reads &#39;Artisans Cooperative&#39; with a print of some chickens and a quail." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="artisans-cooperative-shirts">artisans cooperative shirts</h2>
+			<ul class="postlist-tags">
+				
+				<li>shirt</li>
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/tiny-portraits/">
+			
+			<img src="/img/tiny-portrait-stamps.jpg" alt="A collage showing various small (around an inch) stamps that depict people or animals." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="tiny-portraits">tiny portraits</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1542,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/euphorbia/` was built on 2026-02-20T01:52:49.459Z -->
-<body>
-</body></body>
+    <!-- This page `/euphorbia/` was built on 2026-03-01T22:40:49.400Z -->
+  </body>
+</html>

_site/fat-raccoon/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>fat raccoon | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="fat raccoon">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/fat-raccoon-print.jpg">
-  <meta property="og:image:alt" content="A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer.">
-  
+<title>fat raccoon | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="fat raccoon">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/fat-raccoon-print.jpg">
+<meta property="og:image:alt" content="A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1251,16 +1472,77 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/artisans-cooperative-shirts/">
+			
+			<img src="/img/artisans-coop-shirt.jpg" alt="A black tank top laid on a desk. In white ink it reads &#39;Artisans Cooperative&#39; with a print of some chickens and a quail." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="artisans-cooperative-shirts">artisans cooperative shirts</h2>
+			<ul class="postlist-tags">
+				
+				<li>shirt</li>
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/happy-bihrtday/">
+			
+			<img src="/img/happy-bihrtday-card-print.jpg" alt="A card and print in the same design - a bouncy, cheery font reading &#39;happy biHRTday&#39;" loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="happy-bihrtday">happy biHRTday</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/loon/">
+			
+			<img src="/img/loon-print.jpg" alt="A print of a loon rearing up with wings spread" loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="loon">loon</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1279,6 +1561,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/fat-raccoon/` was built on 2026-02-20T01:52:49.441Z -->
-<body>
-</body></body>
+    <!-- This page `/fat-raccoon/` was built on 2026-03-01T22:40:49.421Z -->
+  </body>
+</html>

_site/fd-signifier-and-oppositional-sexism/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>fd signifier &amp;amp; oppositional sexism | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="fd signifier &amp; oppositional sexism">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/sheep.jpg">
-  <meta property="og:image:alt" content="Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field.">
-  
+<title>fd signifier &amp;amp; oppositional sexism | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="fd signifier &amp; oppositional sexism">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/sheep.jpg">
+<meta property="og:image:alt" content="Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1268,16 +1489,85 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/proud-dad-wallet/">
+			
+			<img src="/img/proud-dad-wallet.jpg" alt="A brown leather wallet with a subtle trans flag stitching across the top." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="proud-dad-wallet">proud dad wallet</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/happy-bihrtday/">
+			
+			<img src="/img/happy-bihrtday-card-print.jpg" alt="A card and print in the same design - a bouncy, cheery font reading &#39;happy biHRTday&#39;" loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="happy-bihrtday">happy biHRTday</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/girldick/">
+			
+			<img src="/img/girldick-shirt.jpg" alt="A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="girldick">girldick</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>sticker</li>
+				
+				<li>shirt</li>
+				
+				<li>pin</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1296,6 +1586,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/fd-signifier-and-oppositional-sexism/` was built on 2026-02-20T01:52:49.458Z -->
-<body>
-</body></body>
+    <!-- This page `/fd-signifier-and-oppositional-sexism/` was built on 2026-03-01T22:40:49.399Z -->
+  </body>
+</html>

_site/fedizinefest-2025/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>fediZineFest 2025 | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="fediZineFest 2025">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/fedizinefest-2025.png">
-  <meta property="og:image:alt" content="A logo in purple, yellow, blue, and green. A piece of paper folded into 8 sections reads FEDI ZINE; it resembles the classic folding pattern of a simple 8-page zine made from printer paper. Next to it, a fully folded zine reads fest 2025.">
-  
+<title>fediZineFest 2025 | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="fediZineFest 2025">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/fedizinefest-2025.png">
+<meta property="og:image:alt" content="A logo in purple, yellow, blue, and green. A piece of paper folded into 8 sections reads FEDI ZINE; it resembles the classic folding pattern of a simple 8-page zine made from printer paper. Next to it, a fully folded zine reads fest 2025.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,79 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/gender-as-a-proxy-variable/">
+			
+			<img src="/img/gender-zine-cover.png" alt="Part of a scan of the cover of my zine, Gender as a Proxy Variable. It shows the title and a bit of handsewn binding." loading="lazy" decoding="async" width="1000" height="444">
+			
+			<h2 data-ha-exclude="" id="gender-as-a-proxy-variable">gender as a proxy variable</h2>
+			<ul class="postlist-tags">
+				
+				<li>gender</li>
+				
+				<li>zine</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/on-the-shoulders-of-giants/">
+			
+			<img src="/img/on-the-shoulders.jpg" alt="ok so. five image collage showing the front, 3 inner spreads, and back of a riso-printed zine in green and light blue. it&#39;s called &#39;on the shoulders of giants&#39; and it&#39;s about a knitting technique I learned from Stephen west and how I built on that technique. it talks about joining two adjacent panels without seaming, instead knitting the second panel onto the selvedge of the first. then it uses that technique to approach two panels knit with significantly different weights of yarn" loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="on-the-shoulders-of-giants">on the shoulders of giants</h2>
+			<ul class="postlist-tags">
+				
+				<li>zine</li>
+				
+				<li>knit</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/kestrel-zine/">
+			
+			<img src="/img/kestrel-zine.jpg" alt="A 5 photo collage showing the front and back cover as well as 3 full spreads of a folded zine about Kestrel, my dog, who is a 65lb Malinois with a goofy smile and floppy ears. it is printed in two layers of color, blue and orange, and each image depicts Kestrel in various posts... alert and watchful, resting, looking mopey, wearing a sweatshirt." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="kestrel-zine">kestrel zine</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>zine</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1546,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/fedizinefest-2025/` was built on 2026-02-20T01:52:49.459Z -->
-<body>
-</body></body>
+    <!-- This page `/fedizinefest-2025/` was built on 2026-03-01T22:40:49.401Z -->
+  </body>
+</html>

_site/feed.xml

@@ -4,16 +4,320 @@
   <subtitle>Lee Cattarin... on the internet!</subtitle>
   <link href="https://leecat.art/feed.xml" rel="self" />
   <link href="https://leecat.art/" />
-  <updated>2026-02-19T21:09:51Z</updated>
+  <updated>2026-02-19T00:00:00Z</updated>
   <id>https://leecat.art/</id>
   <author>
     <name>Lee Cattarin</name>
     <email>lee.cattarin@gmail.com</email>
   </author>
+  <entry>
+    <title>eleventy lessons</title>
+    <link href="https://leecat.art/eleventy-lessons/" />
+    <updated>2026-02-19T00:00:00Z</updated>
+    <id>https://leecat.art/eleventy-lessons/</id>
+    <content type="html">&lt;p&gt;recently I wrote &lt;em&gt;several&lt;/em&gt; sites using &lt;a href=&quot;https://www.11ty.dev/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Eleventy&lt;/a&gt; (4? 5?). Including, over the past few days, rewriting this one! That&#39;s right, if you&#39;re reading this, we&#39;re now running on 11ty and hosted by &lt;a href=&quot;https://heckin.technology/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;heckin.technology&lt;/a&gt;. See ya, GitHub. Won&#39;t miss ya.&lt;/p&gt;
+&lt;p&gt;I&#39;ve compiled some of the things I&#39;ve learned in a standalone site: &lt;a href=&quot;https://inherentlee.codeberg.page/lessons/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;11ty Lessons&lt;/a&gt;.&lt;/p&gt;
+&lt;p&gt;however, since I don&#39;t know how much I&#39;ll focus on that specific site - it is mostly a sample - I am re-publishing the most useful information here. I&#39;ll skip the intro to Markdown content. I&#39;m also going to update them where I&#39;ve learned more or to better match what&#39;s represented on this site.&lt;/p&gt;
+&lt;p&gt;this will comprise of 4 parts: &lt;a href=&quot;https://leecat.art/eleventy-lessons/#related-posts&quot;&gt;related posts&lt;/a&gt;, &lt;a href=&quot;https://leecat.art/eleventy-lessons/#featured-images&quot;&gt;featured images&lt;/a&gt;, &lt;a href=&quot;https://leecat.art/eleventy-lessons/#pagination&quot;&gt;pagination&lt;/a&gt;, and &lt;a href=&quot;https://leecat.art/eleventy-lessons/#tag-image-preview&quot;&gt;tag image preview&lt;/a&gt;. Feel free to jump ahead, as none depend on the others.&lt;/p&gt;
+&lt;hr&gt;
+&lt;h2 id=&quot;related-posts&quot;&gt;related posts&lt;/h2&gt;
+&lt;p&gt;by default, the &lt;a href=&quot;https://leecat.art/eleventy-lessons/github.com/11ty/eleventy-base-blog&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Eleventy base blog&lt;/a&gt; comes with pagination between posts. Post 2 can take you to posts 1 and 3, etc.&lt;/p&gt;
+&lt;p&gt;while that is useful for &lt;em&gt;this&lt;/em&gt; site, when building another site I wanted to see a couple randomly-suggested posts that shared 1 or more tags.&lt;/p&gt;
+&lt;p&gt;I started by referring to &lt;a href=&quot;https://github.com/11ty/eleventy/discussions/2534&quot; target=&quot;_blank rel=external&amp;quot;&quot;&gt;this GitHub issue about related posts&lt;/a&gt;. I had to fix a few errors that arose from the suggested code.&lt;/p&gt;
+&lt;p&gt;I also wanted to make three changes:&lt;/p&gt;
+&lt;ol&gt;
+&lt;li&gt;I didn&#39;t want to just see posts that shared &lt;em&gt;all&lt;/em&gt; tags, but rather posts that shared &lt;em&gt;any&lt;/em&gt; tag&lt;/li&gt;
+&lt;li&gt;I wanted to randomly add a few posts instead of just getting whatever was first (with a shared tag) in the post order&lt;/li&gt;
+&lt;li&gt;I wanted to exclude the posts that I could reach with between-post pagination&lt;/li&gt;
+&lt;/ol&gt;
+&lt;h3 id=&quot;filters-js&quot;&gt;filters.js&lt;/h3&gt;
+&lt;p&gt;after adjusting for those needs, I had the following in &lt;code&gt;filters.js&lt;/code&gt;:&lt;/p&gt;
+&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addFilter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;excludeFromCollection&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;collection&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; urls&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;ctx&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;page&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;url&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; collection&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;filter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;post&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; urls&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;indexOf&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;post&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;url&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+
+eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addFilter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;filterByTags&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;collection&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;requiredTags&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; collection&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;filter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;post&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; requiredTags&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;flat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;some&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;tag&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; post&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;tags&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;includes&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tag&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+
+eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addFilter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;randomize&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;array&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+  &lt;span class=&quot;token comment&quot;&gt;// Create a copy of the array to avoid modifying the original&lt;/span&gt;
+  &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; shuffledArray &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; array&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;slice&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+
+  &lt;span class=&quot;token comment&quot;&gt;// Fisher-Yates shuffle algorithm&lt;/span&gt;
+  &lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; i &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; shuffledArray&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;length &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; i &lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; i&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+      &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; j &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; Math&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;floor&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;Math&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;random&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;i &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+      &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;shuffledArray&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;i&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; shuffledArray&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;j&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;shuffledArray&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;j&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; shuffledArray&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;i&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
+
+  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; shuffledArray&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;h3 id=&quot;post-njk&quot;&gt;post.njk&lt;/h3&gt;
+&lt;p&gt;I used this in my post layout. &lt;code&gt;filterTagList&lt;/code&gt; comes with the base blog by default, and removes the tags &amp;quot;posts&amp;quot; and &amp;quot;all.&amp;quot; &lt;code&gt;head&lt;/code&gt; also comes with the base blog. &lt;code&gt;postlist.njk&lt;/code&gt; is my modified-from-the-base-blog post layout.&lt;/p&gt;
+&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;{% set relevantTags = tags | filterTagList %}
+
+{% set olderPost = collections.posts | getPreviousCollectionItem %}
+{% set newerPost = collections.posts | getNextCollectionItem %}
+{% set urlsToExclude = [page.url, olderPost.url, newerPost.url]}
+
+{% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection(urlsToExclude) | randomize | head(3) %}
+{% if postlist.length %}
+&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;section&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;related-posts&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+	&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;related posts&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+  {% include &quot;postlist.njk&quot; %}
+&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;section&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+{% endif %}&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;and that sorts related posts.&lt;/p&gt;
+&lt;hr&gt;
+&lt;h2 id=&quot;featured-images&quot;&gt;featured images&lt;/h2&gt;
+&lt;p&gt;images in 11ty use the &lt;a href=&quot;https://www.11ty.dev/docs/plugins/image/#eleventy-transform&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Image Transform Plugin&lt;/a&gt;. I found it hard to find anything to reference while building this - a lot of sites in the template gallery are either text-heavy or not using the plugin - so I&#39;m reproducing what I&#39;ve got here for reference.&lt;/p&gt;
+&lt;h3 id=&quot;file-structure&quot;&gt;file structure&lt;/h3&gt;
+&lt;pre&gt;&lt;code&gt;content/
+|--img/
+|  |--sample-0.jpg
+|  |--sample-1.jpg
+|  `--etc
+|--posts/
+|  |--lesson-0-front-matter-and-urls.md
+|  |--lesson-1-headings-paragraphs-and-horizontal-lines.md
+|  `--etc
+`--etc
+&lt;/code&gt;&lt;/pre&gt;
+&lt;h3 id=&quot;front-matter&quot;&gt;front matter&lt;/h3&gt;
+&lt;p&gt;for any given post, my front matter references the image in this manner:&lt;/p&gt;
+&lt;pre&gt;&lt;code&gt;---
+image:
+  src: sample-0.jpg
+  alt: moss on a fencepost
+---
+&lt;/code&gt;&lt;/pre&gt;
+&lt;h3 id=&quot;image-html-transform&quot;&gt;image HTML transform&lt;/h3&gt;
+&lt;p&gt;As mentioned, there&#39;s a plugin for images. If you started with the base blog, in &lt;code&gt;eleventy.config.js&lt;/code&gt;, you&#39;ll probably find a chunk of code similar to this already in place:&lt;/p&gt;
+&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addPlugin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;eleventyImageTransformPlugin&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+  &lt;span class=&quot;token literal-property property&quot;&gt;formats&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;auto&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
+
+  &lt;span class=&quot;token literal-property property&quot;&gt;widths&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;640&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
+  &lt;span class=&quot;token literal-property property&quot;&gt;failOnError&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
+  &lt;span class=&quot;token literal-property property&quot;&gt;htmlOptions&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+    &lt;span class=&quot;token literal-property property&quot;&gt;imgAttributes&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+      &lt;span class=&quot;token comment&quot;&gt;// e.g. &amp;lt;img loading decoding&gt; assigned on the HTML tag will override these values.&lt;/span&gt;
+      &lt;span class=&quot;token literal-property property&quot;&gt;loading&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;lazy&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
+      &lt;span class=&quot;token literal-property property&quot;&gt;decoding&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;async&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
+    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
+  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
+
+  &lt;span class=&quot;token literal-property property&quot;&gt;sharpOptions&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+    &lt;span class=&quot;token literal-property property&quot;&gt;animated&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
+  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
+&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;setting &lt;code&gt;formats&lt;/code&gt; to &amp;quot;auto&amp;quot; helps - use whatever type of image you want, get that type out. The default settings that came with the Eleventy base blog didn&#39;t set a &lt;code&gt;width&lt;/code&gt;, which I wanted (by default, images off my camera - like the hellebore featured image for this post - are almost 5k pixels wide). I also found it helpful to set &lt;code&gt;failOnError&lt;/code&gt; to true for a little more feedback.&lt;/p&gt;
+&lt;blockquote&gt;
+&lt;p&gt;NOTE: It sure seems like Eleventy will fail your image processing if there&#39;s no alt text. While admirable, it would be nice if I could find any documentation for this!&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;h3 id=&quot;passthrough-copy&quot;&gt;passthrough copy&lt;/h3&gt;
+&lt;p&gt;as I worked through this, I thought I needed a passthrough copy for a while. You don&#39;t - just let the plugin do its thing.&lt;/p&gt;
+&lt;h3 id=&quot;templating&quot;&gt;templating&lt;/h3&gt;
+&lt;p&gt;I needed images to show up in 3 places:&lt;/p&gt;
+&lt;ul&gt;
+&lt;li&gt;In the lists of posts on the home page, I wanted each post to show its featured image&lt;/li&gt;
+&lt;li&gt;In the &amp;quot;related posts&amp;quot; section on each individual post, I wanted each related post to show its featured image&lt;/li&gt;
+&lt;li&gt;And of course, I wanted the post to show its own featured image&lt;/li&gt;
+&lt;/ul&gt;
+&lt;h3 id=&quot;home-page-and-related-posts&quot;&gt;home page and related posts&lt;/h3&gt;
+&lt;p&gt;both of these sections use the same template, which in my setup is called &lt;code&gt;postlist.njk&lt;/code&gt;. Within the relevant links, I added the following:&lt;/p&gt;
+&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;{% if post.data.image.src %}
+  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;img&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/img/{{ post.data.image.src }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;alt&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ post.data.image.alt }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+{% else %}
+  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;missing-image&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+{% endif %}&lt;/code&gt;&lt;/pre&gt;
+&lt;h3 id=&quot;post-body&quot;&gt;post body&lt;/h3&gt;
+&lt;p&gt;the post body looks similar:&lt;/p&gt;
+&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;{% if image.src %}
+&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;img&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;featured-img&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/posts/img/{{ image.src }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;alt&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ image.alt }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+{% endif %}&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;together, that sets up featured images for posts.&lt;/p&gt;
+&lt;hr&gt;
+&lt;h2 id=&quot;pagination&quot;&gt;pagination&lt;/h2&gt;
+&lt;h3 id=&quot;simple-pagination&quot;&gt;simple pagination&lt;/h3&gt;
+&lt;p&gt;&lt;a href=&quot;https://www.11ty.dev/docs/pagination/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Post pagination in Eleventy is pretty straightforward&lt;/a&gt;, mostly requiring some specific front matter.&lt;/p&gt;
+&lt;p&gt;The home page pagination I have set up here looks like the following (in &lt;code&gt;index.njk&lt;/code&gt;):&lt;/p&gt;
+&lt;pre&gt;&lt;code&gt;---
+pagination:
+  data: collections.posts
+  size: 13
+  alias: posts
+  reverse: true
+---
+&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;6 posts per page, paginate data from &lt;code&gt;collections.posts&lt;/code&gt; which we&#39;ll call just &lt;code&gt;posts&lt;/code&gt; for short, and do it in reverse (aka, most recent posts show first).&lt;/p&gt;
+&lt;p&gt;&lt;a href=&quot;https://www.11ty.dev/docs/pagination/nav&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;You&#39;ll also likely want previous and next buttons&lt;/a&gt;. I did. Here&#39;s what I have...&lt;/p&gt;
+&lt;h4 id=&quot;pagination-njk&quot;&gt;pagination.njk&lt;/h4&gt;
+&lt;p&gt;There&#39;s two components to this, the bigger one being this &lt;code&gt;pagination.njk&lt;/code&gt; template. Look, I like my little icons, ok? It takes an &lt;code&gt;olderHref&lt;/code&gt; and a &lt;code&gt;newerHref&lt;/code&gt;, and optionally an &lt;code&gt;olderTitle&lt;/code&gt; and &lt;code&gt;newerTitle&lt;/code&gt;.&lt;/p&gt;
+&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;{% if olderHref or newerHref %}
+&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;nav&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-label&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;pagination&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ol&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;pagination {% if inPost %}post-pagination{% endif %}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+    {% if olderHref %}
+    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;older&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ olderHref }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;i&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fa-solid fa-hand-point-left&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-hidden&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;true&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;i&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+        {{ olderTitle or &quot;older&quot; }}
+      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+    {% endif %}
+    {% if newerHref %}
+    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;newer&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ newerHref }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+        {{ newerTitle or &quot;newer&quot; }}
+        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;i&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;fa-solid fa-hand-point-right&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-hidden&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;true&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;i&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+    {% endif %}
+  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;ol&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;nav&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+{% endif %}&lt;/code&gt;&lt;/pre&gt;
+&lt;h4 id=&quot;calling-the-template&quot;&gt;calling the template&lt;/h4&gt;
+&lt;p&gt;From &lt;code&gt;index.njk&lt;/code&gt; we can &lt;code&gt;include &amp;quot;pagination.njk&amp;quot;&lt;/code&gt;:&lt;/p&gt;
+&lt;pre&gt;&lt;code&gt;{# idk why these are backwards either #}
+{% set newerHref = pagination.href.previous %}
+{% set olderHref = pagination.href.next %}
+{% include &amp;quot;pagination.njk&amp;quot; %}
+&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Yup. The order of previous vs. next is totally unintuitive to me, too.&lt;/p&gt;
+&lt;h3 id=&quot;complex-pagination&quot;&gt;complex pagination&lt;/h3&gt;
+&lt;p&gt;however, there&#39;s a catch. &lt;a href=&quot;https://www.11ty.dev/docs/quicktips/tag-pages/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Tag pages are &lt;em&gt;created&lt;/em&gt; via pagination&lt;/a&gt;! It&#39;s a lot harder to paginate those - you can&#39;t just use the front matter to set it up.&lt;/p&gt;
+&lt;p&gt;I untangled &lt;a href=&quot;https://github.com/11ty/eleventy/issues/332#issuecomment-445236776&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;this GitHub issue about double-layered pagination&lt;/a&gt; and came to the following solution...&lt;/p&gt;
+&lt;h4 id=&quot;eleventy-config-js&quot;&gt;eleventy.config.js&lt;/h4&gt;
+&lt;p&gt;in &lt;code&gt;eleventy.config.js&lt;/code&gt;:&lt;/p&gt;
+&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// note that this uses the lodash.chunk method, so you’ll have to import that&lt;/span&gt;
+eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addCollection&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;tagPagination&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;collection&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+  &lt;span class=&quot;token comment&quot;&gt;// Get unique list of tags&lt;/span&gt;
+  &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; tagSet &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Set&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;collection&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getAllSorted&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;flatMap&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;post&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; post&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;tags &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+
+  &lt;span class=&quot;token comment&quot;&gt;// Get each item that matches the tag&lt;/span&gt;
+  &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; paginationSize &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;6&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+  &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; tagMap &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+  &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; tagArray &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;tagSet&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+
+  &lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; tagName &lt;span class=&quot;token keyword&quot;&gt;of&lt;/span&gt; tagArray&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+    &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; tagItems &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; collection&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getFilteredByTag&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tagName&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+    &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; pagedItems &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;chunk&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tagItems&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;reverse&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; paginationSize&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+
+    &lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; pageNumber &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; max &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; pagedItems&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;length&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; pageNumber &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt; max&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; pageNumber&lt;span class=&quot;token operator&quot;&gt;++&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+      tagMap&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+        &lt;span class=&quot;token literal-property property&quot;&gt;tagName&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; tagName&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
+        &lt;span class=&quot;token literal-property property&quot;&gt;pageNumber&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; pageNumber&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
+        &lt;span class=&quot;token literal-property property&quot;&gt;pageSize&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; pagedItems&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;length&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
+        &lt;span class=&quot;token literal-property property&quot;&gt;pageData&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; pagedItems&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;pageNumber&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
+      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
+  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
+
+  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; tagMap&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;h4 id=&quot;tag-pages-njk&quot;&gt;tag-pages.njk&lt;/h4&gt;
+&lt;p&gt;in my &lt;code&gt;tag-pages.njk&lt;/code&gt; file (or whatever you use to template out your tag pages):&lt;/p&gt;
+&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;---
+pagination:
+  data: collections.tagPagination
+  size: 1
+  alias: tag
+eleventyComputed:
+  permalink: /tags/{{ tag.tagName | slugify }}/% if tag.pageNumber %{{ tag.pageNumber + 1 }}/% endif %
+  title: &quot;Posts tagged {{ tag.tagName }}&quot;
+eleventyExcludeFromCollections: true
+---
+&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Posts tagged “{{ tag.tagName }}”&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+
+{% set postlist = tag.pageData %}
+{% include &quot;postlist.njk&quot; %}
+
+{# idk why these are backwards either #}
+{% if tag.pageNumber &gt; 0 %}
+  {% set newerHref = pagination.href.previous %}
+{% endif %}
+{% if tag.pageNumber &amp;lt; tag.pageSize - 1 %}
+  {% set olderHref = pagination.href.next %}
+{% endif %}
+{% include &quot;pagination.njk&quot; %}&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;note the pagination checking &lt;code&gt;tag.pageNumber&lt;/code&gt; against &lt;code&gt;tag.PageSize&lt;/code&gt; - the &lt;a href=&quot;https://github.com/11ty/eleventy/issues/332#issuecomment-445236776&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;original suggested solution&lt;/a&gt; in the GitHub post creates an issue where the pagination loops through &lt;em&gt;all&lt;/em&gt; of the tag pages bit-by-bit. This sorts that - hat tip to &lt;a href=&quot;https://github.com/11ty/eleventy/issues/332#issuecomment-1248185406&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;TheReyzar who mentioned the issue and showed part of their solution&lt;/a&gt;.&lt;/p&gt;
+&lt;h4 id=&quot;filters-js-again&quot;&gt;filters.js (again)&lt;/h4&gt;
+&lt;p&gt;finally, in my &lt;code&gt;filters.js&lt;/code&gt; file, I add the &lt;code&gt;tagPagination&lt;/code&gt; tag to the tags that get filtered using &lt;code&gt;filterTagList&lt;/code&gt;:&lt;/p&gt;
+&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addFilter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;filterTagList&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;filterTagList&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;tags&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tags &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;filter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;tag&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;all&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;posts&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;tagPagination&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;indexOf&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tag&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;hr&gt;
+&lt;h2 id=&quot;tag-image-preview&quot;&gt;tag image preview&lt;/h2&gt;
+&lt;p&gt;today I tackled making the tag page more visually interesting.&lt;/p&gt;
+&lt;h3 id=&quot;preview-the-first-featured-image&quot;&gt;preview the first featured image&lt;/h3&gt;
+&lt;p&gt;first, I worked on previewing the first featured image. The focus here is on digging into &lt;code&gt;collections[tag]&lt;/code&gt; (reversed!) to get to the data of the first post.&lt;/p&gt;
+&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ul&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;taglist&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+{% for tag in collections | getKeys | filterTagList | sortAlphabetically %}
+	{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+	&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ tagUrl }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;taglist-link&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+      {% set tagRecent = collections[tag] | reverse %}
+      {% if tagRecent[0].data.image.src %}
+        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;img&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/posts/img/{{ tagRecent[0].data.image.src }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;alt&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ tagRecent[0].data.image.alt }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+      {% else %}
+        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;missing-image&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+      {% endif %}
+      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;post-tag&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{{ tag }}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+      {% set numPosts = collections[tag].length %}
+      ({{ numPosts }} post{% if numPosts &gt; 1 %}s{% endif %})
+    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+{% endfor %}
+&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;ul&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;h3 id=&quot;preview-a-collage-of-recent-featured-images&quot;&gt;preview a collage of recent featured images&lt;/h3&gt;
+&lt;p&gt;I found that having just the first featured image made the tag page hard to differentiate from any of the pages listing individual posts, so from there I moved to showing 4 images (or empty rectangles where there weren&#39;t four to show).&lt;/p&gt;
+&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ul&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;taglist&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+{% for tag in collections | getKeys | filterTagList | sortAlphabetically %}
+	{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+	&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ tagUrl }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;taglist-link&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;tag-imgs&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+        {% set tagRecent = collections[tag] | reverse %}
+        {% for i in range(0, 4) %}
+        {% if tagRecent[i].data.image.src %}
+          &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;img&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/posts/img/{{ tagRecent[i].data.image.src }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;alt&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ tagRecent[i].data.image.alt }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+        {% else %}
+          &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;missing-image&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+        {% endif %}
+        {% endfor %}
+      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;post-tag&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{{ tag }}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+      {% set numPosts = collections[tag].length %}
+      ({{ numPosts }} post{% if numPosts &gt; 1 %}s{% endif %})
+    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
+{% endfor %}
+&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;ul&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;with a bit of &lt;code&gt;display: grid&lt;/code&gt;, we&#39;re good to go, right?&lt;/p&gt;
+&lt;h4 id=&quot;handling-multiple-aspect-ratios&quot;&gt;handling multiple aspect ratios&lt;/h4&gt;
+&lt;p&gt;this had worked so far because the photos on the lessons site are from my camera in landscape mode, producing neat, identical 3:2 aspect ratios. Let&#39;s throw a wrench in that and introduce a portrait-mode photo.&lt;/p&gt;
+&lt;p&gt;thankfully, the CSS property &lt;code&gt;aspect-ratio&lt;/code&gt; makes this pretty straightforward, and &lt;code&gt;object-fit&lt;/code&gt; finishes the job.&lt;/p&gt;
+&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.taglist-link img&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+  &lt;span class=&quot;token property&quot;&gt;aspect-ratio&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 3 / 2&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+  &lt;span class=&quot;token property&quot;&gt;object-fit&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; cover&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;(I also set the &lt;code&gt;missing-img&lt;/code&gt; &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;s to have the same aspect ratio.)&lt;/p&gt;
+&lt;hr&gt;
+&lt;p&gt;There&#39;s the good stuff from &lt;a href=&quot;https://inherentlee.codeberg.page/lessons/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;11ty Lessons&lt;/a&gt;. Hope you enjoyed.&lt;/p&gt;
+</content>
+  </entry>
+  <entry>
+    <title>crow</title>
+    <link href="https://leecat.art/crow/" />
+    <updated>2026-02-09T00:00:00Z</updated>
+    <id>https://leecat.art/crow/</id>
+    <content type="html"></content>
+  </entry>
   <entry>
     <title>screen reader optimizations</title>
     <link href="https://leecat.art/screen-reader-optimizations/" />
-    <updated>2026-02-19T21:09:51Z</updated>
+    <updated>2026-02-06T00:00:00Z</updated>
     <id>https://leecat.art/screen-reader-optimizations/</id>
     <content type="html">&lt;h2 id=&quot;context&quot;&gt;context&lt;/h2&gt;
 &lt;p&gt;recently, I&#39;ve been working on a &lt;a href=&quot;https://inherentlee.codeberg.page/spoonfairies/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;website for a project called spoonfairies&lt;/a&gt;. On the providers page, we list a series of names along with their pronouns, location, and services offered. Visually, it looks like this:&lt;/p&gt;
@@ -70,13 +374,6 @@
 &lt;p&gt;now, after more screen reader testing, it reads out smoothly. The &lt;code&gt;aria-label&lt;/code&gt; precludes the actual link text and cleanly says what needs to be said, with nothing breaking up the text and the whole thing easily recognized as one link. &lt;em&gt;And&lt;/em&gt; I&#39;ve got my fancy styling. Sweet.&lt;/p&gt;
 </content>
   </entry>
-  <entry>
-    <title>crow</title>
-    <link href="https://leecat.art/crow/" />
-    <updated>2026-02-09T00:00:00Z</updated>
-    <id>https://leecat.art/crow/</id>
-    <content type="html"></content>
-  </entry>
   <entry>
     <title>charlie the alpaca handspun</title>
     <link href="https://leecat.art/charlie-the-alpaca-handspun/" />
@@ -131,14 +428,6 @@
     <updated>2026-01-18T00:00:00Z</updated>
     <id>https://leecat.art/dyeing-fiber/</id>
     <content type="html">&lt;p&gt;hand-dyed with acid dyes&lt;/p&gt;
-</content>
-  </entry>
-  <entry>
-    <title>coral reef handspun</title>
-    <link href="https://leecat.art/coral-reef-handspun/" />
-    <updated>2026-01-18T00:00:00Z</updated>
-    <id>https://leecat.art/coral-reef-handspun/</id>
-    <content type="html">&lt;p&gt;Fiber from &lt;a href=&quot;https://www.etsy.com/shop/JakiraFarms&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Jakira Farms&lt;/a&gt; in Coral Reef colorway. 100% merino.&lt;/p&gt;
 </content>
   </entry>
 </feed>

_site/fire-and-ice-handspun/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>fire &amp;amp; ice handspun | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="fire &amp; ice handspun">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/fire-ice-handspun.jpg">
-  <meta property="og:image:alt" content="2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight.">
-  
+<title>fire &amp;amp; ice handspun | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="fire &amp; ice handspun">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/fire-ice-handspun.jpg">
+<meta property="og:image:alt" content="2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/petrichor-handspun/">
+			
+			<img src="/img/petrichor-handspun.jpg" alt="3 skeins of handspun yarn, 2 large and 1 small. the large ones are a rich earth-tone blend of reds, pinks, browns, and hints of green and gold. the smaller skein is similar but with a decidedly greener hue" loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="petrichor-handspun">petrichor handspun</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/light-grey-jacobs-handspun/">
+			
+			<img src="/img/light-grey-jacobs.jpg" alt="a skein of light grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="light-grey-jacobs-handspun">light grey jacobs handspun</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/handspun-yarn-in-party-mix-and-orange-gold/">
+			
+			<img src="/img/handspun0.jpg" alt="4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="handspun-yarn-in-party-mix-and-orange-gold">handspun yarn in party mix and orange-gold</h2>
+			<ul class="postlist-tags">
+				
+				<li>yarn</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/fire-and-ice-handspun/` was built on 2026-02-20T01:52:49.466Z -->
-<body>
-</body></body>
+    <!-- This page `/fire-and-ice-handspun/` was built on 2026-03-01T22:40:49.411Z -->
+  </body>
+</html>

_site/fishhook-pride-keychains/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>fishhook pride keychains | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="fishhook pride keychains">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/fishhook-keychain-nonbinary.jpg">
-  <meta property="og:image:alt" content="a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.">
-  
+<title>fishhook pride keychains | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="fishhook pride keychains">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/fishhook-keychain-nonbinary.jpg">
+<meta property="og:image:alt" content="a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1239,16 +1460,73 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/proud-dad-wallet/">
+			
+			<img src="/img/proud-dad-wallet.jpg" alt="A brown leather wallet with a subtle trans flag stitching across the top." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="proud-dad-wallet">proud dad wallet</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/in-the-news/">
+			
+			<img src="/img/shrimp-knitting.jpg" alt="Picture unrelated to post. Lee, sitting in a chair and seen in profile, looks up and smiles. Ze is holding and working on a partially knit shrimp." loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="in-the-news">in the news</h2>
+			<ul class="postlist-tags">
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/leather-lighter-case/">
+			
+			<img src="/img/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="leather-lighter-case">leather lighter case</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1267,6 +1545,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/fishhook-pride-keychains/` was built on 2026-02-20T01:52:49.452Z -->
-<body>
-</body></body>
+    <!-- This page `/fishhook-pride-keychains/` was built on 2026-03-01T22:40:49.430Z -->
+  </body>
+</html>

_site/five-of-them/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>five of them | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="five of them">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/five-of-them-print.jpg">
-  <meta property="og:image:alt" content="A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing.">
-  
+<title>five of them | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="five of them">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/five-of-them-print.jpg">
+<meta property="og:image:alt" content="A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1246,16 +1467,81 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/lupine/">
+			
+			<img src="/img/lupine-prints.jpg" alt="6 versions of a print of lupine flowers with the leaves inked in light green and the blossoms inked in a variety of blues, purples, and pinks." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="lupine">lupine</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>shirt</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/hummingbird-become-ungovernable/">
+			
+			<img src="/img/hummingbird-ungovernable-print.jpg" alt="A block print in black and orange ink of a rufous hummingbird, tail flared, hovering in midair. Clutched in eir tiny claws is a banner that waves in the wind and reads &#39;become ungovernable&#39;" loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="hummingbird-become-ungovernable">hummingbird become ungovernable</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>shirt</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/bottom-growth/">
+			
+			<img src="/img/bottom-growth-prints.jpg" alt="4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="bottom-growth">bottom growth</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1274,6 +1560,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/five-of-them/` was built on 2026-02-20T01:52:49.444Z -->
-<body>
-</body></body>
+    <!-- This page `/five-of-them/` was built on 2026-03-01T22:40:49.423Z -->
+  </body>
+</html>

_site/fix-your-hearts/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>fix your hearts | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="fix your hearts">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/fix-your-hearts-print.jpg">
-  <meta property="og:image:alt" content="2 copies of the same print, one in black ink and one in dark teal. The print is text that reads &#39;fix your hearts or die&#39;, with the text shaped into a somewhat long and narrow heart.">
-  
+<title>fix your hearts | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="fix your hearts">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/fix-your-hearts-print.jpg">
+<meta property="og:image:alt" content="2 copies of the same print, one in black ink and one in dark teal. The print is text that reads &#39;fix your hearts or die&#39;, with the text shaped into a somewhat long and narrow heart.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1233,16 +1454,73 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/tiny-mushrooms/">
+			
+			<img src="/img/pixels-mushrooms.jpg" alt="3 tiny mushroom stamps next to their impressions. They are all about 1 inch square. There is a chanterelle in yellow, a russula in pink, and witch&#39;s hat mycena in indigo." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="tiny-mushrooms">tiny mushrooms</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/squarsh/">
+			
+			<img src="/img/squarsh-prints.jpg" alt="Two identical prints of a delicata squash. The body of the squash is cornsilk (muted yellow), the stem and stripes in mint green, and the shadows in lilac." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="squarsh">squarsh</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/junco/">
+			
+			<img src="/img/junco-print.jpg" alt="A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="junco">junco</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1261,6 +1539,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/fix-your-hearts/` was built on 2026-02-20T01:52:49.461Z -->
-<body>
-</body></body>
+    <!-- This page `/fix-your-hearts/` was built on 2026-03-01T22:40:49.404Z -->
+  </body>
+</html>

_site/flatfish/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>flatfish | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="flatfish">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/flatfish-print.jpg">
-  <meta property="og:image:alt" content="A print of a simple flatfish design inked in sepia.">
-  
+<title>flatfish | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="flatfish">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/flatfish-print.jpg">
+<meta property="og:image:alt" content="A print of a simple flatfish design inked in sepia.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1246,16 +1467,85 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/seedling/">
+			
+			<img src="/img/seedling-print.jpg" alt="A print of a 3-stage design of a green seedling barely open, starting to straighten up, and growing strong, with little piles of dirt beneath each one." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="seedling">seedling</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/trans-wrongs-skull/">
+			
+			<img src="/img/trans-wrongs-print.jpg" alt="A smiling skull with devil horns and a little spiked tail, and a speech bubble reading &#39;trans wrongs!&#39;" loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="trans-wrongs-skull">trans wrongs skull</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>sticker</li>
+				
+				<li>pin</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/greeting-loons/">
+			
+			<img src="/img/greeting-loons.jpg" alt="A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="greeting-loons">greeting loons</h2>
+			<ul class="postlist-tags">
+				
+				<li>card</li>
+				
+				<li>print</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1274,6 +1564,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/flatfish/` was built on 2026-02-20T01:52:49.436Z -->
-<body>
-</body></body>
+    <!-- This page `/flatfish/` was built on 2026-03-01T22:40:49.417Z -->
+  </body>
+</html>

_site/flicker/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>flicker | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="flicker">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/flicker-print.jpg">
-  <meta property="og:image:alt" content="A print in black, brown, and red ink of a northern flicker (a type of woodpecker). Viewed from the back, he is looking over his shoulder and upward towards something unseen above him (my bird feeder).">
-  
+<title>flicker | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="flicker">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/flicker-print.jpg">
+<meta property="og:image:alt" content="A print in black, brown, and red ink of a northern flicker (a type of woodpecker). Viewed from the back, he is looking over his shoulder and upward towards something unseen above him (my bird feeder).">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1251,16 +1472,79 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/happy-bihrtday/">
+			
+			<img src="/img/happy-bihrtday-card-print.jpg" alt="A card and print in the same design - a bouncy, cheery font reading &#39;happy biHRTday&#39;" loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="happy-bihrtday">happy biHRTday</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/euphorbia/">
+			
+			<img src="/img/euphorbia-print.jpg" alt="A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="euphorbia">euphorbia</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/stellars-jay/">
+			
+			<img src="/img/stellars-jay-print.jpg" alt="A print of a stellar&#39;s jay, a beautiful black and blue bird, about to take off from a branch" loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="stellars-jay">stellar&#39;s jay</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>shirt</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1279,6 +1563,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/flicker/` was built on 2026-02-20T01:52:49.440Z -->
-<body>
-</body></body>
+    <!-- This page `/flicker/` was built on 2026-03-01T22:40:49.419Z -->
+  </body>
+</html>

_site/flocked-notebook/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>flocked notebook | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="flocked notebook">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/flocked-notebook.jpg">
-  <meta property="og:image:alt" content="A two panel collage showing the cover and endpapers of a thick notebook.">
-  
+<title>flocked notebook | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="flocked notebook">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/flocked-notebook.jpg">
+<meta property="og:image:alt" content="A two panel collage showing the cover and endpapers of a thick notebook.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1247,16 +1468,73 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/leather-long-stitch-journals/">
+			
+			<img src="/img/long-stitch-journals.jpg" alt="A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="leather-long-stitch-journals">leather long-stitch journals</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+				<li>book</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/leather-strap-journal/">
+			
+			<img src="/img/leather-strap-journal.jpg" alt="A 3-part collage showing a blue journal with leather straps woven into the covers." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="leather-strap-journal">leather strap journal</h2>
+			<ul class="postlist-tags">
+				
+				<li>book</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/baseball-journal/">
+			
+			<img src="/img/baseball-journal.jpg" alt="A 3-part collage of a leather-covered book with baseball-style stitching across the spine." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="baseball-journal">baseball journal</h2>
+			<ul class="postlist-tags">
+				
+				<li>book</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1275,6 +1553,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/flocked-notebook/` was built on 2026-02-20T01:52:49.435Z -->
-<body>
-</body></body>
+    <!-- This page `/flocked-notebook/` was built on 2026-03-01T22:40:49.394Z -->
+  </body>
+</html>

_site/foldy-wallet-with-thumb-slide/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>foldy wallet with thumb slide | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="foldy wallet with thumb slide">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/foldy-thumb-slide.jpg">
-  <meta property="og:image:alt" content="A card wallet with one main pocket and one quick access slot with a thumb slide. The cover of the main pocket curves around the thumb slide.">
-  
+<title>foldy wallet with thumb slide | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="foldy wallet with thumb slide">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/foldy-thumb-slide.jpg">
+<meta property="og:image:alt" content="A card wallet with one main pocket and one quick access slot with a thumb slide. The cover of the main pocket curves around the thumb slide.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/mom-bag/">
+			
+			<img src="/img/mom-bag.jpg" alt="A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp." loading="lazy" decoding="async" width="900" height="1200">
+			
+			<h2 data-ha-exclude="" id="mom-bag">mom bag</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/leather-keychains/">
+			
+			<img src="/img/leather-keychains.jpg" alt="A picture of multiple leather keychains sitting on a wood table. Many of them are simple rectangle shapes with stitching around the edge; a few are odd wavy or geometric shapes. A few say things like &#39;MOM&#39; or &#39;EGG&#39;." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="leather-keychains">leather keychains</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/vertical-zipper-card-wallet/">
+			
+			<img src="/img/vertical-zipper-card-wallet.jpg" alt="A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="vertical-zipper-card-wallet">vertical zipper card wallet</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/foldy-wallet-with-thumb-slide/` was built on 2026-02-20T01:52:49.455Z -->
-<body>
-</body></body>
+    <!-- This page `/foldy-wallet-with-thumb-slide/` was built on 2026-03-01T22:40:49.396Z -->
+  </body>
+</html>

_site/foldy-wallet/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>foldy wallet | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="foldy wallet">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/foldy-wallet.jpg">
-  <meta property="og:image:alt" content="A four part collage showing a single piece of deep red leather folding up to become a card wallet.">
-  
+<title>foldy wallet | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="foldy wallet">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/foldy-wallet.jpg">
+<meta property="og:image:alt" content="A four part collage showing a single piece of deep red leather folding up to become a card wallet.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1234,16 +1455,71 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/snap-pouch/">
+			
+			<img src="/img/snap-pouches.jpg" alt="4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather." loading="lazy" decoding="async" width="900" height="1200">
+			
+			<h2 data-ha-exclude="" id="snap-pouch">snap pouch</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/bowtie/">
+			
+			<img src="/img/bowtie.jpg" alt="A black leather bow tie with black stitching." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="bowtie">bowtie</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/pinatex-wallet-with-zipper/">
+			
+			<img src="/img/pinatex-ten-pocket-bifold.jpg" alt="A two-picture collage showing the inside and outside of a wallet made with piñatex, a leather alternative made from pineapple leaves. It is two tone blue with a pink accent and has a zippered pocket built in." loading="lazy" decoding="async" width="1000" height="1331">
+			
+			<h2 data-ha-exclude="" id="pinatex-wallet-with-zipper">piñatex wallet with zipper</h2>
+			<ul class="postlist-tags">
+				
+				<li>leather</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1262,6 +1538,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/foldy-wallet/` was built on 2026-02-20T01:52:49.454Z -->
-<body>
-</body></body>
+    <!-- This page `/foldy-wallet/` was built on 2026-03-01T22:40:49.395Z -->
+  </body>
+</html>

_site/fountain-pen-friendly-stationery/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>fountain pen-friendly stationery | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="fountain pen-friendly stationery">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/wax-seals.jpg">
-  <meta property="og:image:alt" content="Two envelopes with wax seals. The top envelope is cream with a copper-and-white swirled seal depicting a yelling possum holding mail. The bottom envelope is marbled blue, black, and gold, with a white-and-blue swirled seal depicting an octopus holding a fountain pen.">
-  
+<title>fountain pen-friendly stationery | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="fountain pen-friendly stationery">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/wax-seals.jpg">
+<meta property="og:image:alt" content="Two envelopes with wax seals. The top envelope is cream with a copper-and-white swirled seal depicting a yelling possum holding mail. The bottom envelope is marbled blue, black, and gold, with a white-and-blue swirled seal depicting an octopus holding a fountain pen.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1249,16 +1470,57 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/siblinghood-of-the-traveling-greeting-card/">
+			
+			<img src="/img/rockery.jpg" alt="Image unrelated to post. A surprisingly neat pile of rounded beach rocks, mainly speckly grey-white-bluish ones, with trees in the background." loading="lazy" decoding="async" width="1000" height="1000">
+			
+			<h2 data-ha-exclude="" id="siblinghood-of-the-traveling-greeting-card">siblinghood of the traveling greeting card</h2>
+			<ul class="postlist-tags">
+				
+				<li>stationery</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/stationery-exchange/">
+			
+			<img src="/img/clustered-brown-mushrooms.jpg" alt="Picture unrelated to post. A tight close-up on a cluster of tannish brown mushrooms." loading="lazy" decoding="async" width="1000" height="666">
+			
+			<h2 data-ha-exclude="" id="stationery-exchange">stationery exchange</h2>
+			<ul class="postlist-tags">
+				
+				<li>stationery</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1277,6 +1539,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/fountain-pen-friendly-stationery/` was built on 2026-02-20T01:52:49.460Z -->
-<body>
-</body></body>
+    <!-- This page `/fountain-pen-friendly-stationery/` was built on 2026-03-01T22:40:49.402Z -->
+  </body>
+</html>

_site/foxgloves/index.html

@@ -1,38 +1,39 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>foxgloves | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="foxgloves">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
-  <meta property="og:image" content="/img/foxgloves-print.jpg">
-  <meta property="og:image:alt" content="A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves.">
-  
+<title>foxgloves | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="foxgloves">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+<meta property="og:image" content="/img/foxgloves-print.jpg">
+<meta property="og:image:alt" content="A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves.">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
 
-  
-  
-  
-  
+<meta name="generator" content="Eleventy v3.1.2">
 
-  <style>.post-metadata {
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -232,6 +233,224 @@ pre[class*=language-]::selection {
 .token.selector {
 	color: var(--color-purple);
 }
+#postlist,
+#taglist {
+	list-style: none;
+}
+
+#postlist, .post,
+#taglist, .tag {
+	margin: 0;
+}
+
+/* Odd-numbered posts & tag layout/coloration */
+.post:nth-child(odd) .postlink,
+.tag:nth-child(odd) .taglink {
+	grid-template-areas:
+		'img h2'
+		'img info'
+		'img .';
+	grid-template-columns: 45% auto;;
+	--color-primary: var(--color-teal);
+	--color-accent: var(--color-pink);
+}
+
+/* Even-numbered posts & tags layout/coloration */
+.post:nth-child(even) .postlink,
+.tag:nth-child(even) .taglink {
+	grid-template-areas:
+		'h2 img'
+		'info img'
+		'. img';
+	grid-template-columns: auto 45%;
+	--color-primary: var(--color-pink);
+	--color-accent: var(--color-teal);
+}
+
+/* Layout for all posts on mobile */
+@media (max-width: 650px) {
+	.post:nth-child(n) .postlink,
+	.tag:nth-child(n) .taglink {
+		grid-template-areas:
+			'img'
+			'h2'
+			'info';
+		grid-template-columns: auto;
+	}
+}
+
+/* Link */
+.postlink,
+.taglink {
+	display: grid;
+	border: .25rem solid var(--color-primary);
+	border-radius: 1.25rem;
+	box-shadow: .35rem .35rem var(--color-shadow);
+	margin: 2rem 0;
+	text-decoration: none;
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+.postlink:focus-visible,
+.taglink:focus-visible {
+	background-color: var(--color-primary);
+	outline: none;
+}
+
+@media (any-hover: hover) {
+	.postlink:hover,
+	.taglink:hover {
+		background-color: var(--color-primary);
+	}
+}
+
+/* Forced colors */
+@media (forced-colors: active) {
+	.postlink:focus-visible,
+	.taglink:focus-visible {
+		outline-offset: .25rem;
+		outline: .25rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.postlink:hover,
+		.taglink:hover {
+			outline-offset: .25rem;
+			outline: .25rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.postlink:active,
+.taglink:active {
+	box-shadow: none;
+	top: .2rem;
+	left: .2rem;
+	box-shadow: .15rem .15rem var(--color-shadow);
+}
+
+/* Post & tag elements */
+.post h2, .post img,
+.post ul, .post li,
+.tag h2, .tag p,
+.tag img {
+	margin: 0;
+}
+
+.post h2,
+.tag h2 {
+	grid-area: h2;
+	padding: .25rem .5rem;
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	color: var(--color-primary);
+	border-radius: 1rem 1rem 0 0;
+	border-bottom: .25rem solid var(--color-accent);
+}
+
+.post:nth-child(even) h2,
+.tag:nth-child(even) h2 {
+	text-align: right;
+}
+
+.postlink:focus-visible h2,
+.taglink:focus-visible h2 {
+	color: var(--color-bg);
+	border-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover h2,
+	.taglink:hover h2 {
+		color: var(--color-bg);
+		border-color: var(--color-bg);
+	}
+}
+
+/* Images */
+.post img,
+.tag-imgs {
+	grid-area: img;
+}
+
+.tag-imgs {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: .15rem;
+}
+
+.tag-imgs img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+}
+
+.missing-image {
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	background-color: var(--color-bg-alt);
+	border-radius: calc(1rem);
+}
+
+.taglink:focus-visible .missing-image {
+	opacity: .7;
+}
+
+@media (any-hover: hover) {
+	.taglink:hover .missing-image {
+		opacity: .7;
+	}
+}
+
+/* Post tags */
+.postlist-tags {
+	grid-area: info;
+	list-style: none;
+	display: flex;
+	flex-flow: row wrap;
+	gap: .5rem;
+	padding: .5rem;
+}
+
+.post:nth-child(odd) .postlist-tags {
+	justify-content: flex-end;
+}
+
+.postlist-tags li,
+.tagcount {
+	background-color: var(--color-primary);
+	color: var(--color-bg);
+	padding: 0 .5rem;
+	border-radius: 1rem;
+}
+
+.postlink:focus-visible .postlist-tags li,
+.taglink:focus-visible .tagcount {
+	background-color: var(--color-bg);
+	color: var(--color-primary);
+}
+
+@media (any-hover: hover) {
+	.postlink:hover .postlist-tags li,
+	.taglink:hover .tagcount {
+		background-color: var(--color-bg);
+		color: var(--color-primary);
+	}
+}
+
+/* Tag count */
+.tag p {
+	grid-area: info;
+	padding: .5rem;
+}
+
+.tag:nth-child(odd) p {
+	text-align: right;
+}
 :root {
 	color-scheme: light dark;
 
@@ -251,7 +470,7 @@ pre[class*=language-]::selection {
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -283,8 +502,6 @@ pre[class*=language-]::selection {
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -305,7 +522,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -324,7 +541,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -333,6 +549,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -494,13 +714,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -516,9 +732,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -711,6 +928,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -887,7 +1106,7 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
+<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
 // Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
 
 let globalInstanceIndex = 0;
@@ -1118,11 +1337,12 @@ class HeadingAnchors extends HTMLElement {
 HeadingAnchors.register();
 
 export { HeadingAnchors }</script>
-</head>
-<body>
-  <header>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -1130,35 +1350,35 @@ export { HeadingAnchors }</script>
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -1170,8 +1390,9 @@ export { HeadingAnchors }</script>
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
+
 
 
 
@@ -1250,16 +1471,83 @@ export { HeadingAnchors }</script>
 </nav>
 
 
+
+  <hr>
+
+  
+  
+  
+  <section class="related-posts">
+    <h2 id="related-posts">related posts</h2>
+    <ol id="postlist">
+	
+	<li class="post">
+		<a class="postlink" href="/swallowtail-on-snowdrops/">
+			
+			<img src="/img/swallowtail-on-snowdrops-print.jpg" alt="A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower." loading="lazy" decoding="async" width="1000" height="1332">
+			
+			<h2 data-ha-exclude="" id="swallowtail-on-snowdrops">swallowtail on snowdrops</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>shirt</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/booby-congrats-on-the-top-surgery/">
+			
+			<img src="/img/booby-card.jpg" alt="A landscape-oriented white card with a two-color print of a blue-footed booby." loading="lazy" decoding="async" width="1000" height="750">
+			
+			<h2 data-ha-exclude="" id="booby-congrats-on-the-top-surgery">booby (congrats on the top surgery)</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>gender</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+	<li class="post">
+		<a class="postlink" href="/fat-raccoon/">
+			
+			<img src="/img/fat-raccoon-print.jpg" alt="A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer." loading="lazy" decoding="async" width="1000" height="1333">
+			
+			<h2 data-ha-exclude="" id="fat-raccoon">fat raccoon</h2>
+			<ul class="postlist-tags">
+				
+				<li>print</li>
+				
+				<li>card</li>
+				
+				<li>shirt</li>
+				
+			</ul>
+		</a>
+	</li>
+	
+</ol>
+
+  </section>
+  
+
 </heading-anchors>
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1278,6 +1566,6 @@ export { HeadingAnchors }</script>
 </footer>
 
 
-  <!-- This page `/foxgloves/` was built on 2026-02-20T01:52:49.445Z -->
-<body>
-</body></body>
+    <!-- This page `/foxgloves/` was built on 2026-03-01T22:40:49.424Z -->
+  </body>
+</html>

_site/gallery/1/index.html

@@ -1,35 +1,36 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>gallery | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="gallery">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
+<title>gallery | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="gallery">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+<meta name="generator" content="Eleventy v3.1.2">
 
-  
-  
-  
-  
 
-  <style>#postlist,
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>#postlist,
 #taglist {
 	list-style: none;
 }
@@ -266,7 +267,7 @@
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -298,8 +299,6 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -320,7 +319,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -339,7 +338,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -348,6 +346,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -509,13 +511,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -531,9 +529,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -726,6 +725,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -902,12 +903,13 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module"></script>
-</head>
-<body>
-  <header>
+<script type="module"></script>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -915,35 +917,35 @@ footer a:focus-visible {
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -955,8 +957,8 @@ footer a:focus-visible {
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
 
 <h1 id="gallery">gallery</h1>
 
@@ -971,7 +973,7 @@ footer a:focus-visible {
 			
 			<img src="/img/icelandic-lamb.jpg" alt="a skein of black handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
 			
-			<h2 id="icelandic-lamb-handspun">icelandic lamb handspun</h2>
+			<h2 data-ha-exclude="" id="icelandic-lamb-handspun">icelandic lamb handspun</h2>
 			<ul class="postlist-tags">
 				
 				<li>yarn</li>
@@ -985,7 +987,7 @@ footer a:focus-visible {
 			
 			<img src="/img/handcombed-jacobs.jpg" alt="a skein of dark grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
 			
-			<h2 id="handcombed-jacobs-handspun">handcombed jacobs handspun</h2>
+			<h2 data-ha-exclude="" id="handcombed-jacobs-handspun">handcombed jacobs handspun</h2>
 			<ul class="postlist-tags">
 				
 				<li>yarn</li>
@@ -999,7 +1001,7 @@ footer a:focus-visible {
 			
 			<img src="/img/solstice-2025.jpg" alt="front and back of our solstice card from this year, designed in postcard format. long alt incoming... front - 4 picture collage. 1 - i&#39;m standing in the woods, looking to one side, wearing an elaborate knit scarf. 2 - silhouetted thistle-like flowers in front of a pink-purple sky. 3 - my wife brooke crouches down to draw a heart in charcoal on a beach log, with &#39;L + B&#39; written inside. 4 - brooke stands on a driftwood-covered beach looking hella cool in mirrored shades. our dog kes stands in front of her and looks off to one side eagerly. overlaid is the words &#39;happy solstice&#39; in cursive. back - split down the center like the back of a postcard. on the left side, a 5 picture collage. 1 - i stand on a rock at the edge of a calm alpine lake. overlaid is the words &#39;lee, brooke, kestrel, &amp; the flock&#39; in print lettering. 2 - an early spring fern curl. 3 - our six ducks, all facing to the left, not in a row but still very organized. 4 - brooke grins at the camera while hugging kestrel&#39;s head. kestrel looks maybe a bit distraught. 5 - silhouette of a heron in flight across an early morning blue sky. on the address side, i&#39;ve added a dahlia to represent the stamp, and written &#39;you!&#39; in the field that would normally hold the mailing address." loading="lazy" decoding="async" width="1000" height="1346">
 			
-			<h2 id="happy-solstice-2025">happy solstice 2025</h2>
+			<h2 data-ha-exclude="" id="happy-solstice-2025">happy solstice 2025</h2>
 			<ul class="postlist-tags">
 				
 				<li>highlight</li>
@@ -1013,7 +1015,7 @@ footer a:focus-visible {
 			
 			<img src="/img/brooke-scarf.jpg" alt="A diaphanous knit lacework scarf draped over the back of a chair. It is split down the long way into two colors - one tinted orange and one tinted mint blue. Both colors, the orange and the blue, are held double with the same variegated gray, making the piece more cohesive. The yarn overs in the lacework create airy repeating holes." loading="lazy" decoding="async" width="1000" height="1333">
 			
-			<h2 id="brookes-scarf">brooke&#39;s scarf</h2>
+			<h2 data-ha-exclude="" id="brookes-scarf">brooke&#39;s scarf</h2>
 			<ul class="postlist-tags">
 				
 				<li>knit</li>
@@ -1027,7 +1029,7 @@ footer a:focus-visible {
 			
 			<img src="/img/dragon-mask.jpg" alt="lee (a white person with glasses and a side shave) holds up a leather dragon mask in black and dark green. ze sticks hir tongue out at it." loading="lazy" decoding="async" width="1000" height="746">
 			
-			<h2 id="dragon-mask">dragon mask</h2>
+			<h2 data-ha-exclude="" id="dragon-mask">dragon mask</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1043,7 +1045,7 @@ footer a:focus-visible {
 			
 			<img src="/img/aggregator-wireframes.jpg" alt="a figma page with 4 major sections titled aggregator, aggregator mobile, aggregator color, and aggregator mobile color. each section has 7 pages in it - all sections pretty clearly have the same 7 pages, with the mobile sections shown on mobile screens and the color sections in a rainbow of pastels rather than grayscale." loading="lazy" decoding="async" width="1000" height="1042">
 			
-			<h2 id="intro-to-wireframing">intro to wireframing</h2>
+			<h2 data-ha-exclude="" id="intro-to-wireframing">intro to wireframing</h2>
 			<ul class="postlist-tags">
 				
 				<li>software</li>
@@ -1057,7 +1059,7 @@ footer a:focus-visible {
 			
 			<img src="/img/brooke-suspenders.jpg" alt="a two image collage showing the front and back of a person, neck to waist. she&#39;s wearing leather suspenders with a button attachment, buckles for adjustment, and a stitched diamond where the straps cross in the back." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="brookes-suspenders">brooke&#39;s suspenders</h2>
+			<h2 data-ha-exclude="" id="brookes-suspenders">brooke&#39;s suspenders</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1071,7 +1073,7 @@ footer a:focus-visible {
 			
 			<img src="/img/leather-wrap-bracelets.jpg" alt="two wrists, each wearing a black leather wrap bracelet. the upper bracelet is a thin strap wrapped 3 times around the wrist. the lower bracelet wraps twice, with a thicker strap, and has carefully placed spikes that avoid the wrap spots." loading="lazy" decoding="async" width="1000" height="1333">
 			
-			<h2 id="wrap-bracelets">wrap bracelets</h2>
+			<h2 data-ha-exclude="" id="wrap-bracelets">wrap bracelets</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1085,7 +1087,7 @@ footer a:focus-visible {
 			
 			<img src="/img/acadia-mitts.jpg" alt="a hand wearing a knitted fingerless mitten. it&#39;s knit in a slubby, almost tweedy yarn, with the body being blue grey stockinette and the cuffs and tips a vibrant green rib." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="acadia-mitts">acadia mitts</h2>
+			<h2 data-ha-exclude="" id="acadia-mitts">acadia mitts</h2>
 			<ul class="postlist-tags">
 				
 				<li>knit</li>
@@ -1099,7 +1101,7 @@ footer a:focus-visible {
 			
 			<img src="/img/on-the-shoulders.jpg" alt="ok so. five image collage showing the front, 3 inner spreads, and back of a riso-printed zine in green and light blue. it&#39;s called &#39;on the shoulders of giants&#39; and it&#39;s about a knitting technique I learned from Stephen west and how I built on that technique. it talks about joining two adjacent panels without seaming, instead knitting the second panel onto the selvedge of the first. then it uses that technique to approach two panels knit with significantly different weights of yarn" loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="on-the-shoulders-of-giants">on the shoulders of giants</h2>
+			<h2 data-ha-exclude="" id="on-the-shoulders-of-giants">on the shoulders of giants</h2>
 			<ul class="postlist-tags">
 				
 				<li>zine</li>
@@ -1115,7 +1117,7 @@ footer a:focus-visible {
 			
 			<img src="/img/sideways-canvas.jpg" alt="someone&#39;s torso in a knitted short sleeve shirt. the front is teal, and the bit of back we can see is mustard yellow. looking closely, it&#39;s notable that the stitches are turned 90 degrees from a standard knit garment." loading="lazy" decoding="async" width="1000" height="1338">
 			
-			<h2 id="sideways-canvas-shirt">sideways canvas shirt</h2>
+			<h2 data-ha-exclude="" id="sideways-canvas-shirt">sideways canvas shirt</h2>
 			<ul class="postlist-tags">
 				
 				<li>knit</li>
@@ -1129,7 +1131,7 @@ footer a:focus-visible {
 			
 			<img src="/img/scrap-patches.jpg" alt="a collage of 4 images, each showing a fabric patch created by collaging 5 or 6 scraps of fabric and joining them with a simple running stitch in white thread. patches of running stitch go back and forth both horizontally and vertically." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="scrap-patches">scrap patches</h2>
+			<h2 data-ha-exclude="" id="scrap-patches">scrap patches</h2>
 			<ul class="postlist-tags">
 				
 				<li>patch</li>
@@ -1143,7 +1145,7 @@ footer a:focus-visible {
 			
 			<img src="/img/textures-unite.jpg" alt="a largely unseen person holds up an expansive knitted shawl, built in 6 sections of different textures and colors. in the background, trees and dappled sunlight." loading="lazy" decoding="async" width="1000" height="1334">
 			
-			<h2 id="textures-unite">textures unite</h2>
+			<h2 data-ha-exclude="" id="textures-unite">textures unite</h2>
 			<ul class="postlist-tags">
 				
 				<li>knit</li>
@@ -1183,14 +1185,12 @@ footer a:focus-visible {
 
 
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1209,6 +1209,6 @@ footer a:focus-visible {
 </footer>
 
 
-  <!-- This page `/gallery/1/` was built on 2026-02-20T01:52:50.464Z -->
-<body>
-</body></body>
+    <!-- This page `/gallery/1/` was built on 2026-03-01T22:40:51.903Z -->
+  </body>
+</html>

_site/gallery/10/index.html

@@ -1,35 +1,36 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>gallery | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="gallery">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
+<title>gallery | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="gallery">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+<meta name="generator" content="Eleventy v3.1.2">
 
-  
-  
-  
-  
 
-  <style>#postlist,
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>#postlist,
 #taglist {
 	list-style: none;
 }
@@ -266,7 +267,7 @@
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -298,8 +299,6 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -320,7 +319,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -339,7 +338,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -348,6 +346,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -509,13 +511,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -531,9 +529,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -726,6 +725,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -902,12 +903,13 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module"></script>
-</head>
-<body>
-  <header>
+<script type="module"></script>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -915,35 +917,35 @@ footer a:focus-visible {
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -955,8 +957,8 @@ footer a:focus-visible {
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
 
 <h1 id="gallery">gallery</h1>
 
@@ -971,7 +973,7 @@ footer a:focus-visible {
 			
 			<img src="/img/iris-prints.jpg" alt="3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes." loading="lazy" decoding="async" width="1000" height="562">
 			
-			<h2 id="iris">iris</h2>
+			<h2 data-ha-exclude="" id="iris">iris</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -987,7 +989,7 @@ footer a:focus-visible {
 			
 			<img src="/img/congrats-on-the-gay.jpg" alt="A greeting card reading, in black. &#39;Congrats on the,&#39; and then, in rainbow, &#39;Gay!&#39;" loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="congrats-on-the-gay">congrats on the gay</h2>
+			<h2 data-ha-exclude="" id="congrats-on-the-gay">congrats on the gay</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1005,7 +1007,7 @@ footer a:focus-visible {
 			
 			<img src="/img/lined-notebook.jpg" alt="A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook." loading="lazy" decoding="async" width="1000" height="1776">
 			
-			<h2 id="lined-notebook">lined notebook</h2>
+			<h2 data-ha-exclude="" id="lined-notebook">lined notebook</h2>
 			<ul class="postlist-tags">
 				
 				<li>book</li>
@@ -1019,7 +1021,7 @@ footer a:focus-visible {
 			
 			<img src="/img/flocked-notebook.jpg" alt="A two panel collage showing the cover and endpapers of a thick notebook." loading="lazy" decoding="async" width="1000" height="1331">
 			
-			<h2 id="flocked-notebook">flocked notebook</h2>
+			<h2 data-ha-exclude="" id="flocked-notebook">flocked notebook</h2>
 			<ul class="postlist-tags">
 				
 				<li>book</li>
@@ -1033,7 +1035,7 @@ footer a:focus-visible {
 			
 			<img src="/img/brooke-notebook.jpg" alt="A six panel collage showing the covers, endpapers, and some of the pages of a notebook." loading="lazy" decoding="async" width="1000" height="1500">
 			
-			<h2 id="brookes-notebook">brooke&#39;s notebook</h2>
+			<h2 data-ha-exclude="" id="brookes-notebook">brooke&#39;s notebook</h2>
 			<ul class="postlist-tags">
 				
 				<li>book</li>
@@ -1049,7 +1051,7 @@ footer a:focus-visible {
 			
 			<img src="/img/pink-socks.jpg" alt="Feet propped up on a car dashboard, with a desert landscape beyond. The feet are in salmon-colored socks with black flecks, and decorative lines running down the socks." loading="lazy" decoding="async" width="1000" height="1333">
 			
-			<h2 id="pink-socks">pink socks</h2>
+			<h2 data-ha-exclude="" id="pink-socks">pink socks</h2>
 			<ul class="postlist-tags">
 				
 				<li>knit</li>
@@ -1063,7 +1065,7 @@ footer a:focus-visible {
 			
 			<img src="/img/brooke-socks.jpg" alt="Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="brookes-socks">brooke&#39;s socks</h2>
+			<h2 data-ha-exclude="" id="brookes-socks">brooke&#39;s socks</h2>
 			<ul class="postlist-tags">
 				
 				<li>knit</li>
@@ -1077,7 +1079,7 @@ footer a:focus-visible {
 			
 			<img src="/img/pride-dice-bags.jpg" alt="Several knitted drawstring dice bags sit in front of a bookshelf. They are in different pride flag colors; from right to left (skipping a few duplicates) bisexual, lesbian, nonbinary, trans, and genderqueer. The trans-colored dice bag in the center opens towards the camera, showing a variety of colorful dice inside." loading="lazy" decoding="async" width="1000" height="500">
 			
-			<h2 id="pride-dice-bags">pride dice bags</h2>
+			<h2 data-ha-exclude="" id="pride-dice-bags">pride dice bags</h2>
 			<ul class="postlist-tags">
 				
 				<li>knit</li>
@@ -1093,7 +1095,7 @@ footer a:focus-visible {
 			
 			<img src="/img/square-watercolor-pad.jpg" alt="A two panel collage showing a square book with a tan cover and blue and gold endpapers." loading="lazy" decoding="async" width="1000" height="1331">
 			
-			<h2 id="square-watercolor-pad">square watercolor pad</h2>
+			<h2 data-ha-exclude="" id="square-watercolor-pad">square watercolor pad</h2>
 			<ul class="postlist-tags">
 				
 				<li>book</li>
@@ -1107,7 +1109,7 @@ footer a:focus-visible {
 			
 			<img src="/img/tiny-book.jpg" alt="A three panel collage showing a book held in the palm of a hand." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="tiny-books">tiny books</h2>
+			<h2 data-ha-exclude="" id="tiny-books">tiny books</h2>
 			<ul class="postlist-tags">
 				
 				<li>book</li>
@@ -1121,7 +1123,7 @@ footer a:focus-visible {
 			
 			<img src="/img/orange-journal.jpg" alt="A three panel collage showcasing a small book with foldout pages and a bright orange cover." loading="lazy" decoding="async" width="1000" height="1776">
 			
-			<h2 id="orange-journal">orange journal</h2>
+			<h2 data-ha-exclude="" id="orange-journal">orange journal</h2>
 			<ul class="postlist-tags">
 				
 				<li>book</li>
@@ -1135,7 +1137,7 @@ footer a:focus-visible {
 			
 			<img src="/img/striped-journal.jpg" alt="A three panel collage showcasing a journal with a striped cover." loading="lazy" decoding="async" width="1000" height="1776">
 			
-			<h2 id="striped-journal">striped journal</h2>
+			<h2 data-ha-exclude="" id="striped-journal">striped journal</h2>
 			<ul class="postlist-tags">
 				
 				<li>book</li>
@@ -1149,7 +1151,7 @@ footer a:focus-visible {
 			
 			<img src="/img/green-memo-pad.jpg" alt="A three panel collage showcasing a small green memo pad." loading="lazy" decoding="async" width="1000" height="1776">
 			
-			<h2 id="green-memo-pad">green memo pad</h2>
+			<h2 data-ha-exclude="" id="green-memo-pad">green memo pad</h2>
 			<ul class="postlist-tags">
 				
 				<li>book</li>
@@ -1187,14 +1189,12 @@ footer a:focus-visible {
 
 
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1213,6 +1213,6 @@ footer a:focus-visible {
 </footer>
 
 
-  <!-- This page `/gallery/10/` was built on 2026-02-20T01:52:54.141Z -->
-<body>
-</body></body>
+    <!-- This page `/gallery/10/` was built on 2026-03-01T22:40:54.541Z -->
+  </body>
+</html>

_site/gallery/11/index.html

@@ -1,35 +1,36 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>gallery | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="gallery">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
+<title>gallery | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="gallery">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+<meta name="generator" content="Eleventy v3.1.2">
 
-  
-  
-  
-  
 
-  <style>#postlist,
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>#postlist,
 #taglist {
 	list-style: none;
 }
@@ -266,7 +267,7 @@
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -298,8 +299,6 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -320,7 +319,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -339,7 +338,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -348,6 +346,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -509,13 +511,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -531,9 +529,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -726,6 +725,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -902,12 +903,13 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module"></script>
-</head>
-<body>
-  <header>
+<script type="module"></script>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -915,35 +917,35 @@ footer a:focus-visible {
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -955,8 +957,8 @@ footer a:focus-visible {
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
 
 <h1 id="gallery">gallery</h1>
 
@@ -971,7 +973,7 @@ footer a:focus-visible {
 			
 			<img src="/img/blue-brown-leather-journal.jpg" alt="A three panel collage showcasing a blue and brown leather-covered journal." loading="lazy" decoding="async" width="1000" height="1776">
 			
-			<h2 id="blue-and-brown-leather-journal">blue and brown leather journal</h2>
+			<h2 data-ha-exclude="" id="blue-and-brown-leather-journal">blue and brown leather journal</h2>
 			<ul class="postlist-tags">
 				
 				<li>book</li>
@@ -985,7 +987,7 @@ footer a:focus-visible {
 			
 			<img src="/img/acadia-coloring-journal.jpg" alt="A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park." loading="lazy" decoding="async" width="1000" height="562">
 			
-			<h2 id="acadia-coloring-journal">Acadia coloring journal</h2>
+			<h2 data-ha-exclude="" id="acadia-coloring-journal">Acadia coloring journal</h2>
 			<ul class="postlist-tags">
 				
 				<li>book</li>
@@ -999,7 +1001,7 @@ footer a:focus-visible {
 			
 			<img src="/img/pronoun-patch.jpg" alt="Rows of the same design, a skull with a speech bubble announcing varied pronoun sets, repeat in multiple colors along a stretch of off-white fabric." loading="lazy" decoding="async" width="1000" height="562">
 			
-			<h2 id="pronoun-patches">pronoun patches</h2>
+			<h2 data-ha-exclude="" id="pronoun-patches">pronoun patches</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1017,7 +1019,7 @@ footer a:focus-visible {
 			
 			<img src="/img/congrats-on-the.jpg" alt="4 greeting cards propped up on a keyboard. On the right hand side, two cards read &#39;Congrats on the Autism&#39;; one in rainbow ink and one in black ink with a glittery gold shadow. On the left, two cards read &#39;Congrats on the ADHD&#39;; one in red and one in black, both with glittery pink shadows." loading="lazy" decoding="async" width="1000" height="562">
 			
-			<h2 id="congrats-on-the-autism-adhd">congrats on the autism/adhd</h2>
+			<h2 data-ha-exclude="" id="congrats-on-the-autism-adhd">congrats on the autism/adhd</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1033,7 +1035,7 @@ footer a:focus-visible {
 			
 			<img src="/img/become-unbutterable.jpg" alt="3 copies of the same stamp in orange ink are spread out next to the hand carved rubber stamp they were made from. They show a cat lying on his back with paws curled, holding a butter knife in his mouth. Text around the cat reads, in all caps, &#39;become unbutterable.&#39;" loading="lazy" decoding="async" width="1000" height="562">
 			
-			<h2 id="become-unbutterable">become unbutterable</h2>
+			<h2 data-ha-exclude="" id="become-unbutterable">become unbutterable</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1065,14 +1067,12 @@ footer a:focus-visible {
 
 
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1091,6 +1091,6 @@ footer a:focus-visible {
 </footer>
 
 
-  <!-- This page `/gallery/11/` was built on 2026-02-20T01:52:54.427Z -->
-<body>
-</body></body>
+    <!-- This page `/gallery/11/` was built on 2026-03-01T22:40:54.851Z -->
+  </body>
+</html>

_site/gallery/2/index.html

@@ -1,35 +1,36 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>gallery | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="gallery">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
+<title>gallery | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="gallery">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+<meta name="generator" content="Eleventy v3.1.2">
 
-  
-  
-  
-  
 
-  <style>#postlist,
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>#postlist,
 #taglist {
 	list-style: none;
 }
@@ -266,7 +267,7 @@
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -298,8 +299,6 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -320,7 +319,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -339,7 +338,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -348,6 +346,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -509,13 +511,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -531,9 +529,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -726,6 +725,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -902,12 +903,13 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module"></script>
-</head>
-<body>
-  <header>
+<script type="module"></script>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -915,35 +917,35 @@ footer a:focus-visible {
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -955,8 +957,8 @@ footer a:focus-visible {
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
 
 <h1 id="gallery">gallery</h1>
 
@@ -971,7 +973,7 @@ footer a:focus-visible {
 			
 			<img src="/img/fix-your-hearts-print.jpg" alt="2 copies of the same print, one in black ink and one in dark teal. The print is text that reads &#39;fix your hearts or die&#39;, with the text shaped into a somewhat long and narrow heart." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="fix-your-hearts">fix your hearts</h2>
+			<h2 data-ha-exclude="" id="fix-your-hearts">fix your hearts</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -985,7 +987,7 @@ footer a:focus-visible {
 			
 			<img src="/img/loon-print.jpg" alt="A print of a loon rearing up with wings spread" loading="lazy" decoding="async" width="1000" height="1333">
 			
-			<h2 id="loon">loon</h2>
+			<h2 data-ha-exclude="" id="loon">loon</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -999,7 +1001,7 @@ footer a:focus-visible {
 			
 			<img src="/img/kestrel-zine.jpg" alt="A 5 photo collage showing the front and back cover as well as 3 full spreads of a folded zine about Kestrel, my dog, who is a 65lb Malinois with a goofy smile and floppy ears. it is printed in two layers of color, blue and orange, and each image depicts Kestrel in various posts... alert and watchful, resting, looking mopey, wearing a sweatshirt." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="kestrel-zine">kestrel zine</h2>
+			<h2 data-ha-exclude="" id="kestrel-zine">kestrel zine</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1017,7 +1019,7 @@ footer a:focus-visible {
 			
 			<img src="/img/greeting-loons.jpg" alt="A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="greeting-loons">greeting loons</h2>
+			<h2 data-ha-exclude="" id="greeting-loons">greeting loons</h2>
 			<ul class="postlist-tags">
 				
 				<li>card</li>
@@ -1035,7 +1037,7 @@ footer a:focus-visible {
 			
 			<img src="/img/brown-creeper-print.jpg" alt="2 copies of the same print side by side. In yellow, black, and purple ink, a brown creeper, a small bird, is depicted, well camouflaged against a tree trunk." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="brown-creeper">brown creeper</h2>
+			<h2 data-ha-exclude="" id="brown-creeper">brown creeper</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1049,7 +1051,7 @@ footer a:focus-visible {
 			
 			<img src="/img/quorbs-print.jpg" alt="A print in two layers of color showing two rotund quails on a branch. Most of the details are in black ink, then there is a layer with a brown gradient filling in some color on the head and breast." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="quorbs">quorbs</h2>
+			<h2 data-ha-exclude="" id="quorbs">quorbs</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1065,7 +1067,7 @@ footer a:focus-visible {
 			
 			<img src="/img/not-a-drill-print.jpg" alt="A print in dark teal ink depicting a power drill with text in cursive below that reads &#39;ceci n&#39;est pas un exercice&#39; or &#39;this is not a drill&#39;" loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="not-a-drill">not a drill</h2>
+			<h2 data-ha-exclude="" id="not-a-drill">not a drill</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1081,7 +1083,7 @@ footer a:focus-visible {
 			
 			<img src="/img/long-stitch-journals.jpg" alt="A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures." loading="lazy" decoding="async" width="1000" height="1333">
 			
-			<h2 id="leather-long-stitch-journals">leather long-stitch journals</h2>
+			<h2 data-ha-exclude="" id="leather-long-stitch-journals">leather long-stitch journals</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1097,7 +1099,7 @@ footer a:focus-visible {
 			
 			<img src="/img/lobstah.jpg" alt="Two red leather lobster ornaments, about 4-5 in long each." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="lobstah">lobstah</h2>
+			<h2 data-ha-exclude="" id="lobstah">lobstah</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1111,7 +1113,7 @@ footer a:focus-visible {
 			
 			<img src="/img/greeting-quorbs.jpg" alt="A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="greeting-quorbs">greeting quorbs</h2>
+			<h2 data-ha-exclude="" id="greeting-quorbs">greeting quorbs</h2>
 			<ul class="postlist-tags">
 				
 				<li>card</li>
@@ -1127,7 +1129,7 @@ footer a:focus-visible {
 			
 			<img src="/img/euphorbia-print.jpg" alt="A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers." loading="lazy" decoding="async" width="1000" height="1333">
 			
-			<h2 id="euphorbia">euphorbia</h2>
+			<h2 data-ha-exclude="" id="euphorbia">euphorbia</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1141,7 +1143,7 @@ footer a:focus-visible {
 			
 			<img src="/img/booby-card.jpg" alt="A landscape-oriented white card with a two-color print of a blue-footed booby." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="booby-congrats-on-the-top-surgery">booby (congrats on the top surgery)</h2>
+			<h2 data-ha-exclude="" id="booby-congrats-on-the-top-surgery">booby (congrats on the top surgery)</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1159,7 +1161,7 @@ footer a:focus-visible {
 			
 			<img src="/img/luminescent-print.jpg" alt="A print of a tattooed woman in bright highlighter yellow underwear." loading="lazy" decoding="async" width="900" height="1200">
 			
-			<h2 id="luminescent">luminescent</h2>
+			<h2 data-ha-exclude="" id="luminescent">luminescent</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1197,14 +1199,12 @@ footer a:focus-visible {
 
 
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1223,6 +1223,6 @@ footer a:focus-visible {
 </footer>
 
 
-  <!-- This page `/gallery/2/` was built on 2026-02-20T01:52:51.940Z -->
-<body>
-</body></body>
+    <!-- This page `/gallery/2/` was built on 2026-03-01T22:40:52.297Z -->
+  </body>
+</html>

_site/gallery/3/index.html

@@ -1,35 +1,36 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>gallery | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="gallery">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
+<title>gallery | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="gallery">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+<meta name="generator" content="Eleventy v3.1.2">
 
-  
-  
-  
-  
 
-  <style>#postlist,
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>#postlist,
 #taglist {
 	list-style: none;
 }
@@ -266,7 +267,7 @@
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -298,8 +299,6 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -320,7 +319,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -339,7 +338,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -348,6 +346,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -509,13 +511,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -531,9 +529,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -726,6 +725,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -902,12 +903,13 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module"></script>
-</head>
-<body>
-  <header>
+<script type="module"></script>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -915,35 +917,35 @@ footer a:focus-visible {
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -955,8 +957,8 @@ footer a:focus-visible {
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
 
 <h1 id="gallery">gallery</h1>
 
@@ -971,7 +973,7 @@ footer a:focus-visible {
 			
 			<img src="/img/kniphofia-print.jpg" alt="A print of a brightly colored flower in 4 layers of color" loading="lazy" decoding="async" width="1000" height="1333">
 			
-			<h2 id="kniphofia">kniphofia</h2>
+			<h2 data-ha-exclude="" id="kniphofia">kniphofia</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -985,7 +987,7 @@ footer a:focus-visible {
 			
 			<img src="/img/triangle-pouch.jpg" alt="5 small triangular pouches made of leather in two sizes and various colors." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="triangle-pouch">triangle pouch</h2>
+			<h2 data-ha-exclude="" id="triangle-pouch">triangle pouch</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -999,7 +1001,7 @@ footer a:focus-visible {
 			
 			<img src="/img/tiny-portrait-stamps.jpg" alt="A collage showing various small (around an inch) stamps that depict people or animals." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="tiny-portraits">tiny portraits</h2>
+			<h2 data-ha-exclude="" id="tiny-portraits">tiny portraits</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1013,7 +1015,7 @@ footer a:focus-visible {
 			
 			<img src="/img/snap-pouches.jpg" alt="4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather." loading="lazy" decoding="async" width="900" height="1200">
 			
-			<h2 id="snap-pouch">snap pouch</h2>
+			<h2 data-ha-exclude="" id="snap-pouch">snap pouch</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1027,7 +1029,7 @@ footer a:focus-visible {
 			
 			<img src="/img/oring-bracelet.jpg" alt="A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps." loading="lazy" decoding="async" width="900" height="1200">
 			
-			<h2 id="o-ring-bracelet">o-ring bracelet</h2>
+			<h2 data-ha-exclude="" id="o-ring-bracelet">o-ring bracelet</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1041,7 +1043,7 @@ footer a:focus-visible {
 			
 			<img src="/img/leaf-patches-oak.jpg" alt="Several oak-leaf-shaped leather patches with stitching holes punched around the edges." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="leaf-patches">leaf patches</h2>
+			<h2 data-ha-exclude="" id="leaf-patches">leaf patches</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1055,7 +1057,7 @@ footer a:focus-visible {
 			
 			<img src="/img/bowtie.jpg" alt="A black leather bow tie with black stitching." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="bowtie">bowtie</h2>
+			<h2 data-ha-exclude="" id="bowtie">bowtie</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1069,7 +1071,7 @@ footer a:focus-visible {
 			
 			<img src="/img/swoop-wallet.jpg" alt="A collage showing 3 pictures of a red and brown leather card wallet. The red pocket separator folds around to the back to become a fetching curlicue." loading="lazy" decoding="async" width="900" height="1200">
 			
-			<h2 id="swoop-wallet">swoop wallet</h2>
+			<h2 data-ha-exclude="" id="swoop-wallet">swoop wallet</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1083,7 +1085,7 @@ footer a:focus-visible {
 			
 			<img src="/img/squarsh-prints.jpg" alt="Two identical prints of a delicata squash. The body of the squash is cornsilk (muted yellow), the stem and stripes in mint green, and the shadows in lilac." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="squarsh">squarsh</h2>
+			<h2 data-ha-exclude="" id="squarsh">squarsh</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1097,7 +1099,7 @@ footer a:focus-visible {
 			
 			<img src="/img/rachel-bracelets.jpg" alt="Two pink leather bracelets with stainless steel hardware and aqua stitching." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="rachels-bracelets">rachel&#39;s bracelets</h2>
+			<h2 data-ha-exclude="" id="rachels-bracelets">rachel&#39;s bracelets</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1111,7 +1113,7 @@ footer a:focus-visible {
 			
 			<img src="/img/bottom-growth-prints.jpg" alt="4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="bottom-growth">bottom growth</h2>
+			<h2 data-ha-exclude="" id="bottom-growth">bottom growth</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1127,7 +1129,7 @@ footer a:focus-visible {
 			
 			<img src="/img/sora-collar.jpg" alt="A collage showing a red and black leather dog collar tooled with roses and the name Sora. It&#39;s fully stitched with dark red stitching and has brass hardware." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="soras-collar">sora&#39;s collar</h2>
+			<h2 data-ha-exclude="" id="soras-collar">sora&#39;s collar</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1141,7 +1143,7 @@ footer a:focus-visible {
 			
 			<img src="/img/two-shrimp.jpg" alt="Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange." loading="lazy" decoding="async" width="1000" height="666">
 			
-			<h2 id="shrimp-cat-toy">shrimp cat toy</h2>
+			<h2 data-ha-exclude="" id="shrimp-cat-toy">shrimp cat toy</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1179,14 +1181,12 @@ footer a:focus-visible {
 
 
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1205,6 +1205,6 @@ footer a:focus-visible {
 </footer>
 
 
-  <!-- This page `/gallery/3/` was built on 2026-02-20T01:52:52.292Z -->
-<body>
-</body></body>
+    <!-- This page `/gallery/3/` was built on 2026-03-01T22:40:52.578Z -->
+  </body>
+</html>

_site/gallery/4/index.html

@@ -1,35 +1,36 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>gallery | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="gallery">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
+<title>gallery | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="gallery">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+<meta name="generator" content="Eleventy v3.1.2">
 
-  
-  
-  
-  
 
-  <style>#postlist,
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>#postlist,
 #taglist {
 	list-style: none;
 }
@@ -266,7 +267,7 @@
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -298,8 +299,6 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -320,7 +319,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -339,7 +338,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -348,6 +346,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -509,13 +511,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -531,9 +529,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -726,6 +725,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -902,12 +903,13 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module"></script>
-</head>
-<body>
-  <header>
+<script type="module"></script>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -915,35 +917,35 @@ footer a:focus-visible {
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -955,8 +957,8 @@ footer a:focus-visible {
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
 
 <h1 id="gallery">gallery</h1>
 
@@ -971,7 +973,7 @@ footer a:focus-visible {
 			
 			<img src="/img/foldy-thumb-slide.jpg" alt="A card wallet with one main pocket and one quick access slot with a thumb slide. The cover of the main pocket curves around the thumb slide." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="foldy-wallet-with-thumb-slide">foldy wallet with thumb slide</h2>
+			<h2 data-ha-exclude="" id="foldy-wallet-with-thumb-slide">foldy wallet with thumb slide</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -985,7 +987,7 @@ footer a:focus-visible {
 			
 			<img src="/img/brooke-cuffs.jpg" alt="Olive green leather cuffs with silver spikes and a shearling lining." loading="lazy" decoding="async" width="900" height="1200">
 			
-			<h2 id="brookes-cuff-bracelets">brooke&#39;s cuff bracelets</h2>
+			<h2 data-ha-exclude="" id="brookes-cuff-bracelets">brooke&#39;s cuff bracelets</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -999,7 +1001,7 @@ footer a:focus-visible {
 			
 			<img src="/img/aaron-mask.jpg" alt="A brown/grey leather mask of a long snouted dog with visible teeth and red detailing." loading="lazy" decoding="async" width="900" height="1200">
 			
-			<h2 id="aarons-mask">aaron&#39;s mask</h2>
+			<h2 data-ha-exclude="" id="aarons-mask">aaron&#39;s mask</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1013,7 +1015,7 @@ footer a:focus-visible {
 			
 			<img src="/img/sunflower.jpg" alt="A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center ." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="sunflower">sunflower</h2>
+			<h2 data-ha-exclude="" id="sunflower">sunflower</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1027,7 +1029,7 @@ footer a:focus-visible {
 			
 			<img src="/img/foldy-wallet.jpg" alt="A four part collage showing a single piece of deep red leather folding up to become a card wallet." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="foldy-wallet">foldy wallet</h2>
+			<h2 data-ha-exclude="" id="foldy-wallet">foldy wallet</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1041,7 +1043,7 @@ footer a:focus-visible {
 			
 			<img src="/img/proud-dad-wallet.jpg" alt="A brown leather wallet with a subtle trans flag stitching across the top." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="proud-dad-wallet">proud dad wallet</h2>
+			<h2 data-ha-exclude="" id="proud-dad-wallet">proud dad wallet</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1057,7 +1059,7 @@ footer a:focus-visible {
 			
 			<img src="/img/patchwork-wallet.jpg" alt="A collage showing a wallet in a patchwork style, with different colors of leather all stitched together to make up the exterior and the top interior pockets. Other pockets inside are dyed various colors." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="patchwork-wallet">patchwork wallet</h2>
+			<h2 data-ha-exclude="" id="patchwork-wallet">patchwork wallet</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1071,7 +1073,7 @@ footer a:focus-visible {
 			
 			<img src="/img/mom-bag.jpg" alt="A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp." loading="lazy" decoding="async" width="900" height="1200">
 			
-			<h2 id="mom-bag">mom bag</h2>
+			<h2 data-ha-exclude="" id="mom-bag">mom bag</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1085,7 +1087,7 @@ footer a:focus-visible {
 			
 			<img src="/img/gradient-purse-strap.jpg" alt="a coiled up purse strap in gradient cool colors - we can see green, teal, indigo, and a slightly pinkish purple. It has brass hardware and is stiched along its length with cream stitches." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="gradient-purse-strap">gradient purse strap</h2>
+			<h2 data-ha-exclude="" id="gradient-purse-strap">gradient purse strap</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1099,7 +1101,7 @@ footer a:focus-visible {
 			
 			<img src="/img/zipper-bifold-green.jpg" alt="A collage showing a green leather wallet with a zippered pocket built into one external side." loading="lazy" decoding="async" width="1000" height="1332">
 			
-			<h2 id="zipper-bifold-green">zipper bifold (green)</h2>
+			<h2 data-ha-exclude="" id="zipper-bifold-green">zipper bifold (green)</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1113,7 +1115,7 @@ footer a:focus-visible {
 			
 			<img src="/img/vix-collar.jpg" alt="A collar rests on a leather-wrapped lighter. It is lined with shearling and built of two other layers of leather - a wider mustard yellow layer and a thinner teal layer over that. the teal layer holds a heart shaped o-ring in place." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="vix-collar">vix collar</h2>
+			<h2 data-ha-exclude="" id="vix-collar">vix collar</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1127,7 +1129,7 @@ footer a:focus-visible {
 			
 			<img src="/img/trans-the-world-print.jpg" alt="A print that reads &#39;trans the world&#39; surrounding an image of a globe and a trans symbol. It&#39;s in a ping-to-blue gradient." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="trans-the-world">trans the world</h2>
+			<h2 data-ha-exclude="" id="trans-the-world">trans the world</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1145,7 +1147,7 @@ footer a:focus-visible {
 			
 			<img src="/img/slightly-weird-man-club-print.jpg" alt="A print that reads &#39;slightly weird man club&#39; in a nonbinary flag colored gradient" loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="slightly-weird-man-club">slightly weird man club</h2>
+			<h2 data-ha-exclude="" id="slightly-weird-man-club">slightly weird man club</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1187,14 +1189,12 @@ footer a:focus-visible {
 
 
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1213,6 +1213,6 @@ footer a:focus-visible {
 </footer>
 
 
-  <!-- This page `/gallery/4/` was built on 2026-02-20T01:52:52.545Z -->
-<body>
-</body></body>
+    <!-- This page `/gallery/4/` was built on 2026-03-01T22:40:52.793Z -->
+  </body>
+</html>

_site/gallery/5/index.html

@@ -1,35 +1,36 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>gallery | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="gallery">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
+<title>gallery | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="gallery">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+<meta name="generator" content="Eleventy v3.1.2">
 
-  
-  
-  
-  
 
-  <style>#postlist,
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>#postlist,
 #taglist {
 	list-style: none;
 }
@@ -266,7 +267,7 @@
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -298,8 +299,6 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -320,7 +319,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -339,7 +338,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -348,6 +346,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -509,13 +511,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -531,9 +529,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -726,6 +725,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -902,12 +903,13 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module"></script>
-</head>
-<body>
-  <header>
+<script type="module"></script>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -915,35 +917,35 @@ footer a:focus-visible {
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -955,8 +957,8 @@ footer a:focus-visible {
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
 
 <h1 id="gallery">gallery</h1>
 
@@ -971,7 +973,7 @@ footer a:focus-visible {
 			
 			<img src="/img/trans-rights-and-wrongs-pins.jpg" alt="Two hard enamel pins in my trans rights and trans wrongs skulls designs." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="pins">pins!</h2>
+			<h2 data-ha-exclude="" id="pins">pins!</h2>
 			<ul class="postlist-tags">
 				
 				<li>pin</li>
@@ -985,7 +987,7 @@ footer a:focus-visible {
 			
 			<img src="/img/mousie.jpg" alt="A cat in a sunbeam snuggles a little leather mouse-shaped cat toy." loading="lazy" decoding="async" width="1000" height="1499">
 			
-			<h2 id="mousie">mousie</h2>
+			<h2 data-ha-exclude="" id="mousie">mousie</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -999,7 +1001,7 @@ footer a:focus-visible {
 			
 			<img src="/img/long-zipper-bifold.jpg" alt="A collage showing an orange leather wallet with a long zipper running the length of the outside." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="long-zipper-bifold">long zipper bifold</h2>
+			<h2 data-ha-exclude="" id="long-zipper-bifold">long zipper bifold</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1013,7 +1015,7 @@ footer a:focus-visible {
 			
 			<img src="/img/pronoun-patch-scroll.jpg" alt="two tooled leather patches. they have scrolls tooled on them that read various pronoun sets." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="tooled-leather-patches">tooled leather patches</h2>
+			<h2 data-ha-exclude="" id="tooled-leather-patches">tooled leather patches</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1029,7 +1031,7 @@ footer a:focus-visible {
 			
 			<img src="/img/fishhook-keychain-nonbinary.jpg" alt="a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="fishhook-pride-keychains">fishhook pride keychains</h2>
+			<h2 data-ha-exclude="" id="fishhook-pride-keychains">fishhook pride keychains</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1045,7 +1047,7 @@ footer a:focus-visible {
 			
 			<img src="/img/circle-bag.jpg" alt="A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="circle-bag">circle bag</h2>
+			<h2 data-ha-exclude="" id="circle-bag">circle bag</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1059,7 +1061,7 @@ footer a:focus-visible {
 			
 			<img src="/img/stephanie-collar.jpg" alt="A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring." loading="lazy" decoding="async" width="1000" height="562">
 			
-			<h2 id="stephanie-collar">stephanie collar</h2>
+			<h2 data-ha-exclude="" id="stephanie-collar">stephanie collar</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1073,7 +1075,7 @@ footer a:focus-visible {
 			
 			<img src="/img/pixels-mushrooms.jpg" alt="3 tiny mushroom stamps next to their impressions. They are all about 1 inch square. There is a chanterelle in yellow, a russula in pink, and witch&#39;s hat mycena in indigo." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="tiny-mushrooms">tiny mushrooms</h2>
+			<h2 data-ha-exclude="" id="tiny-mushrooms">tiny mushrooms</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1087,7 +1089,7 @@ footer a:focus-visible {
 			
 			<img src="/img/pinatex-ten-pocket-bifold.jpg" alt="A two-picture collage showing the inside and outside of a wallet made with piñatex, a leather alternative made from pineapple leaves. It is two tone blue with a pink accent and has a zippered pocket built in." loading="lazy" decoding="async" width="1000" height="1331">
 			
-			<h2 id="pinatex-wallet-with-zipper">piñatex wallet with zipper</h2>
+			<h2 data-ha-exclude="" id="pinatex-wallet-with-zipper">piñatex wallet with zipper</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1101,7 +1103,7 @@ footer a:focus-visible {
 			
 			<img src="/img/moss-harness.jpg" alt="A nylon webbing harness in bright teal laid out on a desk." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="moss-harness">moss harness</h2>
+			<h2 data-ha-exclude="" id="moss-harness">moss harness</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1115,7 +1117,7 @@ footer a:focus-visible {
 			
 			<img src="/img/makers-mark-keychain.jpg" alt="A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it." loading="lazy" decoding="async" width="1000" height="1333">
 			
-			<h2 id="makers-mark-keychain">maker&#39;s mark keychain</h2>
+			<h2 data-ha-exclude="" id="makers-mark-keychain">maker&#39;s mark keychain</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1129,7 +1131,7 @@ footer a:focus-visible {
 			
 			<img src="/img/lined-shearling-collar.jpg" alt="A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="brookes-collar">brooke&#39;s collar</h2>
+			<h2 data-ha-exclude="" id="brookes-collar">brooke&#39;s collar</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1143,7 +1145,7 @@ footer a:focus-visible {
 			
 			<img src="/img/bag-strap.jpg" alt="A nylon webbing shoulder strap in bright teal with clips on each end." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="bag-strap">bag strap</h2>
+			<h2 data-ha-exclude="" id="bag-strap">bag strap</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1181,14 +1183,12 @@ footer a:focus-visible {
 
 
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1207,6 +1207,6 @@ footer a:focus-visible {
 </footer>
 
 
-  <!-- This page `/gallery/5/` was built on 2026-02-20T01:52:52.809Z -->
-<body>
-</body></body>
+    <!-- This page `/gallery/5/` was built on 2026-03-01T22:40:53.063Z -->
+  </body>
+</html>

_site/gallery/6/index.html

@@ -1,35 +1,36 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>gallery | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="gallery">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
+<title>gallery | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="gallery">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+<meta name="generator" content="Eleventy v3.1.2">
 
-  
-  
-  
-  
 
-  <style>#postlist,
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>#postlist,
 #taglist {
 	list-style: none;
 }
@@ -266,7 +267,7 @@
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -298,8 +299,6 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -320,7 +319,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -339,7 +338,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -348,6 +346,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -509,13 +511,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -531,9 +529,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -726,6 +725,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -902,12 +903,13 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module"></script>
-</head>
-<body>
-  <header>
+<script type="module"></script>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -915,35 +917,35 @@ footer a:focus-visible {
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -955,8 +957,8 @@ footer a:focus-visible {
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
 
 <h1 id="gallery">gallery</h1>
 
@@ -971,7 +973,7 @@ footer a:focus-visible {
 			
 			<img src="/img/knife-sheaths.jpg" alt="Several blades with leather sheaths, and a few extra sheaths. There&#39;s a #2 blade with an orange sheath with yellow stitching, a #11 blade with a blue sheath with light grey stitching, and a skiving knife with a plum sheath and pink stitching." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="x-acto-knife-sheath">x-acto knife sheath</h2>
+			<h2 data-ha-exclude="" id="x-acto-knife-sheath">x-acto knife sheath</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -985,7 +987,7 @@ footer a:focus-visible {
 			
 			<img src="/img/little-critter-pouch.jpg" alt="A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="little-critter-pouch">little critter pouch</h2>
+			<h2 data-ha-exclude="" id="little-critter-pouch">little critter pouch</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1001,7 +1003,7 @@ footer a:focus-visible {
 			
 			<img src="/img/zipper-bifold.jpg" alt="A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side." loading="lazy" decoding="async" width="1000" height="1777">
 			
-			<h2 id="zipper-bifold">zipper bifold</h2>
+			<h2 data-ha-exclude="" id="zipper-bifold">zipper bifold</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1015,7 +1017,7 @@ footer a:focus-visible {
 			
 			<img src="/img/vertical-zipper-card-wallet.jpg" alt="A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch." loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="vertical-zipper-card-wallet">vertical zipper card wallet</h2>
+			<h2 data-ha-exclude="" id="vertical-zipper-card-wallet">vertical zipper card wallet</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1029,7 +1031,7 @@ footer a:focus-visible {
 			
 			<img src="/img/vertical-card-wallet.jpg" alt="A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="vertical-card-wallet">vertical card wallet</h2>
+			<h2 data-ha-exclude="" id="vertical-card-wallet">vertical card wallet</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1043,7 +1045,7 @@ footer a:focus-visible {
 			
 			<img src="/img/vertical-bifold.jpg" alt="A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket." loading="lazy" decoding="async" width="1000" height="1777">
 			
-			<h2 id="vertical-bifold">vertical bifold</h2>
+			<h2 data-ha-exclude="" id="vertical-bifold">vertical bifold</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1057,7 +1059,7 @@ footer a:focus-visible {
 			
 			<img src="/img/eight-pocket-bifold.jpg" alt="A 3-picture collage showing a hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a asymmetrical interior with a hidden pocket and 3 card pockets on the right, and a hidden pocket and 2 card pockets on the left. The left front pocket has a small naturally occuring hole." loading="lazy" decoding="async" width="1000" height="1777">
 			
-			<h2 id="eight-pocket-bifold">eight pocket bifold</h2>
+			<h2 data-ha-exclude="" id="eight-pocket-bifold">eight pocket bifold</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1071,7 +1073,7 @@ footer a:focus-visible {
 			
 			<img src="/img/double-bill-pocket-bifold.jpg" alt="A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket." loading="lazy" decoding="async" width="1000" height="1777">
 			
-			<h2 id="double-bill-pocket-bifold">double bill pocket bifold</h2>
+			<h2 data-ha-exclude="" id="double-bill-pocket-bifold">double bill pocket bifold</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1085,7 +1087,7 @@ footer a:focus-visible {
 			
 			<img src="/img/nine-pocket-bifold.jpg" alt="A hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a symmetrical interior with a hidden pocket and 3 card pockets on each side." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="nine-pocket-bifold">nine pocket bifold</h2>
+			<h2 data-ha-exclude="" id="nine-pocket-bifold">nine pocket bifold</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1099,7 +1101,7 @@ footer a:focus-visible {
 			
 			<img src="/img/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="leather-lighter-case">leather lighter case</h2>
+			<h2 data-ha-exclude="" id="leather-lighter-case">leather lighter case</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1113,7 +1115,7 @@ footer a:focus-visible {
 			
 			<img src="/img/leather-chest-harness.jpg" alt="Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="leather-chest-harness">leather chest harness</h2>
+			<h2 data-ha-exclude="" id="leather-chest-harness">leather chest harness</h2>
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
@@ -1127,7 +1129,7 @@ footer a:focus-visible {
 			
 			<img src="/img/anarchy-autism-rainbow-print.jpg" alt="A print in rainbow ink that says autism with the anarchy A." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="anarchy-autism">anarchy autism</h2>
+			<h2 data-ha-exclude="" id="anarchy-autism">anarchy autism</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1147,7 +1149,7 @@ footer a:focus-visible {
 			
 			<img src="/img/rope-print-1.jpg" alt="A print of a nude trans woman in an asymmetrical rope harness." loading="lazy" decoding="async" width="1000" height="1242">
 			
-			<h2 id="rope-one">rope (one)</h2>
+			<h2 data-ha-exclude="" id="rope-one">rope (one)</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1185,14 +1187,12 @@ footer a:focus-visible {
 
 
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1211,6 +1211,6 @@ footer a:focus-visible {
 </footer>
 
 
-  <!-- This page `/gallery/6/` was built on 2026-02-20T01:52:53.113Z -->
-<body>
-</body></body>
+    <!-- This page `/gallery/6/` was built on 2026-03-01T22:40:53.350Z -->
+  </body>
+</html>

_site/gallery/7/index.html

@@ -1,35 +1,36 @@
 <!doctype html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  
-  <title>gallery | hello hello</title>
-  <meta name="description" content="Lee Cattarin... on the internet!">
-  <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta property="og:title" content="gallery">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="Lee Cattarin... on the internet!">
-  <meta property="og:site_name" content="hello hello">
-  
+<title>gallery | hello hello</title>
+<meta name="description" content="Lee Cattarin... on the internet!">
+<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
 
-  <meta name="generator" content="Eleventy v3.1.2">
+<meta property="og:title" content="gallery">
+<meta property="og:type" content="website">
+<meta property="og:description" content="Lee Cattarin... on the internet!">
+<meta property="og:site_name" content="hello hello">
 
-  
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
 
-  
-  <script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+<meta name="generator" content="Eleventy v3.1.2">
 
-  
-  
-  
-  
 
-  <style>#postlist,
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+
+
+<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
+
+
+
+
+
+
+<style>#postlist,
 #taglist {
 	list-style: none;
 }
@@ -266,7 +267,7 @@
 	--color-shadow: rgba(2, 10, 40, .25);
 
 	/* Used for syntax highlighting */
-	--color-red-light: #e95678;
+	--color-red-light: #f195aa;
 	--color-orange-light: #fab795;
 	--color-yellow-light: #fbe6bc;
 	--color-green-light: #29d398;
@@ -298,8 +299,6 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -320,7 +319,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -339,7 +338,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -348,6 +346,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -509,13 +511,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {
@@ -531,9 +529,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: thick solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -726,6 +725,8 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: thick solid var(--color-pink);
+	margin-top: 2rem;
 }
 
 footer ul {
@@ -902,12 +903,13 @@ footer a:focus-visible {
 	}
 }</style>
 
-  <script type="module"></script>
-</head>
-<body>
-  <header>
+<script type="module"></script>
 
-  <a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
+  </head>
+  <body>
+    <header>
+
+  <a href="#main" id="skip" title="skip to main content">
     <i class="fa-solid fa-forward" aria-hidden="true"></i> skip
   </a>
 
@@ -915,35 +917,35 @@ footer a:focus-visible {
     <ul>
       
       <li>
-        <a href="/reference/" title="read reference posts" aria-label="read reference posts">
+        <a href="/reference/" title="read reference posts">
           <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
           <span class="menu-text">reference</span>
         </a>
       </li>
       
       <li>
-        <a href="/gallery/" title="view the gallery" aria-label="view the gallery">
+        <a href="/gallery/" title="view the gallery">
           <i class="fa-regular fa-images" aria-hidden="true"></i>
           <span class="menu-text">gallery</span>
         </a>
       </li>
       
       <li>
-        <a href="/" title="" aria-label="">
+        <a href="/" title="">
           <i class="fa fa-solid fa-crow" aria-hidden="true"></i>
           <span class="menu-text">home</span>
         </a>
       </li>
       
       <li>
-        <a href="/about/" title="about Lee" aria-label="about Lee">
+        <a href="/about/" title="about Lee">
           <i class="fa-regular fa-user" aria-hidden="true"></i>
           <span class="menu-text">about</span>
         </a>
       </li>
       
       <li>
-        <a href="/contact/" title="contact Lee" aria-label="contact Lee">
+        <a href="/contact/" title="contact Lee">
           <i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
           <span class="menu-text">contact</span>
         </a>
@@ -955,8 +957,8 @@ footer a:focus-visible {
 </header>
 
 
-  <main id="main">
-    
+    <main id="main">
+      
 
 <h1 id="gallery">gallery</h1>
 
@@ -971,7 +973,7 @@ footer a:focus-visible {
 			
 			<img src="/img/artisans-coop-shirt.jpg" alt="A black tank top laid on a desk. In white ink it reads &#39;Artisans Cooperative&#39; with a print of some chickens and a quail." loading="lazy" decoding="async" width="1000" height="1333">
 			
-			<h2 id="artisans-cooperative-shirts">artisans cooperative shirts</h2>
+			<h2 data-ha-exclude="" id="artisans-cooperative-shirts">artisans cooperative shirts</h2>
 			<ul class="postlist-tags">
 				
 				<li>shirt</li>
@@ -987,7 +989,7 @@ footer a:focus-visible {
 			
 			<img src="/img/shrimp-print.jpg" alt="A print of a small shrimp with slender little leggies in orange ink." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="shrimp">shrimp</h2>
+			<h2 data-ha-exclude="" id="shrimp">shrimp</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1007,7 +1009,7 @@ footer a:focus-visible {
 			
 			<img src="/img/girldick-shirt.jpg" alt="A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="girldick">girldick</h2>
+			<h2 data-ha-exclude="" id="girldick">girldick</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1029,7 +1031,7 @@ footer a:focus-visible {
 			
 			<img src="/img/boypussy-shirt.jpg" alt="A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font." loading="lazy" decoding="async" width="1000" height="1250">
 			
-			<h2 id="boypussy">boypussy</h2>
+			<h2 data-ha-exclude="" id="boypussy">boypussy</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1051,7 +1053,7 @@ footer a:focus-visible {
 			
 			<img src="/img/queer-print.jpg" alt="A print of the word queer in black ink. The letters are rounded with elongated oval negative space." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="queer">queer</h2>
+			<h2 data-ha-exclude="" id="queer">queer</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1073,7 +1075,7 @@ footer a:focus-visible {
 			
 			<img src="/img/coming-out-card-print.jpg" alt="A card and print in the same design - a chick and a broken eggshell, and a simple font reading &#39;congrats on coming out of your shell&#39;" loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="coming-out">coming out</h2>
+			<h2 data-ha-exclude="" id="coming-out">coming out</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1091,7 +1093,7 @@ footer a:focus-visible {
 			
 			<img src="/img/happy-bihrtday-card-print.jpg" alt="A card and print in the same design - a bouncy, cheery font reading &#39;happy biHRTday&#39;" loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="happy-bihrtday">happy biHRTday</h2>
+			<h2 data-ha-exclude="" id="happy-bihrtday">happy biHRTday</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1109,7 +1111,7 @@ footer a:focus-visible {
 			
 			<img src="/img/foxgloves-print.jpg" alt="A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="foxgloves">foxgloves</h2>
+			<h2 data-ha-exclude="" id="foxgloves">foxgloves</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1127,7 +1129,7 @@ footer a:focus-visible {
 			
 			<img src="/img/artisans-coop-cards.jpg" alt="2 white greeting cards with the Artisans Cooperative logo, a chicken. One card has a single print of the chicken in black ink, and the other has two overlapping prints in blue and red ink" loading="lazy" decoding="async" width="1000" height="1000">
 			
-			<h2 id="artisans-cooperative-cards">artisans cooperative cards</h2>
+			<h2 data-ha-exclude="" id="artisans-cooperative-cards">artisans cooperative cards</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1143,7 +1145,7 @@ footer a:focus-visible {
 			
 			<img src="/img/trans-rights-stickers.jpg" alt="Clear and holographic stickers in the same design - a smiling skull with speech bubble reading &#39;trans rights!&#39;" loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="stickers">stickers!</h2>
+			<h2 data-ha-exclude="" id="stickers">stickers!</h2>
 			<ul class="postlist-tags">
 				
 				<li>sticker</li>
@@ -1157,7 +1159,7 @@ footer a:focus-visible {
 			
 			<img src="/img/shirts.jpg" alt="A row of shirts hanging in front of a window, with a variety of hand-printed designs." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="shirts">shirts!</h2>
+			<h2 data-ha-exclude="" id="shirts">shirts!</h2>
 			<ul class="postlist-tags">
 				
 				<li>shirt</li>
@@ -1171,7 +1173,7 @@ footer a:focus-visible {
 			
 			<img src="/img/nonbinary-flag-print.jpg" alt="A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes." loading="lazy" decoding="async" width="1000" height="750">
 			
-			<h2 id="nonbinary-flag">nonbinary flag</h2>
+			<h2 data-ha-exclude="" id="nonbinary-flag">nonbinary flag</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1189,7 +1191,7 @@ footer a:focus-visible {
 			
 			<img src="/img/five-of-them-print.jpg" alt="A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing." loading="lazy" decoding="async" width="1000" height="594">
 			
-			<h2 id="five-of-them">five of them</h2>
+			<h2 data-ha-exclude="" id="five-of-them">five of them</h2>
 			<ul class="postlist-tags">
 				
 				<li>print</li>
@@ -1229,14 +1231,12 @@ footer a:focus-visible {
 
 
 
+    </main>
 
-    <hr>
-  </main>
-
-  <footer>
+    <footer>
   <ul>
     <li>
-      <a href="/colophon" title="colophon" aria-label="colophon">
+      <a href="/colophon/">
         colophon
       </a>
     </li>
@@ -1255,6 +1255,6 @@ footer a:focus-visible {
 </footer>
 
 
-  <!-- This page `/gallery/7/` was built on 2026-02-20T01:52:53.418Z -->
-<body>
-</body></body>
+    <!-- This page `/gallery/7/` was built on 2026-03-01T22:40:53.661Z -->
+  </body>
+</html>