From 4bd898bc58f024971bccc7680c9a82e56ecf2b9a Mon Sep 17 00:00:00 2001
From: Lee Cattarin <lee.cattarin@gmail.com>
Date: Wed, 23 Sep 2026 20:56:16 +0000
Subject: [PATCH] drone build Wed Sep 23 13:56:16 PDT 2026

---
 404.html               | 525 +++++++++++++++++++++++++++++++++++++++++
 attribution/index.html |   2 +-
 card-one/index.html    |   2 +-
 card-three/index.html  |   2 +-
 card-two/index.html    |   2 +-
 index.html             |   2 +-
 6 files changed, 530 insertions(+), 5 deletions(-)
 create mode 100644 404.html

diff --git a/404.html b/404.html
new file mode 100644
index 0000000..31e3932
--- /dev/null
+++ b/404.html
@@ -0,0 +1,525 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	
+		
+	
+	<title>siblinghood of the traveling greeting card</title>
+
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta charset="utf-8">
+
+	<!-- Meta -->
+	<link rel="canonical" href="/">
+	<meta name="description" content="help a greeting card travel the world">
+	<meta name="robots" content="index,follow">
+	<meta property="og:title" content="siblinghood of the traveling greeting card">
+	<meta property="og:type" content="article">
+	<meta property="og:url" content="https://siblinghood.quest/404.html">
+	<meta property="og:description" content="help a greeting card travel the world">
+
+	<link rel="icon" type="image/x-icon" href="/favicon.ico">
+	<meta property="og:image" content="https://siblinghood.quest/img/logo-light.png">
+	<meta property="og:image:alt" content="blue and gold icon showing a greeting card with wings">
+
+	<meta name="generator" content="Eleventy v3.1.5">
+
+  <!-- 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">
+
+	<!-- CSS -->
+	
+	
+	
+	<style>:root {
+	color-scheme: light dark;
+
+	--color-blue-light: #c8e5f5;
+	--color-gold-light: #ecd399;
+	--color-blue-dark: #02293e;
+	--color-gold-dark: #715511;
+
+	--color-bg: light-dark(var(--color-blue-light), var(--color-blue-dark));
+	--color-text: light-dark(var(--color-blue-dark), var(--color-blue-light));
+	--color-accent: light-dark(var(--color-gold-dark), var(--color-gold-light));
+}
+
+/* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
+*, *::before, *::after {
+  box-sizing: border-box; /* 1. Use a more-intuitive box-sizing model */
+}
+
+*:not(dialog) {
+  margin: 0; /* 2. Remove default margin */
+  padding: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords; /* 3. Enable keyword animations */
+  }
+}
+
+#root, #__next {
+  isolation: isolate; /* 10. Create a root stacking context */
+}
+
+body {
+  line-height: 1.5; /* 4. Increase line-height */
+  -webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
+ 	color: var(--color-text);
+	background-color: var(--color-bg);
+	font-family: "Atkinson Hyperlegible Next";
+}
+
+main {
+	width: 55%;
+	margin: 0 auto 2rem;
+	scroll-margin-top: 1.5rem;
+	min-height: 50vh;
+	padding-bottom: 2rem;
+	max-width: 1200px;
+}
+
+@media (max-width: 650px) {
+	main {
+		width: 92%;
+	}
+}
+
+img, picture, video, canvas, svg {
+  display: block; /* 6. Improve media defaults */
+  max-width: 100%; /* 6. Improve media defaults */
+  height: auto; /* 6. Improve media defaults */
+  margin: 0 auto;
+}
+
+input, button, textarea, select {
+  font: inherit; /* 7. Inherit fonts for form controls */
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word; /* 8. Avoid text overflows */
+}
+
+p {
+  text-wrap: pretty; /* 9. Improve line wrapping */
+ 	margin: 0 auto 1.5rem;
+	line-height: 1.5rem;
+}
+
+@media (max-width: 650px) {
+	p {
+		font-size: .95rem;
+		line-height: 1.3rem;
+	}
+}
+
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance; /* 9. Improve line wrapping */
+}
+
+h1 {
+	margin: 3rem auto 1rem;
+	text-align: center;
+	font-size: 2.2rem;
+}
+
+h2, h3 {
+	margin: 3rem auto .5rem;
+	color: var(--color-accent);
+	border-bottom: solid;
+}
+
+h2 {
+	font-size: 1.8rem;
+}
+
+h3 {
+	font-size: 1.35rem;
+	text-align: right;
+}
+
+@media (max-width: 650px) {
+	h1 {
+		font-size: 1.8rem;
+	}
+
+	h2 {
+		font-size: 1.5rem;
+	}
+
+	h3 {
+		font-size: 1.2rem;
+	}
+}
+
+a {
+	color: var(--color-text);
+	text-decoration: underline;
+	text-decoration-style: solid;
+	text-decoration-thickness: .2rem;
+	text-decoration-color: var(--color-accent);
+	transition: text-decoration-thickness .5s;
+	padding: 0 .15rem;
+	border-radius: .15rem;
+}
+
+@media (any-hover: hover) {
+	a:hover {
+		text-decoration-thickness: .4rem;
+	}
+}
+
+a:focus-visible {
+	text-decoration: none;
+	outline: var(--color-accent) solid .15rem;
+}
+
+ul {
+	margin: 0 auto 1.5rem 2rem;
+	line-height: 1.5rem;
+}
+
+@media (max-width: 650px) {
+	ul {
+		font-size: .95rem;
+		line-height: 1.3rem;
+	}
+}
+
+time {
+	font-weight: 700;
+}
+
+button {
+	cursor: pointer;
+	background-color: var(--color-bg);
+}
+
+header img {
+	max-height: 25vh;
+	max-width: 100%;
+	width: auto;
+	margin: 0 auto;
+}
+
+@media (max-width: 650px) {
+	header img {
+		max-height: 20vh;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	#logo-dark {
+		display: none;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	#logo-light {
+		display: none;
+	}
+}
+
+#author {
+	text-align: right;
+	margin-bottom: 3rem;
+	font-style: italic;
+}
+nav {
+	display: flex;
+	position: relative;
+	gap: 1rem;
+	justify-content: center;
+	margin: 1rem auto;
+}
+
+nav a,
+nav button {
+	font-size: 1.4rem;
+	border: .1rem solid;
+	border-radius: .15rem;
+	padding: .15rem .3rem;
+	color: var(--color-accent);
+	text-decoration: none;
+	line-height: 2rem;
+	outline-offset: .1rem;
+}
+
+@media (max-width: 650px) {
+	nav a,
+	nav button {
+		font-size: 1.1rem;
+	}
+}
+
+@media (any-hover: hover) {
+	nav a:hover,
+	nav button:hover {
+		color: var(--color-bg);
+		background-color: var(--color-accent);
+		border-color: var(--color-accent);
+	}
+}
+
+nav a:focus-visible,
+nav button:focus-visible {
+	outline: .1rem solid var(--color-accent);
+}
+
+#skip {
+	left: -999px;
+	position: absolute;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	z-index: -99;
+	background-color: var(--color-bg);
+}
+
+#skip:focus-visible {
+	left: 1rem;
+	width: auto;
+	height: auto;
+	overflow: auto;
+	z-index: 999;
+}
+
+@media (any-hover: hover) {
+	#skip:hover {
+		color: var(--color-bg);
+		background-color: var(--color-accent);
+	}
+}
+
+a[aria-current="page"] {
+	border-right-width: .5rem;
+	border-left-width: .5rem;
+}
+
+nav ul {
+	list-style: none;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	margin: 0 0 0 1rem;
+	min-width: 10rem;
+}
+
+#dropdown {
+	position: relative;
+	display: inline-block;
+	min-width: 3rem;
+}
+
+nav ul.show {
+	display: block;
+}
+
+nav ul li {
+	margin: .5rem;
+}
+
+nav ul a {
+	display: inline-block;
+	background-color: var(--color-bg);
+}
+
+footer {
+	color: var(--color-bg);
+	background-color: var(--color-text);
+	padding: 1rem;
+}
+
+footer p {
+	text-align: center;
+	margin: 0;
+}
+
+footer a {
+	color: var(--color-bg);
+	text-decoration-color: var(--color-bg);
+}
+
+footer a:focus-visible {
+	outline-color: var(--color-bg);
+}
+.card {
+	color: var(--color-accent);
+}
+
+p .card {
+	text-transform: uppercase;
+	font-weight: 700;
+}
+
+ol + p {
+	margin-top: 1.5rem;
+}
+
+.stop {
+	color: var(--color-accent);
+	position: relative;
+	list-style: none;
+	padding-left: 1.5rem;
+}
+
+.stop:not(:last-child) {
+	padding-bottom: 2rem;
+}
+
+.stop:before {
+	background-color: var(--color-accent);
+	width: .1rem;
+	content: '';
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+}
+
+svg {
+	margin-left: -2.2rem;
+	width: 2rem;
+	fill: var(--color-accent);
+	float: left;
+	padding: .4rem .5rem 0 0;
+}
+
+@media (max-width: 650px) {
+	svg {
+		padding-top: .2rem;
+	}
+}
+
+.stop h2 {
+	margin: 0;
+}
+
+.stop p {
+	margin: 0;
+	color: var(--color-text);
+	padding-top: .5rem;
+}
+
+.stop .spacer {
+	height: 1rem;
+}</style>
+
+	<!-- JS -->
+  
+	<script type="module">const dropdown = document.getElementById("dropdown");
+const dropdownButton = document.getElementById("drop-button");
+const dropdownContent = document.getElementById("drop-content");
+
+const dropdownItems = dropdownContent.querySelectorAll("a");
+const firstDropdownItem = dropdownItems[0];
+const lastDropdownItem = dropdownItems[dropdownItems.length - 1];
+
+const openDropdown = function() {
+	dropdownContent.classList.add("show");
+	dropdownContent.ariaHidden = "false";
+	dropdownButton.ariaExpanded = "true";
+}
+
+const closeDropdown = function() {
+	if (dropdownButton.ariaExpanded === "true") {
+		dropdownContent.classList.remove("show");
+		dropdownContent.ariaHidden = "true";
+		dropdownButton.ariaExpanded = "false";
+	}
+}
+
+dropdownButton.addEventListener("click", (event) => {
+	if (dropdownButton.ariaExpanded === "false") openDropdown();
+	else closeDropdown();
+});
+
+dropdownButton.addEventListener("keydown", (event) => {
+	if (event.key === "Enter" || event.key === " ") { // Space or Enter key
+		event.preventDefault(); // Prevent the default action to stop scrolling when pressing Space
+		if (dropdownButton.ariaExpanded === "false") {
+			openDropdown();
+		} else {
+			closeDropdown();
+		}
+	} else if (event.key === "Tab" && event.shiftKey) closeDropdown();
+});
+
+firstDropdownItem.addEventListener("keydown", (event) => {
+	if (event.key === "Tab" && event.shiftKey) closeDropdown();
+});
+
+lastDropdownItem.addEventListener("keydown", (event) => {
+	if (event.key === "Tab" && !event.shiftKey) closeDropdown();
+});
+
+document.addEventListener("keydown", (event) => {
+	if (event.key === "Escape" && dropdownButton.ariaExpanded === "true") {
+		closeDropdown();
+		dropdownButton.focus();
+	}
+});
+
+window.addEventListener("click", (event) => {
+	if (!event.target.matches("#drop-button")) closeDropdown();
+});</script>
+</head>
+
+<body>
+	<header>
+	<nav>
+	  <a id="skip" href="#main">skip to main</a>
+		<a href="/">home</a>
+
+		<div id="dropdown">
+		  <button id="drop-button" aria-label="card submenu" aria-expanded="false" type="button" aria-controls="drop-content">cards ⮷</button>
+			<ul id="drop-content" aria-hidden="true">
+        
+        <li>
+          <a href="/card-one/">
+            card one
+          </a>
+        </li>
+        
+        <li>
+          <a href="/card-two/">
+            card two
+          </a>
+        </li>
+        
+        <li>
+          <a href="/card-three/">
+            card three
+          </a>
+        </li>
+        
+      </ul>
+		</div>
+	</nav>
+
+	<img id="logo-light" src="/img/4FoKW08FVr-1754.png" alt="blue and gold icon showing a greeting card with wings" loading="lazy" decoding="async" width="1754" height="1031">
+	<img id="logo-dark" src="/img/5JXwYKXL8s-1754.png" alt="blue and gold icon showing a greeting card with wings" loading="lazy" decoding="async" width="1754" height="1031">
+</header>
+
+
+	<main id="main">
+		<h1>Content not found</h1>
+<p>Sorry, can't find this page. Return <a href="/">home</a>.</p>
+
+	</main>
+
+  <footer>
+	<p>brought to you in 2026 by
+		<a href="https://leecat.art" target="_blank">lee</a>
+	</p>
+	<p><a href="/attribution">attribution</a></p>
+</footer>
+
+	<!-- This page `/404.html` was built on 2026-09-23T20:56:09.127Z -->
+</body>
+</html>
diff --git a/attribution/index.html b/attribution/index.html
index 9138001..3014ba2 100644
--- a/attribution/index.html
+++ b/attribution/index.html
@@ -521,6 +521,6 @@ window.addEventListener("click", (event) => {
 	<p><a href="/attribution">attribution</a></p>
 </footer>
 
-	<!-- This page `/attribution/` was built on 2026-09-23T20:32:57.114Z -->
+	<!-- This page `/attribution/` was built on 2026-09-23T20:56:09.127Z -->
 </body>
 </html>
diff --git a/card-one/index.html b/card-one/index.html
index 55ae058..f0aae22 100644
--- a/card-one/index.html
+++ b/card-one/index.html
@@ -652,6 +652,6 @@ window.addEventListener("click", (event) => {
 	<p><a href="/attribution">attribution</a></p>
 </footer>
 
-	<!-- This page `/card-one/` was built on 2026-09-23T20:32:57.113Z -->
+	<!-- This page `/card-one/` was built on 2026-09-23T20:56:09.126Z -->
 </body>
 </html>
diff --git a/card-three/index.html b/card-three/index.html
index 2db69f8..0967518 100644
--- a/card-three/index.html
+++ b/card-three/index.html
@@ -559,6 +559,6 @@ window.addEventListener("click", (event) => {
 	<p><a href="/attribution">attribution</a></p>
 </footer>
 
-	<!-- This page `/card-three/` was built on 2026-09-23T20:32:57.113Z -->
+	<!-- This page `/card-three/` was built on 2026-09-23T20:56:09.126Z -->
 </body>
 </html>
diff --git a/card-two/index.html b/card-two/index.html
index c2c604d..a6cf5f4 100644
--- a/card-two/index.html
+++ b/card-two/index.html
@@ -700,6 +700,6 @@ window.addEventListener("click", (event) => {
 	<p><a href="/attribution">attribution</a></p>
 </footer>
 
-	<!-- This page `/card-two/` was built on 2026-09-23T20:32:57.114Z -->
+	<!-- This page `/card-two/` was built on 2026-09-23T20:56:09.126Z -->
 </body>
 </html>
diff --git a/index.html b/index.html
index 3cef18b..f6680ad 100644
--- a/index.html
+++ b/index.html
@@ -572,6 +572,6 @@ window.addEventListener("click", (event) => {
 	<p><a href="/attribution">attribution</a></p>
 </footer>
 
-	<!-- This page `/` was built on 2026-09-23T20:32:57.114Z -->
+	<!-- This page `/` was built on 2026-09-23T20:56:09.127Z -->
 </body>
 </html>