/* ==========================================================================
   Word Became Flesh — theme styles
   Black, gold and white; Fira Sans headings and Lora text.
   ========================================================================== */

:root {
	/* Black, gold and white. --accent is the darker gold used for text and
	   links (readable on white); --gold is for fills, rules and hovers. */
	--accent: #8a6a1e;
	--gold: #c5a052;
	--gold-light: #dcc188;
	--ink: #111111;
	--primary: #ffffff;
	--secondary: #f7f3ea;
	--tertiary: #ebe2cd;
	--heading: #0f0f0f;
	--text: #1d1d1d;
	--meta: #6e6a62;
	--field: #ffffff;
	--wordmark: #0f0f0f;
	--ring: rgba(0, 0, 0, .06);

	--button-bg: #111111;
	--button-text: #ffffff;

	--footer-1: #0b0b0b;
	--footer-2: #171717;
	--footer-3: #262626;
	--footer-text: #f3ece0;

	--font-heading: 'Fira Sans', 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'Lora', Georgia, 'Times New Roman', serif;
	--font-mark: 'Fira Sans Extra Condensed', 'Fira Sans', 'Arial Narrow', sans-serif;

	--radius: 10px;
	--container: 72rem;
	--gutter: 1rem;
	--prose: 42rem;
	--speed: .15s;
}

[data-scheme="dark"] {
	--accent: #d4b06a;
	--primary: #0e0e0e;
	--secondary: #181818;
	--tertiary: #262626;
	--heading: #f6f1e6;
	--text: #ece6da;
	--meta: rgba(236, 230, 218, .62);
	--field: #181818;
	--wordmark: #f6f1e6;
	--ring: rgba(255, 255, 255, .06);
	--button-bg: #c5a052;
	--button-text: #111111;
	color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 2rem; }
body {
	margin: 0;
	background: var(--primary);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--heading);
}
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--gold-light); color: #111; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; margin: 0; z-index: 100;
	top: .75rem; left: .75rem; padding: .5rem 1rem;
	background: var(--button-bg); color: var(--button-text); border-radius: var(--radius);
}
.nowrap { white-space: nowrap; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------------------- buttons */
.button {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .5rem 1.5rem;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: var(--radius);
	background: var(--button-bg);
	color: var(--button-text);
	font-family: var(--font-body);
	font-size: 1.125rem;
	line-height: 1.555;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .06);
	transition: background-color var(--speed) ease, color var(--speed) ease, border-color var(--speed) ease;
	white-space: nowrap;
}
.button:hover { background: var(--gold); border-color: var(--gold); color: #111; }
.button-gold { background: var(--gold); border-color: var(--gold); color: #111; }
.button-gold:hover { background: var(--gold-light); border-color: var(--gold-light); }
.button-ghost { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; box-shadow: none; }
.button-ghost:hover { background: transparent; border-color: var(--gold); color: var(--gold-light); }
.button-sm { padding: .375rem 1.5rem; }
.button-outline {
	background: transparent; color: var(--heading);
	border-color: var(--tertiary); box-shadow: none;
}
.button-outline:hover { background: var(--secondary); border-color: var(--gold); color: var(--heading); }
.button[disabled], .button.is-loading { opacity: .6; pointer-events: none; }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.icon-button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem; padding: 0;
	border: 0; border-radius: var(--radius); background: transparent; color: var(--heading);
	cursor: pointer; transition: background var(--speed) ease;
}
.icon-button:hover { background: var(--secondary); }

/* -------------------------------------------------------------- header */
.site-header { position: relative; z-index: 50; padding-top: 1.5rem; }
.header-inner { display: flex; align-items: center; gap: 1.75rem; min-height: 3.5rem; }

/* Name lockup: full name with the slogan underneath. */
.site-logo {
	display: inline-flex; align-items: center; gap: .75rem; flex-shrink: 0;
	color: var(--wordmark);
	transition: opacity var(--speed) ease;
}
.site-logo:hover { opacity: .9; }
.site-logo.has-image { height: 2.75rem; }
.site-logo.has-image img { height: 100%; width: auto; }
.brand-text { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.brand-name {
	font-family: var(--font-mark); font-weight: 700;
	font-size: 1.625rem; line-height: 1;
	letter-spacing: .02em; text-transform: uppercase;
	white-space: nowrap;
}
.brand-slogan {
	display: block;
	font-family: var(--font-heading); font-weight: 600;
	font-size: .625rem; line-height: 1;
	letter-spacing: .26em; text-transform: uppercase;
	color: var(--accent);
	white-space: nowrap;
}

.site-nav { flex: 1; }
.site-nav .nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: .25rem 1.25rem; }
.site-nav li { white-space: nowrap; }
.site-nav a {
	font-size: 1.125rem; line-height: 1.75;
	color: var(--text);
	text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
	transition: text-decoration-color var(--speed) ease;
}
.site-nav a:hover,
.site-nav .current-menu-item > a { text-decoration-color: color-mix(in oklab, var(--accent) 50%, transparent); }
.site-nav .sub-menu { display: none; }

.header-actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.menu-toggle { display: none; }
.menu-icon-close { display: none; }

/* --------------------------------------------------------------- notice */
.site-notice {
	position: fixed; z-index: 90; top: 1rem; left: 50%; transform: translateX(-50%);
	max-width: calc(100% - 2rem);
	padding: .75rem 1.25rem;
	background: var(--footer-1); color: var(--footer-text);
	border-radius: var(--radius);
	box-shadow: 0 10px 25px -5px rgba(25, 27, 34, .25);
	animation: notice-out 6s forwards;
}
.site-notice.is-error { background: #a3262b; }
@keyframes notice-out { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* ------------------------------------------------------------- sections */
.site-main { padding-bottom: 7rem; }
.section { margin-top: 7rem; }
.section-tight { margin-top: 3rem; }
.section-tinted { padding-block: 5rem; background: color-mix(in oklab, var(--secondary) 55%, var(--primary)); }
.section-title {
	font-size: 3rem; line-height: 1.1;
	text-align: center;
	margin-bottom: 3rem;
}
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; }
.section-head .section-title { text-align: left; margin: 0; font-size: 2.25rem; }
.section-link {
	display: inline-flex; align-items: center; gap: .375rem;
	font-size: 1.125rem; color: var(--accent);
	text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
	transition: text-decoration-color var(--speed) ease;
}
.section-link:hover { text-decoration-color: color-mix(in oklab, var(--accent) 50%, transparent); }
.empty { text-align: center; color: var(--meta); font-size: 1.125rem; }

/* ----------------------------------------------------------------- hero */
.hero { padding-top: 5rem; text-align: center; }
.hero-quote { margin: 0 auto; max-width: 72rem; }
.hero-quote blockquote { margin: 0; }
.hero-title { font-size: 3.25rem; line-height: 1.15; letter-spacing: -.01em; }
.hero-quote-a, .hero-quote-b { text-wrap: balance; }
.hero-quote-a { display: block; }
.hero-quote-b { display: block; font-family: var(--font-body); font-style: italic; font-weight: 400; color: var(--accent); }
.hero-cite {
	display: flex; align-items: center; justify-content: center; gap: 1rem;
	margin-top: 1.75rem;
	font-family: var(--font-heading); font-size: .8125rem; font-weight: 600;
	letter-spacing: .24em; text-transform: uppercase; color: var(--meta);
}
.hero-cite::before, .hero-cite::after { content: ""; width: 2.5rem; height: 1px; background: var(--gold); }
.hero-text { max-width: 36rem; margin: 1rem auto 0; font-size: 1.125rem; line-height: 1.555; }
.hero-form { justify-content: center; margin-top: 2rem; }

/* ------------------------------------------------------- subscribe form */
.subscribe-form { display: flex; flex-wrap: wrap; gap: .75rem; }
.subscribe-form input[type="email"] { width: 19rem; max-width: 100%; }
.form-message { flex-basis: 100%; min-height: 0; font-size: 1rem; }
.form-message:empty { display: none; }
.form-message.is-success { color: #1d7a46; }
.form-message.is-error { color: #b42318; }
[data-scheme="dark"] .form-message.is-success { color: #7ad3a1; }
[data-scheme="dark"] .form-message.is-error { color: #ff9b94; }

input[type="text"], input[type="email"], input[type="search"], input[type="url"],
input[type="password"], textarea, select {
	width: 100%;
	padding: .5rem 1rem;
	border: 1px solid var(--secondary);
	border-radius: var(--radius);
	background: var(--field);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1.125rem; line-height: 1.555;
	transition: border-color var(--speed) ease, box-shadow var(--speed) ease;
}
input:focus, textarea:focus, select:focus {
	outline: none; border-color: var(--gold);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 25%, transparent);
}
::placeholder { color: var(--meta); opacity: 1; }

/* ----------------------------------------------------------------- cards */
.card { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.card-image {
	position: relative; display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--secondary);
}
.card-image::after {
	content: ""; position: absolute; inset: 0;
	border: 1px solid var(--ring); border-radius: var(--radius); pointer-events: none;
}
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--speed) ease; }
.card:hover .card-image img { filter: brightness(1.05); }
.card-body { display: flex; flex-direction: column; gap: .5rem; }

.post-tag {
	position: relative; z-index: 2;
	align-self: flex-start;
	font-size: .875rem; line-height: 1.43; font-weight: 600;
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
	transition: text-decoration-color var(--speed) ease;
}
.post-tag:hover { text-decoration-color: color-mix(in oklab, var(--accent) 50%, transparent); }

.card-title { font-size: 1.5rem; line-height: 1.333; }
.card-title a {
	text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
	transition: text-decoration-color var(--speed) ease;
}
.card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card:hover .card-title a { text-decoration-color: color-mix(in oklab, var(--accent) 50%, transparent); }
.card-excerpt { font-size: 1rem; line-height: 1.5; }

.post-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; }

/* Featured block */
.featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 7rem; }
.hero + .featured { margin-top: 7rem; }
.site-main > .featured:first-child { margin-top: 3rem; }
.card-feature .card-title { font-size: 1.875rem; line-height: 1.2; }
.card-feature .card-excerpt { font-size: 1.125rem; line-height: 1.555; }
.featured-list { display: flex; flex-direction: column; gap: 3rem; }
.card-list { flex-direction: row; align-items: flex-start; gap: 1.5rem; }
.card-list .card-image { flex: none; width: 11rem; }
.card-list .card-body { flex: 1; align-self: center; }

/* Sermon cards */
.card-video .card-image { aspect-ratio: 16 / 9; }
.play-badge {
	position: absolute; left: .75rem; bottom: .75rem; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem; padding-left: 2px;
	border-radius: 999px; background: #111; color: var(--gold);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}
.duration {
	position: absolute; right: .75rem; bottom: .75rem; z-index: 1;
	padding: .125rem .5rem; border-radius: 6px;
	background: rgba(25, 27, 34, .75); color: #fff;
	font-family: var(--font-heading); font-size: .8125rem; font-weight: 500;
}

/* Book cards */
.book-feed { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3rem 2rem; }
.card-book { gap: 1.25rem; }
.book-cover {
	position: relative; display: block;
	aspect-ratio: 2 / 3; overflow: hidden;
	border-radius: 6px;
	background: var(--secondary);
	box-shadow: 0 1px 2px rgba(25, 27, 34, .12), 0 12px 24px -12px rgba(25, 27, 34, .45);
	transition: transform .2s ease;
}
.card-book:hover .book-cover { transform: translateY(-3px); }
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-cover-blank { display: flex; align-items: center; justify-content: center; height: 100%; padding: 1rem; text-align: center; font-family: var(--font-heading); font-weight: 600; }
.book-status {
	position: absolute; top: .5rem; left: .5rem;
	padding: .125rem .5rem; border-radius: 6px;
	background: var(--gold); color: #111;
	font-family: var(--font-heading); font-size: .75rem; font-weight: 600; text-transform: uppercase;
}
.card-book .card-title { font-size: 1.25rem; line-height: 1.4; }
.card-book .card-excerpt { font-size: .9375rem; color: var(--meta); }

.load-more { display: flex; justify-content: center; margin-top: 4rem; }

/* -------------------------------------------------------- archive pages */
.archive-header { padding-top: 5rem; text-align: center; }
.archive-label { font-size: .875rem; font-weight: 600; text-transform: uppercase; color: var(--accent); margin-bottom: .75rem; }
.archive-title { font-size: 3rem; line-height: 1.1; }
.archive-text { max-width: 36rem; margin: 1rem auto 0; font-size: 1.125rem; line-height: 1.555; }
.archive-count { margin-top: 1rem; font-size: .875rem; color: var(--meta); }
.archive-header .search-form { max-width: 32rem; margin: 2rem auto 0; }

.search-form { display: flex; gap: .75rem; }

.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-list a {
	display: inline-block; padding: .25rem .875rem;
	border-radius: var(--radius); background: var(--secondary);
	font-size: 1rem; transition: background var(--speed) ease;
}
.tag-list a:hover { background: var(--tertiary); }
.tag-list-center { justify-content: center; margin-top: 1.5rem; }

/* --------------------------------------------------------- article page */
.article-header { position: relative; padding-block: 4rem; background: var(--secondary); overflow: hidden; margin-top: 1.5rem; }
.article-header-bg { position: absolute; inset: 0; z-index: 0; }
.article-header-bg img { width: 100%; height: 100%; object-fit: cover; }
.article-header-bg::after {
	content: ""; position: absolute; inset: 0;
	background: color-mix(in oklab, var(--secondary) 90%, transparent);
	backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.article-header-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem 2rem; }
.article-header-inner.has-image { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-header-text { display: flex; flex-direction: column; gap: 1rem; align-self: center; padding-right: 2rem; }
.article-header-inner:not(.has-image) .article-header-text { max-width: 48rem; }
.article-title { font-size: 2.75rem; line-height: 1.12; letter-spacing: -.005em; }
.article-excerpt { font-size: 1.25rem; line-height: 1.5; }
.article-byline { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-top: 1rem; }
.byline-author { display: flex; align-items: center; gap: .75rem; }
.byline-avatar { width: 2.75rem; height: 2.75rem; border-radius: var(--radius); object-fit: cover; }
.byline-name { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; color: var(--heading); }
.byline-meta { display: block; font-size: .875rem; color: var(--meta); }

.article-image { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--tertiary); }
.article-image::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--ring); border-radius: var(--radius); }
.article-image img { width: 100%; height: 100%; object-fit: cover; }

.share-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.share-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; padding: 0;
	border: 0; border-radius: 8px;
	background: var(--tertiary); color: var(--heading);
	cursor: pointer; transition: opacity var(--speed) ease;
}
.share-btn:hover { opacity: .8; }
.share-btn .icon { width: 16px; height: 16px; }
.share-btn.is-copied { background: var(--gold); color: #111; }

/* Reading column */
.content-wrap { max-width: calc(var(--prose) + var(--gutter) * 2); margin: 4rem auto 0; padding-inline: var(--gutter); }
.scripture-note {
	display: inline-flex; align-items: center; gap: .5rem;
	margin-bottom: 2rem; padding: .375rem .875rem;
	border-radius: var(--radius); background: var(--secondary);
	font-size: 1rem; font-style: italic;
}

.entry-content { font-size: 1.1875rem; line-height: 1.75; }
.entry-content > * + * { margin-top: 1.5rem; }
.entry-content > :first-child { margin-top: 0; }
.entry-content h2 { font-size: 1.875rem; line-height: 1.25; margin-top: 3.5rem; }
.entry-content h3 { font-size: 1.5rem; line-height: 1.3; margin-top: 2.75rem; }
.entry-content h4 { font-size: 1.25rem; margin-top: 2.25rem; }
.entry-content h2 + *, .entry-content h3 + *, .entry-content h4 + * { margin-top: .75rem; }
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.entry-content a:hover { text-decoration-thickness: 2px; }
.entry-content strong { font-weight: 700; color: var(--heading); }
.entry-content ul, .entry-content ol { padding-left: 1.5rem; }
.entry-content li + li { margin-top: .5rem; }
.entry-content li::marker { color: var(--meta); }
.entry-content blockquote, .entry-content .wp-block-quote {
	margin-inline: 0; padding: 0 0 0 1.5rem;
	border-left: 3px solid var(--gold);
	font-style: italic;
}
.entry-content blockquote p + p { margin-top: 1rem; }
.entry-content blockquote cite { display: block; margin-top: .75rem; font-size: 1rem; font-style: normal; color: var(--meta); }
.entry-content .wp-block-pullquote { border-block: 2px solid var(--secondary); padding-block: 2rem; text-align: center; }
.entry-content figure { margin-inline: 0; }
.entry-content img { border-radius: var(--radius); }
.entry-content figcaption, .wp-caption-text { margin-top: .75rem; font-size: .9375rem; color: var(--meta); text-align: center; }
.entry-content hr { border: 0; height: 1px; background: var(--tertiary); margin-block: 3rem; }
.entry-content code { padding: .1em .35em; border-radius: 6px; background: var(--secondary); font-size: .875em; }
.entry-content pre { overflow-x: auto; padding: 1.25rem; border-radius: var(--radius); background: var(--footer-1); color: var(--footer-text); font-size: .9375rem; line-height: 1.6; }
.entry-content pre code { padding: 0; background: none; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.entry-content th, .entry-content td { padding: .625rem .75rem; border-bottom: 1px solid var(--secondary); text-align: left; }
.entry-content .alignwide { width: min(64rem, calc(100vw - var(--gutter) * 2)); max-width: none; margin-inline: 50%; transform: translateX(-50%); }
.entry-content .alignfull { width: 100vw; max-width: none; margin-inline: 50%; transform: translateX(-50%); }
.entry-content .alignfull img { border-radius: 0; width: 100%; }
.entry-content .alignleft { float: left; margin: .5rem 1.5rem 1rem 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: .5rem 0 1rem 1.5rem; max-width: 50%; }
.entry-content .aligncenter { margin-inline: auto; }
.entry-content .wp-block-embed iframe, .entry-content .wp-block-video video { width: 100%; border-radius: var(--radius); }
.entry-content .wp-block-button__link { border-radius: var(--radius); background: var(--button-bg); color: var(--button-text); text-decoration: none; }
.entry-content::after { content: ""; display: table; clear: both; }

sup.cog-fn a { text-decoration: none; font-family: var(--font-heading); font-size: .75em; font-weight: 600; }
.cog-endnotes { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--tertiary); font-size: 1rem; }
.cog-endnotes-heading { font-size: 1.125rem; margin-bottom: .75rem; }
.cog-endnotes-list { padding-left: 1.25rem; }
.cog-endnote + .cog-endnote { margin-top: .5rem; }
.cog-endnote-back { text-decoration: none !important; }

.page-links { margin-top: 2rem; font-family: var(--font-heading); }

/* Article footer */
.article-footer { margin-top: 4rem; }
.footer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; }
.footer-label { font-size: 1.25rem; line-height: 1.4; margin-bottom: 1rem; }
.content-wrap > .footer-label { margin-top: 3rem; }

.cite-box { margin-top: 3rem; border: 1px solid var(--tertiary); border-radius: var(--radius); }
.cite-box summary {
	display: flex; align-items: center; gap: .5rem;
	padding: .875rem 1.25rem; cursor: pointer; list-style: none;
	font-family: var(--font-heading); font-weight: 600; color: var(--heading);
}
.cite-box summary::-webkit-details-marker { display: none; }
.cite-box summary::after { content: "+"; margin-left: auto; font-size: 1.25rem; color: var(--meta); }
.cite-box[open] summary::after { content: "−"; }
.cite-box dl { margin: 0; padding: 0 1.25rem 1.25rem; }
.cite-row { padding-top: 1rem; border-top: 1px solid var(--secondary); }
.cite-row + .cite-row { margin-top: 1rem; }
.cite-row dt { font-family: var(--font-heading); font-size: .875rem; font-weight: 600; text-transform: uppercase; color: var(--meta); }
.cite-row dd { margin: .25rem 0 0; display: flex; gap: 1rem; align-items: flex-start; font-size: .9375rem; line-height: 1.6; word-break: break-word; }
.cite-row dd span { flex: 1; }
.cite-copy { flex: none; padding: .125rem .625rem; border: 1px solid var(--tertiary); border-radius: 6px; background: transparent; cursor: pointer; font-size: .875rem; }
.cite-copy:hover, .cite-copy.is-copied { background: var(--gold); border-color: var(--gold); color: #111; }

/* Subscribe box after an article */
.subscribe-cta {
	max-width: calc(48rem - var(--gutter) * 2);
	margin: 5rem auto 0; padding: 3rem 2rem;
	width: calc(100% - var(--gutter) * 2);
	border-radius: var(--radius);
	background: var(--secondary);
	text-align: center;
}
.subscribe-cta h2 { font-size: 1.875rem; line-height: 1.25; }
.subscribe-cta p { margin-top: .5rem; font-size: 1.125rem; }
.subscribe-cta .subscribe-form { justify-content: center; margin-top: 1.5rem; }

.related-title { font-size: 2.25rem; line-height: 1.15; margin-bottom: 2.5rem; }

/* Comments */
.comments-wrap { margin-top: 5rem; }
.comments-title { font-size: 1.5rem; margin-bottom: 1.5rem; }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { padding-left: 2rem; }
.comment-body { padding-block: 1.25rem; border-bottom: 1px solid var(--secondary); }
.comment-author { display: flex; align-items: center; gap: .75rem; font-family: var(--font-heading); font-weight: 600; color: var(--heading); }
.comment-author img { border-radius: var(--radius); }
.comment-author .says { display: none; }
.comment-metadata { margin: .25rem 0 .75rem 3.25rem; font-size: .875rem; color: var(--meta); }
.comment-content { margin-left: 3.25rem; }
.comment-content p + p { margin-top: .75rem; }
.reply { margin: .5rem 0 0 3.25rem; font-size: .875rem; }
.reply a { color: var(--accent); }
.comment-respond { margin-top: 2.5rem; }
.comment-form p + p { margin-top: 1rem; }
.comment-form label { display: block; margin-bottom: .375rem; font-family: var(--font-heading); font-weight: 500; }
.comment-form .comment-notes, .logged-in-as { font-size: .9375rem; color: var(--meta); }
.comment-form-cookies-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .9375rem; }
.comment-form-cookies-consent label { font-family: var(--font-body); font-weight: 400; }

/* Book page */
.book-header { grid-template-columns: minmax(0, 1fr) 20rem !important; align-items: center; }
.book-blurb { font-size: 1.125rem; }
.book-cover-large { margin: 0; }
.book-cover-large img { width: 100%; border-radius: 6px; box-shadow: 0 2px 4px rgba(25, 27, 34, .12), 0 24px 40px -16px rgba(25, 27, 34, .5); }
.highlights { margin: 0; padding-left: 1.25rem; font-size: 1.125rem; line-height: 1.7; }
.highlights li + li { margin-top: .375rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 0; }
.facts div { padding-block: .75rem; border-bottom: 1px solid var(--secondary); }
.facts dt { font-size: .875rem; color: var(--meta); }
.facts dd { margin: .125rem 0 0; font-family: var(--font-heading); font-weight: 500; color: var(--heading); }
.book-note { margin-top: 2.5rem; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--secondary); font-size: 1rem; line-height: 1.65; }
.book-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Sermon page */
.article-header-plain .share-buttons { margin-top: .5rem; }
.video-wrap { max-width: 64rem; margin-top: 3rem; }
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-link { margin-top: .75rem; text-align: right; font-size: .9375rem; }
.video-link a { color: var(--accent); }

/* Pages */
.page-header { padding-top: 5rem; text-align: center; }
.page-title { font-size: 3rem; line-height: 1.1; }
.page-excerpt { max-width: 36rem; margin: 1rem auto 0; font-size: 1.25rem; line-height: 1.5; }
.page-image { max-width: 48rem; margin-top: 3rem; }
.page-image img { width: 100%; border-radius: var(--radius); aspect-ratio: 16 / 10; object-fit: cover; }

/* Contact form */
.contact-form { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.contact-form .field { width: 100%; }
.contact-form label { display: block; margin-bottom: .375rem; font-family: var(--font-heading); font-weight: 500; color: var(--heading); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; width: 100%; }

/* 404 */
.error-page { padding-top: 5rem; text-align: center; }
.error-page .search-form { max-width: 32rem; margin: 2rem auto; }
.error-code { font-family: var(--font-heading); font-size: 6rem; font-weight: 700; line-height: 1; color: var(--tertiary); }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--footer-1); color: var(--footer-text); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3rem; padding-block: 5rem 4rem; }
.footer-about { max-width: 30rem; }
.footer-logo { color: var(--footer-text); }
.footer-logo .brand-slogan { color: var(--gold); }
.footer-text { margin-top: 1rem; font-size: 1.125rem; line-height: 1.555; }
.social-links { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.social-links a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem;
	border: 1px solid var(--footer-3); border-radius: 8px;
	background: var(--footer-2); color: var(--footer-text);
	transition: background var(--speed) ease;
}
.social-links a:hover { background: var(--footer-3); border-color: var(--gold); color: var(--gold-light); }
.social-links .icon { width: 16px; height: 16px; }
.footer-menu { list-style: none; margin: 0; padding: 0; text-align: right; }
.footer-menu li + li { margin-top: .5rem; }
.footer-menu a {
	font-size: 1.125rem;
	text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
	transition: text-decoration-color var(--speed) ease;
}
.footer-menu a:hover { text-decoration-color: color-mix(in oklab, var(--footer-text) 50%, transparent); }
.footer-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 2rem; }
.footer-bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--footer-2); }
.copyright { font-size: 1rem; }
.scheme-toggle { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--footer-2); border-radius: var(--radius); }
.scheme-toggle button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.75rem; height: 1.5rem; padding: 0;
	border: 0; border-radius: 6px; background: transparent; color: var(--footer-text);
	cursor: pointer; opacity: .6;
}
.scheme-toggle button.is-active { background: var(--footer-3); opacity: 1; }

/* ------------------------------------------------- floating subscribe */
.floating-subscribe {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .75rem 1.25rem .75rem 1rem;
	border: 1px solid color-mix(in oklab, var(--gold) 60%, transparent); border-radius: 999px;
	background: #111; color: #fff;
	font-family: var(--font-heading); font-size: 1rem; font-weight: 500;
	box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .45);
	cursor: pointer;
	transition: transform .2s ease, opacity .2s ease;
}
.floating-subscribe:hover { transform: translateY(-2px); }
.floating-subscribe .icon { color: var(--gold); }
[data-scheme="dark"] .floating-subscribe { background: var(--gold); color: #111; }
[data-scheme="dark"] .floating-subscribe .icon { color: #111; }
.floating-subscribe.is-hidden { opacity: 0; transform: translateY(1rem); pointer-events: none; }

/* ---------------------------------------------------------------- modals */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 1rem 1rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(25, 27, 34, .45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: fade-in .15s ease-out; }
.modal-panel {
	position: relative; width: 100%;
	background: var(--primary); color: var(--text);
	border-radius: var(--radius);
	box-shadow: 0 25px 50px -12px rgba(25, 27, 34, .35);
	animation: fade-in-up .25s ease-out both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.search-panel { max-width: 40rem; overflow: hidden; }
.search-bar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--secondary); color: var(--meta); }
.search-bar input { flex: 1; border: 0; padding: .5rem 0; background: transparent; font-size: 1.25rem; box-shadow: none; }
.search-bar input:focus { box-shadow: none; }
.search-cancel { border: 0; background: none; padding: .25rem .5rem; color: var(--meta); cursor: pointer; font-size: 1rem; }
.search-results { max-height: 60vh; overflow-y: auto; }
.search-results:empty { display: none; }
.search-group { padding: .75rem 1rem .25rem; font-family: var(--font-heading); font-size: .8125rem; font-weight: 600; text-transform: uppercase; color: var(--meta); }
.search-hit { display: block; padding: .75rem 1rem; border-radius: 0; }
.search-hit:hover, .search-hit:focus { background: var(--secondary); outline: none; }
.search-hit strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; color: var(--heading); }
.search-hit span { display: block; margin-top: .125rem; font-size: .875rem; color: var(--meta); }
.search-empty { padding: 1.25rem 1rem; color: var(--meta); }
.search-all { display: block; padding: .875rem 1rem; border-top: 1px solid var(--secondary); color: var(--accent); }

.subscribe-modal { align-items: center; padding-top: 1rem; }
.subscribe-panel { max-width: 30rem; padding: 3rem 2rem 2.5rem; text-align: center; }
.modal-close { position: absolute; top: .75rem; right: .75rem; }
.subscribe-avatar { width: 4rem; height: 4rem; margin: 0 auto 1.25rem; border-radius: var(--radius); object-fit: cover; }
.subscribe-panel h2 { font-size: 1.875rem; line-height: 1.2; }
.subscribe-panel > p { margin-top: .75rem; font-size: 1.0625rem; line-height: 1.55; }
.subscribe-panel .subscribe-form { flex-direction: column; margin-top: 1.5rem; }
.subscribe-panel .subscribe-form input[type="email"] { width: 100%; }
.subscribe-panel .subscribe-form .button { width: 100%; }
.subscribe-fine { margin-top: 1rem; font-size: .875rem; color: var(--meta); }

body.has-modal { overflow: hidden; }

/* ------------------------------------------------------------ about page */
.about-hero { margin-top: 1.5rem; padding-block: 5rem; background: #0b0b0b; color: #f3ece0; overflow: hidden; }
.about-hero-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: center; }
.about-eyebrow {
	display: flex; align-items: center; gap: .75rem;
	font-family: var(--font-heading); font-size: .8125rem; font-weight: 600;
	letter-spacing: .24em; text-transform: uppercase; color: var(--gold);
}
.about-eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--gold); }
.about-name { margin-top: 1.25rem; font-size: 3.5rem; line-height: 1.05; letter-spacing: -.01em; color: #fff; }
.about-degree { display: block; margin-top: .25rem; font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: .62em; color: var(--gold-light); }
.about-role { margin-top: 1rem; font-family: var(--font-heading); font-size: 1rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 236, 224, .72); }
.about-lead { max-width: 34rem; margin-top: 1.75rem; font-size: 1.25rem; line-height: 1.6; color: rgba(243, 236, 224, .9); }
.about-hero .button-row { margin-top: 2.25rem; }
.about-portrait { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 24rem; }
.about-portrait::before {
	content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem;
	border: 1px solid var(--gold); border-radius: var(--radius);
}
.about-portrait img {
	position: relative; width: 100%; aspect-ratio: 8 / 9; object-fit: cover; object-position: 50% 20%;
	border-radius: var(--radius);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
}

.about-milestones { border-bottom: 1px solid var(--tertiary); background: var(--secondary); }
.milestone-list { list-style: none; margin-block: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.milestone-list li { display: flex; flex-direction: column; gap: .25rem; padding: 2rem 1.5rem; border-left: 1px solid var(--tertiary); }
.milestone-list li:first-child { border-left: 0; padding-left: 0; }
.milestone-years { font-family: var(--font-heading); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.milestone-title { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; color: var(--heading); }
.milestone-place { font-size: .9375rem; color: var(--meta); }

.about-body { margin-top: 5rem; }
.about-body .entry-content > p:first-of-type { font-size: 1.3125rem; line-height: 1.7; }
.about-quote { margin-top: 6rem; padding-block: 5rem; background: #0b0b0b; text-align: center; }
.about-quote blockquote { margin: 0 auto; max-width: 60rem; padding: 0; border: 0; }
.about-quote p { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 600; line-height: 1.2; color: #fff; }
.about-quote p span, .about-quote em { display: block; text-wrap: balance; }
.about-quote em { font-family: var(--font-body); font-weight: 400; color: var(--gold-light); }
.about-signature { width: 15rem; margin: 2.5rem auto 0; filter: invert(1) sepia(.6) saturate(2.2) hue-rotate(5deg) brightness(.95); mix-blend-mode: screen; opacity: .9; }

.about-interests { margin-top: 6rem; }
.about-section-head h2 { margin-top: 1rem; font-size: 2.5rem; line-height: 1.1; }
.interest-list { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2.5rem; }
.interest-list li { padding-top: 1.5rem; border-top: 1px solid var(--tertiary); }
.interest-number { display: block; font-family: var(--font-heading); font-size: .875rem; font-weight: 600; letter-spacing: .1em; color: var(--gold); }
.interest-list h3 { margin-top: .75rem; font-size: 1.375rem; line-height: 1.3; }
.interest-list p { margin-top: .5rem; font-size: 1rem; line-height: 1.6; color: var(--meta); }

.about-invite { margin-top: 6rem; }
.about-invite-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 2rem;
	padding: 2.5rem 3rem;
	border: 1px solid var(--tertiary);
	border-radius: var(--radius);
	background: var(--secondary);
}
.about-invite h2 { font-size: 1.75rem; line-height: 1.25; }
.about-invite p { margin-top: .5rem; font-size: 1.0625rem; color: var(--meta); }

/* Disqus */
.comments-disqus #disqus_thread { min-height: 8rem; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1200px) {
	.book-feed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The full menu needs about 1180px; below that it moves behind the menu button. */
@media (max-width: 1180px) {
	.menu-toggle { display: inline-flex; }
	.site-nav {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0;
		padding: 1rem var(--gutter) 1.5rem;
		background: var(--primary);
		border-bottom: 1px solid var(--secondary);
		box-shadow: 0 16px 24px -16px rgba(25, 27, 34, .25);
	}
	.menu-open .site-nav { display: block; animation: fade-in-up .2s ease-out both; }
	.menu-open .menu-icon-open { display: none; }
	.menu-open .menu-icon-close { display: inline; }
	.site-nav .nav { flex-direction: column; align-items: flex-start; gap: .25rem; }
	.site-nav a { font-size: 1.25rem; line-height: 2.2; }
}

@media (max-width: 1024px) {
	.about-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
	.about-portrait { justify-self: start; max-width: 22rem; }
	.milestone-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.milestone-list li:nth-child(odd) { border-left: 0; padding-left: 0; }
	.interest-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.featured { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
	.post-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.book-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.article-header-inner.has-image, .book-header { grid-template-columns: minmax(0, 1fr) !important; }
	.article-header-text { padding-right: 0; }
	.book-cover-large { max-width: 18rem; }
}

@media (max-width: 640px) {
	:root { --gutter: 1.25rem; }
	.site-header { padding-top: 1rem; }
	.header-inner { gap: .5rem; }
	.site-logo { gap: .5rem; min-width: 0; }
	.brand-name { font-size: 1.1875rem; }
	.brand-slogan { font-size: .5625rem; letter-spacing: .2em; }
	.header-actions { gap: 0; }
	/* Phones use the floating Subscribe button instead. */
	.header-subscribe { display: none; }
	.hero { padding-top: 3.5rem; }
	.hero-title { font-size: 2.125rem; }
	.hero-cite { font-size: .6875rem; letter-spacing: .18em; }
	.subscribe-form input[type="email"] { width: 100%; }
	.hero-form .button { width: 100%; }
	.featured, .hero + .featured { margin-top: 4rem; }
	.section { margin-top: 5rem; }
	.section-title { font-size: 2.25rem; margin-bottom: 2rem; }
	.section-head .section-title { font-size: 1.75rem; }
	.post-feed { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
	.book-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
	.card-list .card-image { width: 8rem; }
	.card-list .card-title { font-size: 1.125rem; }
	.card-feature .card-title { font-size: 1.625rem; }
	.archive-header, .page-header, .error-page { padding-top: 3rem; }
	.archive-title, .page-title { font-size: 2.25rem; }
	.article-header { padding-block: 2.5rem; margin-top: 1rem; }
	.article-title { font-size: 2rem; }
	.article-excerpt { font-size: 1.125rem; }
	.entry-content { font-size: 1.125rem; }
	.footer-row, .field-row, .facts { grid-template-columns: minmax(0, 1fr); }
	.subscribe-cta { padding: 2.5rem 1.25rem; }
	.subscribe-cta .subscribe-form .button { width: 100%; }
	.footer-top { flex-direction: column; padding-block: 3.5rem 2.5rem; }
	.footer-menu { text-align: left; }
	.floating-subscribe span { display: none; }
	.about-hero { padding-block: 3.5rem; }
	.about-name { font-size: 2.5rem; }
	.about-lead { font-size: 1.125rem; }
	.about-portrait { max-width: calc(100% - 1.25rem); }
	.milestone-list { grid-template-columns: minmax(0, 1fr); }
	.milestone-list li { border-left: 0; padding: 1.25rem 0; border-top: 1px solid var(--tertiary); }
	.milestone-list li:first-child { border-top: 0; }
	.about-quote { padding-block: 3.5rem; }
	.about-quote p { font-size: 1.75rem; }
	.interest-list { grid-template-columns: minmax(0, 1fr); }
	.about-section-head h2 { font-size: 2rem; }
	.about-invite-inner { flex-direction: column; align-items: flex-start; padding: 2rem 1.5rem; }
	.floating-subscribe { padding: .875rem; }
	.entry-content .alignleft, .entry-content .alignright { float: none; max-width: 100%; margin: 1.5rem 0; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
	.site-header, .site-footer, .floating-subscribe, .share-buttons, .subscribe-cta, .related, .comments-wrap, .cite-box { display: none !important; }
	.article-header { background: none; padding: 0; }
	body { background: #fff; color: #000; }
}