/* =========================================================
   ROOT / GLOBAL
========================================================= */

:root {
	color-scheme: dark;

	--hero-height: min(100svh, 960px);
	--paper: #f7f4f0;
	--black: #000;
	--near-black: #121212;
	--blue: #1b2888;
	--red: #ca2314;
	--cream: #f6f3ef;
	--yellow: #fff45c;
}


* {
	box-sizing: border-box;
}


html,
body {
	margin: 0;
	min-height: 100%;
	background: #030405;
}



/* =========================================================
   HEADER
========================================================= */

.site-header {
	position: fixed;
	top: 2rem;
	left: 50%;
	z-index: 1000;
	display: flex;
	align-items: center;
	width: min(650px, 84vw);
	height: 44px;
	padding: 0 1.6rem;
	border: 2px solid #111113;
	border-radius: 999px;
	background: #f4f0e8;
	transform: translate(-50%, -150%);
	opacity: 0;
	transition: transform 350ms ease, opacity 250ms ease;
	will-change: transform, opacity;
}

.site-header.header-visible {
	transform: translate(-50%, 0);
	opacity: 1;
}

.header-logo {
	color: #111113;
	font-family: "magister", sans-serif;
	font-size: clamp(1.5rem, 2.1vw, 2rem);
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}

.header-logo.active,
.header-nav a.active,
.mobile-menu-nav a.active {
	color: #34398c;
	pointer-events: none;
}

.header-nav {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	height: 100%;
	margin-left: auto;
}

.header-nav > a,
.ministries-toggle,
.ministries-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #111113;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: clamp(0.9rem, 1.15vw, 1.1rem);
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.header-nav > a,
.ministries-toggle {
	height: 100%;
}

.header-nav > a:hover,
.ministries-toggle:hover {
	opacity: 0.5;
}

.ministries-links {
	display: none;
	align-items: center;
	gap: 1.1rem;
}

.site-header.ministries-open .ministries-links {
	display: flex;
}

.site-header.ministries-open .ministries-toggle,
.site-header.ministries-open .header-nav > a {
	display: none;
}

.ministries-links a:hover,
.ministries-links a:focus-visible {
	color: #34398c;
}

@keyframes ministries-link-in {
	from { opacity: 0; transform: translateY(-0.35rem); }
	to { opacity: 1; transform: translateY(0); }
}

.site-header.ministries-open .ministries-links a {
	animation: ministries-link-in 220ms ease both;
}

.site-header.ministries-open .ministries-links a:nth-child(2) { animation-delay: 45ms; }
.site-header.ministries-open .ministries-links a:nth-child(3) { animation-delay: 90ms; }
.site-header.ministries-open .ministries-links a:nth-child(4) { animation-delay: 135ms; }

.header-nav a:focus-visible,
.ministries-toggle:focus-visible {
	outline: 2px solid #34398c;
	outline-offset: 3px;
}

.mobile-menu-button,
.mobile-menu,
.mobile-header-spinner {
	display: none;
}

@media (max-width: 900px) {
	.site-header {
		top: 0;
		right: 0;
		left: 0;
		z-index: 4001;
		width: 100%;
		height: 64px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: var(--black);
		transform: translateY(-110%);
		opacity: 1;
	}

	.site-header.header-visible {
		transform: translateY(0);
	}

	.header-logo,
	.header-nav {
		display: none;
	}

	.mobile-menu-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 34px;
		height: 34px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		margin-left: auto;
		margin-right: 1.25rem;
	}

	.mobile-menu-button span {
		width: 24px;
		height: 2px;
		background: #f4f0e8;
	}

	.mobile-header-spinner {
		display: block;
		position: absolute;
		left: 50%;
		top: 0;
		width: 120px;
		height: 64px;
		transform: translateX(-50%);
		pointer-events: none;
	}

	.mobile-menu {
		position: fixed;
		inset: 0;
		z-index: 4000;
		display: flex;
		justify-content: flex-end;
		width: 100%;
		height: 100svh;
		background: rgba(0, 0, 0, 0.08);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		opacity: 0;
		pointer-events: none;
		overflow: hidden;
		transition: opacity 250ms ease;
		will-change: opacity;
	}

	.mobile-menu__panel {
		position: relative;
		width: 66%;
		height: 100%;
		border-left: 1px solid var(--paper);
		background: var(--black);
		transform: translate3d(100%, 0, 0);
		transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
		will-change: transform;
	}

	.mobile-menu.menu-open {
		opacity: 1;
		pointer-events: auto;
	}

	.mobile-menu.menu-open .mobile-menu__panel {
		transform: translate3d(0, 0, 0);
	}

	.mobile-menu-nav {
		position: absolute;
		top: 25%;
		left: 0;
		width: 100%;
		border-top: 1px solid rgba(244, 240, 232, 0.65);
		border-bottom: 1px solid rgba(244, 240, 232, 0.65);
	}

	.mobile-menu-nav a {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		height: clamp(62px, 8.3svh, 82px);
		padding-inline: 24px;
		border-bottom: 1px solid rgba(244, 240, 232, 0.65);
		color: #f4f0e8;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: clamp(1.35rem, 5.1vw, 2.6rem);
		font-weight: 700;
		line-height: 1;
		text-align: left;
		text-decoration: none;
		text-transform: uppercase;
	}

	.mobile-menu-nav a:last-child { border-bottom: 0; }
	.mobile-menu-nav a:hover,
	.mobile-menu-nav a:active { color: #fff35c; }
	.mobile-menu-nav a.active { color: #fcf063; }
	.mobile-menu-button:focus-visible,
	.mobile-menu-nav a:focus-visible { outline: 2px solid #fff35c; outline-offset: -4px; }
}

@media (max-width: 360px) {
	.mobile-menu-button { margin-right: 1rem; }
	.mobile-menu-nav { top: 29%; }
	.mobile-menu-nav a { height: clamp(54px, 8.2svh, 66px); font-size: clamp(1.2rem, 5.1vw, 1.75rem); }
}



/* =========================================================
   HERO
========================================================= */

.hero {
	position: relative;
	isolation: isolate;

	display: grid;
	place-items: center;

	height: var(--hero-height);
	min-height: 560px;

	overflow: hidden;

	background: #030405;
}


.hero__background,
.hero__fade,
.hero__mark {
	pointer-events: none;
	user-select: none;
}


.hero__background {
	position: absolute;
	z-index: -2;
	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}


.hero__fade {
	position: absolute;
	z-index: -1;

	bottom: 0;
	left: 0;

	width: 100%;
	height: clamp(72px, 13.34vw, 128px);

	object-fit: fill;
}


.hero__mark {
	display: block;

	width: calc(100% - 20px);
	max-width: 1938px;
	height: auto;

	aspect-ratio: 1938 / 1098;
}



/* =========================================================
   MISSION SECTION
========================================================= */

.mission {
	--mission-inset: 100px;
	container-type: inline-size;

	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 39px;

	min-height: 713.33px;

	padding-block: 54px;

	background: var(--black);
	color: var(--paper);
}

.mission__inner {
	padding-inline: var(--mission-inset);
}



/* =========================================================
   MISSION STATEMENT
========================================================= */

.mission__statement {
	width: 100%;

	margin: 0;
	padding: 0;

	border: 1px solid var(--paper);

	font-family:
		"magister",
		"Iowan Old Style",
		Baskerville,
		"Times New Roman",
		serif;

	font-size: clamp(48px, 9.16cqw, 112.893px);
	font-weight: 400;

	letter-spacing: -0.09em;
	line-height: 0.719225;

	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}



/* =========================================================
   MISSION PILLARS
========================================================= */

.mission__pillars {
	--pillar-width: clamp(390px, 35vw, 520px);
	--pillar-overlap: clamp(-150px, -9vw, -90px);

	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;

	width: 100%;
	padding-block: 2rem;
	/* Equal end space lets both edge cards reach the viewport centre. */
	padding-inline: max(0px, calc((100% - var(--pillar-width)) / 2));

	overflow-x: auto;
	overflow-y: visible;

	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;

	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;

	touch-action: pan-x pan-y;
}

.mission__pillars::-webkit-scrollbar {
	display: none;
}


.pillar {
	position: relative;
	z-index: 1;

	display: flex;
	flex: 0 0 var(--pillar-width);
	flex-direction: column;

	width: var(--pillar-width);
	min-width: 0;

	/*
	   Negative margin creates the
	   "hide behind" / stacked effect.
	*/
	margin-right: var(--pillar-overlap);

	background: var(--black);

	scroll-snap-align: center;
	scroll-snap-stop: always;

	transform:
		scale(0.92)
		translateY(1rem);

	transform-origin: center;

	opacity: 0.7;

	transition:
		transform 350ms ease,
		opacity 350ms ease;
}


.pillar:last-child {
	margin-right: 0;
}


/* Card closest to the centre */
.pillar.pillar--active {
	z-index: 2;

	transform:
		scale(1)
		translateY(0);

	opacity: 1;
}


@media (hover: hover) and (pointer: fine) {
	.pillar {
		cursor: pointer;
	}
}


.pillar__title,
.pillar__body {
	margin: 0;

	border: 1px solid var(--paper);

	font-family:
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;

	font-weight: 500;

	letter-spacing: -0.03em;

	text-transform: uppercase;
}


.pillar__title {
	display: flex;
	align-items: center;

	min-height: 58px;
	height: auto;

	padding: 5px 10px;

	font-size: clamp(35px, 3.9cqw, 48px);
	line-height: 0.79;
}


.pillar__body {
	flex: 1;

	padding: 12.592px 8.616px 9.278px;

	font-size: clamp(18px, 1.94cqw, 23.859px);
	line-height: 0.863;

	text-align: justify;
}


/* =========================================================
   EVENTS SECTION
========================================================= */

.events {
	--event-card-width: min(1040px, 88vw);
	--events-inset: calc((100vw - var(--event-card-width)) / 2);
	padding-block: 54px;

	background:
		linear-gradient(
			to top,
			var(--paper) 0 74%,
			var(--black) 74%
		);
}




/* =========================================================
   EVENTS HORIZONTAL GALLERY
========================================================= */

.events__grid {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;

	width: 100%;
	padding-inline: var(--events-inset);

	overflow-x: auto;
	overflow-y: hidden;

	/* Snap behavior */
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;

	/* Touch / trackpad behavior */
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;

	/* Hide scrollbar */
	scrollbar-width: none;
}


.events__grid::-webkit-scrollbar {
	display: none;
}



/* =========================================================
   EVENT CARDS
========================================================= */

.event-card {
	display: flex;
	flex: 0 0 var(--event-card-width);
	flex-direction: column;
	gap: 10px;

	min-width: 0;

	padding: 19px 16px;

	border: 1px solid var(--black);

	background: var(--paper);
	color: var(--black);

	text-decoration: none;

	/* Snap each card into place */
	scroll-snap-align: center;
	scroll-snap-stop: always;
}



/* =========================================================
   EVENT CARD IMAGE
========================================================= */

.event-card picture {
	display: block;

	aspect-ratio: 16 / 9;

	overflow: hidden;

	border: 1px solid var(--black);
}


.event-card img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: transform 350ms ease;
}


.event-card:hover img,
.event-card:focus-visible img {
	transform: scale(1.03);
}



/* =========================================================
   EVENT CARD FOCUS
========================================================= */

.event-card:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}



/* =========================================================
   EVENT CARD META
========================================================= */

.event-card__meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	border: 1px solid #0e0d0b;

	color: var(--black);

	font-family:
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;

	font-size: 23.859px;
	font-weight: 500;

	letter-spacing: -0.03em;
	line-height: 0.863;

	text-transform: uppercase;
	white-space: nowrap;
}



/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1064px) {

	/* -------------------------
	   Mission
	------------------------- */

	.mission {
		min-height: auto;
		--mission-inset: 48px;
	}


	/* -------------------------
	   Pillar Gallery
	------------------------- */

	.mission__pillars {
		--pillar-width: min(78vw, 32rem);
		--pillar-overlap: -10vw;
	}


	/* -------------------------
	   Events
	------------------------- */

	.event-card {
		/*
			Card fills most of the screen
			while leaving the next card visible.
		*/
		flex: 0 0 var(--event-card-width);

		max-width: 1040px;

		scroll-snap-align: center;
	}

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

	/* -------------------------
	   Hero
	------------------------- */

	:root {
		--hero-height: 100svh;
	}


	.hero {
		min-height: 480px;
	}


	.hero__background {
		object-position: 48% center;
	}


	/* -------------------------
	   Mission
	------------------------- */

	.mission {
		min-height: auto;
		--mission-inset: 20px;
		padding-block: 48px;

		gap: 56px;
	}


	.mission__statement {
		font-size: clamp(48px, 12cqw, 72px);
	}


	/* -------------------------
	   Events
	------------------------- */

	.events__grid {
		gap: 16px;
	}


	.event-card {
		/*
			A little narrower on mobile so
			the next card peeks into view.
		*/
		flex-basis: var(--event-card-width);
	}


	.event-card picture {
		aspect-ratio: 4 / 5;
	}


	.event-card__meta {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px;
		align-items: flex-start;
		font-size: 14px;
		line-height: 1;
	}

	.event-card__meta span {
		white-space: nowrap;
	}

}



/* =========================================================
   PROGRAMS ACCORDION
========================================================= */

.programs {
	padding: 50px 50px 100px 50px;
	background: var(--paper);
	color: var(--black);
}

.programs__accordion {
	border: 1px solid var(--black);
}

.program {
	border-top: 2px solid var(--black);
}

.program:first-child {
	border-top: 0;
}

.program__heading {
	margin: 0;
}

.program__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 89px;
	padding: 0 15px;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 34px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.04;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.program__icon {
	position: relative;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
}

.program__icon::before,
.program__icon::after {
	position: absolute;
	top: 11px;
	left: 3px;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	content: "";
}

.program__icon::after {
	transform: rotate(90deg);
	transition: transform 200ms ease;
}

.program--open .program__icon::after {
	transform: rotate(0deg);
}

.program__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.program__content {
	padding: 2px 100px 32px 15px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 21px;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.38;
}

.program__content p {
	margin: 0;
}

@media (max-width: 640px) {
	.programs {
		padding: 20px 20px 100px 20px;
	}

	.program__trigger {
		height: 72px;
		font-size: 28px;
	}

	.program__content {
		padding-right: 20px;
		font-size: 18px;
	}
}



/* =========================================================
   PASTOR FEATURE
========================================================= */

.pastor {
	display: grid;
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
	min-height: 620px;
}

.pastor__image {
	min-height: 0;
	overflow: hidden;
	background: var(--black);
}

.pastor__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.pastor__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 27px;
	padding: 125px 62px;
	background: #fff45c;
	color: #000;
}

.pastor__eyebrow,
.pastor__body {
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.pastor__eyebrow {
	font-size: 36px;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.38;
	text-transform: uppercase;
}

.pastor h2 {
	margin: 0;
	font-family: "magister", "Iowan Old Style", Baskerville, "Times New Roman", serif;
	font-size: clamp(76px, 8.9vw, 128px);
	font-weight: 400;
	letter-spacing: -0.08em;
	line-height: 0.77;
}

.pastor__body {
	max-width: 620px;
	font-size: 24px;
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 0.99;
	text-align: justify;
}

@media (max-width: 700px) {
	.pastor {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.pastor__image {
		aspect-ratio: 4 / 5;
	}

	.pastor__content {
		gap: 20px;
		padding: 56px 20px 64px;
	}

	.pastor__eyebrow {
		font-size: 24px;
	}

	.pastor h2 {
		font-size: clamp(68px, 20vw, 96px);
	}

	.pastor__body {
		font-size: 19px;
		line-height: 1.08;
	}
}



/* =========================================================
   CONNECT
========================================================= */

.connect {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 38px 55px;
	background: var(--black);
	color: var(--paper);
}

.connect__message {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-size: 64px;
	letter-spacing: -0.06em;
	line-height: 1.04;
}

.connect__message span {
	margin-bottom: -12px;
	font-family: "magister", "Iowan Old Style", Baskerville, "Times New Roman", serif;
}

.connect__message strong {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	text-transform: uppercase;
}

.connect__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 18px;
}

.connect__instagram {
	display: grid;
	place-items: center;
	width: 37px;
	height: 36px;
}

.connect__instagram img {
	width: 100%;
	height: 100%;
}

.connect__contact {
	padding: 5px 6px;
	border: 2px solid var(--paper);
	color: inherit;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 0.863;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 180ms ease, color 180ms ease;
}

.connect__contact:hover {
	background-color: #fff;
	color: #000;
}

.connect__instagram:focus-visible,
.connect__contact:focus-visible {
	outline: 2px solid var(--paper);
	outline-offset: 4px;
}

@media (max-width: 640px) {
	.connect {
		align-items: flex-start;
		flex-direction: column;
		padding: 36px 20px;
	}

	.connect__message {
		font-size: clamp(42px, 14vw, 58px);
	}

	.connect__actions {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.connect__contact {
		font-size: 18px;
	}
}
/* Keep the conference program link styled like the other program headings. */
a.program__trigger { color: inherit; text-decoration: none; }


/* HIDER */
.hidden {
	display: none !important;
}

/* Shared ministry and Programs calls to action. */
.editorial-link {
	--link-ink: var(--black);
	--link-paper: var(--paper);
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 48px;
	max-width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid currentColor;
	color: inherit;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 180ms ease, color 180ms ease;
}
.editorial-link:hover {
	background: var(--link-ink);
	color: var(--link-paper);
}
.editorial-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}
.editorial-link__arrow {
	position: relative;
	display: inline-block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}
.editorial-link__arrow::before,
.editorial-link__arrow::after {
	content: "";
	position: absolute;
}
.editorial-link__arrow::before {
	left: 1px;
	top: 7.25px;
	width: 14px;
	height: 1.5px;
	background: currentColor;
	transform: rotate(-45deg);
}
.editorial-link__arrow::after {
	top: 2.3px;
	right: 2.3px;
	width: 8px;
	height: 8px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
}
.program__content .editorial-link { margin-top: 1.25rem; }