/* ============================================================
   MAIN CONTENT
   ============================================================ */

/*
  TOC
   1. CTA Links
   2. Layout & Container
   3. Post Dividers
   4. Images
   5. Section Labels
   6. Typography
   7. Post Navigation
   8. Paging Navigation
   9. Comments
  10. Articles
  11. Archive
  12. Two-Column Layout
  13. Blog & Format Spacing
  14. Archive Filter Bar
  15. Tags Sidebar
  16. Tag Sort Toggle
  17. Plugin Overrides
  18. Entry Tags
  19. Social / Follow Icons
  20. Jetpack Related Posts
*/


/* ---- 1. CTA Links ---- */

/* Shared CTA link style — used for "Read Post", "All posts", "View all links", etc. */

.cta-link,
.cta-link:visited {
	display: inline-block;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 2px solid var(--color-link);
	padding-bottom: 1px;
}

.cta-link:hover {
	color: var(--color-link-hover);
}


/* ---- 2. Layout & Container ---- */

.site-content {
	max-width: var(--content-width);
	margin: 0 auto;
	padding-top: 100px;
	padding-left: 1.25em;
	padding-right: 1.25em;
	box-sizing: border-box;
}

.site-content::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--color-text);
    margin-bottom: 1.5em;
}

/* ---- 3. Post Dividers ---- */

/* Post divider — shown between posts on multi-post views (index, archive, search) */

.hentry {
	margin-bottom: 3em;
	padding-bottom: 2.5em;
	border-bottom: 1px solid var(--color-border);
}

/* Remove divider on single-post and page views */
.single .hentry,
.page .hentry {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.entry-content{
	padding: 1em 0;
}

.entry-content img {
	padding-bottom: 1em;
}

/* ---- 4. Images ---- */

/* Full-width cover image — 16:9, object-fit cover, bordered.
   Apply .img-cover to any <img> to get this treatment.
   Also used automatically on .home-featured-image-link img. */
.img-cover,
.home-featured-image-link img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	border: 5px solid var(--color-image-border);
	box-sizing: border-box;
}

/* Full-width framed image — natural aspect ratio preserved, bordered.
   Use .img-framed on editorial images (screenshots, photos) where you
   want the full image shown without cropping.
   In the block editor, Additional CSS class goes on the <figure> wrapper,
   so both selectors are needed. */
.img-framed,
figure.img-framed img {
	width: 100%;
	height: auto;
	display: block;
	border: 5px solid var(--color-image-border);
	box-sizing: border-box;
	padding-bottom: 0; /* overrides .entry-content img padding-bottom */
	margin-bottom: 0;
}

figure.img-framed {
	margin: 0 0 1em 0;
	width: 100%;
}

.post-thumbnail {
	text-align: center;
}

.post-thumbnail img {
    border: 5px solid var(--color-image-border);
    box-sizing: border-box;
}

/* ---- 5. Section Labels ---- */

/* Canonical section label — orange accent badge with white text.
   Use .section-label in markup. The legacy aliases below keep old
   templates working; Jetpack's <em> is targeted via CSS only. */
.section-label,
.home-section-label,
.page-title,
.jp-relatedposts-headline em {
	font-family: var(--font-body);
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-style: normal;
	color: #fff;
	background: var(--color-accent);
	display: inline-block;
	padding: 0.3em 0.6em;
	margin-top: 0;
	margin-bottom: 1em;
}

/* ---- 6. Typography ---- */

h1, h2, h3, h4, h5, h6 {
	text-transform: capitalize;
}

h2 {
	font-size: 2.025em;
}

h3 {
	font-size: 1.8em;
}

h4 {
	font-size: 1.35em;
}

.site-content ul,
.site-content ol {
	margin: 0;
	padding: 0 1em 1em;
}

blockquote {
	border-left: 10px solid var(--color-accent);
	padding-left: 1em;
	margin-left: .5em;
}


/* ---- 7. Post Navigation ---- */

.post-navigation {
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid var(--color-border);
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 1em;
}

.post-navigation a,
.post-navigation a:visited {
	display: inline-block;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 2px solid var(--color-link);
	padding-bottom: 1px;
}

.post-navigation a:hover {
	color: var(--color-link-hover);
}

#nowwhat {
	color: var(--color-light-text);
	text-align: center;
}

#nowwhat p {
	margin: 0 0 .5em;
}

/* ---- 8. Paging Navigation ---- */

.paging-navigation {
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid var(--color-border);
	overflow: hidden;
}

.paging-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 1em;
}

.paging-navigation a {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--color-accent);
	padding: 0.4em 0.75em;
	transition: opacity var(--transition-fast);
}

.paging-navigation a:visited {
	color: #fff;
}

.paging-navigation a:hover {
	opacity: 0.85;
	color: #fff;
}

.paging-navigation .nav-next {
	margin-left: auto;
}

/* ---- 9. Comments ---- */

.comments-area {
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid var(--color-border);
}

/* Shared label style for "X Responses" and "Leave a Reply" headings */
.comments-title,
#reply-title {
	display: inline-block;
	background: var(--color-text);
	color: var(--color-bg);
	font-family: var(--font-body);
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.3em 0.6em;
	margin-bottom: 1.5em;
}

/* Comment list — two classes (0,2,0) beats .site-content ol/ul (0,1,1) */
.comments-area .comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .comment,
.comment-list .pingback {
	border-top: 2px solid var(--color-text);
	padding: 1.25em 0;
}

.comment-body {
	padding: 5px;
}

/* Subtle alternating row tint */
.comment-list li.even .comment-body {
	background: rgba(0, 0, 0, 0.03);
}

@media (prefers-color-scheme: dark) {
	.comment-list li.even .comment-body {
		background: rgba(255, 255, 255, 0.03);
	}
}

/* Comment meta: flex row — avatar group + date, all vertically centred */
.comment-meta {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-bottom: 0.75em;
}

/* Author row: avatar + name + optional badge in a flex row */
.comment-author {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.comment-author img.avatar {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.comment-author .fn {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9em;
}

.comment-author .fn a,
.comment-author .fn a:visited {
	color: var(--color-text);
	text-decoration: none;
}

.comment-author .fn a:hover {
	color: var(--color-link);
}

/* Fediverse / open web indicator badge */
.comment-fediverse-badge {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.65em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--color-text);
	background: var(--color-accent-muted);
	padding: 0.2em 0.45em;
	white-space: nowrap;
}

/* Date */
.comment-metadata {
	font-size: 0.75em;
	color: var(--color-light-text);
}

.comment-metadata a,
.comment-metadata a:visited {
	color: var(--color-light-text);
	text-decoration: none;
}

.comment-metadata a:hover {
	color: var(--color-link);
}

/* Comment text */
.comment-content {
	overflow: hidden;
	font-size: 0.95em;
}

.comment-content p:last-child {
	margin-bottom: 0;
}

/* Awaiting moderation */
.comment-awaiting-moderation {
	font-size: 0.8em;
	color: var(--color-light-text);
	font-style: italic;
}

/* Reply link — matches .cta-link style */
.comment-reply-link,
.comment-reply-link:visited {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 2px solid var(--color-link);
	padding-bottom: 1px;
	margin-top: 0.75em;
}

.comment-reply-link:hover {
	color: var(--color-link-hover);
}

/* Nested replies */
.comment-list .children {
	list-style: none;
	padding-left: 1.5em;
	margin: 0;
	border-left: 2px solid var(--color-border);
}

/* Comment navigation (paginated comments) */
.comment-navigation {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1.5em;
	font-size: 0.8em;
}

.comment-navigation a {
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 2px solid var(--color-link);
	padding-bottom: 1px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: var(--font-body);
	font-size: 0.85em;
}

/* Comment form */
#respond {
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid var(--color-border);
}

.comment-notes,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label,
.comment-form-comment label {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-light-text);
	margin-bottom: 0.35em;
}

.comment-notes {
	margin-bottom: 1.25em;
}

.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-comment {
	margin-bottom: 1em;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 0.9em;
	padding: 0.6em 0.75em;
	outline: none;
	transition: border-color var(--transition-fast);
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	border-color: var(--color-text);
}

.comment-form textarea {
	height: 8em;
	resize: vertical;
}

#submit {
	background: var(--color-accent);
	border: none;
	color: #fff;
	font-family: var(--font-body);
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.65em 1.5em;
	cursor: pointer;
	transition: background-color var(--transition-base);
}

#submit:hover {
	background: var(--color-link-hover);
}

/* ---- 10. Articles ---- */

.entry-title,
.stream-page-title {
	font-size: 2.7em;
	text-align: center;
	line-height: 1.05em;
	padding: 0;
	text-shadow: 1px 1px #eee;
}

.entry-title a {	
	text-decoration: none;
}

.entry-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4em 0.6em;
	font-size: .8em;
	padding: 0 0 1em;
	color: var(--color-light-text);
}


.entry-content a,
.entry-content a:visited {
	color: var(--color-link);
	text-decoration: none;
	transition: color .15s ease-in-out;
}

.entry-content a:hover {
	color: var(--color-link-hover);
	text-decoration: underline;
}


/* Responsive video embeds
 * Fixes fixed-pixel iframes (YouTube etc.) overflowing on mobile.
 * .wp-block-embed__wrapper = Gutenberg block wrapper
 * Fallback max-width covers raw iframes in classic editor posts.
 */
.entry-content .wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
}

.entry-content .wp-block-embed__wrapper iframe,
.entry-content .wp-block-embed__wrapper embed,
.entry-content .wp-block-embed__wrapper object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Bare iframes not inside a wrapper (classic editor / manual embeds) */
.entry-content iframe {
	max-width: 100%;
}

/* ---- 11. Archive ---- */

/* Archive year headers */

.archive-year-header {
	cursor: pointer;
	user-select: none;
}

.archive-year-header::before {
	content: '▼';
	display: inline-block;
	font-size: 0.55em;
	margin-right: 0.6em;
	vertical-align: middle;
	transition: transform var(--transition-base);
	color: var(--color-accent);
}

.archive-year-header.closed::before {
	transform: rotate(-90deg);
}

/* Archive post format indicators */
.archive-post-date {
	color: var(--color-accent-muted);
	font-variant-numeric: tabular-nums;
}

.archive-format {
	list-style: none;
	padding-bottom: 0.25em;
}

.archive-format a,
.archive-format a:visited {
	color: var(--color-accent);
	text-decoration: none;
}

.archive-format a:hover {
	text-decoration: underline;
}

/* Icon on the <a> so it's part of the clickable area.
   Dark mode: filter:invert(1) applied only inside the dark media query —
   avoids the flash caused by applying invert as a base rule and removing it in light mode. */
.archive-format a::before {
	content: '';
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
	margin-right: 0.45em;
}

.archive-format-link a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}

.archive-format-standard a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}

.archive-format-video a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='15' rx='2' ry='2'/%3E%3Cpolyline points='17 2 12 7 7 2'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
	.archive-format a::before {
		filter: invert(1);
	}
	.entry-title {
		text-shadow: none;
	}
}


/* ---- 12. Two-Column Layout ---- */

/* Shared two-column page layout — used by Archives, Links, About, and other page templates */

.two-col-layout,
.home-two-column {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 0;
	align-items: start;
}

.two-col-main {
	padding-right: 2.5em;
	border-right: 1px solid var(--color-border);
}

.two-col-sidebar {
	padding-left: 2em;
}

/* When a home-sidebar-articles div sits inside .two-col-sidebar, reset its own padding */
.two-col-sidebar .home-sidebar-articles {
	padding-left: 0;
}

@media (prefers-color-scheme: dark) {
	.two-col-main {
		border-right-color: #2A3A4A;
	}
}

/* ---- 13. Blog & Format Spacing ---- */

/* Blog index + post format archive spacing — match gap above/below filter bar */
.blog .archive-type-filter,
.tax-post_format .archive-type-filter {
	padding-top: 0;
}
.blog .site-content::before,
.tax-post_format .site-content::before {
	margin-bottom: 1em;
}
.blog .site-main,
.tax-post_format .site-main {
	padding-bottom: 4em;
}

/* ---- 14. Archive Filter Bar ---- */

.archive-type-filter {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 1.5em;
	padding-bottom: 0.5em;
	margin-bottom: 1em;
	border-bottom: 1px solid var(--color-border);
}

/* Shared styles for all filter bar items — works for both <button> and <a> */
.archive-filter-btn,
.archive-filter-btn:visited,
.archive-filter-tags-link {
	background: none;
	border: none;
	border-left: 1px solid var(--color-border);
	font-family: var(--font-body);
	font-size: 0.8em;
	font-weight: 700;
	color: var(--color-light-text);
	cursor: pointer;
	padding: 0 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.archive-filter-btn:first-child {
	border-left: none;
	padding-left: 0;
}

.archive-filter-btn.active,
.archive-filter-btn:hover,
.archive-filter-tags-link:hover {
	color: var(--color-accent);
}

/* Tags scroll button — mobile only (hidden on desktop via responsive.css) */
.archive-filter-tags-link {
	display: none;
}


/* ---- 15. Tags Sidebar ---- */

/* Tags sidebar list — mirrors homepage sidebar item style */

ul.archive-tag-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.archive-tag-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 2px solid var(--color-text);
	padding: 0.6em 0;
}

.archive-tag-item a,
.archive-tag-item a:visited {
	font-family: var(--font-body);
	font-size: 0.9em;
	font-weight: 700;
	color: var(--color-text);
	text-decoration: none;
	line-height: 1.3em;
}

.archive-tag-item a:hover {
	color: var(--color-link);
	text-decoration: underline;
}

.archive-tag-count {
	font-size: 0.7em;
	color: var(--color-faded-text);
	flex-shrink: 0;
	margin-left: 0.5em;
}

/* ---- 16. Tag Sort Toggle ---- */

.archive-tag-sort {
	display: flex;
	gap: 1em;
	padding: 0.5em 0;
	border-top: 2px solid var(--color-text);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 0;
}

.archive-tag-sort-btn {
	background: none;
	border: none;
	font-family: var(--font-body);
	font-size: 0.75em;
	font-weight: 700;
	color: var(--color-light-text);
	cursor: pointer;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: color var(--transition-fast);
}

.archive-tag-sort-btn.active,
.archive-tag-sort-btn:hover {
	color: var(--color-accent);
}


/* ---- 17. Plugin Overrides ---- */

.pinboard-bookmarks-title {
	margin: 0;
	padding: 0;
}

/* ---- 18. Entry Tags ---- */

.entry-tags {
    margin-top: 2em;
    padding-top: 1.5em;
    border-top: 1px solid var(--color-border);
}

.entry-tags a,
.entry-tags a:visited {
    font-family: var(--font-body);
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text);
    background: var(--color-image-border);
    display: inline-block;
    padding: 0.3em 0.6em;
    margin: 0.25em 0.25em 0.25em 0;
    text-decoration: none;
}

.entry-tags a:hover {
    opacity: 0.75;
    color: var(--color-text);
}


/* ---- 19. Social / Follow Icons ---- */

/* Base icon class — used on the about page and in the site footer on all pages.
   SVG backgrounds are defined below. Layout/structure rules live in about.css. */

.about-follow-icon {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.about-follow-icon--rss {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111111'%3E%3Cpath d='M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 13.27v-3.17Z'/%3E%3C/svg%3E");
}

.about-follow-icon--fedi { /* Mastodon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111111'%3E%3Cpath d='M21.327 8.566c0-4.339-2.843-5.61-2.843-5.61-1.433-.658-3.894-.935-6.451-.956h-.063c-2.557.021-5.016.298-6.45.956 0 0-2.843 1.272-2.843 5.61 0 .993-.019 2.181.012 3.441.103 4.243.778 8.425 4.701 9.463 1.809.479 3.362.579 4.612.51 2.268-.126 3.541-.809 3.541-.809l-.075-1.646s-1.621.511-3.441.449c-1.804-.062-3.707-.194-3.999-2.409a4.523 4.523 0 0 1-.04-.621s1.77.433 4.014.536c1.372.063 2.658-.08 3.965-.236 2.506-.299 4.688-1.843 4.962-3.254.434-2.223.398-5.424.398-5.424zm-3.353 5.59h-2.081V9.057c0-1.075-.452-1.62-1.357-1.62-1 0-1.501.647-1.501 1.927v2.791h-2.069V9.364c0-1.28-.501-1.927-1.502-1.927-.905 0-1.357.546-1.357 1.62v5.099H6.026V8.903c0-1.074.273-1.927.823-2.558.567-.631 1.307-.955 2.228-.955 1.065 0 1.872.409 2.405 1.228l.518.869.519-.869c.533-.819 1.34-1.228 2.4-1.228.92 0 1.66.324 2.228.955.549.631.822 1.484.822 2.558v5.253z'/%3E%3C/svg%3E");
}

.about-follow-icon--sky { /* Bluesky */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111111'%3E%3Cpath d='M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.249 1.031 0 .39V19.5c1.437.866 4.048.406 5.702-.534C8.29 17.399 9.046 14.5 12 14.5c2.953 0 3.71 2.899 6.298 4.466 1.653.94 4.265 1.4 5.702.534V.39c-1.249.64-2.566.554-5.202 2.415C16.045 4.748 13.087 8.686 12 10.8z'/%3E%3C/svg%3E");
}

.about-follow-icon--scrobble { /* Last.fm */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111111'%3E%3Cpath d='M10.584 17.21l-.88-2.392s-1.43 1.595-3.573 1.595c-1.897 0-3.244-1.65-3.244-4.289 0-3.381 1.704-4.596 3.38-4.596 2.419 0 3.19 1.567 3.849 3.574l.879 2.749c.879 2.666 2.528 4.809 7.28 4.809 3.409 0 5.72-1.044 5.72-3.793 0-2.226-1.265-3.381-3.629-3.931l-1.759-.385c-1.21-.275-1.567-.77-1.567-1.594 0-.934.742-1.484 1.952-1.484 1.32 0 2.034.494 2.144 1.677l2.749-.33c-.22-2.474-1.924-3.49-4.728-3.49-2.474 0-4.893.935-4.893 3.931 0 1.869.907 3.051 3.19 3.601l1.869.44c1.374.33 1.869.88 1.869 1.759 0 1.045-.99 1.484-2.859 1.484-2.749 0-3.904-1.43-4.563-3.381l-.907-2.776C12.409 8.022 10.749 6 7.011 6 3.217 6 0 8.089 0 12.19c0 3.959 2.254 6.323 6.02 6.323 3.107 0 4.564-1.303 4.564-1.303z'/%3E%3C/svg%3E");
}

.about-follow-icon--ig { /* Instagram */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E");
}

.about-follow-icon--gg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='12' x2='10' y2='12'/%3E%3Cline x1='8' y1='10' x2='8' y2='14'/%3E%3Cline x1='15' y1='13' x2='15.01' y2='13'/%3E%3Cline x1='18' y1='11' x2='18.01' y2='11'/%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z'/%3E%3C/svg%3E");
}

.about-follow-icon--shelf { /* Storygraph */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}

.about-follow-icon--reel { /* Letterboxd */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='15' rx='2' ry='2'/%3E%3Cpolyline points='17 2 12 7 7 2'/%3E%3C/svg%3E");
}

.about-follow-icon--clip { /* Instapaper */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* ---- 20. Jetpack Related Posts ---- */

#jp-relatedposts {
    margin-top: 3em;
    padding-top: 2em;
    clear: both;
}

/* Headline — <h3><em>Related</em></h3>
   The <em> receives the canonical section label style (see grouped
   selector at top of this file). The h3 wrapper is just a container.
   Use the same specificity as Jetpack's own rule (#jp-relatedposts h3.jp-relatedposts-headline)
   to override its float: left, display: inline-block, and font-size: 9pt. */
#jp-relatedposts h3.jp-relatedposts-headline {
    font-size: 1em; /* neutralise — inner <em> drives size */
    line-height: 1;
    margin: 0 0 0.5em 0;
    display: block;      /* override Jetpack's inline-block */
    float: none;         /* override Jetpack's float: left */
}

/* Remove Jetpack's decorative divider line above the headline —
   we use our own 4px border-top on #jp-relatedposts instead */
#jp-relatedposts h3.jp-relatedposts-headline em::before {
    display: none;
}

/* Items container: override Jetpack's inline grid layout to a simple block list.
   .jp-relatedposts-items-visual is added by Jetpack in visual/thumbnail mode. */
.jp-relatedposts-items,
.jp-relatedposts-items-visual {
    display: block !important;
    padding: 0 !important;
}

/* Hide thumbnails — we use the plain list layout */
#jp-relatedposts .jp-relatedposts-post-img {
    display: none !important;
}

/* Each post <p> — mirrors .home-more-item */
.jp-relatedposts-post {
    display: block !important;
    margin: 0 !important;
    border-top: 2px solid var(--color-text);
    padding: 0.75em 0 !important;
}

/* Title span */
.jp-relatedposts-post-title {
    display: block;
    margin-bottom: 0.3em;
}

/* Title link — mirrors .home-more-title a.
   Scoped under #jp-relatedposts for specificity (110) to beat both
   general.css a:visited (var(--color-link)) and any Jetpack link rules. */
#jp-relatedposts .jp-relatedposts-post-a,
#jp-relatedposts .jp-relatedposts-post-a:visited {
    font-family: var(--font-body);
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1.35em;
    color: var(--color-text);
    text-decoration: none;
}

#jp-relatedposts .jp-relatedposts-post-a:hover {
    color: var(--color-text);
    text-decoration: underline;
}

/* Date + context — mirrors .home-more-meta */
.jp-relatedposts-post-date,
.jp-relatedposts-post-context {
    font-family: var(--font-body);
    font-size: 0.7em;
    font-weight: 500;
    color: var(--color-light-text);
    display: inline !important; /* override Jetpack's inline style="display:block" on <time> */
}

.jp-relatedposts-post-date::after {
    content: " · ";
    color: var(--color-light-text);
}