/*
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).
   page      #f2e7c6  a tint of the open Bible's page (#dbc372). The one light
                      surface on the site, used for the mission statement.

   Measured pairs: ink on black 16.9, gold on black 11.4, flame on black 8.5,
   black on flame 8.5, gold on oxblood 8.2, ink on purple 15.3, oxblood on
   page 12.1, page-ink on page 15.7.
   ========================================================================== */

/* 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 {
	--hn-ground: #000000;
	--hn-ink: #f2e7c6;
	--hn-ink-soft: #c9bc98;
	--hn-gold: #dabd61;
	--hn-gold-deep: #bf9540;
	--hn-flame: #e39337;
	--hn-oxblood: #500c07;
	--hn-purple: #230738;
	--hn-page: #f2e7c6;
	--hn-page-ink: #1c0a05;
	--hn-line: #3f3016;
	--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; }
}

/* ------------------------------------------------------------------ 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-flame); }
: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(--hn-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-flame); }
.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(--hn-gold); color: #000; }
.hn-nav > a.hn-give[aria-current="page"] { background: var(--hn-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-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: #0b0605; }
.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-flame); }
.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; } }
.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. */
.hn-hubs-grid { display: grid; gap: 0; border-top: 1px solid var(--hn-gold-deep); }
@media (min-width: 820px) { .hn-hubs-grid { grid-template-columns: minmax(0, 1fr) 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: 820px) {
	.hn-hub { border-bottom: 0; padding: 2.75rem 3.5rem 0 0; }
	.hn-hub + .hn-hub { border-left: 1px solid var(--hn-line); padding: 2.75rem 0 0 3.5rem; }
}
.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; }

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

/* Nine ministries, three by three: the track count divides the item count at
   every width, so no row is ever left ragged. */
.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(3, 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; }
.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: #0b0605; }
@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-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(--hn-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; }
/* 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: #0b0605; }
.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 { border-top: 1px solid var(--hn-line); }
.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; }
.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 {
	display: block; width: 8.75rem; 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%);
}
@media (min-width: 640px) { .hn-foot-crest { width: 11.25rem; } }
.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); }

/* ---------------------------------------------------------------- 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%); }
}