/* ==========================================================================
   Clean and Comfy Tech Theme - ronoaldo.com
   Design System: "Casual Expert Developer"
   ========================================================================== */

html {
	/* Reserve the scrollbar's width always, whether or not the current
	   page actually needs to scroll. body > header uses position:sticky
	   with a tight, unwrapped nav (6 links); without this, a short page
	   (no scrollbar) renders a few pixels wider than a long one (visible
	   scrollbar), which is enough to flip whether the nav wraps -- the
	   header visibly jumps when navigating between a short and a long
	   post. Degrades harmlessly on browsers that don't support it yet. */
	scrollbar-gutter: stable;
}

:root {
	/* Typography */
	--font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	/* Color Tokens - Light Mode (Fresh Morning) */
	--primary: #00677f;
	--primary-hover: #004e60;
	--primary-container: #4da8c5;
	--on-primary: #ffffff;
	--on-primary-container: #003a48;

	--secondary: #36618d;
	--secondary-container: #dde9ff;
	--on-secondary-container: #1a4974;

	--tertiary: #386570;
	--tertiary-container: #77a4b1;
	--on-tertiary-container: #033a45;

	--bg: #f8f9ff;
	--surface: #f8f9ff;
	--surface-card: #ffffff;
	--surface-container-lowest: #ffffff;
	--surface-container-low: #eff4ff;
	--surface-container: #e6eeff;
	--surface-container-high: #dde9ff;
	--surface-container-highest: #d5e3fd;

	--text: #0d1c2f;
	--text-muted: #3e484c;
	--text-light: #52606d;
	--border: #bec8cd;
	--border-subtle: #e2eaf1;

	/* Simple.css mapping */
	--accent: var(--primary);
	--accent-bg: var(--surface-container-low);
	--code: #00677f;
	--preformatted: #0d1c2f;
	--disabled: #e2e8f0;

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

	/* Ambient Shadows */
	--shadow-sm: 0 2px 6px rgba(13, 28, 47, 0.04);
	--shadow-md: 0 6px 18px rgba(13, 28, 47, 0.06);
	--shadow-lg: 0 16px 36px rgba(13, 28, 47, 0.08);
	--shadow-ambient: 0 12px 32px -4px rgba(13, 28, 47, 0.08), 0 4px 12px -2px rgba(13, 28, 47, 0.04);
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Color Tokens - Dark Mode (Cozy Night Office) */
		--primary: #4da8c5;
		--primary-hover: #7ad2f0;
		--primary-container: #00677f;
		--on-primary: #081320;
		--on-primary-container: #b6ebff;

		--secondary: #a0cafc;
		--secondary-container: #1a3c60;
		--on-secondary-container: #d1e4ff;

		--tertiary: #a0cedb;
		--tertiary-container: #1e4d58;
		--on-tertiary-container: #bceaf8;

		--bg: #0d1c2f;
		--surface: #0d1c2f;
		--surface-card: #14243b;
		--surface-container-lowest: #0a1626;
		--surface-container-low: #122035;
		--surface-container: #182c47;
		--surface-container-high: #203756;
		--surface-container-highest: #2a466c;

		--text: #f0f4f8;
		--text-muted: #94a3b8;
		--text-light: #cbd5e1;
		--border: #243952;
		--border-subtle: #1a2d42;

		--accent: var(--primary);
		--accent-bg: var(--surface-container-low);
		--code: #7ad2f0;
		--preformatted: #f0f4f8;
		--disabled: #1e293b;

		--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
		--shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
		--shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.45);
		--shadow-ambient: 0 12px 32px -4px rgba(0, 0, 0, 0.4);
	}
}

/* ==========================================================================
   Global Base & Typography
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	font-family: var(--font-body);
	scroll-behavior: smooth;
	background-color: var(--bg);
	color: var(--text);
	overflow-x: hidden;
	width: 100%;
}

body {
	font-family: var(--font-body);
	background-color: var(--bg);
	color: var(--text);
	display: grid;
	grid-template-columns: 1fr min(72rem, 92%) 1fr;
	grid-template-rows: auto 1fr auto;
	margin: 0;
	padding: 0;
	line-height: 1.6;
	overflow-x: hidden;
	position: relative;
	width: 100%;
	min-height: 100vh;
}

body > * {
	grid-column: 2;
	min-width: 0;
}

main {
	position: relative;
	width: 100%;
	padding-top: 1.5rem;
}

h1, h2, h3, h4, h5, h6,
.font-display {
	font-family: var(--font-display);
	color: var(--text);
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin-top: 0;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; margin-bottom: 1rem; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; margin-top: 2rem; margin-bottom: 0.75rem; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
h4 { font-size: 1.15rem; font-weight: 600; }

p {
	line-height: 1.6;
	margin-bottom: 1rem;
	color: var(--text);
	text-align: left;
}

a {
	color: var(--primary);
	text-decoration: none;
	transition: color 150ms ease, opacity 150ms ease;
}

a:hover {
	color: var(--primary-hover);
	text-decoration: underline;
}

hr {
	border: 0;
	border-top: 1px solid var(--border-subtle);
	margin: 2.5rem 0;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

body > header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(248, 249, 255, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border-subtle);
	padding: 0.75rem 1rem;
	grid-column: 1 / -1;
	box-shadow: var(--shadow-sm);
	box-sizing: border-box;
	width: 100%;
}

@media (prefers-color-scheme: dark) {
	body > header {
		background: rgba(13, 28, 47, 0.9);
	}
}

.header-container {
	max-width: 72rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.logo-container {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--text);
	font-family: var(--font-display);
}

.logo-container img {
	height: 38px;
	width: auto;
	object-fit: contain;
	border-radius: var(--radius-sm);
}

.logo-text {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.02em;
}

header > nav,
.header-nav {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0;
	margin: 0;
	line-height: normal;
}

header > nav a:not(.btn),
.header-nav a:not(.btn) {
	color: var(--text-muted);
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0.4rem 0.75rem;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	margin: 0;
	text-decoration: none;
	transition: all 150ms ease;
}

header > nav a:not(.btn):hover,
.header-nav a:not(.btn):hover {
	color: var(--primary);
	background: var(--surface-container-low);
	text-decoration: none;
}

header > nav a:not(.btn).current,
.header-nav a:not(.btn).current {
	color: var(--primary);
	background: var(--surface-container);
	border-color: var(--border-subtle);
}

.nav-cta {
	margin-left: 0.5rem;
}

@media (max-width: 860px) {
	.header-container {
		flex-direction: column;
		gap: 0.75rem;
	}
	header > nav,
	.header-nav {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.35rem;
	}
	header > nav a:not(.btn) {
		padding: 0.35rem 0.5rem;
		font-size: 0.875rem;
	}
}

/* ==========================================================================
   Buttons & Badges
   ========================================================================== */

.btn,
button,
input[type="submit"],
input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0.65rem 1.25rem;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none !important;
	transition: all 150ms ease-in-out;
	line-height: 1.2;
	box-sizing: border-box;
}

.btn:hover,
button:enabled:hover,
input[type="submit"]:enabled:hover,
input[type="button"]:enabled:hover {
	text-decoration: none !important;
	transform: translateY(-1px);
	filter: none;
}

.btn:active,
button:enabled:active,
input[type="submit"]:enabled:active,
input[type="button"]:enabled:active {
	transform: scale(0.98);
}

/* Primary Action Buttons */
.btn-primary,
button,
input[type="submit"],
header > nav a.btn-primary,
.header-nav a.btn-primary {
	background: var(--primary) !important;
	color: var(--on-primary) !important;
	border: 1px solid transparent !important;
	box-shadow: 0 4px 12px rgba(0, 103, 127, 0.2);
}

.btn-primary:hover,
button:enabled:hover,
input[type="submit"]:enabled:hover,
header > nav a.btn-primary:hover,
.header-nav a.btn-primary:hover {
	background: var(--primary-hover) !important;
	color: var(--on-primary) !important;
	border-color: transparent !important;
	box-shadow: 0 6px 16px rgba(0, 103, 127, 0.3);
}

/* Secondary Action Buttons */
.btn-secondary,
header > nav a.btn-secondary,
.header-nav a.btn-secondary {
	background: var(--surface-container-low) !important;
	color: var(--primary) !important;
	border: 1px solid var(--border-subtle) !important;
	box-shadow: none;
}

.btn-secondary:hover,
header > nav a.btn-secondary:hover,
.header-nav a.btn-secondary:hover {
	background: var(--surface-container) !important;
	color: var(--primary-hover) !important;
	border-color: var(--border) !important;
}

.btn-sm,
header > nav a.btn-sm,
.header-nav a.btn-sm {
	padding: 0.45rem 0.95rem;
	font-size: 0.875rem;
	border-radius: var(--radius-md);
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.85rem;
	border-radius: var(--radius-full);
	font-size: 0.8125rem;
	font-weight: 600;
	background: var(--secondary-container);
	color: var(--on-secondary-container);
}

.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0;
	list-style: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-full);
	font-size: 0.8125rem;
	font-weight: 600;
	background: var(--surface-container-low);
	color: var(--text-muted);
	border: 1px solid var(--border-subtle);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-section {
	padding: 2.5rem 0 3.5rem 0;
	position: relative;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 3rem;
	align-items: center;
}

.hero-content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.hero-title {
	font-size: clamp(2.2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}

.hero-highlight {
	color: var(--primary);
}

.hero-description {
	font-size: 1.125rem;
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 0.5rem;
}

.hero-media-wrapper {
	position: relative;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}

.hero-media {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--surface-container);
	box-shadow: var(--shadow-ambient);
	border: 1px solid var(--border-subtle);
}

.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: pointer;
}

.hero-stats-card {
	position: absolute;
	bottom: -1rem;
	left: -1rem;
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 0.75rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	box-shadow: var(--shadow-md);
	z-index: 10;
}

.hero-stats-icon {
	width: 42px;
	height: 42px;
	border-radius: var(--radius-md);
	background: var(--secondary-container);
	color: var(--on-secondary-container);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
}

.hero-stats-number {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	color: var(--text);
}

.hero-stats-label {
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin-top: 0.15rem;
}

@media (max-width: 860px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		text-align: center;
	}
	.hero-content {
		align-items: center;
	}
	.hero-actions {
		justify-content: center;
	}
	.hero-stats-card {
		bottom: -0.5rem;
		left: 50%;
		transform: translateX(-50%);
		width: max-content;
		max-width: calc(100% - 2rem);
	}
}

/* ==========================================================================
   Bento Grid & Cards
   ========================================================================== */

.section-header {
	text-align: center;
	margin: 3.5rem 0 2rem 0;
}

.section-title {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.section-subtitle {
	font-size: 1rem;
	color: var(--text-muted);
	max-width: 36rem;
	margin: 0 auto;
}

.bento-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 3.5rem;
}

.bento-card {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 1.75rem;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.bento-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.bento-card-wide {
	grid-column: span 2;
}

.bento-card-accent {
	background: linear-gradient(135deg, var(--primary), var(--primary-container));
	color: #ffffff;
	border-color: transparent;
}

.bento-card-accent h3,
.bento-card-accent p {
	color: #ffffff !important;
}

.bento-card-accent a:not(.btn) {
	color: #ffffff !important;
	text-decoration: underline;
}

/* Button inside accent card - Crisp high-contrast solid button */
.bento-card-accent .btn,
.bento-card-accent .btn-secondary {
	background: #ffffff !important;
	color: #004e60 !important;
	border: 1px solid transparent !important;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bento-card-accent .btn:hover,
.bento-card-accent .btn-secondary:hover {
	background: #f0f4f8 !important;
	color: #003443 !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.bento-card .btn,
.project-card .btn {
	align-self: flex-start;
	margin-top: 1.25rem;
}

.bento-icon {
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-md);
	background: var(--surface-container-low);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: 1.25rem;
}

.bento-card-accent .bento-icon {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

@media (max-width: 860px) {
	.bento-grid {
		grid-template-columns: 1fr;
	}
	.bento-card-wide {
		grid-column: span 1;
	}
}

/* ==========================================================================
   Projects & Portfolio Grid
   ========================================================================== */

.projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
	margin-bottom: 3.5rem;
}

.project-card {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.project-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.project-tag {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--primary);
	margin-bottom: 0.5rem;
}

/* ==========================================================================
   Microblog Feed (Mastodon Posts) & Media Galleries
   ========================================================================== */

.posts {
	margin-top: 1.5rem;
	margin-bottom: 2rem;
}

.post {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	margin-bottom: 1.5rem;
	padding: 1.5rem;
	box-shadow: var(--shadow-sm);
}

.post-header {
	display: grid;
	font-size: 0.9375rem;
	grid-template-columns: 48px auto;
	gap: 0.85rem;
	align-items: center;
	margin-bottom: 1rem;
}

.post .avatar {
	border-radius: var(--radius-full);
	width: 48px;
	height: 48px;
	object-fit: cover;
	border: 1px solid var(--border-subtle);
}

.post .author-name {
	font-weight: 700;
	color: var(--text);
}

.post .posted-at {
	font-size: 0.8125rem;
	color: var(--text-muted);
}

.post .reblogged-by,
.post .posted-via {
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin-left: 0.25rem;
}

.post .message {
	margin: 0;
	padding: 0;
	font-style: normal;
	background: transparent;
	border: none;
	box-shadow: none;
	color: var(--text);
}

.post .message p {
	margin-top: 0;
	margin-bottom: 0.75rem;
	overflow-wrap: break-word;
	text-align: left;
}

/* Feed Media Gallery - Side by side thumbnails */
.post-media-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.85rem;
	align-items: flex-start;
}

.post-media-item {
	display: inline-flex;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--border-subtle);
	background: var(--surface-container-low);
	transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
	text-decoration: none !important;
}

.post-media-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary);
	text-decoration: none !important;
}

.post-thumbnail {
	max-height: 180px;
	max-width: 240px;
	width: auto;
	height: auto;
	object-fit: cover;
	display: block;
}

/* Single image in feed post: slightly larger thumbnail */
.post-media-gallery > .post-media-item:only-child .post-thumbnail,
.post-media-gallery:has(> :only-child) .post-thumbnail {
	max-height: 280px;
	max-width: 420px;
}

.post-video-wrapper {
	width: 100%;
	max-width: 640px;
	margin: 0.5rem 0;
}

.post-video-wrapper video {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-md);
	margin: 0;
}

@media (max-width: 600px) {
	.post-thumbnail {
		max-height: 130px;
		max-width: 140px;
	}
	.post-media-gallery > .post-media-item:only-child .post-thumbnail,
	.post-media-gallery:has(> :only-child) .post-thumbnail {
		max-height: 220px;
		max-width: 100%;
	}
}

/* ==========================================================================
   Standardized Responsive Video Player & Embeds
   ========================================================================== */

.video-container {
	position: relative;
	width: 100%;
	max-width: 720px;
	margin: 1.5rem auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--surface-container-low);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-subtle);
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

video,
main video {
	width: 100%;
	max-width: 720px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-md);
	background: var(--surface-container-low);
	margin: 1.5rem auto;
	display: block;
	border: 1px solid var(--border-subtle);
}

/* ==========================================================================
   Link Tree / Bio Page
   ========================================================================== */

.linktree-container {
	max-width: 600px;
	margin: 2rem auto 3.5rem auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.linktree-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 2.25rem;
}

.linktree-avatar {
	width: 104px;
	height: 104px;
	border-radius: var(--radius-full);
	object-fit: cover;
	border: 3px solid var(--surface-card);
	box-shadow: var(--shadow-ambient);
}

.linktree-title {
	font-size: clamp(1.75rem, 3.5vw, 2.2rem);
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}

.linktree-bio {
	font-size: 0.95rem;
	color: var(--text-muted);
	margin: 0;
	line-height: 1.5;
	max-width: 500px;
}

.linktree-section {
	width: 100%;
	margin-bottom: 2rem;
}

.linktree-section-title {
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	margin-bottom: 0.85rem;
	text-align: left;
	padding-left: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.linktree-links {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	width: 100%;
}

.linktree-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	text-decoration: none !important;
	color: var(--text) !important;
	box-shadow: var(--shadow-sm);
	transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
	text-align: left;
}

.linktree-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary);
}

.linktree-card-featured {
	background: linear-gradient(135deg, var(--surface-card), var(--surface-container-low));
	border-color: var(--primary-container);
}

.linktree-card-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: var(--surface-container-low);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	flex-shrink: 0;
	transition: background 150ms ease, color 150ms ease;
}

.linktree-card:hover .linktree-card-icon {
	background: var(--primary);
	color: var(--on-primary);
}

.linktree-card-content {
	flex: 1;
	min-width: 0;
}

.linktree-card-label {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.15rem;
}

.linktree-card-desc {
	font-size: 0.825rem;
	color: var(--text-muted);
	line-height: 1.3;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.linktree-card-arrow {
	color: var(--text-muted);
	font-size: 0.9rem;
	transition: transform 150ms ease, color 150ms ease;
}

.linktree-card:hover .linktree-card-arrow {
	color: var(--primary);
	transform: translateX(3px);
}

/* ==========================================================================
   Credentials & Secondary Pages
   ========================================================================== */

.credentials {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
}

.credential-item {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 1.25rem;
	box-shadow: var(--shadow-sm);
	display: flex;
	align-items: center;
	gap: 1rem;
}

.credential-image {
	width: 90px;
	height: 90px;
	object-fit: contain;
	flex-shrink: 0;
}

.credential-item p {
	margin: 0;
	font-size: 0.9375rem;
}

.icon-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem 0;
}

.icon-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.75rem;
	background: var(--surface-container-low);
	border-radius: var(--radius-full);
	border: 1px solid var(--border-subtle);
	font-size: 0.875rem;
	font-weight: 600;
}

.icon-links .divider {
	display: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

body > footer {
	margin-top: 4rem;
	padding: 2.5rem 1rem 2rem 1rem;
	background: var(--surface-container-low);
	border-top: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	grid-column: 1 / -1;
	box-sizing: border-box;
	width: 100%;
}

.footer-container {
	max-width: 72rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	text-align: center;
}

.footer-social-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
}

.footer-social-links a {
	color: var(--text-muted);
	font-weight: 600;
	font-size: 0.9375rem;
	transition: color 150ms ease;
}

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

.footer-credits {
	font-size: 0.875rem;
	color: var(--text-muted);
}

/* ==========================================================================
   Atmospheric & Interactive Easter Egg Styling
   ========================================================================== */

.cloud-accent {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.12;
	pointer-events: none;
	z-index: -1;
	max-width: 100%;
}

.cloud-accent-primary {
	width: min(320px, 80vw);
	height: min(320px, 80vw);
	background: var(--primary);
	top: 0;
	left: 0;
}

.cloud-accent-secondary {
	width: min(280px, 70vw);
	height: min(280px, 70vw);
	background: var(--secondary);
	bottom: 10%;
	right: 0;
}

/* Profile image glow animation on easter egg */
#profile-picture img.glow-once {
	animation: eggGlow 1500ms ease-out 1;
	will-change: filter;
}

@keyframes eggGlow {
	0%   { filter: drop-shadow(0 0 0 var(--primary)); }
	30%  { filter: drop-shadow(0 0 12px var(--primary)) drop-shadow(0 0 24px var(--primary)); }
	100% { filter: drop-shadow(0 0 0 var(--primary)); }
}

#profile-picture img.glow-rare {
	animation: eggGlowRare 1500ms ease-out infinite;
	will-change: filter;
}

@keyframes eggGlowRare {
	0%   { filter: drop-shadow(0 0 0 #ffd700); }
	25%  { filter: drop-shadow(0 0 14px #ffd700) drop-shadow(0 0 28px #ffd700); }
	60%  { filter: drop-shadow(0 0 6px #ffd700) drop-shadow(0 0 16px #ffd700); }
	100% { filter: drop-shadow(0 0 0 #ffd700); }
}

/* Hint balloon floating over profile avatar */
.profile-hint {
	display: none;
	position: absolute;
	top: -1.75rem;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.5rem 1rem;
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	text-align: center;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text);
	box-shadow: var(--shadow-md);
	opacity: 0;
	transition: opacity 300ms ease-in;
	width: max-content;
	max-width: calc(100% - 2rem);
	z-index: 25;
	box-sizing: border-box;
}

.profile-hint::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid var(--surface-card);
}

.profile-hint.show {
	display: block;
	opacity: 1;
}

/* ==========================================================================
   Section Actions & Portfolio Extended Components
   ========================================================================== */

.section-actions {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
	margin-bottom: 2rem;
}

/* Hobby & Secondary Projects Accordion */
details.hobby-accordion {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 0;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	margin-top: 1.5rem;
	margin-bottom: 2rem;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

details.hobby-accordion[open] {
	padding: 0;
	border-color: var(--border);
	box-shadow: var(--shadow-md);
}

summary.hobby-summary {
	padding: 1.25rem 1.5rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	background: var(--surface-container-low);
	list-style: none;
	user-select: none;
	transition: background 150ms ease;
}

summary.hobby-summary:hover {
	background: var(--surface-container);
}

summary.hobby-summary::-webkit-details-marker {
	display: none;
}

details.hobby-accordion[open] summary.hobby-summary {
	border-bottom: 1px solid var(--border-subtle);
}

.hobby-toggle-hint {
	color: var(--primary);
	transition: transform 200ms ease;
}

details[open] .hobby-toggle-hint {
	transform: rotate(180deg);
}

.hobby-content {
	padding: 1.5rem;
}

/* Compact Grid for secondary/hobby cards */
.compact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.compact-card {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: var(--shadow-sm);
	transition: transform 150ms ease, box-shadow 150ms ease;
}

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

.compact-card-header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--primary);
	margin-bottom: 0.5rem;
}

.compact-card-header h4 {
	margin: 0;
	font-size: 1rem;
	word-break: break-word;
	color: var(--text);
}

.compact-card p {
	font-size: 0.875rem;
	color: var(--text-muted);
	margin-bottom: 1rem;
	flex-grow: 1;
}

.compact-card .btn {
	align-self: flex-start;
}

/* Platform / Repository Hosting Cards */
.platform-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.platform-card {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 1.25rem;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	box-shadow: var(--shadow-sm);
	text-decoration: none !important;
	color: var(--text) !important;
	transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

a.platform-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary);
}

.platform-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: var(--surface-container-low);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	flex-shrink: 0;
}

.platform-info {
	flex: 1;
	min-width: 0;
}

.platform-info strong {
	font-size: 1.05rem;
	display: block;
	margin-bottom: 0.25rem;
	color: var(--text);
}

.platform-info p {
	font-size: 0.875rem;
	color: var(--text-muted);
	margin-bottom: 0.75rem;
}

.repo-sublinks {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.875rem;
}

.repo-sublinks li {
	margin-bottom: 0.35rem;
}

.repo-sublinks a {
	color: var(--primary);
	font-weight: 500;
}

/* ==========================================================================
   Blog (post listing, post meta, migrated-content compatibility)
   ========================================================================== */

.post-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	list-style: none;
	padding: 0;
	margin: 2rem 0;
}

.post-card {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.75rem;
	box-shadow: var(--shadow-sm);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

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

.post-card h2 {
	margin: 0 0 0.5rem 0;
	font-size: 1.4rem;
}

.post-card h2 a {
	color: var(--text);
	text-decoration: none;
}

.post-card h2 a:hover {
	color: var(--primary);
}

.post-card .post-excerpt {
	color: var(--text-muted);
	margin: 0.5rem 0 0 0;
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	color: var(--text-light);
	font-size: 0.875rem;
	margin: 0.25rem 0 1rem 0;
}

/* Blogger's exported markup wraps many inline images in this class */
.separator {
	margin: 1.5rem 0;
}

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--text-light);
	margin-bottom: 1.5rem;
}

.breadcrumb a {
	color: var(--text-light);
}

.breadcrumb a:hover {
	color: var(--primary);
}

.breadcrumb span:last-child {
	color: var(--text-muted);
}

.post-nav {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border-subtle);
}

.post-nav a {
	color: var(--text);
	font-weight: 500;
}

.post-nav a:hover {
	color: var(--primary);
}

/* Newer post on the left, older on the right -- mirrors this blog's own
   listing order (newest first) and Blogger's classic "Newer Post / Home /
   Older Post" template convention. A long title on either side must not
   squeeze the other, so each side gets an even, independent share (flex,
   not a grid column sized around a center item). */
.post-nav-links {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
}

.post-nav-newer,
.post-nav-older {
	flex: 1 1 0;
	min-width: 0;
}

.post-nav-newer {
	text-align: left;
}

.post-nav-older {
	text-align: right;
}

.post-nav-list {
	text-align: center;
	font-size: 0.875rem;
	color: var(--text-light);
}

@media (max-width: 640px) {
	.post-nav-links {
		flex-direction: column;
		gap: 0.75rem;
	}
	.post-nav-newer,
	.post-nav-older {
		text-align: center;
	}
}

.post-card-featured {
	display: flex;
	gap: 1.5rem;
	padding: 1.75rem;
}

.post-card-featured .post-card-thumb {
	flex: 0 0 auto;
	width: 240px;
	border-radius: var(--radius-md);
	overflow: hidden;
	align-self: flex-start;
}

.post-card-featured .post-card-thumb img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.post-card-featured .post-card-body {
	flex: 1 1 auto;
	min-width: 0;
}

.post-card-featured h2 {
	font-size: 1.65rem;
}

@media (max-width: 640px) {
	.post-card-featured {
		flex-direction: column;
	}
	.post-card-featured .post-card-thumb {
		width: 100%;
	}
}