/*
 * Stoop's default theme. A theme is this stylesheet plus theme.json, which
 * lists the custom properties people can change in the theme editor. The
 * editor's values are added after this file as :root { --stoop-…: … }, so
 * they win over both the light and dark defaults below.
 */
:root {
	--stoop-bg: #fbfaf7;
	--stoop-surface: #ffffff;
	--stoop-text: #1d1d1f;
	--stoop-muted: #6b6b70;
	--stoop-accent: #c2410c;
	--stoop-border: #e6e3dc;
	--stoop-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--stoop-font-heading: var(--stoop-font);
	--stoop-width: 42rem;
	--stoop-radius: 0.5rem;
}
@media (prefers-color-scheme: dark) {
	:root {
		--stoop-bg: #16161a;
		--stoop-surface: #1f1f24;
		--stoop-text: #ececef;
		--stoop-muted: #9a9aa3;
		--stoop-accent: #fb923c;
		--stoop-border: #2e2e35;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
body {
	margin: 0;
	overflow-x: clip;
	background:
		var(--stoop-bg) var(--stoop-background-image, none) center / cover fixed;
	color: var(--stoop-text);
	font-family: var(--stoop-font);
	line-height: 1.6;
}
main {
	max-width: var(--stoop-width);
	margin: 0 auto;
	padding: 1.5rem 1rem 4rem;
	/* A long address in a post breaks onto the next line instead of
	 * making the page wider than a phone. */
	overflow-wrap: anywhere;
}
/* A wide table (e.g. a list of links and what they do) scrolls on its own
 * on a phone. */
@media (max-width: 40rem) {
	main table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}
a {
	color: var(--stoop-accent);
}
h1,
h2,
h3 {
	font-family: var(--stoop-font-heading);
	line-height: 1.2;
}
img {
	max-width: 100%;
	height: auto;
}
time,
.byline,
.handle {
	color: var(--stoop-muted);
}
code,
pre {
	font-size: 0.9em;
}
pre {
	overflow-x: auto;
	padding: 1rem;
	background: var(--stoop-surface);
	border-radius: var(--stoop-radius);
}
blockquote {
	margin-left: 0;
	padding-left: 1rem;
	border-left: 3px solid var(--stoop-border);
	color: var(--stoop-muted);
}

/* Profile header: banner, avatar overlapping it, name and handle. */
.block-bio > header {
	margin-bottom: 2rem;
}
.profile-header {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1;
	object-fit: cover;
	border-radius: var(--stoop-radius);
}
.avatar {
	display: block;
	width: 6rem;
	height: 6rem;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid var(--stoop-bg);
	background: var(--stoop-surface);
}
.profile-header + .avatar {
	margin-top: -3rem;
	margin-left: 1rem;
}
.block-bio > header h1 {
	margin: 0.5rem 0 0;
}
.handle {
	margin: 0;
}

/* Lists of posts. */
.post-list {
	list-style: none;
	padding: 0;
}
.post-item {
	padding: 1rem 0;
	border-bottom: 1px solid var(--stoop-border);
}
.post-item.post-article > a:first-child {
	font-size: 1.15rem;
	font-weight: 600;
}
.post-item .permalink {
	display: inline-block;
	font-size: 0.875rem;
	text-decoration: none;
}
.note-content > p:first-child {
	margin-top: 0;
}

/* A single post. */
.post article h1 {
	margin-bottom: 0.25rem;
}
.post footer {
	margin-top: 2rem;
	font-size: 0.9rem;
}
.tags {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Comments under a post (archived from an import). */
.comments {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--stoop-border);
}
.comments h2 {
	margin: 0;
}
.comments-note {
	margin: 0.25rem 0 1.5rem;
	color: var(--stoop-muted);
	font-size: 0.9rem;
}
.comment-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.comment-list .comment-list {
	margin-left: 1rem;
	padding-left: 1rem;
	border-left: 2px solid var(--stoop-border);
}
.comment > article {
	margin-bottom: 1.5rem;
}
.comment header {
	font-size: 0.9rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.4rem;
}
.comment-avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	object-fit: cover;
}
.comment-handle {
	color: var(--stoop-muted);
}
.reactions {
	color: var(--stoop-muted);
	margin: 0.5rem 0 0;
}
.reply-hint {
	color: var(--stoop-muted);
	font-size: 0.9rem;
	overflow-wrap: anywhere;
}
.comment-author {
	font-weight: 600;
}
.comment-date {
	color: var(--stoop-muted);
	text-decoration: none;
}
.comment .content > :first-child {
	margin-top: 0.25rem;
}
.comment .content > :last-child {
	margin-bottom: 0;
}

/* Guestbook block: entries look like comments. */
.guestbook-sign,
.guestbook-empty {
	color: var(--stoop-muted);
	font-size: 0.9rem;
}
.guestbook-entries {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
}
.guestbook-entry > article {
	padding: 0.75rem 1rem;
	margin-bottom: 0.75rem;
	background: var(--stoop-surface);
	border: 1px solid var(--stoop-border);
	border-radius: var(--stoop-radius);
}
.guestbook-entry header {
	font-size: 0.9rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.4rem;
}
.guestbook-entry .content > :first-child {
	margin-top: 0.25rem;
}
.guestbook-entry .content > :last-child {
	margin-bottom: 0;
}

/* Top 8: a grid of friends, four across (two on phones). */
.top8 {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem 0.75rem;
}
@media (max-width: 30rem) {
	.top8 {
		grid-template-columns: repeat(2, 1fr);
	}
}
.top8 a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	text-align: center;
}
.top8 img,
.top8-initial {
	width: 100%;
	max-width: 6rem;
	aspect-ratio: 1;
	border-radius: var(--stoop-radius);
	object-fit: cover;
}
.top8-initial {
	display: grid;
	place-items: center;
	font-size: 2rem;
	font-weight: 700;
	background: var(--stoop-surface);
	border: 1px solid var(--stoop-border);
	color: var(--stoop-muted);
}
.top8-name {
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

/* Attached images: one wide, or a grid. */
.attachments {
	display: grid;
	gap: 0.5rem;
	margin: 1rem 0;
}
.attachments.count-2,
.attachments.count-4 {
	grid-template-columns: 1fr 1fr;
}
.attachments.count-3 {
	grid-template-columns: 1fr 1fr 1fr;
}
.attachments figure {
	margin: 0;
}
.attachments img {
	display: block;
	width: 100%;
	border-radius: var(--stoop-radius);
	background: var(--stoop-surface);
}
.attachments:not(.count-1) img {
	aspect-ratio: 1;
	object-fit: cover;
}

/* Site menu. */
.site-header {
	max-width: var(--stoop-width);
	margin: 0 auto;
	padding: 1rem 1rem 0;
}
.site-menu ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	/* A logo is taller than the links: they sit level with its middle. */
	align-items: center;
	gap: 0.25rem 1.25rem;
	padding: 0;
	margin: 0;
}
.site-menu a {
	text-decoration: none;
	font-weight: 600;
}
/* The site name, a link home. Hide it with .site-name { display: none }. */
.site-menu .site-name {
	margin-right: auto;
}
.site-menu .site-name a {
	font-family: var(--stoop-font-heading);
	font-weight: 700;
	color: var(--stoop-text);
}

/* With a logo in place of the name, whatever a theme puts around the name
 * (a frame, a tab, a shadow, a cursor after it) steps aside: those are made
 * for a word, and a picture brings its own shape. Written to outrank a
 * theme's ".site-menu .site-name a" rules, hover included. */
.site-menu .site-name.has-logo a,
.site-menu .site-name.has-logo a:hover {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	transform: none;
}
/* A word has room under it for its tails; a picture needs some given, or
 * it sits right on a header's rule. */
.site-menu .site-name.has-logo {
	padding-block: 0.3rem;
}
.site-menu .site-name.has-logo a::before,
.site-menu .site-name.has-logo a::after {
	content: none;
}
.site-menu .site-name.has-logo a:hover .site-logo {
	opacity: 0.8;
}

/* The site logo, in place of the site name. */
.site-logo {
	display: block;
	height: 2.25rem;
	width: auto;
	max-width: 60vw;
}

/* Cover block: an edge-to-edge image with a big title over it. */
.block-cover {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100vw;
	padding: 2rem max(1rem, calc((100vw - var(--stoop-width)) / 2));
	overflow: hidden;
	color: #fff;
	background: var(--stoop-surface);
}
/* Break out of the column, edge to edge (beats .block's margin). */
.block.block-cover {
	margin-inline: calc(50% - 50vw);
}
:is(.page, .page > .page-top) > .cell:first-child > .block-cover {
	margin-top: -1.5rem;
}
.block-cover.height-full {
	min-height: 85svh;
}
.block-cover.height-tall {
	min-height: 60svh;
}
.block-cover.height-medium {
	min-height: 35svh;
}
.block-cover.position-center {
	justify-content: center;
	text-align: center;
}
.cover-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
}
.block-cover.dim-light::after {
	opacity: 0.2;
}
.block-cover.dim-medium::after {
	opacity: 0.4;
}
.block-cover.dim-strong::after {
	opacity: 0.6;
}
.cover-content {
	position: relative;
	z-index: 1;
}
.cover-title {
	margin: 0;
	font-size: clamp(2.5rem, 8vw, 5.5rem);
	line-height: 1;
	text-shadow: 0 2px 16px rgb(0 0 0 / 30%);
}
.cover-text {
	margin: 0.75rem 0 0;
	font-size: 1.25rem;
	text-shadow: 0 1px 8px rgb(0 0 0 / 30%);
}

/* Cover: a color tint instead of darkening, an image that stays put, the
 * site header over it (first block only), and a ↓ to the page. */
.block-cover.tinted::after {
	background: var(--cover-tint);
	opacity: var(--cover-tint-strength);
}
.cover-image.cover-fixed {
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}
@supports (-webkit-touch-callout: none) {
	/* iPhones and iPads can't fix a background: scroll it instead. */
	.cover-image.cover-fixed {
		background-attachment: scroll;
	}
}
body:has(
		:is(.page, .page > .page-top) > .cell:first-child > .block-cover.header-over
	)
	.site-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 5;
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}
body:has(
		:is(.page, .page > .page-top) > .cell:first-child > .block-cover.header-over
	)
	.site-header
	:is(a, .site-name, summary) {
	color: #fff;
}
:is(.page, .page > .page-top) > .cell:first-child > .block-cover.header-over {
	padding-top: 7rem;
}
.block-cover.position-bottom-center {
	align-items: center;
	text-align: center;
}
.block-cover.header-over.height-full {
	min-height: 100svh;
}
.cover-arrow {
	position: relative;
	z-index: 1;
	align-self: center;
	margin-top: 1.5rem;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	text-decoration: none;
}

/* The cover's ↓ arrow glides down to the page instead of jumping (not
 * for people whose device asks for less motion). */
@media (prefers-reduced-motion: no-preference) {
	html:has(.cover-arrow) {
		scroll-behavior: smooth;
	}
}

/* Page layout: blocks in a six-column grid, so narrower ones sit side by
 * side; stacked on phones. A "wide" page gives them room. */
.page {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	column-gap: 2rem;
	align-items: start;
}
.page > .cell {
	grid-column: span 6;
	min-width: 0;
}
.page > .cell-half {
	grid-column: span 3;
}
.page > .cell-third {
	grid-column: span 2;
}
.page > .cell-two-thirds {
	grid-column: span 4;
}
@media (max-width: 40rem) {
	.page > .cell {
		grid-column: span 6;
	}
}
.page.layout-wide {
	max-width: max(var(--stoop-width), 72rem);
}

/* Latest posts as titles only, and the Photos grid (sidebar-sized). */
ul.post-titles {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.post-titles li {
	margin: 0;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--stoop-border);
	list-style: none;
}
ul.post-titles li:last-child {
	border-bottom: 0;
}
ul.post-titles time {
	display: block;
	color: var(--stoop-muted);
	font-size: 0.8em;
}
.block-post-titles .more {
	margin: 0.5rem 0 0;
	font-size: 0.9em;
}
ul.photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.photo-grid li {
	margin: 0;
	list-style: none;
}
ul.photo-grid a {
	display: block;
}
ul.photo-grid img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: calc(var(--stoop-radius) / 2);
}

/* Sidebar pages: a main column (two thirds) and a narrow one beside it;
 * covers at the top span both. On phones they stack: a right sidebar
 * after the main column, a left one (a profile's bio) before it. */
.page.layout-sidebar {
	grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
	grid-template-areas: "top top" "main side";
	column-gap: 2.5rem;
	max-width: max(var(--stoop-width), 72rem);
}
.page.sidebar-left {
	grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr);
	grid-template-areas: "top top" "side main";
}
.page-top {
	grid-area: top;
	min-width: 0;
}
.page-main {
	grid-area: main;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	column-gap: 2rem;
	align-content: start;
	min-width: 0;
}
.page-main > .cell {
	grid-column: span 6;
	min-width: 0;
}
.page-main > .cell-half {
	grid-column: span 3;
}
.page-main > .cell-third {
	grid-column: span 2;
}
.page-main > .cell-two-thirds {
	grid-column: span 4;
}
.page-side {
	grid-area: side;
	min-width: 0;
	font-size: 0.92rem;
}
.page-side .block h2 {
	font-size: 1.1rem;
}
@media (max-width: 52rem) {
	.page.layout-sidebar,
	.page.sidebar-left {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "top" "main" "side";
	}
	/* A left sidebar (a profile's bio and links) comes first. */
	.page.sidebar-left {
		grid-template-areas: "top" "side" "main";
	}
	.page-main > .cell {
		grid-column: span 6;
	}
}

/* Content warnings: the post folded behind its warning. */
.content-warning > summary {
	cursor: pointer;
	font-weight: 600;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--stoop-border);
	border-radius: var(--stoop-radius);
	background: var(--stoop-surface);
}
.content-warning > summary::after {
	content: " · show";
	color: var(--stoop-muted);
	font-weight: 400;
}
.content-warning[open] > summary::after {
	content: " · hide";
}

/* A reply's "In reply to" line. */
.in-reply-to {
	color: var(--stoop-muted);
	font-size: 0.9rem;
	overflow-wrap: anywhere;
}

/* Blocks on a page. */
.block {
	margin: 0 0 2rem;
}
.block > h2:first-child {
	margin-top: 0;
}
.block-bio > header {
	margin-bottom: 1rem;
}
.block-image {
	margin-left: 0;
	margin-right: 0;
}
.block-image img {
	display: block;
	border-radius: var(--stoop-radius);
}
.block-image figcaption {
	color: var(--stoop-muted);
	font-size: 0.9rem;
	margin-top: 0.5rem;
}

.block-links ul {
	list-style: none;
	padding: 0;
}
.block-links.style-list li {
	margin: 0.35rem 0;
}
.block-links.style-buttons ul {
	display: grid;
	gap: 0.75rem;
}
.block-links.style-buttons a {
	display: block;
	padding: 0.9rem 1rem;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	color: var(--stoop-text);
	background: var(--stoop-surface);
	border: 1px solid var(--stoop-border);
	border-radius: var(--stoop-radius);
}
.block-links.style-buttons a:hover {
	border-color: var(--stoop-accent);
	color: var(--stoop-accent);
}

/* A row of buttons at their own width (e.g. Download and Source). */
.block-links.style-row ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.block-links.style-row a {
	display: inline-block;
	padding: 0.65rem 1.4rem;
}

/* Folder block: a list of files, audio with a player under its name. */
.block-folder .folder-list {
	list-style: none;
	padding: 0;
}
.block-folder .folder-item {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--stoop-border);
	overflow-wrap: anywhere;
}
.block-folder .folder-dir a {
	font-weight: 600;
}
.block-folder audio {
	display: block;
	width: 100%;
	margin-top: 0.35rem;
}

/* Music: now playing, recent listens, top albums (a list, or covers). */
.block-music .music-items {
	list-style: none;
	padding: 0;
	margin: 0;
}
.block-music .music-item {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	padding: 0.4rem 0;
}
.block-music .music-cover {
	flex: none;
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border-radius: calc(var(--stoop-radius) / 2);
	background: var(--stoop-surface);
}
.block-music .music-no-cover {
	display: grid;
	place-items: center;
	color: var(--stoop-muted);
}
.block-music .music-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}
.block-music .music-title {
	font-weight: 600;
	overflow-wrap: anywhere;
}
.block-music .music-title a {
	color: inherit;
	text-decoration: none;
}
.block-music .music-title a:hover {
	text-decoration: underline;
}
.block-music :is(.music-by, .music-meta) {
	color: var(--stoop-muted);
	font-size: 0.9em;
}
.block-music .music-live {
	color: var(--stoop-accent);
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.block-music .music-live::before {
	content: "● ";
}
.block-music .music-now .music-cover {
	width: 4.5rem;
	height: 4.5rem;
}
.music-grid .music-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
	gap: 1rem;
}
.music-grid .music-item {
	flex-direction: column;
	align-items: stretch;
	gap: 0.4rem;
	padding: 0;
}
.music-grid :is(.music-cover, .music-now .music-cover) {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	font-size: 2rem;
}

/* Bio, centered (the link-in-bio look): no banner, everything in the middle. */
.block-bio.style-centered {
	text-align: center;
}
.block-bio.style-centered .avatar {
	width: 7rem;
	height: 7rem;
	margin: 0 auto;
	border: 0;
}
.block-bio.style-centered .bio > p {
	margin-left: auto;
	margin-right: auto;
}

/* Imported posts: captioned images, embeds shown as links, "Also on". */
:is(.content, .block-html) figure {
	margin: 1rem 0;
}
:is(.content, .block-html) figure img {
	display: block;
	border-radius: var(--stoop-radius);
}
:is(.content, .block-html) .aligncenter img {
	margin: 0 auto;
}
:is(.content, .block-html) figcaption {
	color: var(--stoop-muted);
	font-size: 0.9rem;
	margin-top: 0.5rem;
}
:is(.content, .block-html) .aligncenter figcaption {
	text-align: center;
}
:is(.content, .block-html) .wp-block-embed a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--stoop-border);
	border-radius: 999px;
	text-decoration: none;
}
:is(.content, .block-html) .wp-block-embed a::before {
	content: "▶ ";
}
:is(.content, .block-html) .wp-syndication {
	color: var(--stoop-muted);
	font-size: 0.9rem;
}
/* A link's card under a note: its picture, site, title and description. */
.link-card {
	display: flex;
	gap: 0.85rem;
	align-items: stretch;
	margin: 0.75rem 0 0.25rem;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--stoop-border);
	border-radius: var(--stoop-radius);
	background: var(--stoop-surface);
	color: var(--stoop-text);
	text-decoration: none;
}
.link-card:hover {
	border-color: var(--stoop-accent);
}
.link-card img {
	flex: none;
	width: 7.5rem;
	height: auto;
	min-height: 5.5rem;
	object-fit: cover;
}
.link-card-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	padding: 0.65rem 0.85rem 0.65rem 0;
	font-size: 0.9rem;
	line-height: 1.35;
}
.link-card:not(:has(img)) .link-card-text {
	padding-left: 0.85rem;
}
.link-card-site {
	color: var(--stoop-muted);
	font-size: 0.8rem;
}
.link-card-title {
	overflow-wrap: anywhere;
}
.link-card-description {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: var(--stoop-muted);
}
@media (max-width: 30rem) {
	.link-card {
		flex-direction: column;
		gap: 0;
	}
	.link-card img {
		width: 100%;
		max-height: 12rem;
	}
	.link-card-text {
		padding: 0.65rem 0.85rem;
	}
}

/* "Also on Mastodon, Instagram": where else a post was published, small
 * and quiet beside its date, each with the service's logo. */
.also-on {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.6rem;
	margin: 0 0 0 0.75rem;
	color: var(--stoop-muted);
	font-size: 0.8rem;
	vertical-align: middle;
}
.also-on a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: inherit;
	text-decoration: none;
}
.also-on a:hover {
	color: var(--stoop-accent);
}
.also-on svg {
	width: 0.95rem;
	height: 0.95rem;
	flex: none;
}

/* Like and boost counts beside a listed post's date. */
.post-counts {
	display: inline-flex;
	gap: 0.6rem;
	margin-left: 0.75rem;
	color: var(--stoop-muted);
	font-size: 0.8rem;
	vertical-align: middle;
}
.post-counts > span {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
.post-counts svg {
	width: 0.9rem;
	height: 0.9rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Text for screen readers only. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Older and newer posts. */
.pager {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.5rem 0;
}

/* Fediverse posts: another account's posts, or a grid of its pictures. */
.block-fediverse .fediverse-posts {
	list-style: none;
	padding: 0;
	margin: 0;
}
.block-fediverse .fediverse-post {
	padding: 0.75rem 0;
}
.block-fediverse .fediverse-post + .fediverse-post {
	border-top: 1px solid var(--stoop-border);
}
.block-fediverse .fediverse-content > :first-child {
	margin-top: 0;
}
.block-fediverse .fediverse-content > :last-child {
	margin-bottom: 0.35rem;
}
.block-fediverse .fediverse-pictures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: 0.35rem;
	margin: 0.5rem 0;
}
.block-fediverse .fediverse-pictures img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 24rem;
	object-fit: cover;
	border-radius: calc(var(--stoop-radius) / 2);
}
.block-fediverse :is(.fediverse-meta, .fediverse-more) {
	color: var(--stoop-muted);
	font-size: 0.85em;
}
.block-fediverse .fediverse-meta a {
	color: inherit;
}
.block-fediverse .fediverse-tiles {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
	gap: 0.35rem;
}
.block-fediverse .fediverse-tiles img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: calc(var(--stoop-radius) / 2);
}

/* SoundCloud: tracks with artwork and a "Play here" button each. */
.block-soundcloud .soundcloud-tracks {
	list-style: none;
	padding: 0;
	margin: 0;
}
.block-soundcloud .soundcloud-track {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	padding: 0.6rem 0;
}
.block-soundcloud .soundcloud-track + .soundcloud-track {
	border-top: 1px solid var(--stoop-border);
}
.block-soundcloud .soundcloud-art {
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
	object-fit: cover;
	border-radius: calc(var(--stoop-radius) / 2);
	background: var(--stoop-surface);
}
.block-soundcloud .soundcloud-no-art {
	display: grid;
	place-items: center;
	color: var(--stoop-muted);
}
.block-soundcloud .soundcloud-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	line-height: 1.3;
}
.block-soundcloud .soundcloud-title {
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.block-soundcloud .soundcloud-title:hover {
	text-decoration: underline;
}
.block-soundcloud .soundcloud-meta {
	color: var(--stoop-muted);
	font-size: 0.85em;
}
.block-soundcloud .embed-player {
	margin: 0.4rem 0 0;
}
/* Once playing, the player takes the whole row. */
.block-soundcloud .soundcloud-track:has(.embed-frame) {
	flex-wrap: wrap;
}

/* Embeds: a link and a "Play here" button; the player loads on click. */
:is(.content, .block-html, .block-soundcloud) .embed-player {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 1rem 0;
}
:is(.content, .block-html, .block-soundcloud) .embed-play {
	font: inherit;
	font-size: 0.9rem;
	padding: 0.4rem 0.9rem;
	border: 0;
	border-radius: 999px;
	background: var(--stoop-accent);
	color: var(--stoop-bg);
	cursor: pointer;
}
:is(.content, .block-html, .block-soundcloud) .embed-note {
	color: var(--stoop-muted);
	font-size: 0.8rem;
}
:is(.content, .block-html, .block-soundcloud) .embed-frame {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--stoop-radius);
}
:is(.content, .block-html) .embed-video {
	display: block;
	aspect-ratio: 16 / 9;
}
:is(.content, .block-html) .embed-video .embed-frame {
	height: 100%;
}

/* Audio and video files: the browser's own player, full width. */
:is(.content, .block-html) audio,
:is(.content, .block-html) video {
	display: block;
	width: 100%;
	max-width: 100%;
}

/* Phones: the menu folds into a "Menu" button (a <details>, no script)
 * beside the site name; it opens a panel with the same links. */
.site-menu {
	position: relative;
}
.site-menu-toggle {
	display: none;
}
@media (max-width: 40rem) {
	.site-menu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}
	.site-menu > ul > li:not(.site-name) {
		display: none;
	}
	.site-menu-toggle {
		display: block;
	}
	.site-menu-toggle > summary {
		list-style: none;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1;
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--stoop-accent);
	}
	.site-menu-toggle > summary::-webkit-details-marker {
		display: none;
	}
	.site-menu-toggle > summary::before {
		content: "•••";
		font-size: 1.4rem;
		letter-spacing: 0.05em;
		margin-bottom: 0.2rem;
	}
	.site-menu-toggle[open] > summary::before {
		content: "✕";
	}
	.site-menu-toggle > ul {
		position: absolute;
		z-index: 20;
		top: calc(100% + 0.5rem);
		right: 0;
		min-width: 12rem;
		display: flex;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 0.5rem 0;
		list-style: none;
		text-align: left;
		background: var(--stoop-bg);
		border: 1px solid var(--stoop-border);
		border-radius: var(--stoop-radius, 0.5rem);
		box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.25);
	}
	.site-menu-toggle > ul a {
		display: block;
		padding: 0.6rem 1.25rem;
		color: var(--stoop-accent);
		font-size: 1.1rem;
	}
}

/* Notes in post lists: the whole item opens the note (its date is the
 * link; links and buttons inside still work on their own). */
.post-item {
	position: relative;
}
.post-item.post-note .permalink::after {
	content: "";
	position: absolute;
	inset: 0;
}
.post-item.post-note :is(.note-content a, button, summary, audio, video) {
	position: relative;
	z-index: 1;
}

/* A missing page. */
.not-found {
	min-height: 40vh;
}

/* Details: a profile's contact details, label beside value. */
.block-details dl.details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.35rem 1rem;
	margin: 0;
}
.block-details dt {
	color: var(--stoop-muted);
	font-size: 0.9em;
}
.block-details dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* Search (the search page and the Search block). */
.search-form {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 1rem;
}
.search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--stoop-border);
	border-radius: var(--stoop-radius);
	background: var(--stoop-surface);
	color: var(--stoop-text);
	font: inherit;
}
.search-form button {
	padding: 0.5rem 1rem;
	border: 1px solid var(--stoop-accent);
	border-radius: var(--stoop-radius);
	background: var(--stoop-accent);
	color: var(--stoop-bg);
	font: inherit;
	cursor: pointer;
}
.search-count {
	color: var(--stoop-muted);
}
.search-results {
	list-style: none;
	margin: 0;
	padding: 0;
}
.search-result {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--stoop-border);
}
.search-result h2 {
	margin: 0 0 0.2rem;
	font-size: 1.15rem;
}
.search-meta {
	margin: 0 0 0.3rem;
	color: var(--stoop-muted);
	font-size: 0.85rem;
}
.search-snippet {
	margin: 0;
	overflow-wrap: anywhere;
}
.search-page mark,
.search-result mark {
	padding: 0 0.1em;
	border-radius: 0.2em;
	background: color-mix(in srgb, var(--stoop-accent) 25%, transparent);
	color: inherit;
}
.search-pages {
	display: flex;
	justify-content: space-between;
	margin: 1rem 0;
}

/* Timeline block: a year bar that stays in view, and a line with a dot
 * for each year (architecture 47). */
.block-timeline .timeline {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 1.25rem;
}
.timeline-years {
	position: sticky;
	top: 1rem;
	align-self: start;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
}
.timeline-years ol {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--stoop-border);
}
.timeline-years a {
	display: block;
	padding: 0.15rem 0.6rem;
	color: var(--stoop-muted);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}
.timeline-years a:hover,
.timeline-years a:focus-visible {
	color: var(--stoop-accent);
}
.timeline-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.timeline-year {
	position: relative;
	padding: 0 0 1.75rem 1.25rem;
	border-left: 2px solid var(--stoop-border);
	scroll-margin-top: 1rem;
}
.timeline-year::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	left: -7px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--stoop-accent);
	box-shadow: 0 0 0 3px var(--stoop-bg);
}
.timeline-year h3 {
	margin: 0 0 0.6rem;
	font-size: 1.5rem;
}
.timeline-year h3 a {
	color: inherit;
	text-decoration: none;
}
.timeline-year h3 small {
	color: var(--stoop-muted);
	font-size: 0.85rem;
	font-weight: normal;
}
.timeline-pictures {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
	gap: 0.4rem;
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
}
.timeline-pictures img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--stoop-radius);
}
.timeline-posts {
	margin: 0 0 0.4rem;
	padding-left: 1.1rem;
}
.timeline-posts small {
	color: var(--stoop-muted);
}
.timeline-more {
	margin: 0;
	font-size: 0.9rem;
}
.year-count {
	color: var(--stoop-muted);
}
.year-pages {
	display: flex;
	justify-content: space-between;
	margin: 1rem 0;
}
@media (max-width: 40rem) {
	/* Phones: the years become a strip across the top. */
	.block-timeline .timeline {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}
	.timeline-years {
		top: 0;
		z-index: 2;
		max-height: none;
		overflow-x: auto;
		background: var(--stoop-bg);
	}
	.timeline-years ol {
		display: flex;
		border-left: 0;
		border-bottom: 2px solid var(--stoop-border);
	}
	.timeline-years li {
		flex: none;
		white-space: nowrap;
	}
	.timeline-years a {
		padding: 0.4rem 0.6rem;
	}
	.timeline-year {
		scroll-margin-top: 3rem;
	}
}


/* ---- Desktop, on top of Default ---- */

/*
 * Desktop: a black-and-white computer desktop from 1984, built on the
 * default theme (theme.json "extends"). A dithered desktop, a menu bar
 * across the top, and each block a window with a striped title bar and a
 * close box. Headings in ChicagoFLF (bundled, public domain), text in
 * Geneva where the visitor has it.
 */
@font-face {
	font-family: ChicagoFLF;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/ChicagoFLF.ttf") format("truetype");
}

:root {
	--stoop-bg: #ffffff;
	--stoop-surface: #ffffff;
	--stoop-text: #000000;
	--stoop-muted: #444444;
	--stoop-accent: #000000;
	--stoop-border: #000000;
	--stoop-desk: #000000;
	--stoop-desk-light: #ffffff;
	--stoop-font: Geneva, Verdana, Tahoma, "DejaVu Sans", sans-serif;
	--stoop-font-heading:
		ChicagoFLF, Charcoal, Geneva, Verdana, "DejaVu Sans", sans-serif;
	--stoop-width: 44rem;
	--stoop-radius: 0;
	--stoop-pattern:
		repeating-conic-gradient(
			var(--stoop-desk) 0 25%,
			var(--stoop-desk-light) 0 50%
		)
		0 0 / 2px 2px;
	/* The title bar's height. */
	--bar: 1.45rem;
	color-scheme: light;
}
/* No dark version: it's a period piece (its "Night shift" style is the
 * dark one). */
@media (prefers-color-scheme: dark) {
	:root {
		--stoop-bg: #ffffff;
		--stoop-surface: #ffffff;
		--stoop-text: #000000;
		--stoop-muted: #444444;
		--stoop-accent: #000000;
		--stoop-border: #000000;
	}
}

body {
	background:
		var(--stoop-background-image, none) center / cover fixed,
		var(--stoop-pattern);
	/* The desktop stays put while the windows scroll over it: a one-pixel
	 * pattern that moves shimmers. */
	background-attachment: fixed, fixed;
	font-size: 0.9rem;
	line-height: 1.5;
}
::selection {
	background: var(--stoop-text);
	color: var(--stoop-bg);
}
h1,
h2,
h3 {
	font-weight: 400;
	letter-spacing: 0;
}
a {
	color: var(--stoop-accent);
	text-underline-offset: 0.15em;
}
/* Links invert under the pointer, menu items too (:is() takes its most
 * specific part, so this beats the menu's own color). */
:is(a, .site-menu a, .site-menu .site-name a):hover {
	background: var(--stoop-text);
	color: var(--stoop-bg);
	text-decoration: none;
}

/* The menu bar. */
.site-header {
	max-width: none;
	margin: 0;
	padding: 0.25rem max(1rem, calc((100% - var(--stoop-width)) / 2));
	background: var(--stoop-bg);
	border-bottom: 1px solid var(--stoop-border);
}
.site-menu,
.site-menu a,
.site-menu-toggle summary {
	font-family: var(--stoop-font-heading);
	font-size: 0.9rem;
	color: var(--stoop-text);
	text-decoration: none;
}
.site-menu a {
	padding: 0.1rem 0.4rem;
}
.site-menu .site-name a {
	font-size: 0.95rem;
}

main {
	padding-top: 1.5rem;
}

/* A window: a line, a hard one-pixel shadow, a title bar with stripes and a
 * close box. Every block is one, and so is a page without blocks (a post,
 * a tag page). */
.block,
main:not(.page):not(.auth) {
	position: relative;
	margin: 0 0 1.5rem;
	padding: calc(var(--bar) + 0.75rem) 1rem 1rem;
	background:
		linear-gradient(var(--stoop-border), var(--stoop-border)) 0 var(--bar) /
		100% 1px no-repeat,
		repeating-linear-gradient(
			to bottom,
			var(--stoop-border) 0 1px,
			var(--stoop-bg) 1px 2px
		)
		0.25rem 0.3rem / calc(100% - 0.5rem) calc(var(--bar) - 0.55rem) no-repeat,
		var(--stoop-bg);
	border: 1px solid var(--stoop-border);
	box-shadow: 2px 2px 0 var(--stoop-border);
}
main:not(.page):not(.auth) {
	margin: 1.5rem auto 4rem;
	padding-bottom: 2rem;
}
/* The close box. */
.block::before,
main:not(.page):not(.auth)::before {
	content: "";
	position: absolute;
	top: calc((var(--bar) - 0.8rem) / 2);
	left: 0.6rem;
	width: 0.8rem;
	height: 0.8rem;
	background: var(--stoop-bg);
	border: 1px solid var(--stoop-border);
	box-shadow: 0 0 0 0.4rem var(--stoop-bg);
}
/* The block's heading sits in the title bar, on a clear patch. */
.block > h2:first-child {
	width: fit-content;
	max-width: calc(100% - 4rem);
	margin: calc(-1 * (var(--bar) + 0.75rem)) auto 0.9rem;
	padding: 0 0.5rem;
	overflow: hidden;
	background: var(--stoop-bg);
	font-size: 0.9rem;
	line-height: var(--bar);
	white-space: nowrap;
	text-overflow: ellipsis;
}
.page-side .block h2 {
	font-size: 0.9rem;
}
.block-cover,
.block.block-cover {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}
.block-cover::before {
	content: none;
}

/* The profile: a framed portrait. */
.avatar {
	border-radius: 0;
	border: 1px solid var(--stoop-border);
}
h1 {
	font-size: 1.5rem;
}
.block-bio > header h1 {
	font-size: 1.3rem;
}

/* Posts: separated by a dotted line, like a list window. */
.post-item {
	border-bottom: 1px dotted var(--stoop-border);
}
.post-item.post-article > a:first-child,
.post article h1 {
	font-family: var(--stoop-font-heading);
	font-weight: 400;
}
blockquote {
	border-left: 2px solid var(--stoop-border);
	color: var(--stoop-text);
}
pre,
code {
	background: var(--stoop-surface);
	border: 1px solid var(--stoop-border);
	border-radius: 0;
}
code {
	border: 0;
}

/* Buttons: rounded rectangles that invert when pressed. */
button,
.block-links.style-buttons a,
.block-links.style-row a,
.pager a {
	border: 1px solid var(--stoop-border);
	border-radius: 0.45rem;
	background: var(--stoop-bg);
	color: var(--stoop-text);
	font-family: var(--stoop-font-heading);
	text-decoration: none;
	box-shadow: none;
}
button:hover,
button:active,
.block-links.style-buttons a:hover,
.block-links.style-row a:hover,
.pager a:hover {
	background: var(--stoop-text);
	color: var(--stoop-bg);
}

/* Pictures framed, square. */
.attachments img,
.block-image img,
ul.photo-grid img,
.top8 img,
.top8-initial,
.music-cover,
.link-card,
.link-card img {
	border-radius: 0;
}
.attachments img,
.block-image img,
.link-card {
	border: 1px solid var(--stoop-border);
}

/* Details: a "Get Info" window. */
.block-details dt {
	font-family: var(--stoop-font-heading);
}