/* Fonts */

@font-face {
	font-family: Archivo;
	src: url(/assets/fonts/archivo/Archivo-Regular.woff);
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Archivo;
	src: url(/assets/fonts/archivo/Archivo-Italic.woff);
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: Archivo;
	src: url(/assets/fonts/archivo/Archivo-Bold.woff);
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: Archivo;
	src: url(/assets/fonts/archivo/Archivo-BoldItalic.woff);
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: Departure;
	src: url(/assets/fonts/departure/DepartureMono-Regular.woff);
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Theme colours */
	--cta-yellow: #ffD100;
	--cta-blue: #29ADFF;
	--cta-green: #10D275;
	--cta-red: #FF3668;
	
	/* Backgrounds and text */
	--primary-bg: #020202;
	--secondary-bg: #141414;
	--tertiary-bg: #262626;
	--primary-text: #FFFFFF;
	--secondary-text: #9E9E9E;
}

@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.1s;
}

.no-transition * {
	transition: none !important;
}

body {
	background: var(--primary-bg);
	color: var(--primary-text);
	font-family: "Archivo", sans-serif;
	font-size: 24px;
	line-height: 1.6;
	margin: 0;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Layout Container */

.layout-container {
	display: flex;
	min-height: 100vh;
}

/* Sidebar Styles */

.sidebar {
	width: fit-content;
	background: var(--secondary-bg);
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	height: 100vh;
	overflow-y: auto;
	box-sizing: border-box;
}

.sidebar-header {
	margin-bottom: 32px;
}

.sidebar-logo img {
	width: 100%;
	max-width: 40px;
}

.sidebar-nav {
	flex: 1;
	display: flex;
	align-items: center;
}

.sidebar-links {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sidebar-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 6px;
	transition: all 0.2s ease;
	text-decoration: none;
	color: var(--secondary-text);
	margin-right: 0;
	width: 50px;
	height: 50px;
}

.sidebar-links a:hover {
	background: var(--tertiary-bg);
	color: var(--primary-text);
	text-decoration: none;
	border-radius: 6px;
}

.sidebar-links a.active-page {
	background: var(--tertiary-bg);
	color: var(--primary-text);
	font-weight: bold;
	border-radius: 6px;
}

.sidebar-links a.active-page:before {
	content: none;
}

.sidebar-links a i {
	width: 20px;
	text-align: center;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}


.sidebar-footer {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	width: 50px;
	height: 50px;
}

.sidebar-lastfm {
	width: 100%;
}

.sidebar-dark-toggle {
	align-self: center;
	margin-top: auto;
}

.mobile-dark-toggle {
	display: none;
}

/* Main Content Area */

.main-content {
	flex: 1;
	margin-left: 116px;
	background: var(--primary-bg);
}

/* Legacy header styles - kept for mobile */

header {
	background: var(--secondary-bg);
	padding: 32px;
	display: none;
	position: relative; /* Added for mobile menu positioning */
}

.mobile-menu-toggle {
	background: transparent;
	border: none;
	color: var(--secondary-text);
	font-size: 20px;
	cursor: pointer;
	padding: 12px;
	width: 50px;
	height: 50px;
	border-radius: 6px;
	display: none; /* Hidden by default, shown in media query */
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.mobile-menu-toggle:hover {
	background: var(--tertiary-bg);
	color: var(--primary-text);
}

.mobile-menu {
	display: none; /* Hidden by default */
	position: absolute;
	top: 100%; /* Position below the header */
	left: 0;
	width: 100%;
	background: var(--secondary-bg);
	z-index: 1000;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	padding: 10px 0;
}

.mobile-menu.is-open {
	display: block; /* Shown when active */
}

.mobile-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-menu li {
	padding: 0;
	margin: 0;
}

.mobile-menu-toggle {
	background: transparent;
	border: none;
	color: var(--secondary-text);
	font-size: 20px;
	cursor: pointer;
	padding: 12px;
	width: 50px;
	height: 50px;
	border-radius: 6px;
	display: none; /* Hidden by default, shown in media query */
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.mobile-menu-toggle:hover {
	background: var(--tertiary-bg);
	color: var(--primary-text);
}

.mobile-menu {
	display: none; /* Hidden by default */
	position: absolute;
	top: 100%; /* Position below the header */
	left: 0;
	width: 100%;
	background: var(--secondary-bg);
	z-index: 1000;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	padding: 10px 0;
}

.mobile-menu.is-open {
	display: block; /* Shown when active */
}

.mobile-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-menu li {
	padding: 0;
	margin: 0;
}

.mobile-menu a {
	display: block;
	padding: 15px 32px;
	color: var(--primary-text);
	text-decoration: none;
	font-family: "Departure", monospace;
	font-size: 16px;
	text-transform: uppercase;
	color: var(--secondary-text);
	transition: background 0.2s ease;
}

.mobile-menu a:hover {
	background: var(--tertiary-bg);
	color: var(--primary-text);
}

header .header-top-row {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.header-title img {
	width: 420px;
}

.header-socials, .header-lastfm {
	justify-self: end;
}

.header-controls {
	position: absolute;
	right: 0;
}

a img.logo:hover {
	opacity: .8;
}

.header-title a, .sidebar-logo {
	text-decoration: none;
	display: contents;
}

.rss-subscribe-button {
	background: transparent;
	border: none;
	color: var(--secondary-text);
	font-size: 20px;
	cursor: pointer;
	padding: 12px;
	width: 50px;
	height: 50px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.rss-subscribe-button:hover {
	background: var(--tertiary-bg);
	color: var(--primary-text);
}



header .header-bottom-row {
	margin-top: 12px;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;	
}

.header-bottom-row p {
	margin: 0;
}

.header-bottom-row p {
	font-size: 20px;
	color: var(--secondary-text);
}

.filter-links a, .social-links a, .header-lastfm {
	font-family: 'Departure', monospace;
	text-transform: uppercase;
	color: var(--secondary-text);
	text-decoration: none;
	border-radius: 0;
	white-space: nowrap;
}

.filter-links a:last-of-type, .social-links a:last-of-type, .header-lastfm {
	margin-right: 0;
}

.filter-links a.active {
  color: var(--primary-text);
  font-weight: bold;
  position: relative;
}

.filter-links a.active-page {
	color: var(--primary-text);
}

.filter-links a.active-page:hover {
	text-decoration: none;
}

a.mobile-logo, .invisible {
	display: none;
}

main {
	padding: 0 32px;
	margin: 32px auto;
}

.ellipsis:after {
	content: "..."
}

h1 {
	font-size: 42px;
	line-height: 1.15;
	font-weight: 700;
	text-wrap: pretty;
	font-family: "Archivo", sans-serif;
	margin: 0 0 28px 0;
}

h1 a, h1 a:visited {
	color: var(--primary-text);
	text-decoration: none;
}

h1 a:hover, h2 a:hover {
	color: var(--primary-text);
	text-decoration: underline;
	text-decoration-thickness: 4px;
	text-underline-offset: 6px;
	text-decoration-color: var(--blockquote-color);
}

h2 {
	font-size: 32px;
	line-height: 1.4;
	font-weight: normal;
	margin: 0 0 24px 0;
}

.archive-post h2 {
	font-weight: bold;
}

h3 {
	font-size: 32px;
	line-height: 1.2;
	border-bottom: 6px solid var(--secondary-bg);
	padding-bottom: 6px;
	margin-top: 42px;
	font-family: "Archivo", sans-serif;
	letter-spacing: 0.25px;
	font-weight: bold;
}

h3.archive-header {
	margin-bottom: 30px;
}

a, p a, a span {
	color: var(--primary-text);
	transition: all .1s ease;
	text-decoration-color: var(--secondary-text);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	text-decoration-style: solid;
}

a:hover, p a:hover, a:hover span  {
	color: var(--primary-text);
	text-decoration-color: var(--blockquote-color);
	text-decoration-style: solid;
}

.feed-reading a:hover, .feed-playing a:hover {
	text-decoration-color: var(--blockquote-color);
}

ul {
	padding: 28px 0 0 20px;
	margin: 0;
}

ul li::marker {
	color: var(--secondary-text) !important;
}

ul li ul {
	padding-top: 0;
}

blockquote {
	padding: 0 32px;
	border-left: 6px solid var(--blockquote-color);
	background-size: 140px;
	border-radius: 0 4px 4px 0;
	margin: 0;
	text-wrap: pretty;
}

blockquote::first-letter {
	text-transform: uppercase;
}

.bookmark-note {
	text-wrap: pretty;
}

code {
	background: var(--secondary-bg);
	font-size: 20px;
	padding: 4px 8px;
}

.social-handle, .date, .date-dot, .social-reply {
	color: var(--secondary-text);
	font-family: "Departure", monospace;
	font-size: 16px;
	text-transform: uppercase;
	display: block;
}

.date a {
	text-decoration: none;
	color: var(--secondary-text);
}

.date a:hover, .masto-meta p a:hover, .quote-user-info .handle a:hover {
	text-decoration: underline;
	color: var(--primary-text);
}

.feed-item-reading .date, .feed-item-playing .date, .feed-item-backlog .date, .feed-item-shelved .date, .feed-item-finished .date, .feed-item-records .date {
	margin-top: 26px;
}

.post-list-block {
  margin: 0 auto;
  transition-duration: 0.4s;
}

.grid-sizer, .feed-item {
	width: calc((100% - 96px) / 4);
	box-sizing: border-box;
	margin-bottom: 32px;
}

.feed-note {
	padding: 32px 32px 34px 32px;
}

.feed-note .card-meta-header {
	margin-bottom: 22px;
}


.feed-note p:last-of-type {
	margin: 0;
	text-wrap: pretty;
}

.feed-bookmarks .tag-label svg {
	margin-right: -2px;
}

.feed-bookmarks .card-meta-header .tag-label {
	align-items: initial;
}

.feed-item svg {
	height: 20px;
}

.feed-item .feed-playing svg {
	margin: -3px 1px 0 0;
	height: 22px;
}

.feed-item .feed-records svg {
	margin-top: -2px;
}

.feed-item .feed-bluesky-thread svg, .feed-item .mastodon-reply-content svg {
	margin-top: -7px;
}

.feed-item .feed-bookmarks svg {
	height: 19px;
}

.fav-label, .card-meta-header {
	color: var(--secondary-text);
	font-size: 16px;
	font-family: "Departure", monospace;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 6px;
}

.feed-item {
	background: var(--secondary-bg);
	border-radius: 4px;
	margin-top: 0 !important;
}

.feed-item-blog {
	background: linear-gradient(to bottom left, var(--tertiary-bg) 0%, var(--secondary-bg) 20%);
}

img {
	max-width: 100%;
	height: auto;
}

/* Card hover effect */
.card-hover {
	display: block;
	width: 100%;
	transition: transform 0.2s ease;
}

.card-hover:hover {
	transform: scale(1.05);
}

/* Book covers use fixed pixel dimensions, no aspect ratio needed */

/* Album covers are typically square */
.feed-records .card-hover {
	aspect-ratio: 1/1;
}

.card-hover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Prevent layout shift on masonry pages */
.post-list-block {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	/* Use CSS Grid as initial layout to prevent cards flying in */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px;
}

.post-list-block.masonry-ready {
	opacity: 1;
	/* Masonry will override the grid layout */
}

/* Image fade-in disabled on masonry pages to prevent layout jumping */
.post-list-block img {
	opacity: 1 !important;
	transition: none !important;
}

/* Keep fade-in effect for other pages */
body:not(.has-masonry) img {
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
}

body:not(.has-masonry) img.loaded {
	opacity: 1;
}

video {
	max-width: 100%;
	height: auto;
	display: block;
}

video::-webkit-media-controls {
	display: none !important;
}

video::-webkit-media-controls-panel {
	display: none !important;
}

video::-webkit-media-controls-play-button {
	display: none !important;
}

video::-webkit-media-controls-start-playback-button {
	display: none !important;
}

/* Firefox */

video::-moz-media-controls {
	display: none !important;
}

/* Additional webkit controls */

video::-webkit-media-controls-overlay-play-button {
	display: none !important;
}

video::-webkit-media-controls-timeline {
	display: none !important;
}

video::-webkit-media-controls-current-time-display {
	display: none !important;
}

video::-webkit-media-controls-time-remaining-display {
	display: none !important;
}

video::-webkit-media-controls-mute-button {
	display: none !important;
}

video::-webkit-media-controls-volume-slider {
	display: none !important;
}

video::-webkit-media-controls-fullscreen-button {
	display: none !important;
}

.feed-item-tumblr video {
	width: 100% !important;
	border-radius: 0;
}

.feed-item.feed-item-raindrop-artwork, .feed-item.feed-item-tumblr {
	box-shadow: none;
}

.feed-mastodon hr {
	display: block;
	height: 1px;
	border: 0;
	/* border-top: 1px solid var(--tertiary-bg); */
	margin: 34px 0;
	padding: 0;
}

.feed-item-notes, .feed-item-mastodon, .feed-item-bluesky {
	padding: 0;
}

.fa-earth-americas {
	font-size: 96%;
}

.feed-item-mastodon .date:before, .feed-item-bluesky .date:before {
	content: "";
}

.feed-item-notes p, .feed-item-mastodon p, .bluesky-post-body p, .bluesky-reply-content .bluesky-post-body p:last-of-type, .feed-item-mastodon .mastodon-reply-content p:last-of-type {
	text-wrap: pretty;
	margin: 20px 32px 0 32px;
}

.feed-item-mastodon .post-content-body p:last-of-type, .bluesky-post-body p:last-of-type {
	margin-bottom: 34px;
}

.social-meta-header {
	display: flex;
	align-items: center;
	gap: 8px;
}

.social-meta-header * {
	margin: 0;
	padding: 0;
} 

.feed-item-mastodon p a, .feed-item-bluesky p a {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	display: inline-block;
	margin-bottom: -11px;
}

.feed-item-mastodon .post-content-body p a, .feed-item-bluesky .bluesky-post-body p:nth-of-type(2) a {
	display: none;
}

.feed-item-mastodon .post-content-body p a.mention {
	display: initial;
}

.mastodon-images img {
	width: 100%;
	margin: 0;
	border-radius: 0 0 4px 4px;
}

.bluesky-quote {
	margin: 32px 0 0 0;
	background: var(--secondary-bg);
	border-radius: 0;
	padding: 0 32px 32px 32px;
}

.quote-content {
	display: flex;
	flex-direction: column;
	background: var(--tertiary-bg);
	border-radius: 4px;
}

.quote-author {
	display: flex;
	align-items: center;
	color: var(--primary-text);
	text-decoration: none;
	column-gap: 6px;
}

.quote-images img {
	border-radius: 0 0 4px 4px;
}

.bluesky-quote .quote-author {
	padding: 32px 32px 0 32px;
}

.bluesky-quote .quote-text {
	padding: 0 32px 32px 32px;
}

.quote-author a {
	text-decoration: none;
}

.quote-user-info {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.quote-author .handle {
	color: var(--secondary-text);
	font-family: "Departure", monospace;
	font-size: 16px;
	text-transform: uppercase;
	text-overflow: ellipsis;
	overflow: hidden;
}

.quote-text .p {
	margin: 0;
}

.masto-meta {
	margin: 32px 32px 0 32px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	column-gap: 12px;
	align-items: center;
	margin-bottom: 22px;
}

.masto-meta a {
	text-decoration: none;
}

.masto-meta-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.masto-meta-title svg {
	color: var(--secondary-text);
}

.masto-meta h4 a:hover, .masto-meta-title .social-handle a:hover, .masto-meta a:hover, .quote-user-info .display-name a:hover {
	text-decoration: underline;
	color: var(--primary-text);
	text-decoration-color: var(--blockquote-color);
}

.masto-meta h4 a:hover {
	text-decoration: none;
}

.masto-meta h4, .quote-author .display-name {
	margin: auto 0;
	font-family: 'Departure', monospace;
	text-transform: uppercase;
	font-size: 16px;
	margin-right: 2px;
}

.quote-author .display-name {
	min-width: fit-content;
	margin-right: 10px;
}

.masto-meta p {
	color: var(--secondary-text);
	font-family: "Departure", monospace;
	font-size: 16px;
	margin: 0;
	text-transform: uppercase;
	padding: 0;
}

.masto-meta img, .quote-avatar {
	width: 24px;
	height: 24px;
	margin-right: 5px;
	
}

.quote-avatar {
	border-radius: 100px;
	flex-shrink: 0;
}

.mastodon-avatar, .bluesky-avatar {
	display: block;
	width: 24px;
	height: 24px;
	background: var(--tertiary-bg);
	margin-right: 6px;
	border-radius: 100px;
}

.feed-item-raindrop-bookmarks, .feed-item-blog, .feed-item-linkwarden-bookmarks {
	padding: 32px;
}

.feed-item-raindrop-read, .feed-item-raindrop-started, .feed-item-raindrop-backlog, .feed-item-raindrop-playing, .feed-item-raindrop-shelved, .feed-item-raindrop-finished, .feed-item-raindrop-records, .feed-item-raindrop-readinglist, .feed-item-bookwyrm, .feed-item-backloggd {
	padding: 0;
}

.feed-item-tumblr,
.feed-item-raindrop-artwork {
  background: none;
}

.feed-item-tumblr img, .feed-item-tumblr video, .feed-item-raindrop-artwork img {
	width: 100% !important;
	border-radius: 4px 4px 4px 6px;
}

.feed-item-raindrop-photos img,
.feed-photos img {
	width: 100%;
	border-radius: 0;
}

.feed-photos {
	position: relative;
}

.feed-item-tumblr img {
	max-width: none;
}

.feed-item-reading p, .feed-item-playing p, .feed-item-shelved p, .feed-item-finished p, .feed-item-backlog p, .feed-item-records p {
	margin: 0;
}

.feed-item-reading p::first-letter {
	text-transform: capitalize;
}

.feed-reading, .feed-playing, .feed-records {
	display: flex;
	column-gap: 0;
	align-items: stretch;
}

.feed-playing p, .feed-records p, .feed-reading p {
	text-wrap: pretty;
	hyphens: none;
	margin: 0;
}

.tag-label {
	color: var(--secondary-text);
}

.tag-label i {
	color: var(--secondary-text);
}

.feed-playing p.tag-label, .feed-records p.tag-label, .feed-reading p.tag-label, .feed-blog p.tag-label {
	text-wrap: initial;
}

.card-image {
	// background: var(--tertiary-bg) url(/assets/img/card-img-bg.png) repeat-x top center;
	background: var(--secondary-bg);
	background-position: bottom;
	min-width: 180px;
	display: flex;
	padding: 32px 0;
	justify-content: center;
	align-items: center;
	border-radius: 4px 0 0 4px;
	position: relative;
	overflow: hidden;
}

.card-image::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: var(--card-bg-image);
	background-position: center;
	background-size: cover;
	opacity: 0.7;
	z-index: 0;
}

.card-image img, .card-image picture {
	border-radius: 2px;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	position: relative;
	z-index: 1;
}

.card-image picture {
	display: block;
	width: 100%;
	height: 100%;
}

.card-image a {
	display: block;
}

.feed-item-blog h1 {
	margin: 0 0 20px 0;
}

.feed-item-blog .card-text {
	margin: 0;
}

.card-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px 32px 32px 0;
	align-self: center;
}

.feed-records .card-text {
	min-height: 76px;
}

.feed-reading .card-text, .feed-playing .card-text {
	min-height: 114px;
}

.feed-artwork .raindrop-photo-info {
	padding: 32px;
}

.feed-artwork .raindrop-photo-info h4, .feed-artwork .raindrop-photo-info p {
	margin-top: 0;
}

.feed-artwork .raindrop-photo-info .card-meta-header {
	margin-bottom: 24px;
}

.feed-records .card-body {
	min-height: 130px;
}

.feed-reading img, .feed-playing img, .feed-records img {
	object-fit: cover;
	box-shadow: var(--primary-bg) 0px 0px 12px;
	max-width: initial;
	transition: all .3s ease;
	margin: auto;
	user-select: none;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.feed-reading img {
	width: 120px;
	height: 170px;
}

.feed-playing img {
	width: 120px;
	height: 160px;
}

.feed-records img {
	width: 120px;
	height: 120px;
}

.card-meta-header p {
	margin: 0;
	padding: 0;
}

.card-meta-header .tag-label {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.feed-bookmarks svg {
	margin-top: 2px;
}

.feed-bookmarks .fav-label svg {
	margin-top: -2px;
}

.feed-blog {
	padding: 32px;
}

.feed-blog h1 {
	margin: 0 0 20px 0;
}

.feed-bookmarks .card-meta-header, .feed-blog .card-meta-header {
	margin-bottom: 20px;
	border-radius: 0;
	align-items: center;
}

.tumblr-title {
  font-size: 20px;
  margin-bottom: 12px;
  font-family: "Archivo", sans-serif;
  font-weight: bold;
}

.feed-item-artwork h1, .feed-item-photos h1, .feed-artwork .image, .feed-artwork .tumblr-post, .raindrop-source {
	font-family: "Departure" ,monospace;
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: var(--primary-text);
	position: absolute;
	bottom: 0;
	background: var(--secondary-bg);
	padding: 12px 14px;
	margin: 0;
	display: inline-block;
	text-transform: uppercase;
	font-weight: normal;
	display: flex;
	gap: 7px;
}

.raindrop-source i, .tumblr-post i {
	color: var(--secondary-text);
	font-size: 100%;
}

.tumblr-post svg {
	width: 24px !important;
	height: 24px !important;
	font-size: 16px !important;
}

.tumblr-post a {
	font-size: 16px !important;
	line-height: 1.4 !important;
}

.feed-item-artwork h1 a, .feed-artwork .image, .feed-artwork .image a, .feed-artwork .tumblr-post, .feed-artwork .tumblr-post a, .raindrop-source, .raindrop-source a {
	color: var(--secondary-text);
	text-decoration: none;
	border-radius: 0 0 0 4px;
	word-spacing: -5px;
}

.feed-item-artwork h1 a:hover, .feed-artwork .image a:hover, .feed-artwork .tumblr-post a:hover, .raindrop-source a:hover {
	color: var(--primary-text);
	text-decoration: underline;
	text-decoration-color: var(--blockquote-color);
}

/* Dynamic Tumblr image grid layouts */
.feed-artwork[data-image-count] a {
	display: flex;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
	vertical-align: top;
	font-size: 0;
	align-items: stretch;
	justify-content: stretch;
}

.feed-artwork[data-image-count] a > img {
	width: 100%;
	height: 100%;
	display: block;
	margin: 0;
	padding: 0;
	vertical-align: top;
	line-height: 0;
	object-fit: cover;
	flex: 1;
}

.feed-artwork[data-image-count] a > video {
	width: 100% !important;
	height: auto;
	display: block;
	margin: 0;
	padding: 0;
	vertical-align: top;
	line-height: 0;
}

/* Single image - full width */
.feed-artwork[data-image-count="1"] a {
	display: block;
}

/* Two images - stacked vertically */
.feed-artwork[data-image-count="2"] {
	display: block;
	font-size: 0;
}

.feed-artwork[data-image-count="2"] a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: auto !important;
}

.feed-artwork[data-image-count="2"] a img {
	height: auto !important;
	flex: none;
}

/* Three images - one large, two small */
.feed-artwork[data-image-count="3"] {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 4px;
	font-size: 0;
}

.feed-artwork[data-image-count="3"] a:first-child {
	grid-row: 1 / 3;
}

/* Four images - 2x2 grid */
.feed-artwork[data-image-count="4"] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 4px;
	font-size: 0;
}

/* Five images - 2x3 grid with first image spanning two columns */
.feed-artwork[data-image-count="5"] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 4px;
	font-size: 0;
}

.feed-artwork[data-image-count="5"] a:first-child {
	grid-column: 1 / 3;
}

.feed-artwork[data-image-count="5"] a {
	line-height: 0;
	font-size: 0;
}

.feed-artwork[data-image-count="5"] a img {
	line-height: 0;
	font-size: 0;
}

/* Six images - 2x3 grid */
.feed-artwork[data-image-count="6"] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 4px;
}

/* Seven or more images - 3x3 grid with overflow handling */
.feed-artwork[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]):not([data-image-count="4"]):not([data-image-count="5"]):not([data-image-count="6"]) {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 4px;
}

/* For very large numbers, limit to first 9 images */
.feed-artwork[data-image-count] a:nth-child(n+10) {
	display: none;
}

.feed-item-artwork p, .feed-item-bookmarks img {
	display: none;
}

.feed-item-raindrop-artwork.no-source .raindrop-source {
	opacity: 0;
	width: 1px;
}

.feed-item-bookmarks p {
	padding-left: 30px;
	border-left: 6px solid transparent;
	background: linear-gradient(to bottom, 
		var(--cta-red) 0%, 
		var(--cta-red) 35%, 
		var(--cta-yellow) 35%, 
		var(--cta-yellow) 50%, 
		var(--cta-green) 50%, 
		var(--cta-green) 75%, 
		var(--cta-blue) 75%, 
		var(--cta-blue) 100%);
	background-size: 6px 100%;
	background-repeat: no-repeat;
	background-position: left;
	margin: 0;
}

.feed-item-bookmarks .feed-bookmarks p br {
	display: none;
}

.card-body .date {
	margin-top: 0;
}

.external-arrow {
	font-family: "Departure", monospace;
	color: var(--primary-bg);
	margin-left: 2px;
	position: relative;
	bottom: 6px;
	font-size: 60%;
	line-height: 0;
	font-weight: normal;
	padding: 0 6px 0 8px;
	background: #fff;
	border-radius: 2px;
}

a.read-more {
	text-align: center;
	background: var(--tertiary-bg);
	padding: 16px 22px;
	border-radius: 2px;
	display: block;
	margin: 36px 0 0 0;
	font-family: "Departure", sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: normal;
	text-decoration: none;
	letter-spacing: 1px;
	color: var(--primary-text);
}

a.read-more:hover {
	background: var(--primary-text);
	color: var(--primary-bg);
}

/* Single */

.single {
	max-width: 760px;
	margin: 120px auto;
}

.single h1 {
	font-size: 58px;
	line-height: 1.1;
}

.single h1:before {
	content: "";
	width: 52px;
	height: 6px;
	background: var(--blockquote-color);
	display: block;
	margin-bottom: 46px;
}

.single h2, .single p {
	text-wrap: pretty;
}

.single p img {
	margin: 48px 0;
}

.single ul li {
	margin-bottom: 12px;
}

.single ul li:last-of-type, .single.page ul li, .single.post ul li {
	margin-bottom: 0;
}

.single blockquote {
	text-wrap: initial;
}

.single .date {
	margin-top: 42px;
}

.single .archive-post .date {
	margin-top: 28px;
}

img.about-badge {
	height: 42px;
	margin: 32px 0 46px 0;
}

.per-spacing {
	margin-left: -5px;
}

/* Back to top */

.back-to-top {
	font-family: "Departure", monospace;
	font-size: 24px;
	position: fixed;
	bottom: 32px;
	right: 32px;
	padding: 16px 22px;
	background-color: var(--primary-text);
	color: var(--primary-bg);
	border: none;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	border-radius: 4px;
}

.back-to-top:hover {
	background: var(--blockquote-color);
	color: var(--primary-bg);
	transition: all .1s ease;
}

.back-to-top.show {
	opacity: 1;
	visibility: visible;
}

/* Footer */

footer {
	font-size: 16px;
	color: var(--secondary-text);
	font-family: "Departure", monospace;
	text-transform: uppercase;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr auto;
	margin-top: 32px;
	margin-left: 104px;
	background: var(--secondary-bg);
	padding: 44px;
}

.left-copy-version {
	display: flex;
	gap: 8px;
}

.left-copy-version svg {
	width: 18px;
}

.footer-spacer {
	content: "";
	width: 60px;
	height: 2px;
	background: var(--tertiary-bg);
	display: inline-block;
	margin-right: 8px;
	vertical-align: middle;
}

.footer-spacer.half {
	width: 30px;
}

footer a {
	color: var(--secondary-text);
	text-decoration: none;
}

.footer-spacer:last-of-type {
	margin-right: 0px;
}

footer a:hover, .footer-links a:hover {
	color: var(--primary-text);
	text-decoration: underline;
	text-decoration-color: var(--blockquote-color);
}

.footer-links {
	display: flex;
	align-items: center;
}

.footer-links a {
	margin-right: 20px;	
}

.footer-links a:last-of-type {
	margin-right: 0;
}

/* Archive */

.archive-post {
	display: block;
	margin: 0 0 60px 0;
}

.archive-post h2 a {
	text-decoration: none;
}

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

.archive-summary, .archive-excerpt {
	text-wrap: pretty;
}

.archive-year-nav li a {
	text-align: center;
	background: var(--secondary-bg);
	padding: 10px 18px;
	display: block;
	margin: 0 0 36px 0;
	font-family: "Departure", sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;	color: var(--primary-text);
	border: 2px solid var(--secondary-bg);
}

.archive-year-nav li a:hover {
	background: var(--tertiary-bg);
}

.archive-year-nav ul {
	padding: 0;
}

.archive-year-nav li {
	display: inline-block;
	margin-right: 8px;
}

.archive-year-nav li a {
	text-decoration: none;
}

.archive-post .date {
	margin-top: 30px;
}

/* Pagination */

.pagination {
	margin: 32px 0;
	font-size: 16px;
	text-align: center;
	font-family: "Departure", monospace;
}

.pagination-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.pagination-links a, .pagination-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 2px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.pagination-links a {
	color: var(--primary-text);
}

.pagination-links a:hover {
	color: var(--primary-text);
	background: var(--tertiary-bg);
}

.pagination-links span.disabled {
	color: var(--primary-bg);
	cursor: not-allowed;
}

.pagination-links span.current {
	color: var(--primary-bg);
	background: var(--blockquote-color);
}

a.pagination-prev:hover, a.pagination-next:hover {
	background: none;
	text-decoration: underline;
	color: var(--primary-text);
	border: none;
}

.filter-dropdown-toggle, .header-mobile-row {
	display: none;
}

/* Link Preview Cards */

.post-content-link .link-preview {
	border-top: 1px solid var(--tertiary-bg);	
}

.link-preview {
	margin: 32px 0 0 0;
	background: var(--tertiary-bg);
	border-radius: 0 0 4px 4px;
	overflow: hidden;
	transition: all 0.2s ease;
}
  
.preview-card {
	display: block;
	text-decoration: none;
	color: inherit;
}
  
.preview-card:hover .preview-url {
	color: var(--secondary-text);
	text-decoration: none;
}

.preview-image {
	width: 100%;
	height: 280px;
	overflow: hidden;
	background: var(--tertiary-bg);
}
  
.preview-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
  
.preview-content {
	padding: 32px;
	margin-bottom: 0;
}
  
.preview-content p.preview-title {
	font-family: "Archivo", sans-serif;
	font-size: 24px;
	line-height: 1.5;
	margin: 0 0 10px 0;
	color: var(--primary-text);
	letter-spacing: 0;
}
  
.preview-url {
	font-family: "Departure", monospace;
	font-size: 16px;
	color: var(--secondary-text);
	text-transform: uppercase;
}

.feed-bluesky-thread, .feed-mastodon-thread {
	background: var(--secondary-bg);
	border-radius: 0 0 4px 4px;
}

.bluesky-original-post, .mastodon-original-post {
	margin-bottom: 0;
}

.bluesky-replies, .mastodon-replies {
	margin-top: 0;
}

.bluesky-reply, .mastodon-reply {
	margin-bottom: 0;
	background: var(--secondary-bg);
	position: relative;
	display: flex;
	align-items: flex-start;
	padding-left: 0;
	border-top: 2px solid var(--primary-bg);
	border-radius: 0 0 4px 4px;
}

.bluesky-reply-content, .mastodon-reply-content {
	flex: 1;
	min-width: 0;
}

.bluesky-reply .masto-meta, .mastodon-reply .masto-meta {
	padding-left: 0;
	column-gap: unset;
}

.bluesky-reply .bluesky-post-body {
	margin-left: 0;
}

.bluesky-reply .bluesky-post-body p, .mastodon-reply .post-content-body p {
	margin-left: 0;
	margin-right: 32px;
}

.bluesky-reply .bluesky-post-body p:last-of-type, .mastodon-reply .post-content-body p:last-of-type {
	margin-bottom: 34px;
}

.bluesky-replies .quote-author .handle, .bluesky-replies .social-handle, .bluesky-replies .date-dot, .bluesky-replies .date {
	margin-top: 0;
}

.update-blog-note {
	padding: 24px 32px;
	display: block;
	background: var(--secondary-bg);
	margin-bottom: 28px;
	border-left: 6px solid var(--blockquote-color);
	background: var(--tertiary-bg);
	background-size: calc(100% - 6px) 100%, 6px 100%;
	background-repeat: no-repeat;
	background-position: 6px 0, left;
}

/* Media queries */

@media (max-width: 2400px) {
	.grid-sizer, .feed-item {
		width: calc((100% - 64px) / 3);
	}
	
	.post-list-block {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 1800px) {
	
	.grid-sizer, .feed-item {
		width: calc((100% - (1 * 32px)) / 2);
	}
	
	.post-list-block {
		grid-template-columns: repeat(2, 1fr);
	}
	
	footer {
		display: block;
	}

	.footer-links {
		margin-top: 18px;
	}

	.footer-spacer {
		display: none;
	}
	
	.line-fill .latest-song, .header-lastfm {
		display: none;
	}
	
	header .header-top-row {
		grid-template-columns: 1fr auto;
	}
	
	.filter-links {
		justify-self: end;
	}
	
	.filter-buttons {
		margin: 0 0 -4px 0;
	}
	
	.filter-buttons a {
		display: inline-block;
	}
	
	.line-fill {
		display: inline-block;
	}
}

@media (max-width: 1320px) {

	.quote-user-info .handle {
		display: none;
	}

}

@media (max-width: 1200px) {
	
	.social-handle, .header-top-row .header-filter-nav {
		display: none;
	}
	
	.header-title img {
		margin: 0; /* Align left */
	}
	
	.dark-mode-toggle {
		display: inline;
	}
	
	.footer-links {
		display: block;
	}
	
	.left-copy-version {
		display: inline-flex;
	}
	
	footer, .footer-links {
		text-align: center;
	}
	
}

@media (max-width: 900px) {

	.grid-sizer, .feed-item {
		width: 100%;
	}
	
	.post-list-block {
		grid-template-columns: 1fr;
	}
	
	.single h1 {
		font-size: 42px;
	}
	
	/* Show mobile header, hide sidebar */
	
	.sidebar {
		display: none;
	}
	
	.main-content {
		margin-left: 0;
	}
	
	header {
		display: block;
	}
	
	.header-title img {
		width: 48px;
	} 
	
	header {
		padding: 24px 32px;
	}
	
	.layout-container {
		flex-direction: column;
	}
	
	.mobile-dark-toggle {
		display: inline-flex;
	}
	
	.mobile-menu-toggle {
		display: flex; /* Show mobile menu toggle on small screens */
	}
	
	footer {
		margin-left: 0;
	}
	
	/* Responsive Tumblr grids for mobile */
	.feed-artwork[data-image-count="3"] {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}
	
	.feed-artwork[data-image-count="3"] a:first-child {
		grid-column: 1 / 3;
		grid-row: 1;
	}
	
	.feed-artwork[data-image-count="5"] {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
	}
	
	.feed-artwork[data-image-count="6"] {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
	}
	
	/* Simplify complex grids on mobile */
	.feed-artwork[data-image-count]:not([data-image-count="1"]):not([data-image-count="2"]):not([data-image-count="3"]):not([data-image-count="4"]):not([data-image-count="5"]):not([data-image-count="6"]) {
		grid-template-columns: 1fr 1fr;
	}
	
}

@media (max-width: 768px) {
	.bluesky-reply-connector, .mastodon-reply-connector {
		width: 32px;
	}
	
	.bluesky-reply .bluesky-post-body p, .mastodon-reply .post-content-body p {
		margin-right: 16px;
	}
}

@media (max-width: 550px) {
	
	main {
		margin: 20px 0;
		padding: 0 20px;
	}
		
	header {
		padding: 20px;
	}
	
	.grid-sizer, .feed-item {
		margin-bottom: 20px;
	}
	
	.footer-links a {
		margin-right: 8px;
	}
	
	.back-to-top {
		bottom: 20px;
		right: 20px;
		font-size: 20px;
		padding: 12px 16px;
	}
	
	a.mobile-logo {
		display: initial;
	}
	
	a.desktop-logo, .masto-meta-title p {
		display: none;
	}
	
	.feed-reading, .feed-playing, .feed-records {
		flex-direction: column;
	}
	
	.card-image {
		padding: 32px 0 0 32px;
		justify-content: left;
	}
	
	.card-body {
		padding: 32px;
		align-self: flex-start;
	}
	
	.feed-reading, .feed-playing, .feed-records {
		column-gap: 0;
	}
	
	.filter-links a.active-page:before {
		content: "";
	}
	
	.feed-blog {
		flex-direction: column;
	}
	  
	.feed-blog .card-image {
		margin-bottom: 20px;
	}
	
}

/* Note single page styles */
.note-page .main-content,
.note-page .main-content main {
	height: 100%;
	min-height: calc(100vh - 120px);
	display: flex;
	align-items: center;
}

.single.note {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: calc(100vh - 200px);
	max-width: 700px;
	margin: 0 auto;
	text-align: left;
	padding: 40px 20px;
	width: 100%;
}

.single.note h1 {
	font-size: 42px;
	margin-bottom: 32px;
}

.single.note h1:before {
	display: none;
}

.single.note .note-content:before {
	width: 48px;
	display: block;
	margin-bottom: 52px;
	height: 6px;
	content: "";
	background: var(--blockquote-color);
}

.single.note .note-content {
	font-size: 24px;
	line-height: 1.6;
	margin-top: 52px;
}

.single.note .note-meta {
	font-size: 16px;
	text-align: left;
	width: 100%;
}

@media (max-width: 768px) {
	.single.note {
		margin: 40px auto;
		padding: 0 20px;
	}
	
	.single.note h1 {
		font-size: 32px;
	}
	
	.single.note .note-content {
		font-size: 18px;
	}
}

/* Settings Panel */
.settings-toggle {
	background: var(--secondary-bg);
	border: 0;
	border-radius: 8px;
	padding: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
}

.settings-toggle:hover {
	background: var(--tertiary-bg);
	color: var(--primary-text);
}

.settings-toggle svg {
	width: 23px;
	height: 23px;
	stroke: var(--secondary-text);
	transition: all 0.3s ease;
}

.settings-toggle:hover svg {
	stroke: var(--primary-text);
}

.settings-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 320px;
	height: 100vh;
	background: var(--secondary-bg);
	border-left: 2px solid var(--border-color);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	z-index: 1000;
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.settings-panel.open {
	transform: translateX(0);
}

.settings-content {
	padding: 32px 24px;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.settings-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border-color);
}

.settings-header h3 {
	margin: 0;
	font-size: 24px;
	color: var(--primary-text);
	font-weight: bold;
}

.settings-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	border-radius: 6px;
	transition: all 0.2s ease;
}

.settings-close:hover {
	background: var(--accent-bg);
}

.settings-close svg {
	width: 20px;
	height: 20px;
	stroke: var(--secondary-text);
}

.settings-close:hover svg {
	stroke: var(--primary-text);
}

.settings-section {
	margin-bottom: 32px;
}

.settings-section h4 {
	margin: 0 0 16px 0;
	font-size: 18px;
	color: var(--primary-text);
	font-weight: 600;
}

.settings-options {
	display: flex;
	gap: 12px;
}

.setting-option {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 12px;
	background: var(--primary-bg);
	border: 2px solid var(--primary-bg);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	color: var(--secondary-text);
}

.setting-option:hover {
	border-color: var(--primary-text);
	background: var(--primary-bg);
	color: var(--primary-text);
}

.setting-option.active {
	border: 2px solid var(--blockquote-color);
	background: var(--tertiary-bg);
	color: var(--primary-text);
}

.setting-option svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
}

/* Settings panel overlay */
body.settings-open::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	opacity: 0;
	animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

/* Social user info styles */
.social-user-info {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 30px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-color);
}

.user-avatar {
	flex-shrink: 0;
}

.user-avatar .avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--border-color);
}

.user-details {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.user-details .display-name {
	color: var(--text-color);
	font-weight: 600;
	line-height: 1.2;
}

/* Artwork user info styles */
.artwork-user-info {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--card-bg);
	border-radius: 0 0 4px 6px;
	border-top: 1px solid var(--border-color);
	margin-top: -1px;
}

.artwork-user-info .user-avatar {
	flex-shrink: 0;
}

.artwork-user-info .user-avatar .avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--border-color);
}

.artwork-user-info .user-details {
	flex: 1;
	min-width: 0;
}

.artwork-user-info .user-details .display-name {
	font-size: 0.85em;
	color: var(--text-color);
	font-weight: 600;
	line-height: 1.2;
}

.artwork-user-info .user-details .username {
	font-family: 'Departure', monospace;
	font-size: 14px;
	color: var(--secondary-text);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.byline:before {
	content: "—";
}

.byline a {
	text-decoration: none;
}

.byline a:hover {
	text-decoration: underline;
}

.byline {
	margin-top: 18px;
}

.username {
	color: var(--secondary-text);
}

}