@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("assets/manrope-latin-ext-400.woff2") format("woff2");
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("assets/manrope-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url("assets/manrope-latin-ext-500.woff2") format("woff2");
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url("assets/manrope-latin-500.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-display: swap;
	font-weight: 700;
	src: url("assets/manrope-latin-ext-700.woff2") format("woff2");
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-display: swap;
	font-weight: 700;
	src: url("assets/manrope-latin-700.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url("assets/cormorant-latin-ext-500.woff2") format("woff2");
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url("assets/cormorant-latin-500.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
	--forest-950: #061a15;
	--forest-900: #08231c;
	--forest-800: #0b3026;
	--ivory: #f6f0e4;
	--chartreuse: #c7e64e;
	--gold: #e4bf45;
	--sage: #91aa99;
	--line: rgba(208, 226, 102, 0.22);
}

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

html {
	min-width: 320px;
	background: var(--forest-950);
	color-scheme: dark;
}

body {
	min-width: 320px;
	margin: 0;
	background: var(--forest-950);
	color: var(--ivory);
	font-family: "Manrope", Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
}

.landing {
	position: relative;
	isolation: isolate;
	min-height: 100svh;
	overflow: hidden;
	padding: clamp(28px, 5vw, 64px);
	background:
		linear-gradient(90deg, rgba(4, 22, 17, 0.995) 0%, rgba(4, 22, 17, 0.97) 39%, rgba(5, 25, 19, 0.58) 73%, rgba(4, 21, 16, 0.72) 100%),
		linear-gradient(180deg, var(--forest-950), var(--forest-900));
}

.landing__glow {
	position: absolute;
	z-index: -4;
	top: -16%;
	right: 2%;
	width: min(74vw, 1020px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(216, 199, 62, 0.34) 0%, rgba(174, 197, 59, 0.13) 34%, transparent 68%);
	filter: blur(2px);
	pointer-events: none;
}

.landing__contours {
	position: absolute;
	z-index: -2;
	left: -12vw;
	top: 8vh;
	width: min(900px, 72vw);
	height: min(680px, 78vh);
	border-radius: 50%;
	opacity: 0.38;
	background:
		repeating-radial-gradient(
			ellipse at 50% 50%,
			transparent 0 52px,
			var(--line) 53px 54px,
			transparent 55px 88px
		);
	transform: rotate(-16deg);
	pointer-events: none;
}

.boundary {
	position: absolute;
	z-index: -1;
	top: 5%;
	right: 28%;
	width: min(44vw, 650px);
	height: auto;
	opacity: 0.27;
	filter: drop-shadow(0 0 12px rgba(205, 218, 78, 0.08));
	transform: rotate(-2deg);
	pointer-events: none;
}

.church {
	position: absolute;
	z-index: -3;
	top: 0;
	right: 0;
	width: min(53vw, 800px);
	height: 100%;
	margin: 0;
	overflow: hidden;
	opacity: 0.68;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.15) 8%, #000 31%, #000 100%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.15) 8%, #000 31%, #000 100%);
}

.church::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(4, 25, 19, 0.03) 0%, rgba(5, 26, 20, 0.28) 55%, rgba(4, 22, 17, 0.83) 100%),
		rgba(200, 190, 63, 0.17);
	mix-blend-mode: color;
	pointer-events: none;
}

.church::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	box-shadow: inset 25px 0 55px rgba(4, 22, 17, 0.44);
	pointer-events: none;
}

.church img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% center;
	filter: grayscale(1) sepia(0.42) hue-rotate(48deg) saturate(1.35) contrast(1.16) brightness(0.72);
}

.skip-link {
	position: fixed;
	z-index: 100;
	top: 12px;
	left: 12px;
	padding: 10px 14px;
	color: var(--forest-950);
	background: var(--ivory);
	border-radius: 4px;
	transform: translateY(-160%);
	transition: transform 160ms ease;
}

.skip-link:focus {
	transform: translateY(0);
}

.site-header {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	width: 100%;
}

.brand {
	display: flex;
	align-items: center;
	gap: 24px;
	color: var(--ivory);
	text-decoration: none;
}

.crest {
	display: block;
	width: 130px;
	height: 144px;
	overflow: hidden;
	border-radius: 0 0 15px 15px;
	background: var(--ivory);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.crest img {
	display: block;
	width: 431px;
	max-width: none;
	height: 144px;
}

.brand__copy {
	display: grid;
	gap: 4px;
}

.brand__copy strong {
	color: var(--ivory);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(36px, 3.2vw, 54px);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 0.95;
}

.brand__copy span {
	color: var(--sage);
	font-size: clamp(14px, 1.25vw, 19px);
}

.status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 142px;
	min-height: 52px;
	margin-top: 3px;
	padding: 12px 24px;
	border: 1px solid var(--gold);
	border-radius: 999px;
	color: var(--gold);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hero {
	position: relative;
	z-index: 3;
	width: min(100%, 810px);
	margin-top: clamp(68px, 9vh, 120px);
	padding-bottom: 96px;
}

.eyebrow {
	margin: 0 0 22px;
	color: var(--gold);
	font-size: clamp(12px, 1.2vw, 16px);
	font-weight: 700;
	letter-spacing: 0.28em;
	line-height: 1.5;
	text-transform: uppercase;
}

.eyebrow span {
	display: inline-block;
	margin: 0 0.42em;
}

h1 {
	max-width: 800px;
	margin: 0;
	color: var(--ivory);
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: clamp(62px, 6.4vw, 102px);
	font-weight: 500;
	letter-spacing: -0.045em;
	line-height: 0.86;
}

h1 em {
	color: var(--chartreuse);
	font-style: normal;
}

.intro {
	max-width: 650px;
	margin: clamp(28px, 4.5vh, 48px) 0 0;
	color: rgba(246, 240, 228, 0.9);
	font-size: clamp(17px, 1.45vw, 22px);
	line-height: 1.58;
}

.contact-link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 34px;
	min-width: min(100%, 418px);
	margin-top: clamp(28px, 4.3vh, 44px);
	padding: 18px 28px;
	border: 1px solid var(--gold);
	border-radius: 12px;
	color: var(--ivory);
	background: rgba(6, 26, 21, 0.4);
	font-size: clamp(16px, 1.35vw, 20px);
	font-weight: 500;
	text-decoration: none;
	backdrop-filter: blur(4px);
	transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.contact-link__arrow {
	color: var(--chartreuse);
	font-size: 29px;
	line-height: 1;
	transition: transform 180ms ease;
}

.contact-link:hover {
	border-color: var(--chartreuse);
	color: var(--chartreuse);
	background: rgba(11, 48, 38, 0.56);
}

.contact-link:hover .contact-link__arrow {
	transform: translateX(5px);
}

.contact-link:focus-visible {
	outline: 2px solid var(--ivory);
	outline-offset: 5px;
}

.site-footer {
	position: absolute;
	z-index: 3;
	left: clamp(28px, 5vw, 64px);
	bottom: clamp(24px, 4.5vh, 46px);
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--sage);
	font-size: clamp(13px, 1.1vw, 16px);
}

.leaf-mark {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--chartreuse);
	border-radius: 70% 30% 70% 30%;
	color: var(--chartreuse);
	font-size: 21px;
	transform: rotate(-18deg);
}

.landing--404 {
	min-height: 100svh;
}

.hero--404 {
	max-width: 720px;
}

.hero--404 h1 {
	line-height: 0.95;
}

@media (max-width: 900px) {
	.landing {
		min-height: 100svh;
		padding: 24px;
		background:
			linear-gradient(180deg, rgba(4, 22, 17, 0.99) 0%, rgba(4, 22, 17, 0.92) 58%, rgba(4, 22, 17, 0.98) 100%),
			var(--forest-950);
	}

	.boundary {
		top: 20%;
		right: -8%;
		width: 80vw;
		opacity: 0.18;
	}

	.church {
		top: auto;
		bottom: 0;
		width: 100%;
		height: 52%;
		opacity: 0.42;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
	}

	.church img {
		object-position: 50% 50%;
	}

	.crest {
		width: 86px;
		height: 95px;
	}

	.crest img {
		width: 284px;
		height: 95px;
	}

	.brand {
		gap: 15px;
	}

	.brand__copy strong {
		font-size: 34px;
	}

	.status {
		min-width: 0;
		min-height: 42px;
		padding: 9px 15px;
		font-size: 11px;
	}

	.hero {
		margin-top: clamp(52px, 9vh, 84px);
		padding-bottom: 118px;
	}

	h1 {
		font-size: clamp(54px, 15.5vw, 78px);
		line-height: 0.89;
	}

	.site-footer {
		left: 24px;
		bottom: 24px;
	}
}

@media (max-width: 520px) {
	.brand__copy span {
		display: none;
	}

	.eyebrow {
		max-width: 270px;
		letter-spacing: 0.19em;
	}

	.intro {
		font-size: 16px;
	}

	.contact-link {
		width: 100%;
		min-width: 0;
		padding: 16px 19px;
		font-size: 15px;
	}

	.site-footer {
		max-width: calc(100% - 48px);
		font-size: 12px;
	}
}

@media (max-height: 760px) and (min-width: 901px) {
	.landing {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.crest {
		width: 91px;
		height: 101px;
	}

	.crest img {
		width: 302px;
		height: 101px;
	}

	.hero {
		margin-top: 48px;
		padding-bottom: 90px;
	}

	h1 {
		font-size: clamp(64px, 6.2vw, 84px);
	}

	.intro {
		margin-top: 24px;
		line-height: 1.48;
	}

	.contact-link {
		margin-top: 25px;
		padding-top: 14px;
		padding-bottom: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}