@font-face {
	font-family: 'Briarwood Heavy';
	src: url('briarwood_heavy_font-webfont.ttf') format('truetype');
}

:root {
	--cream: #FFF6EB;
	--ink: #1D1B32;
	--teal: #4796B3;
	--green: #1C9B4C;
	--red: #C8102E;
	--maroon: #7A2735;
	--wave: #C7E4EC;
	--ink-soft: rgba(29, 27, 50, 0.55);
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--cream);
	font-family: 'Archivo', sans-serif;
	color: var(--ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	position: relative;
	overflow-x: hidden;
}

h2 {
	font-size: 40px;
}

@media screen and (max-width: 768px) {
	h2 {
		font-size: 20px;
	}
}


.page {
	width: 100%;
	/* max-width:640px; */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(28px, 5vh, 48px);

	text-transform: uppercase;
	line-height: 1.42;
	letter-spacing: 0.02em;
}

.page a {
	margin: 50px 0;
}

.page a.main-cta {
	font-weight: 800;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: black;
  color: white;
  padding: 24px;
  position: fixed;
  bottom: 10px;
  border-radius: 50px;
  text-decoration: none;
  letter-spacing: 1px;
  margin: 0 auto;
  z-index: 1000;
}

.page .container,
footer p {
	max-width: 900px;
	width: 100%;
  margin: 0 auto;
  font-size: 0.8rem;
  line-height: 1.5;
  color: darkslategray;
  text-transform: uppercase;
}

.mark {
	width: 100%;
	max-width: 800px;
	/* position: absolute; */
	top: 100px;
	display: flex;
	justify-content: center;
}

.mark h1 {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

}

.mark img {
	width: 75%;
	height: auto;
	display: block;
}

.btn {
	color: white;
	padding: 24px;
	border-radius: 50px;
	text-decoration: none;
	letter-spacing: 1px;
	display:inline-block; 
	font-size: 40px;
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	border-bottom: 16px solid rgba(0,0,0,0.2);
}

.stage {
	width: 100%;
	max-width: 600px;
}

.river {
	width: 100%;
	max-width: 520px;
}

.river img {
	width: 100%;
	height: auto;
	display: block;
}

.supporting {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding-bottom: 100px;
	padding-top: 100px;

}

.supporting-label {
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink);
}

.charities {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 5vw, 40px);
	flex-wrap: wrap;
}

.charity {
	display: flex;
	align-items: center;
	gap: 10px;
}

.charity-mark {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.charity-name {
	text-align: left;
	line-height: 1.15;
}

.charity-name .org {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: rgba(29, 27, 50, 0.55);
}

.charity-name .hospice {
	display: block;
	font-family: 'Fraunces', serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--green);
}

.charity.woodlands .hospice {
	color: #2E7D46;
}

/* Responsive tuning */
@media (max-width:480px) {

	body section {
		padding: 0 20px;
	}

	.page {
		gap: 26px;
	}

	.mark {
		max-width: 280px;
	}

	.river {
		max-width: 340px;
	}

	.charities {
		gap: 18px 28px;
	}
}

@media (min-width:600px) and (max-width:1024px) {
	.page {
		max-width: 520px;
	}
}

@media (prefers-reduced-motion:no-preference) {
	.page>* {
		animation: rise .7s ease both;
	}

	.mark {
		animation-delay: .05s;
	}

	.river {
		animation-delay: .15s;
	}

	.lede {
		animation-delay: .25s;
	}

	.supporting {
		animation-delay: .45s;
	}
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.container {
	width: 100%;

}

/* SVG Animation Styles */
.animated-line-1 {
	fill: none;
	stroke: #28b24b;
	/* You can change the line color here */
	stroke-miterlimit: 10;
	stroke-width: 40px;

	/* Normalize the path length to 1 */
	stroke-dasharray: 1;
	stroke-dashoffset: 1;

	/* Draw in, then wipe out in the opposite direction */
	animation: drawAndWipeLine 10s ease-in-out infinite,
		cycleStrokeColor 10s linear infinite;
}

@keyframes drawAndWipeLine {
	0% {
		stroke-dashoffset: 1;
	}

	40% {
		stroke-dashoffset: 0;
	}

	60% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: -1;
	}
}

@keyframes cycleStrokeColor {
	0% {
		stroke: #28b24b;
		/* green */
	}

	25% {
		stroke: #2b7fff;
		/* blue */
	}

	50% {
		stroke: #f2b705;
		/* amber */
	}

	75% {
		stroke: #e63946;
		/* red */
	}

	100% {
		stroke: #28b24b;
		/* back to green */
	}
}

h1,
h2,
.uppercase {
	text-transform: uppercase;
}

.font-lg {
	font-size: clamp(100px, 5vw, 30px);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1;
	font-family: 'Briarwood Heavy';
	margin: 0;
}

@media screen and (max-width: 768px) {
	.font-lg {
		font-size: 40px;
	}

	.font-lg span {
		margin: 0;
		text-align: center;
	}
}

.lines {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.line-row {
	width: 100%;
	position: absolute;
	left: -40px;
}

.line-row svg {
	display: block;
	width: 111%;
	height: auto;
	overflow: visible;
}

.notes-container {
	margin-top: 0px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 0;
	margin-bottom: 100px;

	/* background-image: url('waves.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top;
	display: flex;
	position: absolute;
	height: 600px;
	overflow: visible; */
}

@media screen and (min-width: 768px) {
	.notes-container {

		/* height: 440px; */
	}
}

/* --- Draw-in reveal ---
     Each path's own shape is masked by a rectangle that grows from
     left to right. Percentages are relative to the SVG's viewBox,
     so this scales correctly no matter the line's width. */
.line-row path {
	clip-path: inset(0 100% 0 0);
	animation:
		reveal 2.4s cubic-bezier(.65, 0, .35, 1) forwards infinite,
		drift 8s ease-in-out infinite;
	animation-delay:
		var(--reveal-delay, 0s),
		calc(var(--reveal-delay, 0s) + 2.4s);
	transform-origin: center;
}

@keyframes reveal {
	to {
		clip-path: inset(0 0 0 0);
	}
}

/* Gentle ambient bob once each line has drawn in, staggered per line
     so the four lines feel like they're breathing independently */
@keyframes drift {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(var(--drift-amount, 3px));
	}
}

.line-row:nth-child(1) path {
	--reveal-delay: 0.5s;
	--drift-amount: 4px;
	animation-duration: 4.4s, 79.4s;
}

.line-row:nth-child(2) path {
	--reveal-delay: 0.8s;
	--drift-amount: -3px;
	animation-duration: 4.4s, 8.3s;
}

.line-row:nth-child(3) path {
	--reveal-delay: 1s;
	--drift-amount: 5px;
	animation-duration: 4.4s, 7.8s;
}

.line-row:nth-child(4) path {
	--reveal-delay: 0.52s;
	--drift-amount: -8px;
	animation-duration: 4.4s, 9s;
}

.replay {
	margin-top: 48px;
	background: transparent;
	border: 1px solid #2a2f3a;
	color: var(--ink);
	padding: 10px 18px;
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}

.replay:hover {
	border-color: #454c5c;
	background: #12151c;
}

@media (prefers-reduced-motion: reduce) {
	.line-row path {
		animation: none !important;
		clip-path: inset(0 0 0 0) !important;
	}
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}