/* ==========================================================================
   Journey of Hope — journey.css
   Design system: warm paper, olive ink, gold light, a winding path.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	--joh-paper: #FBF7EC;
	--joh-paper-tint: #F4EEDB;
	--joh-leaf-mist: #EFF4DD;
	--joh-leaf: #ABCE2E;
	--joh-leaf-deep: #7E9C1C;
	--joh-ink: #333D1E;
	--joh-ink-soft: #4A5430;
	--joh-olive-900: #2A3316;
	--joh-olive-800: #39471C;
	--joh-olive-deep: #262F11;
	--joh-gold: #C9A63A;
	--joh-gold-bright: #E7C766;
	--joh-gold-deep: #8F7222;
	--joh-rose: #C85B54;
	--joh-rose-deep: #A8443E;
	--joh-blue: #2D5282;
	--joh-white: #FFFFFF;

	--joh-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--joh-font-body: "Nunito Sans", -apple-system, "Segoe UI", sans-serif;
	--joh-font-script: "Caveat", "Segoe Script", cursive;

	--joh-radius: 14px;
	--joh-radius-pill: 8px;
	--joh-shadow-soft: 0 18px 44px -18px rgba(42, 51, 22, 0.22);
	--joh-section-pad: clamp(4rem, 8vw, 7rem);

	--joh-header-h: 78px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

body.joh {
	background: var(--joh-paper);
	color: var(--joh-ink);
	font-family: var(--joh-font-body);
	font-size: 1.0625rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

body.joh p,
body.joh li {
	max-width: 68ch;
}

body.joh img {
	max-width: 100%;
	height: auto;
}

/* Skip link */
.joh-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--joh-olive-800);
	color: var(--joh-white);
	padding: 0.8rem 1.4rem;
	border-radius: 0 0 12px 0;
	font-weight: 600;
}
.joh-skip-link:focus {
	left: 0;
}

/* Focus */
body.joh a:focus-visible,
body.joh button:focus-visible,
body.joh input:focus-visible,
body.joh select:focus-visible,
body.joh textarea:focus-visible,
body.joh [tabindex]:focus-visible {
	outline: 3px solid var(--joh-gold-deep);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Links inherit the slate-blue "voice" set in theme.json */
body.joh a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

::selection {
	background: var(--joh-leaf);
	color: var(--joh-olive-900);
}

/* Main region spacing */
.joh-main {
	min-height: 55vh;
}

/* Entry content rhythm */
.entry-content > * + * {
	margin-top: 1.15em;
}
.entry-content h2,
.entry-content h3 {
	margin-top: 1.9em;
}
.entry-content h2 + p,
.entry-content h3 + p {
	margin-top: 0.6em;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.joh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 48px;
	padding: 0.85rem 1.7rem;
	border-radius: var(--joh-radius-pill);
	font-family: var(--joh-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.joh-btn:active {
	transform: translateY(1px);
}

.joh-btn-solid {
	background: var(--joh-olive-800);
	color: var(--joh-white);
}
.joh-btn-solid:hover {
	background: var(--joh-olive-900);
	color: var(--joh-white);
	box-shadow: var(--joh-shadow-soft);
}

.joh-btn-gold {
	background: var(--joh-gold);
	color: var(--joh-olive-900);
}
.joh-btn-gold:hover {
	background: var(--joh-gold-bright);
	color: var(--joh-olive-900);
	box-shadow: var(--joh-shadow-soft);
}

.joh-btn-outline {
	background: transparent;
	color: var(--joh-olive-800);
	border-color: var(--joh-olive-800);
}
.joh-btn-outline:hover {
	background: var(--joh-olive-800);
	color: var(--joh-white);
}

.joh-btn-outline-light {
	background: transparent;
	color: var(--joh-paper);
	border-color: rgba(251, 247, 236, 0.55);
}
.joh-btn-outline-light:hover {
	background: rgba(251, 247, 236, 0.12);
	color: var(--joh-paper);
	border-color: var(--joh-paper);
}

.joh-btn-exit {
	background: transparent;
	color: var(--joh-rose-deep);
	border-color: var(--joh-rose);
	font-weight: 700;
}
.joh-btn-exit:hover {
	background: var(--joh-rose-deep);
	border-color: var(--joh-rose-deep);
	color: var(--joh-white);
}

.joh-exit-icon {
	width: 14px;
	height: 14px;
	border: 2.2px solid currentColor;
	border-radius: 50%;
	position: relative;
	flex: 0 0 auto;
}
.joh-exit-icon::after {
	content: "";
	position: absolute;
	inset: 3.2px;
	background: currentColor;
	border-radius: 50%;
}

.joh-btn-block {
	width: 100%;
}

.joh-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	align-items: center;
}

/* Text link — plain, warm */
.joh-textlink {
	font-weight: 600;
	color: var(--joh-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--joh-gold);
	text-decoration-thickness: 2px;
}
.joh-textlink:hover {
	color: var(--joh-olive-800);
}

/* --------------------------------------------------------------------------
   4. Announcement bar
   -------------------------------------------------------------------------- */
.joh-announce {
	background: var(--joh-olive-800);
	color: var(--joh-paper);
	font-size: 0.8rem;
	line-height: 1.5;
}
.joh-announce-inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0.55rem 1.25rem;
	text-align: center;
}
.joh-announce p {
	margin: 0;
	max-width: none;
}
.joh-announce a {
	color: var(--joh-gold-bright);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.joh-announce a:hover {
	color: var(--joh-white);
}
.joh-announce-911 {
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.joh-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: rgba(251, 247, 236, 0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(51, 61, 30, 0.1);
	transition: box-shadow 0.25s ease;
}
.joh-header.is-scrolled {
	box-shadow: 0 10px 30px -18px rgba(42, 51, 22, 0.35);
}
.joh-header-inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0.65rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--joh-header-h);
}

.joh-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	flex: 0 0 auto;
}
.joh-brand-emblem {
	display: block;
	border-radius: 50%;
}
.joh-brand-word {
	font-family: var(--joh-font-display);
	font-weight: 600;
	font-size: 1.32rem;
	line-height: 1.05;
	color: var(--joh-olive-900);
	letter-spacing: -0.01em;
}

.joh-nav {
	display: none;
	margin-left: auto;
}
.joh-nav-list {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.joh-nav-list a {
	display: inline-block;
	padding: 0.55rem 0.4rem;
	color: var(--joh-ink);
	font-weight: 600;
	font-size: 0.98rem;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.joh-nav-list a:hover,
.joh-nav-list a.is-active {
	color: var(--joh-olive-900);
	border-bottom-color: var(--joh-gold);
}

.joh-actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
}
.joh-nav + .joh-actions {
	margin-left: 0;
}
.joh-actions .joh-btn {
	padding: 0.62rem 1.15rem;
	min-height: 44px;
	font-size: 0.93rem;
}
.joh-actions .joh-btn-exit {
	padding: 0.42rem 0.85rem;
	min-height: 40px;
	font-size: 0.85rem;
	border-width: 1.5px;
}

/* Hamburger */
.joh-nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 10px;
	background: transparent;
	border: 2px solid rgba(51, 61, 30, 0.25);
	border-radius: 12px;
	cursor: pointer;
}
.joh-nav-toggle-bar {
	display: block;
	height: 2.4px;
	width: 100%;
	background: var(--joh-olive-900);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.joh-nav-toggle[aria-expanded="true"] .joh-nav-toggle-bar:nth-child(1) {
	transform: translateY(7.4px) rotate(45deg);
}
.joh-nav-toggle[aria-expanded="true"] .joh-nav-toggle-bar:nth-child(2) {
	opacity: 0;
}
.joh-nav-toggle[aria-expanded="true"] .joh-nav-toggle-bar:nth-child(3) {
	transform: translateY(-7.4px) rotate(-45deg);
}

/* Mobile nav panel */
.joh-mobile-nav {
	border-top: 1px solid rgba(51, 61, 30, 0.1);
	background: var(--joh-paper);
	padding: 1rem 1.25rem 1.6rem;
}
.joh-mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.joh-mobile-nav nav a {
	display: block;
	padding: 0.85rem 0.4rem;
	font-size: 1.12rem;
	font-weight: 600;
	color: var(--joh-ink);
	text-decoration: none;
	border-bottom: 1px solid rgba(51, 61, 30, 0.08);
}
.joh-mobile-nav nav a:hover {
	color: var(--joh-olive-900);
}
.joh-mobile-ctas {
	display: grid;
	gap: 0.7rem;
	margin-top: 1.2rem;
}

@media (min-width: 1080px) {
	.joh-nav {
		display: block;
	}
	.joh-nav-toggle,
	.joh-mobile-nav {
		display: none;
	}
	.joh-actions .joh-btn {
		min-height: 48px;
	}
}
@media (max-width: 620px) {
	.joh-actions .joh-btn-gold,
	.joh-actions .joh-btn-solid {
		display: none;
	}
	.joh-actions {
		margin-left: auto;
	}
}

/* Compact safety header on small phones: brand shrinks, Quick Exit stays. */
@media (max-width: 540px) {
	.joh-header-inner {
		gap: 0.6rem;
		padding: 0.55rem 1rem;
	}
	.joh-brand {
		gap: 0.5rem;
	}
	.joh-brand-emblem {
		width: 38px;
		height: 38px;
	}
	.joh-brand-word {
		font-size: 1.04rem;
	}
	.joh-actions {
		gap: 0.45rem;
	}
	.joh-actions .joh-btn-exit {
		font-size: 0.85rem;
		padding: 0.5rem 0.9rem;
		min-height: 40px;
	}
	.joh-nav-toggle {
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}
}

/* --------------------------------------------------------------------------
   6. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.joh-page-hero {
	background: var(--joh-leaf-mist);
	padding: clamp(3rem, 6vw, 5rem) 1.25rem clamp(3.5rem, 6vw, 5.5rem);
	text-align: center;
}
.joh-page-hero h1 {
	color: var(--joh-olive-900);
	margin: 0 auto;
	max-width: 18ch;
}
.joh-page-hero > p,
.joh-page-hero .wp-block-paragraph {
	max-width: 60ch;
	margin: 1.1rem auto 0;
	font-size: 1.15rem;
	color: var(--joh-ink-soft);
}
.joh-page-hero .joh-btn-row {
	justify-content: center;
	margin-top: 1.8rem;
}

/* --------------------------------------------------------------------------
   7. Sections
   -------------------------------------------------------------------------- */
.joh-section {
	padding: var(--joh-section-pad) 1.25rem;
}
.joh-section.alignfull {
	padding-left: max(1.25rem, calc((100% - 1160px) / 2));
	padding-right: max(1.25rem, calc((100% - 1160px) / 2));
}
.joh-section-title {
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
	color: var(--joh-olive-900);
	margin: 0 0 0.6rem;
	max-width: 22ch;
}
.joh-lede {
	font-size: 1.17rem;
	color: var(--joh-ink-soft);
	max-width: 58ch;
}
.joh-script {
	font-family: var(--joh-font-script);
	font-weight: 600;
	font-size: 1.55rem;
	line-height: 1.25;
	color: var(--joh-gold-deep);
}
.joh-script-light {
	color: var(--joh-gold-bright);
}

.joh-on-paper { background: var(--joh-paper); }
.joh-on-tint { background: var(--joh-paper-tint); }
.joh-on-mist { background: var(--joh-leaf-mist); }

/* Dark bands */
.joh-band {
	background: var(--joh-olive-800);
	color: var(--joh-paper);
	position: relative;
	overflow: hidden;
}
.joh-band .joh-section-title {
	color: var(--joh-paper);
}
.joh-band p,
.joh-band li {
	color: rgba(251, 247, 236, 0.88);
}
.joh-band-deep {
	background: var(--joh-olive-deep);
}
.joh-band a:not(.joh-btn) {
	color: var(--joh-gold-bright);
}
.joh-sun-glow {
	position: absolute;
	width: min(58vw, 720px);
	height: min(58vw, 720px);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(231, 199, 102, 0.34) 0%, rgba(231, 199, 102, 0.12) 42%, rgba(231, 199, 102, 0) 68%);
	top: min(-22vw, -260px);
	right: min(-14vw, -180px);
	pointer-events: none;
}
.joh-band .joh-sun-glow {
	top: auto;
	bottom: -30%;
	right: -10%;
}

/* Hill curve decorations */
.joh-hills {
	display: block;
	width: 100%;
	height: auto;
	line-height: 0;
}
.joh-hills svg {
	display: block;
	width: 100%;
	height: auto;
}
.joh-hills-flip svg {
	transform: scaleY(-1);
}

/* --------------------------------------------------------------------------
   8. Home hero
   -------------------------------------------------------------------------- */
.joh-hero {
	position: relative;
	background:
		radial-gradient(1100px 520px at 78% -12%, rgba(231, 199, 102, 0.4) 0%, rgba(231, 199, 102, 0) 62%),
		var(--joh-paper);
	overflow: hidden;
}
.joh-hero-inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6.5rem) 1.25rem clamp(2rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: end;
}
.joh-hero-copy h1 {
	color: var(--joh-olive-900);
	margin: 0;
	max-width: 13ch;
}
.joh-hero-copy .joh-hero-sub {
	margin-top: 1.4rem;
	font-size: 1.16rem;
	color: var(--joh-ink-soft);
	max-width: 52ch;
}
.joh-hero-copy .joh-hero-note {
	margin-top: 1.5rem;
}
.joh-hero-cta {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}
.joh-hero-cta .joh-btn-solid {
	box-shadow: var(--joh-shadow-soft);
}
.joh-hero-art {
	position: relative;
}
.joh-hero-art .joh-hero-emblem {
	display: none;
}
.joh-hero-stage {
	margin: 0 calc(-1 * clamp(1.25rem, 4vw, 4rem)) 0 0;
}
.joh-hero-stage svg {
	display: block;
	width: 100%;
	height: auto;
}
.joh-hero path.joh-path-draw {
	stroke-dasharray: 8 10;
}
.joh-hero .joh-sun-core {
	animation: joh-sun-pulse 7s ease-in-out infinite;
	transform-origin: center;
}
@keyframes joh-sun-pulse {
	0%, 100% { opacity: 0.85; }
	50% { opacity: 1; }
}

@media (max-width: 900px) {
	.joh-hero-inner {
		grid-template-columns: 1fr;
		align-items: start;
	}
	.joh-hero-stage {
		margin-top: 1rem;
	}
}
@media (max-width: 620px) {
	.joh-hero-copy h1 {
		font-size: clamp(2.35rem, 11vw, 3rem);
	}
}

/* --------------------------------------------------------------------------
   9. Path list composition (how we help, values)
   -------------------------------------------------------------------------- */
.joh-path-wrap {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: start;
}
.joh-path-intro {
	position: sticky;
	top: calc(var(--joh-header-h) + 2rem);
}
.joh-path-intro .joh-script {
	margin-top: 1.4rem;
	display: block;
}
.joh-path {
	list-style: none;
	margin: 0;
	padding: 0 0 3.2rem 0;
	position: relative;
}
.joh-path::before {
	content: "";
	position: absolute;
	left: 27px;
	top: 30px;
	bottom: 44px;
	width: 0;
	border-left: 3px dashed var(--joh-leaf-deep);
	opacity: 0.55;
}
.joh-path li {
	position: relative;
	padding-left: 76px;
	margin-bottom: 2.35rem;
	max-width: none;
}
.joh-path li:last-child {
	margin-bottom: 0;
}
.joh-path-icon {
	position: absolute;
	left: 0;
	top: -4px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--joh-paper);
	border: 3px solid var(--joh-leaf-deep);
	display: grid;
	place-items: center;
	color: var(--joh-olive-800);
}
.joh-path-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}
.joh-path li.is-final .joh-path-icon {
	border-color: var(--joh-gold);
	background: var(--joh-gold-bright);
}
.joh-path h3 {
	margin: 0.35rem 0 0.35rem;
	color: var(--joh-olive-900);
	font-size: 1.28rem;
}
.joh-path p {
	margin: 0;
	color: var(--joh-ink-soft);
	font-size: 1.01rem;
}
@media (max-width: 880px) {
	.joh-path-wrap {
		grid-template-columns: 1fr;
	}
	.joh-path-intro {
		position: static;
	}
}

/* --------------------------------------------------------------------------
   10. Editorial split + features
   -------------------------------------------------------------------------- */
.joh-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.joh-split > div > h2:first-child,
.joh-split > div > h3:first-child {
	margin-top: 0;
}
.joh-rule-col {
	column-gap: clamp(2.5rem, 5vw, 4.5rem);
}
.joh-rule-col > div + div {
	position: relative;
}
@media (min-width: 700px) {
	.joh-rule-col > div + div::before {
		content: "";
		position: absolute;
		left: calc(-1 * clamp(1.25rem, 2.5vw, 2.25rem));
		top: 6px;
		bottom: 6px;
		border-left: 1px solid rgba(127, 156, 28, 0.4);
	}
}

.joh-feature-rows {
	display: grid;
	gap: clamp(1.6rem, 3.5vw, 2.6rem);
}
.joh-feature-row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 1.4rem;
	padding: clamp(1.4rem, 2.5vw, 2rem);
	background: var(--joh-white);
	border: 1px solid rgba(127, 156, 28, 0.22);
	border-radius: var(--joh-radius);
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.joh-feature-row:hover {
	border-color: var(--joh-leaf-deep);
	transform: translateY(-2px);
}
.joh-feature-row h3 {
	margin: 0.15rem 0 0.5rem;
	color: var(--joh-olive-900);
}
.joh-feature-row p {
	margin: 0;
	color: var(--joh-ink-soft);
}
.joh-feature-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--joh-leaf-mist);
	display: grid;
	place-items: center;
	color: var(--joh-olive-800);
}
.joh-feature-icon svg {
	width: 28px;
	height: 28px;
}
@media (max-width: 560px) {
	.joh-feature-row {
		grid-template-columns: 1fr;
	}
}

/* Pull quote */
.joh-quote {
	position: relative;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.2rem) 0 0 0;
	font-family: var(--joh-font-display);
	font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.45;
	color: var(--joh-olive-900);
	max-width: 30ch;
}
.joh-quote::before {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	border-radius: 2px;
	background: var(--joh-gold);
	margin-bottom: 1.3rem;
}
.joh-quote-cite {
	display: block;
	margin-top: 1.2rem;
	font-family: var(--joh-font-body);
	font-style: normal;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--joh-ink-soft);
}

/* Note / callout */
.joh-note {
	background: var(--joh-leaf-mist);
	border-left: 5px solid var(--joh-gold);
	border-radius: 14px;
	padding: 1.4rem 1.6rem;
	max-width: 720px;
}
.joh-note p {
	margin: 0;
	max-width: none;
}
.joh-note strong {
	color: var(--joh-olive-900);
}
.joh-note-safety {
	background: rgba(200, 91, 84, 0.08);
	border-left-color: var(--joh-rose-deep);
}

/* Check list */
.joh-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.8rem;
	max-width: none;
}
.joh-check-list li {
	position: relative;
	padding-left: 2.1rem;
	max-width: 62ch;
}
.joh-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2.5px solid var(--joh-leaf-deep);
	background:
		radial-gradient(circle at 50% 55%, var(--joh-leaf) 0 3px, transparent 3.5px);
}

/* --------------------------------------------------------------------------
   11. Hotlines (Get Help / Resources)
   -------------------------------------------------------------------------- */
.joh-hotlines {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}
.joh-hotlines li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.4rem 2rem;
	align-items: center;
	padding: 1.4rem 0.4rem;
	border-bottom: 1px solid rgba(51, 61, 30, 0.12);
	max-width: none;
}
.joh-hotlines li:first-child {
	border-top: 1px solid rgba(51, 61, 30, 0.12);
}
.joh-hotline-name {
	font-family: var(--joh-font-display);
	font-weight: 600;
	font-size: 1.22rem;
	color: var(--joh-olive-900);
	margin: 0;
}
.joh-hotline-desc {
	margin: 0.25rem 0 0;
	color: var(--joh-ink-soft);
	font-size: 0.98rem;
	max-width: 46ch;
}
.joh-hotline-num {
	font-family: var(--joh-font-display);
	font-weight: 600;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
	color: var(--joh-blue);
	white-space: nowrap;
	text-decoration: none;
	border-bottom: 2px solid rgba(45, 82, 130, 0.25);
	transition: border-color 0.15s ease, color 0.15s ease;
}
.joh-hotline-num:hover {
	color: var(--joh-olive-800);
	border-color: var(--joh-gold);
}
.joh-hotline-meta {
	grid-column: 1 / -1;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--joh-gold-deep);
	letter-spacing: 0.01em;
}
@media (max-width: 640px) {
	.joh-hotlines li {
		grid-template-columns: 1fr;
	}
	.joh-hotline-num {
		justify-self: start;
	}
}

/* --------------------------------------------------------------------------
   12. Giving path (donate levels)
   -------------------------------------------------------------------------- */
.joh-giving {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.6rem 1.4rem;
	max-width: none;
}
.joh-giving li {
	position: relative;
	padding: 1.5rem 1.4rem 1.4rem;
	background: var(--joh-white);
	border: 1px solid rgba(127, 156, 28, 0.25);
	border-radius: var(--joh-radius);
	max-width: none;
}
.joh-giving li::before {
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(160deg, var(--joh-gold-bright), var(--joh-gold));
	margin-bottom: 1rem;
}
.joh-giving-amount {
	font-family: var(--joh-font-display);
	font-weight: 600;
	font-size: 1.55rem;
	color: var(--joh-olive-900);
	line-height: 1;
	margin: 0;
}
.joh-giving-desc {
	margin: 0.5rem 0 0;
	font-size: 0.95rem;
	color: var(--joh-ink-soft);
	max-width: none;
}
@media (max-width: 880px) {
	.joh-giving {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	.joh-giving {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   13. Forms (Fluent Forms restyle)
   -------------------------------------------------------------------------- */
.joh-form-wrap .ff-el-input-wrap input[type="text"],
.joh-form-wrap .ff-el-input-wrap input[type="email"],
.joh-form-wrap .ff-el-input-wrap input[type="tel"],
.joh-form-wrap .ff-el-input-wrap input[type="url"],
.joh-form-wrap .ff-el-input-wrap textarea,
.joh-form-wrap .ff-el-input-wrap select {
	width: 100%;
	background: var(--joh-white);
	border: 2px solid rgba(51, 61, 30, 0.22);
	border-radius: 12px;
	color: var(--joh-ink);
	font-family: var(--joh-font-body);
	font-size: 1rem;
	padding: 0.8rem 1rem;
	min-height: 48px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.joh-form-wrap textarea {
	min-height: 140px;
	resize: vertical;
}
.joh-form-wrap .ff-el-input-wrap input:focus,
.joh-form-wrap .ff-el-input-wrap textarea:focus,
.joh-form-wrap .ff-el-input-wrap select:focus {
	border-color: var(--joh-leaf-deep);
	box-shadow: 0 0 0 4px rgba(171, 206, 46, 0.22);
	outline: none;
}
.joh-form-wrap label {
	font-weight: 600;
	color: var(--joh-olive-900);
	font-size: 0.95rem;
}
.joh-form-wrap .ff-el-form-control:focus-visible {
	outline: none;
}
.joh-form-wrap .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0.9rem 2.1rem;
	border-radius: var(--joh-radius-pill);
	background: var(--joh-olive-800);
	color: var(--joh-white);
	font-family: var(--joh-font-body);
	font-size: 1rem;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.joh-form-wrap .ff-btn-submit:hover {
	background: var(--joh-olive-900);
	box-shadow: var(--joh-shadow-soft);
	color: var(--joh-white);
}
.joh-form-wrap .ff-errors-in-stack,
.joh-form-wrap .ff-success {
	max-width: none;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.joh-footer {
	background: var(--joh-olive-deep);
	color: rgba(251, 247, 236, 0.85);
	padding: clamp(3.5rem, 6vw, 5.5rem) 1.25rem 0;
}
.joh-footer-inner {
	max-width: 1160px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.6fr);
	gap: clamp(2.5rem, 5vw, 5rem);
}
.joh-footer-mark {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}
.joh-footer-mark img {
	border-radius: 50%;
	display: block;
}
.joh-footer-name {
	margin: 0;
	font-family: var(--joh-font-display);
	font-weight: 600;
	font-size: 1.45rem;
	color: var(--joh-paper);
	line-height: 1.15;
}
.joh-footer-script {
	margin: 0.2rem 0 0;
	font-family: var(--joh-font-script);
	font-weight: 600;
	font-size: 1.35rem;
	color: var(--joh-gold-bright);
}
.joh-footer-values {
	list-style: none;
	margin: 1.8rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0;
	max-width: none;
}
.joh-footer-values li {
	font-family: var(--joh-font-display);
	font-size: 0.98rem;
	color: rgba(251, 247, 236, 0.75);
	padding: 0 0.85rem;
	border-left: 1px solid rgba(231, 199, 102, 0.4);
	max-width: none;
}
.joh-footer-values li:first-child {
	padding-left: 0;
	border-left: none;
}
.joh-footer-nav {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}
.joh-footer-col h2 {
	font-family: var(--joh-font-body);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--joh-paper);
	margin: 0 0 1rem;
}
.joh-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.joh-footer-col li {
	margin: 0.55rem 0;
	max-width: none;
}
.joh-footer-col a {
	color: rgba(251, 247, 236, 0.85);
	text-decoration: none;
}
.joh-footer-col a:hover {
	color: var(--joh-gold-bright);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.joh-footer-safety {
	max-width: 1160px;
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	border-top: 1px solid rgba(251, 247, 236, 0.16);
	padding-top: 1.6rem;
}
.joh-footer-safety p {
	margin: 0;
	font-size: 0.92rem;
	max-width: 90ch;
	color: rgba(251, 247, 236, 0.8);
}
.joh-footer-safety a {
	color: var(--joh-gold-bright);
	font-weight: 700;
}
.joh-footer-legal {
	max-width: 1160px;
	margin: 1.1rem auto 0;
	padding: 1.2rem 0 1.8rem;
	border-top: 1px solid rgba(251, 247, 236, 0.1);
}
.joh-footer-legal p {
	margin: 0.3rem 0 0;
	font-size: 0.82rem;
	color: rgba(251, 247, 236, 0.6);
	max-width: none;
}
.joh-footer-copy a {
	color: rgba(251, 247, 236, 0.75);
	margin-left: 0.9rem;
	text-decoration: none;
}
.joh-footer-copy a:hover {
	color: var(--joh-gold-bright);
}
@media (max-width: 880px) {
	.joh-footer-inner {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.joh-footer-nav {
		grid-template-columns: 1fr 1fr;
	}
}

/* --------------------------------------------------------------------------
   15. Reveal motion (subtle, one pass, reduced-motion safe)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.joh-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
	.joh-hero .joh-sun-core {
		animation: none;
	}
	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}
.joh-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.joh-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   16. Utility
   -------------------------------------------------------------------------- */
.joh-center {
	text-align: center;
}
.joh-center .joh-section-title,
.joh-center h2 {
	margin-left: auto;
	margin-right: auto;
}
.joh-narrow {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.joh-stack-sm > * + * {
	margin-top: 0.7rem;
}
.joh-mt-2 {
	margin-top: 2rem;
}
.joh-mb-0 {
	margin-bottom: 0;
}

/* WP alignment helpers within constrained groups */
.wp-block-group.joh-section {
	box-sizing: border-box;
}
.entry-content .alignfull {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   17. V2 POLISH LAYER — depth, imagery, motion
   -------------------------------------------------------------------------- */

/* Grain texture (SVG noise, no extra request) */
.joh-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	opacity: 0.07;
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index: 1;
}
.joh-band, .joh-media-band, .joh-footer {
	position: relative;
}

/* ---- Arch image frames (the threshold motif) ---- */
.joh-arch {
	position: relative;
	margin: 0;
	border-radius: 999px 999px 22px 22px;
	overflow: hidden;
	background: var(--joh-leaf-mist);
	box-shadow:
		0 0 0 1px rgba(127, 156, 28, 0.25),
		0 30px 60px -28px rgba(42, 51, 22, 0.45);
	isolation: isolate;
}
.joh-arch::before {
	content: "";
	position: absolute;
	inset: 10px;
	border-radius: 990px 990px 16px 16px;
	border: 1.5px solid rgba(231, 199, 102, 0.65);
	z-index: 2;
	pointer-events: none;
	transition: inset 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.joh-arch::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(251, 247, 236, 0.14) 0%, rgba(42, 51, 22, 0.05) 42%, rgba(38, 47, 17, 0.28) 100%);
	z-index: 1;
	pointer-events: none;
}
.joh-arch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.joh-arch:hover::before {
	inset: 16px;
}
.joh-arch:hover img {
	transform: scale(1.07);
}
.joh-arch-fig {
	width: min(320px, 72vw);
	aspect-ratio: 4 / 5;
}
.joh-arch-sm {
	width: 220px;
	aspect-ratio: 4 / 5;
}

/* Arch reveal motion (mask grows, image settles) */
.joh-arch-reveal {
	clip-path: inset(46% 22% 46% 22% round 400px);
	opacity: 0;
	transform: translateY(16px);
	transition: clip-path 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.joh-arch-reveal.is-visible {
	clip-path: inset(0 0 0 0 round 400px);
	opacity: 1;
	transform: none;
}

/* ---- Media bands (full-bleed photo moments) ---- */
.joh-media-band {
	position: relative;
	overflow: hidden;
	background: var(--joh-olive-deep);
	min-height: clamp(420px, 58vw, 620px);
	display: grid;
	align-items: center;
}
.joh-band-photo {
	position: absolute;
	inset: -12% 0;
	width: 100%;
	height: 124%;
	object-fit: cover;
	opacity: 0.5;
	filter: saturate(0.85);
	transform: scale(1.04);
	z-index: 0;
}
.joh-band-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(60% 70% at 28% 30%, rgba(231, 199, 102, 0.16) 0%, rgba(38, 47, 17, 0) 62%),
		linear-gradient(100deg, rgba(38, 47, 17, 0.92) 0%, rgba(38, 47, 17, 0.55) 46%, rgba(38, 47, 17, 0.28) 100%);
}
.joh-band-content {
	position: relative;
	z-index: 2;
	max-width: 1160px;
	margin: 0 auto;
	padding: clamp(4rem, 8vw, 6rem) 1.5rem;
	width: 100%;
}
.joh-media-band h2 {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
	color: var(--joh-paper);
	max-width: 20ch;
}
.joh-media-band p {
	max-width: 54ch;
}

/* ---- Hero v2 (photographic threshold) ---- */
.joh-hero-v2 {
	background:
		radial-gradient(1200px 560px at 82% -10%, rgba(231, 199, 102, 0.5) 0%, rgba(231, 199, 102, 0) 60%),
		var(--joh-paper);
}
.joh-hero-visual {
	position: relative;
	display: grid;
	justify-items: center;
}
.joh-arch-hero {
	width: min(430px, 82vw);
	aspect-ratio: 4 / 4.7;
}
.joh-hero-hills {
	position: relative;
	width: min(560px, 96vw);
	margin-top: -14%;
	z-index: 3;
	filter: drop-shadow(0 -14px 26px rgba(42, 51, 22, 0.22));
}
.joh-hero-hills svg {
	display: block;
	width: 100%;
	height: auto;
}
/* entrance choreography */
@keyframes johRise {
	from { opacity: 0; transform: translateY(26px); }
	to { opacity: 1; transform: none; }
}
@keyframes johBloom {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: scale(1); }
}
.joh-hero-v2 .joh-hero-copy > * {
	opacity: 0;
	animation: johRise 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.joh-hero-v2 .joh-hero-copy > *:nth-child(1) { animation-delay: 0.08s; }
.joh-hero-v2 .joh-hero-copy > *:nth-child(2) { animation-delay: 0.20s; }
.joh-hero-v2 .joh-hero-copy > *:nth-child(3) { animation-delay: 0.30s; }
.joh-hero-v2 .joh-hero-copy > *:nth-child(4) { animation-delay: 0.42s; }
.joh-hero-v2 .joh-hero-copy > *:nth-child(5) { animation-delay: 0.55s; }
.joh-hero-v2 .joh-hero-visual {
	opacity: 0;
	animation: johBloom 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s forwards;
}

/* ---- Stagger groups ---- */
.joh-stagger > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.joh-stagger.is-visible > * { opacity: 1; transform: none; }
.joh-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.joh-stagger.is-visible > *:nth-child(2) { transition-delay: 0.14s; }
.joh-stagger.is-visible > *:nth-child(3) { transition-delay: 0.23s; }
.joh-stagger.is-visible > *:nth-child(4) { transition-delay: 0.32s; }
.joh-stagger.is-visible > *:nth-child(5) { transition-delay: 0.41s; }
.joh-stagger.is-visible > *:nth-child(6) { transition-delay: 0.5s; }

/* ---- Path list draw-down + icon bloom ---- */
.joh-path::before {
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
}
.joh-path.is-visible::before { transform: scaleY(1); }
.joh-path li .joh-path-icon {
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, border-color 0.3s ease;
}
.joh-path.is-visible li .joh-path-icon { animation: johBloom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.joh-path.is-visible li:nth-child(1) .joh-path-icon { animation-delay: 0.25s; }
.joh-path.is-visible li:nth-child(2) .joh-path-icon { animation-delay: 0.42s; }
.joh-path.is-visible li:nth-child(3) .joh-path-icon { animation-delay: 0.59s; }
.joh-path.is-visible li:nth-child(4) .joh-path-icon { animation-delay: 0.76s; }
.joh-path.is-visible li:nth-child(5) .joh-path-icon { animation-delay: 0.93s; }
.joh-path.is-visible li:nth-child(6) .joh-path-icon { animation-delay: 1.1s; }
.joh-path li:hover .joh-path-icon {
	transform: translateY(-3px) scale(1.06);
	border-color: var(--joh-gold);
}

/* ---- Micro-interactions ---- */
.joh-btn-solid:hover, .joh-btn-gold:hover {
	transform: none;
}
.joh-feature-row {
	will-change: transform;
}
.joh-feature-row:hover .joh-feature-icon {
	background: var(--joh-gold-bright);
	transform: rotate(-6deg) scale(1.06);
}
.joh-feature-icon {
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}
.joh-hotlines li {
	position: relative;
	padding-left: 1.2rem;
	padding-right: 0.8rem;
	transition: background-color 0.25s ease;
}
.joh-hotlines li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18%;
	bottom: 18%;
	width: 4px;
	border-radius: 2px;
	background: var(--joh-gold);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.joh-hotlines li:hover {
	background: rgba(171, 206, 46, 0.1);
}
.joh-hotlines li:hover::before { transform: scaleY(1); }
.joh-giving li {
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}
.joh-giving li::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 24px 48px -22px rgba(201, 166, 58, 0.55);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.joh-giving li:hover {
	transform: translateY(-5px);
	border-color: var(--joh-gold);
}
.joh-giving li:hover::after { opacity: 1; }

/* ---- Dark bands: glow drift + vignette ---- */
.joh-band .joh-sun-glow, .joh-media-band + * .joh-sun-glow {
	animation: johGlowDrift 14s ease-in-out infinite alternate;
}
@keyframes johGlowDrift {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(-4%, 5%) scale(1.08); }
}

/* ---- Page hero v2 (arch figure) ---- */
.joh-page-hero {
	position: relative;
}
.joh-ph-flex {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	justify-content: center;
	text-align: left;
	max-width: 1000px;
	margin: 0 auto;
}
.joh-ph-flex .joh-ph-copy { flex: 1 1 320px; }
.joh-ph-flex h1 { margin: 0; max-width: 16ch; }
.joh-ph-fig {
	flex: 0 0 auto;
	transform: rotate(2.5deg);
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.joh-ph-fig:hover { transform: rotate(0deg); }
@media (max-width: 900px) {
	.joh-ph-fig { display: none; }
	.joh-ph-flex { text-align: center; }
	.joh-ph-flex h1 { margin-left: auto; margin-right: auto; }
}

/* ---- Drop cap ---- */
.joh-dropcap > p:first-of-type::first-letter {
	font-family: var(--joh-font-display);
	font-weight: 600;
	font-size: 3.4em;
	line-height: 0.85;
	float: left;
	padding: 0.08em 0.14em 0 0;
	color: var(--joh-gold-deep);
}

/* ---- Parallax elements ---- */
[data-parallax] {
	will-change: transform;
}

/* ---- Footer texture ---- */
.joh-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 380px at 85% -10%, rgba(231, 199, 102, 0.12) 0%, rgba(231, 199, 102, 0) 60%);
	pointer-events: none;
}
.joh-footer-inner, .joh-footer-safety, .joh-footer-legal {
	position: relative;
	z-index: 1;
}

/* ---- Reduced motion: everything settles instantly ---- */
@media (prefers-reduced-motion: reduce) {
	.joh-hero-v2 .joh-hero-copy > *, .joh-hero-v2 .joh-hero-visual {
		animation: none !important;
		opacity: 1 !important;
	}
	.joh-arch-reveal { clip-path: none; opacity: 1; transform: none; transition: none; }
	.joh-stagger > *, .joh-path::before, .joh-path li .joh-path-icon {
		transition: none !important;
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.joh-band .joh-sun-glow { animation: none !important; }
	[data-parallax] { transform: none !important; }
}

/* --------------------------------------------------------------------------
   17b. V3 SENIOR LAYER — scale, immersion, choreography
   -------------------------------------------------------------------------- */

:root {
	--joh-ink-deep: #171D0D;
	--joh-display-xl: clamp(3.1rem, 1.2rem + 7vw, 7.2rem);
	--joh-display-lg: clamp(2.4rem, 1.1rem + 4.2vw, 4.6rem);
	--joh-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============ HERO v3 — from darkness into light ============ */
.joh-hero-v3 {
	position: relative;
	background: var(--joh-paper);
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 46%) minmax(0, 54%);
	min-height: min(92vh, 900px);
}
.joh-hero-v3 .joh-hero-night {
	position: relative;
	background:
		radial-gradient(120% 90% at 85% -10%, rgba(201, 166, 58, 0.22) 0%, rgba(23, 29, 13, 0) 55%),
		linear-gradient(160deg, #232B12 0%, var(--joh-ink-deep) 70%);
	color: var(--joh-paper);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.5rem, 5vw, 5.5rem) clamp(1.5rem, 4vw, 4.5rem);
	z-index: 2;
}
.joh-hero-v3 .joh-hero-night::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	opacity: 0.06;
	mix-blend-mode: overlay;
	pointer-events: none;
}
.joh-hero-v3 .joh-hero-kicker {
	font-family: var(--joh-font-script);
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
	color: var(--joh-gold-bright);
	margin: 0 0 1.1rem;
}
.joh-hero-v3 h1 {
	color: var(--joh-paper);
	font-size: var(--joh-display-xl);
	line-height: 0.99;
	letter-spacing: -0.035em;
	max-width: 12ch;
	margin: 0;
}
.joh-hero-v3 h1 em {
	font-style: italic;
	font-weight: 400;
	color: var(--joh-gold-bright);
}
.joh-hero-v3 .joh-hero-sub {
	color: rgba(251, 247, 236, 0.82);
	max-width: 46ch;
	margin-top: 1.6rem;
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
}
.joh-hero-v3 .joh-hero-sub + .joh-hero-sub { margin-top: 0.8rem; }
.joh-hero-v3 .joh-hero-cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.joh-hero-v3 .joh-btn-solid {
	background: var(--joh-gold);
	color: var(--joh-ink-deep);
	box-shadow: 0 18px 44px -14px rgba(201, 166, 58, 0.55);
}
.joh-hero-v3 .joh-btn-solid:hover { background: var(--joh-gold-bright); }
.joh-hero-v3 .joh-btn-outline-light { border-color: rgba(251, 247, 236, 0.4); }
.joh-hero-v3 .joh-hero-note {
	font-family: var(--joh-font-script);
	font-size: 1.45rem;
	color: rgba(231, 199, 102, 0.9);
	margin: 2rem 0 0;
}
.joh-hero-v3 .joh-hero-day {
	position: relative;
	overflow: hidden;
	background: linear-gradient(200deg, #F7E8C2 0%, var(--joh-paper) 45%);
}
.joh-hero-v3 .joh-hero-day .joh-hero-photo {
	position: absolute;
	inset: 0;
}
.joh-hero-v3 .joh-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.joh-hero-v3 .joh-hero-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(251, 247, 236, 0.55) 0%, rgba(251, 247, 236, 0) 38%);
}
/* Arch window carved into the photo zone */
.joh-hero-v3 .joh-hero-window {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -52%);
	width: min(58%, 500px);
	aspect-ratio: 3 / 4;
	max-height: 86%;
	border-radius: 999px 999px 22px 22px;
	overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(127, 156, 28, 0.3),
		0 0 0 8px rgba(251, 247, 236, 0.9),
		0 36px 72px -28px rgba(23, 29, 13, 0.45);
	z-index: 2;
}
.joh-hero-v3 .joh-hero-window::before {
	content: "";
	position: absolute;
	inset: 12px;
	border-radius: 990px 990px 16px 16px;
	border: 1.5px solid rgba(201, 166, 58, 0.75);
	z-index: 3;
	pointer-events: none;
}
.joh-hero-v3 .joh-hero-window img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	display: block;
}
.joh-hero-v3 .joh-hero-hills {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -6px;
	width: min(72%, 640px);
	z-index: 4;
	filter: drop-shadow(0 -18px 34px rgba(23, 29, 13, 0.35));
	pointer-events: none;
}
.joh-hero-v3 .joh-hero-hills svg { display: block; width: 100%; height: auto; }

/* Hero entrance — one quiet moment: the copy rises together, once */
.joh-hero-v3 .joh-hero-night > * {
	opacity: 0;
	animation: johRise 0.7s var(--joh-ease-out) 0.15s forwards;
}
.joh-hero-v3 .joh-hero-day {
	opacity: 0;
	animation: johDayIn 1.3s var(--joh-ease-out) 0.15s forwards;
}
@keyframes johDayIn {
	from { opacity: 0; transform: translateX(36px); }
	to { opacity: 1; transform: none; }
}

/* ============ Marquee ribbon ============ */
.joh-marquee {
	background: var(--joh-ink-deep);
	color: var(--joh-paper);
	overflow: hidden;
	padding: 1.35rem 0;
	position: relative;
}
.joh-marquee::before, .joh-marquee::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: clamp(48px, 8vw, 120px);
	background: linear-gradient(90deg, var(--joh-ink-deep) 0%, rgba(23, 29, 13, 0) 100%);
	z-index: 2;
	pointer-events: none;
}
.joh-marquee::after {
	left: auto;
	right: 0;
	background: linear-gradient(270deg, var(--joh-ink-deep) 0%, rgba(23, 29, 13, 0) 100%);
}
.joh-marquee-track {
	display: flex;
	gap: 3.2rem;
	width: max-content;
	animation: johMarquee 36s linear infinite;
	will-change: transform;
}
.joh-marquee:hover .joh-marquee-track { animation-play-state: paused; }
.joh-marquee-item {
	display: inline-flex;
	align-items: center;
	gap: 3.2rem;
	font-family: var(--joh-font-display);
	font-style: italic;
	font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.7rem);
	white-space: nowrap;
	color: rgba(251, 247, 236, 0.92);
}
.joh-marquee-item .joh-marquee-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--joh-gold);
	box-shadow: 0 0 12px rgba(231, 199, 102, 0.8);
	flex: 0 0 auto;
}
@keyframes johMarquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ============ Statement moment ============ */
.joh-statement {
	padding: clamp(4.5rem, 9vw, 8rem) 1.5rem clamp(3.5rem, 7vw, 6rem);
	background: var(--joh-paper);
}
.joh-statement-grid {
	max-width: 1160px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: end;
}
.joh-statement h2 {
	font-size: var(--joh-display-lg);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--joh-olive-900);
	max-width: 14ch;
	margin: 0;
}
.joh-statement h2 em { font-style: italic; font-weight: 400; color: var(--joh-gold-deep); }
.joh-statement-side { padding-bottom: 0.6rem; }
.joh-statement-side p { margin: 0; color: var(--joh-ink-soft); }
.joh-statement-side .joh-statement-rule {
	display: block;
	width: 64px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--joh-gold), var(--joh-gold-bright));
	margin-bottom: 1.4rem;
}

/* Line mask reveals */
.joh-line-mask {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}
.joh-line-mask > span {
	display: block;
	transform: translateY(112%);
	transition: transform 1s var(--joh-ease-out);
}
.is-visible .joh-line-mask > span { transform: none; }
.is-visible .joh-line-mask:nth-child(2) > span { transition-delay: 0.12s; }
.is-visible .joh-line-mask:nth-child(3) > span { transition-delay: 0.24s; }

/* ============ Editorial ghost numerals ============ */
.joh-ed-block { position: relative; padding-top: 0.4rem; }
.joh-ed-num {
	position: absolute;
	top: -1.1rem;
	left: -0.4rem;
	font-family: var(--joh-font-display);
	font-weight: 600;
	font-size: clamp(4.4rem, 3rem + 4vw, 7.6rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(127, 156, 28, 0.35);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}
.joh-ed-block > *:not(.joh-ed-num) { position: relative; z-index: 1; }
.joh-ed-block h2, .joh-ed-block h3 { margin-top: 2.6rem; }

/* ============ Bento grid (programs) ============ */
.joh-bento {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1.1rem;
}
.joh-bento > * {
	border: 1px solid rgba(127, 156, 28, 0.28);
	border-radius: 20px;
	background: var(--joh-white);
	overflow: hidden;
	position: relative;
	transition: transform 0.4s var(--joh-ease-out), box-shadow 0.4s ease, border-color 0.3s ease;
}
.joh-bento > *:hover {
	transform: translateY(-4px);
	border-color: rgba(201, 166, 58, 0.65);
	box-shadow: 0 30px 60px -28px rgba(42, 51, 22, 0.35);
}
.joh-b-tall { grid-column: span 2; grid-row: span 2; padding: 2rem 1.8rem; display: flex; flex-direction: column; }
.joh-b-med { grid-column: span 2; padding: 1.8rem; }
.joh-b-wide { grid-column: span 4; padding: 1.8rem 1.8rem 1.6rem; display: flex; align-items: center; gap: 1.6rem; }
.joh-bento h3 { margin: 0.4rem 0 0.55rem; color: var(--joh-olive-900); font-size: 1.32rem; }
.joh-bento p { margin: 0; color: var(--joh-ink-soft); font-size: 0.98rem; }
.joh-bento .joh-b-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--joh-leaf-mist);
	display: grid;
	place-items: center;
	color: var(--joh-olive-800);
	flex: 0 0 auto;
}
.joh-bento .joh-b-icon svg { width: 24px; height: 24px; }
.joh-b-img { padding: 0 !important; min-height: 260px; }
.joh-b-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	min-height: 260px;
	transition: transform 0.9s var(--joh-ease-out);
}
.joh-b-img:hover img { transform: scale(1.05); }
.joh-b-tag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	background: rgba(23, 29, 13, 0.72);
	color: var(--joh-gold-bright);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	padding: 0.32rem 0.7rem;
	border-radius: 999px;
	backdrop-filter: blur(4px);
}
.joh-bento .joh-b-grow { margin-top: auto; padding-top: 1rem; }
.joh-bento .joh-textlink { font-size: 0.95rem; }

/* ============ Numbered rows (get involved) ============ */
.joh-num-rows { list-style: none; margin: 0; padding: 0; max-width: none; }
.joh-num-rows li {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	gap: 1.4rem;
	align-items: center;
	padding: 1.55rem 0.6rem;
	border-bottom: 1px solid rgba(51, 61, 30, 0.14);
	position: relative;
	transition: padding-left 0.35s var(--joh-ease-out), background-color 0.3s ease;
	max-width: none;
}
.joh-num-rows li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 16%;
	bottom: 16%;
	width: 4px;
	border-radius: 2px;
	background: var(--joh-gold);
	transform: scaleY(0);
	transition: transform 0.35s var(--joh-ease-out);
}
.joh-num-rows li:hover { padding-left: 1.4rem; background: rgba(171, 206, 46, 0.08); }
.joh-num-rows li:hover::before { transform: scaleY(1); }
.joh-num-rows .joh-num {
	font-family: var(--joh-font-display);
	font-weight: 600;
	font-size: 2.3rem;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.3px rgba(127, 156, 28, 0.55);
}
.joh-num-rows li:hover .joh-num { color: var(--joh-gold-deep); -webkit-text-stroke: 0px; }
.joh-num-rows h3 { margin: 0 0 0.2rem; font-size: 1.15rem; }
.joh-num-rows p { margin: 0; font-size: 0.96rem; color: var(--joh-ink-soft); max-width: 52ch; }

/* ============ Counters (donate) ============ */
.joh-count { font-variant-numeric: tabular-nums; }

/* ============ Inner page hero v3 restyle (CSS-only upgrade of v2 markup) ============ */
.joh-page-hero {
	background:
		radial-gradient(90% 120% at 90% -20%, rgba(201, 166, 58, 0.16) 0%, rgba(23, 29, 13, 0) 55%),
		linear-gradient(165deg, #202810 0%, var(--joh-ink-deep) 78%);
	color: var(--joh-paper);
	padding: clamp(3.5rem, 7vw, 6.5rem) 1.5rem;
}
.joh-page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	opacity: 0.05;
	mix-blend-mode: overlay;
	pointer-events: none;
}
.joh-page-hero > *, .joh-page-hero .joh-ph-flex > * { position: relative; z-index: 1; }
.joh-ph-flex { max-width: 1160px; }
.joh-page-hero h1 {
	color: var(--joh-paper);
	font-size: clamp(2.3rem, 1.1rem + 3.6vw, 4.2rem);
	letter-spacing: -0.03em;
	line-height: 1.02;
	max-width: 15ch;
}
.joh-page-hero .joh-ph-copy > p {
	color: rgba(251, 247, 236, 0.8);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.13rem);
	max-width: 56ch;
}
.joh-page-hero .joh-ph-copy > p:first-of-type { margin-top: 1.2rem; }
.joh-ph-fig {
	transform: none;
	width: min(250px, 40vw);
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
}
.joh-ph-fig:hover { transform: translateY(-6px); }
.joh-page-hero .joh-btn-row { margin-top: 1.9rem; }
.joh-page-hero .joh-btn-outline {
	background: transparent;
	color: var(--joh-paper);
	border-color: rgba(251, 247, 236, 0.45);
}
.joh-page-hero .joh-btn-outline:hover {
	background: rgba(251, 247, 236, 0.1);
	color: var(--joh-paper);
	border-color: var(--joh-paper);
}
.joh-page-hero .joh-btn-exit {
	color: #EFA9A2;
	border-color: rgba(200, 91, 84, 0.65);
}
.joh-page-hero .joh-btn-exit:hover { background: var(--joh-rose-deep); color: #fff; }
.joh-page-hero p[style*="font-family:var(--joh-font-script)"] { color: var(--joh-gold-bright) !important; }

/* Page hero curve into content */
.joh-hero-curve {
	display: block;
	width: 100%;
	height: clamp(38px, 6vw, 74px);
	margin-bottom: -1px;
}

/* ============ Section title scale-up across pages ============ */
.joh-section-title { letter-spacing: -0.022em; }
.joh-page-hero + .joh-section .joh-section-title { font-size: var(--joh-display-lg); }

/* ============ Media band v3 refinement ============ */
.joh-media-band h2 { letter-spacing: -0.03em; }
.joh-media-band .joh-band-content { padding-top: clamp(5rem, 10vw, 8rem); padding-bottom: clamp(5rem, 10vw, 8rem); }

/* ============ Founder spread ============ */
.joh-spread {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
}
.joh-spread .joh-arch { width: 100%; max-width: 480px; }
.joh-spread .joh-sign {
	font-family: var(--joh-font-script);
	font-size: 2rem;
	color: var(--joh-gold-deep);
	margin-top: 1.6rem;
}

/* ============ Footer deepening ============ */
.joh-footer { background: var(--joh-ink-deep); }

/* ============ V3 responsive ============ */
@media (max-width: 1080px) {
	.joh-hero-v3 { grid-template-columns: minmax(0, 48%) minmax(0, 52%); }
	.joh-bento .joh-b-tall { grid-row: span 1; }
}
@media (max-width: 920px) {
	.joh-hero-v3 {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.joh-hero-v3 .joh-hero-day {
		min-height: 74vw;
		max-height: 560px;
	}
	.joh-hero-v3 .joh-hero-window { width: min(66%, 420px); }
	.joh-statement-grid { grid-template-columns: 1fr; align-items: start; }
	.joh-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.joh-b-tall, .joh-b-med { grid-column: span 1; }
	.joh-b-wide { grid-column: span 2; flex-direction: column; align-items: flex-start; }
	.joh-spread { grid-template-columns: 1fr; }
	.joh-spread .joh-arch { max-width: 420px; }
	.joh-num-rows li { grid-template-columns: 64px minmax(0, 1fr); }
	.joh-num-rows li .joh-num-row-cta { grid-column: 2; justify-self: start; }
}
@media (max-width: 640px) {
	.joh-bento { grid-template-columns: 1fr; }
	.joh-b-wide { grid-column: span 1; }
	.joh-hero-v3 h1 { max-width: 10ch; }
	.joh-hero-v3 .joh-hero-cta .joh-btn { width: 100%; }
	.joh-num-rows li { grid-template-columns: 48px minmax(0, 1fr); gap: 1rem; }
	.joh-num-rows .joh-num { font-size: 1.7rem; }
	.joh-marquee-track { gap: 2rem; }
	.joh-marquee-item { gap: 2rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.joh-hero-v3 .joh-hero-night > *, .joh-hero-v3 .joh-hero-day { animation: none !important; opacity: 1 !important; transform: none !important; }
	.joh-marquee-track { animation: none !important; flex-wrap: wrap; width: auto; }
	.joh-line-mask > span { transform: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   17c. V4 REFINEMENT — kill the boxy look sitewide
   -------------------------------------------------------------------------- */

/* Feature rows: soft tint tiles, no borders */
.joh-feature-row {
	background: var(--joh-leaf-mist);
	border: none;
	box-shadow: none;
	cursor: pointer;
}
.joh-feature-row:hover {
	transform: translateY(-3px);
	border: none;
	box-shadow: 0 26px 50px -24px rgba(42, 51, 22, 0.3);
}
.joh-feature-row .joh-feature-icon {
	background: var(--joh-paper);
	border: 1px solid rgba(127, 156, 28, 0.3);
}
.joh-on-paper .joh-feature-row:hover { background: #E9F0D6; }
.joh-on-tint .joh-feature-row, .joh-on-mist .joh-feature-row { background: var(--joh-paper); }
.joh-on-tint .joh-feature-row:hover, .joh-on-mist .joh-feature-row:hover { background: var(--joh-white); }

/* Giving tiles: premium rail */
.joh-giving li {
	background: var(--joh-leaf-mist);
	border: none;
	padding: 1.7rem 1.6rem 1.6rem;
	cursor: pointer;
}
.joh-giving li::before {
	width: 40px;
	height: 40px;
	background:
		radial-gradient(circle at 34% 30%, #F6E7B4 0%, var(--joh-gold-bright) 42%, var(--joh-gold) 100%);
	box-shadow: 0 0 0 6px rgba(201, 166, 58, 0.14), 0 6px 16px -6px rgba(201, 166, 58, 0.7);
}
.joh-giving li:hover {
	border: none;
	box-shadow: 0 30px 56px -26px rgba(42, 51, 22, 0.35);
	background: #E9F0D6;
}
.joh-giving li:hover::after { display: none; }
.joh-giving-amount {
	font-size: 2.35rem;
	letter-spacing: -0.03em;
	line-height: 1;
}
.joh-giving-amount::first-letter { color: var(--joh-gold-deep); }
.joh-giving-desc { color: var(--joh-ink-soft); }

/* Hotlines: scale up */
.joh-hotline-name { font-size: 1.32rem; }
.joh-hotline-num { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); }

/* Numbered rows: hover without layout shift */
.joh-num-rows li { cursor: pointer; }
.joh-num-rows li:hover { padding-left: 0.6rem; }
.joh-num-rows li > *:not(.joh-num) {
	transition: transform 0.35s var(--joh-ease-out);
}
.joh-num-rows li:hover > div { transform: translateX(10px); }

/* Bento/path cursor + path icon ring */
.joh-bento > * { cursor: pointer; }
.joh-path-icon { box-shadow: 0 0 0 6px rgba(171, 206, 46, 0.12); }

/* Stories editorial quote (replaces card look) */
.joh-story-feature {
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
	padding: clamp(1rem, 3vw, 2rem) 0 0;
	position: relative;
}
.joh-story-feature::before {
	content: "\201C";
	display: block;
	font-family: var(--joh-font-display);
	font-size: clamp(5rem, 4rem + 4vw, 8rem);
	line-height: 0.6;
	color: var(--joh-gold);
	opacity: 0.55;
	margin-bottom: 1.6rem;
}
.joh-story-feature blockquote {
	margin: 0;
	padding: 0;
	border: none;
	max-width: none;
	font-family: var(--joh-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
	line-height: 1.45;
	color: var(--joh-olive-900);
}
.joh-story-feature .joh-quote-cite {
	font-family: var(--joh-font-script);
	font-size: 1.7rem;
	font-weight: 600;
	color: var(--joh-gold-deep);
}

/* Contact form: premium card */
.joh-form-card {
	background: var(--joh-white);
	border-radius: 24px;
	padding: clamp(1.6rem, 3vw, 2.6rem);
	box-shadow: 0 30px 70px -34px rgba(42, 51, 22, 0.35), 0 0 0 1px rgba(127, 156, 28, 0.14);
}
.joh-form-card .ff-el-input-wrap input[type="text"],
.joh-form-card .ff-el-input-wrap input[type="email"],
.joh-form-card .ff-el-input-wrap input[type="tel"],
.joh-form-card .ff-el-input-wrap textarea,
.joh-form-card .ff-el-input-wrap select {
	border: 1.5px solid rgba(51, 61, 30, 0.18);
	border-radius: 14px;
	padding: 0.95rem 1.1rem;
	font-size: 1.02rem;
	background: #FDFAF2;
}
.joh-form-card .ff-btn-submit {
	width: 100%;
	border-radius: 999px;
	font-size: 1.05rem;
	letter-spacing: 0.01em;
}
.joh-form-wrap label { margin-bottom: 0.35rem; display: block; }

/* Hero v4: arch presentation without cartoon strip */
.joh-hero-v3 .joh-hero-hills { display: none; }
.joh-hero-v3 .joh-hero-window {
	width: min(62%, 560px);
	box-shadow:
		0 0 0 1px rgba(127, 156, 28, 0.35),
		0 0 0 12px rgba(251, 247, 236, 0.9),
		0 0 90px 8px rgba(231, 199, 102, 0.35),
		0 56px 110px -34px rgba(23, 29, 13, 0.55);
}
.joh-hero-v3 .joh-hero-window img {
	animation: johKenBurns 22s ease-in-out infinite alternate;
}
@keyframes johKenBurns {
	from { transform: scale(1) translateY(0); }
	to { transform: scale(1.08) translateY(-1.6%); }
}
@media (prefers-reduced-motion: reduce) {
	.joh-hero-v3 .joh-hero-window img { animation: none !important; }
}

/* Ava mid-page band + section rhythm */
.joh-editorial p { font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   17d. V5 — floating nav, tighter measure, layered hero motion
   -------------------------------------------------------------------------- */

/* ===== Text measure: stop stretching wide on desktop ===== */
.joh-section .joh-split { max-width: 1080px; margin-inline: auto; }
.joh-section p, .joh-section li { max-width: 62ch; }
.joh-statement-grid { max-width: 1040px; }
.joh-statement-side p { max-width: 44ch; }
.joh-hotlines { max-width: 960px; margin-inline: auto; }
.joh-giving { max-width: 1080px; margin-inline: auto; }
.joh-num-rows p { max-width: 56ch; }
.joh-path p { max-width: 52ch; }
.joh-lede { max-width: 50ch; }
.joh-on-paper .joh-narrow, .joh-narrow { max-width: 720px; }

/* ===== Floating glass navbar ===== */
.joh-header {
	position: sticky;
	top: 10px;
	margin: 12px 16px 0;
	border-radius: 20px;
	background: rgba(251, 247, 236, 0.82);
	backdrop-filter: blur(16px) saturate(1.3);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	border: 1px solid rgba(51, 61, 30, 0.1);
	box-shadow: 0 10px 34px -18px rgba(42, 51, 22, 0.28);
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.joh-header.is-scrolled {
	background: rgba(251, 247, 236, 0.94);
	box-shadow: 0 18px 44px -18px rgba(42, 51, 22, 0.4);
}
.joh-header-inner {
	padding: 0.45rem 1.1rem;
	min-height: 64px;
	gap: 1.2rem;
}
.joh-nav-list { gap: 0.1rem; }
.joh-nav-list a {
	position: relative;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--joh-ink);
	padding: 0.5rem 0.72rem;
}
.joh-nav-list a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0.28rem;
	transform: translateX(-50%);
	width: 0;
	height: 2px;
	border-radius: 1px;
	background: var(--joh-gold);
	transition: width 0.28s var(--joh-ease-out);
}
.joh-nav-list a:hover { background: transparent; }
.joh-nav-list a:hover::after, .joh-nav-list a.is-active::after { width: 46%; }
.joh-nav-list a.is-active { color: var(--joh-olive-900); }
/* Actions: one bold, one quiet, exit ghost */
.joh-actions .joh-btn-gold {
	background: var(--joh-gold);
	color: var(--joh-olive-900);
	box-shadow: 0 8px 22px -10px rgba(201, 166, 58, 0.8);
}
.joh-actions .joh-btn-gold:hover { transform: translateY(-1px); }
.joh-actions .joh-btn-solid {
	background: transparent;
	color: var(--joh-olive-800);
	border: 2px solid rgba(51, 61, 30, 0.22);
	box-shadow: none;
}
.joh-actions .joh-btn-solid:hover {
	background: var(--joh-olive-800);
	color: var(--joh-paper);
	border-color: var(--joh-olive-800);
}
.joh-announce { padding-top: 0.2rem; }
@media (max-width: 1080px) {
	.joh-header { margin: 10px 12px 0; }
}
@media (max-width: 620px) {
	.joh-header { margin: 8px 10px 0; border-radius: 16px; }
	.joh-header-inner { min-height: 58px; padding: 0.4rem 0.85rem; }
	.joh-actions .joh-btn-gold, .joh-actions .joh-btn-solid { display: inline-flex; }
	.joh-actions .joh-btn-gold { display: none; }
}

/* ===== Hero: layered motion ===== */
.joh-hero-window-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -52%);
	width: min(62%, 560px);
	z-index: 2;
}
.joh-hero-v3 .joh-hero-window {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	width: 100%;
	animation: johFloat 7.5s ease-in-out infinite;
}
@keyframes johFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}
.joh-hero-glow-pulse {
	position: absolute;
	inset: -14%;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(231, 199, 102, 0.4) 0%, rgba(231, 199, 102, 0.12) 45%, rgba(231, 199, 102, 0) 70%);
	animation: johGlowPulse 6s ease-in-out infinite;
	pointer-events: none;
	z-index: -1;
}
@keyframes johGlowPulse {
	0%, 100% { opacity: 0.65; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.07); }
}
.joh-hero-v3 .joh-hero-night h1 {
	font-size: clamp(2.9rem, 1rem + 6.2vw, 6.4rem);
}
.joh-hero-rule {
	display: block;
	width: 0;
	height: 4px;
	margin-top: 1.7rem;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--joh-gold), var(--joh-gold-bright));
	animation: johRuleDraw 1.1s var(--joh-ease-out) 0.75s forwards;
}
@keyframes johRuleDraw { to { width: 96px; } }
.joh-hero-v3 .joh-hero-night .joh-line-mask { padding-bottom: 0.06em; }
.joh-hero-v3 .joh-hero-night h1 .joh-line-mask > span {
	transform: translateY(114%);
	transition: transform 1.05s var(--joh-ease-out);
	animation: johLineSafety 0.01s 2.6s forwards;
}
@keyframes johLineSafety { to { transform: none; } }
.joh-hero-v3 .joh-hero-night h1 .joh-line-mask.is-in > span { transform: none; }
.joh-hero-v3 .joh-hero-night h1 .joh-line-mask:nth-child(2).is-in > span { transition-delay: 0.13s; }
.joh-hero-v3 .joh-hero-night h1 .joh-line-mask:nth-child(3).is-in > span { transition-delay: 0.26s; }
.joh-hero-v3 .joh-hero-photo { will-change: transform; }

/* ===== Blur-scale image reveals (sitewide) ===== */
.joh-arch-reveal {
	filter: blur(10px);
}
.joh-arch-reveal.is-visible {
	filter: blur(0);
	transition: clip-path 1.15s var(--joh-ease-out), opacity 0.7s ease, transform 0.85s var(--joh-ease-out), filter 0.9s ease;
}
.joh-band-photo {
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 1.2s ease, transform 1.6s var(--joh-ease-out);
}
.joh-media-band.is-visible .joh-band-photo, .no-js .joh-band-photo { opacity: 0.5; transform: scale(1.04); }

/* ===== Pointer tilt on arch images ===== */
.joh-tilt { transform-style: preserve-3d; perspective: 900px; }
.joh-tilt .joh-tilt-inner { transition: transform 0.5s var(--joh-ease-out); will-change: transform; }

/* ===== Section rule draw + title settle ===== */
.joh-title-kicker {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.9rem;
}
.joh-title-kicker::before {
	content: "";
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--joh-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.7s var(--joh-ease-out) 0.2s;
}
.is-visible .joh-title-kicker::before, .joh-reveal .joh-title-kicker::before { transform: scaleX(1); }
.joh-title-kicker span {
	font-family: var(--joh-font-script);
	font-size: 1.35rem;
	color: var(--joh-gold-deep);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	.joh-hero-v3 .joh-hero-window { animation: none !important; }
	.joh-hero-glow-pulse { animation: none !important; }
	.joh-hero-rule { animation: none !important; width: 96px; }
	.joh-hero-v3 .joh-hero-night h1 .joh-line-mask > span { transform: none !important; transition: none !important; }
	.joh-arch-reveal { filter: none !important; }
	.joh-band-photo { opacity: 0.5 !important; transform: scale(1.04) !important; transition: none !important; }
	.joh-tilt .joh-tilt-inner { transition: none !important; }
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */
@media print {
	.joh-announce,
	.joh-header,
	.joh-footer-nav,
	.joh-btn,
	.joh-nav-toggle {
		display: none !important;
	}
	body.joh {
		background: #fff;
		color: #000;
	}
	.joh-footer-script-mark { display: none; }
}

/* ==========================================================================
   V6 — editorial measure (Bryan: desktop text sat too wide and sparse)
   Default section container drops 1160 → 920 for prose; wide moments
   (bento, path, feature rows, splits, giving) widen explicitly via :has().
   Type rises as the measure narrows, so sections read intentional, not squeezed.
   ========================================================================== */

/* ---- Measure ---- */
.joh-section { max-width: 920px; }
.joh-section.joh-band { max-width: none; }
.joh-section:has(> .joh-split), .joh-section:has(.joh-split) { max-width: 1000px; }
.joh-section:has(.joh-path-wrap) { max-width: 1160px; }
.joh-section:has(.joh-bento) { max-width: 1160px; }
.joh-section:has(.joh-feature-rows) { max-width: 1120px; }
.joh-section:has(.joh-giving) { max-width: 1040px; }
.joh-section .joh-split { max-width: 1000px; }
.joh-giving { max-width: 1000px; }
.joh-section.joh-band > * { max-width: 900px; margin-inline: auto; }
.joh-section.joh-band > .joh-btn-row { justify-content: center; }
.joh-ph-flex { max-width: 1060px; }

/* ---- Type rises with the narrower measure ---- */
.joh-section > p { font-size: 1.16rem; line-height: 1.8; max-width: 58ch; }
.joh-split > div > p { font-size: 1.14rem; line-height: 1.8; max-width: 56ch; }
.joh-ed-block p { font-size: 1.14rem; line-height: 1.8; }
.joh-spread > div > p { font-size: 1.15rem; line-height: 1.8; }
.joh-narrow > p:not(.joh-pull) { font-size: 1.2rem; line-height: 1.85; }
.joh-editorial p { font-size: 1.22rem; }
.joh-lede { font-size: clamp(1.28rem, 1.08rem + 0.9vw, 1.5rem); line-height: 1.62; max-width: 46ch; }
.joh-statement-side p { font-size: 1.08rem; }
.joh-path-intro .joh-script { display: inline-block; margin-top: 0.9rem; }

/* ---- Pull-quote (inner-page editorial rhythm) ---- */
.joh-pull {
	font-family: var(--joh-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.65rem, 1.15rem + 1.9vw, 2.55rem);
	line-height: 1.28;
	letter-spacing: -0.012em;
	color: var(--joh-olive-900);
	max-width: 27ch;
	margin: clamp(2.4rem, 5.5vw, 4rem) 0 clamp(2.4rem, 5.5vw, 4rem) clamp(0.25rem, 6vw, 7rem);
	padding-top: 1.7rem;
	border-top: 3px solid var(--joh-gold);
}
.joh-pull .joh-pull-cite {
	display: block;
	margin-top: 1.1rem;
	font-family: var(--joh-font-script);
	font-style: normal;
	font-size: 1.45rem;
	color: var(--joh-gold-deep);
}

/* ---- Healing-path scroll scrub ---- */
.joh-path { --joh-scrub: 1; }
.joh-path.is-visible::before {
	transform: scaleY(var(--joh-scrub));
	transform-origin: top center;
	transition: transform 0.15s linear;
}

/* ---- Bento: orchestrated tile entrances ---- */
.joh-bento.joh-stagger > * {
	opacity: 0;
	transform: translateY(28px) scale(0.985);
	transition: opacity 0.65s ease, transform 0.85s var(--joh-ease-out);
}
.joh-bento.joh-stagger.is-visible > * { opacity: 1; transform: none; }
.joh-bento.joh-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.joh-bento.joh-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.joh-bento.joh-stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.joh-bento.joh-stagger.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.no-js .joh-bento.joh-stagger > * { opacity: 1; transform: none; }

/* ---- Footer script watermark ---- */
.joh-footer { overflow: hidden; }
.joh-footer-script-mark {
	font-family: var(--joh-font-script);
	font-weight: 600;
	font-size: clamp(3.2rem, 4rem + 5vw, 8.8rem);
	line-height: 0.95;
	text-align: center;
	white-space: nowrap;
	color: rgba(231, 199, 102, 0.13);
	transform: rotate(-1.5deg);
	padding: clamp(2.2rem, 6vw, 4.2rem) 1rem 0;
	margin-bottom: -0.6rem;
	pointer-events: none;
	user-select: none;
}
@media (max-width: 1020px) {
	.joh-footer-script-mark { font-size: clamp(2.2rem, 9.5vw, 6rem); }
}

/* ---- 404 / search, out of stock chrome ---- */
.joh-page-hero.joh-404 { text-align: center; }
.joh-page-hero.joh-404 > * { max-width: 640px; margin-inline: auto; }
.joh-page-hero.joh-404 .joh-btn-row { justify-content: center; }
.joh-page-hero.joh-404 .joh-404-kicker {
	font-family: var(--joh-font-script);
	font-size: 1.6rem;
	color: var(--joh-gold-bright);
	margin: 0 0 0.7rem;
}
.joh-main .wp-block-search { max-width: 620px; margin-top: 1.4rem; }
.joh-main .wp-block-search__input {
	border-radius: 14px;
	border: 1.5px solid rgba(51, 61, 30, 0.25);
	padding: 0.85rem 1.1rem;
	font: inherit;
	font-size: 1.05rem;
	background: var(--joh-white);
}
.joh-main .wp-block-search__input:focus-visible {
	outline: 2px solid var(--joh-gold);
	outline-offset: 2px;
}
.joh-main .wp-block-search__button {
	border-radius: 14px;
	border: none;
	background: var(--joh-gold);
	color: var(--joh-olive-900);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.85rem 1.4rem;
	cursor: pointer;
}
.joh-main .wp-block-search__button:hover { background: var(--joh-gold-bright); }
.joh-main .wp-block-post-template > li {
	list-style: none;
	border-bottom: 1px solid rgba(51, 61, 30, 0.14);
	padding: 1.5rem 0.2rem;
	max-width: 760px;
}
.joh-main .wp-block-post-template > li > a { text-decoration: none; }
.joh-main .wp-block-post-template .wp-block-post-title {
	font-family: var(--joh-font-display);
	font-size: 1.55rem;
}
.joh-main .wp-block-post-template .wp-block-post-title a { color: var(--joh-olive-900); }
.joh-main .wp-block-query-no-results p { font-size: 1.1rem; }

/* ---- Wide screens: breathe, don't stretch ---- */
@media (min-width: 1600px) {
	:root { --joh-section-pad: clamp(5.5rem, 8.5vw, 8.5rem); }
	.joh-statement-grid { max-width: 1100px; margin-inline: auto; }
}

/* ---- V6 header fit on small phones (Quick Exit + menu toggle must stay on-screen) ---- */
@media (max-width: 620px) {
	.joh-header-inner { padding: 0.4rem 0.7rem; gap: 0.55rem; }
	.joh-actions { gap: 0.45rem; }
}
@media (max-width: 480px) {
	.joh-brand-word { display: none; }
	.joh-brand-emblem { width: 40px; height: 40px; }
}

/* ---- V6 reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.joh-bento.joh-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
	.joh-path.is-visible::before { transform: scaleY(1) !important; }
}

/* --------------------------------------------------------------------------
   18. V7 CLARITY LAYER (2026-09-18) — one axis, still moments, honest materials
   --------------------------------------------------------------------------
   The doorway is the single idea. Everything else goes quiet: no marquee,
   no tilt, no glow pulse, no staggered entrances, no numeral decoration,
   no script kickers. One hero rise, then stillness. Buttons are rectangles.
   -------------------------------------------------------------------------- */

/* Layout axis: header, sections, and footer share one centered frame.
   Templates render post content in flow layout, so full-width sections
   measure against the real viewport — no 50vw scrollbar offset, and
   no left-stuck width caps on large monitors. */
.entry-content .alignfull,
.joh-section,
.joh-statement,
.joh-band,
.joh-media-band,
.joh-marquee {
	box-sizing: border-box;
}
.entry-content > :where(p, h1, h2, h3, h4, ul, ol, blockquote, pre, table) {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.joh-section.alignfull {
	padding-left: max(1.25rem, calc((100% - 1160px) / 2));
	padding-right: max(1.25rem, calc((100% - 1160px) / 2));
}

/* Stillness: content never sits hidden waiting for a trigger. */
.joh-reveal,
.joh-stagger > *,
.joh-line-mask > span,
.joh-arch-reveal,
.joh-media-band .joh-band-photo,
.joh-path::before,
.joh-path li .joh-path-icon {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
}
[data-parallax] {
	transform: none !important;
}
.joh-marquee {
	display: none;
}
.joh-ph-fig {
	transform: none;
}

/* Buttons: rectangles with weight, not capsules. */
.joh-btn {
	border-radius: 8px;
	font-weight: 600;
	box-sizing: border-box;
}
.joh-btn-exit {
	border-radius: 8px;
}

/* Script hand-lettering is retired everywhere except Ava's signature. */
.joh-script,
.joh-script-light,
.joh-footer-script,
.joh-footer-script-mark,
.joh-hero-kicker,
.joh-hero-note,
.joh-404-kicker {
	font-family: var(--joh-font-body) !important;
	font-size: 1.02rem !important;
	font-weight: 400 !important;
	letter-spacing: 0;
	color: inherit;
	opacity: 0.85;
}

/* Section labels: small gold text, sentence case, no chrome. */
.joh-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--joh-gold-deep);
	margin: 0 0 0.6rem;
}
.joh-band .joh-label,
.joh-media-band .joh-label {
	color: var(--joh-gold-bright);
}