siblinghood-site/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	
		
	
	<title>siblinghood of the traveling greeting card | 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 | siblinghood of the traveling greeting card">
	<meta property="og:type" content="article">
	<meta property="og:url" content="https://siblinghood.quest/">
	<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/favicon.ico">
	<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="/" aria-current="page">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>Siblinghood of the Traveling Greeting Card</h1>
<p id="author">a community-building project by <a href="https://leecat.art" target="_blank" rel="external">lee</a>.</p>
<p>welcome to the siblinghood of the traveling greeting card. We have completed <a href="#completed-cards">one card</a>.</p>
<p><a href="https://flipping.rocks/@inherentlee/115645750535211187" target="_blank" rel="external">originated on the fediverse</a> with an idea from <a href="https://scholar.social/@noctiluca" target="_blank" rel="external">noctiluca@scholar.social</a>.</p>
<h2 id="objective">objective</h2>
<p>send a greeting card around the world. Maybe more than one. We'll see.</p>
<h2 id="outline">outline</h2>
<p>from a group of participants, a random list will be formed. every person is given the address of the next person in the list (the last person receives the first person's address). The first person picks a greeting card, signs it, and sends it to their designated recipient; that person receives, signs, sends on, etc.</p>
<p>this continues on to the last person, who finally signs and sends back to the first, closing the loop and ending the adventure. The first person gets to keep the card they originally sent out.</p>
<p>if we want to, this can be easily re-run - add folks who want to be added, drop folks who want to be dropped, scramble the list, and start again.</p>
<h3 id="timeline">timeline</h3>
<p>applications for round one (cards one and two) closed on <time datetime="2025-12-15">December 15th, 2025</time>. Round two (card three) closed on <time datetime="2026-05-01">May 1st, 2026</time>. You may still put in for future rounds, but be aware future rounds are not confirmed yet and will not be confirmed until we have 16 more participants for a new card.</p>
<p>assignments (recipient address, order in loop) for cards one and two have been sent out as of <time datetime="2025-12-26">December 26th, 2025</time>. Assignments for card three have been sent out as of <time datetime="2026-06-04">June 4th, 2026</time>.</p>
<h3 id="participants">participants</h3>
<p>each cohort will be 16 people. When signups for the next round hit 16, I will confirm with all folks that they are still in; if so, we'll kick it off (if not, we'll wait for another person or two).</p>
<h3 id="on-randomization">on randomization</h3>
<p>I will edit the list as needed to accommodate any mailing restrictions. I will also re-roll if I am placed first on the list.</p>
<h3 id="card-guidelines">card guidelines</h3>
<p>4x6 inches/10x15 centimeters minimum size recommended so there is space for everyone to sign. Must not require an unusual envelope e.g. square or similar. Must meet letter rates so nothing too heavy.</p>
<h3 id="address-privacy">address privacy</h3>
<p>the only people who will see your address are:</p>
<ul>
<li>me</li>
<li>the person who is sending directly to you</li>
<li>if you put a return address (which I really would recommend), your recipient</li>
</ul>
<h2 id="what-i'll-need-from-participants">what I'll need from participants</h2>
<h3 id="signing-the-card">signing the card</h3>
<p>sign in any way you find meaningful. Please don't hog the card space - remember that as many as ~2 dozen people will be signing it!</p>
<p><strong>IMPORTANT!</strong> Only put a name, nickname, doodle, fedi handle, etc. on the card that you are comfortable having displayed publicly. In any posts that I make, it will not be directly connected to you. However, as there are only 16 signers per card, please be aware that how you sign could be tied back to your fedi account.</p>
<h3 id="mailing-the-card">mailing the card</h3>
<p>this will require a fresh envelope and stamp(s) as needed for postage.</p>
<h3 id="status-checks">status checks</h3>
<p>this is, at the end of the day, pretty flexible, but what I would really, really like is:</p>
<ul>
<li>2 emails, one on receipt and one on re-sending. This allows me to check in on progress and ensure the card doesn't get too stalled, or lost.</li>
<li>more optionally, but fun for seeing how things are going: a picture of the card (not the envelope!)</li>
</ul>
<p>feel free to post your card pictures using the hashtags #siblinghoodOfTheTravelingGreetingCard or #sottgc.</p>
<h2 id="what-i'll-send-participants">what I'll send participants</h2>
<h3 id="guidelines">guidelines</h3>
<p>summary/highlights of these guidelines will be repeated over email. Full guidelines will always be available here.</p>
<h3 id="recipient-and-loop-order-assignment">recipient and loop order assignment</h3>
<p>each participant will be sent the name and address of the next person in the loop. They will also be sent their place in the loop, <strong>numbered from 0</strong>.</p>
<h3 id="reminders">reminders</h3>
<p>I'll be doing my level best to track the card's movement, so as it is sent around (assuming I get check-ins from y'all! please help me out here!). I will send out reminders to folks to either check their mail or make sure the card gets sent out again. Some folks have specifically asked for this support and I don't want to let them down, so more communication is always better.</p>
<h2 id="i-want-in!">I want in!</h2>
<p>as stated above, signups for the rounds beginning <time datetime="2026-01-01">January 1st, 2026</time> and <time datetime="2026-06-04">June 4th, 2026</time> are <strong>closed</strong>. However, you may still sign up in case of future rounds.</p>
<p><a href="https://airtable.com/appdoHZsRDUzgYu9q/pagsr9LVAqKx29gDl/form" target="_blank" rel="external">sign up for the siblinghood of the traveling greeting card</a>.</p>
<p>if airtable is in any way inaccessible to you, please <a href="https://leecat.art/contact" target="_blank" rel="external">reach out directly to lee</a>.</p>
<h2 id="completed-cards">completed cards</h2>
<h3 id="card-two">card two</h3>
<p><span class="card"><a href="/card-two">Card Two</a></span> kicked off in <time datetime="2026-01-06">early January, 2026</time> and finished its long and perilous journey in <time datetime="2026-09-22">late September, 2026</time>, spanning about 9 and a half months.</p>
<p><img src="/img/rh5ZlIuGO7-1200.png" alt="two images stitched together. The first one shows the front of the card, which has a design of a cat peeking out from behind a question mark. The second shows the open card with all signatures and many stickers." loading="lazy" decoding="async" width="1200" height="617"></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 `/` was built on 2026-09-25T03:29:48.230Z -->
</body>
</html>