/* Ensure space between per-character spans is preserved */
.char.space {
	width: 0.5em;
	margin-right: 0.12em;
	display: inline-block;
}
/* Base */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 100vh;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
}

/* Logo button */
.logo-btn {
	position: absolute;
	top: 16px;
	left: 24px;
	width: 64px;
	height: 64px;
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: none;
	padding: 0;
	border-radius: 50%;
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: box-shadow 0.2s;
}
.logo-btn:focus {
outline: 2px solid #ff6ec4;
box-shadow: 0 0 0 2px #fff, 0 0 8px #ff6ec4;
}
.logo-btn img {
width: 100%;
height: 100%;
border-radius: 50%;
display: block;
object-fit: cover;
}

/* Toolbar */
.toolbar {
position: absolute;
top: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 44px;
background-color: rgba(0, 0, 0, 0.55);
padding: 18px 54px;
border-radius: 38px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
z-index: 10;
box-shadow: 0 4px 32px #0005, 0 1.5px 0 #fff2 inset;
border: 2.5px solid #fff3;
}
.toolbar a {
	color: white;
	text-decoration: none;
	font-weight: 600;
	font-size: 1.18rem;
	letter-spacing: 0.5px;
	padding: 12px 18px;
	border-radius: 18px;
	transition: color 0.3s, background 0.2s;
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.toolbar a:hover,
.toolbar a:focus {
color: #ff6ec4;
background: rgba(255,110,196,0.08);
outline: none;
}

/* Layout */
main {
margin-top: 120px;
text-align: center;
min-height: 60vh;
}

/* Starry background canvas styles */
#star-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	pointer-events: none;
	display: block;
}

/* Ensure page content renders above the background */
main {
	position: relative;
	z-index: 5;
}

/* Page-specific override: tighten about page spacing (starry background sits behind) */
.page-about main {
	margin-top: 0;
}

/* Portfolio page spacing tweak for starry background */
.page-portfolio main {
	margin-top: 0;
}

/* Mobile */
@media (max-width: 900px) {
	.logo-btn {
		width: 54px;
		height: 54px;
		top: 10px;
		left: 10px;
	}
	.toolbar {
		gap: 24px;
		padding: 10px 4vw;
		border-radius: 18px;
	}
	.toolbar a {
		font-size: 1.08rem;
		padding: 10px 12px;
		border-radius: 14px;
	}
}

@media (max-width: 600px) {
	.logo-btn {
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
		top: 4px;
		left: 4px;
	}
	.toolbar {
		gap: 10px;
		padding: 6px 2vw;
		border-radius: 12px;
		box-shadow: 0 2px 8px #0004;
	}
	.toolbar a {
		font-size: 0.98rem;
		padding: 8px 6px;
		border-radius: 10px;
		min-width: 40px;
		min-height: 40px;
	}
	main {
		margin-top: 64px;
	}
}

/* Carousel styles */
.carousel {
	position: relative;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
	border-radius: 34px;
	overflow: hidden;
}
.carousel-track {
	display: flex;
	will-change: transform;
}
.carousel figure {
	min-width: 100%;
	margin: 0;
}
.carousel figcaption {
	color: #dfe8ff;
	font-style: italic;
	font-size: 0.95rem;
	margin-top: 10px;
}
.carousel-caption {
	background: linear-gradient(180deg, rgba(10,12,20,0.0), rgba(10,12,20,0.6));
	color: #eaf4ff;
	font-size: 1rem;
	text-align: center;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	pointer-events: none;
}
.carousel-caption p { margin: 0; }
.carousel-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.carousel-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: linear-gradient(90deg,#ff6ec4,#7873f5);
	border: none;
	opacity: 0.6;
	transition: transform 0.18s, opacity 0.18s;
}
.carousel-dot:focus {
	outline: 2px solid #fff8;
	box-shadow: 0 0 0 6px rgba(120,115,245,0.12);
}
.carousel-prev, .carousel-next {
	background: linear-gradient(90deg,#ff6ec4,#7873f5);
	color: white;
	border-radius: 999px;
	border: none;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(120,115,245,0.18);
}
.carousel-prev:focus, .carousel-next:focus {
	outline: 3px solid rgba(255,110,196,0.24);
}
.carousel-blur {
	pointer-events: auto;
}

@media (max-width: 700px) {
	.carousel-prev, .carousel-next { display: none; }
	.carousel-dot { width: 12px; height: 12px; }
}

	/* Timeline spine: render via CSS pseudo-element for consistent cross-platform visibility */
	.timeline {
		position: relative;
	}
	.timeline::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		width: 4px;
		height: 100%;
		background: linear-gradient(to bottom, rgba(0,234,255,0.9), rgba(33,150,243,0.9) 60%, rgba(67,160,71,0.9));
		border-radius: 2px;
		z-index: 1;
		pointer-events: none;
		will-change: transform, height, opacity;
	}

	/* Ensure timeline cards render above the spine; use !important to avoid inline z-index collisions */
	.timeline .timeline-content,
	.timeline .featured-projects-block .timeline-content {
		position: relative;
		z-index: 3 !important;
	}