:root {
	--blush: #fedfdd;
	--pink: #f29ca5;
	--pink-deep: #e57f8c;
	--brown: #925543;
	--brown-dark: #6e3d30;
	--cream: #fff8f4;
	--mint: #cdebd9;
	--blueberry: #cfe1f5;
	--radius: 28px;
	--font: "Fredoka", "Trebuchet MS", system-ui, sans-serif;

	/* Sprinkle tile in the logo's brown, pink, and cream. */
	--sprinkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg stroke-linecap='round' stroke-width='5'%3E%3Cline x1='18' y1='22' x2='30' y2='14' stroke='%23925543'/%3E%3Cline x1='70' y1='30' x2='74' y2='44' stroke='%23ffffff'/%3E%3Cline x1='120' y1='18' x2='134' y2='22' stroke='%23f29ca5'/%3E%3Cline x1='40' y1='80' x2='52' y2='88' stroke='%23f29ca5'/%3E%3Cline x1='100' y1='74' x2='98' y2='88' stroke='%23925543'/%3E%3Cline x1='140' y1='96' x2='150' y2='86' stroke='%23ffffff'/%3E%3Cline x1='14' y1='130' x2='26' y2='136' stroke='%23ffffff'/%3E%3Cline x1='72' y1='126' x2='84' y2='118' stroke='%23925543'/%3E%3Cline x1='124' y1='140' x2='128' y2='152' stroke='%23f29ca5'/%3E%3C/g%3E%3C/svg%3E");
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	background: var(--brown);
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--brown-dark);
	background: var(--cream);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3 {
	margin: 0;
	line-height: 1.15;
	color: var(--brown);
}

h2 {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	text-align: center;
}

.sprinkles {
	position: absolute;
	inset: 0;
	background-image: var(--sprinkles);
	background-size: 200px;
	opacity: 0.3;
	pointer-events: none;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.8em 1.5em;
	border-radius: 999px;
	font-family: inherit;
	font-size: 1.1rem;
	font-weight: 600;
	text-decoration: none;
	border: 3px solid var(--brown);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 4px 0 var(--brown);
}

.btn i {
	font-size: 1.3em;
}

.btn-insta {
	background: var(--pink);
	color: #fff;
	box-shadow: 0 2px 0 var(--brown);
}

.btn-outline {
	background: #fff;
	color: var(--brown);
}

.btn-light {
	background: #fff;
	color: var(--brown);
	word-break: break-all;
}

/* Hero */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--blush);
	padding: 3rem 16px 3.5rem;
	text-align: center;
}

.hero-inner {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
}

.logo img {
	width: min(440px, 88%);
	margin: 0 auto;
	animation: wobble 5s ease-in-out infinite;
}

.tagline {
	margin: 1rem 0 1.75rem;
	font-size: clamp(1.35rem, 4vw, 1.75rem);
	font-weight: 600;
	color: var(--brown);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.875rem;
}

@keyframes wobble {
	0%, 100% { transform: rotate(-2deg) scale(1); }
	50% { transform: rotate(2deg) scale(1.03); }
}

/* Drip dividers, like the wavy edge on the stand signs */
.drip {
	height: 48px;
	background-repeat: repeat-x;
	background-size: 240px 48px;
}

.drip-pink {
	background-color: var(--cream);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48' viewBox='0 0 240 48'%3E%3Cpath d='M0 0H240V16C230 16 225 40 210 40C195 40 190 16 180 16C170 16 165 30 150 30C135 30 130 16 120 16C110 16 105 44 90 44C75 44 70 16 60 16C50 16 45 34 30 34C15 34 10 16 0 16Z' fill='%23fedfdd'/%3E%3C/svg%3E");
}

.drip-brown {
	background-color: var(--cream);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48' viewBox='0 0 240 48'%3E%3Cpath d='M0 48H240V32C230 32 225 8 210 8C195 8 190 32 180 32C170 32 165 18 150 18C135 18 130 32 120 32C110 32 105 4 90 4C75 4 70 32 60 32C50 32 45 14 30 14C15 14 10 32 0 32Z' fill='%23f29ca5'/%3E%3C/svg%3E");
}

/* Menu */
.menu {
	max-width: 1100px;
	margin: 0 auto;
	padding: 3rem 16px 3.5rem;
}

.section-intro {
	margin: 0.75rem auto 2.5rem;
	max-width: 34ch;
	text-align: center;
	font-size: 1.25rem;
}

.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}

.step {
	position: relative;
	padding: 2.75rem 1.5rem 1.75rem;
	border: 3px solid var(--brown);
	border-radius: var(--radius);
	text-align: center;
	box-shadow: 0 6px 0 var(--brown);
}

.step-strawberry { background: var(--blush); }
.step-mint { background: var(--mint); }
.step-blueberry { background: var(--blueberry); }

.step-num {
	position: absolute;
	top: -26px;
	left: 50%;
	translate: -50% 0;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--pink);
	border: 3px solid var(--brown);
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
}

.step h3 {
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.step p {
	margin: 0;
}

/* Gallery */
.gallery {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px 3.5rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 340px;
	grid-auto-flow: dense;
	gap: 1rem;
}

.gallery figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
	border: 3px solid var(--brown);
	background: var(--blush);
}

.gallery .g-wide {
	grid-column: span 2;
}

.gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.gallery figure:hover img {
	transform: scale(1.04);
}

/* Parties */
.parties {
	position: relative;
	overflow: hidden;
	background: var(--pink);
	padding: 2.5rem 16px 4rem;
	text-align: center;
}

.parties-inner {
	position: relative;
	max-width: 620px;
	margin: 0 auto;
}

.parties h2 {
	color: #fff;
	text-shadow: 0 3px 0 var(--brown);
}

.parties p {
	margin: 1rem 0 2rem;
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--brown-dark);
}

/* Footer */
.site-footer {
	background: var(--brown);
	color: var(--blush);
	text-align: center;
	padding: 2rem 16px;
}

.footer-insta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 600;
	text-decoration: none;
}

.footer-insta i {
	font-size: 1.5em;
}

.footer-insta:hover {
	text-decoration: underline;
}

.site-footer p {
	margin: 0.5rem 0 0;
	font-size: 0.95rem;
}

@media (max-width: 700px) {
	.gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 220px;
	}

	.gallery figure:last-child {
		grid-column: span 2;
	}

	.steps {
		gap: 2.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.logo img {
		animation: none;
	}

	.btn,
	.gallery img {
		transition: none;
	}
}