/*
Theme Name: Hope Nations
Theme URI: https://floulexweb.com/
Author: Floulex Web
Author URI: https://floulexweb.com/
Description: Custom block theme for Hope Nations Christian Church of Chattanooga, built from scratch.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hope-nations
*/

/* ==========================================================================
   PALETTE. Every colour is sampled from the church's crest
   (photos/logo-original.jpeg), and from nothing else.

   ground    #000000  the crest's own field: all four corners measure 0,0,0.
                      The page IS that black, so wherever the crest sits its
                      square edge disappears. Do not "warm up" the ground.
   gold      #dabd61  the lettering, HOPE NATION CHRISTIAN CHURCH
   gold-deep #bf9540  the antique gold of the hat and the ribbon shadows
   flame     #e39337  the hot centre of the torch flame. The one accent, spent
                      on the Give button, the current page and keyboard focus.
   oxblood   #500c07  the ring round the oval. A panel ground, never text on
                      black (1.4:1).
   purple    #230738  the cords and tassels. A panel ground, never text on
                      black (1.3:1).
   parchment #f2e7c6  a tint of the open Bible's page (#dbc372): the mission
                      statement, the week, and the footer.
   paper     #fbf7ee  the same page colour, lighter still: the default ground.
   bronze    #7a5a1c  the crest's gold taken dark enough to be read on paper.

   LIGHT BY DEFAULT (Howard, 2026-11-03: "it's dark a lot"). Black stays only
   where the crest needs it (the bar and the opening crest on Home), plus at
   most two deep bands on Home and one on any other page. Context tokens below
   are light; the dark contexts swap them. Gold is never text on a light
   ground: headings and links there are oxblood, labels are bronze.

   Measured pairs, light: ink on paper 17.9, ink-soft on parchment 7.2,
   oxblood on paper 14.2, oxblood on parchment 12.1, bronze on paper 5.9,
   bronze on parchment 5.2. Dark: ivory on black 16.9, gold on black 11.4,
   gold on oxblood 8.2, ivory on purple 15.3, black on flame 8.5.
   ========================================================================== */

/* Marcellus draws its figures like letters: "1" reads as a capital I and "0"
   as an O, so "1st Friday" became "Ist Friday" and the street number read
   "I6OO". The display family takes its digits from Source Serif instead.
   Order matters: the LAST face declared that covers a character wins, so the
   digit-only face comes after the full Marcellus face. */
@font-face {
	font-family: 'HN Display'; font-style: normal; font-weight: 400; font-display: swap;
	src: url(assets/fonts/marcellus.woff2) format('woff2');
}
@font-face {
	font-family: 'HN Display'; font-style: normal; font-weight: 400; font-display: swap;
	src: url(assets/fonts/source-serif-4-roman.woff2) format('woff2');
	unicode-range: U+0030-0039;
}

:root {
	/* Palette constants. */
	--c-black: #000000;
	--c-ivory: #f2e7c6;
	--c-ivory-soft: #c9bc98;
	--c-gold: #dabd61;
	--c-gold-deep: #bf9540;
	--c-paper: #fbf7ee;
	--c-parchment: #f2e7c6;
	--c-ink: #1c0a05;
	--c-ink-soft: #5b4632;
	--c-bronze: #7a5a1c;
	--c-rule: #dccdaa;
	--hn-flame: #e39337;
	--hn-oxblood: #500c07;
	--hn-purple: #230738;
	--hn-page: #f2e7c6;
	--hn-page-ink: #1c0a05;

	/* Context tokens, light by default. Components only ever use these. */
	--hn-ground: var(--c-paper);
	--hn-ink: var(--c-ink);
	--hn-ink-soft: var(--c-ink-soft);
	--hn-gold: var(--hn-oxblood);        /* headings, accents, links */
	--hn-gold-deep: var(--c-bronze);     /* labels and strong rules */
	--hn-line: var(--c-rule);            /* hairlines */
	--hn-hover: var(--c-bronze);
	--hn-frame: var(--c-parchment);      /* the mat round the portrait */
	--hn-display: 'HN Display', Marcellus, Georgia, serif;
	--hn-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--hn-quote: 'Cormorant Garamond', Georgia, serif;
	--hn-gutter: 1rem;
	--hn-head-h: 5.25rem;
}
@media (min-width: 640px) {
	:root { --hn-gutter: 2.5rem; --hn-head-h: 6.75rem; }
}

/* The dark contexts. The bar and the Home opening sit on the crest's own
   black; the deep bands keep their colour and take light type. */
.hn-head, .hn-open, .hn-movement, .hn-litany-sec, .hn-give-sec {
	--hn-ground: var(--c-black);
	--hn-ink: var(--c-ivory);
	--hn-ink-soft: var(--c-ivory-soft);
	--hn-gold: var(--c-gold);
	--hn-gold-deep: var(--c-gold-deep);
	--hn-line: #3f3016;
	--hn-hover: var(--hn-flame);
	--hn-frame: #0b0605;
	color: var(--hn-ink);
}
.hn-open { background: var(--c-black); }
.hn-movement { --hn-ground: var(--hn-oxblood); }
.hn-litany-sec { --hn-ground: var(--hn-purple); }
.hn-give-sec { --hn-ground: var(--hn-oxblood); }

/* ------------------------------------------------------------------ base */

html { scroll-padding-top: calc(var(--hn-head-h) + 1rem); }
body {
	margin: 0;
	background: var(--hn-ground);
	color: var(--hn-ink);
	font-family: var(--hn-body);
	font-size: 1.1875rem;
	line-height: 1.7;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

a { color: var(--hn-gold); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--hn-hover); }
:focus-visible { outline: 2px solid var(--hn-flame); outline-offset: 3px; }

h1, h2, h3, h4 {
	font-family: var(--hn-display);
	font-weight: 400;
	line-height: 1.12;
	color: var(--hn-gold);
	margin: 0;
	text-wrap: balance;
}
p { margin: 0; }
.hn-sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.hn-wrap { width: min(100% - 2 * var(--hn-gutter), 78rem); margin-inline: auto; }
.hn-sec { padding-block: clamp(4rem, 8vw, 7rem); }
.hn-main { display: block; }

.hn-kicker {
	font-family: var(--hn-display);
	font-size: .875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hn-gold-deep);
	margin-bottom: 1rem;
}
.hn-h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); }
.hn-lede { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.4375rem); line-height: 1.6; }
.hn-prose > * + * { margin-top: 1.05em; }
.hn-h2 + .hn-prose { margin-top: 1.25rem; }
.hn-prose { max-width: 40rem; }
.hn-more { margin-top: 1.75rem; font-family: var(--hn-display); font-size: 1.0625rem; letter-spacing: .04em; }
.hn-more a { text-decoration: none; border-bottom: 1px solid var(--hn-gold-deep); padding-bottom: .15em; }
.hn-more a::after { content: " \2192"; }
.hn-more a:hover { border-bottom-color: var(--hn-flame); }

/* The gold cord from the crest, twisted, as the one divider the site uses. */
.hn-cord {
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cpath d='M0 9 C4 9 6 3 10 3 C13 3 14 6 18 6' fill='none' stroke='%23bf9540' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M0 3 C4 3 6 9 10 9 C13 9 14 6 18 6' fill='none' stroke='%23dabd61' stroke-width='1.4' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") repeat-x left center / 18px 12px;
	opacity: .9;
}

/* Buttons: square, solid flame, black type. One style for core buttons too. */
.hn-btn, .wp-block-button__link {
	display: inline-flex; align-items: center; gap: .5rem;
	background: var(--hn-flame); color: #000;
	font-family: var(--hn-display); font-size: 1.0625rem; letter-spacing: .06em;
	text-decoration: none; padding: .95rem 1.6rem; border: 0; border-radius: 0;
	transition: background-color .2s ease, transform .2s ease;
}
.hn-btn:hover, .wp-block-button__link:hover { background: var(--c-gold); color: #000; transform: translateY(-1px); }
.hn-btn-line {
	display: inline-flex; font-family: var(--hn-display); font-size: 1.0625rem; letter-spacing: .06em;
	color: var(--hn-gold); text-decoration: none; padding: .9rem 1.5rem; border: 1px solid var(--hn-gold-deep);
	transition: border-color .2s ease, color .2s ease;
}
.hn-btn-line:hover { border-color: var(--hn-flame); color: var(--hn-hover); }
.hn-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.hn-give-cta { margin-top: 1.75rem; }

/* ---------------------------------------------------------------- header */

.hn-headwrap { position: sticky; top: 0; z-index: 50; }
.admin-bar .hn-headwrap { top: 32px; }
@media (max-width: 782px) { .admin-bar .hn-headwrap { top: 46px; } }
.hn-head {
	background: var(--hn-ground);
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease;
}
.hn-head.is-scrolled { border-bottom-color: var(--hn-line); }
.hn-head-in {
	width: min(100% - 2 * var(--hn-gutter), 78rem); margin-inline: auto;
	height: var(--hn-head-h);
	display: flex; align-items: center; gap: 1.25rem;
	position: relative;
}
.hn-skip {
	position: absolute; left: 0; top: -4rem; background: var(--hn-flame); color: #000;
	padding: .5rem 1rem; font-family: var(--hn-display); z-index: 60; text-decoration: none;
}
.hn-skip:focus { top: .5rem; }

.hn-brand {
	display: flex; align-items: center; gap: .85rem; text-decoration: none;
	margin-right: auto; color: var(--hn-ink); min-width: 0;
	transition: opacity .45s ease, visibility .45s;
}
.hn-brand-crest {
	display: block; width: 4.4rem; height: auto; flex: none;
	/* The file's left and right edges cut through two tassels. A narrow fade
	   lets those cuts dissolve into the identical black instead of ending in a line. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.hn-brand-name { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.hn-brand-1 { font-family: var(--hn-display); font-size: 1.25rem; color: var(--hn-gold); letter-spacing: .03em; }
.hn-brand-2 { font-family: var(--hn-display); font-size: .8125rem; color: var(--hn-ink-soft); letter-spacing: .05em; }
@media (min-width: 640px) {
	.hn-brand-crest { width: 5.9rem; }
	.hn-brand-1 { font-size: 1.5rem; }
	.hn-brand-2 { font-size: .9375rem; }
}
/* On the home page the opening crest is the brand. The small one in the bar
   only appears once that has scrolled away. Script only: with no script the
   brand simply shows. */
.js body.home .hn-head:not(.is-past) .hn-brand { opacity: 0; visibility: hidden; }

/* The nav: one navigation, each destination once. */
.hn-nav { display: flex; align-items: center; gap: 1.6rem; }
.hn-nav > a, .hn-drop > summary {
	font-family: var(--hn-display); font-size: 1.0625rem; letter-spacing: .05em;
	color: var(--hn-ink); text-decoration: none; padding-block: .4rem;
	border-bottom: 1px solid transparent; cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}
.hn-nav > a:hover, .hn-drop > summary:hover { color: var(--hn-gold); }
.hn-nav > a[aria-current="page"], .hn-drop > summary.is-current { color: var(--hn-gold); border-bottom-color: var(--hn-flame); }
.hn-nav > a.hn-give {
	background: var(--hn-flame); color: #000; padding: .6rem 1.25rem; border: 0;
}
.hn-nav > a.hn-give:hover { background: var(--c-gold); color: #000; }
.hn-nav > a.hn-give[aria-current="page"] { background: var(--c-gold); color: #000; box-shadow: inset 0 -3px 0 #000; }

.hn-drop { position: relative; }
.hn-drop > summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; }
.hn-drop > summary::-webkit-details-marker { display: none; }
.hn-drop > summary::after {
	content: ""; width: .45rem; height: .45rem; margin-top: -.25rem;
	border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
	transform: rotate(45deg); transition: transform .2s ease;
}
.hn-drop[open] > summary::after { transform: rotate(225deg); margin-top: .2rem; }
.hn-drop-panel {
	position: absolute; top: calc(100% + .6rem); left: -1.25rem; min-width: 15rem;
	background: #0b0605; border: 1px solid var(--hn-line); border-top: 2px solid var(--hn-gold-deep);
	padding: .6rem 0; display: flex; flex-direction: column; z-index: 5;
}
/* The bridge. A strip of the panel itself covers the gap above it, so moving
   the pointer down from "About" never crosses a strip that belongs to neither
   and the menu does not shut under the cursor (CLAUDE.md 2026-09-08). */
.hn-drop-panel::before {
	content: ""; position: absolute; top: calc(-.6rem - 2px); left: -.75rem; right: -.75rem; height: calc(.6rem + 2px);
}
.hn-drop-panel a {
	font-family: var(--hn-display); font-size: 1.0625rem; letter-spacing: .03em;
	color: var(--hn-ink); text-decoration: none; padding: .6rem 1.25rem;
	border-left: 2px solid transparent;
}
.hn-drop-panel a:hover { color: var(--hn-gold); background: #170c08; }
.hn-drop-panel a[aria-current="page"] { color: var(--hn-gold); border-left-color: var(--hn-flame); }

/* The phone menu button. Hidden while the bar fits. */
.hn-menu { display: none; }
.hn-menu > summary { list-style: none; }
.hn-menu > summary::-webkit-details-marker { display: none; }
.hn-menu-btn {
	display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
	font-family: var(--hn-display); font-size: 1rem; letter-spacing: .08em; color: var(--hn-gold);
	padding: .55rem .8rem; border: 1px solid var(--hn-line);
}
.hn-menu-word { line-height: 1; }
.hn-menu-bars, .hn-menu-bars::before, .hn-menu-bars::after {
	display: block; width: 1.15rem; height: 1px; background: currentColor; position: relative; transition: transform .2s ease, background-color .2s ease;
}
.hn-menu-bars::before, .hn-menu-bars::after { content: ""; position: absolute; left: 0; }
.hn-menu-bars::before { top: -.35rem; }
.hn-menu-bars::after { top: .35rem; }
.hn-menu[open] .hn-menu-bars { background: transparent; }
.hn-menu[open] .hn-menu-bars::before { transform: translateY(.35rem) rotate(45deg); }
.hn-menu[open] .hn-menu-bars::after { transform: translateY(-.35rem) rotate(-45deg); }

@media (max-width: 1023px) {
	.hn-menu { display: block; }
	/* display:none on the nav itself, which is the element the width check reads. */
	.hn-nav { display: none; }
	.hn-menu[open] ~ .hn-nav {
		display: flex; flex-direction: column; align-items: stretch; gap: 0;
		position: absolute; top: 100%; left: calc(-1 * var(--hn-gutter)); right: calc(-1 * var(--hn-gutter));
		background: #070403; border-top: 1px solid var(--hn-line); border-bottom: 2px solid var(--hn-gold-deep);
		padding: .5rem var(--hn-gutter) 1.5rem;
		max-height: calc(100vh - var(--hn-head-h)); overflow-y: auto;
	}
	.hn-nav > a, .hn-drop > summary { font-size: 1.25rem; padding: .85rem 0; border-bottom: 1px solid var(--hn-line); }
	.hn-nav > a[aria-current="page"] { border-bottom-color: var(--hn-line); box-shadow: inset 3px 0 0 var(--hn-flame); padding-left: .85rem; }
	.hn-drop > summary.is-current { border-bottom-color: var(--hn-line); }
	/* On a phone a group is a heading with its pages under it, not a second drawer. */
	.js .hn-drop > summary { cursor: default; color: var(--hn-gold-deep); font-size: .875rem; letter-spacing: .16em; text-transform: uppercase; padding-bottom: .35rem; border-bottom: 0; }
	.js .hn-drop > summary::after { display: none; }
	.hn-drop-panel { position: static; border: 0; background: none; padding: 0 0 .5rem; min-width: 0; }
	.hn-drop-panel::before { display: none; }
	.hn-drop-panel a { font-size: 1.25rem; padding: .7rem 0 .7rem 1rem; border-left: 1px solid var(--hn-line); }
	.hn-drop-panel a:hover { background: none; }
	.hn-nav > a.hn-give { margin-top: 1.25rem; padding: .95rem 1.25rem; text-align: center; border-bottom: 0; }
}

/* ------------------------------------------------------------ the opening */

.hn-open { padding-block: clamp(1rem, 2.5vw, 2rem) clamp(3.5rem, 7vw, 5.5rem); text-align: center; }
.hn-open-stack { display: flex; flex-direction: column; align-items: center; }
.hn-open-crest {
	position: relative; width: min(100%, 30rem, 52svh); margin-inline: auto;
}
.hn-open-crest .hn-crest-img {
	display: block; width: 100%; height: auto;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
}
/* The signature motion: the torch breathes. A soft light over the flame, not
   a filter on the image, paused whenever it is off screen and gone entirely
   under reduced motion. */
.hn-glow {
	position: absolute; left: 53%; top: 40%; width: 40%; aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(255, 196, 110, .34) 0, rgba(227, 147, 55, .16) 38%, rgba(227, 147, 55, 0) 68%);
	mix-blend-mode: screen; pointer-events: none; opacity: .55;
	animation: hn-breathe 3.4s ease-in-out infinite alternate;
}
.hn-glow.is-off { animation-play-state: paused; }
@keyframes hn-breathe {
	from { opacity: .35; transform: translate(-50%, -50%) scale(.94); }
	to   { opacity: .9;  transform: translate(-50%, -50%) scale(1.06); }
}
.hn-open-title {
	font-size: clamp(2.1rem, 1.2rem + 3.3vw, 3.9rem); color: var(--hn-ink);
	margin-top: clamp(1.25rem, 2.5vw, 2rem); max-width: 18ch; letter-spacing: .01em;
}
.hn-open-title span { display: block; color: var(--hn-gold); font-size: .62em; letter-spacing: .08em; margin-top: .35em; }
.hn-slogan {
	font-family: var(--hn-quote); font-style: italic; font-weight: 500;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem); color: var(--hn-gold); margin-top: 1rem; line-height: 1.3;
}
.hn-open-facts {
	margin-top: 1.5rem; font-size: 1.0625rem; color: var(--hn-ink-soft);
	display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.4rem;
}
.hn-open-facts > span + span::before { content: "·"; color: var(--hn-gold-deep); margin-right: 1.4rem; }
@media (max-width: 720px) {
	.hn-open-facts { flex-direction: column; gap: .2rem; }
	.hn-open-facts > span + span::before { content: none; }
}
.hn-open .hn-actions { justify-content: center; }

/* ------------------------------------------- welcome, with a margin note */

.hn-split { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
	.hn-split { grid-template-columns: minmax(0, 1fr) 17rem; gap: 5rem; align-items: start; }
}
.hn-welcome .hn-h2 { max-width: 16ch; }
.hn-welcome .hn-prose { margin-top: 1.75rem; }
.hn-said {
	margin: 0; padding-left: 1.5rem; border-left: 2px solid var(--hn-gold-deep);
	font-family: var(--hn-quote); font-style: italic; font-weight: 500;
	font-size: clamp(1.5rem, 1.25rem + .9vw, 1.95rem); line-height: 1.35; color: var(--hn-ink);
}
.hn-said p + p { margin-top: .7em; }
.hn-said cite { display: block; margin-top: 1rem; font-family: var(--hn-body); font-style: normal; font-size: 1rem; color: var(--hn-ink-soft); }
.hn-welcome .hn-said { margin-top: 0; }
.hn-margin { border-top: 1px solid var(--hn-line); padding-top: 1.5rem; }
@media (min-width: 900px) { .hn-margin { border-top: 0; border-left: 1px solid var(--hn-line); padding: .5rem 0 0 2rem; } }
.hn-six { font-family: var(--hn-display); font-size: 7.5rem; line-height: .9; color: var(--hn-gold); }
.hn-six-note { margin-top: 1rem; color: var(--hn-ink-soft); font-size: 1.0625rem; line-height: 1.6; }

/* ---------------------------------------------------------- the ledger */

.hn-week-head { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
@media (min-width: 900px) { .hn-week-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 5rem; } }
.hn-week-head .hn-prose { color: var(--hn-ink-soft); }
.hn-ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hn-gold-deep); }
.hn-ledger-row {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem;
	padding: 1.25rem 0; border-bottom: 1px solid var(--hn-line);
}
@media (min-width: 720px) {
	.hn-ledger-row { grid-template-columns: 13rem minmax(0, 1fr) 11rem; gap: 2rem; align-items: baseline; padding: 1.6rem 0; }
	.hn-ledger-time { text-align: right; }
}
.hn-ledger-day { font-family: var(--hn-display); color: var(--hn-gold); font-size: 1.125rem; letter-spacing: .04em; }
.hn-ledger-what { font-family: var(--hn-display); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); color: var(--hn-ink); line-height: 1.25; }
.hn-ledger-sub { display: block; font-family: var(--hn-body); font-size: 1rem; color: var(--hn-ink-soft); margin-top: .3rem; }
.hn-ledger-time { font-size: 1.125rem; color: var(--hn-ink); font-variant-numeric: lining-nums; }
.hn-week-note { margin-top: 1.75rem; color: var(--hn-ink-soft); }

/* ------------------------------------------------- oxblood: the movement */

.hn-movement { background: var(--hn-oxblood); }
.hn-movement-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .hn-movement-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; align-items: center; } }
.hn-movement .hn-prose { color: var(--hn-ink); margin-top: 1.5rem; }
.hn-quote {
	margin: 0; font-family: var(--hn-quote); font-style: italic; font-weight: 500;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.35rem); line-height: 1.2; color: var(--hn-ink);
	padding-top: 2.25rem; border-top: 1px solid rgba(218, 189, 97, .45); position: relative;
}
.hn-quote::before {
	content: "\201C"; position: absolute; top: -.05em; left: 0; transform: translateY(-50%);
	font-family: var(--hn-display); font-style: normal; font-size: 3.2rem; line-height: 1; color: var(--hn-gold);
	background: var(--hn-oxblood); padding-right: .6rem;
}
.hn-quote p { margin: 0; }
.hn-quote cite { display: block; margin-top: 1.25rem; font-family: var(--hn-body); font-style: normal; font-size: 1rem; color: var(--hn-ink); }

/* ------------------------------------------------- purple: the litany */

.hn-litany-sec { background: var(--hn-purple); }
.hn-litany-sec .hn-h2 { color: var(--hn-gold); }
.hn-litany {
	margin-top: 2rem; font-family: var(--hn-display); line-height: 1.45;
	font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.8rem); color: var(--hn-ink); max-width: 72rem;
}
.hn-litany-name { white-space: nowrap; }
.hn-litany-name.is-long { white-space: normal; }
.hn-litany-dot { color: var(--hn-gold); }
.hn-litany-sec .hn-more a { color: var(--hn-gold); }

/* ---------------------------------------------------- the apostle, home */

.hn-apostle-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 820px) { .hn-apostle-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; } }
.hn-portrait { margin: 0; }
.hn-portrait img { display: block; width: 100%; height: auto; border: 1px solid var(--hn-gold-deep); padding: .6rem; background: var(--hn-frame); }
.hn-portrait figcaption { margin-top: .85rem; font-size: 1rem; color: var(--hn-ink-soft); }
.hn-apostle .hn-h2 { max-width: 14ch; }
.hn-apostle .hn-prose { margin-top: 1.5rem; }

/* --------------------------------------------- find us and give, side by side */

.hn-duo { border-top: 1px solid var(--hn-line); }
.hn-duo-grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .hn-duo-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; } }
.hn-duo-col .hn-prose { margin-top: 1.25rem; }
@media (min-width: 900px) {
	.hn-duo-col + .hn-duo-col { border-left: 1px solid var(--hn-line); padding-left: 4rem; }
	.hn-duo-col:first-child { padding-right: 4rem; }
}
.hn-big-addr { font-family: var(--hn-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.25; color: var(--hn-ink); margin-top: 1.5rem; }

/* ------------------------------------------------------- interior opener */

.hn-opener { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 4vw, 3.5rem); }
.hn-opener-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .hn-opener-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; align-items: end; } }
.hn-opener-title { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); color: var(--hn-ink); }
.hn-opener-lede { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.375rem); line-height: 1.6; color: var(--hn-ink-soft); }
.hn-back { font-family: var(--hn-display); font-size: 1rem; letter-spacing: .05em; margin-bottom: 1.25rem; }
.hn-back a { text-decoration: none; color: var(--hn-gold-deep); }
.hn-back a::before { content: "\2190  "; }
.hn-back a:hover { color: var(--hn-hover); }
.hn-opener + .hn-cord { margin-bottom: 0; }

/* ----------------------------------------------------------------- about */

.hn-story-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .hn-story-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; align-items: center; } }

/* The church's own phone photographs. They are 600px wide, so a frame never
   lets one grow past about 28rem and blur; framed like the portrait. */
.hn-photo { margin: 0; width: 100%; max-width: 28rem; justify-self: center; }
.hn-photo img { display: block; width: 100%; height: auto; border: 1px solid var(--hn-gold-deep); padding: .5rem; background: var(--hn-frame); }
.hn-photo figcaption { margin-top: .75rem; font-size: 1rem; color: var(--hn-ink-soft); }

/* Our church today: three photographs, one row from a small tablet up. */
.hn-story + .hn-today { padding-top: 0; }
.hn-today-head { max-width: 40rem; }
.hn-today-lede { margin-top: 1rem; font-size: 1.125rem; line-height: 1.6; color: var(--hn-ink-soft); }
.hn-today-grid { display: grid; gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 560px) { .hn-today-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 900px) { .hn-today-grid { gap: 2.5rem; } }
.hn-today-grid .hn-photo { max-width: 24rem; }

/* Where we are going: the plans are small computer drawings (240 to 320px).
   Each sits on a mat at no more than its own size, so none is blown up into
   a blur, and the last tile says plainly where the church meets today. */
.hn-plans-head { max-width: 44rem; }
.hn-plans-lede { margin-top: 1rem; font-size: 1.125rem; line-height: 1.6; color: var(--hn-ink-soft); }
.hn-plans-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 520px) { .hn-plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hn-plans-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; } }
.hn-plan {
	margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
	padding: 1.25rem 1rem 1rem; background: var(--hn-frame); border: 1px solid var(--hn-line);
}
.hn-plan img { display: block; width: auto; height: auto; max-width: 100%; border: 1px solid var(--hn-line); margin-block: auto; }
.hn-plan figcaption { margin-top: 1rem; align-self: stretch; text-align: center; font-size: 1rem; color: var(--hn-ink-soft); }
/* Four plans, then this tile across the whole row: the plans close square at
   2 columns (2+2) and at 4 (one row), and the tile never stretches a small
   drawing's mat to the height of a photograph. It holds the photograph of
   the McFarland Ave building beside its words. */
.hn-plan-now {
	display: grid; gap: 1.5rem; align-items: center;
	padding: 1.5rem 1.5rem; border: 1px solid var(--hn-gold-deep); background: var(--hn-ground);
}
@media (min-width: 520px) {
	.hn-plan-now { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
}
@media (min-width: 1100px) {
	.hn-plan-now { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; padding: 1.75rem; }
}
.hn-now-photo { margin: 0; max-width: none; }
.hn-now-text { max-width: 34rem; }
.hn-plan-now h3 { font-size: 1.5rem; color: var(--hn-gold); }
.hn-now-text p { margin-top: .75rem; font-size: 1.0625rem; line-height: 1.6; color: var(--hn-ink); }
.hn-plan-now .hn-more { margin-top: 1.25rem; }
.hn-plans + .hn-hubs { padding-top: 0; }
.hn-story .hn-prose { margin-top: 1.5rem; }

/* A plate stands where a photograph will. Framed like the portrait, so the
   page reads as waiting for a picture, never as broken. */
.hn-plate { margin: 0; }
.hn-plate img { display: block; width: 100%; height: auto; border: 1px solid var(--hn-line); }
.hn-plate figcaption { margin-top: .75rem; font-size: 1rem; color: var(--hn-ink-soft); }

/* The mission statement, set on the page of the open Bible from the crest:
   the one light surface on the site, laid out as a two page spread. */
.hn-book { background: var(--hn-page); color: var(--hn-page-ink); }
.hn-book a { color: var(--hn-oxblood); }
.hn-book-head { text-align: center; padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid rgba(80, 12, 7, .35); }
.hn-book-head .hn-kicker { color: var(--hn-oxblood); margin-bottom: .75rem; }
.hn-book-head .hn-h2 { color: var(--hn-oxblood); }
.hn-book-slogan { margin-top: .85rem; color: var(--hn-oxblood); font-family: var(--hn-quote); font-style: italic; font-weight: 500; font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.9rem); line-height: 1.2; }
.hn-book-spread { display: grid; gap: 1.6rem; }
@media (min-width: 900px) {
	.hn-book-spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
	.hn-book-page:first-child { padding-right: 3.5rem; border-right: 1px solid rgba(80, 12, 7, .35); }
	.hn-book-page + .hn-book-page { padding-left: 3.5rem; }
}
.hn-book-page > * + * { margin-top: 1.05em; }
.hn-book-page p { font-size: 1.25rem; line-height: 1.7; }
.hn-book-first::first-letter {
	font-family: var(--hn-display); float: left; font-size: 4.3em; line-height: .82; padding: .06em .12em 0 0; color: var(--hn-oxblood);
}
.hn-book-close {
	margin: 3rem auto 0; max-width: 46rem; text-align: center; padding-top: 2.25rem; border-top: 1px solid rgba(80, 12, 7, .35);
	font-family: var(--hn-quote); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.25; color: var(--hn-oxblood);
}

/* Hub: short sections with "Read more" into the pages under About. */
/* Three hubs since the ministry application (2026-11-03): one column until
   three fit, so no width leaves a ragged row of two and one. */
.hn-hubs-grid { display: grid; gap: 0; border-top: 1px solid var(--hn-gold-deep); }
@media (min-width: 960px) { .hn-hubs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hn-hub { padding: 2.25rem 0; border-bottom: 1px solid var(--hn-line); }
.hn-hub:last-child { border-bottom: 0; }
@media (min-width: 960px) {
	.hn-hub { border-bottom: 0; padding: 2.75rem 2.75rem 0 0; }
	.hn-hub + .hn-hub { border-left: 1px solid var(--hn-line); padding: 2.75rem 2.75rem 0 2.75rem; }
	.hn-hub:last-child { padding-right: 0; }
}
.hn-hub h2 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
.hn-hub .hn-prose { margin-top: 1rem; color: var(--hn-ink-soft); }

/* The About credit line, added after the page content by floulex-credit.php. */
.fx-credit-about {
	width: min(100% - 2 * var(--hn-gutter), 78rem); margin: 0 auto; padding: 2.5rem 0 4.5rem;
	border-top: 1px solid var(--hn-line); color: var(--hn-ink-soft); font-size: 1rem;
}
.fx-credit-about a { color: var(--hn-gold); }

/* ---------------------------------------------------------- apostle page */

.hn-bio-grid { display: grid; gap: 3rem; }
@media (min-width: 960px) {
	.hn-bio-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 5rem; align-items: start; }
	.hn-bio-photo { position: sticky; top: calc(var(--hn-head-h) + 2rem); }
}
/* Years hung in the margin, the way a study Bible carries its references.
   Every year is taken from the paragraph beside it. */
.hn-bio-para { display: grid; gap: .35rem; }
.hn-bio-para + .hn-bio-para { margin-top: 2rem; }
@media (min-width: 640px) {
	.hn-bio-para { grid-template-columns: 6.75rem minmax(0, 1fr); gap: 1.75rem; }
}
.hn-yr { font-family: var(--hn-display); font-size: 1.375rem; color: var(--hn-gold); line-height: 1.3; padding-top: .1rem; }
@media (min-width: 640px) { .hn-yr { text-align: right; border-right: 1px solid var(--hn-line); padding-right: 1.25rem; } }
.hn-bio-para p { max-width: 40rem; }
.hn-amen {
	margin-top: 3rem; font-family: var(--hn-quote); font-style: italic; font-weight: 500;
	font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem); color: var(--hn-gold);
}
@media (min-width: 640px) { .hn-amen { padding-left: 8.5rem; } }
.hn-next { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--hn-line); }
@media (min-width: 640px) { .hn-next { margin-left: 8.5rem; } }

/* ------------------------------------------------------------ leadership */

.hn-lead { display: grid; gap: 1.75rem; align-items: center; padding-bottom: 3rem; border-bottom: 1px solid var(--hn-gold-deep); }
@media (min-width: 720px) { .hn-lead { grid-template-columns: 11rem minmax(0, 1fr); gap: 3rem; } }
.hn-lead .hn-portrait { max-width: 11rem; }
.hn-lead-role { font-family: var(--hn-display); color: var(--hn-gold-deep); letter-spacing: .14em; text-transform: uppercase; font-size: .875rem; }
.hn-lead-name { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); color: var(--hn-ink); margin-top: .5rem; }
.hn-lead .hn-more { margin-top: 1rem; }
.hn-roster { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 820px) { .hn-roster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5rem; } }
.hn-roster-item { padding: 2.25rem 0 2rem; border-bottom: 1px solid var(--hn-line); }
.hn-roster-name { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); color: var(--hn-ink); }
.hn-roster-role { margin-top: .6rem; font-family: var(--hn-display); color: var(--hn-gold); letter-spacing: .06em; font-size: 1.125rem; }
/* A photo sits beside the name; people without one keep the plain row. */
.hn-roster-item.has-photo { display: flex; align-items: center; gap: 1.5rem; }
.hn-roster-text { min-width: 0; }
.hn-roster-photo { flex: none; width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--hn-line); }
@media (max-width: 480px) { .hn-roster-photo { width: 5.5rem; height: 5.5rem; } .hn-roster-item.has-photo { gap: 1rem; } }
.hn-roster-past { margin-top: .5rem; }
.hn-past-title { margin-top: 4.5rem; font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); color: var(--hn-ink); }

/* ------------------------------------------------------------ ministries */

/* Ten ministries (2026-11-04), so two columns: the track count divides the item
   count at every width and no row is ever left ragged. Three columns would
   leave the tenth alone on the last row. Change this again if the count does. */
.hn-lattice {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: minmax(0, 1fr);
	gap: 1px; background: var(--hn-line); border: 1px solid var(--hn-line);
}
@media (min-width: 900px) { .hn-lattice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hn-lattice::before, .hn-lattice::after { content: none; }
.hn-lattice-item { background: var(--hn-ground); padding: 1.75rem 1.5rem 2rem; }
@media (min-width: 900px) { .hn-lattice-item { padding: 2.5rem 2.25rem 2.75rem; min-height: 14rem; } }
.hn-lattice-name { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); color: var(--hn-gold); }
.hn-lattice-what { margin-top: .85rem; color: var(--hn-ink); font-size: 1.125rem; }
.hn-lattice-when { margin-top: .5rem; color: var(--hn-ink-soft); font-size: 1rem; }
/* Ministry logos (2026-11-04). Low-resolution phone images, so they stay small:
   never wider on a 2x screen than the file is. The logo sits in the card's top
   right corner, so the name and its line start in the same place on every card,
   with a logo or without one. */
.hn-lattice-item.has-logo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: start; }
.hn-lattice-logo { display: block; width: 4.5rem; height: 4.5rem; object-fit: contain; background: #ffffff; border: 1px solid var(--hn-line); border-radius: .5rem; }
@media (min-width: 900px) { .hn-lattice-logo { width: 6rem; height: 6rem; } }
.hn-lattice-subrow { grid-column: 1 / -1; display: flex; align-items: center; gap: .85rem; margin-top: 0; }
.hn-lattice-sublogo { flex: none; width: 3.5rem; height: 3.5rem; object-fit: contain; background: #ffffff; border: 1px solid var(--hn-line); border-radius: 50%; }
.hn-min-foot { display: grid; gap: 2.5rem; margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 900px) { .hn-min-foot { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; align-items: center; } }

/* ----------------------------------------------------------------- visit */

.hn-board { display: grid; gap: 0; border-top: 1px solid var(--hn-gold-deep); }
@media (min-width: 900px) { .hn-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hn-board-day { padding: 2rem 0; border-bottom: 1px solid var(--hn-line); }
@media (min-width: 900px) {
	.hn-board-day { padding: 2.5rem 2.5rem 2.5rem 0; border-bottom: 0; }
	.hn-board-day + .hn-board-day { border-left: 1px solid var(--hn-line); padding-left: 2.5rem; }
}
.hn-board-name { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); color: var(--hn-gold); }
.hn-board-item { margin-top: 1.5rem; }
.hn-board-time { font-family: var(--hn-display); font-size: 1.375rem; color: var(--hn-ink); }
.hn-board-what { margin-top: .2rem; color: var(--hn-ink-soft); }
.hn-board-sub { white-space: nowrap; }
.hn-also { margin-top: 2rem; color: var(--hn-ink-soft); }

.hn-firsts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--hn-line); }
@media (min-width: 720px) { .hn-firsts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; } }
.hn-first { padding: 1.5rem 0; border-bottom: 1px solid var(--hn-line); }
.hn-first dt { font-family: var(--hn-display); color: var(--hn-gold); font-size: 1.25rem; }
.hn-first dd { margin: .35rem 0 0; color: var(--hn-ink); }

.hn-where-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .hn-where-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: start; } }
.hn-map { margin: 0; }
.hn-map-frame { aspect-ratio: 4 / 3; border: 1px solid var(--hn-gold-deep); background: var(--hn-frame); }
@media (min-width: 720px) { .hn-map-frame { aspect-ratio: 16 / 10; } }
.hn-map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.hn-map-cap { margin-top: .85rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; font-size: 1rem; color: var(--hn-ink-soft); }
.hn-where-photo { margin: 0; max-width: none; }
.hn-state-line { margin-top: 1.25rem; color: var(--hn-ink-soft); }

/* ------------------------------------------------------------------ give */

.hn-give-sec { background: var(--hn-oxblood); }
.hn-give-grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .hn-give-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; } }
@media (min-width: 900px) {
	.hn-give-path:first-child { padding-right: 4.5rem; }
	.hn-give-path + .hn-give-path { border-left: 1px solid rgba(218, 189, 97, .4); padding-left: 4.5rem; }
}
.hn-give-path h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); color: var(--hn-gold); }
.hn-give-path .hn-prose { margin-top: 1rem; color: var(--hn-ink); }
.hn-give-sec .hn-btn { background: var(--hn-flame); }
.hn-give-sec .hn-btn:hover { background: var(--c-gold); }
/* A QR code only scans as dark on light with a quiet zone round it. */
.hn-qr { margin: 1.5rem 0 0; width: min(100%, 17rem); background: #ffffff; padding: 1rem; }
.hn-qr img { display: block; width: 100%; height: auto; }
.hn-qr figcaption { margin-top: .6rem; color: #1c0a05; font-size: .9375rem; text-align: center; }
.hn-give-note { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(218, 189, 97, .4); color: var(--hn-ink); font-size: 1.0625rem; max-width: 30rem; }

/* --------------------------------------------------------------- contact */

.hn-contact-grid { display: grid; gap: 3rem; }
@media (min-width: 960px) { .hn-contact-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 5rem; align-items: center; } }
.hn-contact-rows { margin: 0; border-top: 1px solid var(--hn-gold-deep); }
.hn-contact-row { display: grid; gap: .35rem; padding: 1.75rem 0; border-bottom: 1px solid var(--hn-line); }
@media (min-width: 720px) { .hn-contact-row { grid-template-columns: 9rem minmax(0, 1fr); gap: 2rem; align-items: baseline; } }
.hn-contact-label { font-family: var(--hn-display); color: var(--hn-gold-deep); letter-spacing: .14em; text-transform: uppercase; font-size: .875rem; }
.hn-contact-value { margin: 0; }
.hn-contact-big { font-family: var(--hn-display); font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem); line-height: 1.2; color: var(--hn-ink); text-decoration: none; overflow-wrap: anywhere; }
.hn-contact-big:hover { color: var(--hn-gold); }
.hn-contact-mail { font-size: clamp(1.25rem, .95rem + 1.4vw, 2.1rem); }
.hn-contact-note { display: block; margin-top: .5rem; font-size: 1rem; color: var(--hn-ink-soft); }
.hn-contact-crest { margin: 0 auto; max-width: 22rem; background: var(--c-black); padding: 1.75rem 1.25rem; border: 1px solid var(--c-gold-deep); }
/* On a phone the footer's crest follows straight after; one is enough. */
@media (max-width: 959px) { .hn-contact-crest { display: none; } }
.hn-contact-crest .hn-crest-img {
	display: block; width: 100%; height: auto;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}

/* ------------------------------------------------------------------ post */

.hn-post { display: block; }
.hn-post-head { padding-bottom: 2.5rem; }
.hn-post-titles { max-width: 48rem; }
.hn-post-titles .hn-opener-title { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.9rem); }
.hn-post-meta { margin-top: 1.25rem; color: var(--hn-ink-soft); font-size: 1rem; }
.hn-post-body { margin-inline: 0; padding-bottom: clamp(4rem, 8vw, 6rem); max-width: 44rem; }
.hn-post-body h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.15rem); margin-top: 2.6rem; }
.hn-post-body p, .hn-post-body li { color: var(--hn-ink); }
.hn-post-body > .hn-post-byline { font-style: italic; color: var(--hn-ink-soft); }
.hn-post-body ul { padding-left: 1.25rem; }
.hn-post-body li + li { margin-top: .4rem; }
.hn-post-body li::marker { color: var(--hn-gold); }
.hn-post-body .wp-block-image { margin: 2.25rem 0; }
.hn-post-body .wp-block-image img { display: block; border: 1px solid var(--hn-line); }
.hn-post-body .wp-block-image figcaption { margin-top: .7rem; font-size: 1rem; color: var(--hn-ink-soft); }
.hn-post-body .hn-post-crest img { width: 100%; max-width: min(100%, 24rem); border: 0; }
.hn-post-body .hn-post-portrait img { width: 100%; max-width: min(100%, 22rem); padding: .5rem; border-color: var(--hn-gold-deep); background: var(--hn-frame); }
.hn-list > li { list-style: none; padding: 2rem 0; border-bottom: 1px solid var(--hn-line); }
.hn-list { padding: 0; margin: 0; }

/* ------------------------------------------------------------------- 404 */

.hn-lost { padding-block: clamp(4rem, 9vw, 8rem); }
.hn-lost-in { max-width: 44rem; }
.hn-lost .hn-opener-lede { margin-top: 1.5rem; }
.hn-lost-links { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem 2rem; font-family: var(--hn-display); font-size: 1.25rem; }

/* --------------------------------------------- section hooks used by pages */

.hn-week { background: var(--c-parchment); }
.hn-story { padding-top: clamp(3rem, 6vw, 5rem); }
.hn-hubs { padding-bottom: clamp(3rem, 6vw, 5rem); }
.hn-bio { padding-top: clamp(3rem, 6vw, 5rem); }
.hn-bio-text { min-width: 0; }
.hn-bio-h { margin-bottom: 2.25rem; }
@media (min-width: 640px) { .hn-bio-h { padding-left: 8.5rem; } }
.hn-visit-h { margin-bottom: 2rem; }

/* ---------------------------------------------------------------- footer */

.hn-foot { padding-bottom: 2rem; background: var(--c-parchment); }
.hn-foot .hn-cord { margin-bottom: clamp(3rem, 6vw, 5rem); }
.hn-foot-grid { display: grid; gap: 2.5rem; }
.hn-foot-mark { min-width: 0; }
@media (min-width: 900px) { .hn-foot-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); gap: 4rem; } }
.hn-foot-crest {
	/* A black medallion, so the crest's own black field has somewhere to sit. */
	display: block; width: 9rem; height: auto; box-sizing: border-box;
	background: var(--c-black); padding: .9rem .7rem; border: 1px solid var(--c-gold-deep);
}
@media (min-width: 640px) { .hn-foot-crest { width: 11rem; } }
.hn-foot-name { margin-top: 1.25rem; font-family: var(--hn-display); font-size: 1.375rem; color: var(--hn-ink); line-height: 1.3; max-width: 22rem; }
.hn-foot-slogan { margin-top: .5rem; font-family: var(--hn-quote); font-style: italic; font-weight: 500; font-size: 1.375rem; color: var(--hn-gold); }
.hn-foot-h { font-size: .875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hn-gold-deep); margin-bottom: 1rem; }
.hn-foot-col p { color: var(--hn-ink); font-size: 1.0625rem; }
.hn-foot-col p + p { margin-top: .9rem; }
.hn-foot-col a { color: var(--hn-ink); overflow-wrap: anywhere; }
.hn-foot-col a:hover { color: var(--hn-gold); }
.hn-foot-links { list-style: none; margin: 0; padding: 0; }
.hn-foot-links li + li { margin-top: .35rem; }
.hn-foot-links a { text-decoration: none; font-size: 1.0625rem; }
.hn-foot-links a[aria-current="page"] { color: var(--hn-gold); }
.hn-foot-base {
	margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hn-line);
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem;
	font-size: .9375rem; color: var(--hn-ink-soft);
}
.fx-credit { margin: 0; color: var(--hn-ink-soft); }
.fx-credit a { color: var(--hn-ink-soft); }
.fx-credit a:hover { color: var(--hn-gold); }

/* ------------------------------------------------ the glowing Give button */

/* Apostle May, 2026-11-03: "highlight the donation button on the front page
   illuminating". A soft light round the flame button that breathes like the
   torch in the crest. The light is a pseudo element whose opacity moves, so
   nothing is repainted per frame. Under reduced motion the global rule below
   stops the animation and the button simply stays lit. Home only. */
.hn-btn-glow { position: relative; isolation: isolate; font-size: 1.1875rem; padding: 1.1rem 2.1rem; }
.hn-btn-glow::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	box-shadow: 0 0 0 2px rgba(227, 147, 55, .7), 0 0 22px 6px rgba(227, 147, 55, .7), 0 0 56px 18px rgba(218, 189, 97, .5);
	opacity: .85; animation: hn-lit 2.4s ease-in-out infinite alternate;
}
.hn-give-cta.is-glow { margin-top: 2rem; padding: .5rem 0; }
@keyframes hn-lit {
	from { opacity: .5; }
	to   { opacity: 1; }
}
/* The bar's Give on Home gets the same light, quieter and still. */
body.home .hn-nav > a.hn-give { box-shadow: 0 0 16px 2px rgba(227, 147, 55, .45); }

/* ------------------------------------------------ home: become a member */

.hn-join { background: var(--c-parchment); }
.hn-join + .hn-duo { border-top: 0; }
.hn-join-grid { display: grid; gap: 1.75rem; }
@media (min-width: 900px) { .hn-join-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; align-items: center; } }
.hn-join .hn-h2 { max-width: 18ch; }
.hn-join-text { margin-top: 1.25rem; max-width: 40rem; color: var(--hn-ink-soft); }
.hn-join-go { margin: 0; }

/* ------------------------------------------- about: our ministry culture */

/* The ten values in the church's own words and order, as text, beside the
   flyer they came from. Nothing is added to explain them. */
.hn-culture + .hn-plans { border-top: 1px solid var(--hn-line); }
.hn-culture-grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .hn-culture-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; align-items: center; } }
.hn-values {
	list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr);
	column-gap: 2.5rem; border-top: 1px solid var(--hn-gold-deep);
}
@media (min-width: 440px) { .hn-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hn-values li {
	font-family: var(--hn-display); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); line-height: 1.25;
	color: var(--hn-ink); padding: .8rem 0; border-bottom: 1px solid var(--hn-line); overflow-wrap: anywhere;
}
.hn-belong {
	margin-top: 2rem; font-family: var(--hn-quote); font-style: italic; font-weight: 500;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.25; color: var(--hn-gold);
}
.hn-flyer { max-width: 27rem; }

/* ---------------------------------------------------- ministry application */

.hn-apply { padding-top: clamp(3rem, 6vw, 5rem); }
.hn-apply-grid { display: grid; gap: 3rem; }
@media (min-width: 960px) { .hn-apply-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 5rem; align-items: start; } }
.hn-form { max-width: 40rem; min-width: 0; }
.hn-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.hn-form fieldset.hn-field { margin-bottom: 1.6rem; }
.hn-field { margin: 0 0 1.6rem; min-width: 0; }
.hn-field > label, .hn-field > legend {
	display: block; padding: 0; margin-bottom: .45rem;
	font-family: var(--hn-display); font-size: 1.125rem; letter-spacing: .03em; color: var(--hn-ink);
}
.hn-req, .hn-opt { font-family: var(--hn-body); font-size: .9375rem; letter-spacing: 0; color: var(--hn-ink-soft); }
.hn-form input[type="text"], .hn-form input[type="email"], .hn-form input[type="tel"], .hn-form textarea {
	display: block; width: 100%; font: inherit; font-size: 1.0625rem; line-height: 1.5; color: var(--hn-ink);
	background: #ffffff; border: 1px solid var(--c-bronze); border-radius: 0; padding: .8rem .9rem;
}
.hn-form textarea { min-height: 8rem; resize: vertical; }
.hn-form input:focus-visible, .hn-form textarea:focus-visible { outline: 2px solid var(--hn-flame); outline-offset: 2px; border-color: var(--hn-oxblood); }
.hn-apply-form { scroll-margin-top: calc(var(--hn-head-h) + 1.5rem); }
.hn-pair > legend { margin-bottom: .6rem; }
.hn-choice > legend { margin-bottom: .2rem; }
.hn-pair-grid { display: grid; gap: 1rem 1.25rem; }
@media (min-width: 640px) { .hn-pair-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hn-pair-grid .hn-field { margin: 0; }
.hn-pair-grid .hn-field > label { font-family: var(--hn-body); font-size: 1rem; letter-spacing: 0; color: var(--hn-ink-soft); margin-bottom: .3rem; }
.hn-field .hn-radio {
	display: flex; align-items: center; gap: .8rem; margin-top: .6rem; padding: .85rem 1rem; cursor: pointer;
	background: #ffffff; border: 1px solid var(--hn-line); font-size: 1.0625rem; color: var(--hn-ink);
}
.hn-radio input { flex: none; width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--hn-oxblood); }
.hn-radio:has(input:checked) { border-color: var(--hn-oxblood); box-shadow: inset 3px 0 0 var(--hn-flame); }
.hn-radio:has(input:focus-visible) { outline: 2px solid var(--hn-flame); outline-offset: 2px; }
.hn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hn-form-error { margin: 0 0 1.75rem; padding: .9rem 1.1rem; border-left: 3px solid var(--hn-oxblood); background: #f6e4dc; color: var(--hn-ink); }
.hn-form-send { margin-top: 2rem; }
.hn-form button.hn-btn { cursor: pointer; }
.hn-form-note { margin-top: 1rem; font-size: .9375rem; color: var(--hn-ink-soft); }
.hn-apply-done { max-width: 40rem; padding-top: 2rem; border-top: 2px solid var(--hn-gold-deep); }
.hn-apply-done-h { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); }
.hn-apply-done p { margin-top: 1rem; }
.hn-apply-done a { overflow-wrap: anywhere; }
.hn-apply-aside { background: var(--c-parchment); padding: 2rem 1.75rem; border-top: 2px solid var(--hn-gold-deep); min-width: 0; }
.hn-apply-aside-h { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.hn-apply-ways h3 { margin-top: 1.5rem; font-size: 1.375rem; color: var(--hn-gold); }
.hn-apply-ways p { margin-top: .4rem; font-size: 1.0625rem; color: var(--hn-ink); }
.hn-apply-talk { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--hn-line); font-size: 1rem; color: var(--hn-ink-soft); }
.hn-apply-talk a { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- reveal */

/* One reveal, once per element. Hidden only when script has said it will
   reveal it, and a failsafe in site.js shows everything regardless. */
.js .hn-rev { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.js .hn-rev.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.js .hn-rev { opacity: 1; transform: none; }
	.hn-glow { opacity: .55; transform: translate(-50%, -50%); }
}