/* ==========================================================================
   Puddle Theme — screen.css
   A contemplative Ghost theme with puddle/water-hole navigation,
   3D circular marquee, and click-to-fade transitions.
   Designed for poetjrose.com — devotional, poetry, religious blog.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
	/* Brand / accent — sage green */
	--color-accent: #7a9276;
	--color-accent-light: #9caf99;
	--color-accent-dark: #5a6e57;

	/* Backgrounds */
	--color-bg: #faf8f5;
	--color-bg-alt: #f1e5d3;
	--color-surface: #ffffff;

	/* Text */
	--color-text: #3d3b38;
	--color-text-secondary: #6b6560;
	--color-text-muted: #9a938c;

	/* Borders & lines */
	--color-border: #e0dad3;
	--color-border-strong: #c4bbb3;

	/* Semantic */
	--color-success: #5a7e5a;
	--color-warning: #b88645;
	--color-error: #b85757;

	/* Typography */
	--font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-sans:
		"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono: "SF Mono", "Fira Code", "Fira Mono", monospace;

	/* Semantic roles — respect Ghost custom fonts everywhere, fall back to the
	   theme's serif-display + sans-UI pairing. Use these, not the raw families. */
	--font-display: var(--gh-font-heading, var(--font-serif));
	--font-ui: var(--gh-font-body, var(--font-sans));

	--text-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	--text-sm: 0.875rem;
	--text-xs: 0.75rem;
	--text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--text-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);
	--text-3xl: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);

	--leading-relaxed: 1.75;
	--leading-normal: 1.6;
	--leading-tight: 1.25;

	/* Spacing — 8px base grid */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Radii */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(61, 59, 56, 0.06);
	--shadow-md: 0 4px 12px rgba(61, 59, 56, 0.08);
	--shadow-lg: 0 12px 40px rgba(61, 59, 56, 0.12);

	/* Transitions */
	--transition-fast: 180ms ease;
	--transition-base: 300ms ease;
	--transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-marquee: 800ms cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Content width */
	--content-width: 42rem;
	--content-wide: 56rem;
	--content-full: 72rem;

	/* Puddle nav — compact by default so posts remain the focus */
	--puddle-size: 260px;
	--puddle-center-size: 52px;
	--puddle-item-size: 44px;
	--ripple-color: rgba(122, 146, 118, 0.15);
	--ripple-color-strong: rgba(122, 146, 118, 0.25);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--color-accent: #9caf99;
		--color-accent-light: #b5c4b3;
		--color-accent-dark: #7a9276;
		--color-bg: #252320;
		--color-bg-alt: #2d2a27;
		--color-surface: #302d2a;
		--color-text: #e8e4df;
		--color-text-secondary: #b0aaa4;
		--color-text-muted: #7a7570;
		--color-border: #3d3a36;
		--color-border-strong: #504b46;
		--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
		--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
		--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
		--ripple-color: rgba(156, 175, 153, 0.12);
		--ripple-color-strong: rgba(156, 175, 153, 0.18);
	}
}

/* --------------------------------------------------------------------------
   1. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	/* Honour Ghost's custom-font editor settings, falling back to theme fonts. */
	font-family: var(--gh-font-body, var(--font-serif));
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.font-modern {
	font-family: var(--gh-font-body, var(--font-sans));
}

/* Selection */
::selection {
	background: var(--ripple-color-strong);
	color: var(--color-text);
}

/* Links */
a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-accent-dark);
}

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

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--gh-font-heading, var(--font-serif));
	font-weight: 600;
	line-height: var(--leading-tight);
	color: var(--color-text);
}

body.font-modern h1,
body.font-modern h2,
body.font-modern h3,
body.font-modern h4,
body.font-modern h5,
body.font-modern h6 {
	font-family: var(--gh-font-heading, var(--font-sans));
	font-weight: 500;
}

h1 {
	font-size: var(--text-2xl);
}
h2 {
	font-size: var(--text-xl);
}
h3 {
	font-size: var(--text-lg);
}

p {
	margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   3. Layout — Main Content
   -------------------------------------------------------------------------- */
.gh-main {
	position: relative;
	min-height: 80vh;
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
	transition: opacity var(--transition-slow);
}

/* When puddle nav is visible, offset content */
body:not(.no-marquee) .gh-main {
	padding-top: 0;
}

/* --------------------------------------------------------------------------
   4. Puddle Navigation — 3D Circular Marquee
   -------------------------------------------------------------------------- */
.puddle-nav {
	position: fixed;
	right: var(--space-6);
	bottom: var(--space-6);
	width: var(--puddle-size);
	height: var(--puddle-size);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	pointer-events: none;
	transition:
		opacity var(--transition-slow),
		transform var(--transition-slow);
}

.puddle-nav.is-collapsed {
	opacity: 0.3;
}

.puddle-nav.is-expanded {
	opacity: 1;
}

/* On the homepage, the in-content post cluster is the primary puddle. */
.home-template .puddle-nav,
.home-template .puddle-toggle {
	display: none;
}

/* CSS-only frame behind the navigation — no SVG/wireframe rendering */
.puddle-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.puddle-frame-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid var(--ripple-color);
	border-radius: var(--radius-full);
	transform: translate(-50%, -50%);
}

.puddle-frame-ring.ring-1 {
	width: 30%;
	height: 30%;
	border-color: var(--ripple-color-strong);
}

.puddle-frame-ring.ring-2 {
	width: 50%;
	height: 50%;
}

.puddle-frame-ring.ring-3 {
	width: 70%;
	height: 70%;
}

/* Center — the "water hole" */
.puddle-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	pointer-events: all;
}

.puddle-home-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--puddle-center-size);
	height: var(--puddle-center-size);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	border: 2px solid var(--color-accent-light);
	box-shadow:
		var(--shadow-md),
		0 0 0 8px var(--ripple-color);
	transition: all var(--transition-marquee);
	position: relative;
}

.puddle-home-link::after {
	content: "";
	position: absolute;
	inset: -12px;
	border-radius: var(--radius-full);
	border: 1px solid var(--ripple-color);
	animation: ripple-expand 3s ease-out infinite;
}

.puddle-home-link:hover {
	transform: scale(1.15);
	box-shadow:
		var(--shadow-lg),
		0 0 0 16px var(--ripple-color);
}

@keyframes ripple-expand {
	0% {
		transform: scale(0.8);
		opacity: 0.6;
	}
	100% {
		transform: scale(1.6);
		opacity: 0;
	}
}

.puddle-icon {
	font-size: 1.5rem;
	line-height: 1;
}

/* Navigation ring — circular items */
.puddle-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--puddle-size);
	height: var(--puddle-size);
	z-index: 5;
	pointer-events: none;
	/* 3D perspective */
	perspective: 800px;
	perspective-origin: center center;
}

.puddle-items {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	/* Orbiting animation */
	animation: orbit-rotate calc(var(--orbit-speed, 60s)) linear infinite;
}

.speed-slow .puddle-items {
	--orbit-speed: 80s;
}

.speed-medium .puddle-items {
	--orbit-speed: 40s;
}

.speed-fast .puddle-items {
	--orbit-speed: 20s;
}

.puddle-items:hover {
	animation-play-state: paused;
}

.puddle-item {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--puddle-item-size);
	height: var(--puddle-item-size);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--color-text-secondary);
	text-align: center;
	transition: all var(--transition-marquee);
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	pointer-events: auto;
}

.puddle-item:hover {
	transform: scale(1.4) translateZ(20px) !important;
	border-color: var(--color-accent);
	color: var(--color-accent);
	box-shadow:
		var(--shadow-lg),
		0 0 20px var(--ripple-color);
	z-index: 20;
}

.puddle-item.current {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: var(--color-bg);
	box-shadow:
		var(--shadow-md),
		0 0 16px var(--ripple-color-strong);
}

.puddle-item-label {
	padding: var(--space-1) var(--space-2);
	text-overflow: ellipsis;
	overflow: hidden;
}

/* Position nav items in a circle */
.puddle-item[data-index="0"] {
	transform: translate(-50%, -50%) rotate(0deg) translateY(-180px) rotate(0deg);
}
.puddle-item[data-index="1"] {
	transform: translate(-50%, -50%) rotate(45deg) translateY(-180px)
		rotate(-45deg);
}
.puddle-item[data-index="2"] {
	transform: translate(-50%, -50%) rotate(90deg) translateY(-180px)
		rotate(-90deg);
}
.puddle-item[data-index="3"] {
	transform: translate(-50%, -50%) rotate(135deg) translateY(-180px)
		rotate(-135deg);
}
.puddle-item[data-index="4"] {
	transform: translate(-50%, -50%) rotate(180deg) translateY(-180px)
		rotate(-180deg);
}
.puddle-item[data-index="5"] {
	transform: translate(-50%, -50%) rotate(225deg) translateY(-180px)
		rotate(-225deg);
}
.puddle-item[data-index="6"] {
	transform: translate(-50%, -50%) rotate(270deg) translateY(-180px)
		rotate(-270deg);
}
.puddle-item[data-index="7"] {
	transform: translate(-50%, -50%) rotate(315deg) translateY(-180px)
		rotate(-315deg);
}

@keyframes orbit-rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* 3D tilt on hover */
.puddle-ring.is-tilting .puddle-items {
	animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   5. Puddle Toggle (mobile)
   -------------------------------------------------------------------------- */
.puddle-toggle {
	position: fixed;
	bottom: var(--space-6);
	right: var(--space-6);
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	color: var(--color-text);
	transition: all var(--transition-fast);
}

.puddle-toggle:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.puddle-toggle[aria-expanded="true"] {
	background: var(--color-accent);
	color: var(--color-bg);
	border-color: var(--color-accent);
}

@media (max-width: 768px) {
	.puddle-toggle {
		display: flex;
	}

	.puddle-nav {
		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--transition-base),
			visibility var(--transition-base);
	}

	.puddle-nav.is-mobile-open {
		opacity: 1;
		visibility: visible;
	}
}

/* --------------------------------------------------------------------------
   6. Site Header
   -------------------------------------------------------------------------- */
.gh-header {
	text-align: center;
	padding: var(--space-20) var(--space-4) var(--space-12);
}

.gh-header-inner {
	max-width: var(--content-width);
	margin: 0 auto;
}

.gh-header-logo {
	max-height: 80px;
	margin: 0 auto var(--space-6);
}

.gh-header-title {
	font-size: var(--text-3xl);
	font-weight: 700;
	margin-bottom: var(--space-3);
	letter-spacing: -0.02em;
}

.gh-header-description {
	font-size: var(--text-lg);
	color: var(--color-text-secondary);
	font-style: italic;
	max-width: 32rem;
	margin: 0 auto;
	line-height: var(--leading-relaxed);
}

body.font-modern .gh-header-description {
	font-style: normal;
}

/* Tag header */
.gh-tag-count {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-top: var(--space-3);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   8. Post Feed — Puddle Focus Layout
   -------------------------------------------------------------------------- */
.post-feed {
	max-width: var(--content-full);
	margin: 0 auto;
	padding: 0 var(--space-4);
}

/* Puddle focus: centered stack with alternating offsets */
.puddle-feed {
	position: relative;
	max-width: var(--content-width);
}

.puddle-feed .post-card {
	position: relative;
	z-index: 2;
	margin-bottom: var(--space-20);
	opacity: 0;
	transform: translateY(40px);
	animation: card-rise 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: all var(--transition-base);
}

.puddle-feed .post-card:nth-child(1) {
	animation-delay: 0.05s;
}
.puddle-feed .post-card:nth-child(2) {
	animation-delay: 0.15s;
}
.puddle-feed .post-card:nth-child(3) {
	animation-delay: 0.25s;
}
.puddle-feed .post-card:nth-child(4) {
	animation-delay: 0.35s;
}
.puddle-feed .post-card:nth-child(5) {
	animation-delay: 0.45s;
}
.puddle-feed .post-card:nth-child(6) {
	animation-delay: 0.55s;
}
.puddle-feed .post-card:nth-child(7) {
	animation-delay: 0.65s;
}
.puddle-feed .post-card:nth-child(8) {
	animation-delay: 0.75s;
}

/* Alternating offsets — "ripples" spreading */
.puddle-feed .post-card:nth-child(odd) {
	margin-left: 0;
}

.puddle-feed .post-card:nth-child(even) {
	margin-left: var(--space-8);
}

.puddle-feed .post-card:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-accent-light);
}

@keyframes card-rise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Post card link */
.post-card-link {
	display: block;
	color: inherit;
}

.post-card-link:hover {
	color: inherit;
}

/* Post card image */
.post-card-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.post-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.post-card:hover .post-card-image img {
	transform: scale(1.03);
}

/* Post card content */
.post-card-content {
	padding: var(--space-6);
}

.post-card-title {
	font-size: var(--text-xl);
	margin-bottom: var(--space-3);
	line-height: var(--leading-tight);
}

.post-card-excerpt {
	font-size: var(--text-base);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-4);
}

.post-card-meta {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.post-card-dot {
	color: var(--color-border-strong);
}

/* Card ripple effect on hover */
.post-card-ripple {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.post-card:hover .post-card-ripple::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	background: var(--ripple-color);
	border-radius: var(--radius-full);
	transform: translate(-50%, -50%) scale(0);
	animation: card-ripple 1.5s ease-out;
}

@keyframes card-ripple {
	to {
		transform: translate(-50%, -50%) scale(60);
		opacity: 0;
	}
}

/* --------------------------------------------------------------------------
   8. Classic List Layout
   -------------------------------------------------------------------------- */
.list-feed {
	max-width: var(--content-width);
}

.post-list-card {
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-6) 0;
	transition: all var(--transition-base);
}

.post-list-card:first-child {
	border-top: 1px solid var(--color-border);
}

.post-list-card:hover {
	background: var(--color-bg-alt);
	padding-left: var(--space-6);
	border-radius: var(--radius-md);
}

.post-list-link {
	display: flex;
	gap: var(--space-6);
	align-items: flex-start;
	color: inherit;
}

.post-list-link:hover {
	color: inherit;
}

.post-list-image {
	flex-shrink: 0;
	width: 120px;
	height: 80px;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.post-list-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-list-content {
	flex: 1;
	min-width: 0;
}

.post-list-title {
	font-size: var(--text-lg);
	margin-bottom: var(--space-2);
}

.post-list-excerpt {
	color: var(--color-text-secondary);
	font-size: var(--text-base);
	margin-bottom: var(--space-2);
}

.post-list-meta {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   9. Grid Reflections Layout
   -------------------------------------------------------------------------- */
.grid-feed {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-6);
}

.post-grid-card {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	transition: all var(--transition-base);
}

.post-grid-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.post-grid-link {
	display: block;
	color: inherit;
}

.post-grid-link:hover {
	color: inherit;
}

.post-grid-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.post-grid-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.post-grid-card:hover .post-grid-image img {
	transform: scale(1.05);
}

.post-grid-content {
	padding: var(--space-4);
}

.post-grid-title {
	font-size: var(--text-base);
	margin-bottom: var(--space-2);
}

.post-grid-date {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   10. Single Post / Page View — Focused Reading
   -------------------------------------------------------------------------- */
.post-view {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: var(--space-12) var(--space-4) var(--space-16);
}

/* Fade-in transition */
.fade-enter {
	animation: fade-in 0.5s ease-out;
}

@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Article header */
.gh-article-header {
	text-align: center;
	margin-bottom: var(--space-12);
}

.gh-article-hero {
	margin: 0 calc(-1 * var(--space-4)) var(--space-8);
	border-radius: var(--radius-lg);
	overflow: hidden;
	max-height: 60vh;
}

.gh-article-image {
	width: 100%;
	height: auto;
	max-height: 60vh;
	object-fit: cover;
}

.gh-article-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	flex-wrap: wrap;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	/* secondary (not muted) so author/date/reading keep AA contrast in dark mode */
	color: var(--color-text-secondary);
	margin-bottom: var(--space-6);
}

.gh-article-tag {
	display: inline-block;
	background: var(--color-accent-light);
	color: var(--color-bg);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: background var(--transition-fast);
}

.gh-article-tag:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

.gh-article-author {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.gh-article-author-avatar {
	width: 24px;
	height: 24px;
	border-radius: var(--radius-full);
	object-fit: cover;
}

.gh-article-date,
.gh-article-reading-time {
	color: var(--color-text-secondary);
}

.gh-article-title {
	font-size: var(--text-2xl);
	font-weight: 700;
	line-height: var(--leading-tight);
	margin-bottom: var(--space-6);
}

.gh-article-excerpt {
	font-size: var(--text-lg);
	color: var(--color-text-secondary);
	font-style: italic;
	line-height: var(--leading-relaxed);
	max-width: 36rem;
	margin: 0 auto;
}

/* Article content — Ghost's content card output */
.gh-article-content {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
}

/* Ghost content card typography overrides */
.gh-content p {
	margin-bottom: var(--space-6);
	line-height: var(--leading-relaxed);
}

.gh-content h2 {
	margin-top: var(--space-12);
	margin-bottom: var(--space-6);
}

.gh-content h3 {
	margin-top: var(--space-8);
	margin-bottom: var(--space-4);
}

.gh-content blockquote {
	margin: var(--space-8) 0;
	padding: var(--space-4) var(--space-6);
	border-left: 3px solid var(--color-accent);
	background: var(--color-bg-alt);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-style: italic;
	color: var(--color-text-secondary);
}

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

.gh-content pre {
	margin: var(--space-6) 0;
	padding: var(--space-4);
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
}

.gh-content code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--color-bg-alt);
	padding: 0.1em 0.3em;
	border-radius: var(--radius-sm);
}

.gh-content pre code {
	background: none;
	padding: 0;
}

.gh-content img {
	border-radius: var(--radius-md);
	margin: var(--space-6) auto;
}

.gh-content ul,
.gh-content ol {
	margin: var(--space-6) 0;
	padding-left: var(--space-6);
}

.gh-content li {
	margin-bottom: var(--space-2);
}

/* Figure / kg-image-card */
.gh-content .kg-image {
	margin: var(--space-8) auto;
}

.gh-content figcaption {
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-top: var(--space-2);
}

/* Horizontal rule */
.gh-content hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--space-12) 0;
}

/* --------------------------------------------------------------------------
   11. Post Footer — Tags, Author Card, Actions
   -------------------------------------------------------------------------- */
.gh-article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-12);
	justify-content: center;
}

.gh-tag-link {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	transition: all var(--transition-fast);
}

.gh-tag-link:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.gh-article-author-card {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	margin-top: var(--space-12);
	padding: var(--space-6);
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
}

.gh-author-card-avatar {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-full);
	object-fit: cover;
	flex-shrink: 0;
}

.gh-author-card-name {
	font-size: var(--text-lg);
	margin-bottom: var(--space-1);
}

.gh-author-card-bio {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-2);
}

.gh-author-card-link {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 500;
}

.gh-article-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-12);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
}

.gh-action-back,
.gh-action-related {
	color: var(--color-text-muted);
	transition: color var(--transition-fast);
}

.gh-action-back:hover,
.gh-action-related:hover {
	color: var(--color-accent);
}

.gh-action-divider {
	color: var(--color-border-strong);
}

/* --------------------------------------------------------------------------
   12. Related Posts
   -------------------------------------------------------------------------- */
.gh-related {
	max-width: var(--content-wide);
	margin: var(--space-16) auto 0;
	padding: 0 var(--space-4);
}

/* On wide screens let the "Continue reading" strip break out past the narrow
   reading column so more related cards fit (count scales with screen size). */
@media (min-width: 1024px) {
	.gh-related {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: min(92vw, 1100px);
		max-width: none;
	}
}

.gh-related-title {
	text-align: center;
	font-size: var(--text-xl);
	margin-bottom: var(--space-8);
	color: var(--color-text-secondary);
}

.gh-related-feed {
	display: grid;
	/* Show as many full related cards as fit the row at the current width; the
	   fetched extras (post.hbs limit=6) wrap into collapsed rows and are hidden,
	   so the count scales with screen size without partial columns. */
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	grid-template-rows: auto;
	grid-auto-rows: 0;
	column-gap: var(--space-6);
	row-gap: 0;
	overflow: hidden;
}

.post-related-card {
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	transition: all var(--transition-base);
}

.post-related-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   13. Pagination
   -------------------------------------------------------------------------- */
.pagination {
	max-width: var(--content-width);
	margin: var(--space-16) auto 0;
	padding: 0 var(--space-4);
}

.pagination-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) 0;
	border-top: 1px solid var(--color-border);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
}

.pagination-link {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-secondary);
	transition: color var(--transition-fast);
	text-decoration: none;
}

.pagination-link:not(.pagination-disabled):hover {
	color: var(--color-accent);
}

.pagination-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

.pagination-arrow {
	font-size: 1rem;
}

.pagination-info {
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   14. Error Page
   -------------------------------------------------------------------------- */
.gh-error-page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	text-align: center;
	padding: var(--space-8) var(--space-4);
}

.gh-error-content {
	max-width: 28rem;
}

.gh-error-icon {
	font-size: 3rem;
	margin-bottom: var(--space-6);
	animation: ripple-breathe 4s ease-in-out infinite;
}

.gh-error-code {
	font-size: var(--text-3xl);
	margin-bottom: var(--space-4);
}

.gh-error-message {
	font-size: var(--text-lg);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-3);
}

.gh-error-description {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	font-style: italic;
	margin-bottom: var(--space-8);
	line-height: var(--leading-relaxed);
}

.gh-error-home {
	/* Shared pill rhythm. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 700;
	padding: var(--space-3) var(--space-6);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-full);
	transition:
		background var(--transition-fast),
		box-shadow var(--transition-fast),
		transform var(--transition-fast);
}

.gh-error-home:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

/* --------------------------------------------------------------------------
   15. Site Footer
   -------------------------------------------------------------------------- */
.gh-footer {
	padding: var(--space-8) var(--space-4);
	border-top: 1px solid var(--color-border);
	text-align: center;
}

.gh-footer-content {
	max-width: var(--content-wide);
	margin: 0 auto;
}

.gh-footer-meta {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
}

.gh-footer-meta a {
	color: var(--color-text-secondary);
}

.gh-footer-meta a:hover {
	color: var(--color-accent);
}

.gh-footer-dot {
	margin: 0 var(--space-1);
}

.gh-footer-nav {
	margin-top: var(--space-3);
}

.gh-footer-nav .nav-secondary {
	display: flex;
	justify-content: center;
	gap: var(--space-4);
	list-style: none;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   16. Transitions — Click-to-Fade
   -------------------------------------------------------------------------- */
.page-transition-out {
	animation: fade-out-slide 0.35s ease-in forwards;
}

.page-transition-in {
	animation: fade-in-slide 0.45s ease-out forwards;
}

@keyframes fade-out-slide {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-20px);
	}
}

@keyframes fade-in-slide {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------------
   17. Responsive Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.puddle-item[data-index="0"] {
		transform: translate(-50%, -50%) rotate(0deg) translateY(-140px)
			rotate(0deg);
	}
	.puddle-item[data-index="1"] {
		transform: translate(-50%, -50%) rotate(51deg) translateY(-140px)
			rotate(-51deg);
	}
	.puddle-item[data-index="2"] {
		transform: translate(-50%, -50%) rotate(103deg) translateY(-140px)
			rotate(-103deg);
	}
	.puddle-item[data-index="3"] {
		transform: translate(-50%, -50%) rotate(154deg) translateY(-140px)
			rotate(-154deg);
	}
	.puddle-item[data-index="4"] {
		transform: translate(-50%, -50%) rotate(206deg) translateY(-140px)
			rotate(-206deg);
	}
	.puddle-item[data-index="5"] {
		transform: translate(-50%, -50%) rotate(257deg) translateY(-140px)
			rotate(-257deg);
	}
	.puddle-item[data-index="6"] {
		transform: translate(-50%, -50%) rotate(309deg) translateY(-140px)
			rotate(-309deg);
	}
}

@media (max-width: 768px) {
	:root {
		--puddle-size: 220px;
		--puddle-center-size: 48px;
		--puddle-item-size: 40px;
	}

	.post-view {
		padding-top: var(--space-8);
	}

	.gh-article-hero {
		margin: 0 0 var(--space-6);
		max-height: 40vh;
	}

	.gh-article-title {
		font-size: var(--text-xl);
	}

	.puddle-feed .post-card:nth-child(even) {
		margin-left: 0;
	}

	.puddle-feed .post-card {
		margin-bottom: var(--space-12);
	}

	.post-list-link {
		flex-direction: column;
		gap: var(--space-3);
	}

	.post-list-image {
		width: 100%;
		height: 160px;
	}

	.grid-feed {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}

	.gh-article-author-card {
		flex-direction: column;
		text-align: center;
	}

	/* Move puddle nav items closer */
	.puddle-item[data-index="0"] {
		transform: translate(-50%, -50%) rotate(0deg) translateY(-100px)
			rotate(0deg);
	}
	.puddle-item[data-index="1"] {
		transform: translate(-50%, -50%) rotate(60deg) translateY(-100px)
			rotate(-60deg);
	}
	.puddle-item[data-index="2"] {
		transform: translate(-50%, -50%) rotate(120deg) translateY(-100px)
			rotate(-120deg);
	}
	.puddle-item[data-index="3"] {
		transform: translate(-50%, -50%) rotate(180deg) translateY(-100px)
			rotate(-180deg);
	}
	.puddle-item[data-index="4"] {
		transform: translate(-50%, -50%) rotate(240deg) translateY(-100px)
			rotate(-240deg);
	}
	.puddle-item[data-index="5"] {
		transform: translate(-50%, -50%) rotate(300deg) translateY(-100px)
			rotate(-300deg);
	}
}

@media (max-width: 480px) {
	:root {
		--puddle-size: 180px;
		--puddle-center-size: 44px;
		--puddle-item-size: 36px;
	}

	.gh-header {
		padding-top: var(--space-12);
	}

	.gh-header-title {
		font-size: var(--text-2xl);
	}

	.gh-article-title {
		font-size: var(--text-xl);
	}

	.grid-feed {
		grid-template-columns: 1fr;
	}

	.pagination-inner {
		flex-direction: column;
		gap: var(--space-3);
	}

	.puddle-item[data-index="0"] {
		transform: translate(-50%, -50%) rotate(0deg) translateY(-80px) rotate(0deg);
	}
	.puddle-item[data-index="1"] {
		transform: translate(-50%, -50%) rotate(72deg) translateY(-80px)
			rotate(-72deg);
	}
	.puddle-item[data-index="2"] {
		transform: translate(-50%, -50%) rotate(144deg) translateY(-80px)
			rotate(-144deg);
	}
	.puddle-item[data-index="3"] {
		transform: translate(-50%, -50%) rotate(216deg) translateY(-80px)
			rotate(-216deg);
	}
	.puddle-item[data-index="4"] {
		transform: translate(-50%, -50%) rotate(288deg) translateY(-80px)
			rotate(-288deg);
	}
}

/* --------------------------------------------------------------------------
   18. Ghost Content Cards — Rich Content
   -------------------------------------------------------------------------- */
.kg-card {
	margin: var(--space-8) 0;
}

/* Bookmark card */
.kg-bookmark-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow var(--transition-fast);
}

.kg-bookmark-card:hover {
	box-shadow: var(--shadow-md);
}

/* Gallery card */
.kg-gallery-card {
	display: grid;
	gap: var(--space-2);
}

.kg-gallery-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-2);
}

/* Embed card */
.kg-embed-card {
	display: flex;
	justify-content: center;
}

/* Callout card */
.kg-callout-card {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-6);
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
	border-left: 3px solid var(--color-accent);
}

/* Toggle / header card */
.kg-header-card {
	text-align: center;
	padding: var(--space-12) var(--space-4);
}

.kg-header-card.kg-style-accent {
	background: var(--color-accent);
	color: var(--color-bg);
}

/* Required Ghost editor card width classes */
.kg-width-wide {
	width: min(100%, var(--content-wide));
	max-width: var(--content-wide);
	margin-left: 50%;
	transform: translateX(-50%);
}

.kg-width-full {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.kg-width-full img,
.kg-width-wide img {
	width: 100%;
}

/* Required Ghost gallery classes */
.kg-gallery-container {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.kg-gallery-image {
	border-radius: var(--radius-md);
	overflow: hidden;
}

.kg-gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* Required Ghost bookmark card classes */
.kg-bookmark-container {
	display: flex;
	min-height: 140px;
	color: inherit;
	background: var(--color-surface);
}

.kg-bookmark-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	padding: var(--space-4);
}

.kg-bookmark-title {
	font-family: var(--font-ui);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: var(--leading-tight);
	color: var(--color-text);
}

.kg-bookmark-description {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-secondary);
	margin-top: var(--space-2);
}

.kg-bookmark-metadata {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.kg-bookmark-icon {
	width: 20px;
	height: 20px;
	border-radius: var(--radius-sm);
	object-fit: contain;
}

.kg-bookmark-author,
.kg-bookmark-publisher {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kg-bookmark-thumbnail {
	position: relative;
	flex: 0 0 33%;
	min-width: 140px;
	background: var(--color-bg-alt);
}

.kg-bookmark-thumbnail img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* Runtime ripple generated by puddle-nav.js */
.click-ripple {
	position: absolute;
	border-radius: var(--radius-full);
	background: var(--ripple-color-strong);
	transform: scale(0);
	pointer-events: none;
	animation: click-ripple 700ms ease-out forwards;
}

@keyframes click-ripple {
	to {
		opacity: 0;
		transform: scale(3);
	}
}

/* Custom setting hooks: data attributes avoid deprecated/missing helpers */
body[data-typography="Modern sans-serif"] {
	font-family: var(--font-ui);
}

body[data-typography="Modern sans-serif"] h1,
body[data-typography="Modern sans-serif"] h2,
body[data-typography="Modern sans-serif"] h3,
body[data-typography="Modern sans-serif"] h4,
body[data-typography="Modern sans-serif"] h5,
body[data-typography="Modern sans-serif"] h6 {
	font-family: var(--font-ui);
	font-weight: 500;
}

body[data-typography="Modern sans-serif"] .gh-header-description {
	font-style: normal;
}

body[data-marquee-speed="Slow"] .puddle-items {
	--orbit-speed: 80s;
}

body[data-marquee-speed="Medium"] .puddle-items {
	--orbit-speed: 40s;
}

body[data-marquee-speed="Fast"] .puddle-items {
	--orbit-speed: 20s;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}

	.puddle-items,
	.puddle-home-link::after {
		animation: none !important;
	}
}

@media (max-width: 640px) {
	.kg-bookmark-container {
		flex-direction: column;
	}

	.kg-bookmark-thumbnail {
		flex-basis: 180px;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Homepage puddle cluster — ring navigation with post carousel below
   -------------------------------------------------------------------------- */
.puddle-cluster {
	max-width: var(--content-wide);
	margin: 0 auto var(--space-20);
	padding: 0 var(--space-4);
}

.puddle-search-shell {
	width: min(100%, 680px);
	margin: 0 auto var(--space-6);
	text-align: center;
}

.puddle-search-label {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--color-accent-dark);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.puddle-search-field {
	position: relative;
}

.puddle-search-input {
	width: 100%;
	/* Symmetric horizontal padding so the centered hint sits truly centered;
	   the clear (x) button floats over the right padding. */
	padding: var(--space-3) var(--space-8);
	border: 1px solid
		color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
	border-radius: var(--radius-full);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	color: var(--color-text);
	font-family: var(--font-ui);
	font-size: var(--text-base);
	text-align: center;
}

/* Hide the native search clear control; we provide our own. */
.puddle-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.puddle-search-input:focus {
	border-color: var(--color-accent);
	box-shadow:
		var(--shadow-md),
		0 0 0 4px var(--ripple-color);
	outline: none;
}

.puddle-search-clear {
	position: absolute;
	top: 50%;
	right: var(--space-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* >=44px tap target (Parhi/Karlson/Bederson 2006; WCAG 2.5.5 / Apple HIG);
	   the visible chip (inner span) stays smaller than the touch area. */
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	transform: translateY(-50%);
}

.puddle-search-clear[hidden] {
	display: none;
}

.puddle-search-clear span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
	color: var(--color-accent-dark);
	font-size: 1.1rem;
	line-height: 1;
	transition:
		background var(--transition-fast),
		transform var(--transition-fast);
}

.puddle-search-clear:focus-visible {
	outline: none;
}

.puddle-search-clear:hover span,
.puddle-search-clear:focus-visible span {
	background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));
	transform: scale(1.08);
}

.puddle-search-status {
	margin-top: var(--space-2);
	min-height: 1.4em;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.puddle-search-status .puddle-search-suggest {
	margin-left: var(--space-1);
	border: none;
	background: none;
	padding: 0;
	color: var(--color-accent-dark);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.puddle-cluster-map {
	/* Saturn orrery: the focused card sits at the centre; the drops orbit it on a
	   WIDE, tilted-horizontal ellipse (rx > ry). Depth (set per drop in JS) makes
	   the front/bottom arc read as nearer and the back/top as farther. */
	--ring-radius-x: 48;
	--ring-radius-y: 26;
	position: relative;
	width: min(100%, 820px);
	min-height: 520px;
	margin: 0 auto;
	perspective: 1200px;
	color: var(--color-accent);
}

/* The centred "planet" is a compact text card — its feature image is hidden
   here (the imagery lives in the orbiting drops), keeping the card small enough
   for the ring to clear its corners without occluding the text. */
.puddle-cluster-map .puddle-feature-image-link {
	display: none;
}

.puddle-cluster-water {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: min(86%, 640px);
	height: min(78%, 360px);
	border-radius: 50%;
	/* A soft pool of light with no drawn edge — no visible wireframe/skeleton. */
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--color-accent) 9%, transparent) 0%,
		color-mix(in srgb, var(--color-accent) 4%, transparent) 48%,
		transparent 70%
	);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* The centred card is the focus now, so the hint is hidden unless JS shows it
   (e.g. when a search clears the orbit). */
.puddle-ring-instruction {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 7;
	width: min(72%, 340px);
	margin: 0;
	color: var(--color-text-secondary);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: var(--leading-snug);
	text-align: center;
	transform: translate(-50%, -50%);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-base);
	pointer-events: none;
}

.puddle-ring-instruction.is-visible {
	opacity: 1;
	visibility: visible;
}

.puddle-post-nodes {
	position: absolute;
	inset: 0;
	z-index: 4;
	perspective: 1000px;
	pointer-events: none;
	transition: opacity var(--transition-base);
}

.puddle-post-node {
	/* Depth levels are set per node by JS via these custom properties. */
	--node-scale: 1;
	--node-opacity: 1;
	--node-z: 0px;
	--node-size: 64px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: var(--node-size);
	height: var(--node-size);
	border: none;
	border-radius: var(--radius-full);
	/* Each node is a real post (its image) or a soft water-drop — no number,
	   no outline, so the ring reads as content rather than a wireframe. */
	background: radial-gradient(
		circle at 34% 26%,
		color-mix(in srgb, var(--color-accent) 42%, var(--color-surface)),
		color-mix(in srgb, var(--color-accent) 72%, var(--color-surface))
	);
	box-shadow:
		var(--shadow-md),
		inset 0 1px 3px color-mix(in srgb, #fff 55%, transparent),
		inset 0 -2px 4px color-mix(in srgb, var(--color-accent-dark) 30%, transparent);
	text-decoration: none;
	overflow: hidden;
	opacity: var(--node-opacity);
	/* translateZ pushes the selected drop toward the viewer (perspective on the
	   .puddle-post-nodes parent) so it reads as coming forward, 3D. */
	transform: translate(-50%, -50%) translateZ(var(--node-z)) scale(var(--node-scale));
	/* left/top animate so selecting a reflection visibly rotates the ring. */
	transition:
		left var(--transition-slow),
		top var(--transition-slow),
		transform var(--transition-slow),
		opacity var(--transition-slow),
		box-shadow var(--transition-fast);
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.puddle-post-node {
		transition: box-shadow var(--transition-fast);
	}
}

.puddle-post-thumb {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
}

.puddle-post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Imageless posts rest as a quiet sage drop with a soft inner sheen. */
.puddle-post-thumb.is-empty {
	background: radial-gradient(
		circle at 36% 30%,
		color-mix(in srgb, #fff 34%, transparent),
		transparent 60%
	);
}

.puddle-post-node:hover,
.puddle-post-node:focus-visible {
	box-shadow:
		var(--shadow-lg),
		0 0 0 5px var(--ripple-color);
	outline: none;
	transform: translate(-50%, -50%) translateZ(calc(var(--node-z) + 20px))
		scale(calc(var(--node-scale) * 1.06));
}

/* The selected reflection wears a sage ring + ripple halo — the post image
   stays visible (no solid fill covering it). */
.puddle-post-node.is-current {
	box-shadow:
		var(--shadow-lg),
		0 0 0 3px var(--color-accent),
		0 0 0 9px var(--ripple-color-strong);
}

/* Imageless selected drop deepens to accent so it still reads as chosen. */
.puddle-post-node.is-current .puddle-post-thumb.is-empty {
	background: radial-gradient(
		circle at 36% 30%,
		color-mix(in srgb, var(--color-accent) 30%, transparent),
		color-mix(in srgb, var(--color-accent) 12%, transparent) 70%
	);
}

.puddle-post-node.is-filtered-out {
	opacity: 0.28;
}

/* The active drop "docks" — it fades out at the top because its post blooms in
   the centred card (no double render). */
.puddle-post-node.is-docked {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.puddle-post-node {
		--node-scale: 1;
		--node-opacity: 1;
		transition: box-shadow var(--transition-fast);
	}
}

/* Labels stay quiet by default — the ring is just soft circles — and the title
   reveals only for the node you hover, focus, or have selected. This keeps the
   puddle welcoming instead of crowding it with a caption on every node. */
.puddle-post-title {
	position: absolute;
	left: 50%;
	top: calc(100% + var(--space-2));
	max-width: 13rem;
	padding: var(--space-1) var(--space-3);
	border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
	border-radius: var(--radius-full);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	color: var(--color-text-secondary);
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 500;
	font-style: italic;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(4px);
	transition:
		opacity var(--transition-fast),
		transform var(--transition-fast),
		visibility var(--transition-fast);
}

.puddle-post-action {
	position: absolute;
	left: 50%;
	bottom: calc(100% + var(--space-1));
	padding: 0.15rem var(--space-2);
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
	color: var(--color-accent-dark);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-4px);
	pointer-events: none;
	transition:
		opacity var(--transition-fast),
		transform var(--transition-fast),
		visibility var(--transition-fast);
}

/* Per-node captions stay in the DOM for screen readers and the no-JS fallback,
   but the visible name for the hovered/selected reflection is shown once, in the
   calm centre of the puddle (.puddle-ring-instruction) — see puddle-nav.js. */

/* Node positions are computed by puddle-nav.js (layoutNodes) so the ring works
   for any number of posts — see assets/js/puddle-nav.js. Until JS runs, nodes
   rest centred in the puddle (top/left 50%) rather than piling in a corner. */

.puddle-carousel-controls {
	display: flex;
	gap: var(--space-4);
	justify-content: center;
	margin: var(--space-6) auto 0;
}

.puddle-carousel-control {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	justify-content: center;
	/* Shared pill rhythm; >=44px tap target (Parhi et al. 2006; WCAG 2.5.5). */
	min-height: 44px;
	padding: var(--space-3) var(--space-6);
	border: 1px solid
		color-mix(in srgb, var(--color-accent) 26%, var(--color-border));
	border-radius: var(--radius-full);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	color: var(--color-accent-dark);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 700;
	cursor: pointer;
	transition:
		background var(--transition-fast),
		box-shadow var(--transition-fast),
		transform var(--transition-fast);
}

.puddle-carousel-control:hover,
.puddle-carousel-control:focus-visible {
	background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
	box-shadow: var(--shadow-md);
	outline: none;
	transform: translateY(-1px);
}

.puddle-carousel-stage {
	/* Fills the orbit map; the active card is centred inside it as the planet,
	   layered ABOVE the drops so its text is never covered (drops that pass over
	   the card on tight screens hide behind it — the planet in front of the ring). */
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

.puddle-feature-card {
	/* The planet sits low/front in the orbit; the drops crown it from above. */
	position: absolute;
	top: 60%;
	left: 50%;
	z-index: 3;
	width: min(74%, 340px);
	border: 1px solid
		color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow:
		var(--shadow-lg),
		0 0 0 14px var(--ripple-color);
	transform: translate(-50%, -50%) scale(0.985);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	filter: blur(3px);
	/* Gentle crossfade — the outgoing card dissolves like ripples settling. */
	transition:
		opacity 420ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 420ms cubic-bezier(0.4, 0, 0.2, 1),
		filter 420ms cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear 420ms;
}

.puddle-feature-card.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
	filter: blur(0);
	transition:
		opacity 420ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 420ms cubic-bezier(0.4, 0, 0.2, 1),
		filter 420ms cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.puddle-feature-card {
		filter: none;
		transition:
			opacity var(--transition-base),
			visibility 0s linear var(--transition-base);
	}
	.puddle-feature-card.is-active {
		filter: none;
		transition:
			opacity var(--transition-base),
			visibility 0s;
	}
}

.puddle-feature-card.is-filtered-out {
	display: none;
}

.puddle-feature-image-link,
.puddle-feature-title-link {
	color: inherit;
	text-decoration: none;
}

.puddle-feature-image-link:hover,
.puddle-feature-title-link:hover {
	color: var(--color-accent-dark);
}

.puddle-feature-link {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	justify-content: center;
	/* Shared pill rhythm — see .puddle-carousel-control / .gh-error-home. */
	min-height: 44px;
	margin-top: var(--space-5);
	padding: var(--space-3) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	background: var(--color-accent);
	box-shadow: var(--shadow-sm);
	color: var(--color-bg);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background var(--transition-fast),
		box-shadow var(--transition-fast),
		transform var(--transition-fast);
}

.puddle-feature-link:hover,
.puddle-feature-link:focus-visible {
	background: var(--color-accent-dark);
	box-shadow: var(--shadow-md);
	color: var(--color-bg);
	outline: none;
	transform: translateY(-1px);
}

.puddle-feature-image {
	aspect-ratio: 16 / 9;
	background: var(--color-bg-alt);
	overflow: hidden;
}

.puddle-feature-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.puddle-feature-content {
	padding: var(--space-5, 1.25rem) var(--space-6);
}

.puddle-feature-kicker {
	margin-bottom: var(--space-2);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--color-accent-dark);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.puddle-feature-title {
	margin-bottom: var(--space-3);
	font-size: var(--text-xl);
}

.puddle-feature-excerpt {
	display: -webkit-box;
	/* 2 lines keeps the centred planet compact so the orbit clears its corners. */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: calc(2 * var(--leading-relaxed) * var(--text-sm));
	overflow: hidden;
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--color-text-secondary);
}

.puddle-feature-meta {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
}

@media (max-width: 768px) {
	.puddle-cluster-map {
		--ring-radius-x: 46;
		--ring-radius-y: 34;
		min-height: 470px;
		width: min(100%, 640px);
	}

	.puddle-feature-card {
		width: min(72%, 340px);
	}

	.puddle-post-title {
		display: none;
	}
}

@media (max-width: 480px) {
	.puddle-cluster {
		padding: 0 var(--space-3);
	}

	.puddle-cluster-map {
		/* Compact planet + wide tilted orbit that fits a phone; the active drop
		   docks (hidden) so only the front/side drops need to clear the card. */
		--ring-radius-x: 46;
		--ring-radius-y: 34;
		min-height: 430px;
		width: min(100%, 360px);
	}

	.puddle-post-node {
		--node-size: 48px;
	}

	.puddle-feature-card {
		width: min(66%, 238px);
	}

	.puddle-carousel-controls {
		gap: var(--space-2);
	}

	.puddle-feature-content {
		padding: var(--space-4);
	}
}