:root {
	--primary-bg: #005f85;
	--section-bg: #003f5c;
	--section-bg-rgb: 0, 63, 92;
	--text: #f8e9c1;
	--card-bg: #003f5c;
	--radius: 6px;
	--gap: 1rem;
	--max-width: 800px;
	--link-color: #dff9ff;
	/* Light Ice Blue */
	--link-hover: #ffffff;
	/* Pure white for hover */
	--text-strong: #fcebb0;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Inter', sans-serif;
	background: var(--primary-bg);
	color: var(--text);
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 4rem;
}

/* General link styling */
a {
	color: var(--text);
	text-decoration: none;
	transition: color 0.2s ease;
}

/* Hover effect for all links */
a:hover {
	color: #ffd27f;
	/* warm accent for hover */
	text-decoration: none;
}

/* Content links */
main a,
.album-entry a,
.album-header .meta a,
.tracklist a {
	color: var(--link-color);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

main a:hover,
.album-entry a:hover,
.album-header .meta a:hover,
.tracklist a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

main {
	max-width: var(--max-width);
	margin: 1rem auto;
	padding: 0 1rem;
}

h1,
h2,
h3 {
	font-weight: 700;
	line-height: 1.3;
}

h1 {
	font-size: clamp(2rem, 5vw, 3rem);
	/* NEW: Responsive scaling */
}

h2 {
	font-size: clamp(1.5rem, 4vw, 2.25rem);
}

h3 {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
}

small,
.caption,
.meta-note {
	font-size: 0.875rem;
	opacity: 0.75;
}

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--section-bg);
	padding: 0.5rem 0;
	/* reduced from 0.75rem */
	border-bottom: 2px solid var(--text);
	/* slightly thinner border */
}

header a,
header .site-title a,
header .search-link {
	color: var(--link-color);
	text-decoration: none;
	transition: color 0.2s ease;
}

header a:hover,
header .site-title a:hover,
header .search-link:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

header .nav-links {
	display: flex;
	gap: 0.75rem;
	/* slightly tighter spacing */
	margin-top: 0.25rem;
	/* add minimal spacing from title */
}

header .search-link {
	display: inline-block;
	height: 32px;
	/* slightly taller for better tap targets */
	line-height: 24px;
	padding: 0 0.75rem;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-align: center;
	border-radius: 4px;
}


header .site-title {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.25rem 0.5rem;
	/* reduced vertical padding */
}

.site-title a {
	font-size: 24px;
	line-height: 24px;
	display: inline-block;
}

#stickyHeader {
	position: sticky;
	top: 0;
	background: #005f85;
	z-index: 100;
}

.nowrap {
	white-space: nowrap;
}