@view-transition {
	navigation: auto;
}

/* Clean symmetric crossfade. The blink was NOT this — it was a
   `.content { @starting-style { opacity: 0 } }` fade-in firing on every
   fresh document (now removed). This crossfade is short and the page
   background is pre-painted inline, so no unstyled frame is exposed. */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 100ms;
	animation-timing-function: ease;
}





:root {
	
	--primary-color: color(display-p3 0 0 0);
	--heading-color: color(display-p3 0.055 0.055 0.055);
	--secondary-color: color(display-p3 0.5 0.5 0.5);
	--tertiary-color: color(display-p3 0.6 0.6 0.6);
	--background-color: color(display-p3 0.98 0.98 0.98);
	--background-color-srgb: #FAFAFA;
	--card-border-color: color(display-p3 0.36 0.39 0.42 / 0.12);
	--accent-color: color(display-p3 0.38 0.59 1);
	--input-background-color: color(display-p3 0.36 0.39 0.42 / 0.05);
	
	
	--font-size-xs: 0.875rem;      
	--font-size-sm: 0.9375rem;     
	--font-size-base: 1rem;        
	--font-size-md: 1.125rem;      
	--font-size-lg: 1.25rem;       
	
	
	--content-width: 644px;
	--small-radius: 8px;
	
	
	--lines: color(display-p3 0.93 0.93 0.93);
	--shadow: color(display-p3 0.13 0.14 0.15 / 0.1) 0px 10px 10px -10px;
	--marks: color(display-p3 0.73 0.73 0.73);
}


@media (prefers-color-scheme: dark) {
	:root {
		--primary-color: color(display-p3 0.95 0.95 0.95);
		--heading-color: color(display-p3 0.95 0.95 0.95);
		--secondary-color: color(display-p3 0.95 0.95 0.95 / 0.65);
		--tertiary-color: color(display-p3 0.95 0.95 0.95 / 0.45);
		--background-color: color(display-p3 0.09 0.09 0.09);
		--background-color-srgb: #181818;
		--card-border-color: color(display-p3 0.95 0.95 0.95 / 0.12);
		--accent-color: color(display-p3 0.95 0.95 0.95);
		--input-background-color: color(display-p3 0.95 0.95 0.95 / 0.05);
		--lines: color(display-p3 0.95 0.95 0.95 / 0.12);
		--shadow: color(display-p3 0 0 0 / 0.3) 0px 10px 10px -10px;
		--marks: color(display-p3 0.4 0.4 0.4);
	}
}


html, body {
  
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.6;
  
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  
  font-feature-settings: 
    "ss01" 1, 
    "ss02" 1, 
    "ss03" 1, 
    "ss04" 1, 
    "zero" 1, 
    "calt" 1; 
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.011em; 
  
  -webkit-text-size-adjust: 100%;
  
  font-display: optional;
}


html {
	scroll-behavior: smooth;
	background-color: var(--background-color-srgb);
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	html {
		background-color: var(--background-color-srgb);
	}
}


html,
body {
	margin: 0 !important;
	padding: 0;
	box-sizing: border-box;
	color: var(--primary-color);
	background-color: var(--background-color);
	position: relative;
}

/* iOS Safari status bar background:
   Paint a fixed cap behind the clock/wifi/battery so the status bar isn't transparent.
   Keep it out of layout so nothing gets pushed down. */
@media (max-width: 768px) and (pointer: coarse) and (orientation: portrait) {
	@supports (-webkit-touch-callout: none) {
		body::before {
			content: "";
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: clamp(20px, env(safe-area-inset-top, 32px), 32px);
			background: var(--background-color-srgb);
			z-index: 9999;
			pointer-events: none;
		}
	}
}


html {
	overflow-y: scroll;
	scrollbar-gutter: stable;
	/* Thin, unobtrusive scrollbar that adapts to light/dark via the
	   site's secondary color over a transparent track. */
	scrollbar-width: thin;
	scrollbar-color: var(--secondary-color) transparent;
}


::selection {
	background-color: var(--primary-color);
	color: color(display-p3 0.97 0.98 1);
}

::-moz-selection {
	background-color: var(--primary-color);
	color: color(display-p3 0.97 0.98 1);
}

@media (prefers-color-scheme: dark) {
	::selection {
		background-color: color(display-p3 0.95 0.95 0.95 / 0.2);
		color: color(display-p3 1 1 1);
	}
	
	::-moz-selection {
		background-color: color(display-p3 0.95 0.95 0.95 / 0.2);
		color: color(display-p3 1 1 1);
	}
}


.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}


.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--primary-color);
	color: var(--background-color);
	padding: 8px 16px;
	text-decoration: none;
	z-index: 10000;
	border-radius: 0 0 4px 0;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, top 0.2s ease;
}

.skip-link:focus {
	top: 0;
	opacity: 1;
	pointer-events: auto;
	outline: none;
	box-shadow: 0 0 0 3px var(--background-color), 0 0 0 6px var(--primary-color);
}


button,
a,
.card,
nav a {
	user-select: none;
	-webkit-user-select: none;
}


a,
button,
input,
textarea {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

hr {
	border: none;
	border-top: 1px solid var(--card-border-color);
	margin: 2rem 0;
}

blockquote {
	border-left: 1px solid var(--card-border-color);
	margin: 1.5rem 0;
	padding-left: 1rem;
	color: var(--secondary-color);
	font-style: italic;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: 600;
	letter-spacing: -0.02em; 
	line-height: 1.3;
	color: var(--heading-color);
}

h1 {
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}

p {
	margin: 1rem 0;
}


h1 { font-size: 2rem; margin-top: 2em; margin-bottom: 0.5em; }
h2 { font-size: 1.5rem; margin-top: 1.5em; margin-bottom: 0.5em; }
h3 { font-size: 1.25rem; margin-top: 1.25em; margin-bottom: 0.5em; }


h1:first-child,
h2:first-child,
h3:first-child {
	margin-top: 0;
}


a {
	color: var(--primary-color);
	text-decoration: none;
	transition: color 0.2s ease;
	outline: none;
}


a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--primary-color);
	border-radius: 2px;
}


.about a,
.entry-content .cv a {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: #c0c0c0;
	text-decoration-style: dotted;
	text-decoration-skip-ink: auto;
}


.about a::after,
.entry-content .cv a::after {
	content: " ↗" / "";
	font-weight: 400;
	color: var(--secondary-color);
}


video {
	border-radius: var(--small-radius);
	corner-shape: squircle;
}

img {
	corner-shape: squircle;
}


/* Dev/staging-only build badge. Hidden by default — the inline script in
   Header.astro adds `.is-dev` on localhost / *.local / staging / preview
   hosts, so production (fsanchez.io) never renders it. Floats as a small
   card in the bottom-left rather than a full-width top bar. */
.construction-banner {
	display: none;
}

.construction-banner.is-dev {
	position: fixed;
	bottom: 16px;
	left: 16px;
	max-width: 260px;
	padding: 8px 12px;
	margin: 0;
	font-weight: 600;
	font-size: 0.6875rem;
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-align: left;
	z-index: 1000;
	color: color(display-p3 0 0 0);
	background: color(display-p3 1 0.84 0);
	border-radius: 10px;
	box-shadow:
		0 0 0 1px color(display-p3 0 0 0 / 0.08),
		0 4px 12px color(display-p3 0 0 0 / 0.18);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}


.construction-banner.is-dev::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100px;
	right: 0;
	bottom: 0;
	width: calc(100% + 100px);
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10px,
		color(display-p3 0 0 0 / 0.08) 10px,
		color(display-p3 0 0 0 / 0.08) 20px
	);
	animation: construction-stripes 3s linear infinite;
	pointer-events: none;
	z-index: 1;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.construction-banner.is-dev::before {
		animation: none;
	}
}

@keyframes construction-stripes {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(28.28px); 
	}
}


.construction-banner span {
	position: relative;
	z-index: 2;
	display: inline-block;
	line-height: 1;
}


.construction-banner span::before {
	content: "▲ ";
	margin-right: 0.5rem;
	display: none; /* Hidden */
	animation: pulse 2s ease-in-out infinite;
}

.construction-banner span::after {
	content: " ▲";
	margin-left: 0.5rem;
	display: none; /* Hidden */
	animation: pulse 2s ease-in-out infinite;
	animation-delay: 1s;
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.2);
		opacity: 0.8;
	}
}

.construction-banner .change-time {
	opacity: 0.7;
	font-weight: 500;
	margin-left: 4px;
	display: none; /* Hidden */
}



.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--content-width);
	margin: 40px auto 32px; /* was 76px to clear the old fixed top banner */
	padding: 0 1rem;
	position: relative;

	min-height: 60px;
	height: 60px;
}


.entry-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	
	height: 60px;
	min-height: 60px;
}

.back-button,
.copy-link-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--primary-color);
	background: transparent;
	border: 1px solid var(--card-border-color);
	border-radius: 50%;
	cursor: pointer;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	
	will-change: transform, border-color;
	position: relative;
	
	align-self: center;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.back-button {
	margin-right: auto;
}

.copy-link-button {
	margin-left: auto;
}


.back-icon,
.link-icon,
.check-icon {
	width: 16px;
	height: 16px;
	stroke-width: 2;
	flex-shrink: 0;
}

.link-icon,
.check-icon {
	position: absolute;
	
	will-change: opacity, transform, filter;
}

.link-icon {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.check-icon {
	opacity: 0;
	transform: scale(0.5) rotate(-10deg);
	filter: blur(4px);
}


@media (hover: hover) {
	.back-button:hover,
	.copy-link-button:hover {
		background: var(--input-background-color);
		border-color: var(--card-border-color);
	}
}



.copy-link-button.copied {
	background: color(display-p3 0.13 0.44 0.77 / 0.1);
	border-color: color(display-p3 0.13 0.33 0.55 / 0.4);
	color: color(display-p3 0.13 0.55 0.77);
}

@media (max-width: 768px) {
	.back-button,
	.copy-link-button {
		width: 36px;
		height: 36px;
	}
	
	.back-icon,
	.link-icon,
	.check-icon {
		width: 14px;
		height: 14px;
	}
}

.site-header .home-link {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.site-header .site-avatar {
	width: 60px;
	height: 60px;
	border-radius: 100%;
	corner-shape: unset;
	object-fit: cover;
	margin-right: 1.5rem;
	
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
	will-change: transform;
	cursor: pointer;
	
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	-moz-user-select: none;
	pointer-events: auto;
	
	display: block;
	
	box-shadow:
		0px 0px 0px 1px color(display-p3 0 0 0 / 0.06),
		0px 1px 2px -1px color(display-p3 0 0 0 / 0.06),
		0px 2px 4px 0px color(display-p3 0 0 0 / 0.04);
}

.site-header .site-avatar.is-pressed {
	transform: scale(0.93) !important;
}




@media (prefers-color-scheme: dark) {
	.site-avatar {
		box-shadow:
			0px 0px 0px 1px color(display-p3 1 1 1 / 0.08),
			0px 1px 2px -1px color(display-p3 1 1 1 / 0.06),
			0px 2px 4px 0px color(display-p3 1 1 1 / 0.04);
	}
	
	
	/* Invert laurel SVG to white in dark mode */
	img[src*="_laurel"] {
		filter: grayscale(1) brightness(3.0);
		opacity: 0.85;
	}
}

.site-branding-group {
	display: flex;
	align-items: center;
}

.mobile-only-branding {
	display: none;
}

.site-header .site-branding {
	flex: 1;
}

.site-header .site-branding h1 {
	font-size: var(--font-size-md);
	font-weight: 600;
	margin: 0;
}

.site-name {
	color: var(--heading-color);
}

.site-header .site-branding p {
	margin: 0.25rem 0 0 0;
	color: var(--secondary-color);
	max-width: 600px;
}

/* Light mode gradient */
.site-tagline {
	background: linear-gradient(90deg, 
		var(--heading-color) 0%, 
		color(display-p3 0.38 0.59 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.site-tagline .ampersand {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	background: linear-gradient(90deg, 
		var(--heading-color) 0%, 
		color(display-p3 0.38 0.59 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Dark mode gradient */
@media (prefers-color-scheme: dark) {
	.site-tagline {
		background: linear-gradient(90deg, 
			color(display-p3 1 1 1) 0%, 
			color(display-p3 0.53 0.71 1) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}
	
	.site-tagline .ampersand {
		background: linear-gradient(90deg, 
			color(display-p3 1 1 1) 0%, 
			color(display-p3 0.53 0.71 1) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}
}

.site-header nav,
.site-nav {
	display: flex !important;
	align-items: center;
	gap: 1.4rem;
	visibility: visible !important;
	opacity: 1 !important;
}

.site-header nav a,
.site-nav a {
	margin-left: 0;
	font-size: var(--font-size-sm);
	color: var(--secondary-color);
	text-decoration: none;
	white-space: nowrap;
}

.site-header nav a.active,
.site-nav a.active {
	color: var(--primary-color);
	cursor: default;
	pointer-events: none;
}

@media (hover: hover) {
	.site-header nav a:hover,
	.site-nav a:hover {
		color: var(--primary-color);
	}
}

/* ============================================================
   MOBILE BOTTOM BAR
   ============================================================ */

/* Hidden on desktop */
.mobile-bar {
	display: none;
}

/* Desktop: hide the Home link */
.desktop-nav .nav-home,
.site-header .site-nav .nav-home {
	display: none;
}

@media (max-width: 768px) {
	html.entry-nav-pending .entry-nav {
		opacity: 0;
		transform: translateY(28px) scale(0.96);
		pointer-events: none;
	}

	/* --- Hide desktop header nav on mobile (high specificity to beat .site-header nav !important) --- */
	.site-header nav.desktop-nav {
		display: none !important;
		visibility: hidden !important;
	}

	/* --- Keep page branding visible on mobile (About/Work) --- */
	.page-branding {
		display: flex !important;
		justify-content: center;
		width: 100%;
	}

	/* One mobile header design for Home/About/Work */
	.mobile-unified-branding {
		display: flex !important;
		justify-content: center !important;
		align-items: center;
		width: auto !important;
		max-width: 100%;
		margin: 0 auto;
	}

	/* --- Header margin: no banner on mobile, less top space, 24px sides --- */
	.site-header {
		margin: 24px auto 16px;
		padding: 0 24px;
		justify-content: center;
	}

	/* --- Homepage branding: compact, centered --- */
	.homepage-branding {
		justify-content: center;
	}

	.mobile-unified-branding {
		align-items: center;
	}

	.site-header .site-branding {
		text-align: left;
	}

	.mobile-unified-branding .site-avatar {
		width: 44px;
		height: 44px;
		margin-right: 12px;
	}

	.mobile-unified-branding .site-name {
		font-size: var(--font-size-sm);
	}

	.mobile-unified-branding .site-branding p {
		margin-top: 1px;
		font-size: var(--font-size-sm);
	}

	/* --- Collapse header only when there is no branding to show --- */
	.site-header:not(:has(.site-branding-group)) {
		height: 0;
		min-height: 0;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	/* --- Show Work-only branding on mobile --- */
	.mobile-only-branding {
		display: flex;
	}

	/* Keep shared mobile header static between Home/About/Work transitions */
	body.shell-page .mobile-unified-branding {
		view-transition-name: mobile-header;
	}

	/* --- Entry nav: fixed at the bottom on mobile with fade gradient --- */
	.entry-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		max-width: var(--content-width);
		margin: 0 auto;
		padding: 32px 24px calc(16px + env(safe-area-inset-bottom));
		z-index: 998;
		height: auto;
		min-height: auto;
		box-sizing: border-box;
		background: transparent;
	}

	.entry-nav::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			hsla(0, 0%, 100%, 0) 0%,
			hsla(0, 0%, 100%, 0.002) 1.8%,
			hsla(0, 0%, 100%, 0.008) 4.8%,
			hsla(0, 0%, 100%, 0.021) 9%,
			hsla(0, 0%, 100%, 0.042) 13.9%,
			hsla(0, 0%, 100%, 0.075) 19.8%,
			hsla(0, 0%, 100%, 0.126) 27%,
			hsla(0, 0%, 100%, 0.194) 35%,
			hsla(0, 0%, 100%, 0.278) 43.5%,
			hsla(0, 0%, 100%, 0.382) 53%,
			hsla(0, 0%, 100%, 0.541) 66%,
			hsla(0, 0%, 100%, 0.738) 81%,
			hsl(0, 0%, 100%) 100%
		);
		z-index: -1;
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
	}

	.entry-nav .back-button,
	.entry-nav .copy-link-button {
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		flex-shrink: 0;
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}


	/* --- Mobile bottom bar: fixed at bottom, centered --- */
	.mobile-bar {
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		z-index: 999;
		pointer-events: none;
		view-transition-name: mobile-bar-frame;
	}

	html.vt-root-nav .mobile-bar {
		view-transition-name: none !important;
	}

	/* --- Floating pill with backdrop blur --- */
	.mobile-bar .site-nav {
		display: flex !important;
		align-items: center;
		position: relative;
		background: color(display-p3 0.96 0.96 0.96 / 0.9);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
		border-radius: 100px;
		padding: 4px;
		gap: 4px;
		pointer-events: auto;
		box-shadow:
			0 2px 12px color(display-p3 0 0 0 / 0.06),
			0 0 0 0.5px color(display-p3 0 0 0 / 0.06);
	}


	/* Safari iOS: backdrop-filter on fixed elements is a major FPS hit during navigation */
	.safari .mobile-bar .site-nav {
		-webkit-backdrop-filter: none;
		backdrop-filter: blur(8px);
		background: color(display-p3 0.96 0.96 0.96 / 0.96);
		box-shadow:
			0 1px 6px color(display-p3 0 0 0 / 0.06),
			0 0 0 0.5px color(display-p3 0 0 0 / 0.06);
	}

	/* --- Segmented control slider --- */
	.nav-segment {
		position: absolute;
		top: 4px;
		left: 0;
		width: 0;
		height: calc(100% - 8px);
		border-radius: 999px;
		background: color(display-p3 0.12 0.12 0.12 / 0.08);
		pointer-events: none;
		z-index: 0;
		will-change: transform, width;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.mobile-bar .site-nav .nav-home {
		display: inline;
	}

	.mobile-bar .site-nav a {
		position: relative;
		z-index: 2;
		padding: 10px 18px;
		border-radius: 100px;
		font-size: var(--font-size-sm);
		color: var(--primary-color);
		opacity: 0.4;
		text-decoration: none;
		white-space: nowrap;
		transition: color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-webkit-user-drag: none;
		user-select: none;
		touch-action: manipulation;
	}

	.mobile-bar .site-nav a:active {
		transform: scale(0.92);
	}

	.home-link:active .site-avatar {
		transform: scale(0.93);
	}

	/* Safari: no tap scale to avoid hang */
	.safari .mobile-bar .site-nav a:active {
		transform: none;
	}
	.safari .mobile-bar .site-nav a {
		transition: color 0.2s ease, opacity 0.2s ease;
	}

	/* Active link: full opacity */
	.mobile-bar .site-nav a.active,
	.mobile-bar .site-nav:not(:has(a.active)) .nav-home {
		opacity: 1;
		color: var(--primary-color);
	}

	/* Allow tap scale on active segment (click still no-op) */
	.mobile-bar .site-nav a.active {
		pointer-events: auto;
	}


	/* --- Entry page: top blur gradient (supports iOS status bar) --- */
	body:has(.entry-nav)::after {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 72px;
		background: linear-gradient(
			180deg,
			color(display-p3 0.98 0.98 0.98 / 0.78) 0%,
			color(display-p3 0.98 0.98 0.98 / 0.62) 28%,
			color(display-p3 0.98 0.98 0.98 / 0.36) 58%,
			color(display-p3 0.98 0.98 0.98 / 0.12) 82%,
			color(display-p3 0.98 0.98 0.98 / 0) 100%
		);
		-webkit-backdrop-filter: saturate(140%) blur(16px);
		backdrop-filter: saturate(140%) blur(16px);
		z-index: 997;
		pointer-events: none;
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
	}

	/* --- Hide mobile-bar on blog post entries (CSS fallback) --- */
	body:has(.entry-nav):not(.prototypes) .mobile-bar {
		display: none !important;
	}

	/* --- Hide entry-nav on Work page (mobile shows bottom bar instead) --- */
	body.prototypes .entry-nav {
		display: none !important;
	}

	/* --- Hide construction banner on mobile --- */
	.construction-banner {
		display: none !important;
	}

	/* --- Hide animation debug panel on mobile --- */
	.animation-debug-panel {
		display: none !important;
	}

	/* --- Content: 24px side padding on mobile --- */
	.content {
		padding-left: 24px;
		padding-right: 24px;
		padding-bottom: calc(72px + env(safe-area-inset-bottom));
	}

	/* --- Entry pages: align entry title start with header baseline on mobile --- */
	.entry-content {
		margin-top: 0;
	}

	/* Entry pages (blog posts): clear entry-nav */
	body:has(.entry-nav) .content {
		padding-bottom: calc(72px + env(safe-area-inset-bottom));
	}

	/* --- Smaller body copy on mobile --- */
	html, body {
		font-size: 15px;
	}
}

@media (max-width: 768px) and (prefers-color-scheme: dark) {
	.mobile-bar .site-nav {
		background: color(display-p3 0.15 0.15 0.15 / 0.85);
		box-shadow:
			0 2px 12px color(display-p3 0 0 0 / 0.2),
			0 0 0 0.5px color(display-p3 1 1 1 / 0.06);
	}

	.safari .mobile-bar .site-nav {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: color(display-p3 0.15 0.15 0.15 / 0.92);
		box-shadow:
			0 1px 6px color(display-p3 0 0 0 / 0.35),
			0 0 0 0.5px color(display-p3 1 1 1 / 0.06);
	}

	.nav-segment {
		background: color(display-p3 1 1 1 / 0.14);
	}

	.mobile-bar .site-nav a {
		color: white;
	}

	/* Dark mode: entry-nav bottom gradient */
	.entry-nav::before {
		background: linear-gradient(
			180deg,
			hsla(0, 0%, 9%, 0) 0%,
			hsla(0, 0%, 9%, 0.002) 1.8%,
			hsla(0, 0%, 9%, 0.008) 4.8%,
			hsla(0, 0%, 9%, 0.021) 9%,
			hsla(0, 0%, 9%, 0.042) 13.9%,
			hsla(0, 0%, 9%, 0.075) 19.8%,
			hsla(0, 0%, 9%, 0.126) 27%,
			hsla(0, 0%, 9%, 0.194) 35%,
			hsla(0, 0%, 9%, 0.278) 43.5%,
			hsla(0, 0%, 9%, 0.382) 53%,
			hsla(0, 0%, 9%, 0.541) 66%,
			hsla(0, 0%, 9%, 0.738) 81%,
			hsl(0, 0%, 9%) 100%
		);
	}

	/* Dark mode: entry page top blur gradient */
	body:has(.entry-nav)::after {
		background: linear-gradient(
			180deg,
			color(display-p3 0.09 0.09 0.09 / 0.82) 0%,
			color(display-p3 0.09 0.09 0.09 / 0.68) 28%,
			color(display-p3 0.09 0.09 0.09 / 0.42) 58%,
			color(display-p3 0.09 0.09 0.09 / 0.16) 82%,
			color(display-p3 0.09 0.09 0.09 / 0) 100%
		);
	}
}


.content {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 1rem;
	min-height: 100vh;
}

/* NOTE: previously had `.content { @starting-style { opacity: 0 } transition: opacity .3s }`
   which fired on EVERY fresh document — i.e. every navigation and every cold
   load from search. The 300ms fade-from-invisible read as a "mini blink" /
   flash of no content. Removed: content now paints immediately. */

.section-title {
	margin-top: 3rem;
	margin-bottom: 1.5rem;
	font-size: 1.5rem;
	font-weight: 600;
}


article {
	margin-bottom: 2rem;
	padding: 1.5rem 0;
}

.card {
	border: 1px solid var(--card-border-color);
	border-radius: 12px;
	padding: 1.5rem 1.75rem;
	transition: box-shadow 0.2s ease;
}

@media (hover: hover) {
	.card:hover {
		box-shadow: 0 4px 10px color(display-p3 0 0 0 / 0.05);
	}
}

article h3 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
}

/* The home-feed post title is a link, so the generic `a { color: primary }`
   rule (pure black) overrides the heading colour and makes it look darker
   than the post-page <h1> (which uses heading colour). Inherit so both
   titles render identically. */
article h3 a {
	color: inherit;
}

/* The bare `h1 { -webkit-font-smoothing: auto }` rule (above) makes the
   post-page title render heavier than the home-feed title, which is an
   <h3> link inheriting the site-wide `antialiased` smoothing. Match the
   entry title to the rest of the site so both titles look identical. */
.entry-content h1 {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

article h1 {
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

article .meta {
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--secondary-color);
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

article .meta.meta-needs-format {
	visibility: hidden;
}

article .meta.meta-needs-format.meta-ready {
	visibility: visible;
}


article img,
article video,
article iframe,
article embed,
article object {
	max-width: 100%;
	height: auto;
	display: block;
}

article img {
	border-radius: 6px;
}

.caption {
	color: var(--secondary-color);
	font-size: var(--font-size-sm);
}


.entry-content {
	/* Container styles handled by parent .content */
	margin-top: 2rem;
}


.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object {
	max-width: 100%;
	height: auto;
	display: block;
}

.entry-content img {
	border-radius: 6px;
	cursor: zoom-in;
	cursor: -webkit-zoom-in;
}


p img {
	margin-bottom: 1em;
	cursor: zoom-in;
	cursor: -webkit-zoom-in;
}

article img {
	cursor: zoom-in;
	cursor: -webkit-zoom-in;
}


.tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

.tag-cloud-link {
	align-items: center;
	border-radius: 8px;
	border: 1px solid var(--card-border-color);
	display: inline-flex;
	font-size: var(--font-size-sm);
	justify-content: center;
	padding: 0 16px;
	min-height: 36px;
	transition: background-color 200ms ease-out, color 200ms ease-out, transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}


.about {
	position: relative;
}


.intro {
	border: 1px solid var(--lines);
	margin-top: 2.2rem;
	margin-bottom: 1.5rem;
	position: relative;
	font-style: normal;
	border-radius: 24px;
	box-shadow: var(--shadow);
	padding: 44px 60px 32px 60px;
	corner-shape: squircle;
}

.intro::before {
	content: "❊ ❈ ❊";
	color: var(--marks);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--background-color);
	padding: 0 0.25rem;
	font-style: normal;
}

.intro p {
	margin-bottom: 1.25rem;
	line-height: 1.65;
	font-size: 0.9375rem;
	color: var(--secondary-color);
}

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


.intro p:first-of-type {
	font-size: 0.9375rem;
	line-height: 1.65;
	font-weight: 400;
}


.intro img {
	width: 208px;
	margin-top: 38px;
	margin-left: 0;
	margin-right: 0;
	display: block;
	cursor: default;
	pointer-events: none;
	filter: grayscale(1) brightness(0.3);
}




.intro .emphasis {
	font-weight: 600;
	color: var(--primary-color);
	position: relative;
	font-size: 1.02em;
	letter-spacing: -0.01em;
}

.intro a {
	text-decoration: underline;
	text-decoration-color: #c0c0c0;
	text-decoration-style: dotted;
	text-decoration-skip-ink: auto;
}

strong {
	font-weight: 600;
	color: var(--primary-color);
}

/* Tools/Logos Grid - 4 columns × 2 rows */
.logos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 2rem 0;
	padding: 0;
	border: 1px solid var(--card-border-color);
	border-radius: 12px;
	overflow: hidden;
}

.tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	text-align: center;
	padding: 2rem;
	border-right: 1px solid var(--card-border-color);
	border-bottom: 1px solid var(--card-border-color);
	aspect-ratio: 1;
}

/* Remove right border from last column */
.tool:nth-child(4n) {
	border-right: none;
}

/* Remove bottom border from last row */
.tool:nth-last-child(-n+4) {
	border-bottom: none;
}

.tool img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: 12px;
	transition: transform 0.2s ease;
	cursor: default !important;
	pointer-events: none;
}

/* Bitrig's asset is full-bleed (squircle touches the edges), while the other
   app icons carry transparent padding inside their PNGs. At the same 64px box
   that makes Bitrig render visibly larger than its neighbours. Scale it down
   to match their footprint. */
.tool img[alt="Bitrig"] {
	transform: scale(0.82); /* siblings carry ~18% internal padding; match it */
}
.tool img[alt="Bitrig"]:hover {
	transform: scale(0.86);
}

.tool .caption {
	font-size: var(--font-size-xs);
	color: var(--secondary-color);
	font-weight: 400;
	letter-spacing: -0.01em;
	opacity: 0.65;
}

.tool img:hover {
	transform: scale(1.05);
}

@media (max-width: 640px) {
	.logos {
		grid-template-columns: repeat(2, 1fr);
		padding: 1rem;
	}
	
	.tool {
		padding: 1.5rem 1rem;
		min-height: 120px;
	}
	
	/* Remove right border from every 2nd item (instead of 4th) */
	.tool:nth-child(4n) {
		border-right: 1px solid var(--card-border-color);
	}
	.tool:nth-child(2n) {
		border-right: none;
	}
	
	/* Update bottom border removal for 2 columns */
	.tool:nth-last-child(-n+4) {
		border-bottom: 1px solid var(--card-border-color);
	}
	.tool:nth-last-child(-n+2) {
		border-bottom: none;
	}
	
	.tool img {
		width: 56px;
		height: 56px;
	}
}




@media (prefers-color-scheme: dark) {
	.intro p:first-of-type {
		opacity: 0.95;
	}
	
	.intro img {
		filter: grayscale(1) brightness(3.0);
	}
	
	.intro .emphasis,
	.intro strong {
		color: #ffffff !important;
	}
	
	.intro a,
	.final-note a {
		text-decoration-color: #505050;
	}
	
	.tool img {
		filter: none;
	}
	
}





.archive-description {
	margin-top: 0.75rem;
	margin-bottom: 2rem;
	color: var(--secondary-color);
}

.archive-list {
	margin-top: 1rem;
}

.archive-item {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 1rem;
	align-items: baseline;
	padding: 0.375rem 0;
}

.archive-title {
	min-width: 0;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.archive-date {
	font-size: var(--small-font-size);
	color: var(--secondary-color);
	white-space: nowrap;
}


.entry-content iframe,
article iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}


.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtu.be"],
article iframe[src*="youtube.com"],
article iframe[src*="youtu.be"] {
	border-radius: 16px;
	overflow: hidden;
	
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}


.entry-content iframe[src*="embed.music.apple.com"],
article iframe[src*="embed.music.apple.com"] {
	aspect-ratio: auto;
	height: unset;
}


.apple-music-embed {
	display: block;
	width: 100%;
	border-radius: 10px;
}

.apple-music-embed-wrap {
	position: relative;
	max-width: 660px;
	
	margin-bottom: 0.4rem;
}


.apple-music-embed-wrap + p {
	margin-top: 0.4rem;
}

.apple-music-embed-wrap.is-faded::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40px;
	background: linear-gradient(180deg, rgba(250, 250, 250, 0), var(--background-color));
	pointer-events: none;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

@media (prefers-color-scheme: dark) {
	.apple-music-embed-wrap.is-faded::after {
		background: linear-gradient(180deg, color(display-p3 0.09 0.09 0.09 / 0), color(display-p3 0.09 0.09 0.09));
	}
}

pre,
code {
	
	font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	
	background-color: var(--input-background-color);
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	font-size: 0.9em;
	
	font-feature-settings: 
		"ss01" 1,
		"ss02" 1,
		"zero" 1,
		"calt" 1;
}

pre {
	overflow-x: auto;
	padding: 1rem;
	line-height: 1.6;
	border: 1px solid var(--card-border-color);
}


code {
	max-width: none;
}


/* Final Note Section */
.final-note {
	max-width: var(--content-width);
	margin: 3rem auto 2rem;
	padding: 0 1rem;
}

.final-note-content {
	text-align: center;
}

.final-note-content p {
	font-size: var(--font-size-sm);
	line-height: 1.8;
	color: var(--secondary-color);
	margin: 0;
	text-wrap: balance;
}

.final-note a {
	text-decoration: underline;
	text-decoration-color: #c0c0c0;
	text-decoration-style: dotted;
	text-decoration-skip-ink: auto;
}

.no-break {
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.inline-icon {
	width: 14px;
	height: 14px;
	display: inline-block;
	flex-shrink: 0;
	opacity: 0.7;
	position: relative;
	top: 1px;
}

.bolt-icon {
	fill: currentColor;
	stroke: none;
}

footer {
	max-width: var(--content-width);
	margin: 0 auto;
	text-align: center;
	padding: 3rem 0 2.5rem;
	font-size: 0.875rem;
	color: var(--secondary-color);
	border-top: 1px solid var(--card-border-color);
}

.horizontal-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.horizontal-container p {
	margin: 0;
}

svg.footer-illustration {
	width: 180px;
	height: auto;
	display: block;
	user-select: none;
	--jk: #1a1a1a;
	--jb: color(display-p3 0.98 0.98 0.98);
}

@media (prefers-color-scheme: dark) {
	svg.footer-illustration {
		--jk: white;
		--jb: color(display-p3 0.09 0.09 0.09);
	}
}

svg.footer-illustration .s { fill: var(--jk); }
svg.footer-illustration .b { fill: var(--jb); }

svg.footer-illustration .j-sun,
svg.footer-illustration .j-cloud,
svg.footer-illustration .j-wl,
svg.footer-illustration .j-boat,
svg.footer-illustration .j-b1,
svg.footer-illustration .j-b2,
svg.footer-illustration .j-b3,
svg.footer-illustration .j-b4,
svg.footer-illustration .j-b5 {
	transform-box: fill-box;
	transform-origin: center;
}

svg.footer-illustration .j-boat {
	transform-origin: center bottom;
}

/* svg footer illustration animations — disabled for now */


form.search-form {
	margin: 2rem 0;
	display: flex;
	align-items: center;
}

form.search-form input[type="text"],
form.search-form input[type="search"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	flex: 1;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--card-border-color);
	border-radius: 6px;
	background-color: var(--input-background-color);
	color: var(--primary-color);
	font: inherit;
	
	font-size: max(16px, 1rem);
	width: 100%;
	box-sizing: border-box;
	box-shadow: none;
	background-clip: padding-box;
}

form.search-form input[type="text"]::placeholder,
form.search-form input[type="search"]::placeholder {
	color: var(--secondary-color);
}


form.search-form input[type="text"]:focus,
form.search-form input[type="search"]:focus {
	appearance: none;
	outline: none;
	box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--primary-color);
}


form.search-form input[type="submit"] {
	display: none;
}


.pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 2rem 0;
	font-size: var(--font-size-xs);
}

.pagination a {
	color: var(--accent-color);
	text-decoration: none;
	font-weight: 500;
}

@media (hover: hover) {
	.pagination a:hover {
		text-decoration: underline;
	}
}


/* ── Facts list ──────────────────────────────────────────────────────────── */

.facts-card {
	background-color: #f0f0f0;
	padding: 60px;
	border-radius: 24px;
	margin: 2rem 0 4rem;
}

.facts-card .facts-heading {
	margin: 0 0 1.5rem;
}

.facts-card .facts-list {
	margin: 0;
	max-width: none;
}

@media (prefers-color-scheme: dark) {
	.facts-card {
		background-color: #1c1c1c;
	}
	.facts-card .facts-heading {
		color: rgba(255, 255, 255, 0.4);
	}
	.facts-card .facts-list li {
		color: rgba(255, 255, 255, 0.65);
	}
	.facts-card .facts-list a {
		color: rgba(255, 255, 255, 0.9);
		text-decoration-color: rgba(255, 255, 255, 0.2);
	}
}

@media (max-width: 600px) {
	.facts-card { padding: 32px 28px; }
	.facts-card .facts-list { grid-template-columns: 1fr; }
}


.facts-heading {
	font-size: var(--font-size-xs);
	color: var(--marks);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 3.5rem 0 1rem;
}

.facts-list {
	list-style: none;
	padding: 0;
	margin: 0 0 4rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	max-width: var(--content-width);
}

.facts-list li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	font-size: var(--font-size-sm);
	color: var(--secondary-color);
	line-height: 1.55;
}

.facts-list a {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: #c0c0c0;
	text-decoration-style: dotted;
	text-decoration-skip-ink: auto;
}

.facts-list li > svg {
	flex-shrink: 0;
	margin-top: 0.2em;
}

.facts-list li:nth-child(1) > svg { color: #D4824A; }
.facts-list li:nth-child(2) > svg { color: #4A9EE8; }
.facts-list li:nth-child(3) > svg { color: #8B7FD4; }
.facts-list li:nth-child(4) > svg { color: #4ABFB8; }
.facts-list li:nth-child(5) > svg { color: #D4688A; }
.facts-list li:nth-child(6) > svg { color: #6B9E72; }
.facts-list li:nth-child(7) > svg { color: #C8A84A; }

/* Blurred word — unblurs on li hover with a springy bounce */
.blur-reveal {
	filter: blur(5px);
	transition: filter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	cursor: default;
	display: inline-block;
}

.facts-list li:hover .blur-reveal,
.facts-list li:focus-within .blur-reveal {
	filter: blur(0px);
}

@media (prefers-reduced-motion: reduce) {
	.blur-reveal {
		filter: none;
		transition: none;
	}
}

/* ── End facts list ──────────────────────────────────────────────────────── */

.entry-content .cv {
	display: grid;
	grid-template-columns: minmax(10ch, 14ch) 1fr;
	column-gap: 2rem;
	margin:2rem 0;
	align-items: start;
}


.entry-content .cv > h1,
.entry-content .cv > h2,
.entry-content .cv > h3,
.entry-content .cv > h4,
.entry-content .cv > h5,
.entry-content .cv > h6 {
	grid-column: 1;
	color: var(--secondary-color);
	font-size: var(--font-size-xs);
	font-weight: 400;
	white-space: nowrap;
	padding-top: 0.2rem;
	margin: 0;
	letter-spacing: -0.01em;
	opacity: 0.65;
}

.entry-content .cv > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
	grid-column: 2;
}


.entry-content .cv > p:first-of-type {
	margin: 0;
	padding-top: 0.2rem;
	font-weight: 500;
	font-size: var(--font-size-base);
	color: var(--heading-color);
	line-height: 1.4;
	
	opacity: 0;
	transition: opacity 0.2s ease-out;
}


.entry-content .cv.cv-processed > p:first-of-type {
	opacity: 1;
}


.cv-arrow {
	color: var(--secondary-color);
	font-weight: 400;
	opacity: 0.65;
}


.entry-content .cv > p {
	margin: 0.35rem 0 0;
	font-weight: 400;
	font-size: var(--font-size-sm);
	color: var(--secondary-color);
	line-height: 1.5;
	opacity: 0.75;
}

.entry-content .cv > ul {
	margin: 0.35rem 0 0;
	padding-left: 1.2em;
	list-style-position: outside;
}

.entry-content .cv > ul > li {
	margin: 0.35rem 0 0;
	font-weight: 400;
	font-size: var(--font-size-sm);
	color: var(--secondary-color);
	line-height: 1.5;
	opacity: 0.75;
	padding-left: 0.2em;
}


@media (prefers-color-scheme: dark) {
	.entry-content .cv > h1,
	.entry-content .cv > h2,
	.entry-content .cv > h3,
	.entry-content .cv > h4,
	.entry-content .cv > h5,
	.entry-content .cv > h6 {
		opacity: 0.5;
	}
	
	.entry-content .cv > p:first-of-type {
		font-weight: 500;
		opacity: 0.95;
	}
	
	.entry-content .cv.cv-processed > p:first-of-type {
		opacity: 0.95;
	}
	
	.cv-arrow {
		opacity: 0.5;
	}
	
	.entry-content .cv > p {
		opacity: 0.6;
	}
	
	.about a,
	.entry-content .cv a {
		text-decoration-color: #505050;
	}
}


.entry-content > h2 {
	font-size: var(--font-size-lg);
	font-weight: 600;
	color: var(--heading-color);
	margin: 3rem 0 1.5rem;
	letter-spacing: -0.02em;
}


@media (prefers-color-scheme: dark) {
	.entry-content > h2 {
		font-weight: 600;
		opacity: 0.95;
	}
}



#random-quote {
  font-style: italic;
  quotes: "“" "”" "‘" "’";
  
  text-wrap: balance;
}

#random-quote::before {
	content: open-quote;
}
#random-quote::after {
	content: close-quote;
}

.wip {
  padding: 20px;
  border-radius: 16px;
  background-color: color(display-p3 1 1 0.93);
  color: color(display-p3 0.42 0.34 0.10);
  align-items: center;
  margin-bottom: 56px;
  margin-top: 56px;
}



#masonry-grid {
	margin: 0 auto;
	opacity: 0;
	transition: opacity 0.3s ease;
}

#masonry-grid.ready {
	opacity: 1;
}

.grid-item {
	background: transparent;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 20px;
	position: relative;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
	corner-shape: squircle;
	cursor: pointer;
	box-shadow:
		0px 0px 0px 1px color(display-p3 0 0 0 / 0.08),
		0px 1px 2px -1px color(display-p3 0 0 0 / 0.08),
		0px 2px 4px 0px color(display-p3 0 0 0 / 0.06);
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	perspective: 1000px;
	-webkit-perspective: 1000px;
}

/* Lazy items start hidden */
.grid-item[data-lazy="true"] {
	opacity: 0;
	transform: translateY(20px);
	filter: blur(4px);
}

/* Load More button */
.load-more-button {
	display: block;
	margin: 40px auto;
	padding: 12px 32px;
	font-size: var(--font-size-base);
	font-weight: 500;
	color: var(--primary-color);
	background: transparent;
	border: 1px solid var(--card-border-color);
	border-radius: 24px;
	cursor: pointer;
	transition: all 0.3s ease;
}

@media (hover: hover) {
	.load-more-button:hover {
		background: var(--input-background-color);
		transform: translateY(-2px);
	}
}

.load-more-button:active {
	transform: translateY(0);
}

.load-more-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Page header layout for prototypes/work page */
body.prototypes .page-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2rem;
	margin-bottom: 2rem;
}

body.prototypes .page-header-text {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1;
}

body.prototypes .page-header-text h1 {
	margin: 0;
	line-height: 1.2;
}

body.prototypes .page-header-text .meta {
	margin: 0;
}

body.prototypes .page-header-text .meta p {
	line-height: 1.6;
	max-width: 320px;
}

body.prototypes .page-header-controls {
	display: flex;
	align-items: flex-start;
	padding-top: 0;
	flex-shrink: 0;
}

/* Motion Sickness toggle switch */
.motion-switch {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
	user-select: none;
}

.motion-switch input[type="checkbox"] {
	position: relative;
	width: 44px;
	height: 24px;
	appearance: none;
	background: var(--input-background-color);
	border: 1px solid var(--card-border-color);
	border-radius: 12px;
	outline: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.motion-switch input[type="checkbox"]::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background: var(--primary-color);
	border-radius: 50%;
	transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
	            background 0.3s ease;
}

.motion-switch input[type="checkbox"]:checked {
	background: var(--primary-color);
	border-color: var(--primary-color);
}

.motion-switch input[type="checkbox"]:checked::before {
	background: white;
	transform: translateX(20px);
}

.motion-switch .switch-label {
	font-size: 12.25px;
	font-weight: 400;
	color: var(--secondary-color);
	white-space: nowrap;
	transition: color 0.3s ease;
	user-select: none;
	-webkit-user-select: none;
	padding-top: 2px;
}

/* Light mode: blue background when ON, label stays black */
@media (prefers-color-scheme: light) {
	.motion-switch input[type="checkbox"]:checked {
		background: color(display-p3 0 0.48 1);
		border-color: color(display-p3 0 0.48 1);
	}
	
	.motion-switch:has(input:checked) .switch-label {
		color: var(--primary-color);
	}
}

/* Dark mode: brighter blue background when ON, label turns white */
@media (prefers-color-scheme: dark) {
	.motion-switch input[type="checkbox"]:checked {
		background: color(display-p3 0.29 0.62 1);
		border-color: color(display-p3 0.29 0.62 1);
	}
	
	.motion-switch:has(input:checked) .switch-label {
		color: color(display-p3 1 1 1);
	}
	
	/* Lighter shadows for dark mode */
	.grid-item {
		box-shadow:
			0px 0px 0px 1px color(display-p3 1 1 1 / 0.08),
			0px 2px 8px 0px color(display-p3 0 0 0 / 0.4),
			0px 4px 16px 0px color(display-p3 0 0 0 / 0.3);
	}
	
	.grid-item:hover {
		box-shadow:
			0px 0px 0px 1px color(display-p3 1 1 1 / 0.12),
			0px 4px 12px 0px color(display-p3 0 0 0 / 0.5),
			0px 8px 24px 0px color(display-p3 0 0 0 / 0.4);
	}
}

@media (max-width: 640px) {
	body.prototypes .page-header {
		flex-direction: column;
		gap: 1rem;
		margin-top: 24px; /* Extra space to avoid construction banner collision */
		padding-top: 12px;
	}
	
	/* Hide Motion Sickness switch on mobile */
	.motion-switch {
		display: none;
	}
}

.video-wrapper {
	position: relative;
	width: 100%;
	background: color(display-p3 0 0 0);
	display: block;
	overflow: hidden;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.video-wrapper .video-info-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

.video-wrapper::before {
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%; 
}

.video-wrapper[data-aspect-ratio]::before {
	display: none;
}

.grid-item video {
	width: 100%;
	height: auto;
	display: block;
	background: color(display-p3 0 0 0);
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}


.video-info-button {
	width: 40px;
	height: 40px;
	background: color(display-p3 0 0 0 / 0.55);
	backdrop-filter: blur(15px);
	border-radius: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease;
	z-index: 3;
	pointer-events: auto;
	flex-shrink: 0;
	will-change: transform, background-color;
	
	user-select: none;
	-webkit-user-select: none;
	
	-webkit-tap-highlight-color: color(display-p3 0 0 0 / 0);
}

.video-info .video-info-button {
	display: flex;
	position: relative;
	top: auto;
	left: auto;
	transform: none;
}

@media (hover: hover) {
	.video-info-button:hover {
		transform: scale(1.1);
		background: color(display-p3 0 0 0 / 0.65);
	}
}


.video-info-button .icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.8);
	opacity: 0;
	filter: blur(4px);
	transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
	will-change: opacity, transform, filter;
}

.video-info-button.is-paused .icon-play,
.video-info-button.is-playing .icon-pause {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	filter: blur(0);
}


.icon-play svg,
.icon-pause svg {
	width: 18px;
	height: 18px;
	stroke: color(display-p3 1 1 1);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	display: block;
}

.icon-play svg polygon {
	fill: color(display-p3 1 1 1);
	stroke: none;
}

/* Better centering for play icon (visual balance) */
.icon-play {
	transform: translate(-50%, -50%) translateX(1px) !important;
}

/* Better centering for pause icon */
.icon-pause {
	transform: translate(-50%, -50%) !important;
}

.video-info {
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	padding: 60px 12px 12px 20px;
	background: transparent;
	background-image: linear-gradient(
		to top,
		color(display-p3 0 0 0 / 1) 0%,
		color(display-p3 0 0 0 / 1) 2%,
		color(display-p3 0 0 0 / 0.995) 4%,
		color(display-p3 0 0 0 / 0.99) 6%,
		color(display-p3 0 0 0 / 0.985) 8%,
		color(display-p3 0 0 0 / 0.98) 10%,
		color(display-p3 0 0 0 / 0.97) 12%,
		color(display-p3 0 0 0 / 0.96) 14%,
		color(display-p3 0 0 0 / 0.94) 16%,
		color(display-p3 0 0 0 / 0.92) 18%,
		color(display-p3 0 0 0 / 0.9) 20%,
		color(display-p3 0 0 0 / 0.87) 23%,
		color(display-p3 0 0 0 / 0.84) 26%,
		color(display-p3 0 0 0 / 0.8) 29%,
		color(display-p3 0 0 0 / 0.75) 32%,
		color(display-p3 0 0 0 / 0.7) 35%,
		color(display-p3 0 0 0 / 0.64) 39%,
		color(display-p3 0 0 0 / 0.58) 43%,
		color(display-p3 0 0 0 / 0.51) 47%,
		color(display-p3 0 0 0 / 0.44) 51%,
		color(display-p3 0 0 0 / 0.37) 55%,
		color(display-p3 0 0 0 / 0.3) 59%,
		color(display-p3 0 0 0 / 0.24) 63%,
		color(display-p3 0 0 0 / 0.18) 67%,
		color(display-p3 0 0 0 / 0.13) 71%,
		color(display-p3 0 0 0 / 0.09) 75%,
		color(display-p3 0 0 0 / 0.06) 80%,
		color(display-p3 0 0 0 / 0.03) 85%,
		color(display-p3 0 0 0 / 0.01) 90%,
		color(display-p3 0 0 0 / 0) 100%
	);
	z-index: 1;
	pointer-events: none;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	opacity: 1;
	transform: translateY(0) translateZ(0);
	-webkit-transform: translateY(0) translateZ(0);
	filter: blur(0);
	transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
	will-change: opacity, transform, filter;
	display: flex;
	align-items: center;
	justify-content: space-between;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.grid-item.playing .video-info {
	opacity: 0;
	transform: translateY(4px) translateZ(0);
	-webkit-transform: translateY(4px) translateZ(0);
	filter: blur(2px);
}

@media (hover: hover) {
	.grid-item.playing:hover .video-info {
		opacity: 1;
		transform: translateY(0) translateZ(0);
		-webkit-transform: translateY(0) translateZ(0);
		filter: blur(0);
	}
}

@media (hover: hover) {
	.grid-item:hover {
		/* Hover animation handled by Framer Motion */
		box-shadow:
			0px 0px 0px 1px color(display-p3 0 0 0 / 0.12),
			0px 1px 2px -1px color(display-p3 0 0 0 / 0.12),
			0px 2px 4px 0px color(display-p3 0 0 0 / 0.10);
	}
}

/* Mobile: Show video info by default, hide when playing */
@media (hover: none) {
	.video-info {
		opacity: 1;
		transform: translateY(0) translateZ(0);
		-webkit-transform: translateY(0) translateZ(0);
		filter: blur(0);
	}
	
	/* Hide video-info when playing on mobile */
	.grid-item.playing .video-info {
		opacity: 0;
		transform: translateY(4px) translateZ(0);
		-webkit-transform: translateY(4px) translateZ(0);
		filter: blur(2px);
	}
	
	/* Disable scale animation on mobile */
	.grid-item {
		transform: none !important;
	}
}

.video-title {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: color(display-p3 1 1 1);
	margin: 0;
	flex: 1;
}

/* Light video variant (for videos with white backgrounds) */
.light-video .video-info {
	background-image: linear-gradient(
		to top,
		color(display-p3 1 1 1 / 1) 0%,
		color(display-p3 1 1 1 / 1) 2%,
		color(display-p3 1 1 1 / 0.995) 4%,
		color(display-p3 1 1 1 / 0.99) 6%,
		color(display-p3 1 1 1 / 0.985) 8%,
		color(display-p3 1 1 1 / 0.98) 10%,
		color(display-p3 1 1 1 / 0.97) 12%,
		color(display-p3 1 1 1 / 0.96) 14%,
		color(display-p3 1 1 1 / 0.94) 16%,
		color(display-p3 1 1 1 / 0.92) 18%,
		color(display-p3 1 1 1 / 0.9) 20%,
		color(display-p3 1 1 1 / 0.87) 23%,
		color(display-p3 1 1 1 / 0.84) 26%,
		color(display-p3 1 1 1 / 0.8) 29%,
		color(display-p3 1 1 1 / 0.75) 32%,
		color(display-p3 1 1 1 / 0.7) 35%,
		color(display-p3 1 1 1 / 0.64) 39%,
		color(display-p3 1 1 1 / 0.58) 43%,
		color(display-p3 1 1 1 / 0.51) 47%,
		color(display-p3 1 1 1 / 0.44) 51%,
		color(display-p3 1 1 1 / 0.37) 55%,
		color(display-p3 1 1 1 / 0.3) 59%,
		color(display-p3 1 1 1 / 0.24) 63%,
		color(display-p3 1 1 1 / 0.18) 67%,
		color(display-p3 1 1 1 / 0.13) 71%,
		color(display-p3 1 1 1 / 0.09) 75%,
		color(display-p3 1 1 1 / 0.06) 80%,
		color(display-p3 1 1 1 / 0.03) 85%,
		color(display-p3 1 1 1 / 0.01) 90%,
		color(display-p3 1 1 1 / 0) 100%
	);
}

.light-video .video-title {
	color: var(--primary-color);
}

.light-video .video-info-button {
	background: color(display-p3 1 1 1 / 0.55);
	color: var(--primary-color);
}

@media (hover: hover) {
	.light-video .video-info-button:hover {
		background: color(display-p3 1 1 1 / 0.75);
	}
}

.video-description {
	display: none;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px) scale(1);
		filter: blur(2px);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

@media (max-width: 640px) {
	#masonry-grid {
		column-count: 1;
	}
}

/* Wider masonry grid for prototypes page only - not title/date */
body.prototypes .entry-content {
	max-width: 1200px; /* Allow full width for masonry */
	margin: 0 auto;
	padding: 0 1rem;
}

/* Page header matches entry header width (644px) */
body.prototypes .page-header {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
}

/* Only constrain standalone h1/meta (non-prototypes pages) */
body.prototypes .entry-content h1:not(.page-header-text h1),
body.prototypes .entry-content .meta:not(.page-header-text .meta) {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
}

body.prototypes .container {
	max-width: 1200px;
	margin: 32px auto 80px;
	padding: 0;
}

body.prototypes #masonry-grid {
	max-width: 1200px;
	margin-bottom: 40px;
}

@media (max-width: 640px) {
	:root {
		--font-size-xs: 0.8125rem;     
		--font-size-sm: 0.875rem;      
		--font-size-base: 0.9375rem;   
		--font-size-md: 1rem;          
		--font-size-lg: 1.125rem;      
	}
	
	html, body {
		font-size: 15px; 
	}
	
	.entry-content .cv {
		grid-template-columns: 1fr;
		row-gap: 0.25rem;
	}

	.entry-content .cv > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
		grid-column: 1;
	}

	.entry-content .cv > h1,
	.entry-content .cv > h2,
	.entry-content .cv > h3,
	.entry-content .cv > h4,
	.entry-content .cv > h5,
	.entry-content .cv > h6 {
		white-space: normal;
	}
	
	.intro {
		padding: 1.25rem 1.25rem 1rem;
	}
	
	.intro::before {
		font-size: 0.875rem;
	}
}

/* ============================================================
   LIBRARY PAGE STYLES
   ============================================================ */

/* Library Container */
.library-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.5rem 1.5rem 4rem;
}

.library-container {
	width: 100%;
	max-width: 1200px;
}

/* Search Bar */
.library-search-bar {
	margin-bottom: 1.5rem;
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
}

#library-search {
	width: 100%;
	padding: 0.875rem 1.25rem;
	font-size: var(--font-size-base);
	font-family: inherit;
	color: var(--primary-color);
	background-color: var(--input-background-color);
	border: 1px solid var(--card-border-color);
	border-radius: 56px;	
	outline: none;
	transition: all 200ms ease;
}

#library-search:focus {
	border-color: var(--accent-color);
	background-color: var(--background-color);
	box-shadow: 0 0 0 3px color(display-p3 0.38 0.59 1 / 0.1);
}

#library-search::placeholder {
	color: var(--tertiary-color);
}

/* Filter Buttons */
.library-filters {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 2rem;
	justify-content: center;
	flex-wrap: wrap;
}

.filter-btn {
	padding: 0.5rem 1rem;
	font-size: var(--font-size-sm);
	font-family: inherit;
	color: var(--secondary-color);
	background-color: transparent;
	border: 1px solid var(--card-border-color);
	border-radius: var(--small-radius);
	cursor: pointer;
	transition: all 200ms ease;
	font-weight: 500;
}

.filter-btn:hover {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.filter-btn.active {
	color: var(--primary-color);
	background-color: var(--input-background-color);
	border-color: var(--primary-color);
}

/* Subcategory Filter Buttons */
.filter-btn--subcat {
	font-size: 0.85rem;
	padding: 0.4rem 0.85rem;
	opacity: 0.85;
}

.filter-btn--subcat:hover,
.filter-btn--subcat.active {
	opacity: 1;
}

/* Loading & Empty States */
.library-loading,
.library-empty {
	text-align: center;
	padding: 4rem 2rem;
	color: var(--secondary-color);
	font-size: var(--font-size-base);
}

/* Library Grid — CSS columns masonry (no JS needed) */
.library-grid {
	column-count: 3;
	column-gap: 16px;
	min-height: 100vh;
}

.library-grid > * {
	break-inside: avoid;
	margin-bottom: 16px;
}

/* Base Card Styles */
.library-card {
	background-color: var(--background-color);
	border-radius: var(--small-radius);
	corner-shape: squircle;
	overflow: hidden;
	transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1);
	cursor: pointer;
	position: relative;
	min-height: 150px;
}

.library-card:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 24px color(display-p3 0 0 0 / 0.12);
}

@media (prefers-color-scheme: dark) {
	.library-card:hover {
		box-shadow: 0 8px 24px color(display-p3 0 0 0 / 0.4);
	}
}

/* Highlight Card (Post-it Style) */
.library-card--highlight {
	background: linear-gradient(135deg, #ffeb3b 0%, #fff176 100%);
	border: 1px solid color(display-p3 1 0.92 0.23 / 0.4);
	box-shadow: 0 2px 8px color(display-p3 0 0 0 / 0.08);
	transition: transform 200ms ease, box-shadow 200ms ease;
	/* Fix antialiasing issues on hover */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

.library-card--highlight:hover {
	transform: scale(1.02) translateZ(0) !important;
	box-shadow: 0 12px 24px color(display-p3 0 0 0 / 0.15);
}

@media (prefers-color-scheme: dark) {
	.library-card--highlight {
		background: linear-gradient(135deg, #ffe135 0%, #ffd54f 100%);
		border-color: color(display-p3 1 0.88 0.21 / 0.5);
	}
}

.highlight-content {
	padding: 1.5rem;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.highlight-quote {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: color(display-p3 0.1 0.1 0.1);
	margin: 0 0 1rem 0;
}

.highlight-source {
	font-size: var(--font-size-xs);
	color: color(display-p3 0.3 0.3 0.3);
	margin: 0;
	font-weight: 500;
}

@media (prefers-color-scheme: dark) {
	.highlight-quote {
		color: color(display-p3 0.1 0.1 0.1);
	}
	
	.highlight-source {
		color: color(display-p3 0.2 0.2 0.2);
	}
}

/* Link Card */
.library-card--link {
	background-color: var(--background-color);
	border: 1px solid var(--card-border-color);
}

.link-card-content {
	display: block;
	text-decoration: none;
	color: inherit;
	position: relative;
}

.link-image-container {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--input-background-color);
}

.link-image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 200ms ease;
}

.library-card--link:hover .link-image-container img {
	transform: scale(1.02);
}

.link-placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--input-background-color) 0%, var(--background-color) 100%);
	color: var(--tertiary-color);
}

.link-overlay {
	padding: 1rem;
	background: linear-gradient(to top, var(--background-color) 0%, transparent 100%);
	position: relative;
}

.link-category {
	display: inline-block;
	font-size: var(--font-size-xs);
	color: var(--tertiary-color);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.link-title {
	font-size: var(--font-size-base);
	color: var(--primary-color);
	margin: 0;
	line-height: 1.4;
	font-weight: 500;
}

/* Photo Card */
.library-card--photo {
	background-color: var(--input-background-color);
	border: 1px solid var(--card-border-color);
}

.photo-card-content {
	position: relative;
	background-color: var(--input-background-color);
	/* Removed min-height to let images determine natural card height */
}

.photo-card-content img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 200ms ease;
}

/* Removed - parent card handles scale on hover */

.photo-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	color: var(--secondary-color);
	gap: 0.5rem;
}

.photo-placeholder svg {
	opacity: 0.5;
}

.photo-placeholder p {
	font-size: 0.875rem;
	margin: 0;
	opacity: 0.7;
}

.photo-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1rem;
	background: linear-gradient(to top, color(display-p3 0 0 0 / 0.7) 0%, transparent 100%);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 0.5rem;
}

.photo-title {
	font-size: var(--font-size-base);
	color: color(display-p3 1 1 1);
	margin: 0;
	line-height: 1.4;
	font-weight: 500;
	flex: 1;
}

.photo-overlay .external-link-icon {
	position: static;
	flex-shrink: 0;
	opacity: 0.8;
	color: color(display-p3 1 1 1);
}

.library-card:hover .photo-overlay .external-link-icon {
	opacity: 1;
}

/* Text Card */
.library-card--text {
	background: linear-gradient(135deg, var(--input-background-color) 0%, var(--background-color) 100%);
	border: 1px solid var(--card-border-color);
	min-height: 180px;
}

/* Text Card Link Wrapper */
.text-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
	width: 100%;
	/* Removed height: 100% - let it expand naturally with content */
}

.text-card-content {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 180px;
	position: relative;
}

/* Photo Card Link Wrapper */
.photo-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
	width: 100%;
	/* Removed height: 100% - let it expand naturally with content */
}

.text-category {
	display: inline-block;
	font-size: var(--font-size-xs);
	color: var(--tertiary-color);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 500;
	margin-bottom: 0.75rem;
}

.external-link-icon {
	position: absolute;
	top: 1rem;
	right: 1rem;
	opacity: 0.5;
	transition: opacity 200ms ease;
}

.library-card:hover .external-link-icon {
	opacity: 1;
}

.text-title {
	font-size: var(--font-size-lg);
	color: var(--heading-color);
	margin: 0;
	line-height: 1.4;
	font-weight: 600;
}

.text-date {
	display: block;
	font-size: var(--font-size-xs);
	color: var(--tertiary-color);
	margin-top: auto;
}

/* Modal Styles */
.library-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.library-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: color(display-p3 0 0 0 / 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@media (prefers-color-scheme: dark) {
	.library-modal-backdrop {
		background-color: color(display-p3 0 0 0 / 0.8);
	}
}

.library-modal-content {
	position: relative;
	background-color: var(--background-color);
	border-radius: var(--small-radius);
	max-width: 700px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px color(display-p3 0 0 0 / 0.3);
	z-index: 1;
}

.library-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 36px;
	height: 36px;
	border: none;
	background-color: var(--input-background-color);
	color: var(--primary-color);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 200ms ease;
	z-index: 2;
}

.library-modal-close:hover {
	background-color: var(--primary-color);
	color: var(--background-color);
	transform: rotate(90deg);
}

.library-modal-body {
	padding: 3rem 2rem 2rem;
}

.modal-title {
	font-size: var(--font-size-lg);
	color: var(--heading-color);
	margin: 0 0 1.5rem 0;
	font-weight: 600;
	padding-right: 2rem;
}

.modal-content-body {
	color: var(--primary-color);
	line-height: 1.6;
}

.modal-content-body blockquote {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: var(--font-size-md);
	line-height: 1.7;
	margin: 1.5rem 0;
	padding-left: 1.5rem;
	border-left: 3px solid var(--accent-color);
	color: var(--heading-color);
}

.modal-date {
	font-size: var(--font-size-xs);
	color: var(--tertiary-color);
	margin-top: 1.5rem;
}

/* Modal Image Content */
.modal-content-image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-content-image img {
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	border-radius: var(--small-radius);
}

/* Responsive Adjustments */
@media (max-width: 940px) {
	.library-page {
		padding: 1.5rem 1rem 3rem;
	}

	.library-grid {
		column-count: 2;
	}

	.library-filters {
		gap: 0.5rem;
	}

	.filter-btn {
		padding: 0.4rem 0.875rem;
		font-size: var(--font-size-xs);
	}
}

@media (max-width: 640px) {
	.library-page {
		padding: 1rem 0.75rem 2rem;
	}

	.library-grid {
		column-count: 1;
	}
	
	.library-search-bar {
		margin-bottom: 1rem;
	}
	
	#library-search {
		padding: 0.75rem 1rem;
		font-size: var(--font-size-sm);
	}
	
	.library-filters {
		margin-bottom: 1.5rem;
	}
	
	.library-modal-body {
		padding: 2.5rem 1.5rem 1.5rem;
	}
	
	.modal-title {
		font-size: var(--font-size-md);
	}
	
	.highlight-content {
		padding: 1.25rem;
		min-height: 160px;
	}
	
	.highlight-quote {
		font-size: var(--font-size-base);
	}
}

@media (max-width: 480px) {
	.library-search-bar {
		max-width: 100%;
	}
}

/* ============================================================
   MIND PAGE STYLES
   ============================================================ */

.mind-page {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0.5rem 1.5rem 4rem;
}

.mind-container {
	width: 100%;
}

.mind-search {
	max-width: var(--content-width);
	margin: 0 auto 0.75rem;
}

#mind-search-input {
	width: 100%;
	padding: 0.875rem 1.25rem;
	font-size: max(16px, var(--font-size-base));
	font-family: inherit;
	color: var(--primary-color);
	background-color: var(--input-background-color);
	border: 1px solid var(--card-border-color);
	border-radius: 56px;
	outline: none;
	transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

#mind-search-input:focus {
	border-color: var(--accent-color);
	background-color: var(--background-color);
	box-shadow: 0 0 0 3px color(display-p3 0.38 0.59 1 / 0.1);
}

#mind-search-input::placeholder {
	color: var(--tertiary-color);
}

.mind-powered {
	margin: 0 auto 1.25rem;
	max-width: var(--content-width);
	color: var(--tertiary-color);
	font-size: var(--font-size-xs);
	text-align: center;
}

.mind-powered a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

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

.mind-filters {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.mind-filter {
	min-height: 44px;
	padding: 0.5rem 1rem;
	font-size: var(--font-size-sm);
	font-family: inherit;
	color: var(--secondary-color);
	background-color: transparent;
	border: 1px solid var(--card-border-color);
	border-radius: var(--small-radius);
	cursor: pointer;
	transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

.mind-filter:hover,
.mind-filter.active {
	color: var(--primary-color);
	border-color: var(--primary-color);
	background-color: var(--input-background-color);
}

.mind-grid {
	column-count: 4;
	column-gap: 16px;
	min-height: 60vh;
}

.mind-card {
	break-inside: avoid;
	margin-bottom: 16px;
	background-color: var(--background-color);
	border: 0;
	border-radius: 6px;
	corner-shape: squircle;
	overflow: hidden;
	transition: transform 180ms ease, opacity 180ms ease;
}

.mind-card:hover {
	transform: translateY(-2px);
}

.mind-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.mind-card-media {
	background-color: var(--input-background-color);
	border-radius: 6px;
	overflow: hidden;
}

.mind-card-media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.mind-card-body {
	padding: 0.65rem 0 0.25rem;
}

.mind-card h2 {
	margin: 0;
	color: var(--secondary-color);
	font-size: var(--font-size-sm);
	line-height: 1.35;
	font-weight: 500;
	text-wrap: pretty;
}

.mind-card p {
	margin: 0.75rem 0 0;
	color: var(--secondary-color);
	font-size: var(--font-size-sm);
	line-height: 1.55;
	text-wrap: pretty;
}

.mind-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 1rem;
}

.mind-card-tags span {
	max-width: 100%;
	padding: 0.25rem 0.45rem;
	color: var(--secondary-color);
	background-color: var(--input-background-color);
	border-radius: 6px;
	font-size: var(--font-size-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mind-card time {
	display: block;
	margin-top: 0.5rem;
	color: var(--tertiary-color);
	font-size: var(--font-size-xs);
	font-variant-numeric: tabular-nums;
}

.mind-card:not(:has(.mind-card-media)) {
	padding: 1rem;
	border: 1px solid var(--card-border-color);
}

.mind-card:not(:has(.mind-card-media)) .mind-card-body {
	padding: 0;
}

.mind-empty {
	padding: 4rem 2rem;
	text-align: center;
	color: var(--secondary-color);
}

.mind-load-trigger {
	width: 100%;
	height: 1px;
}

@media (prefers-color-scheme: dark) {
	.mind-card:hover {
		opacity: 1;
	}
}

@media (max-width: 1080px) {
	.mind-grid {
		column-count: 3;
	}
}

@media (max-width: 800px) {
	.mind-grid {
		column-count: 2;
	}
}

@media (max-width: 640px) {
	.mind-page {
		padding: 1rem 0.75rem 2rem;
	}

	.mind-grid {
		column-count: 1;
	}

	.mind-filter {
		flex: 1 1 auto;
	}
}

@media (max-width: 480px) {
	.library-modal-content {
		max-height: 90vh;
		border-radius: var(--small-radius) var(--small-radius) 0 0;
	}
}

/* Like Button Styles */
.like-container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 2rem;

}

.like-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: 1px solid var(--card-border-color);
	border-radius: var(--small-radius);
	color: var(--secondary-color);
	font-size: var(--font-size-sm);
	cursor: pointer;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: inherit;
	min-width: auto;
	width: fit-content;
}

.like-button:hover {
	border-color: var(--primary-color);
	color: var(--primary-color);
	transform: translateY(-1px);
}

.like-button:active {
	transform: translateY(0) scale(0.98);
	transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.like-button.liked {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.heart-icon {
	flex-shrink: 0;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	color: var(--secondary-color);
}

.like-button:hover .heart-icon {
	color: var(--primary-color);
}

.like-button.liked .heart-icon {
	color: var(--primary-color);
	animation: heartBeat 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes heartBeat {
	0%, 100% { transform: scale(1); }
	25% { transform: scale(1.2); }
	50% { transform: scale(0.95); }
}

.like-count {
	font-variant-numeric: tabular-nums;
	text-align: right;
	font-size: var(--font-size-xs);
}

@media (max-width: 640px) {
	.like-container {
		margin-top: 2rem;
		margin-bottom: 1.5rem;
	}
	
	.like-button {
		padding: 0.4rem 0.875rem;
		font-size: var(--font-size-xs);
	}
}

/* Animation Debug Panel */
.animation-debug-panel {
	position: fixed;
	top: 80px;
	right: 20px;
	width: 280px;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	z-index: 9999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #fff;
	user-select: none;
	transition: border-color 0.3s ease;
	cursor: grab;
}

.animation-debug-panel .debug-panel-content {
	cursor: default;
}

.animation-debug-panel *:not(input):not(textarea):not(select) {
	user-select: none;
	-webkit-user-select: none;
}

.animation-debug-panel.collapsed {
	border-color: rgba(255, 255, 255, 0);
}

.debug-panel-welcome {
	margin: 0;
	padding: 14px 16px 12px;
	font-size: 12px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.5);
	font-style: italic;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.debug-panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0;
	cursor: grab;
	transition: background 0.3s ease, border-bottom-color 0.3s ease;
}

.debug-panel-header:active {
	cursor: grabbing;
}

.animation-debug-panel.collapsed .debug-panel-header {
	background: rgba(255, 255, 255, 0);
	border-bottom-color: rgba(255, 255, 255, 0);
	border-radius: 12px;
}

.debug-panel-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
}

.debug-panel-toggle {
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background 0.2s;
	position: relative;
}

.debug-panel-toggle:hover {
	background: rgba(255, 255, 255, 0.1);
}

.debug-panel-toggle-icon {
	width: 12px;
	height: 12px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.debug-panel-toggle-icon::before,
.debug-panel-toggle-icon::after {
	content: '';
	position: absolute;
	background: currentColor;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.debug-panel-toggle-icon::before {
	width: 12px;
	height: 2px;
}

.debug-panel-toggle-icon::after {
	width: 2px;
	height: 12px;
}

.debug-panel-toggle.collapsed .debug-panel-toggle-icon::before {
	transform: rotate(0deg);
}

.debug-panel-toggle.collapsed .debug-panel-toggle-icon::after {
	transform: rotate(0deg);
}

.debug-panel-toggle:not(.collapsed) .debug-panel-toggle-icon::before {
	transform: rotate(180deg);
}

.debug-panel-toggle:not(.collapsed) .debug-panel-toggle-icon::after {
	transform: rotate(90deg);
	opacity: 0;
}

.debug-panel-content {
	padding: 16px;
}

.debug-control {
	margin-bottom: 16px;
}

.debug-control:last-of-type {
	margin-bottom: 12px;
}

.debug-control label {
	display: block;
	font-size: 11px;
	font-weight: 500;
	margin-bottom: 6px;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.debug-value {
	float: right;
	color: #fff;
	font-weight: 600;
}

.debug-control input[type="range"] {
	width: 100%;
	height: 32px;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	z-index: 1;
}

.animation-debug-panel .debug-range-shell {
	position: relative;
	height: 32px;
	display: block;
}

.animation-debug-panel .debug-range-track {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 12px;
	transform: translateY(-50%);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
	pointer-events: none;
}

.animation-debug-panel .debug-range-fill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--range-percent, 0%);
	border-radius: inherit;
	background: rgba(92, 112, 255, 0.34);
	box-shadow: inset 0 0 0 1px rgba(123, 142, 255, 0.16);
}

.animation-debug-panel .debug-range-stops {
	position: absolute;
	inset: 0 11px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}

.animation-debug-panel .debug-range-stop {
	width: 1px;
	height: 12px;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 999px;
}

.animation-debug-panel .debug-range-input {
	width: 100%;
	height: 32px;
	margin: 0;
	background: transparent !important;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	z-index: 1;
	outline: none;
}

.animation-debug-panel .debug-range-input::-webkit-slider-runnable-track {
	height: 32px;
	background: transparent;
	border: none;
}

.animation-debug-panel .debug-range-input::-moz-range-track {
	height: 32px;
	background: transparent;
	border: none;
}

.animation-debug-panel .debug-range-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin-top: 5px;
	border-radius: 50%;
	border: 2px solid rgba(110, 129, 255, 0.95);
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.animation-debug-panel .debug-range-input::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid rgba(110, 129, 255, 0.95);
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.animation-debug-panel .debug-range-input:hover::-webkit-slider-thumb,
.animation-debug-panel .debug-range-input:focus-visible::-webkit-slider-thumb {
	transform: scale(1.04);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

.animation-debug-panel .debug-range-input:hover::-moz-range-thumb,
.animation-debug-panel .debug-range-input:focus-visible::-moz-range-thumb {
	transform: scale(1.04);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

.debug-segmented-control {
	display: flex;
	gap: 4px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	padding: 3px;
}

.debug-speed-btn {
	flex: 1;
	padding: 6px 8px;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.6);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2px;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
}

.debug-speed-btn:hover {
	color: rgba(255, 255, 255, 0.8);
	background: rgba(255, 255, 255, 0.05);
}

.debug-speed-btn.active {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.debug-replay-btn {
	width: 100%;
	padding: 10px 16px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s;
}

.debug-replay-btn:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.3);
	transform: translateY(-1px);
}

.debug-replay-btn:active {
	transform: translateY(0);
}

@media (max-width: 768px) {
	.animation-debug-panel {
		width: 260px;
		right: 10px;
		top: 60px;
	}
}


/* Contact Sheet */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: color(display-p3 0 0 0 / 0.5);
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--background-color);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--lines);
  z-index: 1002;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: contain;
}

.sheet.is-open {
  transform: translateY(0);
}

.sheet.is-dragging {
  transition: none;
}

.sheet-handle-area {
  padding: 14px 12px 8px;
  display: flex;
  justify-content: center;
  cursor: grab;
  user-select: none;
}

.sheet-handle {
  width: 36px;
  height: 5px;
  background: var(--marks);
  border-radius: 100px;
}

.sheet-body {
  padding: 8px 24px 36px;
}

.sheet-body p {
  font-size: var(--font-size-sm);
  color: var(--secondary-color);
  line-height: 1.7;
  margin: 0;
}

/* ============================
   View Transitions — Slide + Blur
   ============================ */

/* Segmented pill uses live CSS transition, not view-transition snapshots */

/* Mobile bar: pulled out of root snapshot to prevent rasterization artifacts.
   Show only new snapshot instantly (no crossfade, no animation). */
::view-transition-group(mobile-bar-frame) {
  animation: none !important;
}

::view-transition-old(mobile-bar-frame) {
  animation: none !important;
  display: none !important;
}

::view-transition-new(mobile-bar-frame) {
  animation: none !important;
}

/* Desktop uses browser default root fade transition */

/* --- Mobile override: directional slide + blur + opacity --- */
@media (max-width: 768px) {
@keyframes vt-slide-out-left {
  from {
    transform: translateX(0);
    filter: blur(0);
    opacity: 1;
  }
  to {
    transform: translateX(-25%);
    filter: blur(4px);
    opacity: 0;
  }
}

@keyframes vt-slide-in-right {
  from {
    transform: translateX(25%);
    filter: blur(4px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes vt-slide-out-right {
  from {
    transform: translateX(0);
    filter: blur(0);
    opacity: 1;
  }
  to {
    transform: translateX(25%);
    filter: blur(4px);
    opacity: 0;
  }
}

@keyframes vt-slide-in-left {
  from {
    transform: translateX(-25%);
    filter: blur(4px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    filter: blur(0);
    opacity: 1;
  }
}

html.vt-forward::view-transition-old(root) {
  animation: vt-slide-out-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

html.vt-forward::view-transition-new(root) {
  animation: vt-slide-in-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

html.vt-back::view-transition-old(root) {
  animation: vt-slide-out-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

html.vt-back::view-transition-new(root) {
  animation: vt-slide-in-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

html:not(.vt-header-in)::view-transition-group(mobile-header) {
  animation: none !important;
}

html:not(.vt-header-in)::view-transition-old(mobile-header) {
  animation: none !important;
  opacity: 0 !important;
}

html:not(.vt-header-in)::view-transition-new(mobile-header) {
  animation: none !important;
  opacity: 1 !important;
}

html.vt-header-in::view-transition-new(mobile-header) {
  animation: vt-slide-in-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}


}

/* --- Reduced motion: disable VT animations --- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}