:root {
	--color-beige: #f5f5dc;
	--color-off-white: #fafafa;
	--color-light-brown: #d4c4a8;
	--color-dusty-rose: #d4a5a5;
	--color-dark-grey: #2c2c2c;
	--color-soft-grey: #6b6b6b;
	--color-warm-white: #fefefe;
}

body {
	color: var(--color-dark-grey);
	min-height: 100vh;
	margin: 0;
	background: linear-gradient(135deg, var(--color-beige) 0%, var(--color-off-white) 100%);
	font-family: 'Inter', sans-serif;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	color: var(--color-dark-grey);
	margin-bottom: 1rem;
}

.hero-section {
	background: linear-gradient(135deg, rgba(212, 196, 168, 0.3) 0%, rgba(212, 165, 165, 0.2) 100%);
	padding: 80px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* Prefer modern WebP with PNG fallback */
	background-image: image-set(
		url('../images/pink_cloud.webp') type('image/webp'),
		url('../images/pink_cloud.png') type('image/png')
	);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	opacity: 0.1;
	z-index: 0;
}

.hero-content {
	position: relative;
	z-index: 1;
}

.brand-logo {
	font-family: 'Playfair Display', serif;
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--color-dark-grey);
	margin-bottom: 0.5rem;
}

.brand-tagline {
	font-family: 'Inter', sans-serif;
	font-size: 1.1rem;
	color: var(--color-soft-grey);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 2rem;
}

.main-headline {
	font-family: 'Playfair Display', serif;
	font-size: 3.5rem;
	font-weight: 700;
	color: var(--color-dark-grey);
	margin-bottom: 1rem;
	line-height: 1.2;
}

.sub-headline {
	font-family: 'Inter', sans-serif;
	font-size: 1.3rem;
	color: var(--color-soft-grey);
	font-weight: 400;
	margin-bottom: 3rem;
}

.btn-primary-custom {
	background: linear-gradient(135deg, var(--color-dusty-rose) 0%, var(--color-light-brown) 100%);
	border: none;
	border-radius: 50px;
	padding: 15px 40px;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 1.1rem;
	color: white;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(212, 165, 165, 0.3);
}

.btn-primary-custom:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(212, 165, 165, 0.4);
	color: white;
	text-decoration: none;
}

.btn-secondary-custom {
	background: transparent;
	border: 2px solid var(--color-dusty-rose);
	border-radius: 50px;
	padding: 13px 35px;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 1rem;
	color: var(--color-dusty-rose);
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.3s ease;
}

.btn-secondary-custom:hover {
	background: var(--color-dusty-rose);
	color: white;
	text-decoration: none;
}

.content-section {
	padding: 80px 0;
	background: var(--color-warm-white);
}

.section-heading {
	font-family: 'Playfair Display', serif;
	font-size: 2.5rem;
	font-weight: 600;
	color: var(--color-dark-grey);
	text-align: center;
	margin-bottom: 1rem;
}

.section-subheading {
	font-family: 'Inter', sans-serif;
	font-size: 1.2rem;
	color: var(--color-soft-grey);
	text-align: center;
	margin-bottom: 3rem;
	font-weight: 400;
}

.featured-post {
	background: var(--color-warm-white);
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(212, 196, 168, 0.2);
	margin-bottom: 40px;
}

.featured-post h3 {
	font-family: 'Playfair Display', serif;
	font-size: 2rem;
	color: var(--color-dark-grey);
	margin-bottom: 20px;
}

.featured-post img {
	border-radius: 15px;
	margin-bottom: 25px;
	width: 100%;
	height: 300px;
	object-fit: cover;
}

.featured-post .excerpt {
	font-family: 'Inter', sans-serif;
	line-height: 1.8;
	color: var(--color-soft-grey);
	font-size: 1.1rem;
}

.signup-section {
	background: linear-gradient(135deg, var(--color-light-brown) 0%, var(--color-dusty-rose) 100%);
	color: white;
	padding: 80px 40px;
	border-radius: 20px;
	margin: 60px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.signup-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('../images/pink_cloud.png') no-repeat center center;
	background-size: cover;
	opacity: 0.1;
	z-index: 0;
}

.signup-content {
	position: relative;
	z-index: 1;
}

.signup-section h3 {
	font-family: 'Playfair Display', serif;
	font-size: 2.5rem;
	color: white;
	margin-bottom: 20px;
}

.signup-section p {
	font-family: 'Inter', sans-serif;
	font-size: 1.2rem;
	margin-bottom: 40px;
	font-weight: 400;
}

.mailpoet-form-container {
	max-width: 500px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 15px;
	padding: 30px;
	backdrop-filter: blur(10px);
}

.email-signup-form .form-control {
	background: white;
	border: 1px solid rgba(212, 196, 168, 0.3);
	border-radius: 10px;
	padding: 15px 20px;
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	color: var(--color-dark-grey);
	margin-bottom: 15px;
	transition: all 0.3s ease;
}

.email-signup-form .form-control:focus {
	outline: none;
	border-color: var(--color-dusty-rose);
	box-shadow: 0 0 0 3px rgba(212, 165, 165, 0.1);
}

.email-signup-form .form-control::placeholder { color: var(--color-soft-grey); }
.email-signup-form .btn { width: 100%; margin-top: 10px; }

.signup-message { margin-top: 20px; padding: 15px; border-radius: 10px; text-align: center; font-family: 'Inter', sans-serif; }
.signup-message.success { background: rgba(76, 175, 80, 0.1); color: #2e7d32; border: 1px solid rgba(76, 175, 80, 0.3); }
.signup-message.error { background: rgba(244, 67, 54, 0.1); color: #c62828; border: 1px solid rgba(244, 67, 54, 0.3); }

.carousel-section-container {
	background: var(--color-warm-white);
	padding: 40px 30px;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	margin-top: 40px;
	border: 1px solid rgba(212, 196, 168, 0.2);
}

.carousel .card { margin: 5px; border: none; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); height: 100%; transition: transform 0.3s ease; background: var(--color-warm-white); }
.carousel .card:hover { transform: translateY(-5px); }
.carousel .card-img-top { height: 200px; object-fit: cover; border-radius: 15px 15px 0 0; }
.carousel .card-body { padding: 15px; min-height: 80px; display: flex; align-items: center; justify-content: center; }
.carousel .card-title { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 600; margin-bottom: 15px; color: var(--color-dark-grey); }
.carousel .card-title a { color: var(--color-dark-grey); text-decoration: none; }
.carousel .card-title a:hover { color: var(--color-dusty-rose); }
.carousel .card-text { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.6; color: var(--color-soft-grey); }
.carousel-control-prev-icon,
.carousel-control-next-icon { background-color: var(--color-dusty-rose); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
.carousel-control-prev, .carousel-control-next { width: 60px; height: 60px; top: 50%; transform: translateY(-50%); }
.carousel-control-prev { left: -80px; }
.carousel-control-next { right: -80px; }

.upcoming-sessions-section { background: var(--color-warm-white); padding: 40px 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin: 40px 0; border: 1px solid rgba(212,196,168,0.2); }
.series-info { text-align: center; margin-bottom: 30px; }
.series-info h3 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--color-dark-grey); margin-bottom: 10px; }
.series-description { font-family: 'Inter', sans-serif; font-size: 1.1rem; color: var(--color-soft-grey); max-width: 600px; margin: 0 auto; }

.upcoming-session-card { background: var(--color-warm-white); border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); overflow: hidden; transition: transform 0.3s ease; border: 1px solid rgba(212,196,168,0.2); position: relative; margin: 5px; height: 280px; display: flex; flex-direction: column; }
.upcoming-session-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.week-badge { position: absolute; top: 10px; left: 10px; background: var(--color-dusty-rose); color: white; padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; z-index: 2; }
.session-image { height: 160px; overflow: hidden; }
.session-image img { width: 100%; height: 100%; object-fit: cover; }
.session-content { padding: 15px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.session-date { font-family: 'Inter', sans-serif; font-size: 0.9rem; color: var(--color-dusty-rose); font-weight: 600; margin-bottom: 8px; }
.session-content h4 { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.3; }
.session-content h4 a { color: var(--color-dark-grey); text-decoration: none; }
.session-content h4 a:hover { color: var(--color-dusty-rose); }

.info-section { background: var(--color-beige); padding: 60px 0; border-radius: 20px; margin: 40px 0; }
.info-section h3 { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--color-dark-grey); margin-bottom: 20px; }
.info-section ul { list-style: none; padding: 0; }
.info-section li { font-family: 'Inter', sans-serif; font-size: 1.1rem; color: var(--color-soft-grey); margin-bottom: 15px; padding-left: 25px; position: relative; }
.info-section li::before { content: '✦'; position: absolute; left: 0; color: var(--color-dusty-rose); font-weight: bold; }
.info-section strong { color: var(--color-dark-grey); font-weight: 600; }

.card-registration-form { background: linear-gradient(135deg, var(--color-light-brown) 0%, var(--color-dusty-rose) 100%); color: white; padding: 30px; border-radius: 15px; margin: 30px 0; text-align: center; position: relative; overflow: hidden; }
.card-registration-form::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('../images/pink_cloud.png') no-repeat center center; background-size: cover; opacity: 0.1; z-index: 0; }
.card-registration-form > * { position: relative; z-index: 1; }
.card-registration-form h4 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: white; margin-bottom: 15px; }
.card-registration-form p { font-family: 'Inter', sans-serif; font-size: 1rem; margin-bottom: 25px; font-weight: 400; }
.registration-form .form-control { background: white; border: 1px solid rgba(212, 196, 168, 0.3); border-radius: 10px; padding: 15px 20px; font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--color-dark-grey); margin-bottom: 20px; transition: all 0.3s ease; }
.registration-form .form-control:focus { outline: none; border-color: var(--color-dusty-rose); box-shadow: 0 0 0 3px rgba(212, 165, 165, 0.1); }
.registration-form .form-control::placeholder { color: var(--color-soft-grey); }
.registration-form .btn { width: 100%; margin-top: 20px; }
.registration-message { margin-top: 20px; padding: 20px; border-radius: 15px; text-align: center; font-family: 'Inter', sans-serif; font-size: 1.1rem; line-height: 1.6; }
.registration-message.success { background: rgba(76,175,80,0.15); color: #2e7d32; border: 2px solid rgba(76,175,80,0.4); font-weight: 500; }
.registration-message.error { background: rgba(244,67,54,0.15); color: #c62828; border: 2px solid rgba(244,67,54,0.4); font-weight: 500; }
.card-registration-form:has(#registration-form[style*="display: none"]) .registration-message { margin-top: 0; padding: 30px; font-size: 1.2rem; }

@media (max-width: 768px) {
	.main-headline { font-size: 2.5rem; }
	.section-heading { font-size: 2rem; }
	.carousel-control-prev, .carousel-control-next { display: none; }
	.signup-section { padding: 60px 20px; }
	.card-registration-form { padding: 25px 20px; }
	.card-registration-form h4 { font-size: 1.5rem; }
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }