/* -----------------------------------------------------------
	 Fickle Giving
	 ----------------------------------------------------------- */

:root {
	--pink-accent: #d90069;   /* headings & the small inline heart */
	--pink-heart:  #ffcce5;   /* the big heart shape               */
	/* --aside-bg:    #faf1f4;    */
	--aside-bg:    #F7F3EE;/* blush background for the asides   */
	--text:        #171717;

	--heart-size:  560px;     /* ← change this one value to resize the heart */
}

* { box-sizing: border-box; }

body {
	margin: 0;
	color: var(--text);
	font-family: ui-sans-serif, system-ui, sans-serif;
	line-height: 150%;
}

.page {
	max-width: 640px;
	margin: 0 auto;
	padding: 32px 24px 0px 24px ;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* ---------- centred intro lines ---------- */

.intro,
.lead-in {
	margin: 0;
	text-align: center;
}

/* ---------- blush aside cards ---------- */
/* full-bleed to the screen edge on mobile, boxed in on desktop */

.card {
	margin: 0 -24px;
	padding: 24px 20px;
	background: var(--aside-bg);
}

.card__heading {
	margin: 0 0 12px;
	font-size: 1.25rem;
	margin-bottom: 1.25rem;
}

.card__heading--center { text-align: center; }

.card ol {
	margin: 0;
	padding-left: 1.25em;
}

.card li + li { margin-top: 6px; }

.card--wide p { margin: 0 0 16px; }
.card--wide p:last-child { margin-bottom: 0; }

.icon-heart {
	width: 0.85em;
	height: 0.85em;
	color: var(--pink-accent);
	vertical-align: -0.05em;
}

/* ---------- the big heart ---------- */

.heart {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 8px 0 24px;
	margin: 0 -24px;
}

.heart__svg {
	width: min(96vw, var(--heart-size));
	height: auto;
	fill: var(--pink-heart);
}

.heart__content {
	position: absolute;
	top: 43%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 85%;
	text-align: center;
}

.heart__title {
	margin: 0;
	color: var(--pink-accent);
	font-size: clamp(1.5rem, 6vw, 2.1rem);
	font-weight: 500;
}

.heart__tagline {
	margin: 2px 0 14px;
	color: var(--pink-accent);
	font-size: 0.85rem;
}

.heart__list {
	margin: 0;
	padding-left: 1.1em;
	text-align: left;
	line-height: 1.4;
}

.heart__list li + li { margin-top: 10px; }

/* ---------- desktop ---------- */

@media (min-width: 640px) {
	.page { padding: 50px 24px; gap: 50px; }
	.card { margin: 0; padding: 32px 40px; border-radius: 14px; }
	.card__heading { font-size: 1.85rem; margin-bottom: 1.85rem; }
	.heart__title { font-size: 3rem; line-height: 3rem; }
	.heart__content { width: 52%; }
	.heart__tagline { font-size: 1rem; }
}