/*
Theme Name: Hearth Template
Theme URI: https://internetoutreachexperts.com/templates/hearth/
Author: Internet Outreach Experts
Description: IOE Hearth template — small rural / country church. Cream paper + russet + sage. Hand-drawn SVG illustrations, script accents (Caveat), warm serif (Vollkorn + Source Serif 4), chalkboard "This Sunday", ruled-paper sections.
Version: 1.0.0
Text Domain: hearth-template
*/

/*
 * THE HEARTH — a small country church template
 * Aesthetic: Hand-lettered church bulletin meets farmer's market chalkboard.
 * Warm, honest, unpretentious.
 */

/* ========== DESIGN TOKENS ========== */
:root {
	/* Warm earth palette */
	--cream: #fbf6e9;
	--cream-paper: #f5ecd5;
	--cream-deep: #ecdfb7;
	--russet: #a44a2c;
	--russet-deep: #7d3619;
	--russet-light: #c2744f;
	--sage: #5e7748;
	--sage-deep: #455a34;
	--sage-light: #869d71;
	--walnut: #3a2e1f;
	--walnut-soft: #5e4d38;
	--walnut-muted: #8a7656;
	--rule: #cfbf96;
	--chalk: #2b3826;
	--chalk-dust: rgba(251, 246, 233, 0.92);

	/* Type — all serif, warm */
	--font-display: 'Vollkorn', 'Iowan Old Style', 'Palatino', 'Georgia', serif;
	--font-body:    'Source Serif 4', 'Source Serif Pro', 'Georgia', serif;
	--font-script:  'Caveat', 'Homemade Apple', cursive;

	/* Measures */
	--measure-narrow: 34em;
	--measure-read:   44em;
	--page-max: 1120px;
	--gutter: clamp(1.25rem, 4vw, 3rem);

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========== RESET + BASE ========== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.75;
	color: var(--walnut);
	background-color: var(--cream);
	/* Warm paper texture: radial warmth + noise */
	background-image:
		radial-gradient(ellipse 1200px 800px at 10% 0%, rgba(164, 74, 44, 0.04), transparent 55%),
		radial-gradient(ellipse 1000px 700px at 90% 100%, rgba(94, 119, 72, 0.04), transparent 55%),
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.34  0 0 0 0 0.22  0 0 0 0.06 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
a { color: var(--russet); text-decoration: underline; text-decoration-color: var(--russet-light); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
a:hover { color: var(--russet-deep); text-decoration-color: var(--russet); }

::selection { background: var(--russet); color: var(--cream); }

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.15;
	color: var(--walnut);
	margin: 0 0 .5em;
}
h1 { font-size: clamp(2.2rem, 1.5rem + 3.5vw, 4.25rem); font-weight: 500; letter-spacing: -0.005em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); font-weight: 500; }
h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); font-weight: 600; }
h4 { font-size: 1.15rem; font-weight: 600; }

h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--russet); }

/* The signature — script-font accents */
.script {
	font-family: var(--font-script);
	font-weight: 400;
	font-style: normal;
	color: var(--russet);
	line-height: 1;
}
.script-lg { font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); }
.script-md { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

.eyebrow {
	font-family: var(--font-script);
	font-size: 1.4rem;
	color: var(--sage);
	letter-spacing: 0.02em;
	transform: rotate(-1.5deg);
	display: inline-block;
}

p { margin: 0 0 1em; max-width: var(--measure-read); }
p.lead {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
	line-height: 1.55;
	font-weight: 400;
	color: var(--walnut-soft);
	font-style: italic;
	max-width: 32ch;
}

blockquote {
	margin: 2rem 0;
	padding: 0 0 0 1.5rem;
	border-left: 3px solid var(--russet);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.35rem;
	line-height: 1.5;
	color: var(--walnut-soft);
	max-width: 34em;
}
blockquote cite { display: block; font-family: var(--font-script); font-style: normal; font-size: 1.2rem; color: var(--russet); margin-top: .75rem; }

/* ========== LAYOUT ========== */
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--measure-read); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: clamp(3.5rem, 2.5rem + 5vw, 7rem) 0; }
.section-tight { padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0; }

/* ========== HAND-DRAWN DIVIDERS ========== */
.divider {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.25rem;
	margin: 2.5rem auto;
	color: var(--russet);
}
.divider::before,
.divider::after {
	content: '';
	flex: 0 0 clamp(3rem, 18vw, 7rem);
	height: 1.5px;
	background: repeating-linear-gradient(to right, var(--russet-light), var(--russet-light) 4px, transparent 4px, transparent 8px);
	opacity: 0.6;
}
.divider svg { flex-shrink: 0; opacity: 0.7; }

/* Chapter header */
.chapter-header {
	text-align: center;
	margin-bottom: 2.5rem;
}
.chapter-header .eyebrow { margin-bottom: .25rem; }
.chapter-header h2 { margin: 0; }
.chapter-header p.lead { margin: 1rem auto 0; text-align: center; }

/* ========== BUTTONS ========== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .75em 1.5em;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1rem;
	background: var(--russet);
	color: var(--cream);
	border: 2px solid var(--russet);
	border-radius: 12px;
	text-decoration: none;
	transition: background .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
	box-shadow: 0 2px 0 var(--russet-deep);
	cursor: pointer;
}
.btn:hover { background: var(--russet-deep); color: var(--cream); text-decoration: none; transform: translateY(-1px); box-shadow: 0 3px 0 var(--russet-deep); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--russet-deep); }

.btn-sage { background: var(--sage); border-color: var(--sage); box-shadow: 0 2px 0 var(--sage-deep); }
.btn-sage:hover { background: var(--sage-deep); color: var(--cream); box-shadow: 0 3px 0 var(--sage-deep); }

.btn-ghost { background: transparent; color: var(--russet); box-shadow: none; }
.btn-ghost:hover { background: var(--russet); color: var(--cream); }

.btn-on-dark { background: var(--cream); color: var(--walnut); border-color: var(--cream); box-shadow: 0 2px 0 var(--cream-deep); }
.btn-on-dark:hover { background: var(--cream-paper); color: var(--walnut); box-shadow: 0 3px 0 var(--cream-deep); }

.btn-lg { padding: .9em 1.8em; font-size: 1.05rem; }

/* ========== MASTHEAD ========== */
.topbar {
	background: var(--sage-deep);
	color: var(--cream);
	font-family: var(--font-display);
	font-size: 0.9rem;
}
.topbar-inner {
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 0.55rem var(--gutter);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.topbar .script-md { color: var(--cream-paper); font-size: 1.3rem; }
.topbar-contact { display: flex; gap: 1.25rem; align-items: center; }
.topbar-contact a { color: var(--cream); text-decoration: none; }
.topbar-contact a:hover { color: var(--cream-paper); text-decoration: underline; }

.masthead {
	padding: 1.5rem 0 1.25rem;
	border-bottom: 2px solid var(--russet);
	background: var(--cream-paper);
	position: relative;
}
.masthead::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -8px;
	height: 2px;
	background: var(--russet);
	opacity: 0.3;
}

.masthead-inner {
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.brand { display: inline-flex; align-items: center; gap: 1rem; color: var(--walnut); text-decoration: none; }
.brand:hover { text-decoration: none; color: var(--walnut); }
.brand-mark { width: 54px; height: 54px; flex-shrink: 0; color: var(--russet); }
.brand-text { line-height: 1; }
.brand-name {
	display: block;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
	color: var(--walnut);
}
.brand-name em { font-style: italic; font-weight: 400; color: var(--russet); }
.brand-tagline {
	display: block;
	margin-top: 4px;
	font-family: var(--font-script);
	font-size: 1.15rem;
	color: var(--sage);
	transform: rotate(-0.5deg);
}

/* ========== NAV ========== */
.primary-menu { display: flex; gap: 0; align-items: center; }
.primary-menu a {
	display: inline-block;
	padding: 0.5rem 1rem;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1rem;
	color: var(--walnut-soft);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .15s var(--ease), border-color .15s var(--ease);
}
.primary-menu a:hover { color: var(--russet); border-bottom-color: var(--russet-light); text-decoration: none; }
.primary-menu a.current { color: var(--russet); border-bottom-color: var(--russet); }

.menu-toggle {
	display: none;
	padding: .5rem 1rem;
	border: 2px solid var(--russet);
	color: var(--russet);
	border-radius: 8px;
	font-family: var(--font-display);
}

@media (max-width: 860px) {
	.masthead-inner { flex-wrap: wrap; }
	.menu-toggle { display: inline-flex; }
	.primary-menu {
		order: 3; width: 100%;
		flex-direction: column;
		align-items: stretch;
		border-top: 2px solid var(--rule);
		padding-top: .75rem;
		margin-top: 1rem;
		display: none;
	}
	.primary-menu.is-open { display: flex; }
	.primary-menu a { padding: .8rem 0; border-bottom: 1px solid var(--rule); text-align: center; }
	.topbar-inner { justify-content: center; text-align: center; }
}

/* ========== HERO ========== */
.hero {
	position: relative;
	padding: clamp(3rem, 2rem + 5vw, 6rem) 0 clamp(3rem, 2rem + 5vw, 5rem);
	overflow: hidden;
}
.hero-inner {
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}
@media (min-width: 820px) { .hero-inner { grid-template-columns: 5fr 4fr; gap: 4rem; } }

.hero .eyebrow { margin-bottom: .5rem; }
.hero h1 { margin: .25rem 0 1rem; }
.hero h1 em { display: block; }
.hero-lead {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
	line-height: 1.5;
	color: var(--walnut-soft);
	font-style: italic;
	max-width: 26em;
	margin-bottom: 1.75rem;
}
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.hero-illustration {
	display: grid;
	place-items: center;
	padding: 1.5rem;
}
.hero-illustration svg { width: 100%; max-width: 380px; height: auto; color: var(--russet); }

/* ===== Photo-hero variant: full-width photo on top, text centered below ===== */
.hero--photo {
	padding: 0 0 clamp(2.5rem, 1.5rem + 4vw, 4rem);
}
.hero--photo .hero-photo {
	width: 100%;
	margin: 0;
	display: block;
	background: var(--cream-paper);
	overflow: hidden;
}
.hero--photo .hero-photo img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 60vh;
	object-fit: cover;
	object-position: center;
}
.hero--photo .hero-inner {
	grid-template-columns: 1fr;
	gap: 0;
	padding-top: clamp(2rem, 1rem + 3vw, 3.5rem);
	text-align: center;
}
.hero--photo .hero-inner > div {
	max-width: 38em;
	margin: 0 auto;
}
.hero--photo .hero-lead {
	margin-left: auto;
	margin-right: auto;
}
.hero--photo .hero-actions {
	justify-content: center;
}
@media (min-width: 820px) {
	.hero--photo .hero-inner { grid-template-columns: 1fr; gap: 0; }
}

/* ========== THIS SUNDAY CHALKBOARD — signature element ========== */
.chalkboard-wrap {
	display: flex;
	justify-content: center;
	padding: 0 var(--gutter);
	margin: clamp(1.5rem, 1rem + 2vw, 3rem) 0 clamp(3rem, 2rem + 4vw, 5rem);
}
.chalkboard {
	position: relative;
	background: var(--chalk);
	/* chalk-dust / wood frame */
	background-image:
		radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(43, 56, 38, 0.7) 100%),
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2' numOctaves='1' seed='3'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.88  0 0 0 0 0.75  0 0 0 0.07 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
	color: var(--cream);
	padding: clamp(1.75rem, 1.25rem + 2vw, 3rem) clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
	border-radius: 6px;
	max-width: 620px;
	width: 100%;
	/* wood-like frame */
	box-shadow:
		0 0 0 8px #6b4423,
		0 0 0 10px #8a5a2e,
		0 0 0 12px #6b4423,
		0 18px 40px -20px rgba(0,0,0,0.3);
	transform: rotate(-0.8deg);
	text-align: center;
	font-family: var(--font-script);
}
.chalkboard h2 {
	color: var(--cream);
	font-family: var(--font-script);
	font-size: clamp(2.4rem, 1.8rem + 2.5vw, 3.5rem);
	font-weight: 400;
	line-height: 1;
	margin-bottom: 0.25rem;
	letter-spacing: 0.01em;
}
.chalkboard h2 em { color: var(--cream); font-style: italic; }
.chalkboard .date-line {
	font-family: var(--font-script);
	font-size: 1.7rem;
	color: rgba(251, 246, 233, 0.8);
	margin-bottom: 1.5rem;
}
.chalkboard-lines {
	display: grid;
	gap: 0.65rem;
	font-family: var(--font-script);
	font-size: 1.3rem;
	color: var(--cream);
	line-height: 1.3;
	padding-top: 1rem;
	border-top: 1px dashed rgba(251, 246, 233, 0.35);
}
.chalkboard-lines div { display: flex; gap: .75rem; justify-content: center; align-items: baseline; flex-wrap: wrap; }
.chalkboard-lines .label { color: rgba(251, 246, 233, 0.65); font-style: italic; }
.chalkboard-lines .value { color: var(--cream); }

/* ========== CARDS — "pinned notices" ========== */
.notice-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
}
@media (min-width: 760px) { .notice-grid { grid-template-columns: repeat(3, 1fr); } }

.notice {
	background: var(--cream-paper);
	border: 2px solid var(--rule);
	border-radius: 8px;
	padding: 1.75rem 1.5rem;
	position: relative;
	transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.notice::before {
	/* "pin" at the top */
	content: '';
	position: absolute;
	top: -10px; left: 50%;
	transform: translateX(-50%);
	width: 12px; height: 12px;
	background: var(--russet);
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--russet-deep), 0 2px 4px rgba(0,0,0,0.2);
}
.notice:nth-child(2) { transform: rotate(1deg); }
.notice:nth-child(3) { transform: rotate(-1.2deg); }
.notice:hover { transform: rotate(0deg) translateY(-2px); border-color: var(--russet); }
.notice-icon { width: 44px; height: 44px; color: var(--sage); margin-bottom: 1rem; }
.notice h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.notice h3 em { color: var(--russet); font-style: italic; }
.notice p { margin: 0; font-size: 0.98rem; color: var(--walnut-soft); }

/* ========== PASTOR SECTION ========== */
.pastor-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	background: var(--cream-paper);
	border: 2px solid var(--rule);
	border-radius: 12px;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	max-width: 840px;
	margin: 0 auto;
	align-items: center;
	position: relative;
}
@media (min-width: 720px) { .pastor-card { grid-template-columns: 180px 1fr; gap: 2.5rem; } }
.pastor-portrait {
	aspect-ratio: 1;
	background: linear-gradient(160deg, var(--sage), var(--sage-deep));
	border-radius: 50%;
	display: grid; place-items: center;
	color: var(--cream);
	font-family: var(--font-display);
	font-size: 3.25rem;
	font-weight: 400;
	border: 4px solid var(--cream);
	box-shadow: 0 0 0 2px var(--sage-deep);
	max-width: 180px;
	margin: 0 auto;
}
.pastor-body h3 { margin-bottom: .25em; font-size: 1.6rem; }
.pastor-body h3 em { color: var(--russet); font-style: italic; }
.pastor-role {
	font-family: var(--font-script);
	color: var(--sage-deep);
	font-size: 1.3rem;
	margin-bottom: 1rem;
}
.pastor-body p { color: var(--walnut-soft); margin: 0 0 1rem; }

/* ========== SAGE BAND ========== */
.sage-band {
	background: var(--sage-deep);
	color: var(--cream);
	padding: clamp(3rem, 2rem + 4vw, 5rem) 0;
	position: relative;
	overflow: hidden;
}
.sage-band::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(800px 400px at 0% 0%, rgba(164, 74, 44, 0.15), transparent 60%),
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.98  0 0 0 0 0.96  0 0 0 0 0.91  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
	pointer-events: none;
}
.sage-band > * { position: relative; z-index: 1; }
.sage-band h2 { color: var(--cream); }
.sage-band h2 em { color: var(--cream-paper); }
.sage-band .eyebrow { color: var(--cream-paper); }
.sage-band p { color: rgba(251, 246, 233, 0.88); }

/* ========== RULED SECTION (looks like notebook paper) ========== */
.ruled {
	background: var(--cream-paper);
	background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--rule) 31px, var(--rule) 32px);
	padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0;
	border-top: 2px solid var(--russet);
	border-bottom: 2px solid var(--russet);
	position: relative;
}
.ruled::before {
	/* "margin line" - left red line like actual ruled paper */
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	left: 6rem;
	width: 1.5px;
	background: var(--russet-light);
	opacity: 0.5;
}
@media (max-width: 720px) { .ruled::before { left: 2rem; } }

/* ========== EVENTS LIST ========== */
.events-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 760px;
	margin: 0 auto;
}
.event-note {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 1.75rem;
	padding: 1.5rem;
	background: var(--cream-paper);
	border: 2px solid var(--rule);
	border-radius: 10px;
	align-items: center;
	transition: border-color .2s var(--ease);
}
.event-note:hover { border-color: var(--russet); }
.event-date-block {
	text-align: center;
	font-family: var(--font-display);
	border-right: 1.5px dashed var(--rule);
	padding-right: 1.25rem;
}
.event-date-block .month {
	font-family: var(--font-script);
	font-size: 1.4rem;
	color: var(--russet);
	line-height: 1;
}
.event-date-block .day {
	font-size: 2.25rem;
	color: var(--walnut);
	font-weight: 500;
	line-height: 1;
	display: block;
	margin-top: .25rem;
}
.event-body h3 { font-size: 1.3rem; margin: 0 0 .2rem; }
.event-body h3 em { color: var(--russet); font-style: italic; }
.event-body .meta {
	font-family: var(--font-script);
	font-size: 1.1rem;
	color: var(--sage-deep);
	margin-bottom: .35rem;
}
.event-body p { margin: 0; color: var(--walnut-soft); font-size: 0.97rem; max-width: 100%; }

/* ========== SERMONS LIST ========== */
.sermon-list {
	display: flex;
	flex-direction: column;
	max-width: 760px;
	margin: 0 auto;
}
.sermon {
	padding: 1.5rem 0;
	border-bottom: 1.5px dashed var(--rule);
}
.sermon:last-child { border-bottom: none; }
.sermon .meta {
	display: flex;
	gap: 1rem;
	font-family: var(--font-script);
	font-size: 1.1rem;
	color: var(--sage-deep);
	margin-bottom: .25rem;
	flex-wrap: wrap;
}
.sermon .meta .date { color: var(--russet); }
.sermon h3 { font-size: 1.4rem; font-style: italic; font-weight: 500; margin: 0 0 .3rem; }
.sermon h3 a { color: var(--walnut); text-decoration: none; }
.sermon h3 a:hover { color: var(--russet); }
.sermon .scripture {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 0.98rem;
	color: var(--walnut-soft);
	margin-bottom: .4rem;
}
.sermon p { margin: 0; color: var(--walnut-soft); font-size: 0.98rem; max-width: 100%; }

/* ========== GIVING CARDS ========== */
.giving-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
}
@media (min-width: 760px) { .giving-grid { grid-template-columns: repeat(3, 1fr); } }
.giving-note {
	background: var(--cream-paper);
	border: 2.5px solid var(--rule);
	border-radius: 10px;
	padding: 1.75rem 1.5rem;
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
}
.giving-note.accent { border-color: var(--russet); background: var(--cream); }
.giving-note .tag {
	font-family: var(--font-script);
	font-size: 1.5rem;
	color: var(--russet);
	margin-bottom: .5rem;
	transform: rotate(-1deg);
	display: inline-block;
}
.giving-note h3 { font-size: 1.4rem; margin-bottom: .75rem; }
.giving-note h3 em { color: var(--russet); font-style: italic; }
.giving-note p { margin: 0 0 1.25rem; color: var(--walnut-soft); font-size: 0.97rem; flex: 1; }
.giving-note .btn { align-self: center; }

/* ========== FOOTER ========== */
.site-footer {
	background: var(--walnut);
	color: var(--cream);
	padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 1.5rem;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.25rem;
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-brand .brand-name { color: var(--cream); }
.footer-brand .brand-name em { color: var(--russet-light); }
.footer-brand .brand-tagline { color: var(--cream-paper); }
.footer-brand p.verse {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--cream-paper);
	margin: 1.25rem 0 0;
	max-width: 22em;
}

.footer-col h5 {
	font-family: var(--font-script);
	font-size: 1.5rem;
	color: var(--russet-light);
	margin: 0 0 .75rem;
	font-weight: 400;
}
.footer-col ul { display: flex; flex-direction: column; gap: .4rem; }
.footer-col a { color: rgba(251, 246, 233, 0.8); text-decoration: none; font-size: 0.98rem; }
.footer-col a:hover { color: var(--cream); text-decoration: underline; }
.footer-col p { color: rgba(251, 246, 233, 0.75); font-size: 0.95rem; margin: 0 0 .4em; }

.footer-bottom {
	margin-top: 2.5rem;
	padding: 1.5rem var(--gutter) 0;
	max-width: var(--page-max);
	margin-left: auto; margin-right: auto;
	border-top: 1px solid rgba(251, 246, 233, 0.15);
	text-align: center;
	font-size: 0.9rem;
	color: rgba(251, 246, 233, 0.6);
	font-family: var(--font-display);
	font-style: italic;
}

/* ========== PAGE BANNER (inner pages) ========== */
.page-banner {
	padding: clamp(3rem, 2rem + 3vw, 5rem) 0 clamp(2rem, 1.5rem + 2vw, 3rem);
	text-align: center;
	border-bottom: 2px solid var(--russet);
}
.page-banner .eyebrow { margin-bottom: .4rem; }
.page-banner h1 { margin-bottom: 1rem; }
.page-banner h1 em { color: var(--russet); font-style: italic; }
.page-banner .lead { margin: 0 auto; text-align: center; }

/* ========== PROSE ========== */
.prose {
	max-width: var(--measure-read);
	margin: 0 auto;
	padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--gutter);
	font-size: 1.05rem;
	line-height: 1.8;
}
.prose p { margin: 0 0 1.3em; color: var(--walnut-soft); }
.prose h2 { margin: 2.25em 0 .5em; }
.prose h3 { margin: 2em 0 .4em; color: var(--russet); }
.prose ul, .prose ol { padding-left: 1.25em; margin: 1em 0 1.5em; color: var(--walnut-soft); }
.prose ul li::marker { color: var(--russet); }
.prose ul li { margin-bottom: .4em; }

/* ========== MOTION ========== */
@media (prefers-reduced-motion: no-preference) {
	.hero > * > *:nth-child(1) { animation: h-rise 0.8s var(--ease) both; }
	.hero > * > *:nth-child(2) { animation: h-rise 0.8s 0.08s var(--ease) both; }
	.hero > * > *:nth-child(3) { animation: h-rise 0.8s 0.16s var(--ease) both; }
	.hero > * > *:nth-child(4) { animation: h-rise 0.8s 0.24s var(--ease) both; }
	.chalkboard { animation: h-rise 0.9s 0.3s var(--ease) both; }
}
@keyframes h-rise {
	from { opacity: 0; transform: translateY(14px) rotate(0deg); }
	to { opacity: 1; }
}

/* ========== UTIL ========== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ========== PHOTO VARIANTS ========== */

/* Photo variant of pastor portrait — keeps the circular shape, fills it with an image */
.pastor-portrait--photo {
	background: none;
	overflow: hidden;
	padding: 0;
	font-size: 0;
}
.pastor-portrait--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
	display: block;
	border-radius: 50%;
}

/* Full-bleed photographic band — used between sections to add visual rest */
.photo-band {
	width: 100%;
	display: block;
	margin: 0;
	background: var(--cream-paper);
	overflow: hidden;
}
.photo-band img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 540px;
	object-fit: cover;
}
.photo-band figcaption {
	display: block;
	text-align: center;
	font-family: var(--font-script);
	font-size: 1.05rem;
	color: var(--walnut-soft);
	padding: 0.6rem 1rem 0.9rem;
	background: var(--cream-paper);
}

/* Photo inset — for use inside content prose flow (rounded corners, shadow) */
.photo-inset {
	margin: 2.5rem auto;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 28px rgba(80, 60, 40, 0.13);
	max-width: 880px;
}
.photo-inset img {
	width: 100%;
	height: auto;
	display: block;
}
.photo-inset figcaption {
	font-family: var(--font-script);
	font-size: 1rem;
	color: var(--walnut-soft);
	padding: 0.6rem 1rem 0.8rem;
	background: var(--cream-paper);
	text-align: center;
}