/* Remove default spacing and set box model */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Style the whole page */
body {
	font-family: 'Cormorant Garamond', serif;
	line-height: 1.6;
	color: #2e2418;
	background-color: #6f7f5a;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23ecf5ea' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M41 37.59V25h-2v12.59l-8.9-8.9-1.41 1.41 8.9 8.9H25v2h12.59l-8.9 8.9 1.41 1.41 8.9-8.9V55h2V42.41l8.9 8.9 1.41-1.41-8.9-8.9H55v-2H42.41l8.9-8.9-1.41-1.41-8.9 8.9zM1 1h2v2H1V1zm0 4h2v2H1V5zm0 4h2v2H1V9zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm4 0h2v2H5v-2zm4 0h2v2H9v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zM5 1h2v2H5V1zm4 0h2v2H9V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm0 4h2v2h-2V5zm0 4h2v2h-2V9zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zM5 5h70v70H5V5zm2 68h66V7H7v66zM9 9h62v62H9V9zm2 60h58V11H11v58zm2-39.6V13h16.4A29.1 29.1 0 0 0 13 29.4zM15 15v6.67A31.17 31.17 0 0 1 21.67 15H15zm-2 52V50.6A29.1 29.1 0 0 0 29.4 67H13zm2-8.67V65h6.67A31.17 31.17 0 0 1 15 58.33zM67 67H50.6A29.1 29.1 0 0 0 67 50.6V67zm-8.67-2H65v-6.67A31.17 31.17 0 0 1 58.33 65zM67 13v16.4A29.1 29.1 0 0 0 50.6 13H67zm-2 8.67V15h-6.67A31.17 31.17 0 0 1 65 21.67zM39 13h2v2h-2v-2zm7.02.66l1.93.52-.51 1.93-1.94-.52.52-1.93zm6.61 2.46l1.74 1-1 1.73-1.74-1 1-1.73zm5.75 4.08l1.42 1.42-1.42 1.4-1.4-1.4 1.4-1.42zm4.5 5.43l1 1.74-1.73 1-1-1.74 1.73-1zm2.94 6.42l.52 1.93-1.93.52-.52-1.94 1.93-.51zM67 39v2h-2v-2h2zm-.66 7.02l-.52 1.93-1.93-.51.52-1.94 1.93.52zm-2.46 6.61l-1 1.74-1.73-1 1-1.74 1.73 1zm-4.08 5.75l-1.42 1.42-1.4-1.42 1.4-1.4 1.42 1.4zm-5.43 4.5l-1.74 1-1-1.73 1.74-1 1 1.73zM41 67h-2v-2h2v2zm6.95-1.18l-1.93.52-.52-1.93 1.94-.52.51 1.93zm-13.97.52l-1.93-.52.51-1.93 1.94.52-.52 1.93zm-6.61-2.46l-1.74-1 1-1.73 1.74 1-1 1.73zm-5.75-4.08l-1.42-1.42 1.42-1.4 1.4 1.4-1.4 1.42zm-4.5-5.43l-1-1.74 1.73-1 1 1.74-1.73 1zm-2.94-6.42l-.52-1.93 1.93-.52.52 1.94-1.93.51zM13 41v-2h2v2h-2zm.66-7.02l.52-1.93 1.93.51-.52 1.94-1.93-.52zm2.46-6.61l1-1.74 1.73 1-1 1.74-1.73-1zm4.08-5.75l1.42-1.42 1.4 1.42-1.4 1.4-1.42-1.4zm5.43-4.5l1.74-1 1 1.73-1.74 1-1-1.73zm6.42-2.94l1.93-.52.52 1.93-1.94.52-.51-1.93zM40 63a23 23 0 1 1 0-46 23 23 0 0 1 0 46zm0-2a21 21 0 1 0 0-42 21 21 0 0 0 0 42zm0-2a19 19 0 1 1 0-38 19 19 0 0 1 0 38zm0-2a17 17 0 1 0 0-34 17 17 0 0 0 0 34z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Style the header/top section */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background: transparent;
	color: white;
	padding: 32px;
	text-align: center;
}

/* Main heading in header */
header h1 {
	font-size: 40px;
	margin-bottom: 8px;
}

/* Paragraph text in header */
header p {
	font-size: 18px;
	opacity: 0.9;
}

/* Navigation bar styling */
nav {
	background: transparent;
	padding: 16px;
	text-align: center;
}

header nav {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 224, 141, 0.2);
	border: 2px solid #c06a33;
	backdrop-filter: blur(5px);
	border-radius: 18px;
	box-shadow: 0 12px 26px rgba(54, 40, 20, 0.35);
	padding: 10px 30px;
}

.nav-logo {
	width: 0;
	height: 0;
	opacity: 0;
	margin-right: 0;
	transform: scale(0.3);
	transform-origin: center;
	transition: width 0.35s ease, height 0.35s ease, opacity 0.3s ease, margin-right 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

body.logo-in-nav .nav-logo {
	width: 48px;
	height: 48px;
	opacity: 1;
	margin-right: 8px;
	transform: scale(1);
}

header nav a {
	font-family: 'DM Serif Display', serif;
	background-color: rgba(166, 84, 42, 0.8);
	border: 1px solid #de9d5a;
	padding: 10px 18px;
	border-radius: 12px;
	margin: 0;
	display: inline-block;
	backdrop-filter: blur(0.5px);
}

header nav a:hover {
	background-color: #c06a33;
	color: #fff2d3;
}

/* Navigation links */
nav a {
	color: #f4e7c6;
	text-decoration: none;
	margin: 0 24px;
	font-size: 16px;
	transition: color 0.3s;
}

/* Change color when hovering over links */
nav a:hover {
	color: #d6bd82;
}

/* Main content area */
main {
	max-width: auto;
	margin: 0 auto;
	padding: 0;
}

/* Hero carousel styling */
#heroCarousel {
	margin-bottom: 32px;
	background: #d9ceb1;
	min-height: 100px;
}

#heroCarousel .carousel-item {
	min-height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

#heroCarousel .hero-image {
	max-height: auto;
	object-fit: contain;
}

#heroCarousel .carousel-caption {
	background: rgba(0, 0, 0, 0.5);
	padding: 24px;
}

#heroCarousel .carousel-caption h1 {
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

#carouselExampleCaptions .carousel-item > a {
	position: relative;
	display: block;
}

#carouselExampleCaptions .carousel-item > a::after {
	content: "Click to play";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	color: #ffffff;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.5px;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

#carouselExampleCaptions .carousel-item > a:hover::after,
#carouselExampleCaptions .carousel-item > a:focus-visible::after {
	opacity: 1;
}

/* Hero overlay with logo and text */
.hero-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	background: rgba(255, 224, 141, 0.2);
	padding: 30px;
	border-radius: 200px;
	border: 2px solid #c06a33;
	box-shadow: 0 0 0 2px rgba(46, 36, 24, 0.45);
	backdrop-filter: blur(5px);
	transition: transform 0.4s ease, opacity 0.35s ease;
}

body.logo-in-nav .hero-overlay {
	transform: translate(-50%, -230%) scale(0.3);
	opacity: 0;
}

.hero-logo {
	width: 150px;
	height: 150px;
	object-fit: fill;
}

/* Responsive adjustments for hero overlay */
@media (max-width: 768px) {
	.hero-overlay {
		padding: 20px;
	}
	
	.hero-logo {
		width: 100px;
		height: 100px;
	}

	body.logo-in-nav .nav-logo {
		width: 38px;
		height: 38px;
	}
}

/* All section boxes */
section {
	background: transparent;
	margin: 0 auto 130px;
	max-width: 1200px;
	padding: 32px;
}

#about,
#portfolio,
#contact {
	background: transparent;
}

#about {
	padding: 56px;
}

#portfolio,
#contact {
	padding: 44px;
}

/* About section layout */
.about-container {
	display: flex;
	gap: 32px;
	align-items: center;
	flex-wrap: wrap;
}

.about-image {
	flex-shrink: 0;
}

.profile-picture {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #c06a33;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}

.about-content {
	flex: 1;
	min-width: 300px;
	position: relative;
	padding: 20px 24px;
	z-index: 0;
}

.about-content::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(245, 233, 200, 0.82);
	border: 2px solid #c06a33;
	border-radius: 18px;
	box-shadow: 0 12px 26px rgba(54, 40, 20, 0.35);
	backdrop-filter: blur(0.5px);
	-webkit-backdrop-filter: blur(0.5px);
	z-index: -1;
}

.about-content::after {
	content: "";
	position: absolute;
	left: -20px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-right: 20px solid #c06a33;
	z-index: -1;
}

.about-content > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 768px) {
	.about-content::after {
		left: 36px;
		top: -18px;
		transform: none;
		border-right: 14px solid transparent;
		border-left: 14px solid transparent;
		border-bottom: 18px solid #c06a33;
		border-top: 0;
	}
}

#portfolio,
#contact {
	background: rgba(244, 232, 198, 0.8);
	border: 2px solid #c06a33;
	border-radius: 18px;
	box-shadow: 0 14px 30px rgba(54, 40, 20, 0.32);
	backdrop-filter: blur(0.5px);
	-webkit-backdrop-filter: blur(0.5px);
}

.portfolio-audio-list {
	display: grid;
	gap: 16px;
}

.audio-track {
	display: grid;
	gap: 8px;
}

.audio-track h3 {
	font-size: 24px;
	margin: 0;
	color: #a6542a;
}

#about-title,
section h2,
.audio-track h3 {
	font-family: 'DM Serif Display', serif;
	color: #a6542a;
}

#contact .btn-dark {
	background-color: #a6542a;
	border-color: #de9d5a;
	color: #f4e7c6;
	border-radius: 12px;
	padding: 10px 20px;
}

#contact .btn-dark:hover,
#contact .btn-dark:focus {
	background-color: #c06a33;
	border-color: #de9d5a;
	color: #fff2d3;
}

#contact .form-control {
	background-color: #de9d5a;
	border-color: #c06a33;
	color: #2e2418;
}

#contact .form-control::placeholder {
	color: rgba(46, 36, 24, 0.7);
}

#contact .form-control:focus {
	background-color: #de9d5a;
	border-color: #a6542a;
	color: #2e2418;
	box-shadow: 0 0 0 0.2rem rgba(166, 84, 42, 0.25);
}

.portfolio-audio {
	width: 100%;
}

.portfolio-platforms {
	margin-top: 24px;
	padding: 16px;
	border: 1px solid #de9d5a;
	border-radius: 12px;
	background: rgba(245, 233, 200, 0.72);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
}

.portfolio-platform-link {
	color: #f4e7c6;
	background-color: #a6542a;
	border: 1px solid #de9d5a;
	padding: 10px 18px;
	border-radius: 12px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.portfolio-platform-link:hover {
	background-color: #c06a33;
	color: #fff2d3;
}

.sticky-player {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 1000;
	min-width: 220px;
	padding: 12px;
	background: #a6542a;
	color: #f4e7c6;
	border-radius: 14px;
	display: none;
	gap: 6px;
}

.sticky-player.is-visible {
	display: grid;
}

.sticky-player-label {
	font-size: 14px;
	opacity: 0.8;
	margin: 0;
}

.sticky-player-title {
	font-size: 18px;
	line-height: 1.2;
	margin: 0;
}

.sticky-player-toggle {
	border: 1px solid #de9d5a;
	background: transparent;
	color: #de9d5a;
	padding: 6px 10px;
	border-radius: 10px;
	font: inherit;
	cursor: pointer;
}

.sticky-player-toggle:hover {
	background: #c06a33;
}

/* More button styling */
.more-button {
	display: block;
	text-align: center;
	margin: 20px auto 0;
	padding: 10px 20px;
	background-color: #a6542a;
	color: #f4e7c6;
	text-decoration: none;
	border-radius: 12px;
	width: fit-content;
	transition: background-color 0.3s;
}

.more-button:hover {
	background-color: #c06a33;
	color: #fff2d3;
}

/* Section headings */
section h2 {
	color: #a6542a;
	margin-bottom: 16px;
	font-size: 29px;
}

/* Footer at bottom */
footer {
	background: transparent;
	color: #2e2418;
	text-align: center;
	padding: 24px;
	margin-top: 32px;
}

footer p {
	display: inline-block;
	background: rgba(244, 232, 198, 0.8);
	border: 1px solid #c06a33;
	color: #2e2418;
	padding: 10px 18px;
	border-radius: 12px;
	margin-bottom: 14px;
}

footer nav a {
	color: #f4e7c6;
	background-color: #a6542a;
	border: 1px solid #de9d5a;
	padding: 10px 18px;
	margin: 0 6px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.footer-icon {
	flex-shrink: 0;
}

footer nav a:hover {
	background-color: #c06a33;
	color: #fff2d3;
}